@zat-design/sisyphus-react 3.8.3-beta.9 → 3.9.0

package/.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+    "recommendations": [
+        "kisstkondoros.vscode-codemetrics"
+    ]
+}

package/dist/index.esm.css

@@ -2833,6 +2833,12 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
   display: unset;
   visibility: hidden;
 }
+.pro-form.pro-form-view .pro-group .ant-space-item,
+.pro-form.pro-form-view .pro-group .pro-form-view-container {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
 .pro-form.pro-form-view .ant-form-item-label label {
   color: var(--zaui-aide-text, #939599);
 }
@@ -3155,10 +3161,23 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
   background: var(--zaui-contract-bg-add, #d2fff4);
   border-radius: 4px;
 }
-.changed-tooltip .original-value-container .ant-space-item:nth-child(1) {
+.original-value-tootip {
+  max-width: 100%;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  z-index: 99;
+}
+.original-value-tootip .changed-tooltip .original-value-container .ant-space-item:nth-child(1) {
   white-space: nowrap;
 }
-.changed-tooltip .current-value-container .ant-space-item:nth-child(1) {
+.original-value-tootip .changed-tooltip .original-value-container .pro-group .ant-space-compact {
+  display: block;
+}
+.original-value-tootip .changed-tooltip .original-value-container .pro-group .pro-form-view-container {
+  word-break: keep-all;
+}
+.original-value-tootip .changed-tooltip .current-value-container .ant-space-item:nth-child(1) {
   white-space: nowrap;
 }
 .pro-upload .pro-upload-dragger .pro-upload-handle-box {
@@ -5631,7 +5650,7 @@ input[type='button'] {
           user-select: text;
 }
 .ant-table.ant-table-fixed-header .ant-table-tbody .ant-table-row:nth-child(even) td {
-  background: #ffffff !important;
+  background: #ffffff;
 }
 .ant-table.ant-table-fixed-header .ant-table-tbody .ant-table-row:nth-child(odd) {
   background-color: var(--zaui-table-strip-bg, #fafafa);

package/dist/less.esm.css

@@ -2833,6 +2833,12 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
   display: unset;
   visibility: hidden;
 }
+.pro-form.pro-form-view .pro-group .ant-space-item,
+.pro-form.pro-form-view .pro-group .pro-form-view-container {
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+}
 .pro-form.pro-form-view .ant-form-item-label label {
   color: var(--zaui-aide-text, #939599);
 }
@@ -3155,10 +3161,23 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
   background: var(--zaui-contract-bg-add, #d2fff4);
   border-radius: 4px;
 }
-.changed-tooltip .original-value-container .ant-space-item:nth-child(1) {
+.original-value-tootip {
+  max-width: 100%;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  z-index: 99;
+}
+.original-value-tootip .changed-tooltip .original-value-container .ant-space-item:nth-child(1) {
   white-space: nowrap;
 }
-.changed-tooltip .current-value-container .ant-space-item:nth-child(1) {
+.original-value-tootip .changed-tooltip .original-value-container .pro-group .ant-space-compact {
+  display: block;
+}
+.original-value-tootip .changed-tooltip .original-value-container .pro-group .pro-form-view-container {
+  word-break: keep-all;
+}
+.original-value-tootip .changed-tooltip .current-value-container .ant-space-item:nth-child(1) {
   white-space: nowrap;
 }
 .pro-upload .pro-upload-dragger .pro-upload-handle-box {

package/es/ProEditTable/components/RenderField/ListChangedWrapper.js

@@ -5,9 +5,9 @@ import _Tooltip from "antd/es/tooltip";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["name", "names", "namesStr", "originalName", "originalNames", "originalValues", "form", "equalWith", "rowKeyPath", "children", "type", "normalize", "getValueProps", "valuePropName", "viewRender"];
+var _excluded = ["name", "names", "namesStr", "originalName", "originalNames", "originalValues", "form", "equalWith", "rowKeyPath", "children", "type", "normalize", "getValueProps", "valuePropName", "viewRender", "diffConfig", "index"];
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useMemo } from 'react';
+import React, { useMemo, useRef } from 'react';
 import classNames from 'classnames';
 import { get } from 'lodash';
 import { diffOriginal } from '../../../ProForm/utils/diffOriginal';
@@ -34,6 +34,7 @@ var getOriginalValue = function getOriginalValue(_ref) {
   if (!originalValues) {
     return undefined;
   }
+  var originalValueRow;
   if (rowKeyPath) {
     var rowValueNamePath = namePath.slice(0, rowKeyPath.length - 1); // 表单中变动值所在行
     var rowKeyName = rowKeyPath[rowKeyPath.length - 1]; // rowKey在行内的name
@@ -42,7 +43,7 @@ var getOriginalValue = function getOriginalValue(_ref) {
     var keyValue = rowValue[rowKeyName]; // 获取表单中rowKey值
     if (!keyValue) return undefined;
     var originalValueList = get(originalValues, originalName.slice(0, rowKeyPath.length - 2));
-    var originalValueRow = originalValueList === null || originalValueList === void 0 ? void 0 : originalValueList.find(function (item) {
+    originalValueRow = originalValueList === null || originalValueList === void 0 ? void 0 : originalValueList.find(function (item) {
       return item[rowKeyPath[rowKeyPath.length - 1]] === keyValue;
     });
     var originalValue;
@@ -58,14 +59,21 @@ var getOriginalValue = function getOriginalValue(_ref) {
     } else {
       originalValue = get(originalValueRow, originalName.slice(rowKeyPath.length - 1));
     }
-    return originalValue;
+    return {
+      originalValue: originalValue,
+      originalValueRow: originalValueRow
+    };
   }
   // 这个方法是给editTable专用的  暂时不存在不传rowKey的情况
-  return (originalNames === null || originalNames === void 0 ? void 0 : originalNames.length) ? originalNames.map(function (originalName) {
-    return get(originalValues, originalName);
-  }) : get(originalValues, originalName);
+  return {
+    originalValue: (originalNames === null || originalNames === void 0 ? void 0 : originalNames.length) ? originalNames.map(function (originalName) {
+      return get(originalValues, originalName);
+    }) : get(originalValues, originalName),
+    originalValueRow: originalValueRow
+  };
 };
 var ListChangedWrapper = function ListChangedWrapper(props) {
+  var _diffConfig$toolTip, _children$props, _children$props2, _children$props3;
   var name = props.name,
     names = props.names,
     namesStr = props.namesStr,
@@ -84,21 +92,29 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
     _props$valuePropName = props.valuePropName,
     valuePropName = _props$valuePropName === void 0 ? 'value' : _props$valuePropName,
     viewRender = props.viewRender,
+    diffConfig = props.diffConfig,
+    index = props.index,
     rest = _objectWithoutProperties(props, _excluded);
   var _ref2 = useProConfig('ProEditTable') || {},
     isDiffAll = _ref2.isDiffAll;
+  var _ref3 = diffConfig || {},
+    _ref3$scrollFollowPar = _ref3.scrollFollowParent,
+    scrollFollowParent = _ref3$scrollFollowPar === void 0 ? true : _ref3$scrollFollowPar;
+  var contentRef = useRef(null);
   var namePath = toNamePath(namesStr || name);
   var originalNamePath = toNamePath(originalName);
   var originalNamePaths = originalNames && toNamePaths(originalNames);
+  var toolTip = (_diffConfig$toolTip = diffConfig === null || diffConfig === void 0 ? void 0 : diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
   var isWatch = Boolean(originalValues);
-  var originalValue = isWatch ? getOriginalValue({
+  var originalDTO = getOriginalValue({
     namePath: namePath,
     originalName: originalNamePath,
     originalNames: originalNamePaths,
     originalValues: originalValues,
     rowKeyPath: rowKeyPath,
     form: form
-  }) : undefined;
+  });
+  var originalValue = isWatch ? originalDTO === null || originalDTO === void 0 ? void 0 : originalDTO.originalValue : undefined;
   var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
   var diffType = useMemo(function () {
     if (!isWatch || noChange) return 'same';
@@ -116,12 +132,16 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
   var tipContent = useMemo(function () {
     var _getValueProps;
     if (!isWatch || noChange) return undefined;
-    var orgValue = getValueProps ? (_getValueProps = getValueProps(originalValue)) === null || _getValueProps === void 0 ? void 0 : _getValueProps[valuePropName] : originalValue;
+    var orgValue = getValueProps && !names ? (_getValueProps = getValueProps(originalValue)) === null || _getValueProps === void 0 ? void 0 : _getValueProps[valuePropName] : originalValue;
     // 兼容viewRender函数和Element场景
     var _children = children;
     if (viewRender) {
       if (! /*#__PURE__*/React.isValidElement(viewRender)) {
-        return viewRender(orgValue);
+        return viewRender(orgValue, (originalDTO === null || originalDTO === void 0 ? void 0 : originalDTO.originalValueRow) || {}, {
+          form: form,
+          name: name,
+          index: index
+        });
       }
       _children = viewRender;
     }
@@ -133,22 +153,51 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
   if (!isWatch || noChange) {
     return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // const isFocus = useFocus(contentRef.current);
+  var tipOpenCalc = function tipOpenCalc() {
+    if (!toolTip) return false;
+    // 传入undefined 鼠标移入显示移出隐藏
+    return isChanged ? undefined : false;
+  };
+  // @ts-ignore
+  var _showEllipse = ((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.showEllipse) || ((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.tooltip);
   var diffClassName = classNames({
     'pro-form-item-changed': isChanged,
     'pro-form-item-add': isAdd
   });
+  var open = tipOpenCalc();
   return _jsx(_Tooltip, {
-    // 传入undefined 鼠标移入显示移出隐藏
-    open: isChanged ? undefined : false,
-    getPopupContainer: function getPopupContainer(target) {
-      return target.parentElement;
+    open: open,
+    getPopupContainer: function getPopupContainer(trigger) {
+      return scrollFollowParent ? trigger.parentElement : document.body;
     },
+    overlayClassName: "original-value-tootip",
+    placement: "topLeft",
+    autoAdjustOverflow: false,
     title: _jsxs(_Space, {
-      children: ["\u521D\u59CB\u503C\uFF1A", tipContent]
+      direction: "vertical",
+      className: "changed-tooltip",
+      children: [_jsxs(_Space, {
+        align: "start",
+        className: "original-value-container",
+        children: ["\u521D\u59CB\u503C\uFF1A", tipContent]
+      }), _showEllipse && _jsxs(_Space, {
+        className: "current-value-container",
+        children: ["\u5F53\u524D\u503C\uFF1A", /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), rest), {}, {
+          isView: true,
+          scrollFollowParent: scrollFollowParent
+        })) : undefined]
+      })]
     }),
     children: _jsx("div", {
       className: diffClassName,
-      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
+      children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), rest), {}, {
+        scrollFollowParent: scrollFollowParent,
+        otherProps: _objectSpread(_objectSpread({}, (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.otherProps), {}, {
+          isDiffChange: isChanged
+        })
+      })) : undefined
     })
   });
 };

package/es/ProEditTable/components/RenderField/index.js

@@ -73,7 +73,8 @@ var RenderField = function RenderField(_ref) {
     rowDisabled = config.rowDisabled,
     _config$validateTrigg = config.validateTrigger,
     validateTrigger = _config$validateTrigg === void 0 ? ['onChange', 'onBlur', 'onSubmit'] : _config$validateTrigg,
-    otherProps = config.otherProps;
+    otherProps = config.otherProps,
+    diffConfig = config.diffConfig;
   var _fieldProps = fieldProps || formItemProps || {};
   var _rules = rules || [];
   var _required = required;
@@ -248,19 +249,13 @@ var RenderField = function RenderField(_ref) {
       TargetComponent = _editRender;
     }
   }
-  var viewRenderFun = function viewRenderFun(value) {
-    if (/*#__PURE__*/React.isValidElement(viewRender)) {
-      return viewRender;
-    }
-    return viewRender === null || viewRender === void 0 ? void 0 : viewRender(value, record, options);
-  };
   // 查看模式
   if (isView) {
     // 存在viewRender覆盖默认值
     if (typeof viewRender === 'function') {
       var _column$dataIndex;
       currentValue = (column === null || column === void 0 ? void 0 : (_column$dataIndex = column.dataIndex) === null || _column$dataIndex === void 0 ? void 0 : _column$dataIndex.includes('-')) ? value : currentValue;
-      var View = viewRenderFun(currentValue);
+      var View = viewRender(currentValue, record || {}, options);
       TargetComponent = _jsx(Container, {
         viewEmpty: viewEmpty,
         children: View
@@ -566,7 +561,9 @@ var RenderField = function RenderField(_ref) {
         valuePropName: _formItemProps.valuePropName,
         normalize: _formItemProps.normalize,
         getValueProps: _formItemProps.getValueProps,
-        viewRender: viewRender && viewRenderFun,
+        viewRender: viewRender,
+        diffConfig: diffConfig,
+        index: index,
         children: FieldComponent
       });
     }

package/es/ProEditTable/index.js

@@ -9,7 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["value", "onChange", "onDrag", "className", "columns", "type", "mode", "stripe", "draggable", "virtual", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "toolbarSticky", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "originalDiffTip", "rowKey", "rowDisabled", "rowDraggable", "footerRender", "scroll", "actionDirection"];
+var _excluded = ["value", "onChange", "onDrag", "className", "columns", "type", "mode", "stripe", "draggable", "virtual", "disabled", "insertType", "emptyBtnText", "actionWidth", "actionProps", "toolbarProps", "toolbarSticky", "rowSelection", "onlyOneLineMsg", "deletePoConfirmMsg", "mulDeletePoConfirmMsg", "requiredAlign", "summary", "max", "headerRender", "pagination", "originalValues", "rowKey", "rowDisabled", "rowDraggable", "footerRender", "scroll", "actionDirection", "diffConfig"];
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
 import { get, isArray, isBoolean } from 'lodash';
@@ -23,7 +23,7 @@ import Empty from '../assets/empty.png';
 import locale, { formatMessage } from '../locale';
 import { BaseTable, DraggableTable, VirtualTable } from './components/RcTable';
 var ProEditTable = function ProEditTable(_ref, ref) {
-  var _resetProps$id, _resetProps$id$split, _themeConfig$data2;
+  var _resetProps$id, _resetProps$id$split, _themeConfig$data2, _resetProps$otherProp;
   var value = _ref.value,
     onChange = _ref.onChange,
     onDrag = _ref.onDrag,
@@ -51,13 +51,13 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     headerRender = _ref.headerRender,
     pagination = _ref.pagination,
     originalValues = _ref.originalValues,
-    originalDiffTip = _ref.originalDiffTip,
     rowKey = _ref.rowKey,
     rowDisabled = _ref.rowDisabled,
     rowDraggable = _ref.rowDraggable,
     footerRender = _ref.footerRender,
     scroll = _ref.scroll,
     actionDirection = _ref.actionDirection,
+    diffConfig = _ref.diffConfig,
     resetProps = _objectWithoutProperties(_ref, _excluded);
   // 上下文form
   var contentForm = _Form.useFormInstance();
@@ -166,10 +166,10 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     tableLength: value === null || value === void 0 ? void 0 : value.length,
     page: page,
     originalValues: originalValues,
-    originalDiffTip: originalDiffTip,
     prefixCls: prefixCls,
     rowDisabled: rowDisabled,
-    actionDirection: actionDirection
+    actionDirection: actionDirection,
+    diffConfig: _objectSpread(_objectSpread({}, resetProps === null || resetProps === void 0 ? void 0 : (_resetProps$otherProp = resetProps.otherProps) === null || _resetProps$otherProp === void 0 ? void 0 : _resetProps$otherProp.diffConfig), diffConfig)
   }, resetProps);
   // 编辑行设置下样式
   var _rowClassName = function _rowClassName(record) {
@@ -274,8 +274,8 @@ var ProEditTable = function ProEditTable(_ref, ref) {
   var _columns = useMemo(function () {
     return transformColumns(columns, config);
   }, [valueChangeRef.current, disabled, forceUpdate, columns, page, actionProps, editingKeys, cellNamePath]);
-  useEffect(function () {
-    var _value$every, _originalArr$every;
+  var initDataSource = function initDataSource() {
+    var _value$every, _originalArr$every, _value$some, _originalArr$some;
     var isAllHasKey = value === null || value === void 0 ? void 0 : (_value$every = value.every) === null || _value$every === void 0 ? void 0 : _value$every.call(value, function (item) {
       return item.rowKey;
     });
@@ -284,8 +284,15 @@ var ProEditTable = function ProEditTable(_ref, ref) {
     var isOriginalAllHasKey = originalArr ? originalArr === null || originalArr === void 0 ? void 0 : (_originalArr$every = originalArr.every) === null || _originalArr$every === void 0 ? void 0 : _originalArr$every.call(originalArr, function (item) {
       return item.rowKey;
     }) : true;
+    // 检测当前rowkey是否与制定key的值是否一致，不一致，则执行覆盖
+    var isNeedCover = value === null || value === void 0 ? void 0 : (_value$some = value.some) === null || _value$some === void 0 ? void 0 : _value$some.call(value, function (item) {
+      return item.rowKey !== getRowKey(item);
+    });
+    var isNeedCoverOriginal = originalArr === null || originalArr === void 0 ? void 0 : (_originalArr$some = originalArr.some) === null || _originalArr$some === void 0 ? void 0 : _originalArr$some.call(originalArr, function (item) {
+      return item.rowKey !== getRowKey(item);
+    });
     // 初始化默认生成row-key
-    if ((value === null || value === void 0 ? void 0 : value.length) && !isAllHasKey || (originalArr === null || originalArr === void 0 ? void 0 : originalArr.length) && !isOriginalAllHasKey) {
+    if ((value === null || value === void 0 ? void 0 : value.length) && (!isAllHasKey || isNeedCover) || (originalArr === null || originalArr === void 0 ? void 0 : originalArr.length) && (!isOriginalAllHasKey || isNeedCoverOriginal)) {
       var _originalArr$forEach;
       var nextValues = value === null || value === void 0 ? void 0 : value.map(function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
@@ -300,6 +307,9 @@ var ProEditTable = function ProEditTable(_ref, ref) {
         form.setFieldValue(virtualRowName, nextValues);
       }
     }
+  };
+  useEffect(function () {
+    initDataSource();
   }, [value, originalValues]);
   useImperativeHandle((resetProps === null || resetProps === void 0 ? void 0 : resetProps.ref) || ref, function () {
     return {

package/es/ProEditTable/propsType.d.ts

@@ -138,11 +138,6 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
      * @description       原始数据源，是否tooltip显示
      * @default           -
      */
-    originalDiffTip?: boolean;
-    /**
-     * @description       可编辑表格的类型，单行、多行、单元格编辑
-     * @default           false
-     */
     mode?: 'single' | 'multiple' | 'cell';
     /**
      * @description       可编辑表格的类型，单行编辑或者多行编辑
@@ -275,4 +270,7 @@ export interface ProEditTableProps<T = any> extends Omit<TableProps<T>, 'onChang
     ref?: any;
     actionDirection?: 'vertical' | 'horizontal';
     validateTrigger?: string | string[];
+    diffConfig?: {
+        scrollFollowParent?: boolean;
+    };
 }

package/es/ProEditTable/style/index.less

@@ -284,7 +284,6 @@
   .is-new-row, .is-new-row.@{ant-prefix}-table-row:hover {
     td, .@{ant-prefix}-table-cell-row-hover {
       background: var(--zaui-contract-bg-add, #d2fff4) !important;
-      
     }
   }
 }

package/es/ProForm/components/base/InputNumber/index.js

@@ -286,7 +286,7 @@ var InputNumber = function InputNumber(props) {
     autoComplete: "off",
     placeholder: placeholder || "".concat(locale.ProForm.inputPlaceholder).concat(label !== null && label !== void 0 ? label : ''),
     className: _className
-  }, valueProps), initialConfig), rest), {}, {
+  }, initialConfig), valueProps), rest), {}, {
     onBlur: handleBlur,
     onFocus: handleFocus,
     min: _min,

package/es/ProForm/components/combination/Group/index.js

@@ -26,15 +26,14 @@ var Group = function Group(props) {
     value = props.value,
     onChange = props.onChange,
     otherProps = props.otherProps,
-    disabled = props.disabled,
-    id = props.id,
-    isView = props.isView;
+    id = props.id;
   var contextProps = ProForm.useFieldProps() || {};
   var names = contextProps.names,
     name = contextProps.name,
     form = contextProps.form,
     namePath = contextProps.namePath,
-    index = contextProps.index;
+    index = contextProps.index,
+    isView = contextProps.isView;
   var _option = React.useRef([]);
   // 组合onChange
   var handleChange = function handleChange(value, option, index) {

package/es/ProForm/components/combination/ProCascader/index.js

@@ -79,7 +79,7 @@ var ProCascader = function ProCascader(props) {
     code = _props$code === void 0 ? configCode : _props$code,
     tooltip = props.tooltip,
     _props$separator = props.separator,
-    separator = _props$separator === void 0 ? '' : _props$separator,
+    separator = _props$separator === void 0 ? '/' : _props$separator,
     detailPlaceholder = props.detailPlaceholder,
     otherProps = _objectWithoutProperties(props, _excluded);
   var _ref3 = ProForm.useFieldProps() || {},

package/es/ProForm/components/render/ChangedWrapper.js

@@ -29,11 +29,14 @@ var ChangedWrapper = function ChangedWrapper(props) {
     getValueProps = props.getValueProps,
     viewRender = props.viewRender,
     rest = _objectWithoutProperties(props, _excluded);
+  // const contentRef = useRef(null);
   var _useProConfig = useProConfig('ProForm'),
     isDiffAll = _useProConfig.isDiffAll;
   var originalValues = diffConfig.originalValues,
     changeTipColor = diffConfig.changeTipColor,
-    addTipColor = diffConfig.addTipColor;
+    addTipColor = diffConfig.addTipColor,
+    _diffConfig$scrollFol = diffConfig.scrollFollowParent,
+    scrollFollowParent = _diffConfig$scrollFol === void 0 ? true : _diffConfig$scrollFol;
   var toolTip = (_diffConfig$toolTip = diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
   var isWatch = toolTip && !['FormList', 'ProEditTable'].includes(type);
   var originalValue = (names === null || names === void 0 ? void 0 : names.length) ? names.map(function (name) {
@@ -54,9 +57,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
   var isAdd = diffType === 'add';
   var isChanged = diffType === 'changed';
   var viewRenderFun = useMemo(function () {
-    var record = form.getFieldsValue();
     return function (orgValue) {
-      return viewRender(orgValue, record, {
+      return viewRender(orgValue, originalValues, {
         form: form
       });
     };
@@ -78,27 +80,30 @@ var ChangedWrapper = function ChangedWrapper(props) {
       originalValues: isNestedField ? originalValues : undefined
     }, children.props), rest));
   }
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // const isFocus = useFocus(contentRef.current);
   var tipOpenCalc = function tipOpenCalc() {
     if (!toolTip) return false;
-    // 传入undefined 鼠标移入显示移出隐藏
+    // 传入undefined 鼠标移入显示移出隐藏 获得焦点时不显示气泡
     return isChanged ? undefined : false;
   };
   var style = {
     '--zaui-contract-bg': changeTipColor,
     '--zaui-contract-bg-add': addTipColor
   };
+  // @ts-ignore
+  var _showEllipse = ((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.showEllipse) || ((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.tooltip);
   var diffClassName = classNames({
     'pro-form-item-changed': isChanged,
     'pro-form-item-add': isAdd
   });
-  // @ts-ignore
-  var _showEllipse = ((_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.showEllipse) || ((_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.tooltip);
+  var open = tipOpenCalc();
   return _jsx(_Tooltip, {
-    open: tipOpenCalc(),
-    // mouseEnterDelay={1}
-    getPopupContainer: function getPopupContainer(target) {
-      return target.parentElement;
+    open: open,
+    getPopupContainer: function getPopupContainer(trigger) {
+      return scrollFollowParent ? trigger.parentElement : document.body;
     },
+    overlayClassName: "original-value-tootip",
     title: _jsxs(_Space, {
       direction: "vertical",
       className: "changed-tooltip",
@@ -109,6 +114,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
       }), _showEllipse && _jsxs(_Space, {
         className: "current-value-container",
         children: ["\u5F53\u524D\u503C\uFF1A", /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), rest), {}, {
+          scrollFollowParent: scrollFollowParent,
           isView: true
         })) : undefined]
       })]
@@ -118,6 +124,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
       className: diffClassName,
       style: style,
       children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread(_objectSpread({}, children.props), rest), {}, {
+        scrollFollowParent: scrollFollowParent,
         otherProps: _objectSpread(_objectSpread({}, (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.otherProps), {}, {
           isDiffChange: isChanged
         })

package/es/ProForm/propsType.d.ts

@@ -56,6 +56,8 @@ export interface DiffConfigProps<Values = any> {
     changeTipColor?: string;
     /** 新增提示颜色 */
     addTipColor?: string;
+    /** 是否跟随父组件滚动 */
+    scrollFollowParent?: string;
 }
 export interface ProFormProps<Values = any> extends FormProps<Values> {
     disabled?: boolean;

package/es/ProForm/style/index.less

@@ -53,6 +53,11 @@
   }
 
   &.pro-form-view {
+    .pro-group{
+      .@{ant-prefix}-space-item, .pro-form-view-container{
+        width: max-content;
+      }
+    }
     .@{ant-prefix}-form-item-label {
       label {
         color: var(--zaui-aide-text, #939599);
@@ -480,15 +485,29 @@
   }
 }
 
-.changed-tooltip {
-  .original-value-container {
-    .ant-space-item:nth-child(1) {
-      white-space: nowrap;
+.original-value-tootip{
+  max-width: 100%;
+  width: max-content;
+  z-index: 99;
+  .changed-tooltip {
+    .original-value-container {
+      .ant-space-item:nth-child(1) {
+        white-space: nowrap;
+      }
+      .pro-group{
+        .ant-space-compact{
+          display: block;
+        }
+        .pro-form-view-container{
+          word-break: keep-all;
+        }
+      }
     }
-  }
-  .current-value-container {
-    .ant-space-item:nth-child(1) {
-      white-space: nowrap;
+    .current-value-container {
+      .ant-space-item:nth-child(1) {
+        white-space: nowrap;
+      }
     }
   }
-}
+}
+