feat(layout): 默认展开所有有子菜单的菜单项

- 修改了 sidebar 的初始折叠状态,设置为关闭
- 在 Sidebar 组件中添加了递归获取所有有 children 的菜单项的逻辑
- 在折叠展开菜单时,自动展开所有有子菜单的菜单项
This commit is contained in:
fhysy 2025-07-01 17:57:15 +08:00
parent 70a28fb919
commit 4c48b77529
2 changed files with 41 additions and 3 deletions

View File

@ -5,13 +5,15 @@
<logo v-if="showLogo" :collapse="isCollapse" /> <logo v-if="showLogo" :collapse="isCollapse" />
<el-scrollbar wrap-class="scrollbar-wrapper"> <el-scrollbar wrap-class="scrollbar-wrapper">
<el-menu <el-menu
ref="menuRef"
:collapse="isCollapse" :collapse="isCollapse"
:collapse-transition="false" :collapse-transition="false"
:default-active="activeMenu" :default-active="activeMenu"
:unique-opened="true"
mode="vertical" mode="vertical"
:default-openeds="allOpenKeys"
> >
<sidebar-item <sidebar-item
:index="route.path"
v-for="(route, index) in sidebarRouters" v-for="(route, index) in sidebarRouters"
:key="route.path + index" :key="route.path + index"
:base-path="route.path" :base-path="route.path"
@ -46,6 +48,28 @@ export default {
} }
return path; return path;
}, },
allOpenKeys() {
// childrenpath
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() { showLogo() {
return this.$store.state.settings.sidebarLogo; return this.$store.state.settings.sidebarLogo;
}, },
@ -59,6 +83,20 @@ export default {
return process.env.VUE_APP_THEME_CLASS !=='theme-blue-white'?'#ffffff':'#000000'; 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: { methods: {
toggleSideBar() { toggleSideBar() {
this.$store.dispatch('app/toggleSideBar') this.$store.dispatch('app/toggleSideBar')

View File

@ -2,7 +2,7 @@ import Cookies from 'js-cookie'
const state = { const state = {
sidebar: { sidebar: {
opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true, opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : false,
withoutAnimation: false withoutAnimation: false
}, },
device: 'desktop', device: 'desktop',