From e73ad1900ff8785edd30c6bca0dec49189d33634 Mon Sep 17 00:00:00 2001
From: Artea <sepush@outlook.com>
Date: Sun, 3 Aug 2025 21:17:03 +0800
Subject: [PATCH] refactor(nav,layout): use `InjectionKey`

---
 src/client/theme-default/Layout.vue                       | 4 ++--
 src/client/theme-default/components/VPHero.vue            | 5 +++--
 src/client/theme-default/components/VPNav.vue             | 5 ++---
 .../theme-default/components/VPNavScreenMenuGroupLink.vue | 3 ++-
 .../theme-default/components/VPNavScreenMenuLink.vue      | 3 ++-
 src/client/theme-default/composables/layout.ts            | 8 ++++++++
 src/client/theme-default/composables/nav.ts               | 7 +++++++
 7 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index 30ebe491..ace5edd5 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -8,7 +8,7 @@ import VPNav from './components/VPNav.vue'
 import VPSidebar from './components/VPSidebar.vue'
 import VPSkipLink from './components/VPSkipLink.vue'
 import { useData } from './composables/data'
-import { registerWatchers } from './composables/layout'
+import { layoutInfoInjectionKey, registerWatchers } from './composables/layout'
 import { useSidebarControl } from './composables/sidebar'
 
 const {
@@ -24,7 +24,7 @@ const { frontmatter } = useData()
 const slots = useSlots()
 const heroImageSlotExists = computed(() => !!slots['home-hero-image'])
 
-provide('hero-image-slot-exists', heroImageSlotExists)
+provide(layoutInfoInjectionKey, { heroImageSlotExists })
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPHero.vue b/src/client/theme-default/components/VPHero.vue
index e1653085..6352353c 100644
--- a/src/client/theme-default/components/VPHero.vue
+++ b/src/client/theme-default/components/VPHero.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { type Ref, inject } from 'vue'
+import { inject } from 'vue'
 import type { DefaultTheme } from 'vitepress/theme'
 import VPButton from './VPButton.vue'
 import VPImage from './VPImage.vue'
+import { layoutInfoInjectionKey } from '../composables/layout'
 
 export interface HeroAction {
   theme?: 'brand' | 'alt'
@@ -20,7 +21,7 @@ defineProps<{
   actions?: HeroAction[]
 }>()
 
-const heroImageSlotExists = inject('hero-image-slot-exists') as Ref<boolean>
+const { heroImageSlotExists } = inject(layoutInfoInjectionKey)!
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 577c8ece..e542de21 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -2,7 +2,7 @@
 import { inBrowser } from 'vitepress'
 import { computed, provide, watchEffect } from 'vue'
 import { useData } from '../composables/data'
-import { useNav } from '../composables/nav'
+import { navInjectionKey, useNav } from '../composables/nav'
 import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
@@ -12,8 +12,7 @@ const { frontmatter } = useData()
 const hasNavbar = computed(() => {
   return frontmatter.value.navbar !== false
 })
-
-provide('close-screen', closeScreen)
+provide(navInjectionKey, { closeScreen })
 
 watchEffect(() => {
   if (inBrowser) {
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 283cec7c..84ae4e7b 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -2,12 +2,13 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
 import VPLink from './VPLink.vue'
+import { navInjectionKey } from '../composables/nav';
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
-const closeScreen = inject('close-screen') as () => void
+const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index fde606fe..fc652804 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -2,12 +2,13 @@
 import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
 import VPLink from './VPLink.vue'
+import { navInjectionKey } from '../composables/nav';
 
 defineProps<{
   item: DefaultTheme.NavItemWithLink
 }>()
 
-const closeScreen = inject('close-screen') as () => void
+const { closeScreen } = inject(navInjectionKey)!
 </script>
 
 <template>
diff --git a/src/client/theme-default/composables/layout.ts b/src/client/theme-default/composables/layout.ts
index 1b993ea6..be40a383 100644
--- a/src/client/theme-default/composables/layout.ts
+++ b/src/client/theme-default/composables/layout.ts
@@ -1,6 +1,7 @@
 import { inBrowser, onContentUpdated, useRoute } from 'vitepress'
 import type { DefaultTheme, useLayout as expected } from 'vitepress/theme'
 import { computed, shallowReadonly, shallowRef, watch } from 'vue'
+import type { ComputedRef, InjectionKey } from 'vue'
 import { getSidebar, getSidebarGroups } from '../support/sidebar'
 import { useData } from './data'
 import { getHeaders } from './outline'
@@ -102,3 +103,10 @@ export function registerWatchers({ closeSidebar }: RegisterWatchersOptions) {
 
   useCloseSidebarOnEscape(closeSidebar)
 }
+
+export interface LayoutInfo {
+  heroImageSlotExists: ComputedRef<boolean>
+}
+
+export const layoutInfoInjectionKey: InjectionKey<LayoutInfo> =
+  Symbol('layoutInfo')
diff --git a/src/client/theme-default/composables/nav.ts b/src/client/theme-default/composables/nav.ts
index fbefa6f4..3aa13b56 100644
--- a/src/client/theme-default/composables/nav.ts
+++ b/src/client/theme-default/composables/nav.ts
@@ -1,5 +1,6 @@
 import { useRoute } from 'vitepress'
 import { ref, watch } from 'vue'
+import type { InjectionKey } from 'vue'
 
 export function useNav() {
   const isScreenOpen = ref(false)
@@ -35,3 +36,9 @@ export function useNav() {
     toggleScreen
   }
 }
+
+export interface NavExposedMethods {
+  closeScreen: () => void
+}
+
+export const navInjectionKey: InjectionKey<NavExposedMethods> = Symbol('nav')