From 65e622172d8c3b2fcf34ebc16472a8867b126339 Mon Sep 17 00:00:00 2001
From: lihui <lihui030304@163.com>
Date: Thu, 7 Aug 2025 12:00:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(menu):=20=E8=8F=9C=E5=8D=95=E9=AB=98?=
 =?UTF-8?q?=E4=BA=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/home.vue | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/views/home.vue b/src/views/home.vue
index 0a06d0b..2f7c82a 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -1,7 +1,7 @@
 <script setup>
 // 导航栏在这
-import {ref} from 'vue'
-import {useRouter} from 'vue-router'
+import {computed, ref} from 'vue'
+import {useRoute, useRouter} from 'vue-router'
 import {ElMessage} from 'element-plus'
 import dmmn from '../assets/link.png'
 import ChangePassword from '@/components/changePassword.vue'
@@ -21,7 +21,35 @@ const {adminData, menuTree} = storeToRefs(adminStore)
 menuList.value = filterMenu(menuTree.value)
 
 console.log("menuList", menuList.value)
+// 获取当前路由
+const route = useRoute()
+
+// 通用函数：从菜单树中递归找出最匹配的 index
+function findBestMatch(menuList, path) {
+  let bestMatch = ''
+
+  function traverse(menus) {
+    for (const item of menus) {
+      const itemPath = getRoutePath(item)
+      // 如果当前菜单的 path 是当前路径的前缀，可能是候选项
+      if (path.startsWith(itemPath) && itemPath.length > bestMatch.length) {
+        bestMatch = itemPath
+      }
+
+      if (item.children && item.children.length > 0) {
+        traverse(item.children)
+      }
+    }
+  }
+
+  traverse(menuList)
+  return bestMatch || path // fallback 到当前路径
+}
 
+// 响应式高亮菜单
+const activeMenu = computed(() => {
+  return findBestMatch(menuList.value, route.path)
+})
 const router = useRouter()
 const imgrule1 = dmmn
 const messageVisible = ref(false)
@@ -81,7 +109,7 @@ function logout() {
           <el-menu
               :router="true"
               class="el-menu-vertical-demo"
-              :default-active="$route.path"
+              :default-active="activeMenu"
           >
             <!-- 递归渲染菜单层级 -->
             <template v-for="menu in menuList" :key="menu.id">