feat: 导航混合模式细节完善

Former-commit-id: aa7373f0632d0d659c58272cfbdf1ee224d2c556

src/layout/components/Sidebar/TopMenu.vue

@@ -3,15 +3,34 @@ import { usePermissionStore } from "@/store/modules/permission";
 import variables from "@/styles/variables.module.scss";
 import { useAppStore } from "@/store/modules/app";
 import { translateRouteTitleI18n } from "@/utils/i18n";
+import { useRouter } from "vue-router";
 const appStore = useAppStore();
 const activePath = computed(() => appStore.activeTopMenu);
+const router = useRouter();
+// 递归跳转
+const goFirst = (menu: any[]) => {
+  if (!menu.length) return;
+  const [first] = menu;
+  if (first.children) {
+    goFirst(first.children);
+  } else {
+    router.push({
+      name: first.name,
+    });
+  }
+};
 const selectMenu = (index: string) => {
   appStore.changeTopActive(index);
+  permissionStore.getMixLeftMenu(index);
+  const { mixLeftMenu } = permissionStore;
+  goFirst(mixLeftMenu);
 };
 const permissionStore = usePermissionStore();
 const topMenu = ref<any[]>([]);
 onMounted(() => {
-  topMenu.value = permissionStore.routes.filter((el) => !el.meta?.hidden);
+  topMenu.value = permissionStore.routes.filter(
+    (item) => !item.meta || !item.meta.hidden
+  );
 });
 </script>
 <template>
@@ -34,9 +53,12 @@ onMounted(() => {
             v-if="route.meta && route.meta.icon"
             :icon-class="route.meta.icon"
           />
-          <span v-if="route.meta && route.meta.title">{{
-            translateRouteTitleI18n(route.meta.title)
-          }}</span>
+          <span v-if="route.path === '/'"> 首页 </span>
+          <template v-else>
+            <span v-if="route.meta && route.meta.title">
+              {{ translateRouteTitleI18n(route.meta.title) }}
+            </span>
+          </template>
         </template>
       </el-menu-item>
       <!-- <sidebar-item

src/layout/components/Sidebar/index.vue

@@ -74,7 +74,7 @@ watch(
       --el-menu-item-height: 50px;
 
       .logo-wrap {
-        width: 210px;
+        width: $sideBarWidth;
       }
 
       .el-menu {
@@ -95,7 +95,7 @@ watch(
 
   .left-menu {
     display: inline-block;
-    width: 210px;
+    width: $sideBarWidth;
     background-color: $menuBg;
 
     :deep(.el-menu) {

src/layout/index.vue

@@ -8,7 +8,6 @@ import LeftMenu from "./components/Sidebar/LeftMenu.vue";
 import { useAppStore } from "@/store/modules/app";
 import { useSettingsStore } from "@/store/modules/settings";
 import { usePermissionStore } from "@/store/modules/permission";
-import { useRouter } from "vue-router";
 const permissionStore = usePermissionStore();
 const { width } = useWindowSize();
 /**
@@ -27,23 +26,15 @@ const activeTopMenu = computed(() => {
   return appStore.activeTopMenu;
 });
 // 混合模式左侧菜单
-const mixLeftMenu = ref<any[]>([]);
-const router = useRouter();
+const mixLeftMenu = computed(() => {
+  return permissionStore.mixLeftMenu;
+});
 const layout = computed(() => settingsStore.layout);
 watch(
   () => activeTopMenu.value,
   (newVal) => {
     if (layout.value !== "mix") return;
-    permissionStore.routes.forEach((item) => {
-      if (item.path === newVal) {
-        mixLeftMenu.value = item.children || [];
-      }
-    });
-    if (mixLeftMenu.value) {
-      router.push({
-        name: mixLeftMenu.value[0].name,
-      });
-    }
+    permissionStore.getMixLeftMenu(newVal);
   },
   {
     deep: true,
@@ -156,7 +147,7 @@ function handleOutsideClick() {
     height: 50px;
 
     :deep(.logo-wrap) {
-      width: 210px;
+      width: $sideBarWidth;
     }
 
     :deep(.el-scrollbar) {
@@ -178,7 +169,7 @@ function handleOutsideClick() {
 .isMix {
   :deep(.main-container) {
     display: inline-block;
-    width: calc(100% - 210px);
+    width: calc(100% - #{$sideBarWidth});
     margin-left: 0;
   }
 
@@ -186,14 +177,18 @@ function handleOutsideClick() {
     display: flex;
     padding-top: 50px;
 
-    .el-menu {
-      width: 210px;
-    }
-
     .main-container {
       flex: 1;
       min-width: 0;
     }
   }
 }
+
+.openSidebar {
+  .mix-wrap {
+    .el-menu {
+      width: $sideBarWidth;
+    }
+  }
+}
 </style>