refactor: ♻️ 动态路由加载代码优化方便理解

src/layout/components/Sidebar/components/SidebarMenu.vue

@@ -15,7 +15,7 @@
   >
     <!-- 菜单项 -->
     <SidebarMenuItem
-      v-for="route in menuList"
+      v-for="route in data"
       :key="route.path"
       :item="route"
       :base-path="resolveFullPath(route.path)"
@@ -26,6 +26,7 @@
 <script lang="ts" setup>
 import path from "path-browserify";
 import type { MenuInstance } from "element-plus";
+import type { RouteRecordRaw } from "vue-router";
 
 import { LayoutEnum } from "@/enums/LayoutEnum";
 import { useSettingsStore, useAppStore } from "@/store";
@@ -34,8 +35,8 @@ import { isExternal } from "@/utils/index";
 import variables from "@/styles/variables.module.scss";
 
 const props = defineProps({
-  menuList: {
-    type: Array<any>,
+  data: {
+    type: Array<RouteRecordRaw>,
     required: true,
     default: () => [],
   },

src/layout/components/Sidebar/components/SidebarMixTopMenu.vue

@@ -28,17 +28,11 @@
 </template>
 
 <script lang="ts" setup>
-/**
- * 导入模块：先外部库，再内部模块，最后导入样式和工具类
- */
 import { LocationQueryRaw, RouteRecordRaw } from "vue-router";
 import { usePermissionStore, useAppStore } from "@/store";
 import { translateRouteTitle } from "@/utils/i18n";
 import variables from "@/styles/variables.module.scss";
 
-/**
- * 定义状态：先定义 reactive、ref 或 computed 状态
- */
 const router = useRouter();
 const appStore = useAppStore();
 const permissionStore = usePermissionStore();
@@ -64,8 +58,8 @@ appStore.activeTopMenu(activeTopMenuPath);
  */
 const handleMenuSelect = (routePath: string) => {
   appStore.activeTopMenu(routePath); // 设置激活的顶部菜单
-  permissionStore.setMixLeftMenus(routePath); // 更新左侧菜单
-  navigateToFirstLeftMenu(permissionStore.mixLeftMenus); // 跳转到左侧第一个菜单
+  permissionStore.setMixedLayoutLeftRoutes(routePath); // 更新左侧菜单
+  navigateToFirstLeftMenu(permissionStore.mixedLayoutLeftRoutes); // 跳转到左侧第一个菜单
 };
 
 /**

src/layout/components/Sidebar/index.vue

@@ -1,20 +1,20 @@
 <template>
   <div :class="{ 'has-logo': sidebarLogo }">
-    <!-- 混合布局顶部  -->
+    <!-- 混合 -->
     <div v-if="isMixLayout" class="flex w-full">
       <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <SidebarMixTopMenu class="flex-1" />
       <NavbarRight />
     </div>
 
-    <!-- 顶部布局顶部 || 左侧布局左侧 -->
+    <!-- 顶部 || 左侧 -->
     <template v-else>
       <SidebarLogo v-if="sidebarLogo" :collapse="isSidebarCollapsed" />
       <el-scrollbar>
-        <SidebarMenu :menu-list="permissionStore.routes" base-path="" />
+        <SidebarMenu :data="permissionStore.routes" base-path="" />
       </el-scrollbar>
 
-      <!-- 顶部布局导航 -->
+      <!-- 顶部导航 -->
       <NavbarRight v-if="isTopLayout" />
     </template>
   </div>

src/layout/index.vue

@@ -14,7 +14,7 @@
     <div v-if="layout === LayoutEnum.MIX" class="mix-container">
       <div class="mix-container-sidebar">
         <el-scrollbar>
-          <SidebarMenu :menu-list="mixLeftMenus" :base-path="activeTopMenuPath" />
+          <SidebarMenu :data="mixedLayoutLeftRoutes" :base-path="activeTopMenuPath" />
         </el-scrollbar>
         <div class="sidebar-toggle">
           <hamburger :is-active="appStore.sidebar.opened" @toggle-click="toggleSidebar" />
@@ -65,12 +65,12 @@ const isOpenSidebar = computed(() => appStore.sidebar.opened);
 const showTagsView = computed(() => settingsStore.tagsView); // 是否显示tagsView
 const layout = computed(() => settingsStore.layout); // 布局模式 left top mix
 const activeTopMenuPath = computed(() => appStore.activeTopMenuPath); // 顶部菜单激活path
-const mixLeftMenus = computed(() => permissionStore.mixLeftMenus); // 混合布局左侧菜单
+const mixedLayoutLeftRoutes = computed(() => permissionStore.mixedLayoutLeftRoutes); // 混合布局左侧菜单
 
 watch(
   () => activeTopMenuPath.value,
   (newVal: string) => {
-    permissionStore.setMixLeftMenus(newVal);
+    permissionStore.setMixedLayoutLeftRoutes(newVal);
   },
   {
     deep: true,
@@ -280,8 +280,8 @@ watch(route, () => {
   &.mobile {
     .sidebar-container {
       pointer-events: none;
-      transition-duration: 0.3s;
       transform: translate3d(-210px, 0, 0);
+      transition-duration: 0.3s;
     }
 
     .main-container {