@zat-design/sisyphus-react 3.7.3-beta.4 → 3.7.3-beta.6

package/dist/index.esm.css

@@ -3059,11 +3059,17 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
 .pro-form .pro-form-list-mode-block .pro-collapse-content .ant-row {
   width: auto;
 }
+.pro-form .pro-form-item-changed {
+  border-radius: 4px;
+  height: 100%;
+  width: 100%;
+  background: var(--zaui-contract-bg, #fffaa1) !important;
+}
 .pro-form .pro-form-item-changed span.ant-input-affix-wrapper,
 .pro-form .pro-form-item-changed .ant-select .ant-select-selector,
 .pro-form .pro-form-item-changed .ant-picker,
 .pro-form .pro-form-item-changed .ant-input-number {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1)) !important;
+  background: var(--zaui-contract-bg, #fffaa1) !important;
 }
 .pro-form .pro-form-item-changed span.ant-input-affix-wrapper input,
 .pro-form .pro-form-item-changed .ant-select .ant-select-selector input,
@@ -3079,25 +3085,72 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
 }
 .pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-switch-handle),
 .pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
   border-radius: 4px;
 }
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > span {
   border-radius: 4px;
   padding: 5px 8px;
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-select-selector,
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .pro-form-item-changed .pro-form-view-container {
   padding: 4px 8px;
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
+  border-radius: 4px;
+}
+.pro-form .pro-form-item-add {
+  border-radius: 4px;
+  height: 100%;
+  width: 100%;
+  background: var(--zaui-contract-bg-add, #d2fff4) !important;
+}
+.pro-form .pro-form-item-add span.ant-input-affix-wrapper,
+.pro-form .pro-form-item-add .ant-select .ant-select-selector,
+.pro-form .pro-form-item-add .ant-picker,
+.pro-form .pro-form-item-add .ant-input-number {
+  background: var(--zaui-contract-bg-add, #d2fff4) !important;
+}
+.pro-form .pro-form-item-add span.ant-input-affix-wrapper input,
+.pro-form .pro-form-item-add .ant-select .ant-select-selector input,
+.pro-form .pro-form-item-add .ant-picker input,
+.pro-form .pro-form-item-add .ant-input-number input {
+  background: transparent !important;
+}
+.pro-form .pro-form-item-add span.ant-input-affix-wrapper .ant-select-selection-placeholder,
+.pro-form .pro-form-item-add .ant-select .ant-select-selector .ant-select-selection-placeholder,
+.pro-form .pro-form-item-add .ant-picker .ant-select-selection-placeholder,
+.pro-form .pro-form-item-add .ant-input-number .ant-select-selection-placeholder {
+  z-index: 9;
+}
+.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-switch-handle),
+.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
+  background: var(--zaui-contract-bg-add, #d2fff4);
+  border-radius: 4px;
+}
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > span {
+  border-radius: 4px;
+  padding: 5px 8px;
+  background: var(--zaui-contract-bg-add, #d2fff4);
+}
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-select-selector,
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
+  background: var(--zaui-contract-bg-add, #d2fff4);
+}
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
+  background: var(--zaui-contract-bg-add, #d2fff4);
+}
+.pro-form .pro-form-item-add .pro-form-view-container {
+  padding: 4px 8px;
+  background: var(--zaui-contract-bg-add, #d2fff4);
   border-radius: 4px;
 }
 .pro-upload .pro-upload-dragger .pro-upload-handle-box {
@@ -5287,6 +5340,7 @@ input[type='button'] {
   --zaui-table-selected-hover-bg: var(--zaui-table-hover-bg);
   --zaui-table-nested-bg: #fafcfe;
   --zaui-contract-bg: #fffaa1;
+  --zaui-contract-bg-add: #d2fff4;
   --zaui-form-label-width: 130px;
   --zaui-border-radius: 8px;
   --zaui-border-radius-card: 4px;

package/dist/less.esm.css

@@ -3059,11 +3059,17 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
 .pro-form .pro-form-list-mode-block .pro-collapse-content .ant-row {
   width: auto;
 }
+.pro-form .pro-form-item-changed {
+  border-radius: 4px;
+  height: 100%;
+  width: 100%;
+  background: var(--zaui-contract-bg, #fffaa1) !important;
+}
 .pro-form .pro-form-item-changed span.ant-input-affix-wrapper,
 .pro-form .pro-form-item-changed .ant-select .ant-select-selector,
 .pro-form .pro-form-item-changed .ant-picker,
 .pro-form .pro-form-item-changed .ant-input-number {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1)) !important;
+  background: var(--zaui-contract-bg, #fffaa1) !important;
 }
 .pro-form .pro-form-item-changed span.ant-input-affix-wrapper input,
 .pro-form .pro-form-item-changed .ant-select .ant-select-selector input,
@@ -3079,25 +3085,72 @@ span.ant-input-group-compact.pro-range-limit .forever-checkbox {
 }
 .pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-switch-handle),
 .pro-form .pro-form-item-changed .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
   border-radius: 4px;
 }
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > span {
   border-radius: 4px;
   padding: 5px 8px;
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-select-selector,
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .pro-form-item-changed .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
 }
 .pro-form .pro-form-item-changed .pro-form-view-container {
   padding: 4px 8px;
-  background: var(--change-tip-color, var(--zaui-contract-bg, #fffaa1));
+  background: var(--zaui-contract-bg, #fffaa1);
+  border-radius: 4px;
+}
+.pro-form .pro-form-item-add {
+  border-radius: 4px;
+  height: 100%;
+  width: 100%;
+  background: var(--zaui-contract-bg-add, #d2fff4) !important;
+}
+.pro-form .pro-form-item-add span.ant-input-affix-wrapper,
+.pro-form .pro-form-item-add .ant-select .ant-select-selector,
+.pro-form .pro-form-item-add .ant-picker,
+.pro-form .pro-form-item-add .ant-input-number {
+  background: var(--zaui-contract-bg-add, #d2fff4) !important;
+}
+.pro-form .pro-form-item-add span.ant-input-affix-wrapper input,
+.pro-form .pro-form-item-add .ant-select .ant-select-selector input,
+.pro-form .pro-form-item-add .ant-picker input,
+.pro-form .pro-form-item-add .ant-input-number input {
+  background: transparent !important;
+}
+.pro-form .pro-form-item-add span.ant-input-affix-wrapper .ant-select-selection-placeholder,
+.pro-form .pro-form-item-add .ant-select .ant-select-selector .ant-select-selection-placeholder,
+.pro-form .pro-form-item-add .ant-picker .ant-select-selection-placeholder,
+.pro-form .pro-form-item-add .ant-input-number .ant-select-selection-placeholder {
+  z-index: 9;
+}
+.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-switch-handle),
+.pro-form .pro-form-item-add .ant-form-item-control:has(.ant-checkbox-wrapper-in-form-item) {
+  background: var(--zaui-contract-bg-add, #d2fff4);
+  border-radius: 4px;
+}
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > span {
+  border-radius: 4px;
+  padding: 5px 8px;
+  background: var(--zaui-contract-bg-add, #d2fff4);
+}
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-select-selector,
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-affix-wrapper,
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .pro-address .ant-input-disabled {
+  background: var(--zaui-contract-bg-add, #d2fff4);
+}
+.pro-form .pro-form-item-add .ant-form-item-control-input-content > .ant-input-group .forever-checkbox {
+  background: var(--zaui-contract-bg-add, #d2fff4);
+}
+.pro-form .pro-form-item-add .pro-form-view-container {
+  padding: 4px 8px;
+  background: var(--zaui-contract-bg-add, #d2fff4);
   border-radius: 4px;
 }
 .pro-upload .pro-upload-dragger .pro-upload-handle-box {
@@ -5287,6 +5340,7 @@ input[type='button'] {
   --zaui-table-selected-hover-bg: var(--zaui-table-hover-bg);
   --zaui-table-nested-bg: #fafcfe;
   --zaui-contract-bg: #fffaa1;
+  --zaui-contract-bg-add: #d2fff4;
   --zaui-form-label-width: 130px;
   --zaui-border-radius: 8px;
   --zaui-border-radius-card: 4px;

package/es/ProEditTable/components/RenderField/ListChangedWrapper.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormInstance } from 'antd';
 import { NamePath } from 'antd/lib/form/interface';
+import { DiffOriginalParams } from '../../../ProForm/utils/diffOriginal';
 interface Props {
     name?: NamePath;
     names?: NamePath[];
@@ -9,7 +10,7 @@ interface Props {
     namesStr?: NamePath;
     originalValues?: any;
     form: FormInstance;
-    equalWith?: (preValue: any, curValue: any) => boolean | undefined;
+    equalWith?: DiffOriginalParams['equalWith'];
     [name: string]: any;
 }
 declare const ListChangedWrapper: React.FC<Props>;

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

@@ -7,6 +7,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutPr
 var _excluded = ["name", "names", "namesStr", "originalName", "originalNames", "originalValues", "form", "equalWith", "rowKeyPath", "children", "type"];
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
+import classNames from 'classnames';
 import { get } from 'lodash';
 import { diffOriginal } from '../../../ProForm/utils/diffOriginal';
 import { useProConfig } from '../../../ProConfigProvider';
@@ -78,8 +79,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
     children = props.children,
     type = props.type,
     rest = _objectWithoutProperties(props, _excluded);
-  var _useProConfig = useProConfig('ProEditTable'),
-    isDiffAll = _useProConfig.isDiffAll;
+  var _ref2 = useProConfig('ProEditTable') || {},
+    isDiffAll = _ref2.isDiffAll;
   var namePath = toNamePath(namesStr || name);
   var originalNamePath = toNamePath(originalName);
   var originalNamePaths = originalNames && toNamePaths(originalNames);
@@ -93,8 +94,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
     form: form
   }) : undefined;
   var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
-  var isChanged = useMemo(function () {
-    if (!isWatch || noChange) return false;
+  var diffType = useMemo(function () {
+    if (!isWatch || noChange) return 'same';
     return diffOriginal({
       value: props.value,
       originalValue: originalValue,
@@ -103,9 +104,15 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
       // name: isString(namesStr) ? namesStr : originalName || name,
     });
   }, [props.value, originalValue]);
+  var isAdd = diffType === 'add';
+  var isChanged = diffType === 'changed';
   if (!isWatch || noChange) {
     return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
   }
+  var diffClassName = classNames({
+    'pro-form-item-changed': isChanged,
+    'pro-form-item-add': isAdd
+  });
   return _jsx(_Tooltip, {
     // 传入undefined 鼠标移入显示移出隐藏
     open: isChanged ? undefined : false,
@@ -121,7 +128,7 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
       })) : undefined]
     }),
     children: _jsx("div", {
-      className: isChanged ? 'pro-form-item-changed' : '',
+      className: diffClassName,
       children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
     })
   });

package/es/ProForm/components/render/ChangedWrapper.d.ts

@@ -1,6 +1,7 @@
 import { FormInstance } from 'antd';
 import { NamePath } from 'antd/lib/form/interface';
 import React from 'react';
+import { DiffOriginalParams } from '../../utils/diffOriginal';
 import { DiffConfigProps } from '../../propsType';
 interface Props {
     name?: NamePath;
@@ -8,7 +9,7 @@ interface Props {
     namesStr?: string;
     diffConfig?: DiffConfigProps;
     form: FormInstance;
-    equalWith?: (preValue: any, curValue: any) => boolean | undefined;
+    equalWith?: DiffOriginalParams['equalWith'];
     [name: string]: any;
 }
 declare const ChangedWrapper: React.FC<Props>;

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

@@ -6,6 +6,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["name", "names", "namesStr", "form", "equalWith", "children", "type", "diffConfig"];
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
 import { get } from 'lodash';
 import React, { useMemo } from 'react';
 import { diffOriginal } from '../../utils/diffOriginal';
@@ -25,10 +26,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
   var _useProConfig = useProConfig('ProForm'),
     isDiffAll = _useProConfig.isDiffAll;
   var originalValues = diffConfig.originalValues,
-    _diffConfig$changeTip = diffConfig.changeTipColor,
-    changeTipColor = _diffConfig$changeTip === void 0 ? '#fffaa1' : _diffConfig$changeTip,
-    _diffConfig$addTipCol = diffConfig.addTipColor,
-    addTipColor = _diffConfig$addTipCol === void 0 ? '#d2fff4' : _diffConfig$addTipCol;
+    changeTipColor = diffConfig.changeTipColor,
+    addTipColor = diffConfig.addTipColor;
   var toolTip = (_diffConfig$toolTip = diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
   // 不渲染tooltip
   var isWatch = toolTip && !['FormList', 'ProEditTable'].includes(type);
@@ -36,8 +35,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
     return get(originalValues, name);
   }) : get(originalValues, name);
   var noChange = !equalWith && (!originalValues || isDiffAll ? false : isEmpty(originalValue));
-  var isChanged = useMemo(function () {
-    if (!isWatch || noChange) return false;
+  var diffType = useMemo(function () {
+    if (!isWatch || noChange) return 'same';
     return diffOriginal({
       originalValue: originalValue,
       value: props.value,
@@ -46,6 +45,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
       // name: namesStr || name,
     });
   }, [isWatch, noChange, props.value, originalValue]);
+  var isAdd = diffType === 'add';
+  var isChanged = diffType === 'changed';
   var tipContent = useMemo(function () {
     if (!isWatch || noChange) return undefined;
     return /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), {}, {
@@ -58,16 +59,18 @@ var ChangedWrapper = function ChangedWrapper(props) {
     return /*#__PURE__*/React.isValidElement(children) && /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest));
   }
   var tipOpenCalc = function tipOpenCalc() {
-    if (!toolTip) {
-      return false;
-    }
+    if (!toolTip) return false;
     // 传入undefined 鼠标移入显示移出隐藏
     return isChanged ? undefined : false;
   };
   var style = {
-    '--change-tip-color': changeTipColor || '@zaui-contract-bg',
-    '--add-tip-color': addTipColor || '@zaui-contract-bg'
+    '--zaui-contract-bg': changeTipColor,
+    '--zaui-contract-bg-add': addTipColor
   };
+  var diffClassName = classNames({
+    'pro-form-item-changed': isChanged,
+    'pro-form-item-add': isAdd
+  });
   return _jsx(_Tooltip, {
     open: tipOpenCalc(),
     getPopupContainer: function getPopupContainer(target) {
@@ -78,7 +81,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
     }),
     placement: "topLeft",
     children: _jsx("div", {
-      className: isChanged ? 'pro-form-item-changed' : '',
+      className: diffClassName,
       style: style,
       children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, children.props), rest)) : undefined
     })

package/es/ProForm/components/render/propsType.d.ts

@@ -31,6 +31,7 @@ import { ProTreeProps } from '../../../ProTree/propsType';
 import { GroupProps as GroupCopyProps } from '../combination/Group/propsType';
 import { ProCollapseProps } from '../../../ProLayout/components/ProCollapse/PropTypes';
 import { DistributiveOmit, DiffConfigProps } from '../../propsType';
+import { DiffOriginalParams } from '../../utils/diffOriginal';
 export type ComponentMap = keyof typeof componentMap;
 type ValidateKey = keyof typeof validate;
 type RegExpKey = keyof typeof regExp;
@@ -201,7 +202,7 @@ export interface ProFormColumnProps<Values = any> extends Omit<FormItemProps<Val
     upperCase?: boolean;
     hiddenNames?: string[] | any[];
     rules?: ProRule[] | ReactiveFunction<Values, ProRule[]>;
-    equalWith?: (originValue: any, currentValue: any) => boolean;
+    equalWith?: DiffOriginalParams['equalWith'];
     required?: boolean | boolean[] | ReactiveFunction<Values, boolean | boolean[]>;
     labelRequired?: boolean;
     toISOString?: boolean;

package/es/ProForm/style/index.less

@@ -324,11 +324,74 @@
 
   // 比较原始值场景下  不同时的样式
   .pro-form-item-changed {
+    border-radius: 4px;
+    height: 100%;
+    width: 100%;
+    background: @zaui-contract-bg !important;
+
+    span.@{ant-prefix}-input-affix-wrapper,
+    .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+    .@{ant-prefix}-picker,
+    .@{ant-prefix}-input-number {
+      background: @zaui-contract-bg !important;
+
+      input {
+        background: transparent !important;
+      }
+      .@{ant-prefix}-select-selection-placeholder {
+        z-index: 9;
+      }
+    }
+
+    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
+    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
+      background: @zaui-contract-bg;
+      border-radius: 4px;
+    }
+
+    // 地址组件
+    .@{ant-prefix}-form-item-control-input-content {
+      // 查看模式
+      & > span {
+        border-radius: 4px;
+        padding: 5px 8px;
+        background: @zaui-contract-bg;
+      }
+
+      & > .pro-address {
+        .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-input-affix-wrapper,
+        .@{ant-prefix}-input-disabled {
+          background: @zaui-contract-bg;
+        }
+      }
+      & > .@{ant-prefix}-input-group {
+        .forever-checkbox {
+          background: @zaui-contract-bg;
+        }
+      }
+    }
+
+    .pro-form-view-container {
+      padding: 4px 8px;
+      background: @zaui-contract-bg;
+      border-radius: 4px;
+    }
+  }
+
+
+  // 比较原始值场景下  不同时的样式
+  .pro-form-item-add {
+        border-radius: 4px;
+        height: 100%;
+        width: 100%;
+        background: @zaui-contract-bg-add !important;
+
     span.@{ant-prefix}-input-affix-wrapper,
     .@{ant-prefix}-select .@{ant-prefix}-select-selector,
     .@{ant-prefix}-picker,
     .@{ant-prefix}-input-number {
-      background: var(--change-tip-color, @zaui-contract-bg) !important;
+      background: @zaui-contract-bg-add !important;
 
       input {
         background: transparent !important;
@@ -340,7 +403,7 @@
 
     .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
     .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
-      background: var(--change-tip-color, @zaui-contract-bg);
+      background: @zaui-contract-bg-add;
       border-radius: 4px;
     }
 
@@ -350,26 +413,26 @@
       & > span {
         border-radius: 4px;
         padding: 5px 8px;
-        background: var(--change-tip-color, @zaui-contract-bg);
+        background: @zaui-contract-bg-add;
       }
 
       & > .pro-address {
         .@{ant-prefix}-select-selector,
         .@{ant-prefix}-input-affix-wrapper,
         .@{ant-prefix}-input-disabled {
-          background: var(--change-tip-color, @zaui-contract-bg);
+          background: @zaui-contract-bg-add;
         }
       }
       & > .@{ant-prefix}-input-group {
         .forever-checkbox {
-          background: var(--change-tip-color, @zaui-contract-bg);
+          background: @zaui-contract-bg-add;
         }
       }
     }
 
     .pro-form-view-container {
       padding: 4px 8px;
-      background: var(--change-tip-color, @zaui-contract-bg);
+      background: @zaui-contract-bg-add;
       border-radius: 4px;
     }
   }

package/es/ProForm/utils/diffOriginal.d.ts

@@ -1,9 +1,9 @@
 import { FormInstance } from 'antd';
-interface Params {
+export interface DiffOriginalParams {
     originalValue: any;
     value: any;
     form: FormInstance;
-    equalWith?: (originalValue: any, currentValue: any) => boolean;
+    equalWith?: (originalValue: any, currentValue: any) => DiffType | boolean | undefined;
 }
-export declare const diffOriginal: (params: Params) => boolean;
-export {};
+export type DiffType = 'same' | 'add' | 'changed';
+export declare const diffOriginal: (params: DiffOriginalParams) => DiffType;

package/es/ProForm/utils/diffOriginal.js

@@ -1,4 +1,5 @@
 import { isEqual, isFunction } from 'lodash';
+import { isEmpty } from '../../utils';
 var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
 export var diffOriginal = function diffOriginal(params) {
   var originalValue = params.originalValue,
@@ -6,19 +7,29 @@ export var diffOriginal = function diffOriginal(params) {
     equalWith = params.equalWith;
   // 支持传入自定义比较事件
   if (isFunction(equalWith)) {
-    return !equalWith(originalValue, value);
+    var diffRes = equalWith(originalValue, value);
+    if (diffRes === undefined) return 'same';
+    if (typeof diffRes === 'boolean') {
+      return diffRes ? 'same' : 'changed';
+    }
+    return diffRes;
+  }
+  // 如果原始值为空 且当前有值的话 认为变更类型是新增
+  if (isEmpty(originalValue) && !isEmpty(value)) {
+    return 'add';
   }
   if (Array.isArray(originalValue)) {
-    return originalValue.some(function (valueItem, index) {
+    var isSame = originalValue.every(function (valueItem, index) {
       // 如果两个值有一个不是空值, 则进行深比较
-      if (!nullValue.includes(value === null || value === void 0 ? void 0 : value[index]) || !nullValue.includes(valueItem)) {
-        return !isEqual(value === null || value === void 0 ? void 0 : value[index], valueItem);
+      if (!isEmpty(value === null || value === void 0 ? void 0 : value[index]) || !isEmpty(valueItem)) {
+        return isEqual(value === null || value === void 0 ? void 0 : value[index], valueItem);
       }
-      return false;
+      return true;
     });
+    return isSame ? 'same' : 'changed';
   }
   if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
-    return !isEqual(value, originalValue);
+    return isEqual(value, originalValue) ? 'same' : 'changed';
   }
-  return false;
+  return 'same';
 };

package/es/style/theme/index.less

@@ -55,6 +55,7 @@
   --zaui-table-selected-hover-bg    : var(--zaui-table-hover-bg); // 默认同悬停
   --zaui-table-nested-bg            : #fafcfe;
   --zaui-contract-bg                : #fffaa1; // 对比背景色
+  --zaui-contract-bg-add            : #d2fff4; // 新增对比背景色
   --zaui-form-label-width           : 130px; // 8个全角字符宽度
   --zaui-border-radius              : 8px;
   --zaui-border-radius-card         : 4px;

package/es/style/theme/tokens.less

@@ -53,6 +53,7 @@
 @zaui-table-selected-hover-bg: var(--zaui-table-hover-bg #fafafa);
 @zaui-table-nested-bg: var(--zaui-table-nested-bg #FAFCFE);
 @zaui-contract-bg: var(--zaui-contract-bg; #fffaa1); // 对比背景色
+@zaui-contract-bg-add: var(--zaui-contract-bg-add; #d2fff4); // 新增对比背景色
 @zaui-form-required-after: var(--zaui-form-required-after; inline);
 @zaui-form-required-before: var(--zaui-form-required-before; none);
 @zaui-form-label-width: var(--zaui-form-label-width; 130px);

package/lib/ProEditTable/components/RenderField/ListChangedWrapper.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { FormInstance } from 'antd';
 import { NamePath } from 'antd/lib/form/interface';
+import { DiffOriginalParams } from '../../../ProForm/utils/diffOriginal';
 interface Props {
     name?: NamePath;
     names?: NamePath[];
@@ -9,7 +10,7 @@ interface Props {
     namesStr?: NamePath;
     originalValues?: any;
     form: FormInstance;
-    equalWith?: (preValue: any, curValue: any) => boolean | undefined;
+    equalWith?: DiffOriginalParams['equalWith'];
     [name: string]: any;
 }
 declare const ListChangedWrapper: React.FC<Props>;

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

@@ -11,6 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _jsxRuntime = require("react/jsx-runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _diffOriginal = require("../../../ProForm/utils/diffOriginal");
 var _ProConfigProvider = require("../../../ProConfigProvider");
@@ -83,8 +84,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
     children = props.children,
     type = props.type,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var _useProConfig = (0, _ProConfigProvider.useProConfig)('ProEditTable'),
-    isDiffAll = _useProConfig.isDiffAll;
+  var _ref2 = (0, _ProConfigProvider.useProConfig)('ProEditTable') || {},
+    isDiffAll = _ref2.isDiffAll;
   var namePath = toNamePath(namesStr || name);
   var originalNamePath = toNamePath(originalName);
   var originalNamePaths = originalNames && toNamePaths(originalNames);
@@ -98,8 +99,8 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
     form: form
   }) : undefined;
   var noChange = !equalWith && (!originalValues || isDiffAll ? false : (0, _utils.isEmpty)(originalValue));
-  var isChanged = (0, _react.useMemo)(function () {
-    if (!isWatch || noChange) return false;
+  var diffType = (0, _react.useMemo)(function () {
+    if (!isWatch || noChange) return 'same';
     return (0, _diffOriginal.diffOriginal)({
       value: props.value,
       originalValue: originalValue,
@@ -108,9 +109,15 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
       // name: isString(namesStr) ? namesStr : originalName || name,
     });
   }, [props.value, originalValue]);
+  var isAdd = diffType === 'add';
+  var isChanged = diffType === 'changed';
   if (!isWatch || noChange) {
     return /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest));
   }
+  var diffClassName = (0, _classnames.default)({
+    'pro-form-item-changed': isChanged,
+    'pro-form-item-add': isAdd
+  });
   return (0, _jsxRuntime.jsx)(_antd.Tooltip
   // 传入undefined 鼠标移入显示移出隐藏
   , {
@@ -128,7 +135,7 @@ var ListChangedWrapper = function ListChangedWrapper(props) {
       })) : undefined]
     }),
     children: (0, _jsxRuntime.jsx)("div", {
-      className: isChanged ? 'pro-form-item-changed' : '',
+      className: diffClassName,
       children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest)) : undefined
     })
   });

package/lib/ProForm/components/render/ChangedWrapper.d.ts

@@ -1,6 +1,7 @@
 import { FormInstance } from 'antd';
 import { NamePath } from 'antd/lib/form/interface';
 import React from 'react';
+import { DiffOriginalParams } from '../../utils/diffOriginal';
 import { DiffConfigProps } from '../../propsType';
 interface Props {
     name?: NamePath;
@@ -8,7 +9,7 @@ interface Props {
     namesStr?: string;
     diffConfig?: DiffConfigProps;
     form: FormInstance;
-    equalWith?: (preValue: any, curValue: any) => boolean | undefined;
+    equalWith?: DiffOriginalParams['equalWith'];
     [name: string]: any;
 }
 declare const ChangedWrapper: React.FC<Props>;

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

@@ -10,6 +10,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
+var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _react = _interopRequireWildcard(require("react"));
 var _diffOriginal = require("../../utils/diffOriginal");
@@ -30,10 +31,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
   var _useProConfig = (0, _ProConfigProvider.useProConfig)('ProForm'),
     isDiffAll = _useProConfig.isDiffAll;
   var originalValues = diffConfig.originalValues,
-    _diffConfig$changeTip = diffConfig.changeTipColor,
-    changeTipColor = _diffConfig$changeTip === void 0 ? '#fffaa1' : _diffConfig$changeTip,
-    _diffConfig$addTipCol = diffConfig.addTipColor,
-    addTipColor = _diffConfig$addTipCol === void 0 ? '#d2fff4' : _diffConfig$addTipCol;
+    changeTipColor = diffConfig.changeTipColor,
+    addTipColor = diffConfig.addTipColor;
   var toolTip = (_diffConfig$toolTip = diffConfig.toolTip) !== null && _diffConfig$toolTip !== void 0 ? _diffConfig$toolTip : true;
   // 不渲染tooltip
   var isWatch = toolTip && !['FormList', 'ProEditTable'].includes(type);
@@ -41,8 +40,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
     return (0, _lodash.get)(originalValues, name);
   }) : (0, _lodash.get)(originalValues, name);
   var noChange = !equalWith && (!originalValues || isDiffAll ? false : (0, _utils.isEmpty)(originalValue));
-  var isChanged = (0, _react.useMemo)(function () {
-    if (!isWatch || noChange) return false;
+  var diffType = (0, _react.useMemo)(function () {
+    if (!isWatch || noChange) return 'same';
     return (0, _diffOriginal.diffOriginal)({
       originalValue: originalValue,
       value: props.value,
@@ -51,6 +50,8 @@ var ChangedWrapper = function ChangedWrapper(props) {
       // name: namesStr || name,
     });
   }, [isWatch, noChange, props.value, originalValue]);
+  var isAdd = diffType === 'add';
+  var isChanged = diffType === 'changed';
   var tipContent = (0, _react.useMemo)(function () {
     if (!isWatch || noChange) return undefined;
     return /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), {}, {
@@ -63,16 +64,18 @@ var ChangedWrapper = function ChangedWrapper(props) {
     return /*#__PURE__*/_react.default.isValidElement(children) && /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest));
   }
   var tipOpenCalc = function tipOpenCalc() {
-    if (!toolTip) {
-      return false;
-    }
+    if (!toolTip) return false;
     // 传入undefined 鼠标移入显示移出隐藏
     return isChanged ? undefined : false;
   };
   var style = {
-    '--change-tip-color': changeTipColor || '@zaui-contract-bg',
-    '--add-tip-color': addTipColor || '@zaui-contract-bg'
+    '--zaui-contract-bg': changeTipColor,
+    '--zaui-contract-bg-add': addTipColor
   };
+  var diffClassName = (0, _classnames.default)({
+    'pro-form-item-changed': isChanged,
+    'pro-form-item-add': isAdd
+  });
   return (0, _jsxRuntime.jsx)(_antd.Tooltip, {
     open: tipOpenCalc(),
     getPopupContainer: function getPopupContainer(target) {
@@ -83,7 +86,7 @@ var ChangedWrapper = function ChangedWrapper(props) {
     }),
     placement: "topLeft",
     children: (0, _jsxRuntime.jsx)("div", {
-      className: isChanged ? 'pro-form-item-changed' : '',
+      className: diffClassName,
       style: style,
       children: /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), rest)) : undefined
     })

package/lib/ProForm/components/render/propsType.d.ts

@@ -31,6 +31,7 @@ import { ProTreeProps } from '../../../ProTree/propsType';
 import { GroupProps as GroupCopyProps } from '../combination/Group/propsType';
 import { ProCollapseProps } from '../../../ProLayout/components/ProCollapse/PropTypes';
 import { DistributiveOmit, DiffConfigProps } from '../../propsType';
+import { DiffOriginalParams } from '../../utils/diffOriginal';
 export type ComponentMap = keyof typeof componentMap;
 type ValidateKey = keyof typeof validate;
 type RegExpKey = keyof typeof regExp;
@@ -201,7 +202,7 @@ export interface ProFormColumnProps<Values = any> extends Omit<FormItemProps<Val
     upperCase?: boolean;
     hiddenNames?: string[] | any[];
     rules?: ProRule[] | ReactiveFunction<Values, ProRule[]>;
-    equalWith?: (originValue: any, currentValue: any) => boolean;
+    equalWith?: DiffOriginalParams['equalWith'];
     required?: boolean | boolean[] | ReactiveFunction<Values, boolean | boolean[]>;
     labelRequired?: boolean;
     toISOString?: boolean;

package/lib/ProForm/style/index.less

@@ -324,11 +324,74 @@
 
   // 比较原始值场景下  不同时的样式
   .pro-form-item-changed {
+    border-radius: 4px;
+    height: 100%;
+    width: 100%;
+    background: @zaui-contract-bg !important;
+
+    span.@{ant-prefix}-input-affix-wrapper,
+    .@{ant-prefix}-select .@{ant-prefix}-select-selector,
+    .@{ant-prefix}-picker,
+    .@{ant-prefix}-input-number {
+      background: @zaui-contract-bg !important;
+
+      input {
+        background: transparent !important;
+      }
+      .@{ant-prefix}-select-selection-placeholder {
+        z-index: 9;
+      }
+    }
+
+    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
+    .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
+      background: @zaui-contract-bg;
+      border-radius: 4px;
+    }
+
+    // 地址组件
+    .@{ant-prefix}-form-item-control-input-content {
+      // 查看模式
+      & > span {
+        border-radius: 4px;
+        padding: 5px 8px;
+        background: @zaui-contract-bg;
+      }
+
+      & > .pro-address {
+        .@{ant-prefix}-select-selector,
+        .@{ant-prefix}-input-affix-wrapper,
+        .@{ant-prefix}-input-disabled {
+          background: @zaui-contract-bg;
+        }
+      }
+      & > .@{ant-prefix}-input-group {
+        .forever-checkbox {
+          background: @zaui-contract-bg;
+        }
+      }
+    }
+
+    .pro-form-view-container {
+      padding: 4px 8px;
+      background: @zaui-contract-bg;
+      border-radius: 4px;
+    }
+  }
+
+
+  // 比较原始值场景下  不同时的样式
+  .pro-form-item-add {
+        border-radius: 4px;
+        height: 100%;
+        width: 100%;
+        background: @zaui-contract-bg-add !important;
+
     span.@{ant-prefix}-input-affix-wrapper,
     .@{ant-prefix}-select .@{ant-prefix}-select-selector,
     .@{ant-prefix}-picker,
     .@{ant-prefix}-input-number {
-      background: var(--change-tip-color, @zaui-contract-bg) !important;
+      background: @zaui-contract-bg-add !important;
 
       input {
         background: transparent !important;
@@ -340,7 +403,7 @@
 
     .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-switch-handle),
     .@{ant-prefix}-form-item-control:has(.@{ant-prefix}-checkbox-wrapper-in-form-item) {
-      background: var(--change-tip-color, @zaui-contract-bg);
+      background: @zaui-contract-bg-add;
       border-radius: 4px;
     }
 
@@ -350,26 +413,26 @@
       & > span {
         border-radius: 4px;
         padding: 5px 8px;
-        background: var(--change-tip-color, @zaui-contract-bg);
+        background: @zaui-contract-bg-add;
       }
 
       & > .pro-address {
         .@{ant-prefix}-select-selector,
         .@{ant-prefix}-input-affix-wrapper,
         .@{ant-prefix}-input-disabled {
-          background: var(--change-tip-color, @zaui-contract-bg);
+          background: @zaui-contract-bg-add;
         }
       }
       & > .@{ant-prefix}-input-group {
         .forever-checkbox {
-          background: var(--change-tip-color, @zaui-contract-bg);
+          background: @zaui-contract-bg-add;
         }
       }
     }
 
     .pro-form-view-container {
       padding: 4px 8px;
-      background: var(--change-tip-color, @zaui-contract-bg);
+      background: @zaui-contract-bg-add;
       border-radius: 4px;
     }
   }

package/lib/ProForm/utils/diffOriginal.d.ts

@@ -1,9 +1,9 @@
 import { FormInstance } from 'antd';
-interface Params {
+export interface DiffOriginalParams {
     originalValue: any;
     value: any;
     form: FormInstance;
-    equalWith?: (originalValue: any, currentValue: any) => boolean;
+    equalWith?: (originalValue: any, currentValue: any) => DiffType | boolean | undefined;
 }
-export declare const diffOriginal: (params: Params) => boolean;
-export {};
+export type DiffType = 'same' | 'add' | 'changed';
+export declare const diffOriginal: (params: DiffOriginalParams) => DiffType;

package/lib/ProForm/utils/diffOriginal.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.diffOriginal = void 0;
 var _lodash = require("lodash");
+var _utils = require("../../utils");
 var nullValue = [null, undefined, '']; // 输入框空值时可能存在的三种值 视为相等
 var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
   var originalValue = params.originalValue,
@@ -12,19 +13,29 @@ var diffOriginal = exports.diffOriginal = function diffOriginal(params) {
     equalWith = params.equalWith;
   // 支持传入自定义比较事件
   if ((0, _lodash.isFunction)(equalWith)) {
-    return !equalWith(originalValue, value);
+    var diffRes = equalWith(originalValue, value);
+    if (diffRes === undefined) return 'same';
+    if (typeof diffRes === 'boolean') {
+      return diffRes ? 'same' : 'changed';
+    }
+    return diffRes;
+  }
+  // 如果原始值为空 且当前有值的话 认为变更类型是新增
+  if ((0, _utils.isEmpty)(originalValue) && !(0, _utils.isEmpty)(value)) {
+    return 'add';
   }
   if (Array.isArray(originalValue)) {
-    return originalValue.some(function (valueItem, index) {
+    var isSame = originalValue.every(function (valueItem, index) {
       // 如果两个值有一个不是空值, 则进行深比较
-      if (!nullValue.includes(value === null || value === void 0 ? void 0 : value[index]) || !nullValue.includes(valueItem)) {
-        return !(0, _lodash.isEqual)(value === null || value === void 0 ? void 0 : value[index], valueItem);
+      if (!(0, _utils.isEmpty)(value === null || value === void 0 ? void 0 : value[index]) || !(0, _utils.isEmpty)(valueItem)) {
+        return (0, _lodash.isEqual)(value === null || value === void 0 ? void 0 : value[index], valueItem);
       }
-      return false;
+      return true;
     });
+    return isSame ? 'same' : 'changed';
   }
   if (!nullValue.includes(value) || !nullValue.includes(originalValue)) {
-    return !(0, _lodash.isEqual)(value, originalValue);
+    return (0, _lodash.isEqual)(value, originalValue) ? 'same' : 'changed';
   }
-  return false;
+  return 'same';
 };

package/lib/style/theme/index.less

@@ -55,6 +55,7 @@
   --zaui-table-selected-hover-bg    : var(--zaui-table-hover-bg); // 默认同悬停
   --zaui-table-nested-bg            : #fafcfe;
   --zaui-contract-bg                : #fffaa1; // 对比背景色
+  --zaui-contract-bg-add            : #d2fff4; // 新增对比背景色
   --zaui-form-label-width           : 130px; // 8个全角字符宽度
   --zaui-border-radius              : 8px;
   --zaui-border-radius-card         : 4px;

package/lib/style/theme/tokens.less

@@ -53,6 +53,7 @@
 @zaui-table-selected-hover-bg: var(--zaui-table-hover-bg #fafafa);
 @zaui-table-nested-bg: var(--zaui-table-nested-bg #FAFCFE);
 @zaui-contract-bg: var(--zaui-contract-bg; #fffaa1); // 对比背景色
+@zaui-contract-bg-add: var(--zaui-contract-bg-add; #d2fff4); // 新增对比背景色
 @zaui-form-required-after: var(--zaui-form-required-after; inline);
 @zaui-form-required-before: var(--zaui-form-required-before; none);
 @zaui-form-label-width: var(--zaui-form-label-width; 130px);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zat-design/sisyphus-react",
-  "version": "3.7.3-beta.4",
+  "version": "3.7.3-beta.6",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

package/.vscode/extensions.json

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