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

Former-commit-id: aa7373f063

.editorconfig

@@ -5,7 +5,8 @@ root = true
 [*]
 charset = utf-8 # 设置文件字符集为 utf-8
 end_of_line = lf # 控制换行类型(lf | cr | crlf)
-indent_style = tab # 缩进风格（tab | space）
+indent_style = space # 缩进风格（tab | space）
+indent_size = 2 # 缩进大小
 insert_final_newline = true # 始终在文件末尾插入一个新行
 
 # 表示仅 md 文件适用以下规则

.eslintrc.cjs

@@ -64,6 +64,12 @@ module.exports = {
       },
     ],
     "vue/multi-word-component-names": "off",
+    "prettier/prettier": [
+      "error",
+      {
+        useTabs: false, // 不使用制表符
+      },
+    ],
   },
   // eslint不能对html文件生效
   overrides: [

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>

src/router/index.ts

@@ -24,6 +24,7 @@ export const constantRoutes: RouteRecordRaw[] = [
 
   {
     path: "/",
+    name: "/",
     component: Layout,
     redirect: "/dashboard",
     children: [

src/store/modules/permission.ts

@@ -1,4 +1,4 @@
-import { RouteRecordRaw } from "vue-router";
+import { RouteRecordRaw, useRouter } from "vue-router";
 import { defineStore } from "pinia";
 import { constantRoutes } from "@/router";
 import { store } from "@/store";
@@ -48,7 +48,6 @@ const filterAsyncRoutes = (routes: RouteRecordRaw[], roles: string[]) => {
     if (hasPermission(roles, tmpRoute)) {
       if (tmpRoute.component?.toString() == "Layout") {
         tmpRoute.component = Layout;
-        console.log();
       } else {
         const component = modules[`../../views/${tmpRoute.component}.vue`];
         if (component) {
@@ -99,7 +98,19 @@ export const usePermissionStore = defineStore("permission", () => {
         });
     });
   }
-  return { routes, setRoutes, generateRoutes };
+
+  /**
+   * 混合模式左侧菜单
+   */
+  const mixLeftMenu = ref<RouteRecordRaw[]>([]);
+  function getMixLeftMenu(activeTop: string) {
+    routes.value.forEach((item) => {
+      if (item.path === activeTop) {
+        mixLeftMenu.value = item.children || [];
+      }
+    });
+  }
+  return { routes, setRoutes, generateRoutes, getMixLeftMenu, mixLeftMenu };
 });
 
 // 非setup

src/styles/sidebar.scss

@@ -144,15 +144,46 @@
     .sidebar-container {
       width: $sideBarWidth !important;
       transition: transform 0.28s;
+
+      .header {
+        .logo-wrap {
+          width: 63px !important;
+          transition: transform 0.28s;
+        }
+      }
     }
 
-    &.hideSidebar {
+    &.hideSidebar:not(.isMix) {
       .sidebar-container {
         pointer-events: none;
         transition-duration: 0.3s;
         transform: translate3d(-$sideBarWidth, 0, 0);
       }
     }
+
+    &.hideSidebar {
+      .isMix {
+        :deep(.sidebar-container) {
+          .header {
+            .logo-wrap {
+              width: 64px;
+            }
+          }
+        }
+      }
+    }
+
+    &.openSidebar {
+      .isMix {
+        :deep(.sidebar-container) {
+          .header {
+            .logo-wrap {
+              width: 210px;
+            }
+          }
+        }
+      }
+    }
   }
 
   .withoutAnimation {