feat(sidebar): 增加子路由回退高亮父菜单功能

- 添加 menuPaths 集合收录全站菜单路径
- 在 activeMenu 中判断子路由路径是否存在于菜单路径集合
- 对不在集合中的子路由,匹配最长前缀父菜单路径进行高亮回退
- 实现子路由(如 /vehicle/customer-archive/form)对父菜单自动高亮回退功能
- 提升侧边栏菜单选中状态的准确性和用户体验
This commit is contained in:
2026-08-25 19:23:33 +08:00
parent 3cb365253b
commit 5033dc9e43
+22
View File
@@ -44,6 +44,19 @@ export default {
collect(this.menu); collect(this.menu);
return indexes; return indexes;
}, },
// 全站菜单路径集合,用于子路由(如 /vehicle/customer-archive/form)回退高亮父菜单
menuPaths() {
const props = website.menu;
const set = new Set();
const collect = list => {
(list || []).forEach(item => {
if (item[props.path]) set.add(item[props.path]);
collect(item[props.children]);
});
};
collect(this.menu);
return set;
},
activeMenu() { activeMenu() {
const route = this.$route; const route = this.$route;
const { meta, path } = route; const { meta, path } = route;
@@ -55,6 +68,15 @@ export default {
if (fullPath !== path && this.menuIndexes.has(fullPath)) { if (fullPath !== path && this.menuIndexes.has(fullPath)) {
return fullPath; return fullPath;
} }
// 子路由(如 /vehicle/customer-archive/form)自动回退高亮最长前缀匹配的父菜单
if (!this.menuPaths.has(path)) {
const matched = [...this.menuPaths]
.filter(p => path.startsWith(p + '/'))
.sort((a, b) => b.length - a.length);
if (matched.length) {
return matched[0];
}
}
return path; return path;
}, },
}, },