From 4d89e139f3d6b8ada67fe6e079e8bd07756d7ffb Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Sun, 3 Aug 2025 23:59:47 +0800
Subject: [PATCH] refactor: `VPMenu` related component use generic type for
 component (#4883)

---
 src/client/theme-default/components/VPFlyout.vue    | 5 +++--
 src/client/theme-default/components/VPMenu.vue      | 5 +++--
 src/client/theme-default/components/VPMenuGroup.vue | 7 ++++---
 src/client/theme-default/components/VPMenuLink.vue  | 4 ++--
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/client/theme-default/components/VPFlyout.vue b/src/client/theme-default/components/VPFlyout.vue
index 7ce56162..c05c579c 100644
--- a/src/client/theme-default/components/VPFlyout.vue
+++ b/src/client/theme-default/components/VPFlyout.vue
@@ -1,4 +1,5 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends DefaultTheme.NavItem">
+import type { DefaultTheme } from 'vitepress/theme'
 import { ref } from 'vue'
 import { useFlyout } from '../composables/flyout'
 import VPMenu from './VPMenu.vue'
@@ -7,7 +8,7 @@ defineProps<{
   icon?: string
   button?: string
   label?: string
-  items?: any[]
+  items?: T[]
 }>()
 
 const open = ref(false)
diff --git a/src/client/theme-default/components/VPMenu.vue b/src/client/theme-default/components/VPMenu.vue
index 44dc276e..91ebb404 100644
--- a/src/client/theme-default/components/VPMenu.vue
+++ b/src/client/theme-default/components/VPMenu.vue
@@ -1,9 +1,10 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends DefaultTheme.NavItem">
+import type { DefaultTheme } from 'vitepress/theme'
 import VPMenuLink from './VPMenuLink.vue'
 import VPMenuGroup from './VPMenuGroup.vue'
 
 defineProps<{
-  items?: any[]
+  items?: T[]
 }>()
 </script>
 
diff --git a/src/client/theme-default/components/VPMenuGroup.vue b/src/client/theme-default/components/VPMenuGroup.vue
index 11f86714..7d12eb75 100644
--- a/src/client/theme-default/components/VPMenuGroup.vue
+++ b/src/client/theme-default/components/VPMenuGroup.vue
@@ -1,9 +1,10 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends (DefaultTheme.NavItemComponent | DefaultTheme.NavItemChildren | DefaultTheme.NavItemWithLink)">
+import type { DefaultTheme } from 'vitepress/theme'
 import VPMenuLink from './VPMenuLink.vue'
 
 defineProps<{
   text?: string
-  items: any[]
+  items: T[]
 }>()
 </script>
 
@@ -11,7 +12,7 @@ defineProps<{
   <div class="VPMenuGroup">
     <p v-if="text" class="title">{{ text }}</p>
 
-    <template v-for="item in items">
+    <template v-for="item in items" :key="JSON.stringify(item)">
       <VPMenuLink v-if="'link' in item" :item />
     </template>
   </div>
diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index d9ed1089..0a708186 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -1,11 +1,11 @@
-<script lang="ts" setup>
+<script lang="ts" setup generic="T extends DefaultTheme.NavItemWithLink">
 import type { DefaultTheme } from 'vitepress/theme'
 import { useData } from '../composables/data'
 import { isActive } from '../../shared'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  item: DefaultTheme.NavItemWithLink
+  item: T
 }>()
 
 const { page } = useData()