From 52f1f9c6004944a3999d214cf50af616558b25b4 Mon Sep 17 00:00:00 2001
From: "Ray.Hao" <1490493387@qq.com>
Date: Wed, 18 Jun 2025 17:51:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E9=A1=B6=E9=83=A8=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E5=AD=90=E8=8F=9C=E5=8D=95=E9=80=89=E4=B8=AD=E7=88=B6?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E6=B7=BB=E5=8A=A0=E6=BF=80=E6=B4=BB=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/Menu/BasicMenu.vue     | 25 ++++++++++++++++---
 .../components/Menu/components/MenuItem.vue   |  2 +-
 src/layouts/views/TopLayout.vue               | 12 +++++++++
 3 files changed, 34 insertions(+), 5 deletions(-)

diff --git a/src/layouts/components/Menu/BasicMenu.vue b/src/layouts/components/Menu/BasicMenu.vue
index 2bffc339..c9ddff26 100644
--- a/src/layouts/components/Menu/BasicMenu.vue
+++ b/src/layouts/components/Menu/BasicMenu.vue
@@ -163,9 +163,7 @@ watch(
  */
 watch(
   () => currentRoute.path,
-  (newPath) => {
-    console.log("🔍 Route changed in BasicMenu:", newPath);
-
+  () => {
     nextTick(() => {
       updateParentMenuStyles();
     });
@@ -178,7 +176,6 @@ watch(
 function updateParentMenuStyles() {
   if (!menuRef.value?.$el) return;
 
-  // 使用 nextTick 确保 DOM 已更新
   nextTick(() => {
     try {
       const menuEl = menuRef.value?.$el as HTMLElement;
@@ -192,6 +189,7 @@ function updateParentMenuStyles() {
 
       // 查找当前激活的菜单项
       const activeMenuItem = menuEl.querySelector(".el-menu-item.is-active");
+
       if (activeMenuItem) {
         // 向上查找父级 el-sub-menu 元素
         let parent = activeMenuItem.parentElement;
@@ -201,6 +199,25 @@ function updateParentMenuStyles() {
           }
           parent = parent.parentElement;
         }
+      } else {
+        // 水平模式下可能需要特殊处理
+        if (props.menuMode === "horizontal") {
+          // 对于水平菜单，使用路径匹配来找到父菜单
+          const currentPath = activeMenuPath.value;
+
+          // 查找所有父菜单项，检查哪个包含当前路径
+          allSubMenus.forEach((subMenu) => {
+            const subMenuEl = subMenu as HTMLElement;
+            const subMenuPath =
+              subMenuEl.getAttribute("data-path") ||
+              subMenuEl.querySelector(".el-sub-menu__title")?.getAttribute("data-path");
+
+            // 如果找到包含当前路径的父菜单，则添加激活类
+            if (subMenuPath && currentPath.startsWith(subMenuPath)) {
+              subMenuEl.classList.add("has-active-child");
+            }
+          });
+        }
       }
     } catch (error) {
       console.error("Error updating parent menu styles:", error);
diff --git a/src/layouts/components/Menu/components/MenuItem.vue b/src/layouts/components/Menu/components/MenuItem.vue
index 8734383c..fe7d9377 100644
--- a/src/layouts/components/Menu/components/MenuItem.vue
+++ b/src/layouts/components/Menu/components/MenuItem.vue
@@ -32,7 +32,7 @@
     </template>
 
     <!--【非叶子节点】显示含多个子节点的父菜单，或始终显示的单子节点 -->
-    <el-sub-menu v-else :index="resolvePath(item.path)" teleported>
+    <el-sub-menu v-else :index="resolvePath(item.path)" :data-path="item.path" teleported>
       <template #title>
         <MenuItemContent v-if="item.meta" :icon="item.meta.icon" :title="item.meta.title" />
       </template>
diff --git a/src/layouts/views/TopLayout.vue b/src/layouts/views/TopLayout.vue
index 6e6497b2..0359eb86 100644
--- a/src/layouts/views/TopLayout.vue
+++ b/src/layouts/views/TopLayout.vue
@@ -102,6 +102,18 @@ const isLogoCollapsed = computed(() => width.value < 768);
           height: $navbar-height;
           line-height: $navbar-height;
         }
+
+        // 父菜单激活状态 - 水平布局专用
+        &.has-active-child {
+          .el-sub-menu__title {
+            color: var(--el-color-primary) !important;
+            border-bottom: 2px solid var(--el-color-primary) !important;
+
+            .menu-icon {
+              color: var(--el-color-primary) !important;
+            }
+          }
+        }
       }
 
       // 修复子菜单弹出位置