From 24d444f2959bddc8f9b62e2e20ff33ae26bf75a5 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Thu, 6 Feb 2025 22:09:25 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20:recycle:=20=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E8=B7=AF=E7=94=B1=E5=8A=A0=E8=BD=BD=E4=BB=A3=E7=A0=81=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E6=96=B9=E4=BE=BF=E7=90=86=E8=A7=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sidebar/components/SidebarMenu.vue        |  7 +-
 .../Sidebar/components/SidebarMixTopMenu.vue  | 10 +-
 src/layout/components/Sidebar/index.vue       |  8 +-
 src/layout/index.vue                          |  8 +-
 src/store/modules/permission.ts               | 95 ++++++++++---------
 5 files changed, 64 insertions(+), 64 deletions(-)

diff --git a/src/layout/components/Sidebar/components/SidebarMenu.vue b/src/layout/components/Sidebar/components/SidebarMenu.vue
index 828e7bb2..5664e426 100644
--- a/src/layout/components/Sidebar/components/SidebarMenu.vue
+++ b/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: () => [],
   },
diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
index be2097ca..3e421766 100644
--- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
+++ b/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); // 跳转到左侧第一个菜单
 };
 
 /**
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 022c4594..02073c66 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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>
diff --git a/src/layout/index.vue b/src/layout/index.vue
index d13cd30d..d3c60c78 100644
--- a/src/layout/index.vue
+++ b/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 {
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index de3a0c3f..ed93ee5b 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -8,22 +8,24 @@ const modules = import.meta.glob("../../views/**/**.vue");
 const Layout = () => import("@/layout/index.vue");
 
 export const usePermissionStore = defineStore("permission", () => {
-  // 所有路由，包括静态和动态路由
+  // 储所有路由，包括静态路由和动态路由
   const routes = ref<RouteRecordRaw[]>([]);
-  // 混合模式左侧菜单
-  const mixLeftMenus = ref<RouteRecordRaw[]>([]);
-  // 路由是否已加载
+  // 混合模式左侧菜单路由
+  const mixedLayoutLeftRoutes = ref<RouteRecordRaw[]>([]);
+  // 路由是否加载完成
   const isRoutesLoaded = ref(false);
 
   /**
-   * 生成动态路由
+   * 获取后台动态路由数据，解析并注册到全局路由
+   *
+   * @returns Promise<RouteRecordRaw[]> 解析后的动态路由列表
    */
   function generateRoutes() {
     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
       MenuAPI.getRoutes()
         .then((data) => {
-          const dynamicRoutes = transformRoutes(data);
-          routes.value = constantRoutes.concat(dynamicRoutes);
+          const dynamicRoutes = parseDynamicRoutes(data);
+          routes.value = [...constantRoutes, ...dynamicRoutes];
           isRoutesLoaded.value = true;
           resolve(dynamicRoutes);
         })
@@ -34,14 +36,14 @@ export const usePermissionStore = defineStore("permission", () => {
   }
 
   /**
-   * 混合模式菜单下根据顶部菜单路径设置左侧菜单
+   * 根据父菜单路径设置混合模式左侧菜单
    *
-   * @param topMenuPath - 顶部菜单路径
+   * @param parentPath 父菜单的路径，用于查找对应的菜单项
    */
-  const setMixLeftMenus = (topMenuPath: string) => {
-    const matchedItem = routes.value.find((item) => item.path === topMenuPath);
+  const setMixedLayoutLeftRoutes = (parentPath: string) => {
+    const matchedItem = routes.value.find((item) => item.path === parentPath);
     if (matchedItem && matchedItem.children) {
-      mixLeftMenus.value = matchedItem.children;
+      mixedLayoutLeftRoutes.value = matchedItem.children;
     }
   };
 
@@ -49,59 +51,62 @@ export const usePermissionStore = defineStore("permission", () => {
    * 重置路由
    */
   const resetRouter = () => {
-    // 删除动态路由，保留静态路由
-    routes.value.forEach((route) => {
-      if (route.name && !constantRoutes.find((r) => r.name === route.name)) {
-        // 从 router 实例中移除动态路由
+    // 清空本地存储的路由和菜单数据
+    routes.value = [];
+    mixedLayoutLeftRoutes.value = [];
+    // 从 Vue Router 中移除所有动态注册的路由
+    router.getRoutes().forEach((route) => {
+      if (route.name) {
         router.removeRoute(route.name);
       }
     });
-
-    routes.value = [];
-    mixLeftMenus.value = [];
     isRoutesLoaded.value = false;
   };
 
   return {
     routes,
-    generateRoutes,
-    mixLeftMenus,
-    setMixLeftMenus,
+    mixedLayoutLeftRoutes,
     isRoutesLoaded,
+    generateRoutes,
+    setMixedLayoutLeftRoutes,
     resetRouter,
   };
 });
 
 /**
- * 转换路由数据为组件
+ * 解析后端返回的路由数据并转换为 Vue Router 兼容的路由配置
+ *
+ * 1. 遍历 `rawRoutes` 并转换为 `RouteRecordRaw` 格式。
+ * 2. 若 `component` 为 `"Layout"`，则替换为 `Layout` 组件。
+ * 3. 若 `component` 为字符串路径，则动态加载对应的 Vue 组件，找不到则默认 `404.vue`。
+ * 4. 递归解析 `children`，确保子路由也被正确转换。
+ *
+ * @param rawRoutes 后端返回的原始路由数据
+ * @returns 解析后的路由配置数组
  */
-const transformRoutes = (routes: RouteVO[]) => {
-  const asyncRoutes: RouteRecordRaw[] = [];
-  routes.forEach((route) => {
-    const tmpRoute = { ...route } as RouteRecordRaw;
-    // 顶级目录，替换为 Layout 组件
-    if (tmpRoute.component?.toString() == "Layout") {
-      tmpRoute.component = Layout;
-    } else {
-      // 其他菜单，根据组件路径动态加载组件
-      const component = modules[`../../views/${tmpRoute.component}.vue`];
-      if (component) {
-        tmpRoute.component = component;
-      } else {
-        tmpRoute.component = modules["../../views/error-page/404.vue"];
-      }
+const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
+  const parsedRoutes: RouteRecordRaw[] = [];
+
+  rawRoutes.forEach((route) => {
+    const normalizedRoute = { ...route } as RouteRecordRaw;
+
+    // 处理组件路径
+    normalizedRoute.component =
+      normalizedRoute.component?.toString() === "Layout"
+        ? Layout
+        : modules[`../../views/${normalizedRoute.component}.vue`] ||
+          modules["../../views/error-page/404.vue"];
+
+    // 递归解析子路由
+    if (normalizedRoute.children) {
+      normalizedRoute.children = parseDynamicRoutes(route.children);
     }
 
-    if (tmpRoute.children) {
-      tmpRoute.children = transformRoutes(route.children);
-    }
-
-    asyncRoutes.push(tmpRoute);
+    parsedRoutes.push(normalizedRoute);
   });
 
-  return asyncRoutes;
+  return parsedRoutes;
 };
-
 /**
  * 在组件外使用 Pinia store 实例 @see https://pinia.vuejs.org/core-concepts/outside-component-usage.html
  */