@hsu-react/ui 0.0.10 → 0.0.11

package/README.md

@@ -30,10 +30,10 @@ export default function App() {
 - `ConfigProvider.permissions` — 当前用户权限码，驱动所有 `hasPermi` 的显隐校验。
 - `ConfigProvider.request` — 注入 HTTP 请求实现（库本身不绑定 HTTP 客户端）。
 
-可选引入全局 antd 观感覆盖：
+可选引入全局 antd 观感覆盖（产物为 scss，宿主项目需具备 scss 编译能力）：
 
 ```ts
-import "@hsu-react/ui/es/styles/antd-overload.less";
+import "@hsu-react/ui/es/styles/antd-overload.scss";
 ```
 
 ## 开发

package/es/components/Table/_hooks/useEllipsisTooltip.js

@@ -25,11 +25,13 @@ var useEllipsisTooltip = function useEllipsisTooltip(tooltipConfig) {
       if (column.ellipsis && !column.render && column.dataIndex) {
         return _objectSpread(_objectSpread({}, column), {}, {
           render: function render(text) {
-            var _column$width, _column$width2, _column$ellipsisPosit;
+            var _column$ellipsisPosit;
             // 获取实际的显示值
             var displayValue = typeof text === "string" || typeof text === "number" ? text : String(text !== null && text !== void 0 ? text : "");
+
+            // 不传 width：由 TextEllipsis 实测单元格实际渲染宽度作为 Tooltip 宽度
+            // （声明的列宽经 fixedWidth 比例分配后与实际宽度并不一致）
             return /*#__PURE__*/React.createElement(TextEllipsis, {
-              width: Math.max(Number((_column$width = column.width) !== null && _column$width !== void 0 ? _column$width : 0), 300) === 300 ? undefined : Math.max(Number((_column$width2 = column.width) !== null && _column$width2 !== void 0 ? _column$width2 : 0), 300),
               tooltipConfig: tooltipConfig,
               children: displayValue,
               ellipsisPosition: (_column$ellipsisPosit = column.ellipsisPosition) !== null && _column$ellipsisPosit !== void 0 ? _column$ellipsisPosit : tooltipConfig === null || tooltipConfig === void 0 ? void 0 : tooltipConfig.ellipsisPosition,

package/es/components/Table/_hooks/useTableColumns.d.ts

@@ -31,6 +31,7 @@ interface UseTableColumnsParams<T extends AnyObject> {
     bordered?: boolean;
     rowSelection?: TableRowSelection<T>;
     expandable?: TableProps<T>["expandable"];
+    tdPadding?: string;
 }
 declare const useTableColumns: <T extends AnyObject>(params: UseTableColumnsParams<T>) => {
     _columns: ColumnsType<T>;

package/es/components/Table/_hooks/useTableColumns.js

@@ -26,9 +26,30 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 var MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
 var MEASURE_ALIGN_BUFFER_PX = 2;
-// 单元格左右内边距合计（--td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
+// 单元格左右内边距合计的默认值（默认 --td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
 var MEASURE_ALIGN_CELL_PADDING_PX = 16;
 
+/**
+ * 解析 tdPadding（CSS padding 简写）的左右内边距合计；
+ * 未传或解析不出时回退默认值（与默认 --td-padding: 4px 8px 一致）。
+ */
+var getCellHorizontalPadding = function getCellHorizontalPadding(tdPadding) {
+  if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
+  var parts = tdPadding.trim().split(/\s+/).map(function (v) {
+    return parseFloat(v);
+  });
+  if (!parts.length || parts.some(function (v) {
+    return Number.isNaN(v);
+  })) {
+    return MEASURE_ALIGN_CELL_PADDING_PX;
+  }
+
+  // CSS 简写：1 值=四边；2/3 值=第 2 个为左右；4 值=右+左
+  if (parts.length === 1) return parts[0] * 2;
+  if (parts.length === 4) return parts[1] + parts[3];
+  return parts[1] * 2;
+};
+
 // 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
 var getMeasureAlignWidth = function getMeasureAlignWidth(column, dataSource) {
   if (!(dataSource !== null && dataSource !== void 0 && dataSource.length)) return 0;
@@ -64,7 +85,8 @@ var useTableColumns = function useTableColumns(params) {
     cls = params.cls,
     bordered = params.bordered,
     rowSelection = params.rowSelection,
-    expandable = params.expandable;
+    expandable = params.expandable,
+    tdPadding = params.tdPadding;
   var _usePermissions = usePermissions(),
     checkPermission = _usePermissions.checkPermission;
   var _useState = useState(null),
@@ -132,7 +154,7 @@ var useTableColumns = function useTableColumns(params) {
       if (item.measureAlign && typeof item.width === "number") {
         var measured = getMeasureAlignWidth(item, dataSource);
         if (measured > 0) {
-          item.width = Math.max(item.width, measured + MEASURE_ALIGN_CELL_PADDING_PX);
+          item.width = Math.max(item.width, measured + getCellHorizontalPadding(tdPadding));
         }
       }
       return item;
@@ -144,7 +166,7 @@ var useTableColumns = function useTableColumns(params) {
       });
     });
     return newColumns;
-  }, [autoWidth, columns, dataSource, checkPermission, scroll]);
+  }, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
 
   // 渲染列标题
   var renderColumnTitle = useCallback(function (column) {

package/es/components/Table/index.js

@@ -126,7 +126,8 @@ var Table = function Table(props) {
       cls: cls,
       bordered: bordered,
       rowSelection: rowSelection,
-      expandable: expandable
+      expandable: expandable,
+      tdPadding: tdPadding
     }),
     _columns = _useTableColumns._columns,
     renderedColumns = _useTableColumns.renderedColumns,

package/es/components/TextEllipsis/index.js

@@ -46,6 +46,11 @@ var TextEllipsis = function TextEllipsis(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     truncatedText = _useState4[0],
     setTruncatedText = _useState4[1];
+  // 容器实际渲染宽度：未声明 width 时（如表格列宽动态分配）作为 Tooltip 宽度
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    measuredWidth = _useState6[0],
+    setMeasuredWidth = _useState6[1];
   useEffect(function () {
     var element = textRef.current;
     var measureElement = measureRef.current;
@@ -101,27 +106,40 @@ var TextEllipsis = function TextEllipsis(_ref) {
       return result;
     };
     var textContent = getTextContent(children);
-    var isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
-    setIsOverflow(isTextOverflow);
+    var update = function update() {
+      var isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+      setIsOverflow(isTextOverflow);
+      setMeasuredWidth(element.clientWidth);
 
-    // 如果是省略前面且文本溢出，需要计算截断后的文本
-    if (ellipsisPosition === "start" && isTextOverflow && textContent) {
-      var maxWidth = element.clientWidth;
-      var truncated = calculateTruncatedText(textContent, maxWidth);
-      setTruncatedText(truncated);
-    } else {
-      setTruncatedText(children);
-    }
+      // 如果是省略前面且文本溢出，需要计算截断后的文本
+      if (ellipsisPosition === "start" && isTextOverflow && textContent) {
+        var maxWidth = element.clientWidth;
+        var truncated = calculateTruncatedText(textContent, maxWidth);
+        setTruncatedText(truncated);
+      } else {
+        setTruncatedText(children);
+      }
+    };
+    update();
+
+    // 容器宽度动态变化（如表格列宽重分配、窗口 resize）时重测溢出与宽度
+    var resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    return function () {
+      return resizeObserver.disconnect();
+    };
   }, [children, ellipsisPosition, style]);
 
-  // 计算 Tooltip 的宽度
+  // 计算 Tooltip 的宽度：显式 width 优先；未声明（或百分比）时用容器实际渲染宽度，
+  // 实测不到再回退 defaultWidth
   var getTooltipWidth = function getTooltipWidth() {
     var _tooltipConfig$defaul;
     var defaultWidth = (_tooltipConfig$defaul = tooltipConfig === null || tooltipConfig === void 0 ? void 0 : tooltipConfig.defaultWidth) !== null && _tooltipConfig$defaul !== void 0 ? _tooltipConfig$defaul : DEFAULT_TOOLTIP_WIDTH;
-    if (!width) return defaultWidth;
+    var dynamicWidth = measuredWidth > 0 ? measuredWidth : defaultWidth;
+    if (!width) return dynamicWidth;
     if (typeof width === "number") return width;
-    if (typeof width === "string" && width.includes("%")) return defaultWidth;
-    return parseInt(width) || defaultWidth;
+    if (typeof width === "string" && width.includes("%")) return dynamicWidth;
+    return parseInt(width) || dynamicWidth;
   };
   var tooltipWidth = getTooltipWidth();
 

package/lib/components/Table/_hooks/useEllipsisTooltip.js

@@ -30,8 +30,10 @@ const useEllipsisTooltip = tooltipConfig => {
           render: text => {
             // 获取实际的显示值
             const displayValue = typeof text === "string" || typeof text === "number" ? text : String(text ?? "");
+
+            // 不传 width：由 TextEllipsis 实测单元格实际渲染宽度作为 Tooltip 宽度
+            // （声明的列宽经 fixedWidth 比例分配后与实际宽度并不一致）
             return /*#__PURE__*/_react.default.createElement(_TextEllipsis.default, {
-              width: Math.max(Number(column.width ?? 0), 300) === 300 ? undefined : Math.max(Number(column.width ?? 0), 300),
               tooltipConfig: tooltipConfig,
               children: displayValue,
               ellipsisPosition: column.ellipsisPosition ?? tooltipConfig?.ellipsisPosition,

package/lib/components/Table/_hooks/useTableColumns.d.ts

@@ -31,6 +31,7 @@ interface UseTableColumnsParams<T extends AnyObject> {
     bordered?: boolean;
     rowSelection?: TableRowSelection<T>;
     expandable?: TableProps<T>["expandable"];
+    tdPadding?: string;
 }
 declare const useTableColumns: <T extends AnyObject>(params: UseTableColumnsParams<T>) => {
     _columns: ColumnsType<T>;

package/lib/components/Table/_hooks/useTableColumns.js

@@ -19,9 +19,26 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
 const MEASURE_ALIGN_BUFFER_PX = 2;
-// 单元格左右内边距合计（--td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
+// 单元格左右内边距合计的默认值（默认 --td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
 const MEASURE_ALIGN_CELL_PADDING_PX = 16;
 
+/**
+ * 解析 tdPadding（CSS padding 简写）的左右内边距合计；
+ * 未传或解析不出时回退默认值（与默认 --td-padding: 4px 8px 一致）。
+ */
+const getCellHorizontalPadding = tdPadding => {
+  if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
+  const parts = tdPadding.trim().split(/\s+/).map(v => parseFloat(v));
+  if (!parts.length || parts.some(v => Number.isNaN(v))) {
+    return MEASURE_ALIGN_CELL_PADDING_PX;
+  }
+
+  // CSS 简写：1 值=四边；2/3 值=第 2 个为左右；4 值=右+左
+  if (parts.length === 1) return parts[0] * 2;
+  if (parts.length === 4) return parts[1] + parts[3];
+  return parts[1] * 2;
+};
+
 // 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
 const getMeasureAlignWidth = (column, dataSource) => {
   if (!dataSource?.length) return 0;
@@ -57,7 +74,8 @@ const useTableColumns = params => {
     cls,
     bordered,
     rowSelection,
-    expandable
+    expandable,
+    tdPadding
   } = params;
   const {
     checkPermission
@@ -117,7 +135,7 @@ const useTableColumns = params => {
       if (item.measureAlign && typeof item.width === "number") {
         const measured = getMeasureAlignWidth(item, dataSource);
         if (measured > 0) {
-          item.width = Math.max(item.width, measured + MEASURE_ALIGN_CELL_PADDING_PX);
+          item.width = Math.max(item.width, measured + getCellHorizontalPadding(tdPadding));
         }
       }
       return item;
@@ -132,7 +150,7 @@ const useTableColumns = params => {
       };
     });
     return newColumns;
-  }, [autoWidth, columns, dataSource, checkPermission, scroll]);
+  }, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
 
   // 渲染列标题
   const renderColumnTitle = (0, _react.useCallback)(column => {

package/lib/components/Table/index.js

@@ -125,7 +125,8 @@ const Table = props => {
     cls,
     bordered,
     rowSelection,
-    expandable
+    expandable,
+    tdPadding
   });
   (0, _useSetTableHeight.default)({
     pagination,

package/lib/components/TextEllipsis/index.js

@@ -29,6 +29,8 @@ const TextEllipsis = ({
   const measureRef = (0, _react.useRef)(null);
   const [isOverflow, setIsOverflow] = (0, _react.useState)(false);
   const [truncatedText, setTruncatedText] = (0, _react.useState)(children);
+  // 容器实际渲染宽度：未声明 width 时（如表格列宽动态分配）作为 Tooltip 宽度
+  const [measuredWidth, setMeasuredWidth] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     const element = textRef.current;
     const measureElement = measureRef.current;
@@ -84,26 +86,37 @@ const TextEllipsis = ({
       return result;
     };
     const textContent = getTextContent(children);
-    const isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
-    setIsOverflow(isTextOverflow);
+    const update = () => {
+      const isTextOverflow = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+      setIsOverflow(isTextOverflow);
+      setMeasuredWidth(element.clientWidth);
 
-    // 如果是省略前面且文本溢出，需要计算截断后的文本
-    if (ellipsisPosition === "start" && isTextOverflow && textContent) {
-      const maxWidth = element.clientWidth;
-      const truncated = calculateTruncatedText(textContent, maxWidth);
-      setTruncatedText(truncated);
-    } else {
-      setTruncatedText(children);
-    }
+      // 如果是省略前面且文本溢出，需要计算截断后的文本
+      if (ellipsisPosition === "start" && isTextOverflow && textContent) {
+        const maxWidth = element.clientWidth;
+        const truncated = calculateTruncatedText(textContent, maxWidth);
+        setTruncatedText(truncated);
+      } else {
+        setTruncatedText(children);
+      }
+    };
+    update();
+
+    // 容器宽度动态变化（如表格列宽重分配、窗口 resize）时重测溢出与宽度
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
   }, [children, ellipsisPosition, style]);
 
-  // 计算 Tooltip 的宽度
+  // 计算 Tooltip 的宽度：显式 width 优先；未声明（或百分比）时用容器实际渲染宽度，
+  // 实测不到再回退 defaultWidth
   const getTooltipWidth = () => {
     const defaultWidth = tooltipConfig?.defaultWidth ?? DEFAULT_TOOLTIP_WIDTH;
-    if (!width) return defaultWidth;
+    const dynamicWidth = measuredWidth > 0 ? measuredWidth : defaultWidth;
+    if (!width) return dynamicWidth;
     if (typeof width === "number") return width;
-    if (typeof width === "string" && width.includes("%")) return defaultWidth;
-    return parseInt(width) || defaultWidth;
+    if (typeof width === "string" && width.includes("%")) return dynamicWidth;
+    return parseInt(width) || dynamicWidth;
   };
   const tooltipWidth = getTooltipWidth();
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hsu-react/ui",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "一套基于 React + Ant Design 的中后台业务组件库",
   "license": "MIT",
   "type": "module",

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

@@ -32,11 +32,9 @@ const useEllipsisTooltip = <T extends AnyObject>(
                   ? text
                   : String(text ?? "");
 
+              // 不传 width：由 TextEllipsis 实测单元格实际渲染宽度作为 Tooltip 宽度
+              // （声明的列宽经 fixedWidth 比例分配后与实际宽度并不一致）
               return React.createElement(TextEllipsis, {
-                width:
-                  Math.max(Number(column.width ?? 0), 300) === 300
-                    ? undefined
-                    : Math.max(Number(column.width ?? 0), 300),
                 tooltipConfig: tooltipConfig,
                 children: displayValue,
                 ellipsisPosition:

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

@@ -23,9 +23,30 @@ import { PaginationProps } from "../_components/Pagination";
 const MEASURE_ALIGN_FONT_SIZE = 14;
 // Canvas measureText 仅返回 advance width，较 DOM 实际渲染偏窄约 1px，补 2px 缓冲避免最宽行被挤压
 const MEASURE_ALIGN_BUFFER_PX = 2;
-// 单元格左右内边距合计（--td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
+// 单元格左右内边距合计的默认值（默认 --td-padding: 4px 8px），用于把列宽抬到能放下定宽内容块
 const MEASURE_ALIGN_CELL_PADDING_PX = 16;
 
+/**
+ * 解析 tdPadding（CSS padding 简写）的左右内边距合计；
+ * 未传或解析不出时回退默认值（与默认 --td-padding: 4px 8px 一致）。
+ */
+const getCellHorizontalPadding = (tdPadding?: string): number => {
+  if (!tdPadding) return MEASURE_ALIGN_CELL_PADDING_PX;
+
+  const parts = tdPadding
+    .trim()
+    .split(/\s+/)
+    .map((v) => parseFloat(v));
+  if (!parts.length || parts.some((v) => Number.isNaN(v))) {
+    return MEASURE_ALIGN_CELL_PADDING_PX;
+  }
+
+  // CSS 简写：1 值=四边；2/3 值=第 2 个为左右；4 值=右+左
+  if (parts.length === 1) return parts[0] * 2;
+  if (parts.length === 4) return parts[1] + parts[3];
+  return parts[1] * 2;
+};
+
 // 计算 measureAlign 列的定宽（取本列所有行展示文本的最大像素宽）
 const getMeasureAlignWidth = <T extends AnyObject>(
   column: ColumnType<T>,
@@ -65,6 +86,7 @@ interface UseTableColumnsParams<T extends AnyObject> {
   bordered?: boolean;
   rowSelection?: TableRowSelection<T>;
   expandable?: TableProps<T>["expandable"];
+  tdPadding?: string;
 }
 
 const useTableColumns = <T extends AnyObject>(
@@ -94,6 +116,7 @@ const useTableColumns = <T extends AnyObject>(
     bordered,
     rowSelection,
     expandable,
+    tdPadding,
   } = params;
   const { checkPermission } = usePermissions();
   const [tableWidth, setTableWidth] = useState<number | null>(null);
@@ -171,7 +194,7 @@ const useTableColumns = <T extends AnyObject>(
           if (measured > 0) {
             item.width = Math.max(
               item.width,
-              measured + MEASURE_ALIGN_CELL_PADDING_PX
+              measured + getCellHorizontalPadding(tdPadding)
             );
           }
         }
@@ -190,7 +213,7 @@ const useTableColumns = <T extends AnyObject>(
       });
 
     return newColumns;
-  }, [autoWidth, columns, dataSource, checkPermission, scroll]);
+  }, [autoWidth, columns, dataSource, checkPermission, scroll, tdPadding]);
 
   // 渲染列标题
   const renderColumnTitle = useCallback(

package/src/components/Table/index.md

@@ -82,6 +82,8 @@ export default () => (
 | measureAlign | 开启定宽右对齐（配合列 `align: "center"` 使用） | `boolean` | - |
 | measureText | 测量宽度所用文本；当单元格由 `render` 产出复合/JSX 内容时，用它提供与展示一致的文本（默认取 `dataIndex` 原始值） | `(record) => string` | - |
 
+- 列宽自适应：声明的 `width` 只作下限——实际列宽会按「本列最宽内容块的测量宽 + 单元格左右内边距」自动抬升，出现超长值（如 `+3357.52%`）时内容不会被声明宽度截断。
+
 > 注意：不适用于 `render` 返回 `{ children, rowSpan }` 这类合并单元格场景。
 
 > 另导出 `TableDrag`，用于行拖拽排序场景。

package/src/components/Table/index.tsx

@@ -222,6 +222,7 @@ const Table: TableFC = <T extends AnyObject>(props: TableProps<T>) => {
     bordered,
     rowSelection,
     expandable,
+    tdPadding,
   });
 
   useSetTableHeight({

package/src/components/TextEllipsis/index.md

@@ -37,7 +37,7 @@ export default () => (
 | --- | --- | --- | --- |
 | children | 要显示的文本内容 | `ReactNode` | - |
 | width | 容器宽度，用于计算 Tooltip 宽度 | `number \| string` | - |
-| tooltipConfig | Tooltip 配置（可附加 `defaultWidth`） | `Omit<TooltipProps, 'title' \| 'children'> & { defaultWidth?: number }` | - |
+| tooltipConfig | Tooltip 配置（可附加 `defaultWidth`：容器实际宽度实测不到时的兜底宽） | `Omit<TooltipProps, 'title' \| 'children'> & { defaultWidth?: number }` | - |
 | disabled | 是否禁用 Tooltip（即使溢出也不显示） | `boolean` | `false` |
 | ellipsisPosition | 省略号位置，`start` 省略前面，`end` 省略后面 | `'start' \| 'end'` | `'end'` |
 | style | 文本自定义样式 | `React.CSSProperties` | - |

package/src/components/TextEllipsis/index.tsx

@@ -45,6 +45,8 @@ const TextEllipsis: React.FC<TextEllipsisProps> = ({
   const measureRef = useRef<HTMLSpanElement>(null);
   const [isOverflow, setIsOverflow] = useState(false);
   const [truncatedText, setTruncatedText] = useState<ReactNode>(children);
+  // 容器实际渲染宽度：未声明 width 时（如表格列宽动态分配）作为 Tooltip 宽度
+  const [measuredWidth, setMeasuredWidth] = useState(0);
 
   useEffect(() => {
     const element = textRef.current;
@@ -105,29 +107,42 @@ const TextEllipsis: React.FC<TextEllipsisProps> = ({
     };
 
     const textContent = getTextContent(children);
-    const isTextOverflow =
-      element.scrollWidth > element.clientWidth ||
-      element.scrollHeight > element.clientHeight;
-
-    setIsOverflow(isTextOverflow);
-
-    // 如果是省略前面且文本溢出，需要计算截断后的文本
-    if (ellipsisPosition === "start" && isTextOverflow && textContent) {
-      const maxWidth = element.clientWidth;
-      const truncated = calculateTruncatedText(textContent, maxWidth);
-      setTruncatedText(truncated);
-    } else {
-      setTruncatedText(children);
-    }
+
+    const update = () => {
+      const isTextOverflow =
+        element.scrollWidth > element.clientWidth ||
+        element.scrollHeight > element.clientHeight;
+
+      setIsOverflow(isTextOverflow);
+      setMeasuredWidth(element.clientWidth);
+
+      // 如果是省略前面且文本溢出，需要计算截断后的文本
+      if (ellipsisPosition === "start" && isTextOverflow && textContent) {
+        const maxWidth = element.clientWidth;
+        const truncated = calculateTruncatedText(textContent, maxWidth);
+        setTruncatedText(truncated);
+      } else {
+        setTruncatedText(children);
+      }
+    };
+
+    update();
+
+    // 容器宽度动态变化（如表格列宽重分配、窗口 resize）时重测溢出与宽度
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(element);
+    return () => resizeObserver.disconnect();
   }, [children, ellipsisPosition, style]);
 
-  // 计算 Tooltip 的宽度
+  // 计算 Tooltip 的宽度：显式 width 优先；未声明（或百分比）时用容器实际渲染宽度，
+  // 实测不到再回退 defaultWidth
   const getTooltipWidth = () => {
     const defaultWidth = tooltipConfig?.defaultWidth ?? DEFAULT_TOOLTIP_WIDTH;
-    if (!width) return defaultWidth;
+    const dynamicWidth = measuredWidth > 0 ? measuredWidth : defaultWidth;
+    if (!width) return dynamicWidth;
     if (typeof width === "number") return width;
-    if (typeof width === "string" && width.includes("%")) return defaultWidth;
-    return parseInt(width) || defaultWidth;
+    if (typeof width === "string" && width.includes("%")) return dynamicWidth;
+    return parseInt(width) || dynamicWidth;
   };
 
   const tooltipWidth = getTooltipWidth();