Commit f564137f050d6d64902becbf4ab37f2b003d2995
1 parent
63900da8
v3.7.0 新增暗色菜单风格主题
Showing
8 changed files
with
97 additions
and
105 deletions
yudao-ui-admin/src/assets/styles/sidebar.scss
| @@ -3,15 +3,15 @@ | @@ -3,15 +3,15 @@ | ||
| 3 | .main-container { | 3 | .main-container { |
| 4 | min-height: 100%; | 4 | min-height: 100%; |
| 5 | transition: margin-left .28s; | 5 | transition: margin-left .28s; |
| 6 | - margin-left: $sideBarWidth; | 6 | + margin-left: $base-sidebar-width; |
| 7 | position: relative; | 7 | position: relative; |
| 8 | } | 8 | } |
| 9 | 9 | ||
| 10 | .sidebar-container { | 10 | .sidebar-container { |
| 11 | -webkit-transition: width .28s; | 11 | -webkit-transition: width .28s; |
| 12 | transition: width 0.28s; | 12 | transition: width 0.28s; |
| 13 | - width: $sideBarWidth !important; | ||
| 14 | - background-color: $menuBg; | 13 | + width: $base-sidebar-width !important; |
| 14 | + background-color: $base-menu-background; | ||
| 15 | height: 100%; | 15 | height: 100%; |
| 16 | position: fixed; | 16 | position: fixed; |
| 17 | font-size: 0px; | 17 | font-size: 0px; |
| @@ -81,12 +81,12 @@ | @@ -81,12 +81,12 @@ | ||
| 81 | } | 81 | } |
| 82 | 82 | ||
| 83 | & .theme-dark .is-active > .el-submenu__title { | 83 | & .theme-dark .is-active > .el-submenu__title { |
| 84 | - color: $subMenuActiveText !important; | 84 | + color: $base-menu-color-active !important; |
| 85 | } | 85 | } |
| 86 | 86 | ||
| 87 | & .nest-menu .el-submenu>.el-submenu__title, | 87 | & .nest-menu .el-submenu>.el-submenu__title, |
| 88 | & .el-submenu .el-menu-item { | 88 | & .el-submenu .el-menu-item { |
| 89 | - min-width: $sideBarWidth !important; | 89 | + min-width: $base-sidebar-width !important; |
| 90 | 90 | ||
| 91 | &:hover { | 91 | &:hover { |
| 92 | background-color: rgba(0, 0, 0, 0.06) !important; | 92 | background-color: rgba(0, 0, 0, 0.06) !important; |
| @@ -95,10 +95,10 @@ | @@ -95,10 +95,10 @@ | ||
| 95 | 95 | ||
| 96 | & .theme-dark .nest-menu .el-submenu>.el-submenu__title, | 96 | & .theme-dark .nest-menu .el-submenu>.el-submenu__title, |
| 97 | & .theme-dark .el-submenu .el-menu-item { | 97 | & .theme-dark .el-submenu .el-menu-item { |
| 98 | - background-color: $subMenuBg !important; | 98 | + background-color: $base-sub-menu-background !important; |
| 99 | 99 | ||
| 100 | &:hover { | 100 | &:hover { |
| 101 | - background-color: $subMenuHover !important; | 101 | + background-color: $base-sub-menu-hover !important; |
| 102 | } | 102 | } |
| 103 | } | 103 | } |
| 104 | } | 104 | } |
| @@ -154,7 +154,7 @@ | @@ -154,7 +154,7 @@ | ||
| 154 | } | 154 | } |
| 155 | 155 | ||
| 156 | .el-menu--collapse .el-menu .el-submenu { | 156 | .el-menu--collapse .el-menu .el-submenu { |
| 157 | - min-width: $sideBarWidth !important; | 157 | + min-width: $base-sidebar-width !important; |
| 158 | } | 158 | } |
| 159 | 159 | ||
| 160 | // mobile responsive | 160 | // mobile responsive |
| @@ -165,14 +165,14 @@ | @@ -165,14 +165,14 @@ | ||
| 165 | 165 | ||
| 166 | .sidebar-container { | 166 | .sidebar-container { |
| 167 | transition: transform .28s; | 167 | transition: transform .28s; |
| 168 | - width: $sideBarWidth !important; | 168 | + width: $base-sidebar-width !important; |
| 169 | } | 169 | } |
| 170 | 170 | ||
| 171 | &.hideSidebar { | 171 | &.hideSidebar { |
| 172 | .sidebar-container { | 172 | .sidebar-container { |
| 173 | pointer-events: none; | 173 | pointer-events: none; |
| 174 | transition-duration: 0.3s; | 174 | transition-duration: 0.3s; |
| 175 | - transform: translate3d(-$sideBarWidth, 0, 0); | 175 | + transform: translate3d(-$base-sidebar-width, 0, 0); |
| 176 | } | 176 | } |
| 177 | } | 177 | } |
| 178 | } | 178 | } |
yudao-ui-admin/src/assets/styles/variables.scss
| @@ -8,37 +8,47 @@ $tiffany: #4AB7BD; | @@ -8,37 +8,47 @@ $tiffany: #4AB7BD; | ||
| 8 | $yellow:#FEC171; | 8 | $yellow:#FEC171; |
| 9 | $panGreen: #30B08F; | 9 | $panGreen: #30B08F; |
| 10 | 10 | ||
| 11 | -// sidebar | ||
| 12 | -$menuText:#bfcbd9; | ||
| 13 | -$menuActiveText:#409EFF; | ||
| 14 | -$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 | 11 | +// 默认菜单主题风格 |
| 12 | +$base-menu-color:#bfcbd9; | ||
| 13 | +$base-menu-color-active:#f4f4f5; | ||
| 14 | +$base-menu-background:#304156; | ||
| 15 | +$base-logo-title-color: #ffffff; | ||
| 15 | 16 | ||
| 16 | -$menuBg:#304156; | ||
| 17 | -$menuHover:#263445; | ||
| 18 | -$sidebarTitle: #ffffff; | 17 | +$base-menu-light-color:rgba(0,0,0,.70); |
| 18 | +$base-menu-light-background:#ffffff; | ||
| 19 | +$base-logo-light-title-color: #001529; | ||
| 19 | 20 | ||
| 20 | -$menuLightBg:#ffffff; | ||
| 21 | -$menuLightHover:#f0f1f5; | ||
| 22 | -$sidebarLightTitle: #001529; | 21 | +$base-sub-menu-background:#1f2d3d; |
| 22 | +$base-sub-menu-hover:#001528; | ||
| 23 | 23 | ||
| 24 | -$subMenuBg:#1f2d3d; | ||
| 25 | -$subMenuHover:#001528; | 24 | +// 自定义暗色菜单风格 |
| 25 | +/** | ||
| 26 | +$base-menu-color:hsla(0,0%,100%,.65); | ||
| 27 | +$base-menu-color-active:#fff; | ||
| 28 | +$base-menu-background:#001529; | ||
| 29 | +$base-logo-title-color: #ffffff; | ||
| 26 | 30 | ||
| 27 | -$sideBarWidth: 200px; | 31 | +$base-menu-light-color:rgba(0,0,0,.70); |
| 32 | +$base-menu-light-background:#ffffff; | ||
| 33 | +$base-logo-light-title-color: #001529; | ||
| 34 | + | ||
| 35 | +$base-sub-menu-background:#000c17; | ||
| 36 | +$base-sub-menu-hover:#001528; | ||
| 37 | +*/ | ||
| 38 | + | ||
| 39 | +$base-sidebar-width: 200px; | ||
| 28 | 40 | ||
| 29 | // the :export directive is the magic sauce for webpack | 41 | // the :export directive is the magic sauce for webpack |
| 30 | // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass | 42 | // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass |
| 31 | :export { | 43 | :export { |
| 32 | - menuText: $menuText; | ||
| 33 | - menuActiveText: $menuActiveText; | ||
| 34 | - subMenuActiveText: $subMenuActiveText; | ||
| 35 | - menuBg: $menuBg; | ||
| 36 | - menuHover: $menuHover; | ||
| 37 | - menuLightBg: $menuLightBg; | ||
| 38 | - menuLightHover: $menuLightHover; | ||
| 39 | - subMenuBg: $subMenuBg; | ||
| 40 | - subMenuHover: $subMenuHover; | ||
| 41 | - sideBarWidth: $sideBarWidth; | ||
| 42 | - sidebarTitle: $sidebarTitle; | ||
| 43 | - sidebarLightTitle: $sidebarLightTitle | 44 | + menuColor: $base-menu-color; |
| 45 | + menuLightColor: $base-menu-light-color; | ||
| 46 | + menuColorActive: $base-menu-color-active; | ||
| 47 | + menuBackground: $base-menu-background; | ||
| 48 | + menuLightBackground: $base-menu-light-background; | ||
| 49 | + subMenuBackground: $base-sub-menu-background; | ||
| 50 | + subMenuHover: $base-sub-menu-hover; | ||
| 51 | + sideBarWidth: $base-sidebar-width; | ||
| 52 | + logoTitleColor: $base-logo-title-color; | ||
| 53 | + logoLightTitleColor: $base-logo-light-title-color | ||
| 44 | } | 54 | } |
yudao-ui-admin/src/layout/components/Sidebar/Logo.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> | 2 | + <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> |
| 3 | <transition name="sidebarLogoFade"> | 3 | <transition name="sidebarLogoFade"> |
| 4 | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> | 4 | <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> |
| 5 | - <img v-if="logo" :src="logo" class="sidebar-logo"> | ||
| 6 | - <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> | 5 | + <img v-if="logo" :src="logo" class="sidebar-logo" /> |
| 6 | + <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> | ||
| 7 | </router-link> | 7 | </router-link> |
| 8 | <router-link v-else key="expand" class="sidebar-logo-link" to="/"> | 8 | <router-link v-else key="expand" class="sidebar-logo-link" to="/"> |
| 9 | - <img v-if="logo" :src="logo" class="sidebar-logo"> | ||
| 10 | - <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> | 9 | + <img v-if="logo" :src="logo" class="sidebar-logo" /> |
| 10 | + <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1> | ||
| 11 | </router-link> | 11 | </router-link> |
| 12 | </transition> | 12 | </transition> |
| 13 | </div> | 13 | </div> |
| @@ -29,7 +29,7 @@ export default { | @@ -29,7 +29,7 @@ export default { | ||
| 29 | variables() { | 29 | variables() { |
| 30 | return variables; | 30 | return variables; |
| 31 | }, | 31 | }, |
| 32 | - sideTheme() { | 32 | + sideTheme() { |
| 33 | return this.$store.state.settings.sideTheme | 33 | return this.$store.state.settings.sideTheme |
| 34 | } | 34 | } |
| 35 | }, | 35 | }, |
yudao-ui-admin/src/layout/components/Sidebar/index.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> | ||
| 3 | - <logo v-if="showLogo" :collapse="isCollapse" /> | ||
| 4 | - <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> | ||
| 5 | - <el-menu | ||
| 6 | - :default-active="activeMenu" | ||
| 7 | - :collapse="isCollapse" | ||
| 8 | - :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg" | ||
| 9 | - :text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'" | ||
| 10 | - :unique-opened="true" | ||
| 11 | - :active-text-color="settings.theme" | ||
| 12 | - :collapse-transition="false" | ||
| 13 | - mode="vertical" | ||
| 14 | - > | ||
| 15 | - <sidebar-item | ||
| 16 | - v-for="(route, index) in sidebarRouters" | ||
| 17 | - :key="route.path + index" | ||
| 18 | - :item="route" | ||
| 19 | - :base-path="route.path" | ||
| 20 | - /> | ||
| 21 | - </el-menu> | ||
| 22 | - </el-scrollbar> | ||
| 23 | - </div> | 2 | + <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }"> |
| 3 | + <logo v-if="showLogo" :collapse="isCollapse" /> | ||
| 4 | + <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> | ||
| 5 | + <el-menu | ||
| 6 | + :default-active="activeMenu" | ||
| 7 | + :collapse="isCollapse" | ||
| 8 | + :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground" | ||
| 9 | + :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor" | ||
| 10 | + :unique-opened="true" | ||
| 11 | + :active-text-color="settings.theme" | ||
| 12 | + :collapse-transition="false" | ||
| 13 | + mode="vertical" | ||
| 14 | + > | ||
| 15 | + <sidebar-item | ||
| 16 | + v-for="(route, index) in sidebarRouters" | ||
| 17 | + :key="route.path + index" | ||
| 18 | + :item="route" | ||
| 19 | + :base-path="route.path" | ||
| 20 | + /> | ||
| 21 | + </el-menu> | ||
| 22 | + </el-scrollbar> | ||
| 23 | + </div> | ||
| 24 | </template> | 24 | </template> |
| 25 | 25 | ||
| 26 | <script> | 26 | <script> |
| @@ -30,28 +30,28 @@ import SidebarItem from "./SidebarItem"; | @@ -30,28 +30,28 @@ import SidebarItem from "./SidebarItem"; | ||
| 30 | import variables from "@/assets/styles/variables.scss"; | 30 | import variables from "@/assets/styles/variables.scss"; |
| 31 | 31 | ||
| 32 | export default { | 32 | export default { |
| 33 | - components: { SidebarItem, Logo }, | ||
| 34 | - computed: { | ||
| 35 | - ...mapState(["settings"]), | ||
| 36 | - ...mapGetters(["sidebarRouters", "sidebar"]), | ||
| 37 | - activeMenu() { | ||
| 38 | - const route = this.$route; | ||
| 39 | - const { meta, path } = route; | ||
| 40 | - // if set path, the sidebar will highlight the path you set | ||
| 41 | - if (meta.activeMenu) { | ||
| 42 | - return meta.activeMenu; | ||
| 43 | - } | ||
| 44 | - return path; | ||
| 45 | - }, | ||
| 46 | - showLogo() { | ||
| 47 | - return this.$store.state.settings.sidebarLogo; | ||
| 48 | - }, | ||
| 49 | - variables() { | ||
| 50 | - return variables; | ||
| 51 | - }, | ||
| 52 | - isCollapse() { | ||
| 53 | - return !this.sidebar.opened; | ||
| 54 | - } | 33 | + components: { SidebarItem, Logo }, |
| 34 | + computed: { | ||
| 35 | + ...mapState(["settings"]), | ||
| 36 | + ...mapGetters(["sidebarRouters", "sidebar"]), | ||
| 37 | + activeMenu() { | ||
| 38 | + const route = this.$route; | ||
| 39 | + const { meta, path } = route; | ||
| 40 | + // if set path, the sidebar will highlight the path you set | ||
| 41 | + if (meta.activeMenu) { | ||
| 42 | + return meta.activeMenu; | ||
| 43 | + } | ||
| 44 | + return path; | ||
| 45 | + }, | ||
| 46 | + showLogo() { | ||
| 47 | + return this.$store.state.settings.sidebarLogo; | ||
| 48 | + }, | ||
| 49 | + variables() { | ||
| 50 | + return variables; | ||
| 51 | + }, | ||
| 52 | + isCollapse() { | ||
| 53 | + return !this.sidebar.opened; | ||
| 55 | } | 54 | } |
| 55 | + } | ||
| 56 | }; | 56 | }; |
| 57 | </script> | 57 | </script> |
yudao-ui-admin/src/layout/index.vue
| 1 | <template> | 1 | <template> |
| 2 | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> | 2 | <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> |
| 3 | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> | 3 | <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> |
| 4 | - <sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> | 4 | + <sidebar class="sidebar-container"/> |
| 5 | <div :class="{hasTagsView:needTagsView}" class="main-container"> | 5 | <div :class="{hasTagsView:needTagsView}" class="main-container"> |
| 6 | <div :class="{'fixed-header':fixedHeader}"> | 6 | <div :class="{'fixed-header':fixedHeader}"> |
| 7 | <navbar /> | 7 | <navbar /> |
| @@ -93,7 +93,7 @@ export default { | @@ -93,7 +93,7 @@ export default { | ||
| 93 | top: 0; | 93 | top: 0; |
| 94 | right: 0; | 94 | right: 0; |
| 95 | z-index: 9; | 95 | z-index: 9; |
| 96 | - width: calc(100% - #{$sideBarWidth}); | 96 | + width: calc(100% - #{$base-sidebar-width}); |
| 97 | transition: width 0.28s; | 97 | transition: width 0.28s; |
| 98 | } | 98 | } |
| 99 | 99 |
yudao-ui-admin/src/main.js
| @@ -21,7 +21,6 @@ import { | @@ -21,7 +21,6 @@ import { | ||
| 21 | resetForm, | 21 | resetForm, |
| 22 | addDateRange, | 22 | addDateRange, |
| 23 | addBeginAndEndTime, | 23 | addBeginAndEndTime, |
| 24 | - selectDictLabel, | ||
| 25 | download, | 24 | download, |
| 26 | handleTree, | 25 | handleTree, |
| 27 | downloadExcel, | 26 | downloadExcel, |
| @@ -45,7 +44,6 @@ Vue.prototype.parseTime = parseTime | @@ -45,7 +44,6 @@ Vue.prototype.parseTime = parseTime | ||
| 45 | Vue.prototype.resetForm = resetForm | 44 | Vue.prototype.resetForm = resetForm |
| 46 | Vue.prototype.addDateRange = addDateRange | 45 | Vue.prototype.addDateRange = addDateRange |
| 47 | Vue.prototype.addBeginAndEndTime = addBeginAndEndTime | 46 | Vue.prototype.addBeginAndEndTime = addBeginAndEndTime |
| 48 | -Vue.prototype.selectDictLabel = selectDictLabel | ||
| 49 | Vue.prototype.getDictDatas = getDictDatas | 47 | Vue.prototype.getDictDatas = getDictDatas |
| 50 | Vue.prototype.getDictDatas2 = getDictDatas2 | 48 | Vue.prototype.getDictDatas2 = getDictDatas2 |
| 51 | Vue.prototype.getDictDataLabel = getDictDataLabel | 49 | Vue.prototype.getDictDataLabel = getDictDataLabel |
yudao-ui-admin/src/utils/ruoyi.js
| @@ -100,18 +100,6 @@ export function addBeginAndEndTime(params, dateRange, propName) { | @@ -100,18 +100,6 @@ export function addBeginAndEndTime(params, dateRange, propName) { | ||
| 100 | return params; | 100 | return params; |
| 101 | } | 101 | } |
| 102 | 102 | ||
| 103 | -// 回显数据字典 原若依所保留，请使用 dict.js 中的新方法 | ||
| 104 | -export function selectDictLabel(datas, value) { | ||
| 105 | - var actions = []; | ||
| 106 | - Object.keys(datas).some((key) => { | ||
| 107 | - if (datas[key].dictValue == ('' + value)) { | ||
| 108 | - actions.push(datas[key].dictLabel); | ||
| 109 | - return true; | ||
| 110 | - } | ||
| 111 | - }) | ||
| 112 | - return actions.join(''); | ||
| 113 | -} | ||
| 114 | - | ||
| 115 | // 通用下载方法 | 103 | // 通用下载方法 |
| 116 | export function download(fileName) { | 104 | export function download(fileName) { |
| 117 | window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true; | 105 | window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true; |
yudao-ui-admin/src/views/infra/config/index.vue
| @@ -185,10 +185,6 @@ export default { | @@ -185,10 +185,6 @@ export default { | ||
| 185 | } | 185 | } |
| 186 | ); | 186 | ); |
| 187 | }, | 187 | }, |
| 188 | - // 参数系统内置字典翻译 | ||
| 189 | - typeFormat(row, column) { | ||
| 190 | - return this.selectDictLabel(this.typeOptions, row.type); | ||
| 191 | - }, | ||
| 192 | // 取消按钮 | 188 | // 取消按钮 |
| 193 | cancel() { | 189 | cancel() { |
| 194 | this.open = false; | 190 | this.open = false; |