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

* feat: add contributor information to documents

* fix: page spinner is styled incorrectly when scrolling

packages/@core/composables/src/index.ts

@@ -1,4 +1,4 @@
-export * from './use-content-height';
+export * from './use-content-style';
 export * from './use-namespace';
 export * from './use-sortable';
 export {

packages/@core/composables/src/use-content-height.ts

@@ -1,47 +0,0 @@
-import { computed, onMounted, ref, watch } from 'vue';
-
-import {
-  CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
-  getElementVisibleHeight,
-} from '@vben-core/shared';
-
-import { useCssVar, useDebounceFn, useWindowSize } from '@vueuse/core';
-/**
- * @zh_CN 获取内容高度(可视区域，不包含滚动条)
- */
-function useContentHeight() {
-  const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
-
-  const contentStyles = computed(() => {
-    return {
-      height: `var(${CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT})`,
-    };
-  });
-
-  return { contentHeight, contentStyles };
-}
-
-/**
- * @zh_CN 创建内容高度监听
- */
-function useContentHeightListener() {
-  const contentElement = ref<HTMLDivElement | null>(null);
-
-  const { height, width } = useWindowSize();
-  const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
-  const debouncedCalcHeight = useDebounceFn(() => {
-    contentHeight.value = `${getElementVisibleHeight(contentElement.value)}px`;
-  }, 200);
-
-  watch([height, width], () => {
-    debouncedCalcHeight();
-  });
-
-  onMounted(() => {
-    debouncedCalcHeight();
-  });
-
-  return { contentElement };
-}
-
-export { useContentHeight, useContentHeightListener };

packages/@core/composables/src/use-content-style.ts

@@ -0,0 +1,55 @@
+import type { CSSProperties } from 'vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import {
+  CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT,
+  CSS_VARIABLE_LAYOUT_CONTENT_WIDTH,
+  getElementVisibleRect,
+  type VisibleDomRect,
+} from '@vben-core/shared';
+
+import { useCssVar, useDebounceFn } from '@vueuse/core';
+
+/**
+ * @zh_CN content style
+ */
+function useContentStyle() {
+  const contentElement = ref<HTMLDivElement | null>(null);
+  const visibleDomRect = ref<null | VisibleDomRect>(null);
+  const contentHeight = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_HEIGHT);
+  const contentWidth = useCssVar(CSS_VARIABLE_LAYOUT_CONTENT_WIDTH);
+
+  const overlayStyle = computed((): CSSProperties => {
+    const { height, left, top, width } = visibleDomRect.value ?? {};
+    return {
+      height: `${height}px`,
+      left: `${left}px`,
+      position: 'fixed',
+      top: `${top}px`,
+      width: `${width}px`,
+      zIndex: 1000,
+    };
+  });
+
+  const debouncedCalcHeight = useDebounceFn(
+    (_entries: ResizeObserverEntry[]) => {
+      visibleDomRect.value = getElementVisibleRect(contentElement.value);
+      contentHeight.value = `${visibleDomRect.value.height}px`;
+      contentWidth.value = `${visibleDomRect.value.width}px`;
+    },
+    100,
+  );
+
+  onMounted(() => {
+    nextTick(() => {
+      if (contentElement.value) {
+        const observer = new ResizeObserver(debouncedCalcHeight);
+        observer.observe(contentElement.value);
+      }
+    });
+  });
+
+  return { contentElement, overlayStyle, visibleDomRect };
+}
+
+export { useContentStyle };