refactor: update the media query interface, unify the naming to more descriptive names, and apply the new naming to multiple components

src/components/button-animation/injection.ts

@@ -1,4 +1,6 @@
 import type { ButtonAnimationProps } from './interface'
 import type { InjectionKey } from 'vue'
 
-export const buttonAnimationInjectionKey: InjectionKey<Partial<ButtonAnimationProps>> = Symbol('buttonAnimationInjectionKey')
+export const buttonAnimationInjectionKey: InjectionKey<Partial<ButtonAnimationProps>> = Symbol(
+  'buttonAnimationInjectionKey',
+)

src/injection/interface.ts

@@ -1,11 +1,11 @@
 import type { ComputedRef, Ref } from 'vue'
 
 export interface MediaQueryProvider {
-  sm: ComputedRef<boolean>
-  md: ComputedRef<boolean>
-  lg: ComputedRef<boolean>
-  xl: ComputedRef<boolean>
-  xxl: ComputedRef<boolean>
+  isSmallScreen: ComputedRef<boolean>
+  isMediumScreen: ComputedRef<boolean>
+  isLargeScreen: ComputedRef<boolean>
+  isExtraLargeScreen: ComputedRef<boolean>
+  isExtraExtraLargeScreen: ComputedRef<boolean>
 }
 
 export type LayoutSlideDirection = 'left' | 'right' | null

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

@@ -23,7 +23,7 @@ import twColors from '@/utils/tailwindColor'
 import NoiseModal from './NoiseModal.vue'
 import WatermarkModal from './WatermarkModal.vue'
 
-const { sm } = useInjection(mediaQueryInjectionKey)
+const { isSmallScreen } = useInjection(mediaQueryInjectionKey)
 
 const preferencesStore = usePreferencesStore()
 const systemStore = useSystemStore()
@@ -144,7 +144,7 @@ const showNoiseModal = () => {
                   :value="preferencesStore.preferences.menu.collapsed"
                   :checked-value="false"
                   :unchecked-value="true"
-                  :disabled="sm"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({
@@ -183,7 +183,7 @@ const showNoiseModal = () => {
                 <span>显示导航按钮</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showNavigation"
-                  :disabled="sm"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({
@@ -196,7 +196,7 @@ const showNoiseModal = () => {
                 <span>显示面包屑</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showBreadcrumb"
-                  :disabled="sm"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({
@@ -209,7 +209,7 @@ const showNoiseModal = () => {
                 <span>显示标签页</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showTabs"
-                  :disabled="sm"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({
@@ -222,7 +222,7 @@ const showNoiseModal = () => {
                 <span>常显标签关闭按钮</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showTabClose"
-                  :disabled="sm"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({
@@ -235,7 +235,7 @@ const showNoiseModal = () => {
                 <span>显示底部</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showFooter"
-                  :disabled="sm"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({
@@ -296,6 +296,7 @@ const showNoiseModal = () => {
                 <span>启用导航过渡效果</span>
                 <NSwitch
                   :value="preferencesStore.preferences.enableNavigationTransition"
+                  :disabled="isSmallScreen"
                   @update-value="
                     (value) =>
                       modify({

src/layouts/index.vue

@@ -32,11 +32,11 @@ const preferencesStore = usePreferencesStore()
 const { scrollbarInMainLayout } = useComponentThemeOverrides()
 
 const mediaQuery = {
-  sm: useMediaQuery('(max-width: 640px)'),
-  md: useMediaQuery('(max-width: 768px)'),
-  lg: useMediaQuery('(max-width: 1024px)'),
-  xl: useMediaQuery('(max-width: 1280px)'),
-  xxl: useMediaQuery('(max-width: 1536px)'),
+  isSmallScreen: useMediaQuery('(max-width: 640px)'),
+  isMediumScreen: useMediaQuery('(max-width: 768px)'),
+  isLargeScreen: useMediaQuery('(max-width: 1024px)'),
+  isExtraLargeScreen: useMediaQuery('(max-width: 1280px)'),
+  isExtraExtraLargeScreen: useMediaQuery('(max-width: 1536px)'),
 }
 
 const layoutSlideDirection = ref<LayoutSlideDirection>(null)
@@ -56,7 +56,7 @@ function setLayoutSlideDirection(direction: LayoutSlideDirection) {
 }
 
 watch(
-  () => mediaQuery.sm.value,
+  () => mediaQuery.isSmallScreen.value,
   (isSm) => {
     if (isSm) {
       preferencesStore.modify({
@@ -82,28 +82,28 @@ provide(layoutInjectionKey, {
     class="relative flex h-svh overflow-hidden"
     :style="{ backgroundImage: `url(${texturePng})` }"
   >
-    <MobileLeftAside v-if="mediaQuery.sm.value" />
+    <MobileLeftAside v-if="mediaQuery.isSmallScreen.value" />
 
     <div
       class="relative flex h-full w-full flex-col border-naive-border bg-naive-card/50 transition-[background-color,border-color,rounded,transform]"
       :class="{
-        'rounded-xl border': mediaQuery.sm.value && layoutTranslateOffset,
+        'rounded-xl border': mediaQuery.isSmallScreen.value && layoutTranslateOffset,
       }"
       :style="
-        mediaQuery.sm.value &&
+        mediaQuery.isSmallScreen.value &&
         layoutSlideDirection && {
           transform: `translate(${layoutTranslateOffset}px) scale(0.88)`,
         }
       "
     >
-      <HeaderLayout v-if="!mediaQuery.sm.value" />
+      <HeaderLayout v-if="!mediaQuery.isSmallScreen.value" />
       <MobileHeader v-else />
       <div class="flex flex-1 overflow-hidden">
-        <AsideLayout v-if="!mediaQuery.sm.value" />
+        <AsideLayout v-if="!mediaQuery.isSmallScreen.value" />
         <div class="relative flex flex-1 flex-col overflow-x-hidden">
           <CollapseTransition
             :display="
-              !mediaQuery.sm.value &&
+              !mediaQuery.isSmallScreen.value &&
               !isEmpty(tabsStore.tabs) &&
               preferencesStore.preferences.showTabs
             "
@@ -116,7 +116,7 @@ provide(layoutInjectionKey, {
           <NScrollbar
             class="transition-[padding]"
             :class="{
-              'pb-4': mediaQuery.sm.value && layoutSlideDirection,
+              'pb-4': mediaQuery.isSmallScreen.value && layoutSlideDirection,
             }"
             container-class="main-container"
             :theme-overrides="scrollbarInMainLayout"
@@ -135,7 +135,7 @@ provide(layoutInjectionKey, {
             </template>
           </EmptyPlaceholder>
           <CollapseTransition
-            :display="!mediaQuery.sm.value && preferencesStore.preferences.showFooter"
+            :display="!mediaQuery.isSmallScreen.value && preferencesStore.preferences.showFooter"
             direction="horizontal"
             :render-content="false"
             container-class="shrink-0 items-baseline"
@@ -145,11 +145,11 @@ provide(layoutInjectionKey, {
         </div>
       </div>
       <div
-        v-if="mediaQuery.sm.value && layoutSlideDirection"
+        v-if="mediaQuery.isSmallScreen.value && layoutSlideDirection"
         class="absolute inset-0"
         @click="setLayoutSlideDirection(null)"
       />
     </div>
-    <MobileRightAside v-if="mediaQuery.sm.value" />
+    <MobileRightAside v-if="mediaQuery.isSmallScreen.value" />
   </div>
 </template>

src/layouts/main/index.vue

@@ -16,7 +16,7 @@ defineOptions({
   name: 'MainLayout',
 })
 
-const { sm } = useInjection(mediaQueryInjectionKey)
+const { isSmallScreen } = useInjection(mediaQueryInjectionKey)
 const { shouldRefreshRoute, layoutSlideDirection, setLayoutSlideDirection } =
   useInjection(layoutInjectionKey)
 
@@ -82,7 +82,12 @@ watch(
 
     if (!preferencesStore.preferences.enableNavigationTransition) return
 
-    if (!preferencesStore.preferences.showTabs || sm.value) {
+    if (isSmallScreen.value) {
+      navigationTransitionName.value = ''
+      return
+    }
+
+    if (!preferencesStore.preferences.showTabs) {
       navigationTransitionName.value = 'scale'
       return
     }

src/views/about/index.vue

@@ -12,7 +12,7 @@ defineOptions({
 
 let codeToHtml: any
 
-const { md } = useInjection(mediaQueryInjectionKey)
+const { isMediumScreen } = useInjection(mediaQueryInjectionKey)
 
 const APP_NAME = import.meta.env.VITE_APP_NAME
 
@@ -189,7 +189,7 @@ onMounted(async () => {
   <div class="flex flex-col gap-y-4 p-4">
     <NCard
       :title="`关于 ${APP_NAME}`"
-      :size="md ? 'small' : undefined"
+      :size="isMediumScreen ? 'small' : undefined"
     >
       <p class="text-base">
         {{ APP_NAME }} 是一个轻盈而优雅的后台管理模板，主要技术栈由
@@ -262,7 +262,7 @@ onMounted(async () => {
     <div class="flex gap-x-2 max-lg:flex-col">
       <NCard
         title="目录结构"
-        :size="md ? 'small' : undefined"
+        :size="isMediumScreen ? 'small' : undefined"
       >
         <NScrollbar container-style="max-height: 1100px;">
           <div v-html="directoryStructureHighlight"></div>
@@ -270,7 +270,7 @@ onMounted(async () => {
       </NCard>
       <NCard
         title="依赖信息"
-        :size="md ? 'small' : undefined"
+        :size="isMediumScreen ? 'small' : undefined"
       >
         <NSplit
           direction="vertical"

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

@@ -46,7 +46,7 @@ defineOptions({
 
 let codeToHtml: any
 
-const { md, lg, xl } = useInjection(mediaQueryInjectionKey)
+const { isMediumScreen, isLargeScreen, isExtraLargeScreen } = useInjection(mediaQueryInjectionKey)
 
 const message = useMessage()
 
@@ -230,12 +230,12 @@ watch(
     >
       一个数据表单的例子，做了一些验证的限制，右边是规则和表单的数据，你可以拖动它们之间的分割线
     </NAlert>
-    <NCard :size="md ? 'small' : undefined">
+    <NCard :size="isMediumScreen ? 'small' : undefined">
       <NSplit
-        :pane1-class="lg ? 'pb-4' : 'pr-8'"
-        :pane2-class="lg ? 'pt-4' : 'pl-8'"
+        :pane1-class="isLargeScreen ? 'pb-4' : 'pr-8'"
+        :pane2-class="isLargeScreen ? 'pt-4' : 'pl-8'"
         :default-size="0.6"
-        :direction="xl ? 'vertical' : 'horizontal'"
+        :direction="isExtraLargeScreen ? 'vertical' : 'horizontal'"
       >
         <template #1>
           <NScrollbar>

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

@@ -21,7 +21,7 @@ import {
 import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 
-const { md, lg } = useInjection(mediaQueryInjectionKey)
+const { isMediumScreen, isLargeScreen } = useInjection(mediaQueryInjectionKey)
 
 import { defineComponent, reactive, ref, useTemplateRef, nextTick } from 'vue'
 
@@ -453,16 +453,16 @@ getDataList()
     >
       一个数据表格的例子，不算复杂，有一个高度的计算，也许对你有帮助
     </NAlert>
-    <NCard :size="md ? 'small' : undefined">
+    <NCard :size="isMediumScreen ? '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="!lg"
+          :inline="!isLargeScreen"
           label-placement="left"
           class="max-lg:w-full max-lg:flex-col"
-          :label-width="lg ? 70 : undefined"
+          :label-width="isLargeScreen ? 70 : undefined"
         >
           <NFormItem
             label="姓名"
@@ -541,7 +541,7 @@ getDataList()
           ref="dataTableRef"
           v-model:checked-row-keys="checkedRowKeys"
           :remote="true"
-          :max-height="md ? undefined : maxHeight"
+          :max-height="isMediumScreen ? undefined : maxHeight"
           :scroll-x="enableScrollX ? 1800 : 0"
           :min-height="166.6"
           :columns="columns"
@@ -582,7 +582,7 @@ getDataList()
               </NButton>
 
               <NButton
-                v-show="!md"
+                v-show="!isMediumScreen"
                 @click="enableContextmenu = !enableContextmenu"
                 :type="enableContextmenu ? 'primary' : 'default'"
                 secondary
@@ -590,7 +590,7 @@ getDataList()
                 右键菜单
               </NButton>
               <NButton
-                v-show="!md"
+                v-show="!isMediumScreen"
                 @click="handleDownloadCsvClick"
                 secondary
                 type="info"
@@ -602,10 +602,10 @@ getDataList()
           <NPagination
             v-bind="pagination"
             :prefix="paginationPrefix"
-            :page-slot="md ? 5 : undefined"
-            :show-quick-jump-dropdown="!md"
-            :show-quick-jumper="!md"
-            :show-size-picker="!md"
+            :page-slot="isMediumScreen ? 5 : undefined"
+            :show-quick-jump-dropdown="!isMediumScreen"
+            :show-quick-jumper="!isMediumScreen"
+            :show-size-picker="!isMediumScreen"
           />
         </div>
       </div>

src/views/drag-drop/index.vue

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

src/views/dynamic-route/index.vue

@@ -5,7 +5,7 @@ import { RouterLink, useRouter } from 'vue-router'
 import { useInjection } from '@/composable/useInjection'
 import { mediaQueryInjectionKey } from '@/injection'
 
-const { md } = useInjection(mediaQueryInjectionKey)
+const { isMediumScreen } = useInjection(mediaQueryInjectionKey)
 
 defineOptions({
   name: 'DynamicRoute',
@@ -21,7 +21,7 @@ const router = useRouter()
     >
       在路由配置的 meta 中添加 enableMultiTab 属性，访问不同的动态路径时都会创建新的 tab
     </NAlert>
-    <NCard :size="md ? 'small' : undefined">
+    <NCard :size="isMediumScreen ? '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"