fix: 混合模式样式完善

Former-commit-id: e75ca92650f09791eae18325bf2da11f9a216fab

src/components/Hamburger/index.vue

@@ -8,7 +8,6 @@
       class="hamburger"
       viewBox="0 0 1024 1024"
       xmlns="http://www.w3.org/2000/svg"
-      style="color: #fff !important"
     >
       <path
         d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
@@ -37,6 +36,7 @@ function toggleClick() {
 .hamburger {
   width: 20px;
   height: 20px;
+  color: #fff;
   vertical-align: -4px;
 
   &.is-active {

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;

src/styles/sidebar.scss

@@ -90,6 +90,13 @@
       .svg-icon {
         margin-right: 0;
       }
+
+      .header {
+        .logo-wrap {
+          width: 63px !important;
+          transition: transform 0.28s;
+        }
+      }
     }
 
     .main-container {
@@ -144,13 +151,6 @@
     .sidebar-container {
       width: $sideBarWidth !important;
       transition: transform 0.28s;
-
-      .header {
-        .logo-wrap {
-          width: 63px !important;
-          transition: transform 0.28s;
-        }
-      }
     }
 
     &.hideSidebar:not(.isMix) {

src/views/demo/internal-doc.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts"></script>
+<template>
+  <div class="iframe-wrap">
+    <iframe
+      src="https://juejin.cn/post/7228990409909108793"
+      frameborder="0"
+    ></iframe>
+  </div>
+</template>
+<style lang="scss" scoped>
+.iframe-wrap {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>