@creekjs/web-components 1.0.4 → 1.0.6

package/src/creek-table/components/EllipsisTooltip.tsx

@@ -0,0 +1,116 @@
+import { CopyOutlined } from '@ant-design/icons';
+import { ConfigProvider, Flex, Tooltip, Typography, message } from 'antd';
+import { createStyles } from 'antd-style';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+
+import { useT } from '@/utils/i18n';
+
+const useStyles = createStyles(({ css, token }) => {
+  return {
+    text: css`
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      // Ensure the wrapper behaves like a block/inline-block that can have width
+      display: block;
+      overflow: hidden;
+    `,
+    tooltipContent: css`
+      max-width: 500px;
+      max-height: 300px;
+      overflow-y: auto;
+    `,
+    tooltipText: css`
+      word-break: break-all;
+      white-space: pre-wrap;
+    `,
+    copyIcon: css`
+      cursor: pointer;
+      color: inherit;
+      transition: color 0.2s;
+
+      &:hover {
+        color: ${token.colorPrimary};
+      }
+    `,
+  };
+});
+
+/**
+ * 使用 Antd Typography 组件实现省略提示
+ * 修复了 findDOMNode 警告问题：通过显式使用 Tooltip 包裹 div 容器
+ * 实现了智能提示：只有内容实际溢出时才显示 Tooltip
+ */
+export const EllipsisTooltip = ({ children }: { children: React.ReactNode }) => {
+  const t = useT();
+
+  const { styles } = useStyles();
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const textRef = useRef<HTMLDivElement>(null);
+  const [isEllipsis, setIsEllipsis] = useState(false);
+  const isSimpleContent = typeof children === 'string' || typeof children === 'number';
+
+  useEffect(() => {
+    const checkEllipsis = () => {
+      if (textRef.current) {
+        const prefixCls = getPrefixCls('typography');
+        // Typography.Text renders a span or div with .ant-typography
+        const typographyEl = textRef.current.querySelector(`.${prefixCls}`);
+        if (typographyEl) {
+          // For simple ellipsis={true}, Antd uses CSS ellipsis.
+          // We can detect if it's truncated by comparing scrollWidth and clientWidth
+          // We add a small buffer (1px) for browser sub-pixel rendering differences
+          setIsEllipsis(typographyEl.scrollWidth > typographyEl.clientWidth + 1);
+        }
+      }
+    };
+
+    // Initial check
+    checkEllipsis();
+    // Use ResizeObserver for more robust size change detection
+    const observer = new ResizeObserver(checkEllipsis);
+    if (textRef.current) {
+      observer.observe(textRef.current);
+    }
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [children]);
+
+  const text = String(children);
+
+  const handleCopy = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    e.preventDefault();
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        message.success(t('creek-table.components.EllipsisTooltip.fuZhiChengGong', '复制成功'));
+      })
+      .catch(() => {
+        message.error(t('creek-table.components.EllipsisTooltip.fuZhiShiBai', '复制失败'));
+      });
+  };
+
+  // Memoize tooltip title content
+  const tooltipTitle = React.useMemo(() => {
+    if (!isSimpleContent) {
+      return children;
+    }
+    return (
+      <Flex align="center" gap={8} className={styles.tooltipContent}>
+        <span className={styles.tooltipText}>{children}</span>
+        <CopyOutlined onClick={handleCopy} className={styles.copyIcon} title={t('creek-table.components.EllipsisTooltip.fuZhi', '复制')} />
+      </Flex>
+    );
+  }, [children, isSimpleContent]);
+
+  return (
+    <Tooltip title={isEllipsis ? tooltipTitle : undefined} placement="topLeft" mouseLeaveDelay={0.2} getPopupContainer={() => document.body}>
+      <div ref={textRef} className={styles.text}>
+        <Typography.Text ellipsis={true}>{children}</Typography.Text>
+      </div>
+    </Tooltip>
+  );
+};

package/src/creek-table/components/index.tsx

@@ -0,0 +1,3 @@
+export * from './DensityIcon';
+export * from './EllipsisTooltip';
+

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

@@ -1,6 +1,10 @@
 export * from './useAdaptiveToolBar';
 export * from './useAutoWidthColumns';
 export * from './useElementDistance';
+export * from './useEllipsisColumns';
+export * from './useIndexColumn';
+export * from './useResizableColumns';
+export * from './useStatusColumns';
+export * from './useTableOptions';
 export * from './useTableScrollHeight';
 
-

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

@@ -3,12 +3,13 @@ import { useMemoizedFn } from 'ahooks';
 import { Space } from 'antd';
 import { RefObject, useEffect, useMemo, useRef, useState } from 'react';
 
-const DEFAULT_PADDING_WIDTH = 16;
+const DEFAULT_PADDING_WIDTH_SMALL = 16; // small size (compact)
+const DEFAULT_PADDING_WIDTH_LARGE = 24; // large size (default)
 
 /**
- * 估算字符串宽度（简单估算：汉字 14px，非汉字 8px，左右 padding 16px）
+ * 估算字符串宽度（简单估算：汉字 14px，非汉字 8px）
  */
-const estimateWidth = (text: string) => {
+const estimateWidth = (text: string, padding: number) => {
   let width = 0;
   for (const char of text) {
     if (/[\u4e00-\u9fa5]/.test(char)) {
@@ -17,7 +18,7 @@ const estimateWidth = (text: string) => {
       width += 8;
     }
   }
-  return width + DEFAULT_PADDING_WIDTH; // padding
+  return width + padding;
 };
 
 /**
@@ -63,7 +64,9 @@ const MeasureWrapper = ({ children, onResize }: { children: React.ReactNode; onR
     // 监听变化
     const observer = new ResizeObserver((entries) => {
       for (const entry of entries) {
-        onResize((entry.target as HTMLElement).offsetWidth);
+        // 使用 scrollWidth 来获取完整内容宽度，防止被截断时的测量误差
+        const width = (entry.target as HTMLElement).scrollWidth;
+        onResize(width);
       }
     });
 
@@ -74,29 +77,56 @@ const MeasureWrapper = ({ children, onResize }: { children: React.ReactNode; onR
     };
   }, []); // 依赖为空，只在挂载时设置监听
 
-  return <Space ref={ref}>{children}</Space>;
+  // 使用 inline-block 和 nowrap 防止内容被父容器宽度挤压导致测量不准
+  return (
+    <div
+      ref={ref}
+      style={{
+        display: 'inline-block',
+        whiteSpace: 'nowrap',
+        width: 'max-content', // 确保宽度由内容决定
+        minWidth: 'min-content',
+      }}
+    >
+      <Space>{children}</Space>
+    </div>
+  );
 };
 
 export const useAutoWidthColumns = <T, ValueType>(
   columns: ProColumns<T, ValueType>[] | undefined,
   tableRef: RefObject<HTMLDivElement>,
+  resizedWidths?: Record<string, number>,
+  bordered?: boolean,
+  size?: 'large' | 'middle' | 'small' | 'medium',
 ): { 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);
+  // 初始时尝试直接获取宽度，如果 tableRef 已经有值
+  const [tableWidth, setTableWidth] = useState<number>(() => {
+      if (tableRef.current) {
+          return tableRef.current.offsetWidth;
+      }
+      return 0;
+  });
 
   // 监听 table 容器宽度变化
   useEffect(() => {
     if (!tableRef.current) return;
-
-    // 立即获取一次宽度
-    setTableWidth(tableRef.current.offsetWidth);
+    
+    // 如果初始状态是0（因为ref.current可能在render时为null），这里补救一下
+    if (tableWidth === 0) {
+        setTableWidth(tableRef.current.offsetWidth);
+    }
 
     // 使用 requestAnimationFrame + setTimeout 防抖
     let rafId: number;
     let timerId: NodeJS.Timeout;
 
     const updateWidth = (width: number) => {
+      // 忽略 0 宽度的更新（通常是由于 display: none 引起的）
+      if (width === 0) return;
+
       cancelAnimationFrame(rafId);
       clearTimeout(timerId);
 
@@ -146,20 +176,35 @@ export const useAutoWidthColumns = <T, ValueType>(
 
     // 1. 先计算所有列的理想宽度（不考虑 table 宽度）
     const calculatedColumns = columns.map((col, index) => {
-      const colKey = (col.dataIndex as string) || (col.key as string) || `col-${index}`;
+      const colKey = (col.key as string) || (col.dataIndex as string) || `col-${index}`;
       const measuredWidth = columnWidths[colKey];
-      let width: number;
+      
+      // 根据 size 确定 padding
+      let padding = DEFAULT_PADDING_WIDTH_SMALL;
+       if (size === 'large') {
+        padding = DEFAULT_PADDING_WIDTH_LARGE;
+      }
+      
+      let baseWidth: number;
       if (col.width) {
-        width = typeof col.width === 'number' ? col.width : 100; // 暂时给个默认值如果手动设了 string width
+        baseWidth = typeof col.width === 'number' ? col.width : 100; // 暂时给个默认值如果手动设了 string width
       } else if (col.valueType === 'option' && measuredWidth) {
-        width = measuredWidth + DEFAULT_PADDING_WIDTH;
+        // bordered 模式下，需要额外的宽度来容纳边框和视觉间距，避免换行
+        const extraPadding = bordered ? 4: 0;
+        baseWidth = measuredWidth + padding + extraPadding;
       } else {
-        width = Math.max(estimateWidth(col.title as string), getValueTypeWidth(col.valueType as string));
+        baseWidth = Math.max(estimateWidth(col.title as string, padding), getValueTypeWidth(col.valueType as string));
+      }
+
+      let width = baseWidth;
+      if (resizedWidths && resizedWidths[colKey]) {
+        width = resizedWidths[colKey];
       }
 
       return {
         ...col,
         _calculatedWidth: width,
+        _baseWidth: baseWidth, // 新增 _baseWidth 用于后续 minWidth 限制
         _colKey: colKey,
       };
     });
@@ -169,11 +214,18 @@ export const useAutoWidthColumns = <T, ValueType>(
 
     // 3. 判断是否需要自适应
     // 如果总宽度小于 table 宽度，说明空间足够，除了 option 列，其他列可以不设宽度让 table 自动撑开
-    const isOverflow = totalCalculatedWidth > tableWidth;
+    // 但如果有任何列被用户手动 resize 了，我们认为用户希望精确控制，此时也应该返回 totalWidth
+    const hasResized = resizedWidths && Object.keys(resizedWidths).length > 0;
+    const isOverflow = totalCalculatedWidth > tableWidth || hasResized;
+
+    // 只有在内容真实溢出（即总宽度 > 容器宽度）时，才强制给未设置宽度的列设置最小估算宽度。
+    // 如果仅仅是用户调整了某列宽度但总宽度仍小于容器宽度，此时不应该限制其他列的宽度，
+    // 而是利用 table 的自动布局特性让它们填充剩余空间。
+    const shouldForceWidth = totalCalculatedWidth > tableWidth;
 
     const processedColumns = calculatedColumns.map((col) => {
       // 提取内部使用的字段
-      const { _calculatedWidth, _colKey, ...originalCol } = col;
+      const { _calculatedWidth, _baseWidth, _colKey, ...originalCol } = col;
 
       // 针对 valueType === 'option' (操作列)，始终需要特殊处理（包裹测量组件）
       if (col.valueType === 'option') {
@@ -195,7 +247,29 @@ export const useAutoWidthColumns = <T, ValueType>(
         ...originalCol,
         // 只有当内容溢出（需要滚动）或者手动设置了宽度时，才应用计算出的宽度
         // 否则不设置 width，让 Antd Table 自动布局占满剩余空间
-        width: isOverflow || col.width ? _calculatedWidth : undefined,
+        width: shouldForceWidth || col.width || (resizedWidths && resizedWidths[_colKey]) ? _calculatedWidth : undefined,
+        // 添加 calculatedWidth 以供后续 useResizableColumns 使用，这里使用 _baseWidth (即不受 resize 影响的宽度)
+        calculatedWidth: _baseWidth,
+        onHeaderCell: (column: any) => {
+          const originalProps = originalCol.onHeaderCell ? originalCol.onHeaderCell(column) : {};
+          return {
+            ...originalProps,
+            style: {
+              ...originalProps.style,
+              minWidth: _calculatedWidth,
+            },
+          };
+        },
+        onCell: (record: any, index: any) => {
+          const originalProps = originalCol.onCell ? originalCol.onCell(record, index) : {};
+          return {
+            ...originalProps,
+            style: {
+              ...originalProps.style,
+              minWidth: _calculatedWidth,
+            },
+          };
+        },
       };
     });
 
@@ -203,7 +277,7 @@ export const useAutoWidthColumns = <T, ValueType>(
       columns: processedColumns,
       totalWidth: isOverflow ? totalCalculatedWidth : undefined,
     };
-  }, [columns, columnWidths, tableWidth]);
+  }, [columns, columnWidths, tableWidth, resizedWidths]);
 
   return {
     columns: finalColumns,

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

@@ -0,0 +1,47 @@
+import type { ParamsType, ProColumns } from '@ant-design/pro-components';
+import React, { useMemo } from 'react';
+import { EllipsisTooltip } from '../components';
+
+/**
+ * 默认开启 ellipsis 的 Hook
+ * 1. 如果用户未配置 ellipsis，默认开启，并使用 Tooltip 显示完整内容
+ * 2. 如果是 option 列，默认不开启
+ * 3. 尊重用户配置
+ */
+export const useEllipsisColumns = <T extends ParamsType, ValueType = 'text'>(
+  columns: ProColumns<T, ValueType>[] | undefined,
+) => {
+  const processedColumns = useMemo(() => {
+    return columns?.map((col) => {
+      // 对于操作列，默认不开启 ellipsis
+      if (col.valueType === 'option') {
+        return col;
+      }
+      // 其他列默认开启 ellipsis，并使用自定义渲染
+      return {
+        ...col,
+        // 关闭 Table 自带的 ellipsis title，因为我们要用自己的 Tooltip
+        // 但保留 ellipsis 属性以确保 Table 传递正确的样式给 cell（虽然我们的 EllipsisTooltip 也有样式）
+        // 实际上，为了让 EllipsisTooltip 占据 100% 宽度并生效，最好让 Table cell 也保持一定的约束
+        ellipsis: {
+          showTitle: false,
+        },
+        render: (dom: React.ReactNode, entity: T, index: number, action: any, schema: any) => {
+          const originalRenderResult = col.render ? (col.render(dom, entity, index, action, schema) as React.ReactNode) : dom;
+          
+          // 如果内容为空，直接返回
+          if (originalRenderResult === null || originalRenderResult === undefined || originalRenderResult === '') {
+            return originalRenderResult;
+          }
+
+          // 如果是简单的文本或数字，使用 EllipsisTooltip 包裹
+          return (
+            <EllipsisTooltip>{originalRenderResult}</EllipsisTooltip>
+          );
+        },
+      } as ProColumns<T, ValueType>;
+    });
+  }, [columns]);
+
+  return processedColumns;
+};

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

@@ -0,0 +1,27 @@
+import { ProColumns } from '@ant-design/pro-components';
+import { useMemo } from 'react';
+
+import { useT } from '@/utils/i18n';
+
+export const useIndexColumn = <T = any, ValueType = 'text'>(columns: ProColumns<T, ValueType>[] = [], showIndex: boolean = true) => {
+  const t = useT();
+
+  return useMemo(() => {
+    if (!showIndex) {
+      return columns;
+    }
+    const indexColumn: ProColumns<T, ValueType> = {
+      title: t('creek-table.hooks.useIndexColumn.xuHao', '序号'),
+      dataIndex: 'index',
+      width: 48,
+      fixed: 'left',
+      disable: true,
+      hideInSearch: true,
+      render: (dom, entity, index, action, schema) => {
+        const { current = 1, pageSize = 20 } = action?.pageInfo || {};
+        return (current - 1) * pageSize + index + 1;
+      },
+    };
+    return [indexColumn, ...columns];
+  }, [columns, showIndex, t]);
+};