fix: page spinner is styled incorrectly when scrolling (#4163)

* feat: add contributor information to documents

* fix: page spinner is styled incorrectly when scrolling

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

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue';
+
+import { VbenSpinner } from '@vben-core/shadcn-ui';
+
+import { useContentSpinner } from './use-content-spinner';
+
+defineOptions({ name: 'LayoutContentSpinner' });
+
+defineProps<{ overlayStyle: CSSProperties }>();
+
+const { spinning } = useContentSpinner();
+</script>
+<template>
+  <VbenSpinner :spinning="spinning" :style="overlayStyle" />
+</template>

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

@@ -7,20 +7,15 @@ import type {
 import { type VNode } from 'vue';
 import { RouterView } from 'vue-router';
 
-import { useContentHeight } from '@vben/hooks';
 import { preferences, usePreferences } from '@vben/preferences';
 import { storeToRefs, useTabbarStore } from '@vben/stores';
-import { VbenSpinner } from '@vben-core/shadcn-ui';
 
 import { IFrameRouterView } from '../../iframe';
-import { useContentSpinner } from './use-content-spinner';
 
 defineOptions({ name: 'LayoutContent' });
 
 const tabbarStore = useTabbarStore();
 const { keepAlive } = usePreferences();
-const { spinning } = useContentSpinner();
-const { contentStyles } = useContentHeight();
 
 const { getCachedTabs, getExcludeCachedTabs, renderRouteView } =
   storeToRefs(tabbarStore);
@@ -86,11 +81,6 @@ function transformComponent(
 
 <template>
   <div class="relative h-full">
-    <VbenSpinner
-      v-if="preferences.transition.loading"
-      :spinning="spinning"
-      :style="contentStyles"
-    />
     <IFrameRouterView />
     <RouterView v-slot="{ Component, route }">
       <Transition :name="getTransitionName(route)" appear mode="out-in">

packages/effects/layouts/src/basic/content/index.ts

@@ -1 +1,2 @@
 export { default as LayoutContent } from './content.vue';
+export { default as LayoutContentSpinner } from './content-spinner.vue';

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

@@ -16,7 +16,7 @@ import { VbenAdminLayout } from '@vben-core/layout-ui';
 import { Toaster, VbenBackTop, VbenLogo } from '@vben-core/shadcn-ui';
 
 import { Breadcrumb, CheckUpdates, Preferences } from '../widgets';
-import { LayoutContent } from './content';
+import { LayoutContent, LayoutContentSpinner } from './content';
 import { Copyright } from './copyright';
 import { LayoutFooter } from './footer';
 import { LayoutHeader } from './header';
@@ -297,6 +297,12 @@ const headerSlots = computed(() => {
     <template #content>
       <LayoutContent />
     </template>
+    <template
+      v-if="preferences.transition.loading"
+      #content-overlay="{ overlayStyle }"
+    >
+      <LayoutContentSpinner :overlay-style="overlayStyle" />
+    </template>
 
     <!-- 页脚 -->
     <template v-if="preferences.footer.enable" #footer>