fix: 混合模式样式完善

Former-commit-id: e75ca92650f09791eae18325bf2da11f9a216fab

src/layout/components/Settings/index.vue

@@ -1,22 +1,63 @@
 <script setup lang="ts">
 import { useSettingsStore } from "@/store/modules/settings";
-
+import { usePermissionStore } from "@/store/modules/permission";
+import { useAppStore } from "@/store/modules/app";
 import IconEpSunny from "~icons/ep/sunny";
 import IconEpMoon from "~icons/ep/moon";
+import { useRoute } from "vue-router";
 
 /**
  * 暗黑模式
  */
 const settingsStore = useSettingsStore();
+const permissionStore = usePermissionStore();
+const appStore = useAppStore();
 const isDark = useDark();
 const toggleDark = () => useToggle(isDark);
 
+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.name];
+  }
+
+  return null;
+}
+const againActiveTop = (newVal: string) => {
+  const parent = findOutermostParent(permissionStore.routes, newVal);
+  if (appStore.activeTopMenu !== parent.path) {
+    appStore.changeTopActive(parent.path);
+  }
+};
+const route = useRoute();
 /**
  * 切换布局
  */
 function changeLayout(layout: string) {
   settingsStore.changeSetting({ key: "layout", value: layout });
   window.document.body.setAttribute("layout", settingsStore.layout);
+  if (layout === "mix") {
+    route.name && againActiveTop(route.name as string);
+  }
 }
 
 // 主题颜色

src/layout/components/Sidebar/index.vue

@@ -63,6 +63,7 @@ watch(
 
 .isMix {
   .menu-wrap {
+    z-index: 99;
     width: 100% !important;
     height: 50px;
     background-color: $menuBg;