From 166d76d980183a0ef21a59873686a2802ea49b75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=A5=E6=B5=A9?= <me@yanhao.ren>
Date: Mon, 3 Nov 2025 15:54:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(router):=20=E6=94=AF=E6=8C=81=E9=80=9A?=
 =?UTF-8?q?=E8=BF=87=20activeMenuName=20=E6=8C=87=E5=AE=9A=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E9=AB=98=E4=BA=AE=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/composables/useMetaLayoutsMenuOptions.tsx | 15 +++++++++++----
 src/locales-utils/route-messages/en-US.ts     |  1 +
 src/locales-utils/route-messages/zh-CN.ts     |  1 +
 src/pages/demos/create.page.vue               | 12 ++++++++++++
 src/pages/index.page.vue                      |  2 +-
 src/plugins/00.router-plugin.types.ts         |  8 ++++++++
 typed-router.d.ts                             | 13 +++++++++++++
 7 files changed, 47 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/demos/create.page.vue

diff --git a/src/composables/useMetaLayoutsMenuOptions.tsx b/src/composables/useMetaLayoutsMenuOptions.tsx
index 922ef44..b5e6e22 100644
--- a/src/composables/useMetaLayoutsMenuOptions.tsx
+++ b/src/composables/useMetaLayoutsMenuOptions.tsx
@@ -17,10 +17,17 @@ export function useMetaLayoutsNMenuOptions({ menuInstRef }: { menuInstRef: Ref<M
   const selectedKey = ref('');
 
   watch(
-    () => router.currentRoute.value.path,
-    (newPath) => {
-      selectedKey.value = newPath;
-      menuInstRef.value?.showOption(newPath); // 展开菜单，确保设定的元素被显示，如果不传入 key 会展示当前选中元素
+    () => router.currentRoute.value,
+    (route) => {
+      // 优先使用 activeMenuName（通过路由名称解析为路径），如果没有则使用当前路径
+      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 },
   );
diff --git a/src/locales-utils/route-messages/en-US.ts b/src/locales-utils/route-messages/en-US.ts
index 6ad7a14..d68fae4 100644
--- a/src/locales-utils/route-messages/en-US.ts
+++ b/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;
diff --git a/src/locales-utils/route-messages/zh-CN.ts b/src/locales-utils/route-messages/zh-CN.ts
index d09c40e..efa19d0 100644
--- a/src/locales-utils/route-messages/zh-CN.ts
+++ b/src/locales-utils/route-messages/zh-CN.ts
@@ -10,4 +10,5 @@ export default {
   DemosWebsocketDemo: 'WebSocket 示例',
   Home: '首页',
   Login: '登录',
+  DemosCreate: '创建示例',
 } satisfies PageTitleLocalizations;
diff --git a/src/pages/demos/create.page.vue b/src/pages/demos/create.page.vue
new file mode 100644
index 0000000..d35867d
--- /dev/null
+++ b/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>
diff --git a/src/pages/index.page.vue b/src/pages/index.page.vue
index 7979c8b..4ecc2db 100644
--- a/src/pages/index.page.vue
+++ b/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>
diff --git a/src/plugins/00.router-plugin.types.ts b/src/plugins/00.router-plugin.types.ts
index 859429f..2a15827 100644
--- a/src/plugins/00.router-plugin.types.ts
+++ b/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;
   }
 }
diff --git a/typed-router.d.ts b/typed-router.d.ts
index b2381a2..2990fe0 100644
--- a/typed-router.d.ts
+++ b/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'