From a739efeaf912a8a582ba0ae7c10d12e65688e4f1 Mon Sep 17 00:00:00 2001
From: 19819791180 <1986997270@qq.com>
Date: Mon, 30 Dec 2024 10:48:32 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dtopnav=E6=97=A0=E6=B3=95?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BArouter=E4=B8=ADjs=E5=BC=95=E5=85=A5=E7=9A=84?=
 =?UTF-8?q?=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/TopNav/index.vue | 50 +++++++++++++++++++++++++++++++--
 src/router/index.js             |  1 +
 src/store/modules/permission.ts | 17 ++++++++++-
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/src/components/TopNav/index.vue b/src/components/TopNav/index.vue
index ac1d2e5..b9de882 100644
--- a/src/components/TopNav/index.vue
+++ b/src/components/TopNav/index.vue
@@ -1,3 +1,22 @@
+/**
+ * TopNav组件
+ * 
+ * 功能说明：
+ * 1. 顶部导航栏组件，支持显示一级菜单和更多菜单折叠
+ * 2. 支持两种菜单来源：
+ *    - 仅显示后端动态路由（关闭TopNav导入本地路由时）
+ *    - 混合显示本地路由和后端动态路由（开启TopNav导入本地路由时）
+ * 3. 特殊处理：
+ *    - 空路径("")或根路径("/")：显示其第一个子路由为顶级菜单
+ *    - isTopMenu: 将该路由的第一个子路由显示为顶级菜单
+ * 
+ * 配置说明：
+ * 1. 在系统设置中可配置：
+ *    - 开启/关闭TopNav
+ *    - 开启/关闭TopNav导入本地路由
+ * 2. 路由配置中可使用meta.isTopMenu控制菜单行为
+ */
+
 <template>
   <el-menu
     :default-active="activeMenu"
@@ -59,16 +78,41 @@ const topMenus = computed(() => {
   routers.value.map((menu) => {
     if (menu.hidden !== true) {
       // 兼容顶部栏一级菜单内部跳转
-      if (menu.path === "/") {
-          topMenus.push(menu.children[0]);
+      if (menu.path === "" || menu.path === "/") {
+        if(menu.children && menu.children[0]) {
+          const child = menu.children[0];
+          // 确保子路由有正确的path
+          child.path = child.path.replace('//', '/');
+          if(!child.meta) {
+            child.meta = {};
+          }
+          if(!child.meta.icon) {
+            child.meta.icon = 'dashboard';
+          }
+          topMenus.push(child);
+        }
+      } else if (menu.meta?.isTopMenu && menu.children?.[0]) {
+        // 使用isTopMenu标处理需要显示子路由为顶级菜单的情况
+        const firstChild = menu.children[0];
+        firstChild.path = menu.path;
+        topMenus.push(firstChild);
       } else {
-          topMenus.push(menu);
+        // 确保menu有meta对象
+        if(!menu.meta) {
+          menu.meta = {};
+        }
+        // 确保menu有icon属性
+        if(!menu.meta.icon) {
+          menu.meta.icon = 'dashboard';
+        }
+        topMenus.push(menu);
       }
     }
   })
   return topMenus;
 })
 
+
 // 设置子路由
 const childrenMenus = computed(() => {
   let childrenMenus = [];
diff --git a/src/router/index.js b/src/router/index.js
index b59af40..efb80ae 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,7 @@ import Layout from '@/layout'
     activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
     group:"group"                   // 当路由设置了该属性，则相同组的路由共用一个tab标签，可以是route对象里面的内容：(route)=>route.query.xx
     transition:"fade-transform"     // 设置该路由的切换动画，默认淡出，不需要动画可以填none，动画需要自己在transition.scss中定义
+    isTopMenu: true                 // 当设置为true时，该路由的第一个子路由会在TopNav模式下显示为顶级菜单
     }
  */
 
diff --git a/src/store/modules/permission.ts b/src/store/modules/permission.ts
index af0bcc2..a34f8ca 100644
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -9,6 +9,21 @@ import { defineStore } from 'pinia'
 // 匹配views里面所有的.vue文件
 const modules = import.meta.glob('./../../views/**/*.vue')
 
+/**
+ * 权限管理模块
+ * 
+ * 路由生成说明：
+ * 1. generateRoutes方法负责生成所有路由：
+ *    - 从后端获取动态路由数据
+ *    - 处理动态路由数据（过滤、转换组件等）
+ *    - 根据设置决定TopNav菜单的数据来源
+ * 
+ * 2. TopNav菜单数据生成规则：
+ *    - 启用TopNav导入本地路由：constantRoutes + defaultRoutes
+ *    - 关闭TopNav导入本地路由：仅使用defaultRoutes
+ *    - 通过settingsStore.topNavMixMenu控制
+ */
+
 const usePermissionStore = defineStore(
   'permission',
   {
@@ -48,7 +63,7 @@ const usePermissionStore = defineStore(
             this.setRoutes(rewriteRoutes)
             this.setSidebarRouters(constantRoutes.concat(sidebarRoutes))
             this.setDefaultRoutes(sidebarRoutes)
-            this.setTopbarRoutes(defaultRoutes)
+            this.setTopbarRoutes(constantRoutes.concat(defaultRoutes))
             resolve(rewriteRoutes)
           })
         })
-- 
Gitee