diff --git a/src/layout/components/Sidebar/TopMenu.vue b/src/layout/components/Sidebar/TopMenu.vue index 72c3a75f..63530b16 100644 --- a/src/layout/components/Sidebar/TopMenu.vue +++ b/src/layout/components/Sidebar/TopMenu.vue @@ -4,7 +4,7 @@ import variables from "@/styles/variables.module.scss"; import { useAppStore } from "@/store/modules/app"; import { translateRouteTitleI18n } from "@/utils/i18n"; const appStore = useAppStore(); -const tPath = ref(); +const activePath = computed(() => appStore.activeTopMenu); const selectMenu = (index: string) => { appStore.changeTopActive(index); }; @@ -18,7 +18,7 @@ onMounted(() => { settingsStore.layout); const selectedTag = ref({}); const scrollPaneRef = ref(); @@ -226,7 +232,52 @@ function closeTagMenu() { function handleScroll() { closeTagMenu(); } +function findOutermostParent(tree: any[], findName: string) { + let parentMap: any = {}; + function buildParentMap(node: any, parent: any) { + parentMap[node.name] = parent; + + if (node.children) { + for (let i = 0; i < node.children.length; i++) { + buildParentMap(node.children[i], node); + } + } + } + + for (let i = 0; i < tree.length; i++) { + buildParentMap(tree[i], null); + } + + let currentNode = parentMap[findName]; + while (currentNode) { + if (!parentMap[currentNode.name]) { + return currentNode; + } + currentNode = parentMap[currentNode.id]; + } + + return null; +} +const againActiveTop = (newVal: string) => { + if (layout.value !== "mix") return; + const parent = findOutermostParent(permissionStore.routes, newVal); + if (appStore.activeTopMenu !== parent.path) { + appStore.changeTopActive(parent.path); + } +}; +// 如果是混合模式,更改selectedTag,需要对应高亮的activeTop +watch( + () => route.name, + (newVal) => { + if (newVal) { + againActiveTop(newVal as string); + } + }, + { + deep: true, + } +); onMounted(() => { initTags(); }); diff --git a/src/layout/index.vue b/src/layout/index.vue index 3c838e59..6debf4a2 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -40,12 +40,13 @@ watch( }); if (mixLeftMenu.value) { router.push({ - path: mixLeftMenu.value[0].path, + name: mixLeftMenu.value[0].name, }); } }, { deep: true, + immediate: true, } ); const layout = computed(() => settingsStore.layout); diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts index 8a69655d..6e0a49ec 100644 --- a/src/store/modules/permission.ts +++ b/src/store/modules/permission.ts @@ -41,7 +41,9 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => { routes.forEach((route) => { const tmpRoute = { ...route }; // ES6扩展运算符复制新对象 - + if (!route.name) { + tmpRoute.name = route.path; + } // 判断用户(角色)是否有该路由的访问权限 if (hasPermission(roles, tmpRoute)) { if (tmpRoute.component?.toString() == "Layout") {