@zat-design/sisyphus-react 3.8.2 → 3.8.3-beta.10

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

@@ -5,20 +5,54 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { isValidElement } from 'react';
 import moment from 'moment';
 import classnames from 'classnames';
-import { isEqual, isFunction, isString } from 'lodash';
+import ReactDOM from 'react-dom';
+import { isEqual, isFunction, isString, isObject } from 'lodash';
 import { tools } from '@zat-design/utils';
 import TooltipTitle from '../TooltipTitle';
 import RenderColumn from '../RenderColumn';
 import { getDecimalDigits, getOriginalValue } from '../../utils';
 import getEnumLabel from '../../../ProEnum/utils/getEnumLabel';
 import ProForm from '../../../ProForm';
-export var formatColumn = function formatColumn(_ref) {
-  var column = _ref.column,
-    originalObj = _ref.originalObj,
-    dataSourceObj = _ref.dataSourceObj,
-    rowKey = _ref.rowKey,
-    diffToolTip = _ref.diffToolTip,
-    wrapToolTipProps = _ref.wrapToolTipProps;
+var isReactElement = function isReactElement(element) {
+  return /*#__PURE__*/isValidElement(element);
+};
+var calcMinWidth = function calcMinWidth(_ref) {
+  var minWidth = _ref.minWidth,
+    width = _ref.width,
+    title = _ref.title,
+    isMaxContentOverFlow = _ref.isMaxContentOverFlow,
+    callback = _ref.callback;
+  if (!minWidth && !width && isMaxContentOverFlow) {
+    var tempEl = document.createElement('div');
+    tempEl.style.display = 'inline-block';
+    document.body.appendChild(tempEl);
+    if (isFunction(title)) {
+      var component = title();
+      ReactDOM.render(component, tempEl);
+    } else if (isReactElement(title)) {
+      ReactDOM.render(title, tempEl);
+    } else {
+      tempEl.innerHTML = title;
+    }
+    // 使用 requestAnimationFrame 确保在下一个浏览器重绘周期中获取宽度
+    requestAnimationFrame(function () {
+      var _width = tempEl.offsetWidth;
+      ReactDOM.unmountComponentAtNode(tempEl);
+      tempEl.remove();
+      callback(_width);
+    });
+  }
+};
+export var formatColumn = function formatColumn(_ref2) {
+  var column = _ref2.column,
+    originalObj = _ref2.originalObj,
+    dataSourceObj = _ref2.dataSourceObj,
+    rowKey = _ref2.rowKey,
+    diffToolTip = _ref2.diffToolTip,
+    wrapToolTipProps = _ref2.wrapToolTipProps,
+    scroll = _ref2.scroll,
+    onUpdateMinWidth = _ref2.onUpdateMinWidth,
+    isInNewRow = _ref2.isInNewRow;
   var title = column.title,
     valueType = column.valueType,
     _column$format = column.format,
@@ -37,7 +71,18 @@ export var formatColumn = function formatColumn(_ref) {
     _column$originalDiffT = column.originalDiffTip,
     originalDiffTip = _column$originalDiffT === void 0 ? true : _column$originalDiffT,
     _column$toolTipProps = column.toolTipProps,
-    toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps;
+    toolTipProps = _column$toolTipProps === void 0 ? {} : _column$toolTipProps,
+    minWidth = column.minWidth,
+    onDiff = column.onDiff;
+  // 仅在 {x: 'max-content', y: 300 } 且 column无指定 width minWidth 情况下 才开启 minWidth的自动计算
+  var isMaxContentOverFlow = isObject(scroll) ? (scroll === null || scroll === void 0 ? void 0 : scroll.x) === 'max-content' && Reflect.ownKeys(scroll).includes('y') : false;
+  calcMinWidth({
+    minWidth: minWidth,
+    width: width,
+    title: title,
+    isMaxContentOverFlow: isMaxContentOverFlow,
+    callback: onUpdateMinWidth
+  });
   var _toolTipProps = _objectSpread(_objectSpread({}, toolTipProps), wrapToolTipProps);
   var _originalDiffTip = diffToolTip !== null && diffToolTip !== void 0 ? diffToolTip : originalDiffTip;
   // 前缀处理
@@ -65,6 +110,42 @@ export var formatColumn = function formatColumn(_ref) {
     }
   };
   if (column === null || column === void 0 ? void 0 : column.render) {
+    if (!originalObj && Object.keys(originalObj !== null && originalObj !== void 0 ? originalObj : {}).length === 0 && !onDiff) {
+      return;
+    }
+    var originalRender = column.render; // 保存原始的 render 方法
+    // 自定义render 手动重载下
+    column.render = function (value, record, index) {
+      var _originalObj$record$r;
+      var isFn = isFunction(originalRender);
+      var _value = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(value, record !== null && record !== void 0 ? record : {}, index) : null;
+      var originalValue = getOriginalValue(value, record !== null && record !== void 0 ? record : {}, originalObj, rowKey, dataIndex);
+      var originalRenderValue = isFn ? originalRender === null || originalRender === void 0 ? void 0 : originalRender(originalValue, (_originalObj$record$r = originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]) !== null && _originalObj$record$r !== void 0 ? _originalObj$record$r : {}, index) : null;
+      var isInNewRowFlag = isInNewRow(record);
+      // 把比对结果告诉我
+      if (onDiff) {
+        var isDiff = onDiff({
+          value: record,
+          originValue: originalObj === null || originalObj === void 0 ? void 0 : originalObj[record === null || record === void 0 ? void 0 : record[rowKey]]
+        });
+        if (!isDiff) {
+          originalValue = null;
+        }
+      }
+      return _jsx(RenderColumn, {
+        valueType: valueType,
+        originalValue: !originalValue && originalValue !== 0 ? null : originalRenderValue,
+        ellipsis: ellipsis,
+        width: width,
+        value: _value,
+        node: _value,
+        currentValue: _value,
+        originalDiffTip: _originalDiffTip,
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
+      });
+    };
     return;
   }
   if (tooltip) {
@@ -93,12 +174,18 @@ export var formatColumn = function formatColumn(_ref) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        return _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
       var node = _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -108,7 +195,9 @@ export var formatColumn = function formatColumn(_ref) {
         value: value,
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
-        toolTipProps: _toolTipProps
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
     // 千分位, 千分位带CNY前缀
@@ -127,8 +216,14 @@ export var formatColumn = function formatColumn(_ref) {
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -138,7 +233,9 @@ export var formatColumn = function formatColumn(_ref) {
         value: value,
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
-        toolTipProps: _toolTipProps
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (['datePicker', 'date', 'dateTime', 'dateStartTime', 'dateEndTime', 'dateStartEndTime'].includes(valueType)) {
@@ -180,8 +277,14 @@ export var formatColumn = function formatColumn(_ref) {
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
       if (!value && renderValue === originalRenderValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -191,7 +294,9 @@ export var formatColumn = function formatColumn(_ref) {
         value: value,
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
-        toolTipProps: _toolTipProps
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (['enumName', 'enumCodeName'].includes(valueType)) {
@@ -220,6 +325,7 @@ export var formatColumn = function formatColumn(_ref) {
         size: 8,
         children: [prefixNode(value, record, index), renderValue, suffixNode(value, record, index)]
       });
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -229,7 +335,9 @@ export var formatColumn = function formatColumn(_ref) {
         value: value,
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
-        toolTipProps: _toolTipProps
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (precision || prefix || suffix) {
@@ -245,8 +353,14 @@ export var formatColumn = function formatColumn(_ref) {
         originalRenderValue = '-';
       }
       if (!value && value !== 0 && renderValue === originalRenderValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalRenderValue,
@@ -256,7 +370,9 @@ export var formatColumn = function formatColumn(_ref) {
         value: value,
         currentValue: renderValue,
         originalDiffTip: _originalDiffTip,
-        toolTipProps: _toolTipProps
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (valueType === 'address') {
@@ -269,7 +385,12 @@ export var formatColumn = function formatColumn(_ref) {
         return !!item;
       })) === null || _realValue$filter === void 0 ? void 0 : _realValue$filter.length) === 0;
       if (isEqual(value, originalValue) && isEmpty) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
       var className = classnames({
         'varied-cell': originalValue !== undefined,
@@ -287,21 +408,32 @@ export var formatColumn = function formatColumn(_ref) {
         code: code,
         value: originalRealValue
       });
-      return _jsx(ProForm.ProCascader, {
+      var renderNode = _jsx(ProForm.ProCascader, {
         className: className,
         isView: true,
         mode: "address",
         code: code,
         value: realValue,
-        tooltip: originalValue !== undefined ? _jsxs(_Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalRenderValue, _jsx("br", {}), ellipsis ? _jsxs(_Fragment, {
-            children: ["\u5F53\u524D\u503C\uFF1A", renderValue]
-          }) : undefined]
-        }) : ellipsis
+        tooltip: false
+      });
+      var isInNewRowFlag = isInNewRow(record);
+      return _jsx(RenderColumn, {
+        valueType: valueType,
+        originalValue: originalRealValue === undefined ? undefined : originalRenderValue,
+        ellipsis: ellipsis !== null && ellipsis !== void 0 ? ellipsis : true,
+        width: width,
+        node: renderNode,
+        value: renderValue,
+        currentValue: renderValue,
+        originalDiffTip: _originalDiffTip,
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   } else if (copyable) {
     column.render = function (value, record, index) {
+      var isInNewRowFlag = isInNewRow(record);
       return _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), _jsx(RenderColumn, {
@@ -312,7 +444,9 @@ export var formatColumn = function formatColumn(_ref) {
           node: value,
           value: value,
           currentValue: value,
-          toolTipProps: _toolTipProps
+          toolTipProps: _toolTipProps,
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
         }), suffixNode(value, record, index)]
       });
     };
@@ -320,8 +454,14 @@ export var formatColumn = function formatColumn(_ref) {
     column.render = function (value, record, index) {
       var originalValue = getOriginalValue(value, record, originalObj, rowKey, dataIndex);
       if (!value && value !== 0 && value === originalValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsxs(_Space, {
         size: 8,
         children: [prefixNode(value, record, index), _jsx(RenderColumn, {
@@ -333,7 +473,9 @@ export var formatColumn = function formatColumn(_ref) {
           value: value,
           currentValue: value || '-',
           originalDiffTip: _originalDiffTip,
-          toolTipProps: _toolTipProps
+          toolTipProps: _toolTipProps,
+          minWidth: minWidth,
+          isInNewRowFlag: isInNewRowFlag
         }), suffixNode(value, record, index)]
       });
     };
@@ -345,8 +487,14 @@ export var formatColumn = function formatColumn(_ref) {
         children: [prefixNode(value, record, index), value, suffixNode(value, record, index)]
       });
       if (!value && value !== 0 && value === originalValue) {
-        return '-';
+        _jsx("div", {
+          style: {
+            minWidth: minWidth
+          },
+          children: "-"
+        });
       }
+      var isInNewRowFlag = isInNewRow(record);
       return _jsx(RenderColumn, {
         valueType: valueType,
         originalValue: originalValue === undefined ? undefined : originalValue || '-',
@@ -356,7 +504,9 @@ export var formatColumn = function formatColumn(_ref) {
         value: value,
         currentValue: value || '-',
         originalDiffTip: _originalDiffTip,
-        toolTipProps: _toolTipProps
+        toolTipProps: _toolTipProps,
+        minWidth: minWidth,
+        isInNewRowFlag: isInNewRowFlag
       });
     };
   }

package/es/ProTable/components/RenderColumn/index.d.ts

@@ -11,6 +11,8 @@ interface Props {
     width?: number | string;
     originalValue?: any;
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
+    minWidth?: number;
+    isInNewRowFlag?: boolean;
 }
 declare const RenderColumn: FC<Props>;
 export default RenderColumn;

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

@@ -4,7 +4,7 @@ import _Tooltip from "antd/es/tooltip";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import "antd/es/typography/style";
 import _Typography from "antd/es/typography";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useSetState } from 'ahooks';
 import { CheckOutlined } from '@ant-design/icons';
 import { ReactSVG } from 'react-svg';
@@ -23,20 +23,23 @@ var RenderColumn = function RenderColumn(props) {
     originalValue = props.originalValue,
     originalDiffTip = props.originalDiffTip,
     _props$toolTipProps = props.toolTipProps,
-    toolTipProps = _props$toolTipProps === void 0 ? {} : _props$toolTipProps;
+    toolTipProps = _props$toolTipProps === void 0 ? {} : _props$toolTipProps,
+    minWidth = props.minWidth,
+    isInNewRowFlag = props.isInNewRowFlag;
   var _useSetState = useSetState({
       tooltip: false
     }),
     _useSetState2 = _slicedToArray(_useSetState, 2),
     tooltip = _useSetState2[0].tooltip,
     setState = _useSetState2[1];
-  if (originalValue !== undefined) {
+  if ((originalValue || originalValue === 0) && !isInNewRowFlag) {
     var renderNode = value ? node : '-';
     if (ellipsis || originalDiffTip) {
       if (ellipsis) {
         renderNode = _jsx(Text, {
           style: {
-            width: currentValue === '-' ? 32.5 : width
+            width: currentValue === '-' ? 32.5 : width,
+            minWidth: minWidth
           },
           ellipsis: {
             tooltip: false
@@ -47,10 +50,13 @@ var RenderColumn = function RenderColumn(props) {
       return _jsx(_Tooltip, _objectSpread(_objectSpread({
         className: "varied-cell",
         style: {
-          width: width
+          width: width,
+          minWidth: minWidth
         },
         title: originalDiffTip ? _jsxs(_Fragment, {
-          children: ["\u521D\u59CB\u503C\uFF1A", originalValue, _jsx("br", {}), ellipsis ? "\u5F53\u524D\u503C\uFF1A".concat(currentValue) : undefined]
+          children: ["\u521D\u59CB\u503C\uFF1A", originalValue, _jsx("br", {}), ellipsis ? _jsxs("span", {
+            children: ["\u5F53\u524D\u503C\uFF1A", currentValue]
+          }) : null]
         }) : node,
         getPopupContainer: function getPopupContainer(triggerNode) {
           return triggerNode.parentNode;
@@ -62,7 +68,8 @@ var RenderColumn = function RenderColumn(props) {
     return _jsx("span", {
       className: "varied-cell",
       style: {
-        width: width
+        width: width,
+        minWidth: minWidth
       },
       children: renderNode
     });
@@ -133,7 +140,12 @@ var RenderColumn = function RenderColumn(props) {
       }
     }, toolTipProps);
     if (!value) {
-      return '-';
+      return _jsx("div", {
+        style: {
+          minWidth: minWidth
+        },
+        children: "-"
+      });
     }
     return _jsx(_Tooltip, _objectSpread(_objectSpread({
       title: value,
@@ -146,7 +158,8 @@ var RenderColumn = function RenderColumn(props) {
     }, tooltipProps), {}, {
       children: _jsx(Text, {
         style: {
-          width: width
+          width: width,
+          minWidth: minWidth
         },
         ellipsis: true,
         onMouseOver: handleMouseOver,
@@ -155,6 +168,11 @@ var RenderColumn = function RenderColumn(props) {
       })
     }));
   }
-  return value || value === 0 ? node : '-';
+  return _jsx("div", {
+    style: {
+      minWidth: minWidth
+    },
+    children: value || value === 0 ? node : '-'
+  });
 };
 export default RenderColumn;

package/es/ProTable/index.js

@@ -30,7 +30,7 @@ export var defaultPage = {
   pageSize: 10
 };
 function ProTable(props) {
-  var _locale$ProTable, _curTableConfig$pathK;
+  var _locale$ProTable, _props$scroll, _curTableConfig$pathK;
   var _ref = useProConfig('globalConfig') || {},
     configStorage = _ref.storage; // 获取全局缓存位置配置
   var _ref2 = useProConfig('ProTable') || {},
@@ -58,6 +58,9 @@ function ProTable(props) {
     restProps = _objectWithoutProperties(props, _excluded);
   var _props$scrollFollowPa = props.scrollFollowParent,
     scrollFollowParent = _props$scrollFollowPa === void 0 ? true : _props$scrollFollowPa;
+  var _scroll = (_props$scroll = props === null || props === void 0 ? void 0 : props.scroll) !== null && _props$scroll !== void 0 ? _props$scroll : {
+    x: 'max-content'
+  };
   var wrapToolTipProps = {
     getPopupContainer: scrollFollowParent ? function (triggerNode) {
       return triggerNode.parentNode;
@@ -180,6 +183,11 @@ function ProTable(props) {
       setCurColumns(nextColumns);
     };
   };
+  var _rowClassName = function _rowClassName(record, index) {
+    if (originalDataSource && !originalObj.hasOwnProperty(get(record, 'rowKey'))) {
+      return 'new-cell';
+    }
+  };
   var columns = useMemo(function () {
     var newColumns = curColumns.map(function (item, index) {
       var _propsColumnObj$getCo2;
@@ -201,18 +209,23 @@ function ProTable(props) {
     }).filter(function (item) {
       return !(item === null || item === void 0 ? void 0 : item.delete);
     });
-    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item) {
+    newColumns === null || newColumns === void 0 ? void 0 : newColumns.forEach(function (item, index) {
       formatColumn({
         column: item,
         originalObj: originalObj,
         dataSourceObj: dataSourceObj,
         rowKey: 'rowKey',
         diffToolTip: toolTip,
-        wrapToolTipProps: wrapToolTipProps
+        wrapToolTipProps: wrapToolTipProps,
+        scroll: _scroll,
+        onUpdateMinWidth: function onUpdateMinWidth(w) {
+          curColumns[index].minWidth = w;
+        },
+        isInNewRow: _rowClassName
       });
     });
     return newColumns;
-  }, [curColumns, handleResize]);
+  }, [curColumns, handleResize, _scroll, originalDataSource, originalObj, _rowClassName]);
   var _columns = useMemo(function () {
     return columns === null || columns === void 0 ? void 0 : columns.filter(function (item, index) {
       var show = item.show;
@@ -225,6 +238,13 @@ function ProTable(props) {
       return true;
     });
   }, [columns]);
+  var isExistPercentWidth = !!(_columns === null || _columns === void 0 ? void 0 : _columns.find(function (item) {
+    var _item$width;
+    return (item === null || item === void 0 ? void 0 : item.width) && typeof (item === null || item === void 0 ? void 0 : item.width) === 'string' && (item === null || item === void 0 ? void 0 : (_item$width = item.width) === null || _item$width === void 0 ? void 0 : _item$width.endsWith('%'));
+  }));
+  if (isExistPercentWidth) {
+    _scroll = props === null || props === void 0 ? void 0 : props.scroll;
+  }
   var handleColumnConfig = /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(checkList) {
       var newColumns, _columnConfig$onColum, catchColumns;
@@ -354,11 +374,6 @@ function ProTable(props) {
       return _ref7.apply(this, arguments);
     };
   }();
-  var _rowClassName = function _rowClassName(record, index) {
-    if (originalDataSource && !originalObj.hasOwnProperty(get(record, 'rowKey'))) {
-      return 'new-cell';
-    }
-  };
   var TableComponent = draggable ? DraggableTable : BaseTable;
   // 标记样式
   var tagStyle = {
@@ -415,7 +430,8 @@ function ProTable(props) {
             summary: summary,
             dataSource: _dataSource
           },
-          dataSource: _dataSource
+          dataSource: _dataSource,
+          scroll: _scroll
         })), _jsx("span", {
           className: "pro-table-resizable-line",
           style: {

package/es/ProTable/propsType.d.ts

@@ -41,6 +41,10 @@ export interface ProTableColumn extends Omit<ColumnType<any>, 'dataIndex'> {
     toolTipProps?: TooltipProps & React.RefAttributes<unknown>;
     transform?: (value: any, record?: any) => string[];
     show?: boolean | (() => boolean);
+    onDiff?: ({ value, originValue }: {
+        value: any;
+        originValue: any;
+    }) => boolean;
 }
 export interface CreateTreeFromArrayOptions {
     itemKey?: string;

package/es/ProTable/style/index.less

@@ -257,12 +257,14 @@
     }
   }
 
-  .@{ant-prefix}-table-body {
-    .@{ant-prefix}-table-tbody .@{ant-prefix}-table-row:nth-child(odd).new-cell {
-      background: #d2fff4 !important;
-
-      td {
-        background: #d2fff4 !important;
+  tbody.@{ant-prefix}-table-tbody {
+    tr.@{ant-prefix}-table-row.new-cell {
+      background: var(--zaui-contract-bg-add; #d2fff4) !important;
+      background-color: var(--zaui-contract-bg-add; #d2fff4) !important;
+
+      td.@{ant-prefix}-table-cell {
+        background: var(--zaui-contract-bg-add; #d2fff4) !important;
+        background-color: var(--zaui-contract-bg-add; #d2fff4) !important;
         border-bottom: 1px solid var(--zaui-form-control-line, #dcdcdc);
       }
     }
@@ -270,8 +272,22 @@
     .@{ant-prefix}-table-cell .varied-cell {
       margin-left: -8px;
       padding: var(--zaui-space-size-xs, 4px) var(--zaui-space-size-sm, 8px);
+
       background: var(--zaui-contract-bg; #fffaa1) !important;
       border-radius: var(--zaui-border-radius, 8px);
+      .pro-form-view-container {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
+
+    .@{ant-prefix}-table-cell .@{ant-prefix}-typography-ellipsis {
+      .pro-form-view-container {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
     }
 
     .varied-cell.empty-cell {