chore: project structure adjustment

src/injection/index.ts

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

src/injection/interface.ts

@@ -1,6 +1,6 @@
 import type { ComputedRef, Ref } from 'vue'
 
-export interface MediaQueryInjection {
+export interface MediaQueryProvider {
   sm: ComputedRef<boolean>
   md: ComputedRef<boolean>
   lg: ComputedRef<boolean>
@@ -10,7 +10,8 @@ export interface MediaQueryInjection {
 
 export type LayoutSlideDirection = 'left' | 'right' | null
 
-export interface LayoutSlideDirectionInjection {
-  direction: Ref<LayoutSlideDirection>
-  setDirection: (direction: LayoutSlideDirection) => void
+export interface LayoutProvider {
+  shouldRefreshRoute: Ref<boolean>
+  layoutSlideDirection: Ref<LayoutSlideDirection>
+  setLayoutSlideDirection: (direction: LayoutSlideDirection) => void
 }

src/layouts/aside/component/Menu.vue

@@ -20,7 +20,6 @@ watch(
   () => router.currentRoute.value,
   (newRoute) => {
     menuActiveKey.value = newRoute.name as string
-
     menuRef.value?.showOption(menuActiveKey.value)
   },
   {

src/layouts/aside/mobile/MobileLeftAside.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 import { useInjection } from '@/composable/useInjection'
-import { layoutSlideDirectionInjectionKey } from '@/injection'
+import { layoutInjectionKey } from '@/injection'
 
 import LogoArea from '../../header/LogoArea.vue'
 import Menu from '../component/Menu.vue'
 import UserCard from '../component/UserCard.vue'
 
-const { direction } = useInjection(layoutSlideDirectionInjectionKey)
+const { layoutSlideDirection } = useInjection(layoutInjectionKey)
 </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': direction !== 'right',
+      '-translate-x-full': layoutSlideDirection !== 'right',
     }"
   >
     <LogoArea />

src/layouts/aside/mobile/MobileRightAside.vue

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

src/layouts/component/Tabs.vue

@@ -17,6 +17,8 @@ import {
 import { VueDraggable } from 'vue-draggable-plus'
 
 import { ButtonAnimation } from '@/components'
+import { useInjection } from '@/composable/useInjection'
+import { layoutInjectionKey } from '@/injection'
 import router from '@/router'
 import { usePreferencesStore } from '@/stores'
 import { useTabsStore } from '@/stores'
@@ -36,6 +38,8 @@ type ContextMenuActions = {
   lock: () => void
 }
 
+const { shouldRefreshRoute } = useInjection(layoutInjectionKey)
+
 const scrollbarRef = useTemplateRef<InstanceType<typeof NScrollbar>>('scrollbarRef')
 
 const tabsStore = useTabsStore()
@@ -272,11 +276,7 @@ function scrollToActiveTab(behavior: ScrollBehavior = 'auto') {
 }
 
 function handleTabRefresh() {
-  if (!preferencesStore.preferences.shouldRefreshTab) {
-    preferencesStore.modify({
-      shouldRefreshTab: true,
-    })
-  }
+  shouldRefreshRoute.value = true
 }
 
 const routerAfterEach = router.afterEach(() => {

src/layouts/header/mobile/MobileHeader.vue

@@ -2,19 +2,19 @@
 import { ButtonAnimation } from '@/components'
 import Logo from '@/components/Logo.vue'
 import { useInjection } from '@/composable/useInjection'
-import { layoutSlideDirectionInjectionKey } from '@/injection'
+import { layoutInjectionKey } from '@/injection'
 import router from '@/router'
 
-const { setDirection } = useInjection(layoutSlideDirectionInjectionKey)
+const { setLayoutSlideDirection } = useInjection(layoutInjectionKey)
 </script>
 <template>
   <div
     class="flex items-center justify-between px-4 py-2"
-    @click="setDirection(null)"
+    @click="setLayoutSlideDirection(null)"
   >
     <div
       class="size-9"
-      @click.stop="setDirection('right')"
+      @click.stop="setLayoutSlideDirection('right')"
     >
       <Logo />
     </div>
@@ -28,7 +28,7 @@ const { setDirection } = useInjection(layoutSlideDirectionInjectionKey)
     <div class="flex items-center gap-x-2">
       <ButtonAnimation
         size="large"
-        @click="setDirection('left')"
+        @click="setLayoutSlideDirection('left')"
       >
         <span class="iconify ph--list" />
       </ButtonAnimation>

src/layouts/index.vue

@@ -7,7 +7,7 @@ import { computed, provide, watch, ref } from 'vue'
 import texturePng from '@/assets/texture.png'
 import { EmptyPlaceholder } from '@/components'
 import { useComponentThemeOverrides } from '@/composable/useComponentThemeOverrides'
-import { mediaQueryInjectionKey, layoutSlideDirectionInjectionKey } from '@/injection'
+import { mediaQueryInjectionKey, layoutInjectionKey } from '@/injection'
 import { usePreferencesStore } from '@/stores'
 import { useTabsStore } from '@/stores'
 
@@ -22,7 +22,7 @@ import MainLayout from './main/index.vue'
 import type { LayoutSlideDirection } from '@/injection'
 
 defineOptions({
-  name: 'Layout',
+  name: 'Layouts',
 })
 
 const tabsStore = useTabsStore()
@@ -39,6 +39,8 @@ const mediaQuery = {
 
 const layoutSlideDirection = ref<LayoutSlideDirection>(null)
 
+const shouldRefreshRoute = ref(false)
+
 const layoutTranslateOffset = computed(() => {
   return layoutSlideDirection.value === 'right'
     ? preferencesStore.preferences.menu.maxWidth || 0
@@ -52,24 +54,25 @@ function setLayoutSlideDirection(direction: LayoutSlideDirection) {
 }
 
 watch(
-  () => mediaQuery.sm,
-  (isMaxSm) => {
-    if (isMaxSm) {
+  () => mediaQuery.sm.value,
+  (isSm) => {
+    if (isSm) {
       preferencesStore.modify({
         menu: {
           collapsed: false,
         },
       })
-      preferencesStore.setLayoutSlideDirection(null)
+      setLayoutSlideDirection(null)
     }
   },
 )
 
 provide(mediaQueryInjectionKey, mediaQuery)
 
-provide(layoutSlideDirectionInjectionKey, {
-  direction: layoutSlideDirection,
-  setDirection: setLayoutSlideDirection,
+provide(layoutInjectionKey, {
+  shouldRefreshRoute,
+  layoutSlideDirection,
+  setLayoutSlideDirection,
 })
 </script>
 <template>

src/layouts/main/index.vue

@@ -4,7 +4,7 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import { RouterView } from 'vue-router'
 
 import { useInjection } from '@/composable/useInjection'
-import { mediaQueryInjectionKey } from '@/injection'
+import { mediaQueryInjectionKey, layoutInjectionKey } from '@/injection'
 import router from '@/router'
 import { usePreferencesStore } from '@/stores'
 import { useTabsStore } from '@/stores'
@@ -17,6 +17,7 @@ defineOptions({
 })
 
 const { sm } = useInjection(mediaQueryInjectionKey)
+const { shouldRefreshRoute } = useInjection(layoutInjectionKey)
 
 const layoutsRouteRedirect = router.getRoutes().find((item) => item.name === 'layouts')?.redirect
 
@@ -103,14 +104,12 @@ watch(
 )
 
 watch(
-  () => preferencesStore.preferences.shouldRefreshTab,
+  () => shouldRefreshRoute.value,
   (shouldRefresh) => {
     if (shouldRefresh) {
       navigationTransitionName.value = 'shake'
       nextTick(() => {
-        preferencesStore.modify({
-          shouldRefreshTab: false,
-        })
+        shouldRefreshRoute.value = false
       })
     }
   },
@@ -150,13 +149,13 @@ onMounted(() => {
     v-slot="{ Component, route }"
   >
     <Transition
-      type="transition"
+      :type="navigationTransitionName === 'shake' ? 'animation' : 'transition'"
       :name="navigationTransitionName"
     >
       <KeepAlive :include="keepAliveTabs">
         <component
           :is="Component"
-          v-if="isMounted && !preferencesStore.preferences.shouldRefreshTab"
+          v-if="isMounted && !shouldRefreshRoute"
           :key="route.path + JSON.stringify(route.query)"
         />
       </KeepAlive>

src/stores/preferences.ts

@@ -11,7 +11,6 @@ export interface PreferencesOptions {
     width: number
     maxWidth: number
   }>
-  shouldRefreshTab: boolean
   showFooter: boolean
   showLogo: boolean
   showTabs: boolean
@@ -33,7 +32,6 @@ export const DEFAULT_PREFERENCES_OPTIONS: PreferencesOptions = {
     width: 64,
     maxWidth: 272,
   },
-  shouldRefreshTab: false,
   showFooter: true,
   showTabs: true,
   showTabClose: true,