@ant-design/pro-components 3.0.1-0 → 3.1.0-0

package/lib/table/components/EditableTable/index.js

@@ -6,9 +6,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
@@ -19,10 +20,11 @@ var _react = _interopRequireWildcard(require("react"));
 var _form = _interopRequireWildcard(require("../../../form"));
 var _provider = require("../../../provider");
 var _utils = require("../../../utils");
+var _useEditableArray = require("../../../utils/useEditableArray");
 var _Table = _interopRequireDefault(require("../../Table"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["onTableChange", "maxLength", "formItemProps", "recordCreatorProps", "rowKey", "controlled", "defaultValue", "onChange", "editableFormRef"],
-  _excluded2 = ["record", "position", "creatorButtonText", "newRecordType", "parentKey", "style"];
+var _excluded = ["record", "position", "creatorButtonText", "newRecordType", "parentKey", "style"],
+  _excluded2 = ["onTableChange", "maxLength", "formItemProps", "recordCreatorProps", "rowKey", "controlled", "defaultValue", "onChange", "editableFormRef"];
 var EditableTableActionContext = /*#__PURE__*/_react.default.createContext(undefined);
 
 /** 可编辑表格的按钮 */
@@ -36,7 +38,7 @@ function RecordCreator(props) {
   return /*#__PURE__*/_react.default.cloneElement(children, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, children.props), {}, {
     onClick: function () {
       var _onClick = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
-        var _children$props$onCli, _children$props, _actionRef$current;
+        var _children$props$onCli, _children$props;
         var isOk;
         return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
           while (1) switch (_context.prev = _context.next) {
@@ -51,11 +53,13 @@ function RecordCreator(props) {
               }
               return _context.abrupt("return");
             case 5:
-              actionRef === null || actionRef === void 0 || (_actionRef$current = actionRef.current) === null || _actionRef$current === void 0 || _actionRef$current.addEditRecord(record, {
-                position: position,
-                newRecordType: newRecordType,
-                parentKey: parentKey
-              });
+              if (actionRef !== null && actionRef !== void 0 && actionRef.current) {
+                actionRef.current.addEditRecord(record, {
+                  position: position,
+                  newRecordType: newRecordType,
+                  parentKey: parentKey
+                });
+              }
             case 6:
             case "end":
               return _context.stop();
@@ -70,13 +74,195 @@ function RecordCreator(props) {
   }));
 }
 
+/**
+ * 处理嵌套行的新增
+ */
+function handleNestedRowInsert(baseData, defaultValue, newLineOptions, getRowKey, childrenColumnName) {
+  var _recordKeyToString;
+  if (!newLineOptions.recordKey) {
+    return baseData;
+  }
+  var actionProps = {
+    data: baseData,
+    getRowKey: getRowKey,
+    row: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultValue), {}, {
+      map_row_parentKey: (_recordKeyToString = (0, _useEditableArray.recordKeyToString)(newLineOptions.parentKey)) === null || _recordKeyToString === void 0 ? void 0 : _recordKeyToString.toString()
+    }),
+    key: newLineOptions.recordKey,
+    childrenColumnName: childrenColumnName
+  };
+  return (0, _useEditableArray.editableRowByKey)(actionProps, newLineOptions.position === 'top' ? 'top' : 'update');
+}
+
+/**
+ * 处理分页场景下的新增
+ */
+function handlePaginationInsert(baseData, defaultValue, pageConfig) {
+  if (pageConfig.pageSize > baseData.length) {
+    return [].concat((0, _toConsumableArray2.default)(baseData), [defaultValue]);
+  }
+  var insertIndex = pageConfig.current * pageConfig.pageSize - 1;
+  var result = (0, _toConsumableArray2.default)(baseData);
+  result.splice(insertIndex, 0, defaultValue);
+  return result;
+}
+function useEditableDataSource(_ref) {
+  var actionDataSource = _ref.actionDataSource,
+    editableUtils = _ref.editableUtils,
+    pagination = _ref.pagination,
+    getRowKey = _ref.getRowKey,
+    childrenColumnName = _ref.childrenColumnName;
+  return (0, _react.useMemo)(function () {
+    var newLineConfig = editableUtils === null || editableUtils === void 0 ? void 0 : editableUtils.newLineRecord;
+    var baseData = Array.isArray(actionDataSource) ? (0, _toConsumableArray2.default)(actionDataSource) : [];
+    if (!(newLineConfig !== null && newLineConfig !== void 0 && newLineConfig.defaultValue)) {
+      return baseData;
+    }
+    var newLineOptions = newLineConfig.options,
+      defaultValue = newLineConfig.defaultValue;
+    if (newLineOptions !== null && newLineOptions !== void 0 && newLineOptions.parentKey) {
+      return handleNestedRowInsert(baseData, defaultValue, newLineOptions, getRowKey, childrenColumnName || 'children');
+    }
+    if ((newLineOptions === null || newLineOptions === void 0 ? void 0 : newLineOptions.position) === 'top') {
+      return [defaultValue].concat((0, _toConsumableArray2.default)(baseData));
+    }
+    var pageConfig = pagination && (0, _typeof2.default)(pagination) === 'object' ? pagination : undefined;
+    if (pageConfig !== null && pageConfig !== void 0 && pageConfig.current && pageConfig !== null && pageConfig !== void 0 && pageConfig.pageSize) {
+      return handlePaginationInsert(baseData, defaultValue, pageConfig);
+    }
+    return [].concat((0, _toConsumableArray2.default)(baseData), [defaultValue]);
+  }, [actionDataSource, childrenColumnName, editableUtils === null || editableUtils === void 0 ? void 0 : editableUtils.newLineRecord, getRowKey, pagination]);
+}
+
+/**
+ * 检查是否应该显示创建按钮
+ */
+function shouldShowCreatorButton(maxLength, valueLength, recordCreatorProps) {
+  if (typeof maxLength === 'number' && maxLength <= valueLength) {
+    return false;
+  }
+  return recordCreatorProps !== false;
+}
+
+/**
+ * 创建按钮 DOM
+ */
+function createButtonDom(recordCreatorProps, value, intl) {
+  var record = recordCreatorProps.record,
+    position = recordCreatorProps.position,
+    creatorButtonText = recordCreatorProps.creatorButtonText,
+    newRecordType = recordCreatorProps.newRecordType,
+    parentKey = recordCreatorProps.parentKey,
+    style = recordCreatorProps.style,
+    restButtonProps = (0, _objectWithoutProperties2.default)(recordCreatorProps, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordCreator, {
+    record: (0, _utils.runFunction)(record, value === null || value === void 0 ? void 0 : value.length, value) || {},
+    position: position,
+    parentKey: (0, _utils.runFunction)(parentKey, value === null || value === void 0 ? void 0 : value.length, value),
+    newRecordType: newRecordType,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+      type: "dashed",
+      style: (0, _objectSpread2.default)({
+        display: 'block',
+        margin: '10px 0',
+        width: '100%'
+      }, style),
+      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {})
+    }, restButtonProps), {}, {
+      children: creatorButtonText || intl.getMessage('editableTable.action.add', '添加一行数据')
+    }))
+  });
+}
+
+/**
+ * 创建顶部按钮的渲染属性
+ */
+function createTopButtonProps(creatorButtonDom, columnsLength) {
+  return {
+    components: {
+      header: {
+        wrapper: function wrapper(_ref2) {
+          var className = _ref2.className,
+            children = _ref2.children;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)("thead", {
+            className: className,
+            children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
+              style: {
+                position: 'relative'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                colSpan: 0,
+                style: {
+                  visibility: 'hidden'
+                },
+                children: creatorButtonDom
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
+                style: {
+                  position: 'absolute',
+                  left: 0,
+                  width: '100%'
+                },
+                colSpan: columnsLength,
+                children: creatorButtonDom
+              })]
+            })]
+          });
+        }
+      }
+    }
+  };
+}
+
+/**
+ * 创建底部按钮的渲染属性
+ */
+function createBottomButtonProps(creatorButtonDom, _tableViewRender) {
+  return {
+    tableViewRender: function tableViewRender(_, dom) {
+      var _tableViewRender2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [(_tableViewRender2 = _tableViewRender === null || _tableViewRender === void 0 ? void 0 : _tableViewRender(_, dom)) !== null && _tableViewRender2 !== void 0 ? _tableViewRender2 : dom, creatorButtonDom]
+      });
+    }
+  };
+}
+function useCreatorButton(_ref3) {
+  var recordCreatorProps = _ref3.recordCreatorProps,
+    maxLength = _ref3.maxLength,
+    value = _ref3.value,
+    intl = _ref3.intl,
+    isTop = _ref3.isTop,
+    columnsLength = _ref3.columnsLength,
+    tableViewRender = _ref3.tableViewRender;
+  var creatorButtonDom = (0, _react.useMemo)(function () {
+    if (!shouldShowCreatorButton(maxLength, (value === null || value === void 0 ? void 0 : value.length) || 0, recordCreatorProps)) {
+      return false;
+    }
+    if (!recordCreatorProps) {
+      return false;
+    }
+    return createButtonDom(recordCreatorProps, value, intl);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxLength, recordCreatorProps, value === null || value === void 0 ? void 0 : value.length, intl]);
+  var buttonRenderProps = (0, _react.useMemo)(function () {
+    if (!creatorButtonDom) {
+      return {};
+    }
+    return isTop ? createTopButtonProps(creatorButtonDom, columnsLength) : createBottomButtonProps(creatorButtonDom, tableViewRender);
+  }, [columnsLength, creatorButtonDom, isTop, tableViewRender]);
+  return {
+    creatorButtonDom: creatorButtonDom,
+    buttonRenderProps: buttonRenderProps
+  };
+}
+
 /**
  * 可以直接放到 Form 中的可编辑表格
  * A React component that is used to create a table.
  * @param props
  */
 function EditableTable(props) {
-  var _props$editable2, _props$editable4;
+  var _props$editable2, _rest$columns;
   var intl = (0, _provider.useIntl)();
   var onTableChange = props.onTableChange,
     maxLength = props.maxLength,
@@ -87,20 +273,40 @@ function EditableTable(props) {
     defaultValue = props.defaultValue,
     onChange = props.onChange,
     editableFormRef = props.editableFormRef,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+    rest = (0, _objectWithoutProperties2.default)(props, _excluded2);
   var preData = (0, _react.useRef)(undefined);
   var actionRef = (0, _react.useRef)();
   var formRef = (0, _react.useRef)();
+  var form = _antd.Form.useFormInstance();
 
   // 设置 ref
   (0, _react.useImperativeHandle)(rest.actionRef, function () {
     return actionRef.current;
   }, [actionRef.current]);
-  var _useMergedState = (0, _util.useMergedState)(function () {
-      return props.value || defaultValue || [];
-    }, {
+
+  // 在 name 模式下，如果没有传递 value prop，尝试从表单值中获取初始值
+  var getInitialValue = function getInitialValue() {
+    if (props.value) {
+      return props.value;
+    }
+    if (defaultValue) {
+      return defaultValue;
+    }
+    // 如果使用了 name 且没有 value，尝试从表单获取初始值
+    if (props.name && form) {
+      var namePath = [props.name].flat(1).filter(Boolean);
+      var formValue = form.getFieldValue(namePath);
+      if (Array.isArray(formValue)) {
+        return formValue;
+      }
+    }
+    return [];
+  };
+  var _useMergedState = (0, _util.useMergedState)(getInitialValue, {
       value: props.value,
-      onChange: props.onChange
+      // 在非受控模式下，onChange 应该在 onDataSourceChange 中触发
+      // 这样可以确保数据已经正确更新
+      onChange: props.controlled ? props.onChange : undefined
     }),
     _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
     value = _useMergedState2[0],
@@ -115,207 +321,305 @@ function EditableTable(props) {
   }, [rowKey]);
 
   /**
-   * 根据不同的情况返回不同的 rowKey
-   * @param finlayRowKey
-   * @returns string | number
+   * 创建编辑 keys 的 Set，用于快速查找
    */
-  var coverRowKey = (0, _utils.useRefFunction)(function (finlayRowKey) {
-    /**
-     * 如果是 prop.name 的模式，就需要把行号转化成具体的rowKey。
-     */
-    if (typeof finlayRowKey === 'number' && !props.name) {
-      if (finlayRowKey >= value.length) return finlayRowKey;
-      var rowData = value && value[finlayRowKey];
-      return getRowKey === null || getRowKey === void 0 ? void 0 : getRowKey(rowData, finlayRowKey);
+  var createEditingKeysSet = (0, _utils.useRefFunction)(function (editingKeys) {
+    return new Set((editingKeys || []).map(function (key) {
+      return String(key);
+    }));
+  });
+
+  /**
+   * 同步表单值，排除正在编辑的行
+   */
+  var syncFormValuesExcludingEditing = (0, _utils.useRefFunction)(function (dataSource, editingKeysSet, namePath) {
+    if (!formRef.current) return;
+    try {
+      if (namePath && namePath.length > 0) {
+        // name 模式：需要保留正在编辑的行
+        var currentFormValues = formRef.current.getFieldsValue() || {};
+        var currentList = (0, _util.get)(currentFormValues, namePath);
+        if (currentList && Array.isArray(currentList)) {
+          // 构建新的表单值，保留正在编辑的行
+          // 使用 Map 优化查找性能，将 O(n²) 降低到 O(n)
+          var currentListMap = new Map();
+          currentList.forEach(function (item, idx) {
+            var key = getRowKey(item, idx);
+            currentListMap.set(String(key), item);
+          });
+          var newList = dataSource.map(function (item, index) {
+            var key = getRowKey(item, index);
+            var keyStr = String(key);
+
+            // 如果该行正在编辑，保留表单中的值
+            if (editingKeysSet.has(keyStr)) {
+              return currentListMap.get(keyStr) || item;
+            }
+            return item;
+          });
+          var newValue = (0, _util.set)({}, namePath, newList);
+          formRef.current.setFieldsValue(newValue);
+        } else {
+          var _newValue = (0, _util.set)({}, namePath, dataSource);
+          formRef.current.setFieldsValue(_newValue);
+        }
+      } else {
+        // 非 name 模式：直接设置值
+        var formValues = {};
+        dataSource.forEach(function (current, index) {
+          var key = getRowKey(current, index);
+          var keyStr = String(key);
+          if (!editingKeysSet.has(keyStr)) {
+            formValues[keyStr] = current;
+          }
+        });
+        if (Object.keys(formValues).length > 0) {
+          formRef.current.setFieldsValue(formValues);
+        }
+      }
+    } catch (error) {
+      console.warn('Failed to sync form values:', error);
     }
+  });
 
-    /**
-     * 如果是 prop.name 的模式，就直接返回行号
-     */
-    if ((typeof finlayRowKey === 'string' || finlayRowKey >= value.length) && props.name) {
+  /**
+   * 将数字索引转换为实际的 rowKey（非 name 模式）
+   */
+  var convertIndexToRowKey = (0, _utils.useRefFunction)(function (index) {
+    var _value$length;
+    var dataLength = (_value$length = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length !== void 0 ? _value$length : 0;
+    if (index >= dataLength) return index;
+    var rowData = value === null || value === void 0 ? void 0 : value[index];
+    return getRowKey === null || getRowKey === void 0 ? void 0 : getRowKey(rowData, index);
+  });
+
+  /**
+   * 将 rowKey 转换为数字索引（name 模式）
+   */
+  var convertRowKeyToIndex = (0, _utils.useRefFunction)(function (rowKey) {
+    var _value$length2;
+    var dataLength = (_value$length2 = value === null || value === void 0 ? void 0 : value.length) !== null && _value$length2 !== void 0 ? _value$length2 : 0;
+    if (typeof rowKey === 'string' || rowKey >= dataLength) {
       var _rowIndex = value.findIndex(function (item, index) {
         var _getRowKey;
-        return (getRowKey === null || getRowKey === void 0 || (_getRowKey = getRowKey(item, index)) === null || _getRowKey === void 0 ? void 0 : _getRowKey.toString()) === (finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString());
+        return (getRowKey === null || getRowKey === void 0 || (_getRowKey = getRowKey(item, index)) === null || _getRowKey === void 0 ? void 0 : _getRowKey.toString()) === (rowKey === null || rowKey === void 0 ? void 0 : rowKey.toString());
       });
       if (_rowIndex !== -1) return _rowIndex;
     }
+    return rowKey;
+  });
+
+  /**
+   * 根据不同的情况返回不同的 rowKey
+   */
+  var coverRowKey = (0, _utils.useRefFunction)(function (finlayRowKey) {
+    if (typeof finlayRowKey === 'number' && !props.name) {
+      return convertIndexToRowKey(finlayRowKey);
+    }
+    if (props.name) {
+      return convertRowKeyToIndex(finlayRowKey);
+    }
     return finlayRowKey;
   });
 
-  // 设置 editableFormRef
-  (0, _react.useImperativeHandle)(editableFormRef, function () {
-    /**
-     * 获取一行数据的
-     * @param rowIndex
-     * @returns T | undefined
-     */
-    var getRowData = function getRowData(rowIndex) {
-      var _finlayRowKey$toStrin, _formRef$current;
-      if (rowIndex == undefined) {
-        throw new Error('rowIndex is required');
-      }
-      var finlayRowKey = coverRowKey(rowIndex);
-      var rowKeyName = [props.name, (_finlayRowKey$toStrin = finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString()) !== null && _finlayRowKey$toStrin !== void 0 ? _finlayRowKey$toStrin : ''].flat(1).filter(Boolean);
-      return (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldValue(rowKeyName);
-    };
+  /**
+   * 构建表单字段路径
+   */
+  var buildFormFieldPath = (0, _utils.useRefFunction)(function (rowKey) {
+    var _rowKey$toString;
+    return [props.name, (_rowKey$toString = rowKey === null || rowKey === void 0 ? void 0 : rowKey.toString()) !== null && _rowKey$toString !== void 0 ? _rowKey$toString : ''].flat(1).filter(Boolean);
+  });
+
+  /**
+   * 获取一行数据
+   */
+  var getRowData = (0, _utils.useRefFunction)(function (rowIndex) {
+    var _formRef$current;
+    if (rowIndex == null) {
+      throw new Error('rowIndex is required');
+    }
+    var finlayRowKey = coverRowKey(rowIndex);
+    var rowKeyName = buildFormFieldPath(finlayRowKey);
+    return (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getFieldValue(rowKeyName);
+  });
 
-    /**
-     * 获取整个 table 的数据
-     * @returns T[] | undefined
-     */
-    var getRowsData = function getRowsData() {
-      var _formRef$current3;
-      var rowKeyName = [props.name].flat(1).filter(Boolean);
-      if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
-        var _formRef$current2;
-        var rowData = (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
-        if (Array.isArray(rowData)) return rowData;
-        return Object.keys(rowData).map(function (key) {
-          return rowData[key];
+  /**
+   * 获取整个表格的数据
+   */
+  var getRowsData = (0, _utils.useRefFunction)(function () {
+    var _formRef$current3;
+    var rowKeyName = [props.name].flat(1).filter(Boolean);
+    if (Array.isArray(rowKeyName) && rowKeyName.length === 0) {
+      var _formRef$current2;
+      var rowData = (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getFieldsValue();
+      if (Array.isArray(rowData)) return rowData;
+      return Object.keys(rowData).map(function (key) {
+        return rowData[key];
+      });
+    }
+    return (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.getFieldValue(rowKeyName);
+  });
+
+  /**
+   * 设置一行数据
+   */
+  var setRowData = (0, _utils.useRefFunction)(function (rowIndex, data) {
+    if (rowIndex == null) {
+      throw new Error('rowIndex is required');
+    }
+    var finlayRowKey = coverRowKey(rowIndex);
+    var rowKeyName = buildFormFieldPath(finlayRowKey);
+    var currentRowData = getRowData(rowIndex);
+    var newRowData = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, currentRowData), data || {});
+
+    // 在 name 模式下，需要更新整个数组
+    if (props.name) {
+      var _formRef$current4;
+      var tableName = [props.name].flat(1).filter(Boolean);
+      // 优先从 value prop 获取数据（受控模式），否则从表单值获取
+      var currentTableData = props.value || ((_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getFieldValue(tableName));
+      if (Array.isArray(currentTableData)) {
+        // 找到要更新的行的索引
+        var rowIndexToUpdate = typeof finlayRowKey === 'number' ? finlayRowKey : currentTableData.findIndex(function (row, index) {
+          var rowKey = getRowKey === null || getRowKey === void 0 ? void 0 : getRowKey(row, index);
+          return rowKey === finlayRowKey || (rowKey === null || rowKey === void 0 ? void 0 : rowKey.toString()) === (finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString());
         });
+        if (rowIndexToUpdate >= 0 && rowIndexToUpdate < currentTableData.length) {
+          var _formRef$current5;
+          // 更新数组中的对应行
+          var updatedTableData = (0, _toConsumableArray2.default)(currentTableData);
+          updatedTableData[rowIndexToUpdate] = newRowData;
+
+          // 设置整个数组，使用 set 来构建正确的路径
+          // 使用与 syncFormValuesExcludingEditing 相同的路径格式（数组路径）
+          // 这样可以确保 getFieldValue 能正确获取值
+          var updateValues = (0, _util.set)({}, tableName, updatedTableData);
+          (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || _formRef$current5.setFieldsValue(updateValues);
+
+          // 在受控模式下，触发 onChange
+          if (props.controlled && props.onChange) {
+            props.onChange(updatedTableData);
+          }
+        }
+      } else {
+        var _formRef$current6;
+        // 如果当前没有数据，直接设置单个字段
+        var _updateValues = (0, _util.set)({}, rowKeyName, newRowData);
+        (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 || _formRef$current6.setFieldsValue(_updateValues);
       }
-      return (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 ? void 0 : _formRef$current3.getFieldValue(rowKeyName);
-    };
+    } else {
+      var _formRef$current7;
+      // 非 name 模式下，直接设置单个字段
+      var _updateValues2 = (0, _util.set)({}, rowKeyName, newRowData);
+      (_formRef$current7 = formRef.current) === null || _formRef$current7 === void 0 || _formRef$current7.setFieldsValue(_updateValues2);
+    }
+    return true;
+  });
+
+  // 设置 editableFormRef
+  (0, _react.useImperativeHandle)(editableFormRef, function () {
     return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formRef.current), {}, {
       getRowData: getRowData,
       getRowsData: getRowsData,
-      /**
-       * 设置一行的数据，会将数据进行简单的 merge
-       * @param rowIndex
-       * @param data
-       * @returns void
-       */
-      setRowData: function setRowData(rowIndex, data) {
-        var _finlayRowKey$toStrin2, _formRef$current4;
-        if (rowIndex == undefined) {
-          throw new Error('rowIndex is required');
+      setRowData: setRowData
+    });
+  }, [coverRowKey, props.name, getRowData, getRowsData, setRowData]);
+
+  /**
+   * 受控模式下同步表单值
+   * 在受控模式下，即使正在编辑的行也要同步更新，因为数据由外部完全控制
+   * 使用深度比较优化性能，避免频繁的序列化操作
+   * 注意：只有当 value 明确传递时才同步，避免覆盖表单中的初始值
+   */
+  (0, _utils.useDeepCompareEffect)(function () {
+    if (!props.controlled || !formRef.current) return;
+
+    // 在受控模式下，只有当 value 明确传递时才同步
+    // 避免在 value 为 undefined 时覆盖表单中的初始值
+    if (value === undefined) return;
+
+    // 在受控模式下，同步所有值（包括正在编辑的行）
+    // 因为数据由外部完全控制，应该同步更新
+    try {
+      if (props.name) {
+        // name 模式：直接设置整个数组
+        var namePath = [props.name].flat(1);
+        var newValue = (0, _util.set)({}, namePath, value);
+        formRef.current.setFieldsValue(newValue);
+      } else {
+        // 非 name 模式：直接设置值
+        var formValues = {};
+        value.forEach(function (item, index) {
+          var key = getRowKey(item, index);
+          var keyStr = String(key);
+          formValues[keyStr] = item;
+        });
+        if (Object.keys(formValues).length > 0) {
+          formRef.current.setFieldsValue(formValues);
         }
-        var finlayRowKey = coverRowKey(rowIndex);
-        var rowKeyName = [props.name, (_finlayRowKey$toStrin2 = finlayRowKey === null || finlayRowKey === void 0 ? void 0 : finlayRowKey.toString()) !== null && _finlayRowKey$toStrin2 !== void 0 ? _finlayRowKey$toStrin2 : ''].flat(1).filter(Boolean);
-        var newRowData = Object.assign({}, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, getRowData(rowIndex)), data || {}));
-        var updateValues = (0, _util.set)({}, rowKeyName, newRowData);
-        (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 || _formRef$current4.setFieldsValue(updateValues);
-        return true;
       }
-    });
-  }, [coverRowKey, props.name, formRef.current]);
-  (0, _react.useEffect)(function () {
-    if (!props.controlled) return;
-    (value || []).forEach(function (current, index) {
-      var _formRef$current5;
-      (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || _formRef$current5.setFieldsValue((0, _defineProperty2.default)({}, "".concat(getRowKey(current, index)), current));
-    }, {});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [(0, _utils.stringify)(value), props.controlled]);
+    } catch (error) {
+      console.warn('Failed to sync form values in controlled mode:', error);
+    }
+  }, [value, props.controlled, props.name, getRowKey]);
+
+  /**
+   * 同步表单实例引用
+   * 只在 name 模式下且 form 存在时更新
+   */
   (0, _react.useEffect)(function () {
-    if (props.name) {
-      var _props$editable;
-      formRef.current = props === null || props === void 0 || (_props$editable = props.editable) === null || _props$editable === void 0 ? void 0 : _props$editable.form;
+    var _props$editable;
+    if (props.name && props !== null && props !== void 0 && (_props$editable = props.editable) !== null && _props$editable !== void 0 && _props$editable.form) {
+      formRef.current = props.editable.form;
     }
   }, [(_props$editable2 = props.editable) === null || _props$editable2 === void 0 ? void 0 : _props$editable2.form, props.name]);
-  var _ref = recordCreatorProps || {},
-    record = _ref.record,
-    position = _ref.position,
-    creatorButtonText = _ref.creatorButtonText,
-    newRecordType = _ref.newRecordType,
-    parentKey = _ref.parentKey,
-    style = _ref.style,
-    restButtonProps = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
+  var _ref4 = recordCreatorProps || {},
+    position = _ref4.position;
   var isTop = position === 'top';
-  var creatorButtonDom = (0, _react.useMemo)(function () {
-    if (typeof maxLength === 'number' && maxLength <= (value === null || value === void 0 ? void 0 : value.length)) {
-      return false;
-    }
-    return recordCreatorProps !== false && /*#__PURE__*/(0, _jsxRuntime.jsx)(RecordCreator, {
-      record: (0, _utils.runFunction)(record, value === null || value === void 0 ? void 0 : value.length, value) || {},
-      position: position,
-      parentKey: (0, _utils.runFunction)(parentKey, value === null || value === void 0 ? void 0 : value.length, value),
-      newRecordType: newRecordType,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-        type: "dashed",
-        style: (0, _objectSpread2.default)({
-          display: 'block',
-          margin: '10px 0',
-          width: '100%'
-        }, style),
-        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.PlusOutlined, {})
-      }, restButtonProps), {}, {
-        children: creatorButtonText || intl.getMessage('editableTable.action.add', '添加一行数据')
-      }))
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [recordCreatorProps, maxLength, value === null || value === void 0 ? void 0 : value.length]);
-  var buttonRenderProps = (0, _react.useMemo)(function () {
-    if (!creatorButtonDom) {
-      return {};
-    }
-    if (isTop) {
-      return {
-        components: {
-          header: {
-            wrapper: function wrapper(_ref2) {
-              var _rest$columns;
-              var className = _ref2.className,
-                children = _ref2.children;
-              return /*#__PURE__*/(0, _jsxRuntime.jsxs)("thead", {
-                className: className,
-                children: [children, /*#__PURE__*/(0, _jsxRuntime.jsxs)("tr", {
-                  style: {
-                    position: 'relative'
-                  },
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-                    colSpan: 0,
-                    style: {
-                      visibility: 'hidden'
-                    },
-                    children: creatorButtonDom
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)("td", {
-                    style: {
-                      position: 'absolute',
-                      left: 0,
-                      width: '100%'
-                    },
-                    colSpan: (_rest$columns = rest.columns) === null || _rest$columns === void 0 ? void 0 : _rest$columns.length,
-                    children: creatorButtonDom
-                  })]
-                })]
-              });
-            }
-          }
-        }
-      };
-    }
-    return {
-      tableViewRender: function tableViewRender(_, dom) {
-        var _props$tableViewRende, _props$tableViewRende2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [(_props$tableViewRende = (_props$tableViewRende2 = props.tableViewRender) === null || _props$tableViewRende2 === void 0 ? void 0 : _props$tableViewRende2.call(props, _, dom)) !== null && _props$tableViewRende !== void 0 ? _props$tableViewRende : dom, creatorButtonDom]
-        });
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isTop, creatorButtonDom]);
-  var editableProps = (0, _objectSpread2.default)({}, props.editable);
+  var _useCreatorButton = useCreatorButton({
+      recordCreatorProps: recordCreatorProps,
+      maxLength: maxLength,
+      value: value,
+      intl: intl,
+      isTop: isTop,
+      columnsLength: (_rest$columns = rest.columns) === null || _rest$columns === void 0 ? void 0 : _rest$columns.length,
+      tableViewRender: props.tableViewRender
+    }),
+    creatorButtonDom = _useCreatorButton.creatorButtonDom,
+    buttonRenderProps = _useCreatorButton.buttonRenderProps;
 
   /**
-   * 防止闭包的onchange
-   *
-   * >>>>>>为了性能好辛苦
+   * 处理值变化回调
+   * 注意：受控模式下不调用 onChange，避免循环更新
+   * onChange 应该由外部控制，而不是在内部触发
    */
-  var newOnValueChange = (0, _utils.useRefFunction)(function (r, dataSource) {
+  var handleValuesChange = (0, _utils.useRefFunction)(function (r, dataSource) {
     var _props$editable3, _props$editable3$onVa, _props$onValuesChange;
     (_props$editable3 = props.editable) === null || _props$editable3 === void 0 || (_props$editable3$onVa = _props$editable3.onValuesChange) === null || _props$editable3$onVa === void 0 || _props$editable3$onVa.call(_props$editable3, r, dataSource);
     (_props$onValuesChange = props.onValuesChange) === null || _props$onValuesChange === void 0 || _props$onValuesChange.call(props, dataSource, r);
-    if (props.controlled) {
-      var _props$onChange;
-      props === null || props === void 0 || (_props$onChange = props.onChange) === null || _props$onChange === void 0 || _props$onChange.call(props, dataSource);
+
+    // 在受控模式下，当表单值变化时也应该触发 onChange
+    // 这样外部可以同步更新 value，实现真正的受控
+    if (props.controlled && props !== null && props !== void 0 && props.onChange) {
+      props.onChange(dataSource);
     }
+    // 非受控模式下，onChange 应该在 onDataSourceChange 中触发
+    // 这样可以确保数据已经正确更新
   });
-  if (props !== null && props !== void 0 && props.onValuesChange || (_props$editable4 = props.editable) !== null && _props$editable4 !== void 0 && _props$editable4.onValuesChange ||
-  // 受控模式需要触发 onchange
-  props.controlled && props !== null && props !== void 0 && props.onChange) {
-    editableProps.onValuesChange = newOnValueChange;
-  }
+
+  /**
+   * 构建可编辑属性
+   * 使用 useMemo 优化性能，避免不必要的重新创建
+   */
+  var editableProps = (0, _react.useMemo)(function () {
+    var _props$editable4;
+    var baseProps = (0, _objectSpread2.default)({}, props.editable);
+    var hasOnValuesChange = Boolean(props === null || props === void 0 ? void 0 : props.onValuesChange) || Boolean((_props$editable4 = props.editable) === null || _props$editable4 === void 0 ? void 0 : _props$editable4.onValuesChange) || Boolean(props.controlled && (props === null || props === void 0 ? void 0 : props.onChange));
+    if (hasOnValuesChange) {
+      baseProps.onValuesChange = handleValuesChange;
+    }
+    return baseProps;
+  }, [props.editable, props.onValuesChange, props.controlled, props.onChange, handleValuesChange]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EditableTableActionContext.Provider, {
       value: actionRef,
@@ -336,34 +640,63 @@ function EditableTable(props) {
         }),
         dataSource: value,
         onDataSourceChange: function onDataSourceChange(dataSource) {
+          // setValue 会触发 onChange，但我们需要确保数据已经正确更新
+          // 所以先设置数据，然后手动触发 onChange
           setValue(dataSource);
+
           /**
-           * 如果是top，需要重新设置一下 form，不然会导致 id 相同数据混淆
+           * 如果是 name 模式，需要同步表单值
+           * 避免表单值和数据源不一致
+           * 注意：不会覆盖正在编辑的行
            */
-          if (props.name && position === 'top') {
-            var _formRef$current6;
-            var newValue = (0, _util.set)({}, [props.name].flat(1).filter(Boolean), dataSource);
-            (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 || _formRef$current6.setFieldsValue(newValue);
+          if (props.name && formRef.current) {
+            var _props$editable5;
+            var editingKeys = (_props$editable5 = props.editable) === null || _props$editable5 === void 0 ? void 0 : _props$editable5.editableKeys;
+            var editingKeysSet = createEditingKeysSet(editingKeys);
+            var namePath = [props.name].flat(1).filter(Boolean);
+            syncFormValuesExcludingEditing(dataSource, editingKeysSet, namePath);
+          }
+
+          // 在非受控模式下，通过 onDataSourceChange 触发 onChange
+          // 这样可以确保数据已经正确更新
+          if (!props.controlled && props.onChange) {
+            props.onChange(dataSource);
           }
         }
       }))
     }), props.name ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_form.ProFormDependency, {
       name: [props.name],
       children: function children(changeValue) {
-        var _props$editable5, _props$editable5$onVa;
+        // 初始化 preData
         if (!preData.current) {
           preData.current = value;
           return null;
         }
-        var list = (0, _util.get)(changeValue, [props.name].flat(1));
-        var changeItem = list === null || list === void 0 ? void 0 : list.find(function (item, index) {
+        var namePath = [props.name].flat(1);
+        var list = (0, _util.get)(changeValue, namePath);
+
+        // 添加空值检查，避免后续操作出错
+        if (!list || !Array.isArray(list)) {
+          preData.current = value;
+          return null;
+        }
+
+        // 在更新 preData 之前找到变化的项
+        // 使用 findIndex 可以同时获取变化的项和索引
+        var changeIndex = list.findIndex(function (item, index) {
           var _preData$current;
           return !(0, _utils.isDeepEqualReact)(item, (_preData$current = preData.current) === null || _preData$current === void 0 ? void 0 : _preData$current[index]);
         });
+
+        // 只有在找到变化项时才触发回调
+        if (changeIndex !== -1) {
+          var _props$editable6, _props$editable6$onVa;
+          var changeItem = list[changeIndex];
+          props === null || props === void 0 || (_props$editable6 = props.editable) === null || _props$editable6 === void 0 || (_props$editable6$onVa = _props$editable6.onValuesChange) === null || _props$editable6$onVa === void 0 || _props$editable6$onVa.call(_props$editable6, changeItem, list);
+        }
+
+        // 在找到 changeItem 之后再更新 preData，确保后续比较正确
         preData.current = value;
-        if (!changeItem) return null;
-        // 如果不存在 preData 说明是初始化，此时不需要触发 onValuesChange
-        props === null || props === void 0 || (_props$editable5 = props.editable) === null || _props$editable5 === void 0 || (_props$editable5$onVa = _props$editable5.onValuesChange) === null || _props$editable5$onVa === void 0 || _props$editable5$onVa.call(_props$editable5, changeItem, list);
         return null;
       }
     }) : null]