@zat-design/sisyphus-react 3.13.1-beta.3 → 3.13.1-beta.5

package/es/ProForm/propsType.d.ts

@@ -65,6 +65,10 @@ export interface ProFormType<Values = any> extends FormProps<Values> {
     /** 全局控制优先 */
     globalControl?: boolean;
     mode?: ModeEnum;
+    /**
+     * 如果有formKey，则会在全局中查找或创建表单实例
+     * 可以不需要手动传入form实例 且formKey的优先级高于form
+     */
     formKey?: string;
     /** 是否查看 */
     isView?: boolean;

package/es/ProTable/components/RenderColumn/index.js

@@ -7,12 +7,13 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "antd/es/typography/style";
 import _Typography from "antd/es/typography";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
 import { useSetState } from 'ahooks';
 import { isBoolean } from 'lodash';
 import classNames from 'classnames';
 import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
-import { getPadding } from '../../utils';
+import { getPadding, parseWidth } from '../../utils';
 import { isEmpty } from '../../../utils';
 import copySvg from '../../../assets/copy.svg';
 var Paragraph = _Typography.Paragraph,
@@ -32,12 +33,26 @@ var RenderColumn = function RenderColumn(props) {
     minWidth = props.minWidth,
     isInNewRowFlag = props.isInNewRowFlag,
     scroll = props.scroll;
+  var textRef = useRef(null);
   var _useSetState = useSetState({
       tooltip: false
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
+  // 计算并更新宽度
+  var updateCalculatedWidth = function updateCalculatedWidth(element) {
+    if (!element) return null;
+    if (!textRef.current) return;
+    // 使用closest方法查找最近的tr
+    var tr = element.closest('tr');
+    if (!tr) return;
+    // 获取tr的宽度
+    var trWidth = tr.getBoundingClientRect().width;
+    // 计算实际宽度
+    var newWidth = parseWidth(width, trWidth);
+    return newWidth;
+  };
   var cellDiffCls = classNames({
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
@@ -96,6 +111,9 @@ var RenderColumn = function RenderColumn(props) {
         if (ellipsis) {
           return _jsx(_Tooltip, _objectSpread(_objectSpread({
             title: currentValue,
+            getTooltipContainer: function getTooltipContainer() {
+              return document.body;
+            },
             onOpenChange: function onOpenChange(open) {
               setState({
                 tooltip: false
@@ -198,9 +216,13 @@ var RenderColumn = function RenderColumn(props) {
         children: "-"
       });
     }
+    var calculatedWidth = updateCalculatedWidth(textRef.current);
     return _jsx(_Tooltip, _objectSpread(_objectSpread({
       title: value,
-      onOpenChange: function onOpenChange(open) {
+      getTooltipContainer: function getTooltipContainer() {
+        return document.body;
+      },
+      onOpenChange: function onOpenChange() {
         setState({
           tooltip: false
         });
@@ -208,8 +230,9 @@ var RenderColumn = function RenderColumn(props) {
       open: tooltip
     }, tooltipProps), {}, {
       children: _jsx(Text, {
+        ref: textRef,
         style: {
-          width: width,
+          width: calculatedWidth,
           minWidth: minWidth
         },
         ellipsis: true,

package/es/ProTable/utils/index.d.ts

@@ -41,3 +41,5 @@ export declare const getPadding: (el: HTMLElement) => {
 };
 /** 判断是有值的对象 */
 export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;
+/** 解析宽度值 */
+export declare const parseWidth: (widthValue: number | string | undefined, trWidth: number) => number;

package/es/ProTable/utils/index.js

@@ -105,4 +105,24 @@ export var getPadding = function getPadding(el) {
 /** 判断是有值的对象 */
 export var isNonEmptyObject = function isNonEmptyObject(obj) {
   return obj !== null && _typeof(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;
+};
+/** 解析宽度值 */
+export var parseWidth = function parseWidth(widthValue, trWidth) {
+  // 如果是数字，直接返回
+  if (typeof widthValue === 'number') return widthValue;
+  // 如果是字符串，检查是否是百分比
+  if (typeof widthValue === 'string') {
+    if (widthValue.endsWith('%')) {
+      // 计算百分比
+      var percentage = parseFloat(widthValue) / 100;
+      return Math.max(trWidth * percentage, 0);
+    }
+    // 尝试解析为数字（处理如'300px'这样的情况）
+    var numericValue = parseFloat(widthValue);
+    if (!Number.isNaN(numericValue)) {
+      return numericValue;
+    }
+  }
+  // 所有其他情况，返回默认值
+  return null;
 };

package/es/ProTooltip/index.d.ts

@@ -1,4 +1,3 @@
 import type { ProTooltipType } from './propsType';
-import './style/index.less';
 declare const ProTooltip: (props: ProTooltipType) => import("react/jsx-runtime").JSX.Element;
 export default ProTooltip;

package/es/ProTooltip/index.js

@@ -4,32 +4,31 @@ import "antd/es/tooltip/style";
 import _Tooltip from "antd/es/tooltip";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["text", "mode", "width", "line", "isResponsiveWidth", "className", "style", "lineHeight"];
+var _excluded = ["text", "mode", "width", "line", "className", "style", "lineHeight", "scrollFollowParent"];
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useSize, useSetState, useDebounce, useDebounceEffect } from 'ahooks';
+import { useSize, useSetState, useDebounce } from 'ahooks';
 import { useEffect, useRef } from 'react';
 import classnames from 'classnames';
-import './style/index.less';
+import { isEllipsisActive } from '../utils';
 var ProTooltip = function ProTooltip(props) {
-  var _useSize;
+  var _useSize, _parentElement$tagNam;
   var ref = useRef();
   var childRef = useRef();
   var contentWrapRef = useRef();
   var text = props.text,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'default' : _props$mode,
-    _props$width = props.width,
-    width = _props$width === void 0 ? '120px' : _props$width,
+    width = props.width,
     _props$line = props.line,
     line = _props$line === void 0 ? 1 : _props$line,
-    _props$isResponsiveWi = props.isResponsiveWidth,
-    isResponsiveWidth = _props$isResponsiveWi === void 0 ? false : _props$isResponsiveWi,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
     _props$lineHeight = props.lineHeight,
     lineHeight = _props$lineHeight === void 0 ? 22 : _props$lineHeight,
+    _props$scrollFollowPa = props.scrollFollowParent,
+    scrollFollowParent = _props$scrollFollowPa === void 0 ? true : _props$scrollFollowPa,
     restProps = _objectWithoutProperties(props, _excluded);
   var _width = mode === 'auto' ? 'auto' : width;
   var content = text !== null && text !== void 0 ? text : '-';
@@ -59,6 +58,7 @@ var ProTooltip = function ProTooltip(props) {
   });
   var _ref = (_useSize = useSize(localElement)) !== null && _useSize !== void 0 ? _useSize : {},
     _localSizeWidth = _ref.width;
+  var isTable = (parentElement === null || parentElement === void 0 ? void 0 : (_parentElement$tagNam = parentElement.tagName) === null || _parentElement$tagNam === void 0 ? void 0 : _parentElement$tagNam.toLowerCase()) === 'td';
   var overlayStyle = mode === 'auto' ? {
     maxWidth: _localSizeWidth
   } : {};
@@ -141,23 +141,6 @@ var ProTooltip = function ProTooltip(props) {
     }
     return line > 1 ? _jsx(AutoMixinMulti, {}) : _jsx(AutoMixinSingle, {});
   };
-  useDebounceEffect(function () {
-    if (isResponsiveWidth && parentElement) {
-      var cWidth = parentElement.clientWidth - 32;
-      var contentDom = childRef.current;
-      setState({
-        isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth,
-        localWidth: cWidth
-      });
-    }
-    if (!isResponsiveWidth) {
-      setState({
-        localWidth: _width
-      });
-    }
-  }, [isResponsiveWidth, size], {
-    wait: 300
-  });
   useEffect(function () {
     if (mode === 'auto' && line === 1) {
       var localDom = ref.current;
@@ -237,57 +220,63 @@ var ProTooltip = function ProTooltip(props) {
   }, [debouncedValue]);
   useEffect(function () {
     var localDom = ref.current;
-    var contentDom = childRef.current;
+    var isEllipsis = isEllipsisActive(childRef === null || childRef === void 0 ? void 0 : childRef.current);
     setState({
       parentElement: localDom.parentElement,
-      isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth
+      isShowToolTip: isEllipsis
     });
   }, []);
   var cls = classnames(_defineProperty({
     'pro-tooltip': true
   }, "".concat(className), className));
-  return _jsx("div", {
-    className: cls,
-    ref: ref,
-    style: _objectSpread(_objectSpread(_objectSpread({}, style), multiStyle), {}, {
-      width: localWidth
-    }),
-    children: isResponsiveWidth && isShowToolTip ? _jsx(_Tooltip, _objectSpread(_objectSpread({
-      title: text,
-      getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
-      }
-    }, restProps), {}, {
-      children: _jsx("div", {
-        className: isMultiLine ? 'multiLine' : 'singleLine',
-        style: _objectSpread(_objectSpread({}, multiStyle), {}, {
-          width: localWidth
-        }),
-        ref: childRef,
-        children: content
-      })
-    })) : isResponsiveWidth ? _jsx("div", {
+  var renderContentBox = function renderContentBox() {
+    return _jsx("div", {
       className: isMultiLine ? 'multiLine' : 'singleLine',
       style: _objectSpread(_objectSpread({}, multiStyle), {}, {
         width: localWidth
       }),
       ref: childRef,
       children: content
-    }) : mode === 'default' ? _jsx(_Tooltip, _objectSpread(_objectSpread({
+    });
+  };
+  var renderTooltipContent = function renderTooltipContent() {
+    return _jsx(_Tooltip, _objectSpread(_objectSpread({
       title: text,
       getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
+        // 修复scrollFollowParent为false时tooltip不显示的问题
+        // 当scrollFollowParent为false时，应该返回document.body而不是triggerNode本身
+        return scrollFollowParent ? triggerNode.parentNode : document.body;
       }
     }, restProps), {}, {
-      children: _jsx("div", {
-        className: isMultiLine ? 'multiLine' : 'singleLine',
-        style: _objectSpread(_objectSpread({}, multiStyle), {}, {
-          width: localWidth
-        }),
-        ref: childRef,
-        children: content
-      })
-    })) : _jsx(AutoMixin, {})
+      overlayStyle: mode === 'auto' ? overlayStyle : {},
+      children: renderContentBox()
+    }));
+  };
+  var renderContent = function renderContent() {
+    // 自动模式使用专门的渲染逻辑
+    if (mode === 'auto') {
+      return _jsx(AutoMixin, {});
+    }
+    // 响应式宽度模式，根据是否需要显示tooltip决定渲染内容 且 父元素为table
+    if (isTable) {
+      if (isShowToolTip) {
+        return renderTooltipContent();
+      }
+      return renderContentBox();
+    }
+    // 默认模式始终显示tooltip
+    if (mode === 'default') {
+      return renderTooltipContent();
+    }
+    return renderContentBox();
+  };
+  return _jsx("div", {
+    className: cls,
+    ref: ref,
+    style: _objectSpread(_objectSpread(_objectSpread({}, style), multiStyle), {}, {
+      width: localWidth
+    }),
+    children: renderContent()
   });
 };
 export default ProTooltip;

package/es/ProTooltip/propsType.d.ts

@@ -19,11 +19,11 @@ export interface ProTooltipType {
      */
     line?: number;
     /**
-     * 是否响应式宽度
-     * @description 启用后提示框宽度将根据内容自适应
-     * @default false
+     * 是否跟随父元素滚动
+     * @description 启用后，提示框将跟随父元素滚动
+     * @default true
      */
-    isResponsiveWidth?: Boolean;
+    scrollFollowParent?: boolean;
     /**
      * 自定义类名
      * @description 额外的CSS类名

package/es/utils/index.d.ts

@@ -3,4 +3,12 @@
  * 空值 或者 仅包含空值的数组视为空
  */
 export declare const isEmpty: (value: any, emptyValue?: string) => boolean;
+/**
+ * 判断一个元素是否触发了省略号（文本溢出）
+ * 如果元素设置为单行（white-space: nowrap）则比较 scrollWidth 与 clientWidth，
+ * 如果是多行文本（例如使用 -webkit-line-clamp 实现多行截断）则比较 scrollHeight 与 clientHeight。
+ * @param {HTMLElement} element 要检测的元素
+ * @returns {boolean} 如果内容溢出返回 true，否则返回 false
+ */
+export declare const isEllipsisActive: (element: Element) => boolean;
 export declare const useFocus: (element: Element) => boolean;

package/es/utils/index.js

@@ -19,6 +19,23 @@ export var isEmpty = function isEmpty(value, emptyValue) {
   }
   return false;
 };
+/**
+ * 判断一个元素是否触发了省略号（文本溢出）
+ * 如果元素设置为单行（white-space: nowrap）则比较 scrollWidth 与 clientWidth，
+ * 如果是多行文本（例如使用 -webkit-line-clamp 实现多行截断）则比较 scrollHeight 与 clientHeight。
+ * @param {HTMLElement} element 要检测的元素
+ * @returns {boolean} 如果内容溢出返回 true，否则返回 false
+ */
+export var isEllipsisActive = function isEllipsisActive(element) {
+  if (!element) return false;
+  var computedStyle = window.getComputedStyle(element);
+  // 如果使用单行显示（nowrap），则判断宽度是否足够
+  if (computedStyle.whiteSpace === 'nowrap') {
+    return element.scrollWidth > element.clientWidth;
+  }
+  // 多行情况下，判断高度是否足够
+  return element.scrollHeight > element.clientHeight;
+};
 export var useFocus = function useFocus(element) {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/ProForm/propsType.d.ts

@@ -65,6 +65,10 @@ export interface ProFormType<Values = any> extends FormProps<Values> {
     /** 全局控制优先 */
     globalControl?: boolean;
     mode?: ModeEnum;
+    /**
+     * 如果有formKey，则会在全局中查找或创建表单实例
+     * 可以不需要手动传入form实例 且formKey的优先级高于form
+     */
     formKey?: string;
     /** 是否查看 */
     isView?: boolean;

package/lib/ProTable/components/RenderColumn/index.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _jsxRuntime = require("react/jsx-runtime");
+var _react = require("react");
 var _antd = require("antd");
 var _ahooks = require("ahooks");
 var _lodash = require("lodash");
@@ -34,12 +35,26 @@ var RenderColumn = function RenderColumn(props) {
     minWidth = props.minWidth,
     isInNewRowFlag = props.isInNewRowFlag,
     scroll = props.scroll;
+  var textRef = (0, _react.useRef)(null);
   var _useSetState = (0, _ahooks.useSetState)({
       tooltip: false
     }),
     _useSetState2 = (0, _slicedToArray2.default)(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
+  // 计算并更新宽度
+  var updateCalculatedWidth = function updateCalculatedWidth(element) {
+    if (!element) return null;
+    if (!textRef.current) return;
+    // 使用closest方法查找最近的tr
+    var tr = element.closest('tr');
+    if (!tr) return;
+    // 获取tr的宽度
+    var trWidth = tr.getBoundingClientRect().width;
+    // 计算实际宽度
+    var newWidth = (0, _utils.parseWidth)(width, trWidth);
+    return newWidth;
+  };
   var cellDiffCls = (0, _classnames.default)({
     'varied-cell': props === null || props === void 0 ? void 0 : props.isChanged,
     'add-cell': props === null || props === void 0 ? void 0 : props.isAddCell
@@ -98,6 +113,9 @@ var RenderColumn = function RenderColumn(props) {
         if (ellipsis) {
           return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
             title: currentValue,
+            getTooltipContainer: function getTooltipContainer() {
+              return document.body;
+            },
             onOpenChange: function onOpenChange(open) {
               setState({
                 tooltip: false
@@ -200,9 +218,13 @@ var RenderColumn = function RenderColumn(props) {
         children: "-"
       });
     }
+    var calculatedWidth = updateCalculatedWidth(textRef.current);
     return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       title: value,
-      onOpenChange: function onOpenChange(open) {
+      getTooltipContainer: function getTooltipContainer() {
+        return document.body;
+      },
+      onOpenChange: function onOpenChange() {
         setState({
           tooltip: false
         });
@@ -210,8 +232,9 @@ var RenderColumn = function RenderColumn(props) {
       open: tooltip
     }, tooltipProps), {}, {
       children: (0, _jsxRuntime.jsx)(Text, {
+        ref: textRef,
         style: {
-          width: width,
+          width: calculatedWidth,
           minWidth: minWidth
         },
         ellipsis: true,

package/lib/ProTable/utils/index.d.ts

@@ -41,3 +41,5 @@ export declare const getPadding: (el: HTMLElement) => {
 };
 /** 判断是有值的对象 */
 export declare const isNonEmptyObject: (obj: any) => obj is Record<string, any>;
+/** 解析宽度值 */
+export declare const parseWidth: (widthValue: number | string | undefined, trWidth: number) => number;

package/lib/ProTable/utils/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.removeEmptyKeys = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getPadding = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
+exports.removeEmptyKeys = exports.parseWidth = exports.isNonEmptyObject = exports.isListResult = exports.getRowKey = exports.getPadding = exports.getOriginalValue = exports.getDecimalDigits = exports.getColumnDataIndex = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _lodash = require("lodash");
@@ -112,4 +112,24 @@ var getPadding = exports.getPadding = function getPadding(el) {
 /** 判断是有值的对象 */
 var isNonEmptyObject = exports.isNonEmptyObject = function isNonEmptyObject(obj) {
   return obj !== null && (0, _typeof2.default)(obj) === 'object' && !Array.isArray(obj) && Object.keys(obj).length > 0;
+};
+/** 解析宽度值 */
+var parseWidth = exports.parseWidth = function parseWidth(widthValue, trWidth) {
+  // 如果是数字，直接返回
+  if (typeof widthValue === 'number') return widthValue;
+  // 如果是字符串，检查是否是百分比
+  if (typeof widthValue === 'string') {
+    if (widthValue.endsWith('%')) {
+      // 计算百分比
+      var percentage = parseFloat(widthValue) / 100;
+      return Math.max(trWidth * percentage, 0);
+    }
+    // 尝试解析为数字（处理如'300px'这样的情况）
+    var numericValue = parseFloat(widthValue);
+    if (!Number.isNaN(numericValue)) {
+      return numericValue;
+    }
+  }
+  // 所有其他情况，返回默认值
+  return null;
 };

package/lib/ProTooltip/index.d.ts

@@ -1,4 +1,3 @@
 import type { ProTooltipType } from './propsType';
-import './style/index.less';
 declare const ProTooltip: (props: ProTooltipType) => import("react/jsx-runtime").JSX.Element;
 export default ProTooltip;

package/lib/ProTooltip/index.js

@@ -14,28 +14,27 @@ var _ahooks = require("ahooks");
 var _antd = require("antd");
 var _react = require("react");
 var _classnames2 = _interopRequireDefault(require("classnames"));
-require("./style/index.less");
-var _excluded = ["text", "mode", "width", "line", "isResponsiveWidth", "className", "style", "lineHeight"];
+var _utils = require("../utils");
+var _excluded = ["text", "mode", "width", "line", "className", "style", "lineHeight", "scrollFollowParent"];
 var ProTooltip = function ProTooltip(props) {
-  var _useSize;
+  var _useSize, _parentElement$tagNam;
   var ref = (0, _react.useRef)();
   var childRef = (0, _react.useRef)();
   var contentWrapRef = (0, _react.useRef)();
   var text = props.text,
     _props$mode = props.mode,
     mode = _props$mode === void 0 ? 'default' : _props$mode,
-    _props$width = props.width,
-    width = _props$width === void 0 ? '120px' : _props$width,
+    width = props.width,
     _props$line = props.line,
     line = _props$line === void 0 ? 1 : _props$line,
-    _props$isResponsiveWi = props.isResponsiveWidth,
-    isResponsiveWidth = _props$isResponsiveWi === void 0 ? false : _props$isResponsiveWi,
     _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
     _props$style = props.style,
     style = _props$style === void 0 ? {} : _props$style,
     _props$lineHeight = props.lineHeight,
     lineHeight = _props$lineHeight === void 0 ? 22 : _props$lineHeight,
+    _props$scrollFollowPa = props.scrollFollowParent,
+    scrollFollowParent = _props$scrollFollowPa === void 0 ? true : _props$scrollFollowPa,
     restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var _width = mode === 'auto' ? 'auto' : width;
   var content = text !== null && text !== void 0 ? text : '-';
@@ -65,6 +64,7 @@ var ProTooltip = function ProTooltip(props) {
   });
   var _ref = (_useSize = (0, _ahooks.useSize)(localElement)) !== null && _useSize !== void 0 ? _useSize : {},
     _localSizeWidth = _ref.width;
+  var isTable = (parentElement === null || parentElement === void 0 ? void 0 : (_parentElement$tagNam = parentElement.tagName) === null || _parentElement$tagNam === void 0 ? void 0 : _parentElement$tagNam.toLowerCase()) === 'td';
   var overlayStyle = mode === 'auto' ? {
     maxWidth: _localSizeWidth
   } : {};
@@ -147,23 +147,6 @@ var ProTooltip = function ProTooltip(props) {
     }
     return line > 1 ? (0, _jsxRuntime.jsx)(AutoMixinMulti, {}) : (0, _jsxRuntime.jsx)(AutoMixinSingle, {});
   };
-  (0, _ahooks.useDebounceEffect)(function () {
-    if (isResponsiveWidth && parentElement) {
-      var cWidth = parentElement.clientWidth - 32;
-      var contentDom = childRef.current;
-      setState({
-        isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth,
-        localWidth: cWidth
-      });
-    }
-    if (!isResponsiveWidth) {
-      setState({
-        localWidth: _width
-      });
-    }
-  }, [isResponsiveWidth, size], {
-    wait: 300
-  });
   (0, _react.useEffect)(function () {
     if (mode === 'auto' && line === 1) {
       var localDom = ref.current;
@@ -243,57 +226,63 @@ var ProTooltip = function ProTooltip(props) {
   }, [debouncedValue]);
   (0, _react.useEffect)(function () {
     var localDom = ref.current;
-    var contentDom = childRef.current;
+    var isEllipsis = (0, _utils.isEllipsisActive)(childRef === null || childRef === void 0 ? void 0 : childRef.current);
     setState({
       parentElement: localDom.parentElement,
-      isShowToolTip: contentDom.scrollWidth > contentDom.offsetWidth
+      isShowToolTip: isEllipsis
     });
   }, []);
   var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
     'pro-tooltip': true
   }, "".concat(className), className));
-  return (0, _jsxRuntime.jsx)("div", {
-    className: cls,
-    ref: ref,
-    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), multiStyle), {}, {
-      width: localWidth
-    }),
-    children: isResponsiveWidth && isShowToolTip ? (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      title: text,
-      getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
-      }
-    }, restProps), {}, {
-      children: (0, _jsxRuntime.jsx)("div", {
-        className: isMultiLine ? 'multiLine' : 'singleLine',
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, multiStyle), {}, {
-          width: localWidth
-        }),
-        ref: childRef,
-        children: content
-      })
-    })) : isResponsiveWidth ? (0, _jsxRuntime.jsx)("div", {
+  var renderContentBox = function renderContentBox() {
+    return (0, _jsxRuntime.jsx)("div", {
       className: isMultiLine ? 'multiLine' : 'singleLine',
       style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, multiStyle), {}, {
         width: localWidth
       }),
       ref: childRef,
       children: content
-    }) : mode === 'default' ? (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    });
+  };
+  var renderTooltipContent = function renderTooltipContent() {
+    return (0, _jsxRuntime.jsx)(_antd.Tooltip, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       title: text,
       getPopupContainer: function getPopupContainer(triggerNode) {
-        return triggerNode.parentNode;
+        // 修复scrollFollowParent为false时tooltip不显示的问题
+        // 当scrollFollowParent为false时，应该返回document.body而不是triggerNode本身
+        return scrollFollowParent ? triggerNode.parentNode : document.body;
       }
     }, restProps), {}, {
-      children: (0, _jsxRuntime.jsx)("div", {
-        className: isMultiLine ? 'multiLine' : 'singleLine',
-        style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, multiStyle), {}, {
-          width: localWidth
-        }),
-        ref: childRef,
-        children: content
-      })
-    })) : (0, _jsxRuntime.jsx)(AutoMixin, {})
+      overlayStyle: mode === 'auto' ? overlayStyle : {},
+      children: renderContentBox()
+    }));
+  };
+  var renderContent = function renderContent() {
+    // 自动模式使用专门的渲染逻辑
+    if (mode === 'auto') {
+      return (0, _jsxRuntime.jsx)(AutoMixin, {});
+    }
+    // 响应式宽度模式，根据是否需要显示tooltip决定渲染内容 且 父元素为table
+    if (isTable) {
+      if (isShowToolTip) {
+        return renderTooltipContent();
+      }
+      return renderContentBox();
+    }
+    // 默认模式始终显示tooltip
+    if (mode === 'default') {
+      return renderTooltipContent();
+    }
+    return renderContentBox();
+  };
+  return (0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    ref: ref,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), multiStyle), {}, {
+      width: localWidth
+    }),
+    children: renderContent()
   });
 };
 var _default = exports.default = ProTooltip;

package/lib/ProTooltip/propsType.d.ts

@@ -19,11 +19,11 @@ export interface ProTooltipType {
      */
     line?: number;
     /**
-     * 是否响应式宽度
-     * @description 启用后提示框宽度将根据内容自适应
-     * @default false
+     * 是否跟随父元素滚动
+     * @description 启用后，提示框将跟随父元素滚动
+     * @default true
      */
-    isResponsiveWidth?: Boolean;
+    scrollFollowParent?: boolean;
     /**
      * 自定义类名
      * @description 额外的CSS类名

package/lib/utils/index.d.ts

@@ -3,4 +3,12 @@
  * 空值 或者 仅包含空值的数组视为空
  */
 export declare const isEmpty: (value: any, emptyValue?: string) => boolean;
+/**
+ * 判断一个元素是否触发了省略号（文本溢出）
+ * 如果元素设置为单行（white-space: nowrap）则比较 scrollWidth 与 clientWidth，
+ * 如果是多行文本（例如使用 -webkit-line-clamp 实现多行截断）则比较 scrollHeight 与 clientHeight。
+ * @param {HTMLElement} element 要检测的元素
+ * @returns {boolean} 如果内容溢出返回 true，否则返回 false
+ */
+export declare const isEllipsisActive: (element: Element) => boolean;
 export declare const useFocus: (element: Element) => boolean;

package/lib/utils/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useFocus = exports.isEmpty = void 0;
+exports.useFocus = exports.isEmpty = exports.isEllipsisActive = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var EMPTY_VALUE = [undefined, null, ''];
@@ -26,6 +26,23 @@ var isEmpty = exports.isEmpty = function isEmpty(value, emptyValue) {
   }
   return false;
 };
+/**
+ * 判断一个元素是否触发了省略号（文本溢出）
+ * 如果元素设置为单行（white-space: nowrap）则比较 scrollWidth 与 clientWidth，
+ * 如果是多行文本（例如使用 -webkit-line-clamp 实现多行截断）则比较 scrollHeight 与 clientHeight。
+ * @param {HTMLElement} element 要检测的元素
+ * @returns {boolean} 如果内容溢出返回 true，否则返回 false
+ */
+var isEllipsisActive = exports.isEllipsisActive = function isEllipsisActive(element) {
+  if (!element) return false;
+  var computedStyle = window.getComputedStyle(element);
+  // 如果使用单行显示（nowrap），则判断宽度是否足够
+  if (computedStyle.whiteSpace === 'nowrap') {
+    return element.scrollWidth > element.clientWidth;
+  }
+  // 多行情况下，判断高度是否足够
+  return element.scrollHeight > element.clientHeight;
+};
 var useFocus = exports.useFocus = function useFocus(element) {
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.13.1-beta.3",
+  "version": "3.13.1-beta.5",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",