优化页面刷新，刷新时禁用页面切换动画

src/layouts/components/Topbar/Toolbar/Breadcrumb/index.vue

@@ -8,23 +8,29 @@ const route = useRoute()
 
 const settingsStore = useSettingsStore()
 
-const breadcrumbList = computed(() => {
-  const breadcrumbList = []
+const breadcrumbList = ref<{ path: string, title: string }[]>([])
+watch(() => route.matched, () => {
+  if (route.name === 'reload') {
+    return
+  }
+  const list = []
   if (settingsStore.settings.home.enable) {
-    breadcrumbList.push({
+    list.push({
       path: settingsStore.settings.home.fullPath,
       title: settingsStore.settings.home.title,
     })
   }
   route.matched.forEach((item) => {
     if (item.meta?.breadcrumb !== false) {
-      breadcrumbList.push({
+      list.push({
         path: item.path,
         title: item.meta?.title,
       })
     }
   })
-  return breadcrumbList
+  breadcrumbList.value = list
+}, {
+  immediate: true,
 })
 
 function pathCompile(path: string) {

src/layouts/index.vue

@@ -132,7 +132,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
           <Topbar />
           <div class="main">
             <RouterView v-slot="{ Component, route }">
-              <Transition name="slide-right" mode="out-in">
+              <Transition :name="!settingsStore.isReloading ? 'slide-right' : ''" mode="out-in">
                 <KeepAlive :include="keepAliveStore.list">
                   <component :is="Component" v-show="!isLink" :key="route.fullPath" />
                 </KeepAlive>

src/store/modules/settings.ts

@@ -87,6 +87,13 @@ const useSettingsStore = defineStore(
         break
     }
 
+    // 页面是否刷新
+    const isReloading = ref(false)
+    // 切换当前页面是否刷新
+    function setIsReloading(value?: boolean) {
+      isReloading.value = value ?? !isReloading.value
+    }
+
     // 页面标题
     const title = ref<RouteMeta['title']>()
     // 记录页面标题
@@ -152,6 +159,8 @@ const useSettingsStore = defineStore(
       settings,
       currentColorScheme,
       os,
+      isReloading,
+      setIsReloading,
       title,
       setTitle,
       mode,

src/types/global.d.ts

@@ -11,11 +11,11 @@ declare namespace Settings {
   interface app {
     /**
      * 颜色方案
-     * @默认值 `''` 跟随系统
-     * @可选值 `'light'` 明亮模式
+     * @默认值 `'light'` 明亮模式
      * @可选值 `'dark'` 暗黑模式
+     * @可选值 `''` 跟随系统
      */
-    colorScheme?: '' | 'light' | 'dark'
+    colorScheme?: 'light' | 'dark' | ''
     /**
      * 圆角系数
      * @默认值 `0.5`

src/utils/composables/useMainPage.ts

@@ -1,9 +1,18 @@
+import useSettingsStore from '@/store/modules/settings'
+
 export default function useMainPage() {
   const router = useRouter()
 
+  const settingsStore = useSettingsStore()
+
   function reload() {
+    settingsStore.setIsReloading(true)
     router.push({
       name: 'reload',
+    }).then(() => {
+      setTimeout(() => {
+        settingsStore.setIsReloading(false)
+      }, 100)
     })
   }