fix: 混合模式一些细节

Former-commit-id: 5f51df75efed158c8adb9a9ad0cb92d9e26e3b6c

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(() => {
   <el-scrollbar>
     <el-menu
       mode="horizontal"
-      :default-active="tPath"
+      :default-active="activePath"
       :background-color="variables.menuBg"
       :text-color="variables.menuText"
       :active-text-color="variables.menuActiveText"

src/layout/components/TagsView/index.vue

@@ -10,6 +10,9 @@ import { translateRouteTitleI18n } from "@/utils/i18n";
 
 import { usePermissionStore } from "@/store/modules/permission";
 import { useTagsViewStore, TagView } from "@/store/modules/tagsView";
+import { useSettingsStore } from "@/store/modules/settings";
+import { useAppStore } from "@/store/modules/app";
+
 import ScrollPane from "./ScrollPane.vue";
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
@@ -18,8 +21,11 @@ const route = useRoute();
 
 const permissionStore = usePermissionStore();
 const tagsViewStore = useTagsViewStore();
+const appStore = useAppStore();
 
 const { visitedViews } = storeToRefs(tagsViewStore);
+const settingsStore = useSettingsStore();
+const layout = computed(() => 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();
 });

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);

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") {