@hsu-react/ui 0.0.1

package/src/components/Table/_hooks/useHideHeaderScrollbar.ts

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { useMutationObserver } from "ahooks";
+
+interface Params {
+  scroll?: boolean | { y: boolean };
+  hideScrollbar?: boolean;
+  cls?: string;
+  ref?: React.RefObject<HTMLDivElement>;
+  bordered?: boolean;
+}
+
+const useHideHeaderScrollbar = (params: Params) => {
+  const { hideScrollbar, cls, ref, scroll, bordered } = params;
+  const [ready, setReady] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (hideScrollbar && ref && ref.current && scroll && ready) {
+      const timer = setInterval(() => {
+        const headerBar = document.querySelector(
+          `.${cls} .ant-table-cell-scrollbar`
+        ) as HTMLDivElement;
+
+        const fixedRight = document.querySelectorAll(
+          `.${cls} .ant-table-thead .ant-table-cell-fix-right`
+        ) as NodeListOf<HTMLDivElement>;
+
+        const cols = document.querySelectorAll(
+          `.${cls} .ant-table-header colgroup col`
+        ) as NodeListOf<HTMLDivElement>;
+
+        const summaryCols = document.querySelectorAll(
+          `.${cls} .ant-table-summary colgroup col`
+        ) as NodeListOf<HTMLDivElement>;
+
+        if (headerBar) {
+          clearInterval(timer);
+
+          fixedRight?.forEach((item) => {
+            const border = getComputedStyle(item, "::after");
+            const right = parseInt(border.borderRightWidth);
+
+            item.style.right =
+              parseInt(item.style.right) -
+              (headerBar?.clientWidth || 0) -
+              right +
+              "px";
+          });
+
+          const summaryColBar = [...summaryCols]?.slice?.(
+            -1
+          )?.[0] as HTMLDivElement;
+
+          if (
+            summaryColBar &&
+            parseInt(summaryColBar.style.width) ===
+              headerBar?.clientWidth + (bordered ? 1 : 0)
+          ) {
+            summaryColBar?.remove();
+          }
+
+          const colBar = [...cols]?.slice?.(-1)?.[0] as HTMLDivElement;
+
+          if (
+            colBar &&
+            parseInt(colBar.style.width) ===
+              headerBar?.clientWidth + (bordered ? 1 : 0)
+          ) {
+            colBar?.remove();
+          }
+
+          headerBar.remove();
+        }
+      }, 1);
+    }
+  }, [hideScrollbar, cls, ref, scroll, ready, bordered]);
+
+  useMutationObserver(
+    () => {
+      setReady(true);
+    },
+    ref,
+    {
+      childList: true,
+      subtree: true,
+    }
+  );
+};
+
+export default useHideHeaderScrollbar;

package/src/components/Table/_hooks/usePaginationSync.ts

@@ -0,0 +1,41 @@
+import { useEffect, useState } from "react";
+
+interface UsePaginationSyncParams {
+  current?: number;
+  pageSize?: number;
+}
+
+/**
+ * 分页状态同步 hook
+ * 用于同步外部传入的 current 和 pageSize 到内部状态
+ * 注意：只有明确传入 current/pageSize 时才会进行同步，undefined 时不受默认值影响
+ */
+const usePaginationSync = (params: UsePaginationSyncParams) => {
+  const { current, pageSize } = params;
+
+  const [_pageNum, setPageNum] = useState<number>(current ?? 1);
+  const [_pageSize, setPageSize] = useState<number>(pageSize ?? 10);
+
+  useEffect(() => {
+    // 只有明确传入 current 时才同步
+    if (current !== undefined && current !== _pageNum) {
+      setPageNum(current);
+    }
+  }, [_pageNum, current]);
+
+  useEffect(() => {
+    // 只有明确传入 pageSize 时才同步
+    if (pageSize !== undefined && pageSize !== _pageSize) {
+      setPageSize(pageSize);
+    }
+  }, [_pageSize, pageSize]);
+
+  return {
+    _pageNum,
+    _pageSize,
+    setPageNum,
+    setPageSize,
+  };
+};
+
+export default usePaginationSync;

package/src/components/Table/_hooks/useScrollEnd.ts

@@ -0,0 +1,98 @@
+import { useDebounceEffect, useMutationObserver } from "ahooks";
+import { useRef, useState } from "react";
+import { TableProps } from "..";
+
+interface useScrollEndProps {
+  cls?: string;
+  ref?: React.RefObject<HTMLDivElement>;
+  dataSource?: TableProps["dataSource"];
+  onScrollEnd?: () => void;
+  threshold?: number; // 距离底部的阈值，默认 50px
+  autoScrolling?: boolean; // 当 autoScrolling 开启时，此 hook 不启用
+}
+
+const useScrollEnd = (props: useScrollEndProps) => {
+  const {
+    cls,
+    ref,
+    dataSource,
+    onScrollEnd,
+    threshold = 50,
+    autoScrolling,
+  } = props;
+  const [ready, setReady] = useState(false);
+  const eventHandlersRef = useRef<{
+    scroll?: () => void;
+  }>({});
+
+  useDebounceEffect(() => {
+    let body: HTMLDivElement | null = null;
+
+    // 清理函数
+    const cleanup = () => {
+      // 移除事件监听器
+      if (body && eventHandlersRef.current.scroll) {
+        body.removeEventListener("scroll", eventHandlersRef.current.scroll);
+      }
+      eventHandlersRef.current = {};
+    };
+
+    // 当 autoScrolling 开启时，不启用此 hook
+    if (
+      ref &&
+      ref.current &&
+      ready &&
+      onScrollEnd &&
+      dataSource?.length &&
+      !autoScrolling
+    ) {
+      body = document.querySelector(
+        `.${cls} .ant-table-body`
+      ) as HTMLDivElement;
+
+      if (body && body.scrollHeight > body.clientHeight) {
+        // 清理之前的监听器
+        cleanup();
+
+        // 添加滚动事件监听器
+        const handleScroll = () => {
+          if (!body) {
+            return;
+          }
+
+          // 计算距离底部的距离
+          const scrollTop = body.scrollTop;
+          const scrollHeight = body.scrollHeight;
+          const clientHeight = body.clientHeight;
+          const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+
+          // 当滚动到接近底部时触发
+          if (distanceToBottom <= threshold) {
+            onScrollEnd();
+          }
+        };
+
+        body.addEventListener("scroll", handleScroll, { passive: true });
+
+        eventHandlersRef.current = {
+          scroll: handleScroll,
+        };
+      }
+    }
+
+    return cleanup;
+  }, [ref, cls, ready, dataSource, onScrollEnd, threshold, autoScrolling]);
+
+  useMutationObserver(
+    () => {
+      setReady(true);
+    },
+    ref,
+    {
+      childList: true,
+      subtree: true,
+    }
+  );
+};
+
+export default useScrollEnd;

package/src/components/Table/_hooks/useSetTableHeight.ts

@@ -0,0 +1,110 @@
+import { TableProps } from "..";
+import { useState } from "react";
+import { useEffect } from "react";
+import { useMutationObserver } from "ahooks";
+
+interface Params {
+  pagination?: TableProps["pagination"];
+  scroll?: TableProps["scroll"];
+  scrollAutoHeight?: boolean;
+  ref?: React.RefObject<HTMLDivElement>;
+  dataSource?: TableProps["dataSource"];
+  cls?: string;
+  fillPanel?: boolean;
+  columns?: TableProps["columns"];
+  bordered?: boolean;
+  virtual?: boolean;
+}
+
+const useSetTableHeight = (params: Params) => {
+  const {
+    pagination,
+    scroll,
+    scrollAutoHeight,
+    ref,
+    dataSource,
+    cls,
+    fillPanel,
+    columns,
+    bordered,
+    virtual,
+  } = params;
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    if (scroll && ref && ref.current && ready && columns?.length && !virtual) {
+      const header = document.querySelector(
+        `.${cls} .ant-table-header`,
+      ) as HTMLDivElement;
+
+      const body = document.querySelector(
+        `.${cls} .ant-table-tbody`,
+      ) as HTMLDivElement;
+
+      const _pagination = document.querySelector(
+        `.${cls} .ant-pagination`,
+      ) as HTMLDivElement;
+
+      const simplePagination = document.querySelector(
+        `.${cls} [class^='PaginationSimple']`,
+      ) as HTMLDivElement;
+
+      const summary = document.querySelector(
+        `.${cls} .ant-table-summary`,
+      ) as HTMLUListElement;
+
+      const table = ref.current;
+
+      const height = `${
+        header?.offsetHeight +
+        body?.offsetHeight +
+        (summary ? summary?.offsetHeight : 0) +
+        (pagination
+          ? _pagination
+            ? _pagination?.offsetHeight + 10
+            : simplePagination
+              ? simplePagination?.offsetHeight + 10
+              : 0
+          : 0) +
+        (bordered ? 1 : 0) +
+        (body?.offsetWidth > table.offsetWidth ? 5 : 0)
+      }px`;
+
+      if (scrollAutoHeight && !fillPanel) {
+        table.style.height = height;
+
+        if (
+          (typeof scroll === "object" && scroll.y !== false) ||
+          scroll === true
+        ) {
+          table.style.maxHeight = "100%";
+        }
+      }
+    }
+  }, [
+    dataSource,
+    fillPanel,
+    cls,
+    pagination,
+    ref,
+    scroll,
+    scrollAutoHeight,
+    ready,
+    columns,
+    bordered,
+    virtual,
+  ]);
+
+  useMutationObserver(
+    () => {
+      setReady(true);
+    },
+    ref,
+    {
+      childList: true,
+      subtree: true,
+    },
+  );
+};
+
+export default useSetTableHeight;

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -0,0 +1,372 @@
+import { useCallback, useMemo, useEffect, useState } from "react";
+import { ColumnsType, ColumnType, ColumnsGroupType, TableProps } from "..";
+import { AnyObject } from "antd/es/_util/type";
+import { TableRowSelection } from "antd/es/table/interface";
+import { ColumnsType as AntColumnsType } from "antd/lib/table";
+import { cloneDeep } from "lodash";
+import { Tooltip } from "antd";
+import Icon from "../../Icon";
+import styles from "../index.module.less";
+import { SorterResult, TableCurrentDataSource } from "antd/es/table/interface";
+import { TablePaginationConfig } from "antd/es/table/interface";
+import { FilterValue } from "antd/es/table/interface";
+import { get_string_size } from "hsu-utils";
+import classNames from "classnames";
+import {
+  getDepartmentRowSpan,
+  HELP_TOOLTIP_CONFIG,
+} from "../_utils/tableUtils";
+import usePermissions from "../../../hooks/usePermissions";
+import { PaginationProps } from "../_components/Pagination";
+
+interface UseTableColumnsParams<T extends AnyObject> {
+  columns?: ColumnsType<T>;
+  scroll?: boolean | { y: boolean };
+  autoWidth?: boolean;
+  dataSource?: TableProps<T>["dataSource"];
+  enhanceColumns: (columns?: ColumnsType<T>) => ColumnsType<T> | undefined;
+  serialNumberColumn?: boolean;
+  pagination?: false | PaginationProps;
+  _pageNum: number;
+  _pageSize: number;
+  order?: { k: string; t: "asc" | "desc" };
+  mergeRowDataSource?: readonly T[] | undefined;
+  onChange?: TableProps<T>["onChange"];
+  onOrderChange?: (order?: { k: string; t: "asc" | "desc" }) => void;
+  sorter?: boolean;
+  ref?: React.RefObject<HTMLDivElement>;
+  cls?: string;
+  bordered?: boolean;
+  rowSelection?: TableRowSelection<T>;
+  expandable?: TableProps<T>["expandable"];
+}
+
+const useTableColumns = <T extends AnyObject>(
+  params: UseTableColumnsParams<T>
+): {
+  _columns: ColumnsType<T>;
+  renderedColumns: ColumnsType<T> | undefined;
+  handleTableChange: TableProps<T>["onChange"];
+} => {
+  const {
+    columns = [],
+    scroll,
+    autoWidth,
+    dataSource,
+    enhanceColumns,
+    serialNumberColumn = false,
+    pagination,
+    _pageNum,
+    _pageSize,
+    order,
+    mergeRowDataSource,
+    onChange,
+    onOrderChange,
+    sorter,
+    ref,
+    cls,
+    bordered,
+    rowSelection,
+    expandable,
+  } = params;
+  const { checkPermission } = usePermissions();
+  const [tableWidth, setTableWidth] = useState<number | null>(null);
+
+  // 监听表格宽度变化
+  useEffect(() => {
+    if (ref?.current && cls) {
+      const tableElement = document.querySelector(
+        `.${cls} .ant-table`
+      ) as HTMLElement;
+      if (tableElement) {
+        const updateWidth = () => {
+          const width = tableElement.offsetWidth;
+          if (width > 0) {
+            setTableWidth(width);
+          }
+        };
+        updateWidth();
+        const resizeObserver = new ResizeObserver(updateWidth);
+        resizeObserver.observe(tableElement);
+        return () => resizeObserver.disconnect();
+      }
+    }
+  }, [ref, cls]);
+
+  // 处理列的基础设置（权限、宽度、排序等）
+  const _columns = useMemo(() => {
+    const cloned = cloneDeep(columns);
+
+    const newColumns = cloned
+      ?.map((item, idx) => {
+        return {
+          ...item,
+          width: !item.width ? "100%" : item.width,
+          key: item.key ?? item.dataIndex ?? `col_${idx}`,
+          hidden: !checkPermission(item.hasPermi) || item.hidden,
+          ellipsis: typeof item.ellipsis === "boolean" ? item.ellipsis : true,
+        };
+      })
+      ?.sort((a, b) => (a?.sort ?? 0) - (b?.sort ?? 0))
+      ?.map((item) => {
+        if (
+          autoWidth &&
+          item.width === "100%" &&
+          scroll &&
+          (typeof item.title === "string" || typeof item.title === "number")
+        ) {
+          let { width: titleWidth } = get_string_size(item.title?.toString(), {
+            size: 14,
+          });
+          if (item.help) {
+            titleWidth += 22;
+          }
+
+          const dataIndexWidth = item.dataIndex
+            ? dataSource?.reduce((acc, cur) => {
+                return Math.max(
+                  acc,
+                  get_string_size(cur[item.dataIndex!]?.toString(), {
+                    size: 14,
+                  }).width
+                );
+              }, 0) ?? 0
+            : 0;
+          item.width = Math.max(titleWidth, dataIndexWidth) + 32;
+        }
+
+        return item;
+      })
+      ?.map((item) => {
+        return {
+          ...item,
+          width: item.hidden ? 0.01 : item.width,
+          className: classNames(item.className, {
+            [styles.hidden]: item.hidden,
+          }),
+          hidden: undefined,
+        };
+      });
+
+    return newColumns;
+  }, [autoWidth, columns, dataSource, checkPermission, scroll]);
+
+  // 渲染列标题
+  const renderColumnTitle = useCallback(
+    (column: ColumnType<T> | ColumnsGroupType<T>) => {
+      const titleContent = column?.titleSort
+        ? column.titleSort
+        : column.renderTitle
+        ? column.renderTitle(column.title || "")
+        : column.title;
+
+      if (!column.help) {
+        return titleContent;
+      }
+
+      return (
+        <>
+          {titleContent}
+          <Tooltip title={column.help} {...HELP_TOOLTIP_CONFIG}>
+            <Icon
+              icon="material-symbols:help"
+              className={styles.help}
+              fontSize={16}
+              color="#999999"
+            />
+          </Tooltip>
+        </>
+      );
+    },
+    []
+  );
+
+  const renderColumns = useCallback(
+    (columns?: ColumnsType<T>): AntColumnsType<T> | undefined => {
+      // 先增强列配置，为 ellipsis 列添加自动 Tooltip
+      let enhancedColumns = enhanceColumns(columns);
+
+      if (serialNumberColumn && !_columns.find((v) => !!v.children)) {
+        enhancedColumns?.unshift({
+          title: "序号",
+          dataIndex: "serialNumber",
+          width: 60,
+          align: "center",
+          render: (_, __, index) => {
+            return pagination
+              ? (_pageNum - 1) * _pageSize + (index + 1)
+              : index + 1;
+          },
+          fixedWidth: true,
+        });
+      }
+
+      // 处理 fixedWidth 列的宽度分配（在 enhancedColumns 基础上）
+      if (enhancedColumns && tableWidth && tableWidth > 0) {
+        // 检查是否有 fixedWidth 为 true 的列
+        const hasFixedWidth = enhancedColumns.some(
+          (col) => col.fixedWidth === true
+        );
+
+        if (hasFixedWidth) {
+          // 过滤出可见列（排除 hidden 列，即宽度为 0.01 的列）
+          const visibleColumns = enhancedColumns.filter(
+            (col) => typeof col.width === "number" && col.width > 0.01
+          );
+
+          // 检查所有可见列是否都有宽度（非"100%"）
+          const allHaveWidth = visibleColumns.every(
+            (col) =>
+              col.width && col.width !== "100%" && typeof col.width === "number"
+          );
+
+          if (allHaveWidth && visibleColumns.length > 0) {
+            // 计算所有可见列的宽度总和
+            const totalWidth = visibleColumns.reduce((sum, col) => {
+              const width = typeof col.width === "number" ? col.width : 0;
+              return sum + width;
+            }, 0);
+
+            // 如果总和小于表格宽度，按比例分配给非 fixedWidth 的可见列
+            // 当 bordered 为 true 时，tableWidth 需要减去 2（边框宽度）
+            // 当有 rowSelection 时，tableWidth 需要减去 48（选择列宽度）
+            let adjustedTableWidth = bordered ? tableWidth - 2 : tableWidth;
+            if (rowSelection) {
+              adjustedTableWidth -= 48;
+            }
+            if (expandable) {
+              adjustedTableWidth -= 48;
+            }
+            if (totalWidth < adjustedTableWidth) {
+              const extraWidth = adjustedTableWidth - totalWidth;
+              const nonFixedWidthColumns = visibleColumns.filter(
+                (col) => col.fixedWidth !== true
+              );
+              const nonFixedWidthTotal = nonFixedWidthColumns.reduce(
+                (sum, col) => {
+                  const width = typeof col.width === "number" ? col.width : 0;
+                  return sum + width;
+                },
+                0
+              );
+
+              if (nonFixedWidthTotal > 0) {
+                // 按比例分配多余宽度
+                enhancedColumns = enhancedColumns?.map((col) => {
+                  // hidden 列（宽度为 0.01）或 fixedWidth 列保持原宽度
+                  const currentWidth =
+                    typeof col.width === "number" ? col.width : 0;
+                  if (col.fixedWidth === true || currentWidth <= 0.01) {
+                    return col;
+                  }
+                  const ratio = currentWidth / nonFixedWidthTotal;
+                  const additionalWidth = extraWidth * ratio;
+                  return {
+                    ...col,
+                    width: +(currentWidth + additionalWidth).toFixed(2),
+                  };
+                });
+              }
+            }
+          }
+        }
+      }
+
+      return enhancedColumns?.map((column) => {
+        const orderKey = column.orderKey || column.dataIndex;
+        const isOrderColumn = orderKey && orderKey !== "serialNumber";
+
+        return {
+          showSorterTooltip: false,
+          sorter:
+            typeof sorter === "boolean" ? sorter : isOrderColumn ? true : false,
+          ...column,
+          orderKey,
+          title: renderColumnTitle(column),
+          children: column?.children
+            ? renderColumns(column.children)
+            : undefined,
+          onCell: (record, index) => {
+            const cell = column?.onCell?.(record, index);
+            let rowSpan = 1;
+
+            if (column.mergeRow) {
+              rowSpan = getDepartmentRowSpan(
+                record as unknown as Record<string, unknown>,
+                index as number,
+                mergeRowDataSource as unknown as Record<string, unknown>[],
+                column.dataIndex as string
+              );
+            }
+
+            return {
+              rowSpan,
+              ...cell,
+            };
+          },
+          sortOrder:
+            order?.k === orderKey
+              ? order?.t === "desc"
+                ? "descend"
+                : "ascend"
+              : undefined,
+        };
+      });
+    },
+    [
+      enhanceColumns,
+      serialNumberColumn,
+      _columns,
+      tableWidth,
+      pagination,
+      _pageNum,
+      _pageSize,
+      bordered,
+      rowSelection,
+      expandable,
+      sorter,
+      renderColumnTitle,
+      order,
+      mergeRowDataSource,
+    ]
+  );
+
+  // 缓存渲染后的列配置
+  const renderedColumns = useMemo(
+    () => renderColumns(cloneDeep(_columns)),
+    [renderColumns, _columns]
+  );
+
+  // 处理排序变化
+  const handleTableChange = useCallback(
+    (
+      pagination: TablePaginationConfig,
+      filters: Record<string, FilterValue | null>,
+      sorter: SorterResult<T> | SorterResult<T>[],
+      extra: TableCurrentDataSource<T>
+    ) => {
+      onChange?.(pagination, filters, sorter, extra);
+      const sorterResult = Array.isArray(sorter) ? sorter[0] : sorter;
+      const { column, order: _order } = sorterResult;
+      const columnOrderKey = (column as ColumnType<T>)?.orderKey;
+      const k = columnOrderKey ?? order?.k;
+
+      if (!k || !_order) {
+        onOrderChange?.(undefined);
+      } else {
+        const t = _order === "ascend" ? "asc" : "desc";
+
+        onOrderChange?.({ k, t });
+      }
+    },
+    [onChange, onOrderChange, order]
+  );
+
+  return {
+    _columns: _columns as ColumnsType<T>,
+    renderedColumns: renderedColumns as ColumnsType<T> | undefined,
+    handleTableChange,
+  };
+};
+
+export default useTableColumns;