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 @@ - + 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; + } + } + } } // 修复子菜单弹出位置