perf: improve overall theme color matching

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { RouteLocationNormalizedLoaded } from 'vue-router';
 
+import { useContentHeight } from '@vben-core/hooks';
 import { preferences, usePreferences } from '@vben-core/preferences';
 import { Spinner } from '@vben-core/shadcn-ui';
 import { storeToRefs, useCoreTabbarStore } from '@vben-core/stores';
@@ -13,6 +14,7 @@ defineOptions({ name: 'LayoutContent' });
 const tabbarStore = useCoreTabbarStore();
 const { keepAlive } = usePreferences();
 const { spinning } = useContentSpinner();
+const { contentStyles } = useContentHeight();
 
 const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
   storeToRefs(tabbarStore);
@@ -47,7 +49,7 @@ function getTransitionName(route: RouteLocationNormalizedLoaded) {
     <Spinner
       v-if="preferences.transition.loading"
       :spinning="spinning"
-      class="h-[var(--vben-content-client-height)]"
+      :style="contentStyles"
     />
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">

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

@@ -7,9 +7,10 @@ function useContentSpinner() {
   const spinning = ref(false);
   const startTime = ref(0);
   const router = useRouter();
-  const minShowTime = 500;
+  const minShowTime = 500; // 最小显示时间
   const enableLoading = computed(() => preferences.transition.loading);
 
+  // 结束加载动画
   const onEnd = () => {
     if (!enableLoading.value) {
       return;
@@ -24,6 +25,7 @@ function useContentSpinner() {
     }
   };
 
+  // 路由前置守卫
   router.beforeEach((to) => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
@@ -33,14 +35,12 @@ function useContentSpinner() {
     return true;
   });
 
+  // 路由后置守卫
   router.afterEach((to) => {
     if (to.meta.loaded || !enableLoading.value || to.meta.iframeSrc) {
       return true;
     }
-
-    // 关闭加载动画
     onEnd();
-
     return true;
   });