feat: And surface switching loading optimization

packages/business/layouts/src/basic/content/content.vue

@@ -2,15 +2,18 @@
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
 import { preferences, usePreferences } from '@vben-core/preferences';
+import { Spinner } from '@vben-core/shadcn-ui';
 import { storeToRefs, useTabsStore } from '@vben-core/stores';
 
 import { IFrameRouterView } from '../../iframe';
+import { useContentSpinner } from './use-content-spinner';
 
 defineOptions({ name: 'LayoutContent' });
 
 const { keepAlive } = usePreferences();
-
 const tabsStore = useTabsStore();
+const { onTransitionEnd, spinning } = useContentSpinner();
+
 const { getCacheTabs, getExcludeTabs, renderRouteView } =
   storeToRefs(tabsStore);
 
@@ -29,32 +32,45 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
   }
 
   // 如果页面已经加载过，则不使用动画
-  if (route.meta.loaded) {
-    return;
-  }
+  // if (route.meta.loaded) {
+  //   return;
+  // }
   // 已经打开且已经加载过的页面不使用动画
   const inTabs = getCacheTabs.value.includes(route.name as string);
+
   return inTabs && route.meta.loaded ? undefined : transitionName;
 }
 </script>
 
 <template>
-  <IFrameRouterView />
-  <RouterView v-slot="{ Component, route }">
-    <Transition :name="getTransitionName(route)" appear mode="out-in">
-      <KeepAlive
-        v-if="keepAlive"
-        :exclude="getExcludeTabs"
-        :include="getCacheTabs"
+  <div class="relative h-full">
+    <Spinner
+      v-if="preferences.transition.loading"
+      :spinning="spinning"
+      class="h-[var(--vben-content-client-height)]"
+    />
+    <IFrameRouterView />
+    <RouterView v-slot="{ Component, route }">
+      <Transition
+        :name="getTransitionName(route)"
+        appear
+        mode="out-in"
+        @transitionend="onTransitionEnd"
       >
-        <component
-          :is="Component"
-          v-if="renderRouteView"
-          v-show="!route.meta.iframeSrc"
-          :key="route.fullPath"
-        />
-      </KeepAlive>
-      <component :is="Component" v-else :key="route.fullPath" />
-    </Transition>
-  </RouterView>
+        <KeepAlive
+          v-if="keepAlive"
+          :exclude="getExcludeTabs"
+          :include="getCacheTabs"
+        >
+          <component
+            :is="Component"
+            v-if="renderRouteView"
+            v-show="!route.meta.iframeSrc"
+            :key="route.fullPath"
+          />
+        </KeepAlive>
+        <component :is="Component" v-else :key="route.fullPath" />
+      </Transition>
+    </RouterView>
+  </div>
 </template>

packages/business/layouts/src/basic/content/use-content-spinner.ts

@@ -0,0 +1,56 @@
+import { computed, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { preferences } from '@vben-core/preferences';
+
+function useContentSpinner() {
+  const spinning = ref(false);
+  const isStartTransition = ref(false);
+  const startTime = ref(0);
+  const router = useRouter();
+  const minShowTime = 500;
+  const enableLoading = computed(() => preferences.transition.loading);
+
+  const onEnd = () => {
+    if (!enableLoading.value) {
+      return;
+    }
+    const processTime = performance.now() - startTime.value;
+    if (processTime < minShowTime) {
+      setTimeout(() => {
+        spinning.value = false;
+      }, minShowTime - processTime);
+    } else {
+      spinning.value = false;
+    }
+  };
+
+  router.beforeEach((to) => {
+    if (to.meta.loaded || !enableLoading.value) {
+      return true;
+    }
+    isStartTransition.value = false;
+    startTime.value = performance.now();
+    spinning.value = true;
+    return true;
+  });
+
+  router.afterEach((to) => {
+    if (to.meta.loaded || !enableLoading.value) {
+      return true;
+    }
+
+    // 未进入过渡动画
+    if (!isStartTransition.value) {
+      // 关闭加载动画
+      onEnd();
+    }
+
+    isStartTransition.value = false;
+    return true;
+  });
+
+  return { onTransitionEnd: onEnd, spinning };
+}
+
+export { useContentSpinner };

packages/business/universal-ui/src/preferences/blocks/general/animation.vue

@@ -6,13 +6,14 @@ import SwitchItem from '../switch-item.vue';
 defineOptions({
   name: 'PreferenceAnimation',
 });
+
 const transitionProgress = defineModel<boolean>('transitionProgress', {
   // 默认值
   default: false,
 });
-
 const transitionName = defineModel<string>('transitionName');
 const transitionEnable = defineModel<boolean>('transitionEnable');
+const transitionLoading = defineModel<boolean>('transitionLoading');
 
 const transitionPreset = ['fade', 'fade-slide', 'fade-up', 'fade-down'];
 
@@ -23,10 +24,13 @@ function handleClick(value: string) {
 
 <template>
   <SwitchItem v-model="transitionProgress">
-    {{ $t('preferences.page-progress') }}
+    {{ $t('preferences.animation.progress') }}
+  </SwitchItem>
+  <SwitchItem v-model="transitionLoading">
+    {{ $t('preferences.animation.loading') }}
   </SwitchItem>
   <SwitchItem v-model="transitionEnable">
-    {{ $t('preferences.page-transition') }}
+    {{ $t('preferences.animation.transition') }}
   </SwitchItem>
   <div
     v-if="transitionEnable"

packages/business/universal-ui/src/preferences/preferences-widget.vue

@@ -42,6 +42,7 @@ import Preferences from './preferences.vue';
     :theme-mode="preferences.theme.mode"
     :theme-radius="preferences.theme.radius"
     :transition-enable="preferences.transition.enable"
+    :transition-loading="preferences.transition.loading"
     :transition-name="preferences.transition.name"
     :transition-progress="preferences.transition.progress"
     @update:app-ai-assistant="
@@ -143,6 +144,9 @@ import Preferences from './preferences.vue';
     @update:transition-enable="
       (val) => updatePreferences({ transition: { enable: val } })
     "
+    @update:transition-loading="
+      (val) => updatePreferences({ transition: { loading: val } })
+    "
     @update:transition-name="
       (val) => updatePreferences({ transition: { name: val } })
     "

packages/business/universal-ui/src/preferences/preferences.vue

@@ -64,6 +64,7 @@ const appContentCompact = defineModel<ContentCompactType>('appContentCompact');
 
 const transitionProgress = defineModel<boolean>('transitionProgress');
 const transitionName = defineModel<string>('transitionName');
+const transitionLoading = defineModel<boolean>('transitionLoading');
 const transitionEnable = defineModel<boolean>('transitionEnable');
 
 const themeColorPrimary = defineModel<string>('themeColorPrimary');
@@ -209,9 +210,10 @@ function handleReset() {
               />
             </Block>
 
-            <Block :title="$t('preferences.animation')">
+            <Block :title="$t('preferences.animation.name')">
               <Animation
                 v-model:transition-enable="transitionEnable"
+                v-model:transition-loading="transitionLoading"
                 v-model:transition-name="transitionName"
                 v-model:transition-progress="transitionProgress"
               />