diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss index bb12cb77e..8fe1961b2 100644 --- a/ruoyi-ui/src/assets/styles/ruoyi.scss +++ b/ruoyi-ui/src/assets/styles/ruoyi.scss @@ -64,7 +64,7 @@ margin-top: 6vh !important; } -.el-dialog .el-dialog__body { +.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body { overflow: auto; overflow-x: hidden; max-height: 70vh; @@ -137,7 +137,7 @@ /** 表格更多操作下拉样式 */ .el-table .el-dropdown-link { cursor: pointer; - color: #1890ff; + color: #409EFF; margin-left: 5px; } diff --git a/ruoyi-ui/src/assets/styles/sidebar.scss b/ruoyi-ui/src/assets/styles/sidebar.scss index 2f368c3dd..d2a7453f3 100644 --- a/ruoyi-ui/src/assets/styles/sidebar.scss +++ b/ruoyi-ui/src/assets/styles/sidebar.scss @@ -3,15 +3,15 @@ .main-container { min-height: 100%; transition: margin-left .28s; - margin-left: $sideBarWidth; + margin-left: $base-sidebar-width; position: relative; } .sidebar-container { -webkit-transition: width .28s; transition: width 0.28s; - width: $sideBarWidth !important; - background-color: $menuBg; + width: $base-sidebar-width !important; + background-color: $base-menu-background; height: 100%; position: fixed; font-size: 0px; @@ -81,12 +81,12 @@ } & .theme-dark .is-active > .el-submenu__title { - color: $subMenuActiveText !important; + color: $base-menu-color-active !important; } & .nest-menu .el-submenu>.el-submenu__title, & .el-submenu .el-menu-item { - min-width: $sideBarWidth !important; + min-width: $base-sidebar-width !important; &:hover { background-color: rgba(0, 0, 0, 0.06) !important; @@ -95,10 +95,10 @@ & .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .el-submenu .el-menu-item { - background-color: $subMenuBg !important; + background-color: $base-sub-menu-background !important; &:hover { - background-color: $subMenuHover !important; + background-color: $base-sub-menu-hover !important; } } } @@ -154,7 +154,7 @@ } .el-menu--collapse .el-menu .el-submenu { - min-width: $sideBarWidth !important; + min-width: $base-sidebar-width !important; } // mobile responsive @@ -165,14 +165,14 @@ .sidebar-container { transition: transform .28s; - width: $sideBarWidth !important; + width: $base-sidebar-width !important; } &.hideSidebar { .sidebar-container { pointer-events: none; transition-duration: 0.3s; - transform: translate3d(-$sideBarWidth, 0, 0); + transform: translate3d(-$base-sidebar-width, 0, 0); } } } diff --git a/ruoyi-ui/src/assets/styles/variables.scss b/ruoyi-ui/src/assets/styles/variables.scss index 452a1ece0..34484d47e 100644 --- a/ruoyi-ui/src/assets/styles/variables.scss +++ b/ruoyi-ui/src/assets/styles/variables.scss @@ -8,37 +8,47 @@ $tiffany: #4AB7BD; $yellow:#FEC171; $panGreen: #30B08F; -// sidebar -$menuText:#bfcbd9; -$menuActiveText:#409EFF; -$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 +// 默认菜单主题风格 +$base-menu-color:#bfcbd9; +$base-menu-color-active:#f4f4f5; +$base-menu-background:#304156; +$base-logo-title-color: #ffffff; -$menuBg:#304156; -$menuHover:#263445; -$sidebarTitle: #ffffff; +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; -$menuLightBg:#ffffff; -$menuLightHover:#f0f1f5; -$sidebarLightTitle: #001529; +$base-sub-menu-background:#1f2d3d; +$base-sub-menu-hover:#001528; -$subMenuBg:#1f2d3d; -$subMenuHover:#001528; +// 自定义暗色菜单风格 +/** +$base-menu-color:hsla(0,0%,100%,.65); +$base-menu-color-active:#fff; +$base-menu-background:#001529; +$base-logo-title-color: #ffffff; -$sideBarWidth: 200px; +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background:#000c17; +$base-sub-menu-hover:#001528; +*/ + +$base-sidebar-width: 200px; // the :export directive is the magic sauce for webpack // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass :export { - menuText: $menuText; - menuActiveText: $menuActiveText; - subMenuActiveText: $subMenuActiveText; - menuBg: $menuBg; - menuHover: $menuHover; - menuLightBg: $menuLightBg; - menuLightHover: $menuLightHover; - subMenuBg: $subMenuBg; - subMenuHover: $subMenuHover; - sideBarWidth: $sideBarWidth; - sidebarTitle: $sidebarTitle; - sidebarLightTitle: $sidebarLightTitle + menuColor: $base-menu-color; + menuLightColor: $base-menu-light-color; + menuColorActive: $base-menu-color-active; + menuBackground: $base-menu-background; + menuLightBackground: $base-menu-light-background; + subMenuBackground: $base-sub-menu-background; + subMenuHover: $base-sub-menu-hover; + sideBarWidth: $base-sidebar-width; + logoTitleColor: $base-logo-title-color; + logoLightTitleColor: $base-logo-light-title-color } diff --git a/ruoyi-ui/src/components/ThemePicker/index.vue b/ruoyi-ui/src/components/ThemePicker/index.vue index b0df471ca..5589f5fff 100644 --- a/ruoyi-ui/src/components/ThemePicker/index.vue +++ b/ruoyi-ui/src/components/ThemePicker/index.vue @@ -31,13 +31,24 @@ export default { immediate: true }, async theme(val) { + await this.setTheme(val) + } + }, + created() { + if(this.defaultTheme !== ORIGINAL_THEME) { + this.setTheme(this.defaultTheme) + } + }, + + methods: { + async setTheme(val) { const oldVal = this.chalk ? this.theme : ORIGINAL_THEME if (typeof val !== 'string') return const themeCluster = this.getThemeCluster(val.replace('#', '')) const originalCluster = this.getThemeCluster(oldVal.replace('#', '')) const $message = this.$message({ - message: ' Compiling the theme', + message: ' 正在切换主题,请稍后...', customClass: 'theme-message', type: 'success', duration: 0, @@ -82,10 +93,9 @@ export default { this.$emit('change', val) $message.close() - } - }, - methods: { + }, + updateStyle(style, oldCluster, newCluster) { let newStyle = style oldCluster.forEach((color, index) => { diff --git a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue index 0de00ce14..416968737 100644 --- a/ruoyi-ui/src/layout/components/Sidebar/Logo.vue +++ b/ruoyi-ui/src/layout/components/Sidebar/Logo.vue @@ -1,13 +1,13 @@