@creekjs/web-components 1.0.2 → 1.0.4

package/src/creek-hooks/useApp/index.tsx

@@ -0,0 +1,119 @@
+import { useMemoizedFn } from 'ahooks';
+import { App } from 'antd';
+import React, { createContext, useContext, useMemo, useState } from 'react';
+
+import { DrawerHelper } from './DrawerHelper';
+import { ModalHelper } from './ModalHelper';
+import {
+  AppContextType,
+  DrawerConfig,
+  FormDrawerConfig,
+  FormModalConfig,
+  ModalConfig,
+  NormalDrawerConfig,
+  NormalModalConfig,
+} from './types';
+
+// --- Helper Hook for State Management ---
+const usePopupState = <T extends object>() => {
+  const [state, setState] = useState<{ open: boolean; config: T }>({
+    open: false,
+    config: {} as T,
+  });
+
+  const show = useMemoizedFn((config: T) => {
+    setState({ open: true, config });
+  });
+
+  const close = useMemoizedFn(() => {
+    setState((prev) => ({ ...prev, open: false }));
+  });
+
+  return { ...state, show, close };
+};
+
+const AppContext = createContext<AppContextType | null>(null);
+
+export const AppProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const drawer = usePopupState<DrawerConfig>();
+  const modal = usePopupState<ModalConfig>();
+
+  const handleCloseModal = useMemoizedFn(() => {
+    modal.close();
+  });
+
+  const handleCloseDrawer = useMemoizedFn(() => {
+    drawer.close();
+  });
+
+  const contextValue = useMemo(
+    () => ({
+      openDrawer: drawer.show,
+      closeDrawer: handleCloseDrawer,
+      openModal: modal.show,
+      closeModal: handleCloseModal,
+    }),
+    [drawer.show, handleCloseDrawer, modal.show, handleCloseModal],
+  );
+
+  return (
+    <AppContext.Provider value={contextValue}>
+      {children}
+      <DrawerHelper open={drawer.open} config={drawer.config} onClose={handleCloseDrawer} />
+      <ModalHelper open={modal.open} config={modal.config} onClose={handleCloseModal} />
+    </AppContext.Provider>
+  );
+};
+
+export const useApp = () => {
+  const antdApp = App.useApp();
+  const appContext = useContext(AppContext);
+
+  return useMemo(() => {
+    const { openDrawer, closeDrawer, openModal, closeModal } = appContext || {};
+    const warn = () => console.warn('AppProvider is missing');
+
+    const createOpener = <T extends NormalModalConfig | NormalDrawerConfig>(
+      opener: ((config: T) => void) | undefined,
+      type: 'normal',
+    ) => {
+      return (config: T) => {
+        if (opener) {
+          opener({ ...config, type } as T);
+        } else {
+          warn();
+        }
+      };
+    };
+
+    const createFormOpener = <T extends FormModalConfig | FormDrawerConfig>(
+      opener: ((config: T) => void) | undefined,
+      type: 'form',
+    ) => {
+      return (config: Omit<T, 'type'>) => {
+        if (opener) {
+          opener({ ...config, type } as T);
+        } else {
+          warn();
+        }
+      };
+    };
+
+    return {
+      ...antdApp,
+      drawer: {
+        open: createOpener<NormalDrawerConfig>(openDrawer, 'normal'),
+        openForm: createFormOpener<FormDrawerConfig>(openDrawer, 'form'),
+        close: closeDrawer || warn,
+      },
+      modal: {
+        ...antdApp.modal,
+        open: createOpener<NormalModalConfig>(openModal, 'normal'),
+        openForm: createFormOpener<FormModalConfig>(openModal, 'form'),
+        close: closeModal || warn,
+      },
+    };
+  }, [antdApp, appContext]);
+};
+
+export * from './types';

package/src/creek-hooks/useApp/types.ts

@@ -0,0 +1,25 @@
+import { DrawerFormProps, ModalFormProps } from '@ant-design/pro-components';
+import { DrawerProps, ModalProps } from 'antd';
+import React from 'react';
+
+// --- Common ---
+export type BaseConfig = {
+  content?: React.ReactNode;
+};
+
+// --- Modal Types ---
+export type NormalModalConfig = BaseConfig & ModalProps & { type?: 'normal' };
+export type FormModalConfig<T = any> = BaseConfig & Omit<ModalFormProps<T>, 'content'> & { type: 'form' };
+export type ModalConfig = NormalModalConfig | FormModalConfig;
+
+// --- Drawer Types ---
+export type NormalDrawerConfig = BaseConfig & DrawerProps & { type?: 'normal' };
+export type FormDrawerConfig<T = any> = BaseConfig & Omit<DrawerFormProps<T>, 'content'> & { type: 'form' };
+export type DrawerConfig = NormalDrawerConfig | FormDrawerConfig;
+
+export interface AppContextType {
+  openDrawer: (config: DrawerConfig) => void;
+  closeDrawer: () => void;
+  openModal: (config: ModalConfig) => void;
+  closeModal: () => void;
+}

package/src/creek-hooks/useViewportHeight.tsx

@@ -1,4 +1,4 @@
-import { useDebounceEffect, useDeepCompareEffect, useEventListener, useMemoizedFn, useMount, useUnmount } from 'ahooks';
+import { useDebounceEffect, useDebounceFn, useDeepCompareEffect, useEventListener, useMemoizedFn, useMount, useUnmount } from 'ahooks';
 import { useRef, useState } from 'react';
 
 interface UseViewportHeightOptions {
@@ -23,12 +23,13 @@ interface UseViewportHeightOptions {
 }
 
 export const useViewportHeight = (options: UseViewportHeightOptions = {}) => {
-  const { bottomOffset = 0, topOffset, margin = 0, minHeight = 0, maxHeight, debug = false, debounceDelay = 200, deps = [], isObserverParent } = options;
+  const { bottomOffset = 0, topOffset, margin = 0, minHeight = 0, maxHeight, debug = false, debounceDelay = 500, deps = [], isObserverParent } = options;
 
   const [viewPortHeight, setHeight] = useState<number | undefined>(undefined);
   let containerRef = useRef<HTMLDivElement| null>(null);
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const mutationObserverRef = useRef<MutationObserver | null>(null);
+  const lastHeightRef = useRef<number>(window.innerHeight);
 
   // 使用 useMemoizedFn 缓存计算函数，避免不必要的重新创建
   const calculateHeight = useMemoizedFn(() => {
@@ -69,8 +70,38 @@ export const useViewportHeight = (options: UseViewportHeightOptions = {}) => {
     setHeight(availableHeight);
   });
 
+  const { run: debouncedCalculateHeight } = useDebounceFn(
+    () => {
+      calculateHeight();
+    },
+    { wait: debounceDelay },
+  );
+
   // 使用 ahooks 的 useEventListener 监听窗口 resize 事件
-  useEventListener('resize', calculateHeight, { target: () => window });
+  useEventListener(
+    'resize',
+    () => {
+      const currentHeight = window.innerHeight;
+      // 只有高度发生变化时才重新计算
+      if (Math.abs(currentHeight - lastHeightRef.current) > 1) {
+        lastHeightRef.current = currentHeight;
+        // 防抖调用 calculateHeight
+        if (debounceDelay > 0) {
+          // 清除之前的定时器（如果有）
+          // 注意：这里需要一个 ref 来存储 timer，但为了简化，我们依赖 useDebounceEffect 的重新触发
+          // 或者更直接地，我们可以在这里直接调用 debouncedCalculateHeight
+          // 但由于 calculateHeight 本身是同步的，我们可以利用 ahooks 的 run 方法如果它是 useDebounceFn 返回的
+          
+          // 简单起见，我们在这里直接触发一个状态更新或者调用防抖函数
+          // 由于 calculateHeight 被用在多个地方，我们给它包一层 debounce
+          debouncedCalculateHeight();
+        } else {
+          calculateHeight();
+        }
+      }
+    },
+    { target: () => window },
+  );
 
   // 使用 useDebounceEffect 处理依赖项变化时的防抖计算
   useDebounceEffect(
@@ -141,8 +172,6 @@ export const useViewportHeight = (options: UseViewportHeightOptions = {}) => {
     }
   }, [containerRef.current])
 
-  console.log(viewPortHeight, 'viewPortHeight');
-
   return {
     /** 容器引用，需要绑定到目标元素的容器 */
     containerRef,

package/src/creek-layout/index.tsx

@@ -78,8 +78,8 @@ export const CreekLayout = (props: LayoutProps) => {
           colorTextMenu: "#333",
         },
         pageContainer: {
-          paddingBlockPageContainerContent: 20,
-          paddingInlinePageContainerContent: 20,
+          paddingBlockPageContainerContent: token.padding,
+          paddingInlinePageContainerContent: token.padding,
           colorBgPageContainer: 'linear-gradient(180deg, #F7F9FF 0%, #FFF 45.59%);'
         },
       }}

package/src/creek-table/SearchTable.tsx

@@ -1,89 +1,92 @@
 import { ParamsType, ProTable } from '@ant-design/pro-components';
+import { theme } from 'antd';
 import { createStyles } from 'antd-style';
 import classnames from 'classnames';
 import _ from 'lodash';
-import { useMemo, useRef } from 'react';
+import { useRef } from 'react';
 
-import { CreekFilterDisplay, CreekSearchInput, useSearchContext } from '../creek-search';
-
-import { useAdaptiveToolBar, useAutoAddFilterToColumns } from './hooks';
+import { useAutoWidthColumns, useTableScrollHeight } from './hooks';
 import { TableOptionRender } from './TableOptionRender';
-import { TableViewContent } from './TableViewContent';
 import { toolBarRender } from './toolBarRender';
 import { CreekTableProps } from './type';
 
-const useStyles = createStyles(({ prefixCls }) => {
+const useStyles = createStyles(({ css, token }, { scrollY, prefixCls }: { scrollY?: number | string; prefixCls: string }) => {
   return {
-    'creek-table-container': {
-      [`.${prefixCls}-pagination`]: {
-        [`.${prefixCls}-pagination-total-text`]: {
-          flex: `1`,
-        },
-      },
-    },
+    'creek-table-container': css`
+      .${prefixCls}-table-body {
+        overflow-y: auto !important;
+        min-height: ${typeof scrollY === 'number' ? `${scrollY}px` : (scrollY ?? 'auto')};
+
+        /* Firefox 滚动条样式 */
+        scrollbar-width: thin;
+        scrollbar-color: ${token.colorFillSecondary} transparent;
+      }
+
+      /* Webkit (Chrome, Safari, Edge) 滚动条样式 */
+      & *::-webkit-scrollbar {
+        width: 6px !important;
+        height: 6px !important;
+        background-color: transparent !important;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background-color: ${token.colorFillSecondary} !important;
+        border-radius: 3px !important;
+        transition: all 0.3s;
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background-color: ${token.colorFill} !important;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background-color: transparent !important;
+      }
+
+      .${prefixCls}-pagination {
+        .${prefixCls}-pagination-total-text {
+          flex: 1;
+        }
+      }
+    `,
   };
 });
 
 // 独立的 ProTable 组件
 export const SearchProTable = <T extends ParamsType, U extends ParamsType, ValueType = 'text'>(props: CreekTableProps<T, U, ValueType>) => {
-  const {
-    columns,
-    params,
-    prefixCls = 'ant',
-    autoAddFilterForColumn = true,
-    className,
-    optionsRender,
-    tableViewRender,
-    pagination,
-    pageFixedBottom = true,
-    pageFixedBottomConfig,
-    ...restProps
-  } = props;
-
-  const searchContext = useSearchContext();
-  const { filters, filtersToParams } = searchContext;
-
-  const proTableRef = useRef(null);
-
-  // 使用自定义 hook 处理列的筛选功能（包含状态管理）
-  const { columnsWithFilter } = useAutoAddFilterToColumns({
-    columns,
-    autoAddFilterForColumn,
-  });
-
-  // 使用自定义 hook 处理工具栏的自适应功能
-  const { shouldCollapse } = useAdaptiveToolBar({
-    containerRef: proTableRef,
-    prefixCls,
-  });
-
-  const { styles } = useStyles();
-
-  // 获取搜素的参数
-  const finalParams = useMemo(() => {
-    let result = filtersToParams(filters) as U;
-    return result;
-  }, [filters]);
+  const { columns, prefixCls = 'ant', autoAddFilterForColumn = true, className, optionsRender, tableViewRender, pagination, pageFixedBottom = true, pageFixedBottomConfig, ...restProps } = props;
+
+  const proTableRef = useRef<HTMLDivElement>(null);
+
+  const { token } = theme.useToken();
+
+  // // 使用自定义 hook 处理工具栏的自适应功能
+  // const { shouldCollapse } = useAdaptiveToolBar({
+  //   containerRef: proTableRef,
+  //   prefixCls,
+  // });ƒ
+
+  const { columns: adaptiveColumns, totalWidth } = useAutoWidthColumns(columns, proTableRef);
+
+  const scrollY = useTableScrollHeight(prefixCls, proTableRef, pageFixedBottom, token.paddingContentVerticalLG, pageFixedBottomConfig?.bottomFix || token.padding);
+
+  const { styles } = useStyles({ scrollY, prefixCls });
+
+  console.log('scrollY', scrollY);
 
   return (
     <div ref={proTableRef}>
       <ProTable<T, U, ValueType>
-        {...restProps}
+        {...props}
         className={classnames(styles['creek-table-container'], className)}
-        columns={columnsWithFilter}
+        columns={adaptiveColumns}
+        scroll={{
+          x: totalWidth,
+          y: scrollY ?? restProps.scroll?.y,
+        }}
         toolbar={{
           ...restProps.toolbar,
         }}
-        params={{
-          ...params,
-          ...finalParams,
-        }}
-        search={false}
-        pagination={{
-          showTotal: (total) => <span>共 {total} 条</span>,
-          showSizeChanger: true,
-          ...pagination,
-        }}
         optionsRender={(defaultProps, dom) => {
           return _.isFunction(optionsRender)
             ? optionsRender(defaultProps, dom)
@@ -91,23 +94,12 @@ export const SearchProTable = <T extends ParamsType, U extends ParamsType, Value
               ? [<TableOptionRender key="option" defaultDom={dom} importConfig={restProps?.options?.importConfig} exportConfig={restProps?.options?.exportConfig} />]
               : [];
         }}
-        toolBarRender={() => {
-          return toolBarRender({ shouldCollapse, restProps  });
+        toolBarRender={(...args) => {
+          return toolBarRender({ shouldCollapse: false, restProps, args });
         }}
-        // 在 headerTitle 中只放搜索输入框
-        headerTitle={<CreekSearchInput />}
         // 在表格内容区上方显示筛选条件
         tableViewRender={(defaultProps, defaultDom) => {
-          return _.isFunction(tableViewRender) ? (
-            <>
-              <CreekFilterDisplay />
-              {tableViewRender(defaultProps, defaultDom)}
-            </>
-          ) : (
-            <TableViewContent<T, U, ValueType> pageFixedBottom={pageFixedBottom} pageFixedBottomConfig={pageFixedBottomConfig} prefixCls={prefixCls}>
-              {defaultDom}
-            </TableViewContent>
-          );
+          return _.isFunction(tableViewRender) ? <>{tableViewRender(defaultProps, defaultDom)}</> : defaultDom;
         }}
       />
     </div>

package/src/creek-table/hooks/index.ts

@@ -1,4 +1,6 @@
 export * from './useAdaptiveToolBar';
-export * from './useAutoAddFilterToColumns';
+export * from './useAutoWidthColumns';
 export * from './useElementDistance';
+export * from './useTableScrollHeight';
+
 

package/src/creek-table/hooks/useAutoWidthColumns.tsx

@@ -0,0 +1,212 @@
+import { ProColumns } from '@ant-design/pro-components';
+import { useMemoizedFn } from 'ahooks';
+import { Space } from 'antd';
+import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
+
+const DEFAULT_PADDING_WIDTH = 16;
+
+/**
+ * 估算字符串宽度（简单估算：汉字 14px，非汉字 8px，左右 padding 16px）
+ */
+const estimateWidth = (text: string) => {
+  let width = 0;
+  for (const char of text) {
+    if (/[\u4e00-\u9fa5]/.test(char)) {
+      width += 14;
+    } else {
+      width += 8;
+    }
+  }
+  return width + DEFAULT_PADDING_WIDTH; // padding
+};
+
+/**
+ * 根据 valueType 获取默认宽度
+ */
+const getValueTypeWidth = (valueType: string | undefined): number => {
+  switch (valueType) {
+    case 'date':
+    case 'dateRange':
+      return 120;
+    case 'dateTime':
+    case 'dateTimeRange':
+      return 180;
+    case 'time':
+    case 'timeRange':
+      return 100;
+    case 'index':
+    case 'indexBorder':
+      return 60;
+    case 'money':
+      return 100;
+    case 'digit':
+      return 100;
+    case 'select':
+      return 120;
+    default:
+      return 80; // 默认给 80
+  }
+};
+
+/**
+ * 一个用于测量的包裹组件
+ */
+const MeasureWrapper = ({ children, onResize }: { children: React.ReactNode; onResize: (width: number) => void }) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    // 初次测量
+    onResize(ref.current.offsetWidth);
+
+    // 监听变化
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        onResize((entry.target as HTMLElement).offsetWidth);
+      }
+    });
+
+    observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []); // 依赖为空，只在挂载时设置监听
+
+  return <Space ref={ref}>{children}</Space>;
+};
+
+export const useAutoWidthColumns = <T, ValueType>(
+  columns: ProColumns<T, ValueType>[] | undefined,
+  tableRef: RefObject<HTMLDivElement>,
+): { columns: ProColumns<T, ValueType>[] | undefined; totalWidth: number | undefined } => {
+  // 存储每个列的最大宽度：key 是 dataIndex 或 title，value 是最大宽度
+  const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
+  const [tableWidth, setTableWidth] = useState<number>(0);
+
+  // 监听 table 容器宽度变化
+  useEffect(() => {
+    if (!tableRef.current) return;
+
+    // 立即获取一次宽度
+    setTableWidth(tableRef.current.offsetWidth);
+
+    // 使用 requestAnimationFrame + setTimeout 防抖
+    let rafId: number;
+    let timerId: NodeJS.Timeout;
+
+    const updateWidth = (width: number) => {
+      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
+
+      rafId = requestAnimationFrame(() => {
+        timerId = setTimeout(() => {
+          setTableWidth(width);
+        }, 500);
+      });
+    };
+
+    const observer = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        updateWidth(entry.contentRect.width);
+      }
+    });
+
+    observer.observe(tableRef.current);
+
+    // 监听 window resize 作为后备
+    const handleWindowResize = () => {
+      if (tableRef.current) {
+        updateWidth(tableRef.current.offsetWidth);
+      }
+    };
+    window.addEventListener('resize', handleWindowResize);
+
+    return () => {
+      observer.disconnect();
+      window.removeEventListener('resize', handleWindowResize);
+      cancelAnimationFrame(rafId);
+      clearTimeout(timerId);
+    };
+  }, [tableRef]);
+
+  const handleResize = useMemoizedFn((key: string, width: number) => {
+    setColumnWidths((prev) => {
+      const currentMax = prev[key] || 0;
+      if (width > currentMax) {
+        return { ...prev, [key]: width };
+      }
+      return prev;
+    });
+  });
+
+  const { columns: finalColumns, totalWidth } = useMemo(() => {
+    if (!columns) return { columns: undefined, totalWidth: undefined };
+
+    // 1. 先计算所有列的理想宽度（不考虑 table 宽度）
+    const calculatedColumns = columns.map((col, index) => {
+      const colKey = (col.dataIndex as string) || (col.key as string) || `col-${index}`;
+      const measuredWidth = columnWidths[colKey];
+      let width: number;
+      if (col.width) {
+        width = typeof col.width === 'number' ? col.width : 100; // 暂时给个默认值如果手动设了 string width
+      } else if (col.valueType === 'option' && measuredWidth) {
+        width = measuredWidth + DEFAULT_PADDING_WIDTH;
+      } else {
+        width = Math.max(estimateWidth(col.title as string), getValueTypeWidth(col.valueType as string));
+      }
+
+      return {
+        ...col,
+        _calculatedWidth: width,
+        _colKey: colKey,
+      };
+    });
+
+    // 2. 计算所有列的总宽度
+    const totalCalculatedWidth = calculatedColumns.reduce((acc, col) => acc + col._calculatedWidth, 0);
+
+    // 3. 判断是否需要自适应
+    // 如果总宽度小于 table 宽度，说明空间足够，除了 option 列，其他列可以不设宽度让 table 自动撑开
+    const isOverflow = totalCalculatedWidth > tableWidth;
+
+    const processedColumns = calculatedColumns.map((col) => {
+      // 提取内部使用的字段
+      const { _calculatedWidth, _colKey, ...originalCol } = col;
+
+      // 针对 valueType === 'option' (操作列)，始终需要特殊处理（包裹测量组件）
+      if (col.valueType === 'option') {
+        const originalRender = col.render;
+        return {
+          ...originalCol,
+          // 始终设置 option 列宽度
+          width: _calculatedWidth,
+          fixed: col.fixed ?? 'right',
+          render: (dom: any, entity: any, index: any, action: any, schema: any) => {
+            const originalRenderResult = originalRender ? (originalRender(dom, entity, index, action, schema) as React.ReactNode) : dom;
+            return <MeasureWrapper onResize={(width) => handleResize(_colKey, width)}>{originalRenderResult}</MeasureWrapper>;
+          },
+        } as ProColumns<T, ValueType>;
+      }
+
+      // 非 option 列
+      return {
+        ...originalCol,
+        // 只有当内容溢出（需要滚动）或者手动设置了宽度时，才应用计算出的宽度
+        // 否则不设置 width，让 Antd Table 自动布局占满剩余空间
+        width: isOverflow || col.width ? _calculatedWidth : undefined,
+      };
+    });
+
+    return {
+      columns: processedColumns,
+      totalWidth: isOverflow ? totalCalculatedWidth : undefined,
+    };
+  }, [columns, columnWidths, tableWidth]);
+
+  return {
+    columns: finalColumns,
+    totalWidth,
+  };
+};

package/src/creek-table/hooks/useTableScrollHeight.tsx

@@ -0,0 +1,63 @@
+import { useDebounceFn, useEventListener } from 'ahooks';
+import { useEffect, useState } from 'react';
+
+export const useTableScrollHeight = (prefixCls: string, tableRef: React.RefObject<HTMLDivElement>, pageFixedBottom: boolean = true, contentPadding: number = 16, offsetBottom: number = 16) => {
+  const [scrollY, setScrollY] = useState<number | undefined>(undefined);
+
+  const { run: calcHeight } = useDebounceFn(
+    () => {
+      if (!pageFixedBottom || !tableRef.current) return;
+
+      const tableEl = tableRef.current;
+
+      const tableHeader = tableEl.querySelector(`.${prefixCls}-table-thead`);
+      const tableBody = tableEl.querySelector(`.${prefixCls}-table-body`);
+
+      let top = 0;
+      if (tableHeader) {
+        top = tableHeader.getBoundingClientRect().bottom;
+      } else if (tableBody) {
+        top = tableBody.getBoundingClientRect().top;
+      }
+
+      const windowHeight = window.innerHeight;
+  
+      let height = windowHeight - top -  contentPadding - offsetBottom;
+
+      const pagination = tableEl.querySelector(`.${prefixCls}-pagination`);
+
+      if (pagination) {
+        const paginationHeight = pagination.clientHeight;
+
+        const styles = window.getComputedStyle(pagination);
+        const totalPaginationMargin = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom);
+
+        height = height - paginationHeight - totalPaginationMargin;
+      } else {
+        // 如果没有找到分页，预留一个高度（假设分页高度为 24px + margin 16px = 40px）
+        // 这样可以避免初始加载时高度过大，导致出现滚动条，然后分页出现后高度又变小
+        height = height - 40;
+      }
+
+      // Minimum height to avoid crashes or ugly rendering
+      setScrollY(height);
+    },
+    { wait: 100 },
+  );
+
+  useEffect(() => {
+    // Initial calculation
+    calcHeight();
+
+    // Observer for DOM changes that might affect position
+    const observer = new MutationObserver(calcHeight);
+    if (tableRef.current) {
+      observer.observe(tableRef.current, { childList: true, subtree: true });
+    }
+    return () => observer.disconnect();
+  }, [tableRef, pageFixedBottom, prefixCls]);
+
+  useEventListener('resize', calcHeight);
+
+  return scrollY;
+};