refactor:优化顶栏子级菜单的激活逻辑

web/src/layouts/frontend/components/menu.vue

@@ -68,7 +68,7 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, reactive, watch } from 'vue'
+import { nextTick, reactive } from 'vue'
 import { editDefaultLang } from '/@/lang/index'
 import { useConfig } from '/@/stores/config'
 import { useUserInfo } from '/@/stores/userInfo'
@@ -78,7 +78,7 @@ import { fullUrl } from '/@/utils/common'
 import MenuSub from '/@/layouts/frontend/components/menuSub.vue'
 import toggleDark from '/@/utils/useDark'
 import DarkSwitch from '/@/layouts/common/components/darkSwitch.vue'
-import { useRoute, useRouter } from 'vue-router'
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
 import type { RouteLocationNormalizedLoaded, RouteRecordRaw } from 'vue-router'
 import { layoutMenuRef } from '/@/stores/refs'
 
@@ -101,37 +101,25 @@ const state = reactive({
     activeMenu: '',
 })
 
-const findMenu = (route: RouteLocationNormalizedLoaded) => {
+/**
-    for (const key in memberCenter.state.navUserMenus) {
+ * 设置激活菜单
-        if (memberCenter.state.navUserMenus[key].path == route.path || memberCenter.state.navUserMenus[key].name == route.name) {
+ */
-            return memberCenter.state.navUserMenus[key].meta?.id
-        }
-    }
-    for (const key in siteConfig.headNav) {
-        if (siteConfig.headNav[key].path == route.path || siteConfig.headNav[key].name == route.name) {
-            return siteConfig.headNav[key].meta?.id
-        }
-    }
-}
-
 const setActiveMenu = (route: RouteLocationNormalizedLoaded) => {
     if (route.path == '/') return (state.activeMenu = 'index')
 
-    // 动态菜单
+    const menuId = findMenus(route)
-    const menuId = findMenu(route)
     if (menuId) {
         state.activeMenu = 'column-' + menuId
     } else if (route.path.startsWith('/user')) {
         state.activeMenu = 'user'
     }
 }
-setActiveMenu(route)
 
-const onSelect = (index: string) => {
+/**
-    /**
+ * 菜单被点击时额外对无需激活的菜单处理（外链、暗黑模式开关、语言切换等）
-     * 当动态菜单被点击时
+ * 检查菜单是否需要激活，如果否，还原 state.activeMenu
-     * 检查该菜单是否需要激活，如果否，还原 state.activeMenu
  */
+const onSelect = (index: string) => {
     if (noNeedActive(siteConfig.headNav, index) || noNeedActive(memberCenter.state.navUserMenus, index)) {
         const oldActiveMenu = state.activeMenu
         state.activeMenu = ''
@@ -171,12 +159,43 @@ const isExternalLink = (menus: RouteRecordRaw[], index: string): boolean => {
     return false
 }
 
-watch(
+/**
-    () => route.path,
+ * 递归的搜索菜单 Index
-    () => {
+ */
-        setActiveMenu(route)
+const searchMenuIndex = (menus: RouteRecordRaw[], route: RouteLocationNormalizedLoaded): number | false => {
+    let find: boolean | number = false
+    for (const key in menus) {
+        if (menus[key].meta?.id && (menus[key].path == route.fullPath || menus[key].name == route.name)) {
+            return menus[key].meta.id as number
         }
-)
+        if (menus[key].children && menus[key].children?.length) {
+            find = searchMenuIndex(menus[key].children, route)
+            if (find !== false) return find
+        }
+    }
+    return find
+}
+
+/**
+ * 从动态菜单（顶栏、会员中心下拉、会员中心菜单）中搜索一个菜单
+ */
+const findMenus = (route: RouteLocationNormalizedLoaded) => {
+    // 顶栏菜单
+    const headNavIndex = searchMenuIndex(siteConfig.headNav, route)
+    if (headNavIndex !== false) return headNavIndex
+
+    // 会员中心下拉菜单
+    const navUserMenuIndex = searchMenuIndex(memberCenter.state.navUserMenus, route)
+    if (navUserMenuIndex !== false) return navUserMenuIndex
+
+    // 会员中心菜单
+    return searchMenuIndex(memberCenter.state.viewRoutes, route)
+}
+
+setActiveMenu(route)
+onBeforeRouteUpdate((to) => {
+    setActiveMenu(to)
+})
 </script>
 
 <style scoped lang="scss">