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;

src/layout/index.vue

@@ -70,6 +70,10 @@ watchEffect(() => {
 function handleOutsideClick() {
   appStore.closeSideBar(false);
 }
+
+function toggleSideBar() {
+  appStore.toggleSidebar(true);
+}
 </script>
 
 <template>
@@ -86,7 +90,15 @@ function handleOutsideClick() {
       <div class="mix-wrap">
         <!-- :menu-list="mixLeftMenu -->
         <!-- :menu-list="permissionStore.routes -->
-        <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
+        <div class="left-wrap">
+          <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
+          <div class="menu-action">
+            <hamburger
+              :is-active="appStore.sidebar.opened"
+              @toggle-click="toggleSideBar"
+            />
+          </div>
+        </div>
         <Main />
       </div>
     </template>
@@ -175,8 +187,35 @@ function handleOutsideClick() {
 
   .mix-wrap {
     display: flex;
+    height: 100%;
     padding-top: 50px;
 
+    .left-wrap {
+      position: relative;
+      height: 100%;
+
+      .el-menu {
+        height: 100%;
+      }
+
+      .menu-action {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 50px;
+        line-height: 50px;
+        box-shadow: 0 0 6px -2px var(--el-color-primary);
+
+        div:hover {
+          background-color: var(--menuBg);
+        }
+
+        :deep(svg) {
+          color: #409eff !important;
+        }
+      }
+    }
+
     .main-container {
       flex: 1;
       min-width: 0;