chore: some project structure changes

src/components/HintHelp.vue

@@ -6,7 +6,7 @@ import { isVNode } from 'vue'
 import type { ButtonProps, PopoverProps } from 'naive-ui'
 import type { AllowedComponentProps, HTMLAttributes, SVGAttributes, VNodeChild } from 'vue'
 
-interface HintHelpProps {
+export interface HintHelpProps {
   buttonProps?: AllowedComponentProps & ButtonProps
   content?: (() => VNodeChild) | string
   iconProps?: SVGAttributes

src/injection/index.ts

@@ -1,6 +1,10 @@
-import type { MediaQueryInjection } from './interface'
+import type { LayoutSlideDirectionInjection, MediaQueryInjection } from './interface'
 import type { InjectionKey } from 'vue'
 
-export const mediaQueryInjectionKey = Symbol() as InjectionKey<MediaQueryInjection>
+export const mediaQueryInjectionKey: InjectionKey<MediaQueryInjection> =
+  Symbol('mediaQueryInjectionKey')
+export const layoutSlideDirectionInjectionKey: InjectionKey<LayoutSlideDirectionInjection> = Symbol(
+  'layoutSlideDirectionInjectionKey',
+)
 
 export * from './interface'

src/injection/interface.ts

@@ -1,7 +1,16 @@
+import type { ComputedRef, Ref } from 'vue'
+
 export interface MediaQueryInjection {
-  sm: boolean
-  md: boolean
-  lg: boolean
-  xl: boolean
-  '2xl': boolean
+  sm: ComputedRef<boolean>
+  md: ComputedRef<boolean>
+  lg: ComputedRef<boolean>
+  xl: ComputedRef<boolean>
+  xxl: ComputedRef<boolean>
+}
+
+export type LayoutSlideDirection = 'left' | 'right' | null
+
+export interface LayoutSlideDirectionInjection {
+  direction: Ref<LayoutSlideDirection>
+  setDirection: (direction: LayoutSlideDirection) => void
 }

src/layouts/aside/mobile/MobileLeftAside.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import { usePreferencesStore } from '@/stores'
+import { useInjection } from '@/composable/useInjection'
+import { layoutSlideDirectionInjectionKey } from '@/injection'
 
 import LogoArea from '../../header/LogoArea.vue'
 import Menu from '../component/Menu.vue'
 import UserCard from '../component/UserCard.vue'
 
-const preferencesStore = usePreferencesStore()
+const { direction } = useInjection(layoutSlideDirectionInjectionKey)
 </script>
 <template>
   <div
     class="absolute top-0 left-0 flex h-svh flex-col gap-y-4 pt-6 pb-4 transition-[translate]"
     :class="{
-      '-translate-x-full': preferencesStore.layoutSlideDirection !== 'right',
+      '-translate-x-full': direction !== 'right',
     }"
   >
     <LogoArea />

src/layouts/aside/mobile/MobileRightAside.vue

@@ -1,16 +1,17 @@
 <script setup lang="ts">
 import { ButtonAnimationProvider } from '@/components'
-import { usePreferencesStore } from '@/stores'
+import { useInjection } from '@/composable/useInjection'
+import { layoutSlideDirectionInjectionKey } from '@/injection'
 
 import Actions from '../../header/actions/index.vue'
 
-const preferencesStore = usePreferencesStore()
+const { direction } = useInjection(layoutSlideDirectionInjectionKey)
 </script>
 <template>
   <div
     class="absolute top-0 right-0 h-svh p-4 transition-[translate]"
     :class="{
-      'translate-x-full': preferencesStore.layoutSlideDirection !== 'left',
+      'translate-x-full': direction !== 'left',
     }"
   >
     <div class="flex h-full items-center justify-between">

src/layouts/header/actions/component/PreferencesDrawer.vue

@@ -9,10 +9,11 @@ import {
   useModal,
   NScrollbar,
 } from 'naive-ui'
-import { h, ref, inject } from 'vue'
+import { h, ref } from 'vue'
 
 import { ButtonAnimation, ButtonAnimationProvider } from '@/components'
 import { useComponentThemeOverrides } from '@/composable/useComponentThemeOverrides'
+import { useInjection } from '@/composable/useInjection'
 import { usePersonalization } from '@/composable/usePersonalization'
 import { mediaQueryInjectionKey } from '@/injection'
 import { usePreferencesStore } from '@/stores'
@@ -22,7 +23,7 @@ import twColors from '@/utils/tailwindColor'
 import NoiseModal from './NoiseModal.vue'
 import WatermarkModal from './WatermarkModal.vue'
 
-const mediaQueryInjection = inject(mediaQueryInjectionKey, null)
+const { sm } = useInjection(mediaQueryInjectionKey)
 
 const preferencesStore = usePreferencesStore()
 const systemStore = useSystemStore()
@@ -143,7 +144,7 @@ const showNoiseModal = () => {
                   :value="preferencesStore.preferences.menu.collapsed"
                   :checked-value="false"
                   :unchecked-value="true"
-                  :disabled="mediaQueryInjection?.sm"
+                  :disabled="sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -182,7 +183,7 @@ const showNoiseModal = () => {
                 <span>显示导航按钮</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showNavigation"
-                  :disabled="mediaQueryInjection?.sm"
+                  :disabled="sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -195,7 +196,7 @@ const showNoiseModal = () => {
                 <span>显示面包屑</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showBreadcrumb"
-                  :disabled="mediaQueryInjection?.sm"
+                  :disabled="sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -208,7 +209,7 @@ const showNoiseModal = () => {
                 <span>显示标签页</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showTabs"
-                  :disabled="mediaQueryInjection?.sm"
+                  :disabled="sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -221,7 +222,7 @@ const showNoiseModal = () => {
                 <span>常显标签关闭按钮</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showTabClose"
-                  :disabled="mediaQueryInjection?.sm"
+                  :disabled="sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -234,7 +235,7 @@ const showNoiseModal = () => {
                 <span>显示底部</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showFooter"
-                  :disabled="mediaQueryInjection?.sm"
+                  :disabled="sm"
                   @update-value="
                     (value) =>
                       modify({

src/layouts/header/index.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import { inject } from 'vue'
-
+import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 import { usePreferencesStore } from '@/stores'
 
@@ -15,14 +14,14 @@ defineOptions({
 })
 
 const preferencesStore = usePreferencesStore()
-const mediaQueryInjection = inject(mediaQueryInjectionKey)
+const { sm } = useInjection(mediaQueryInjectionKey)
 </script>
 <template>
   <header
     class="border-b border-naive-border bg-naive-card transition-[background-color,border-color]"
   >
     <div
-      v-if="!mediaQueryInjection?.sm"
+      v-if="!sm"
       class="flex"
     >
       <LogoArea />

src/layouts/header/mobile/MobileHeader.vue

@@ -1,26 +1,20 @@
 <script setup lang="ts">
 import { ButtonAnimation } from '@/components'
 import Logo from '@/components/Logo.vue'
+import { useInjection } from '@/composable/useInjection'
+import { layoutSlideDirectionInjectionKey } from '@/injection'
 import router from '@/router'
-import { usePreferencesStore } from '@/stores'
 
-import type { LayoutSlideDirection } from '@/stores'
-
-const preferencesStore = usePreferencesStore()
-const { setLayoutSlideDirection } = preferencesStore
-
-const toggleLayoutSlideDirection = (direction: LayoutSlideDirection) => {
-  setLayoutSlideDirection(direction === preferencesStore.layoutSlideDirection ? null : direction)
-}
+const { setDirection } = useInjection(layoutSlideDirectionInjectionKey)
 </script>
 <template>
   <div
     class="flex items-center justify-between px-4 py-2"
-    @click="toggleLayoutSlideDirection(null)"
+    @click="setDirection(null)"
   >
     <div
       class="size-9"
-      @click.stop="toggleLayoutSlideDirection('right')"
+      @click.stop="setDirection('right')"
     >
       <Logo />
     </div>
@@ -34,7 +28,7 @@ const toggleLayoutSlideDirection = (direction: LayoutSlideDirection) => {
     <div class="flex items-center gap-x-2">
       <ButtonAnimation
         size="large"
-        @click="toggleLayoutSlideDirection('left')"
+        @click="setDirection('left')"
       >
         <span class="iconify ph--list" />
       </ButtonAnimation>

src/layouts/index.vue

@@ -2,12 +2,12 @@
 import { useMediaQuery } from '@vueuse/core'
 import { isEmpty } from 'lodash-es'
 import { NScrollbar } from 'naive-ui'
-import { computed, provide, watch, reactive } from 'vue'
+import { computed, provide, watch, ref } from 'vue'
 
 import texturePng from '@/assets/texture.png'
 import { EmptyPlaceholder } from '@/components'
 import { useComponentThemeOverrides } from '@/composable/useComponentThemeOverrides'
-import { mediaQueryInjectionKey } from '@/injection'
+import { mediaQueryInjectionKey, layoutSlideDirectionInjectionKey } from '@/injection'
 import { usePreferencesStore } from '@/stores'
 import { useTabsStore } from '@/stores'
 
@@ -19,6 +19,8 @@ import FooterLayout from './footer/index.vue'
 import HeaderLayout from './header/index.vue'
 import MainLayout from './main/index.vue'
 
+import type { LayoutSlideDirection } from '@/injection'
+
 defineOptions({
   name: 'Layout',
 })
@@ -27,22 +29,28 @@ const tabsStore = useTabsStore()
 const preferencesStore = usePreferencesStore()
 const { scrollbarInMainLayout } = useComponentThemeOverrides()
 
-const mediaQuery = reactive({
+const mediaQuery = {
   sm: useMediaQuery('(max-width: 640px)'),
   md: useMediaQuery('(max-width: 768px)'),
   lg: useMediaQuery('(max-width: 1024px)'),
   xl: useMediaQuery('(max-width: 1280px)'),
-  '2xl': useMediaQuery('(max-width: 1536px)'),
-})
+  xxl: useMediaQuery('(max-width: 1536px)'),
+}
+
+const layoutSlideDirection = ref<LayoutSlideDirection>(null)
 
-const mobileLayoutTranslateOffset = computed(() => {
-  return preferencesStore.layoutSlideDirection === 'right'
+const layoutTranslateOffset = computed(() => {
+  return layoutSlideDirection.value === 'right'
     ? preferencesStore.preferences.menu.maxWidth || 0
-    : preferencesStore.layoutSlideDirection === 'left'
+    : layoutSlideDirection.value === 'left'
       ? -62
       : 0
 })
 
+function setLayoutSlideDirection(direction: LayoutSlideDirection) {
+  layoutSlideDirection.value = direction === layoutSlideDirection.value ? null : direction
+}
+
 watch(
   () => mediaQuery.sm,
   (isMaxSm) => {
@@ -58,29 +66,34 @@ watch(
 )
 
 provide(mediaQueryInjectionKey, mediaQuery)
+
+provide(layoutSlideDirectionInjectionKey, {
+  direction: layoutSlideDirection,
+  setDirection: setLayoutSlideDirection,
+})
 </script>
 <template>
   <div
     class="relative flex h-svh overflow-hidden"
     :style="{ backgroundImage: `url(${texturePng})` }"
   >
-    <MobileLeftAside v-if="mediaQuery.sm" />
+    <MobileLeftAside v-if="mediaQuery.sm.value" />
     <div
       class="relative flex h-full w-full flex-col border-naive-border transition-[border-color,rounded,transform] max-sm:rounded-xl sm:transform-none!"
       :class="{
-        'overflow-hidden rounded-xl border': mediaQuery.sm && mobileLayoutTranslateOffset,
+        'overflow-hidden rounded-xl border': mediaQuery.sm.value && layoutTranslateOffset,
       }"
       :style="
-        mediaQuery.sm && preferencesStore.layoutSlideDirection
+        mediaQuery.sm.value && layoutSlideDirection
           ? {
-              transform: `translate(${mobileLayoutTranslateOffset}px) scale(0.88)`,
+              transform: `translate(${layoutTranslateOffset}px) scale(0.88)`,
             }
           : null
       "
     >
       <HeaderLayout />
       <div class="flex flex-1 overflow-hidden">
-        <AsideLayout v-if="!mediaQuery.sm" />
+        <AsideLayout v-if="!mediaQuery.sm.value" />
         <div class="relative flex flex-1 flex-col overflow-x-hidden">
           <Transition
             type="transition"
@@ -93,7 +106,9 @@ provide(mediaQueryInjectionKey, mediaQuery)
           >
             <div
               v-if="
-                !mediaQuery.sm && !isEmpty(tabsStore.tabs) && preferencesStore.preferences.showTabs
+                !mediaQuery.sm.value &&
+                !isEmpty(tabsStore.tabs) &&
+                preferencesStore.preferences.showTabs
               "
               class="grid shrink-0 items-baseline overflow-hidden"
             >
@@ -103,7 +118,7 @@ provide(mediaQueryInjectionKey, mediaQuery)
           <NScrollbar
             class="transition-[padding]"
             :class="{
-              'pb-4': mediaQuery.sm && preferencesStore.layoutSlideDirection,
+              'pb-4': mediaQuery.sm.value && layoutSlideDirection,
             }"
             container-class="main-container"
             :theme-overrides="scrollbarInMainLayout"
@@ -131,7 +146,7 @@ provide(mediaQueryInjectionKey, mediaQuery)
             leave-from-class="grid-rows-[1fr]"
           >
             <div
-              v-if="!mediaQuery.sm && preferencesStore.preferences.showFooter"
+              v-if="!mediaQuery.sm.value && preferencesStore.preferences.showFooter"
               class="grid shrink-0 items-baseline overflow-hidden"
             >
               <FooterLayout />
@@ -140,6 +155,6 @@ provide(mediaQueryInjectionKey, mediaQuery)
         </div>
       </div>
     </div>
-    <MobileRightAside v-if="mediaQuery.sm" />
+    <MobileRightAside v-if="mediaQuery.sm.value" />
   </div>
 </template>

src/layouts/main/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { isEmpty } from 'lodash-es'
-import { computed, nextTick, onMounted, ref, watch, inject } from 'vue'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { RouterView } from 'vue-router'
 
+import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 import router from '@/router'
 import { usePreferencesStore } from '@/stores'
@@ -15,7 +16,7 @@ defineOptions({
   name: 'MainLayout',
 })
 
-const mediaQueryInjection = inject(mediaQueryInjectionKey, null)
+const { sm } = useInjection(mediaQueryInjectionKey)
 
 const layoutsRouteRedirect = router.getRoutes().find((item) => item.name === 'layouts')?.redirect
 
@@ -79,7 +80,7 @@ watch(
 
     if (!preferencesStore.preferences.enableNavigationTransition) return
 
-    if (!preferencesStore.preferences.showTabs || mediaQueryInjection?.sm) {
+    if (!preferencesStore.preferences.showTabs || sm.value) {
       navigationTransitionName.value = 'scale'
       return
     }

src/stores/preferences.ts

@@ -1,12 +1,10 @@
 import { useStorage } from '@vueuse/core'
 import { mergeWith } from 'lodash-es'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { ref, watch } from 'vue'
+import { watch } from 'vue'
 
 import type { WatermarkProps } from 'naive-ui'
 
-export type LayoutSlideDirection = 'left' | 'right' | null
-
 export interface PreferencesOptions {
   menu: Partial<{
     collapsed: boolean
@@ -75,8 +73,6 @@ export const DEFAULT_PREFERENCES_OPTIONS: PreferencesOptions = {
 export const usePreferencesStore = defineStore('preferencesStore', () => {
   const preferences = useStorage<PreferencesOptions>('preferences', DEFAULT_PREFERENCES_OPTIONS)
 
-  const layoutSlideDirection = ref<LayoutSlideDirection>(null)
-
   const modify = (options: Partial<PreferencesOptions>) => {
     preferences.value = mergeWith({}, preferences.value, options, (objValue, srcValue) => {
       if (Array.isArray(objValue) && Array.isArray(srcValue)) {
@@ -85,10 +81,6 @@ export const usePreferencesStore = defineStore('preferencesStore', () => {
     })
   }
 
-  const setLayoutSlideDirection = (direction: LayoutSlideDirection) => {
-    layoutSlideDirection.value = direction
-  }
-
   const reset = () => {
     preferences.value = structuredClone(DEFAULT_PREFERENCES_OPTIONS)
   }
@@ -105,8 +97,6 @@ export const usePreferencesStore = defineStore('preferencesStore', () => {
 
   return {
     preferences,
-    layoutSlideDirection,
-    setLayoutSlideDirection,
     reset,
     modify,
   }

src/stores/system.ts

@@ -9,9 +9,7 @@ import { useUserStore } from '@/stores'
 export const useSystemStore = defineStore('systemStore', () => {
   const version = useStorage('version', '')
 
-  const legacyConfig = localStorage.getItem('configure')
-
-  if (legacyConfig || version.value !== packageJson.version) {
+  if (version.value !== packageJson.version) {
     useTabsStore().clearTabs()
     usePreferencesStore().reset()
     useUserStore().cleanup()

src/views/about/index.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { NCard, NSplit, NButton, NScrollbar, NTag } from 'naive-ui'
-import { onMounted, ref, inject } from 'vue'
+import { onMounted, ref } from 'vue'
 
 import packageJson from '@/../package.json'
+import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 
 defineOptions({
@@ -11,7 +12,7 @@ defineOptions({
 
 let codeToHtml: any
 
-const mediaQuery = inject(mediaQueryInjectionKey, null)
+const { md } = useInjection(mediaQueryInjectionKey)
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
@@ -188,7 +189,7 @@ onMounted(async () => {
   <div class="flex flex-col gap-y-4 p-4">
     <NCard
       :title="`关于 ${APP_NAME}`"
-      :size="mediaQuery?.md.value ? 'small' : undefined"
+      :size="md ? 'small' : undefined"
     >
       <p class="text-base">
         {{ APP_NAME }} 是一个轻盈而优雅的后台管理模板，主要技术栈由
@@ -261,7 +262,7 @@ onMounted(async () => {
     <div class="flex gap-x-2 max-lg:flex-col">
       <NCard
         title="目录结构"
-        :size="mediaQuery?.md.value ? 'small' : undefined"
+        :size="md ? 'small' : undefined"
       >
         <NScrollbar container-style="max-height: 1100px;">
           <div v-html="directoryStructureHighlight"></div>
@@ -269,7 +270,7 @@ onMounted(async () => {
       </NCard>
       <NCard
         title="依赖信息"
-        :size="mediaQuery?.md.value ? 'small' : undefined"
+        :size="md ? 'small' : undefined"
       >
         <NSplit
           direction="vertical"

src/views/data-show/data-form/index.vue

@@ -20,8 +20,9 @@ import {
   NRadio,
   useMessage,
 } from 'naive-ui'
-import { computed, ref, useTemplateRef, watch, inject } from 'vue'
+import { computed, ref, useTemplateRef, watch } from 'vue'
 
+import { useInjection } from '@/composable/useInjection'
 import { useResettableReactive } from '@/composable/useResettable'
 import { mediaQueryInjectionKey } from '@/injection'
 
@@ -45,7 +46,7 @@ defineOptions({
 
 let codeToHtml: any
 
-const mediaQueryInjection = inject(mediaQueryInjectionKey, null)
+const { md, lg, xl } = useInjection(mediaQueryInjectionKey)
 
 const message = useMessage()
 
@@ -229,12 +230,12 @@ watch(
     >
       一个数据表单的例子，做了一些验证的限制，右边是规则和表单的数据，你可以拖动它们之间的分割线
     </NAlert>
-    <NCard :size="mediaQueryInjection?.md ? 'small' : undefined">
+    <NCard :size="md ? 'small' : undefined">
       <NSplit
-        :pane1-class="mediaQueryInjection?.lg ? 'pb-4' : 'pr-8'"
-        :pane2-class="mediaQueryInjection?.lg ? 'pt-4' : 'pl-8'"
+        :pane1-class="lg ? 'pb-4' : 'pr-8'"
+        :pane2-class="lg ? 'pt-4' : 'pl-8'"
         :default-size="0.6"
-        :direction="mediaQueryInjection?.xl ? 'vertical' : 'horizontal'"
+        :direction="xl ? 'vertical' : 'horizontal'"
       >
         <template #1>
           <NScrollbar>

src/views/data-show/data-table/index.vue

@@ -18,11 +18,12 @@ import {
   NAlert,
 } from 'naive-ui'
 
+import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 
-const mediaQuery = inject(mediaQueryInjectionKey, null)
+const { md, lg } = useInjection(mediaQueryInjectionKey)
 
-import { defineComponent, reactive, ref, useTemplateRef, nextTick, inject } from 'vue'
+import { defineComponent, reactive, ref, useTemplateRef, nextTick } from 'vue'
 
 import { useComponentModifier } from '@/composable/useComponentModifier'
 import { useDataTable } from '@/composable/useDataTable'
@@ -452,16 +453,16 @@ getDataList()
     >
       一个数据表格的例子，不算复杂，有一个高度的计算，也许对你有帮助
     </NAlert>
-    <NCard :size="mediaQuery?.md.value ? 'small' : undefined">
+    <NCard :size="md ? 'small' : undefined">
       <div class="mb-2 flex justify-end gap-x-4 max-xl:mb-4 max-xl:flex-wrap">
         <NForm
           ref="formRef"
           :model="form"
           :rules="rules"
-          :inline="!mediaQuery?.lg.value"
+          :inline="!lg"
           label-placement="left"
           class="max-lg:w-full max-lg:flex-col"
-          :label-width="mediaQuery?.lg.value ? 70 : undefined"
+          :label-width="lg ? 70 : undefined"
         >
           <NFormItem
             label="姓名"
@@ -540,7 +541,7 @@ getDataList()
           ref="dataTableRef"
           v-model:checked-row-keys="checkedRowKeys"
           :remote="true"
-          :max-height="mediaQuery?.md.value ? undefined : maxHeight"
+          :max-height="md ? undefined : maxHeight"
           :scroll-x="enableScrollX ? 1800 : 0"
           :min-height="166.6"
           :columns="columns"
@@ -581,7 +582,7 @@ getDataList()
               </NButton>
 
               <NButton
-                v-show="!mediaQuery?.md.value"
+                v-show="!md"
                 @click="enableContextmenu = !enableContextmenu"
                 :type="enableContextmenu ? 'primary' : 'default'"
                 secondary
@@ -589,7 +590,7 @@ getDataList()
                 右键菜单
               </NButton>
               <NButton
-                v-show="!mediaQuery?.md.value"
+                v-show="!md"
                 @click="handleDownloadCsvClick"
                 secondary
                 type="info"
@@ -601,10 +602,10 @@ getDataList()
           <NPagination
             v-bind="pagination"
             :prefix="paginationPrefix"
-            :page-slot="mediaQuery?.md.value ? 5 : undefined"
-            :show-quick-jump-dropdown="!mediaQuery?.md.value"
-            :show-quick-jumper="!mediaQuery?.md.value"
-            :show-size-picker="!mediaQuery?.md.value"
+            :page-slot="md ? 5 : undefined"
+            :show-quick-jump-dropdown="!md"
+            :show-quick-jumper="!md"
+            :show-size-picker="!md"
           />
         </div>
       </div>

src/views/drag-drop/index.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import { NAlert, NCard, NSplit, NScrollbar, NButton } from 'naive-ui'
-import { ref, watch, inject } from 'vue'
+import { ref, watch } from 'vue'
 import { VueDraggable } from 'vue-draggable-plus'
 
 import { EmptyPlaceholder } from '@/components'
+import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 
 import type { UseDraggableReturn } from 'vue-draggable-plus'
@@ -14,7 +15,7 @@ defineOptions({
 
 let codeToHtml: any
 
-const mediaQuery = inject(mediaQueryInjectionKey, null)
+const { md } = useInjection(mediaQueryInjectionKey)
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
@@ -124,14 +125,14 @@ watch(
     </NAlert>
     <NCard
       title="基础使用"
-      :size="mediaQuery?.md.value ? 'small' : undefined"
+      :size="md ? 'small' : undefined"
     >
       <NSplit
-        :direction="mediaQuery?.md.value ? 'vertical' : 'horizontal'"
-        :pane1-class="mediaQuery?.md.value ? 'pb-4' : 'pr-8'"
-        :pane2-class="mediaQuery?.md.value ? 'pt-4' : 'pl-8'"
+        :direction="md ? 'vertical' : 'horizontal'"
+        :pane1-class="md ? 'pb-4' : 'pr-8'"
+        :pane2-class="md ? 'pt-4' : 'pl-8'"
         :style="{
-          height: mediaQuery?.md.value ? '580px' : '280px',
+          height: md ? '580px' : '280px',
         }"
       >
         <template #1>
@@ -169,7 +170,7 @@ watch(
     </NCard>
     <NCard
       title="网格布局"
-      :size="mediaQuery?.md.value ? 'small' : undefined"
+      :size="md ? 'small' : undefined"
     >
       <div class="mb-4">
         你可以把<span class="text-primary">网格布局</span>的元素拖进<span class="text-primary"
@@ -177,11 +178,11 @@ watch(
         >中，它们可以相互拖放
       </div>
       <NSplit
-        :direction="mediaQuery?.md.value ? 'vertical' : 'horizontal'"
-        :pane1-class="mediaQuery?.md.value ? 'pb-4' : 'pr-8'"
-        :pane2-class="mediaQuery?.md.value ? 'pt-4' : 'pl-8'"
+        :direction="md ? 'vertical' : 'horizontal'"
+        :pane1-class="md ? 'pb-4' : 'pr-8'"
+        :pane2-class="md ? 'pt-4' : 'pl-8'"
         :style="{
-          height: mediaQuery?.md.value ? '680px' : '280px',
+          height: md ? '680px' : '280px',
         }"
         :default-size="0.7"
       >
@@ -219,14 +220,14 @@ watch(
     </NCard>
     <NCard
       title="克隆使用"
-      :size="mediaQuery?.md.value ? 'small' : undefined"
+      :size="md ? 'small' : undefined"
     >
       <NSplit
-        :direction="mediaQuery?.md.value ? 'vertical' : 'horizontal'"
-        :pane1-class="mediaQuery?.md.value ? 'pb-4' : 'pr-8'"
-        :pane2-class="mediaQuery?.md.value ? 'pt-4' : 'pl-8'"
+        :direction="md ? 'vertical' : 'horizontal'"
+        :pane1-class="md ? 'pb-4' : 'pr-8'"
+        :pane2-class="md ? 'pt-4' : 'pl-8'"
         :style="{
-          height: mediaQuery?.md.value ? '780px' : '280px',
+          height: md ? '780px' : '280px',
         }"
         :default-size="0.7"
       >
@@ -255,7 +256,7 @@ watch(
             <NScrollbar>
               <EmptyPlaceholder
                 :show="cloneTaskList.length <= 0"
-                :description="`把${mediaQuery?.md.value ? '上' : '左'}边的任务拖拽到这里`"
+                :description="`把${md ? '上' : '左'}边的任务拖拽到这里`"
               />
               <VueDraggable
                 ref="cloneTaskListDragRef"

src/views/dynamic-route/index.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import { NCard, NAlert, NButton } from 'naive-ui'
-import { inject } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
 
+import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 
-const mediaQuery = inject(mediaQueryInjectionKey, null)
+const { md } = useInjection(mediaQueryInjectionKey)
 
 defineOptions({
   name: 'DynamicRoute',
@@ -21,7 +21,7 @@ const router = useRouter()
     >
       在路由配置的 meta 中添加 enableMultiTab 属性，访问不同的动态路径时都会创建新的 tab
     </NAlert>
-    <NCard :size="mediaQuery?.md.value ? 'small' : undefined">
+    <NCard :size="md ? 'small' : undefined">
       <div class="grid grid-cols-5 gap-4 max-lg:grid-cols-3 max-md:grid-cols-2 max-sm:grid-cols-1">
         <RouterLink
           v-for="value in 50"