135 lines
4.0 KiB
Vue
135 lines
4.0 KiB
Vue
<template>
|
|
<div
|
|
:class="{ 'has-logo': showLogo }"
|
|
>
|
|
<logo v-if="showLogo" :collapse="isCollapse" />
|
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
|
<el-menu
|
|
ref="menuRef"
|
|
:collapse="isCollapse"
|
|
:collapse-transition="false"
|
|
:default-active="activeMenu"
|
|
mode="vertical"
|
|
:default-openeds="allOpenKeys"
|
|
>
|
|
<sidebar-item
|
|
:index="route.path"
|
|
v-for="(route, index) in sidebarRouters"
|
|
:key="route.path + index"
|
|
:base-path="route.path"
|
|
:item="route"
|
|
/>
|
|
</el-menu>
|
|
</el-scrollbar>
|
|
<!-- <logout />-->
|
|
<hamburger id="hamburger-container" :is-active="sidebar.opened" :svgColor="svgColor" class="hamburger-container" color="" @toggleClick="toggleSideBar" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters, mapState } from "vuex";
|
|
import Logo from "./Logo";
|
|
import SidebarItem from "./SidebarItem";
|
|
import variables from "@/assets/styles/variables.scss";
|
|
import Logout from './Logout'
|
|
import Hamburger from '@/components/Hamburger'
|
|
|
|
export default {
|
|
components: { SidebarItem, Logo, Logout, Hamburger },
|
|
computed: {
|
|
...mapState(["settings","sidebar"]),
|
|
...mapGetters(["sidebarRouters", "sidebar"]),
|
|
activeMenu() {
|
|
const route = this.$route;
|
|
const { meta, path } = route;
|
|
// if set path, the sidebar will highlight the path you set
|
|
if (meta.activeMenu) {
|
|
return meta.activeMenu;
|
|
}
|
|
return path;
|
|
},
|
|
allOpenKeys() {
|
|
// 递归收集所有有children的完整path
|
|
const keys = [];
|
|
function collectKeys(routes, basePath = '') {
|
|
routes.forEach(route => {
|
|
if (route.hidden) return;
|
|
let fullPath = '';
|
|
if (route.path.startsWith('/')) {
|
|
fullPath = route.path;
|
|
} else {
|
|
fullPath = basePath ? (basePath.endsWith('/') ? basePath + route.path : basePath + '/' + route.path) : route.path;
|
|
}
|
|
if (route.children && route.children.length > 0) {
|
|
if (fullPath) keys.push(fullPath);
|
|
collectKeys(route.children, fullPath);
|
|
}
|
|
});
|
|
}
|
|
collectKeys(this.sidebarRouters);
|
|
// 过滤空字符串和重复项
|
|
return Array.from(new Set(keys.filter(Boolean)));
|
|
},
|
|
showLogo() {
|
|
return this.$store.state.settings.sidebarLogo;
|
|
},
|
|
variables() {
|
|
return variables;
|
|
},
|
|
isCollapse() {
|
|
return !this.sidebar.opened;
|
|
},
|
|
svgColor() {
|
|
return process.env.VUE_APP_THEME_CLASS !=='theme-blue-white'?'#ffffff':'#000000';
|
|
}
|
|
},
|
|
watch: {
|
|
isCollapse(val) {
|
|
if (!val) {
|
|
// 展开所有有children的菜单
|
|
this.$nextTick(() => {
|
|
this.allOpenKeys.forEach(key => {
|
|
if (this.$refs.menuRef && this.$refs.menuRef.submenus && this.$refs.menuRef.submenus[key]) {
|
|
this.$refs.menuRef.open(key);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toggleSideBar() {
|
|
this.$store.dispatch('app/toggleSideBar')
|
|
},
|
|
themeMenuBg() {
|
|
// switch (this.settings.sideTheme) {
|
|
// case "theme-dark":
|
|
// return variables["menuBg"];
|
|
// case "theme-light":
|
|
// return variables["menuLightBg"];
|
|
// case "theme-N1":
|
|
// console.log(variables["menuN1Bg"])
|
|
// return variables["menuN1Bg"];
|
|
// case "theme-Green":
|
|
// return variables["menuGreenBg"];
|
|
// }
|
|
return variables[`menu${this.settings.sideTheme.substring(6)}Bg`];
|
|
},
|
|
themeTextColor() {
|
|
// switch (this.settings.sideTheme) {
|
|
// case "theme-dark":
|
|
// return variables["menuText"];
|
|
// case "theme-light":
|
|
// return "rgba(0,0,0,.65)";
|
|
// case "theme-N1":
|
|
// return variables["menuText"];
|
|
// case "theme-Green":
|
|
// return variables["sidebarGreenTitle"];
|
|
// }
|
|
return variables[`menu${this.settings.sideTheme.substring(6)}Text`];
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|