huangge1199/vue-pro
1
0
Fork 0
mirror of https://gitee.com/huangge1199_admin/vue-pro.git synced 2024-11-22 23:31:52 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
YunaiV 2022-02-17 09:48:39 +08:00
parent 63900da8c2
commit f564137f05
8 changed files with 97 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
yudao-ui-admin/src/assets/styles/sidebar.scss
View File

@ -3,15 +3,15 @@
.main-container { .main-container {
min-height: 100%; min-height: 100%;
transition: margin-left .28s; transition: margin-left .28s;
margin-left: $sideBarWidth; margin-left: $base-sidebar-width;
position: relative; position: relative;
} }
.sidebar-container { .sidebar-container {
-webkit-transition: width .28s; -webkit-transition: width .28s;
transition: width 0.28s; transition: width 0.28s;
width: $sideBarWidth !important; width: $base-sidebar-width !important;
background-color: $menuBg; background-color: $base-menu-background;
height: 100%; height: 100%;
position: fixed; position: fixed;
font-size: 0px; font-size: 0px;
@ -81,12 +81,12 @@
} }
& .theme-dark .is-active > .el-submenu__title { & .theme-dark .is-active > .el-submenu__title {
color: $subMenuActiveText !important; color: $base-menu-color-active !important;
} }
& .nest-menu .el-submenu>.el-submenu__title, & .nest-menu .el-submenu>.el-submenu__title,
& .el-submenu .el-menu-item { & .el-submenu .el-menu-item {
min-width: $sideBarWidth !important; min-width: $base-sidebar-width !important;
&:hover { &:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.06) !important;
@ -95,10 +95,10 @@
& .theme-dark .nest-menu .el-submenu>.el-submenu__title, & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
& .theme-dark .el-submenu .el-menu-item { & .theme-dark .el-submenu .el-menu-item {
background-color: $subMenuBg !important; background-color: $base-sub-menu-background !important;
&:hover { &:hover {
background-color: $subMenuHover !important; background-color: $base-sub-menu-hover !important;
} }
} }
} }
@ -154,7 +154,7 @@
} }
.el-menu--collapse .el-menu .el-submenu { .el-menu--collapse .el-menu .el-submenu {
min-width: $sideBarWidth !important; min-width: $base-sidebar-width !important;
} }
// mobile responsive // mobile responsive
@ -165,14 +165,14 @@
.sidebar-container { .sidebar-container {
transition: transform .28s; transition: transform .28s;
width: $sideBarWidth !important; width: $base-sidebar-width !important;
} }
&.hideSidebar { &.hideSidebar {
.sidebar-container { .sidebar-container {
pointer-events: none; pointer-events: none;
transition-duration: 0.3s; transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0); transform: translate3d(-$base-sidebar-width, 0, 0);
} }
} }
} }

60
yudao-ui-admin/src/assets/styles/variables.scss
View File

@ -8,37 +8,47 @@ $tiffany: #4AB7BD;
$yellow:#FEC171; $yellow:#FEC171;
$panGreen: #30B08F; $panGreen: #30B08F;
// sidebar // 默认菜单主题风格
$menuText:#bfcbd9; $base-menu-color:#bfcbd9;
$menuActiveText:#409EFF; $base-menu-color-active:#f4f4f5;
$subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951 $base-menu-background:#304156;
$base-logo-title-color: #ffffff;
$menuBg:#304156; $base-menu-light-color:rgba(0,0,0,.70);
$menuHover:#263445; $base-menu-light-background:#ffffff;
$sidebarTitle: #ffffff; $base-logo-light-title-color: #001529;
$menuLightBg:#ffffff; $base-sub-menu-background:#1f2d3d;
$menuLightHover:#f0f1f5; $base-sub-menu-hover:#001528;
$sidebarLightTitle: #001529;
$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 // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export { :export {
menuText: $menuText; menuColor: $base-menu-color;
menuActiveText: $menuActiveText; menuLightColor: $base-menu-light-color;
subMenuActiveText: $subMenuActiveText; menuColorActive: $base-menu-color-active;
menuBg: $menuBg; menuBackground: $base-menu-background;
menuHover: $menuHover; menuLightBackground: $base-menu-light-background;
menuLightBg: $menuLightBg; subMenuBackground: $base-sub-menu-background;
menuLightHover: $menuLightHover; subMenuHover: $base-sub-menu-hover;
subMenuBg: $subMenuBg; sideBarWidth: $base-sidebar-width;
subMenuHover: $subMenuHover; logoTitleColor: $base-logo-title-color;
sideBarWidth: $sideBarWidth; logoLightTitleColor: $base-logo-light-title-color
sidebarTitle: $sidebarTitle;
sidebarLightTitle: $sidebarLightTitle
} }

12
yudao-ui-admin/src/layout/components/Sidebar/Logo.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> <div class="sidebar-logo-container" :class="{'collapse':collapse}" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"> <router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> <h1 v-else class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
<router-link v-else key="expand" class="sidebar-logo-link" to="/"> <router-link v-else key="expand" class="sidebar-logo-link" to="/">
<img v-if="logo" :src="logo" class="sidebar-logo"> <img v-if="logo" :src="logo" class="sidebar-logo" />
<h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.sidebarTitle : variables.sidebarLightTitle }">{{ title }} </h1> <h1 class="sidebar-title" :style="{ color: sideTheme === 'theme-dark' ? variables.logoTitleColor : variables.logoLightTitleColor }">{{ title }} </h1>
</router-link> </router-link>
</transition> </transition>
</div> </div>
@ -29,7 +29,7 @@ export default {
variables() { variables() {
return variables; return variables;
}, },
sideTheme() { sideTheme() {
return this.$store.state.settings.sideTheme return this.$store.state.settings.sideTheme
} }
}, },

88
yudao-ui-admin/src/layout/components/Sidebar/index.vue
View File

@ -1,26 +1,26 @@
<template> <template>
<div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }"> <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper"> <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
<el-menu <el-menu
:default-active="activeMenu" :default-active="activeMenu"
:collapse="isCollapse" :collapse="isCollapse"
:background-color="settings.sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg" :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
:text-color="settings.sideTheme === 'theme-dark' ? variables.menuText : 'rgba(0,0,0,.65)'" :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
:unique-opened="true" :unique-opened="true"
:active-text-color="settings.theme" :active-text-color="settings.theme"
:collapse-transition="false" :collapse-transition="false"
mode="vertical" mode="vertical"
> >
<sidebar-item <sidebar-item
v-for="(route, index) in sidebarRouters" v-for="(route, index) in sidebarRouters"
:key="route.path + index" :key="route.path + index"
:item="route" :item="route"
:base-path="route.path" :base-path="route.path"
/> />
</el-menu> </el-menu>
</el-scrollbar> </el-scrollbar>
</div> </div>
</template> </template>
<script> <script>
@ -30,28 +30,28 @@ import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss"; import variables from "@/assets/styles/variables.scss";
export default { export default {
components: { SidebarItem, Logo }, components: { SidebarItem, Logo },
computed: { computed: {
...mapState(["settings"]), ...mapState(["settings"]),
...mapGetters(["sidebarRouters", "sidebar"]), ...mapGetters(["sidebarRouters", "sidebar"]),
activeMenu() { activeMenu() {
const route = this.$route; const route = this.$route;
const { meta, path } = route; const { meta, path } = route;
// if set path, the sidebar will highlight the path you set // if set path, the sidebar will highlight the path you set
if (meta.activeMenu) { if (meta.activeMenu) {
return meta.activeMenu; return meta.activeMenu;
} }
return path; return path;
}, },
showLogo() { showLogo() {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
}, },
variables() { variables() {
return variables; return variables;
}, },
isCollapse() { isCollapse() {
return !this.sidebar.opened; return !this.sidebar.opened;
}
} }
}
}; };
</script> </script>

4
yudao-ui-admin/src/layout/index.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}"> <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
<div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/> <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
<sidebar class="sidebar-container" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBg : variables.menuLightBg }" /> <sidebar class="sidebar-container"/>
<div :class="{hasTagsView:needTagsView}" class="main-container"> <div :class="{hasTagsView:needTagsView}" class="main-container">
<div :class="{'fixed-header':fixedHeader}"> <div :class="{'fixed-header':fixedHeader}">
<navbar /> <navbar />
@ -93,7 +93,7 @@ export default {
top: 0; top: 0;
right: 0; right: 0;
z-index: 9; z-index: 9;
width: calc(100% - #{$sideBarWidth}); width: calc(100% - #{$base-sidebar-width});
transition: width 0.28s; transition: width 0.28s;
} }

2
yudao-ui-admin/src/main.js
View File

@ -21,7 +21,6 @@ import {
resetForm, resetForm,
addDateRange, addDateRange,
addBeginAndEndTime, addBeginAndEndTime,
selectDictLabel,
download, download,
handleTree, handleTree,
downloadExcel, downloadExcel,
@ -45,7 +44,6 @@ Vue.prototype.parseTime = parseTime
Vue.prototype.resetForm = resetForm Vue.prototype.resetForm = resetForm
Vue.prototype.addDateRange = addDateRange Vue.prototype.addDateRange = addDateRange
Vue.prototype.addBeginAndEndTime = addBeginAndEndTime Vue.prototype.addBeginAndEndTime = addBeginAndEndTime
Vue.prototype.selectDictLabel = selectDictLabel
Vue.prototype.getDictDatas = getDictDatas Vue.prototype.getDictDatas = getDictDatas
Vue.prototype.getDictDatas2 = getDictDatas2 Vue.prototype.getDictDatas2 = getDictDatas2
Vue.prototype.getDictDataLabel = getDictDataLabel Vue.prototype.getDictDataLabel = getDictDataLabel

12
yudao-ui-admin/src/utils/ruoyi.js
View File

@ -100,18 +100,6 @@ export function addBeginAndEndTime(params, dateRange, propName) {
return params; return params;
} }
// 回显数据字典 原若依所保留，请使用 dict.js 中的新方法
export function selectDictLabel(datas, value) {
var actions = [];
Object.keys(datas).some((key) => {
if (datas[key].dictValue == ('' + value)) {
actions.push(datas[key].dictLabel);
return true;
}
})
return actions.join('');
}
// 通用下载方法 // 通用下载方法
export function download(fileName) { export function download(fileName) {
window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true; window.location.href = baseURL + "/common/download?fileName=" + encodeURI(fileName) + "&delete=" + true;

4
yudao-ui-admin/src/views/infra/config/index.vue
View File

@ -185,10 +185,6 @@ export default {
} }
); );
}, },
// 参数系统内置字典翻译
typeFormat(row, column) {
return this.selectDictLabel(this.typeOptions, row.type);
},
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false;