style: format code

src/components/button-animation/ButtonAnimation.vue

@@ -17,7 +17,7 @@ const buttonAnimationProps = computed<ButtonAnimationProps>(() => {
   return mergeWith({}, buttonAnimationInject, useAttrs())
 })
 
-const onButtonClicked = () => {
+const onClick = () => {
   if (isAnimating.value) return
 
   isAnimating.value = true
@@ -33,7 +33,7 @@ const onButtonClicked = () => {
     quaternary
     circle
     v-bind="buttonAnimationProps"
-    @click.stop="onButtonClicked"
+    @click.stop="onClick"
   >
     <template #icon>
       <div

src/injection/interface.ts

@@ -1,9 +1,7 @@
-import type { Ref } from 'vue'
-
 export interface MediaQueryInjection {
-  sm: Ref<boolean>
-  md: Ref<boolean>
-  lg: Ref<boolean>
-  xl: Ref<boolean>
-  '2xl': Ref<boolean>
+  sm: boolean
+  md: boolean
+  lg: boolean
+  xl: boolean
+  '2xl': boolean
 }

src/layouts/component/Tabs.vue

@@ -233,7 +233,7 @@ function getTabContextMenuActions(): ContextMenuActions | null {
 
   const { id } = tabValue
 
-  const { locked, keepAlive: keepAlived, pinned } = getTab(id) ?? {}
+  const { locked, keepAlive, pinned } = getTab(id) ?? {}
 
   return {
     close: () => {
@@ -255,7 +255,7 @@ function getTabContextMenuActions(): ContextMenuActions | null {
       updateTab(id, { pinned: !pinned })
     },
     keepalive: () => {
-      updateTab(id, { keepAlive: !keepAlived })
+      updateTab(id, { keepAlive: !keepAlive })
     },
     lock: () => {
       updateTab(id, { locked: !locked })

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

@@ -22,7 +22,7 @@ import twColors from '@/utils/tailwindColor'
 import NoiseModal from './NoiseModal.vue'
 import WatermarkModal from './WatermarkModal.vue'
 
-const mediaQueryInject = inject(mediaQueryInjectionKey, null)
+const mediaQueryInjection = inject(mediaQueryInjectionKey, null)
 
 const preferencesStore = usePreferencesStore()
 const systemStore = useSystemStore()
@@ -121,7 +121,7 @@ const showNoiseModal = () => {
                 animation="rotate"
                 @click="reset"
               >
-                <span class="iconify size-5 ph--arrow-clockwise" />
+                <span class="iconify ph--arrow-clockwise" />
               </ButtonAnimation>
             </div>
           </template>
@@ -143,7 +143,7 @@ const showNoiseModal = () => {
                   :value="preferencesStore.preferences.menu.collapsed"
                   :checked-value="false"
                   :unchecked-value="true"
-                  :disabled="mediaQueryInject?.sm.value"
+                  :disabled="mediaQueryInjection?.sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -182,7 +182,7 @@ const showNoiseModal = () => {
                 <span>显示导航按钮</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showNavigation"
-                  :disabled="mediaQueryInject?.sm.value"
+                  :disabled="mediaQueryInjection?.sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -195,7 +195,7 @@ const showNoiseModal = () => {
                 <span>显示面包屑</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showBreadcrumb"
-                  :disabled="mediaQueryInject?.sm.value"
+                  :disabled="mediaQueryInjection?.sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -208,7 +208,7 @@ const showNoiseModal = () => {
                 <span>显示标签页</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showTabs"
-                  :disabled="mediaQueryInject?.sm.value"
+                  :disabled="mediaQueryInjection?.sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -221,7 +221,7 @@ const showNoiseModal = () => {
                 <span>常显标签关闭按钮</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showTabClose"
-                  :disabled="mediaQueryInject?.sm.value"
+                  :disabled="mediaQueryInjection?.sm"
                   @update-value="
                     (value) =>
                       modify({
@@ -234,7 +234,7 @@ const showNoiseModal = () => {
                 <span>显示底部</span>
                 <NSwitch
                   :value="preferencesStore.preferences.showFooter"
-                  :disabled="mediaQueryInject?.sm.value"
+                  :disabled="mediaQueryInjection?.sm"
                   @update-value="
                     (value) =>
                       modify({

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

@@ -38,7 +38,7 @@ const themeDropdownOptions = [
   },
 ]
 
-const themeIconName = computed(
+const themeIconClasses = computed(
   () =>
     themeDropdownOptions.find((item) => item.key === theme.value)?.iconName ||
     'iconify ph--desktop size-5',
@@ -71,7 +71,7 @@ function renderSelectLabel(option: (typeof themeDropdownOptions)[number]) {
     @update-value="onThemePopselectUpdated"
   >
     <ButtonAnimation title="主题">
-      <span :class="themeIconName" />
+      <span :class="themeIconClasses" />
     </ButtonAnimation>
   </NPopselect>
 </template>

src/layouts/header/index.vue

@@ -15,14 +15,14 @@ defineOptions({
 })
 
 const preferencesStore = usePreferencesStore()
-const mediaQuery = inject(mediaQueryInjectionKey)
+const mediaQueryInjection = inject(mediaQueryInjectionKey)
 </script>
 <template>
   <header
     class="border-b border-naive-border bg-naive-card transition-[background-color,border-color]"
   >
     <div
-      v-if="!mediaQuery?.sm.value"
+      v-if="!mediaQueryInjection?.sm"
       class="flex"
     >
       <LogoArea />

src/layouts/header/mobile/MobileHeader.vue

@@ -19,7 +19,7 @@ const toggleLayoutSlideDirection = (direction: LayoutSlideDirection) => {
     @click="toggleLayoutSlideDirection(null)"
   >
     <div
-      class="size-8"
+      class="size-9"
       @click.stop="toggleLayoutSlideDirection('right')"
     >
       <Logo />

src/layouts/index.vue

@@ -2,7 +2,7 @@
 import { useMediaQuery } from '@vueuse/core'
 import { isEmpty } from 'lodash-es'
 import { NScrollbar } from 'naive-ui'
-import { computed, provide, watch } from 'vue'
+import { computed, provide, watch, reactive } from 'vue'
 
 import texturePng from '@/assets/texture.png'
 import { EmptyPlaceholder } from '@/components'
@@ -27,13 +27,13 @@ const tabsStore = useTabsStore()
 const preferencesStore = usePreferencesStore()
 const { scrollbarInMainLayout } = useComponentThemeOverrides()
 
-const mediaQuery = {
+const mediaQuery = reactive({
   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)'),
-}
+})
 
 const mobileLayoutTranslateOffset = computed(() => {
   return preferencesStore.layoutSlideDirection === 'right'
@@ -44,7 +44,7 @@ const mobileLayoutTranslateOffset = computed(() => {
 })
 
 watch(
-  () => mediaQuery.sm.value,
+  () => mediaQuery.sm,
   (isMaxSm) => {
     if (isMaxSm) {
       preferencesStore.modify({
@@ -64,14 +64,14 @@ provide(mediaQueryInjectionKey, mediaQuery)
     class="relative flex h-svh overflow-hidden"
     :style="{ backgroundImage: `url(${texturePng})` }"
   >
-    <MobileLeftAside v-if="mediaQuery.sm.value" />
+    <MobileLeftAside v-if="mediaQuery.sm" />
     <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.value && mobileLayoutTranslateOffset,
+        'overflow-hidden rounded-xl border': mediaQuery.sm && mobileLayoutTranslateOffset,
       }"
       :style="
-        mediaQuery.sm.value && preferencesStore.layoutSlideDirection
+        mediaQuery.sm && preferencesStore.layoutSlideDirection
           ? {
               transform: `translate(${mobileLayoutTranslateOffset}px) scale(0.88)`,
             }
@@ -80,7 +80,7 @@ provide(mediaQueryInjectionKey, mediaQuery)
     >
       <HeaderLayout />
       <div class="flex flex-1 overflow-hidden">
-        <AsideLayout v-if="!mediaQuery.sm.value" />
+        <AsideLayout v-if="!mediaQuery.sm" />
         <div class="relative flex flex-1 flex-col overflow-x-hidden">
           <Transition
             type="transition"
@@ -93,9 +93,7 @@ provide(mediaQueryInjectionKey, mediaQuery)
           >
             <div
               v-if="
-                !mediaQuery.sm.value &&
-                !isEmpty(tabsStore.tabs) &&
-                preferencesStore.preferences.showTabs
+                !mediaQuery.sm && !isEmpty(tabsStore.tabs) && preferencesStore.preferences.showTabs
               "
               class="grid shrink-0 items-baseline overflow-hidden"
             >
@@ -105,7 +103,7 @@ provide(mediaQueryInjectionKey, mediaQuery)
           <NScrollbar
             class="transition-[padding]"
             :class="{
-              'pb-4': mediaQuery.sm.value && preferencesStore.layoutSlideDirection,
+              'pb-4': mediaQuery.sm && preferencesStore.layoutSlideDirection,
             }"
             container-class="main-container"
             :theme-overrides="scrollbarInMainLayout"
@@ -133,7 +131,7 @@ provide(mediaQueryInjectionKey, mediaQuery)
             leave-from-class="grid-rows-[1fr]"
           >
             <div
-              v-if="!mediaQuery.sm.value && preferencesStore.preferences.showFooter"
+              v-if="!mediaQuery.sm && preferencesStore.preferences.showFooter"
               class="grid shrink-0 items-baseline overflow-hidden"
             >
               <FooterLayout />
@@ -142,6 +140,6 @@ provide(mediaQueryInjectionKey, mediaQuery)
         </div>
       </div>
     </div>
-    <MobileRightAside v-if="mediaQuery.sm.value" />
+    <MobileRightAside v-if="mediaQuery.sm" />
   </div>
 </template>

src/layouts/main/index.vue

@@ -15,7 +15,7 @@ defineOptions({
   name: 'MainLayout',
 })
 
-const mediaQueryInject = inject(mediaQueryInjectionKey, null)
+const mediaQueryInjection = inject(mediaQueryInjectionKey, null)
 
 const layoutsRouteRedirect = router.getRoutes().find((item) => item.name === 'layouts')?.redirect
 
@@ -79,7 +79,7 @@ watch(
 
     if (!preferencesStore.preferences.enableNavigationTransition) return
 
-    if (!preferencesStore.preferences.showTabs || mediaQueryInject?.sm.value) {
+    if (!preferencesStore.preferences.showTabs || mediaQueryInjection?.sm) {
       navigationTransitionName.value = 'scale'
       return
     }

src/stores/system.ts

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

src/views/sign-in/component/ThemeColorPopover.vue

@@ -34,9 +34,7 @@ const colorSwatches = [
   >
     <template #trigger>
       <ButtonAnimation>
-        <template #default>
-          <span class="iconify-[nimbus--color-palette] size-5" />
-        </template>
+        <span class="iconify ph--palette" />
       </ButtonAnimation>
     </template>
     <div class="grid grid-cols-6 gap-1.5">