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