From 657564bff301a7345c1d21cad8ba0d0e8e232ff7 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Thu, 10 Oct 2024 00:58:15 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E6=B7=B7?=
 =?UTF-8?q?=E5=90=88=E5=B8=83=E5=B1=80=E8=B7=AF=E7=94=B1=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=E9=87=8D=E5=AE=9A=E5=90=91=E4=B8=A2=E5=A4=B1=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Sidebar/components/SidebarMixTopMenu.vue  | 73 ++++++++++---------
 1 file changed, 40 insertions(+), 33 deletions(-)

diff --git a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
index c573fe7d..5f643f0c 100644
--- a/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
+++ b/src/layout/components/Sidebar/components/SidebarMixTopMenu.vue
@@ -1,4 +1,4 @@
-<!-- 混合布局的顶部 -->
+<!-- 混合布局顶部菜单 -->
 <template>
   <el-scrollbar>
     <el-menu
@@ -10,7 +10,7 @@
       @select="handleMenuSelect"
     >
       <el-menu-item
-        v-for="route in mixTopMenus"
+        v-for="route in topMenus"
         :key="route.path"
         :index="route.path"
       >
@@ -24,13 +24,10 @@
             </el-icon>
             <svg-icon v-else :icon-class="route.meta.icon" />
           </template>
-
           <span v-if="route.path === '/'">首页</span>
-          <template v-else>
-            <span v-if="route.meta && route.meta.title" class="ml-1">
-              {{ translateRouteTitle(route.meta.title) }}
-            </span>
-          </template>
+          <span v-else-if="route.meta && route.meta.title" class="ml-1">
+            {{ translateRouteTitle(route.meta.title) }}
+          </span>
         </template>
       </el-menu-item>
     </el-menu>
@@ -38,61 +35,71 @@
 </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";
-import { RouteRecordRaw } from "vue-router";
 
+/**
+ * 定义状态：先定义 reactive、ref 或 computed 状态
+ */
+const router = useRouter();
 const appStore = useAppStore();
 const permissionStore = usePermissionStore();
-const router = useRouter();
 
-// 避免 activeTopMenuPath 缓存被清理，从当前路由路径获取顶部菜单路径，
-// eg. / system / user → /system； / dashboard → /
+// 当前激活的顶部菜单路径
+const activePath = computed(() => appStore.activeTopMenuPath);
+
+// 顶部菜单列表
+const topMenus = ref<RouteRecordRaw[]>([]);
+
+// 获取当前路由路径的顶部菜单路径
 const activeTopMenuPath =
   useRoute().path.split("/").filter(Boolean).length > 1
     ? useRoute().path.match(/^\/[^\/]+/)?.[0] || "/"
     : "/";
 
+// 设置当前激活的顶部菜单路径
 appStore.activeTopMenu(activeTopMenuPath);
 
-// 激活的顶部菜单路径
-const activePath = computed(() => appStore.activeTopMenuPath);
-
-// 混合模式顶部菜单集合
-const mixTopMenus = ref<RouteRecordRaw[]>([]);
-
 /**
- * 菜单选择事件
+ * 处理菜单点击事件，切换顶部菜单并加载对应的左侧菜单
+ * @param routePath 点击的菜单路径
  */
 const handleMenuSelect = (routePath: string) => {
-  appStore.activeTopMenu(routePath);
-  permissionStore.setMixLeftMenus(routePath);
-  // 获取左侧菜单集合，默认跳转到第一个菜单
-  const mixLeftMenus = permissionStore.mixLeftMenus;
-  goToFirstMenu(mixLeftMenus);
+  appStore.activeTopMenu(routePath); // 设置激活的顶部菜单
+  permissionStore.setMixLeftMenus(routePath); // 更新左侧菜单
+  navigateToFirstLeftMenu(permissionStore.mixLeftMenus); // 跳转到左侧第一个菜单
 };
 
 /**
- * 默认跳转到左侧第一个菜单
+ * 跳转到左侧第一个可访问的菜单
+ * @param menus 左侧菜单列表
  */
-const goToFirstMenu = (menus: RouteRecordRaw[]) => {
+const navigateToFirstLeftMenu = (menus: RouteRecordRaw[]) => {
   if (menus.length === 0) return;
 
-  const [first] = menus;
+  const [firstMenu] = menus;
 
-  if (first.children && first.children.length > 0) {
-    goToFirstMenu(first.children as RouteRecordRaw[]);
-  } else if (first.name) {
+  // 如果第一个菜单有子菜单，递归跳转到第一个子菜单
+  if (firstMenu.children && firstMenu.children.length > 0) {
+    navigateToFirstLeftMenu(firstMenu.children as RouteRecordRaw[]);
+  } else if (firstMenu.name) {
     router.push({
-      name: first.name,
+      name: firstMenu.name,
+      query:
+        typeof firstMenu.meta?.params === "object"
+          ? (firstMenu.meta.params as LocationQueryRaw)
+          : undefined,
     });
   }
 };
 
-// 初始化顶部菜单
 onMounted(() => {
-  mixTopMenus.value = permissionStore.routes.filter(
+  topMenus.value = permissionStore.routes.filter(
     (item) => !item.meta || !item.meta.hidden
   );
 });