BJ_ZTEITS-Developers / parking-cloud-yudao

Commit f564137f050d6d64902becbf4ab37f2b003d2995

Authored by YunaiV
1 parent 63900da8

v3.7.0 新增暗色菜单风格主题

Inline Side-by-side
Showing 8 changed files with 97 additions and 105 deletions
yudao-ui-admin/src/assets/styles/sidebar.scss
  View file @f564137
... ... @@ -3,15 +3,15 @@
3 3 .main-container {
4 4 min-height: 100%;
5 5 transition: margin-left .28s;
6   - margin-left: $sideBarWidth;
  6 + margin-left: $base-sidebar-width;
7 7 position: relative;
8 8 }
9 9  
10 10 .sidebar-container {
11 11 -webkit-transition: width .28s;
12 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 15 height: 100%;
16 16 position: fixed;
17 17 font-size: 0px;
... ... @@ -81,12 +81,12 @@
81 81 }
82 82  
83 83 & .theme-dark .is-active > .el-submenu__title {
84   - color: $subMenuActiveText !important;
  84 + color: $base-menu-color-active !important;
85 85 }
86 86  
87 87 & .nest-menu .el-submenu>.el-submenu__title,
88 88 & .el-submenu .el-menu-item {
89   - min-width: $sideBarWidth !important;
  89 + min-width: $base-sidebar-width !important;
90 90  
91 91 &:hover {
92 92 background-color: rgba(0, 0, 0, 0.06) !important;
... ... @@ -95,10 +95,10 @@
95 95  
96 96 & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
97 97 & .theme-dark .el-submenu .el-menu-item {
98   - background-color: $subMenuBg !important;
  98 + background-color: $base-sub-menu-background !important;
99 99  
100 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 154 }
155 155  
156 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 160 // mobile responsive
... ... @@ -165,14 +165,14 @@
165 165  
166 166 .sidebar-container {
167 167 transition: transform .28s;
168   - width: $sideBarWidth !important;
  168 + width: $base-sidebar-width !important;
169 169 }
170 170  
171 171 &.hideSidebar {
172 172 .sidebar-container {
173 173 pointer-events: none;
174 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
  View file @f564137
... ... @@ -8,37 +8,47 @@ $tiffany: #4AB7BD;
8 8 $yellow:#FEC171;
9 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 41 // the :export directive is the magic sauce for webpack
30 42 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
31 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
  View file @f564137
1 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 3 <transition name="sidebarLogoFade">
4 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 7 </router-link>
8 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 11 </router-link>
12 12 </transition>
13 13 </div>
... ... @@ -29,7 +29,7 @@ export default {
29 29 variables() {
30 30 return variables;
31 31 },
32   - sideTheme() {
  32 + sideTheme() {
33 33 return this.$store.state.settings.sideTheme
34 34 }
35 35 },
... ...
yudao-ui-admin/src/layout/components/Sidebar/index.vue
  View file @f564137
1 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 24 </template>
25 25  
26 26 <script>
... ... @@ -30,28 +30,28 @@ import SidebarItem from &quot;./SidebarItem&quot;;
30 30 import variables from "@/assets/styles/variables.scss";
31 31  
32 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 57 </script>
... ...
yudao-ui-admin/src/layout/index.vue
  View file @f564137
1 1 <template>
2 2 <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
3 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 5 <div :class="{hasTagsView:needTagsView}" class="main-container">
6 6 <div :class="{'fixed-header':fixedHeader}">
7 7 <navbar />
... ... @@ -93,7 +93,7 @@ export default {
93 93 top: 0;
94 94 right: 0;
95 95 z-index: 9;
96   - width: calc(100% - #{$sideBarWidth});
  96 + width: calc(100% - #{$base-sidebar-width});
97 97 transition: width 0.28s;
98 98 }
99 99  
... ...
yudao-ui-admin/src/main.js
  View file @f564137
... ... @@ -21,7 +21,6 @@ import {
21 21 resetForm,
22 22 addDateRange,
23 23 addBeginAndEndTime,
24   - selectDictLabel,
25 24 download,
26 25 handleTree,
27 26 downloadExcel,
... ... @@ -45,7 +44,6 @@ Vue.prototype.parseTime = parseTime
45 44 Vue.prototype.resetForm = resetForm
46 45 Vue.prototype.addDateRange = addDateRange
47 46 Vue.prototype.addBeginAndEndTime = addBeginAndEndTime
48   -Vue.prototype.selectDictLabel = selectDictLabel
49 47 Vue.prototype.getDictDatas = getDictDatas
50 48 Vue.prototype.getDictDatas2 = getDictDatas2
51 49 Vue.prototype.getDictDataLabel = getDictDataLabel
... ...
yudao-ui-admin/src/utils/ruoyi.js
  View file @f564137
... ... @@ -100,18 +100,6 @@ export function addBeginAndEndTime(params, dateRange, propName) {
100 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 104 export function download(fileName) {
117 105 window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;
... ...
yudao-ui-admin/src/views/infra/config/index.vue
  View file @f564137
... ... @@ -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 189 cancel() {
194 190 this.open = false;
... ...