feat(router): 支持通过 activeMenuName 指定菜单高亮路径

src/composables/useMetaLayoutsMenuOptions.tsx

@@ -17,10 +17,17 @@ export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<M
   const selectedKey = ref('');
 
   watch(
-    () => router.currentRoute.value.path,
+    () => router.currentRoute.value,
-    (newPath) => {
+    (route) => {
-      selectedKey.value = newPath;
+      // 优先使用 activeMenuName（通过路由名称解析为路径），如果没有则使用当前路径
-      menuInstRef.value?.showOption(newPath); // 展开菜单，确保设定的元素被显示，如果不传入 key 会展示当前选中元素
+      const activeMenuPath = route.meta.activeMenuName
+        ? router.resolve({ name: route.meta.activeMenuName }).path
+        : route.path;
+
+      console.debug(`route.meta.activeMenuName :>> `, route.meta.activeMenuName);
+
+      selectedKey.value = activeMenuPath;
+      menuInstRef.value?.showOption(activeMenuPath); // 展开菜单，确保设定的元素被显示
     },
     { immediate: true },
   );

src/locales-utils/route-messages/en-US.ts

@@ -10,4 +10,5 @@ export default {
   DemosWebsocketDemo: 'WebSocket Demo',
   Home: 'Home',
   Login: 'Login',
+  DemosCreate: 'Create Demo',
 } satisfies PageTitleLocalizations;

src/locales-utils/route-messages/zh-CN.ts

@@ -10,4 +10,5 @@ export default {
   DemosWebsocketDemo: 'WebSocket 示例',
   Home: '首页',
   Login: '登录',
+  DemosCreate: '创建示例',
 } satisfies PageTitleLocalizations;

src/pages/demos/create.page.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+definePage({
+  meta: {
+    hideInMenu: true,
+    activeMenuName: 'Demos',
+  },
+});
+</script>
+
+<template>
+  <div></div>
+</template>

src/pages/index.page.vue

@@ -2,6 +2,6 @@
 
 <template>
   <div>
-    <h1>Index Page</h1>
+    <n-button @click="$router.push({ name: 'DemosCreate' })">DemosCreate</n-button>
   </div>
 </template>

src/plugins/00.router-plugin.types.ts

@@ -38,5 +38,13 @@ declare module 'vue-router' {
      * @description 是否忽略权限，默认为 false
      */
     ignoreAuth?: boolean;
+
+    /**
+     * @description 当前路由激活时应该高亮的菜单项（通过路由名称指定）
+     * - 用于隐藏在菜单中的子页面，指定其父级菜单项应该高亮
+     * - 使用路由名称而非路径，提供更好的类型安全和重构友好性
+     * - 例如：`activeMenuName: 'Demos'` 会高亮 Demos 菜单项
+     */
+    activeMenuName?: keyof RouteNamedMap;
   }
 }

typed-router.d.ts

@@ -58,6 +58,13 @@ declare module 'vue-router/auto-routes' {
       Record<never, never>,
       | never
     >,
+    'DemosCreate': RouteRecordInfo<
+      'DemosCreate',
+      '/demos/create',
+      Record<never, never>,
+      Record<never, never>,
+      | never
+    >,
     'DemosI18nDemo': RouteRecordInfo<
       'DemosI18nDemo',
       '/demos/i18n-demo',
@@ -143,6 +150,12 @@ declare module 'vue-router/auto-routes' {
       views:
         | never
     }
+    'src/pages/demos/create.page.vue': {
+      routes:
+        | 'DemosCreate'
+      views:
+        | never
+    }
     'src/pages/demos/i18n-demo.page.vue': {
       routes:
         | 'DemosI18nDemo'