@dckj-npm/dc-material 0.1.376 → 0.1.378

package/lib/components/custom-form/custom-form.js

@@ -4,20 +4,59 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports["default"] = void 0;
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _extends4 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _upload = _interopRequireDefault(require("@alifd/next/lib/upload"));
 var _numberPicker = _interopRequireDefault(require("@alifd/next/lib/number-picker"));
 var _datePicker = _interopRequireDefault(require("@alifd/next/lib/date-picker"));
 var _checkbox = _interopRequireDefault(require("@alifd/next/lib/checkbox"));
 var _radio = _interopRequireDefault(require("@alifd/next/lib/radio"));
+var _button = _interopRequireDefault(require("@alifd/next/lib/button"));
 var _select = _interopRequireDefault(require("@alifd/next/lib/select"));
 var _input = _interopRequireDefault(require("@alifd/next/lib/input"));
 var _responsiveGrid = _interopRequireDefault(require("@alifd/next/lib/responsive-grid"));
 var _form = _interopRequireDefault(require("@alifd/next/lib/form"));
 var _react = _interopRequireWildcard(require("react"));
 require("./index.scss");
-var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
+var _excluded = ["columns", "spacing", "emptyContent", "formItems", "initialValues", "computedFields", "fieldLinkage", "submitMapping", "fullWidth", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "operations", "operationAlign", "onSubmit", "onSubmitFailed", "onChange", "onReset", "children", "labelAlign", "labelCol", "size"];
+/**
+ * CustomForm v0.5
+ * 阶段一新增能力：
+ *   - onChange(field, value, allValues)  统一字段变化事件，消灭所有 onXxxChange 样板函数
+ *   - initialValues                       属性面板直接配置字段初始值，无需在页面 state 手写
+ *   - computedFields                      声明式模板字符串计算衍生字段，提交时自动合并
+ * 阶段二新增能力：
+ *   - DateTimePicker                      日期时间组件，格式化为 YYYY-MM-DD HH:mm
+ *   - optionsBind                         下拉/单选/复选选项支持变量绑定（动态数据源）
+ *   - fieldLinkage                        字段联动：选 A → 自动填 B/C（从数据源查找匹配项）
+ *   - submitMapping                       提交映射：自动组装 itemList 格式，消灭手写 onSubmitClick
+ * 阶段三新增能力：
+ *   - labelAlign                          全局标签位置（top/left/inset），对齐 Fusion Form 标准
+ *   - fullWidth（全局）                    全局控制所有表单项组件是否 100% 宽，可被单项覆盖
+ *   - isPreview                           全局预览/只读态（依赖 Fusion Form isPreview 广播）
+ *   - labelCol / wrapperCol               via otherProps 透传，labelAlign=left 时配合使用
+ *   - onReset                             点击重置按钮后触发的回调事件
+ */
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// ─── 调试日志工具（阶段一）────────────────────────────────────────────────────
+var DEBUG_PREFIX = '[CustomForm v0.4]';
+var cfLog = function cfLog(tag) {
+  var _console;
+  // 生产环境可通过 window.__CUSTOM_FORM_DEBUG__ = false 关闭
+  if (typeof window !== 'undefined' && window.__CUSTOM_FORM_DEBUG__ === false) return;
+  for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+    args[_key - 1] = arguments[_key];
+  }
+  (_console = console).log.apply(_console, [DEBUG_PREFIX + " [" + tag + "]"].concat(args));
+};
+var cfWarn = function cfWarn(tag) {
+  var _console2;
+  for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+    args[_key2 - 1] = arguments[_key2];
+  }
+  (_console2 = console).warn.apply(_console2, [DEBUG_PREFIX + " [" + tag + "]"].concat(args));
+};
+// ─────────────────────────────────────────────────────────────────────────────
+
 var NextFormAny = _form["default"];
 var ResponsiveGridAny = _responsiveGrid["default"];
 var ResponsiveGridCell = _responsiveGrid["default"].Cell;
@@ -25,11 +64,108 @@ var FormItemAny = _form["default"].Item;
 var InputAny = _input["default"];
 var TextAreaAny = _input["default"].TextArea;
 var SelectAny = _select["default"];
+var ButtonAny = _button["default"];
 var RadioGroupAny = _radio["default"].Group;
 var CheckboxGroupAny = _checkbox["default"].Group;
 var DatePickerAny = _datePicker["default"];
 var NumberPickerAny = _numberPicker["default"];
 var UploadAny = _upload["default"];
+
+/**
+ * computedFields：计算字段映射表
+ * key   = 要写入 values 的字段名
+ * value = 模板字符串，用 {fieldName} 引用其他字段值
+ * 示例：{ "order_desc": "{package_name},{package_price},日期：{banquet_date}" }
+ */
+
+/**
+ * 字段联动规则（阶段二 + 阶段四 UX 简化）
+ *
+ * 【简单格式（推荐）】— 属性面板 ArraySetter 可视化编辑，每条规则对应一行：
+ *   { watchField, matchValue?, fillField, fillValue }
+ *   watchField  = 监听哪个字段变化
+ *   matchValue  = 匹配值（留空 = 任何变化都触发）
+ *   fillField   = 要回填的目标字段名
+ *   fillValue   = 回填的具体值
+ *
+ * 【高级格式（兼容旧配置）】— 支持动态数据源查找 + staticRules 嵌套格式：
+ *   { watchField, dataSource?, matchKey?, fillFields?, staticRules? }
+ */
+
+/** 提交映射 item（阶段二） */
+
+/**
+ * 操作按钮配置项（阶段四新增）
+ * 表单底部可配置多个按钮，每个按钮均可独立设置操作类型与数据源。
+ */
+
+/**
+ * 提交映射配置（阶段二）
+ * 配置后，提交时自动将指定字段组装为 { columnName, columnValue }[] 格式并写入 finalValues。
+ * 消灭手写 onSubmitClick 中的 itemList 拼接逻辑。
+ */
+
+// ─── 工具：模板字符串渲染 ─────────────────────────────────────────────────────
+/**
+ * 将 "{fieldA},{fieldB}" 中的占位符替换为 values 对应的真实值
+ */
+var renderTemplate = function renderTemplate(template, values) {
+  return template.replace(/\{(\w+)\}/g, function (_, key) {
+    var val = values[key];
+    return val !== undefined && val !== null ? String(val) : '';
+  });
+};
+
+/**
+ * 将 initialValues 从数组格式标准化为对象格式（向后兼容）。
+ * 数组格式由低代码设计器属性面板存储：[{field, valueType, value}, ...]
+ * 对象格式为运行时使用：{ fieldName: value, ... }
+ */
+var normalizeInitialValues = function normalizeInitialValues(raw) {
+  if (!raw) return {};
+  if (Array.isArray(raw)) {
+    return raw.reduce(function (acc, item) {
+      if (item && item.field) {
+        acc[item.field] = item.value !== undefined ? item.value : '';
+      }
+      return acc;
+    }, {});
+  }
+  return raw;
+};
+
+/**
+ * 将 computedFields 从数组格式标准化为对象格式（向后兼容）。
+ * 数组格式：[{targetField, template}, ...]
+ * 对象格式：{ targetField: template, ... }
+ */
+var normalizeComputedFields = function normalizeComputedFields(raw) {
+  if (!raw) return {};
+  if (Array.isArray(raw)) {
+    return raw.reduce(function (acc, item) {
+      if (item && item.targetField) {
+        acc[item.targetField] = item.template || '';
+      }
+      return acc;
+    }, {});
+  }
+  return raw;
+};
+
+/**
+ * 将 computedFields 的所有模板计算后合并进 values，返回新对象（不修改原值）
+ */
+var applyComputedFields = function applyComputedFields(values, computedFields) {
+  if (!computedFields || Object.keys(computedFields).length === 0) return values;
+  var result = (0, _extends4["default"])({}, values);
+  Object.keys(computedFields).forEach(function (key) {
+    result[key] = renderTemplate(computedFields[key], result);
+  });
+  cfLog('computedFields', '计算字段结果', result);
+  return result;
+};
+// ─────────────────────────────────────────────────────────────────────────────
+
 var runSubmitDataSource = function runSubmitDataSource(submitDataSource, values, errors, field) {
   if (!submitDataSource) return;
   if (typeof submitDataSource === 'function') {
@@ -53,27 +189,35 @@ var runSubmitDataSource = function runSubmitDataSource(submitDataSource, values,
   }
 };
 var renderFormItemComponent = function renderFormItemComponent(item) {
+  var _item$optionsBind;
   var componentProps = item.componentProps || {};
-  var dataSource = componentProps.dataSource || item.options || [];
+  // optionsBind（动态绑定）优先级 > componentProps.dataSource > options（静态）
+  var dataSource = (_item$optionsBind = item.optionsBind) !== null && _item$optionsBind !== void 0 && _item$optionsBind.length ? item.optionsBind : componentProps.dataSource || item.options || [];
   switch (item.componentType) {
     case 'TextArea':
       return /*#__PURE__*/_react["default"].createElement(TextAreaAny, componentProps);
     case 'Select':
-      return /*#__PURE__*/_react["default"].createElement(SelectAny, (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(SelectAny, (0, _extends4["default"])({
         dataSource: dataSource
       }, componentProps));
     case 'RadioGroup':
-      return /*#__PURE__*/_react["default"].createElement(RadioGroupAny, (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(RadioGroupAny, (0, _extends4["default"])({
         dataSource: dataSource
       }, componentProps));
     case 'CheckboxGroup':
-      return /*#__PURE__*/_react["default"].createElement(CheckboxGroupAny, (0, _extends2["default"])({
+      return /*#__PURE__*/_react["default"].createElement(CheckboxGroupAny, (0, _extends4["default"])({
         dataSource: dataSource
       }, componentProps));
     case 'NumberPicker':
       return /*#__PURE__*/_react["default"].createElement(NumberPickerAny, componentProps);
     case 'DatePicker':
       return /*#__PURE__*/_react["default"].createElement(DatePickerAny, componentProps);
+    case 'DateTimePicker':
+      // 日期时间选择器：showTime 开启，格式化为 YYYY-MM-DD HH:mm
+      return /*#__PURE__*/_react["default"].createElement(DatePickerAny, (0, _extends4["default"])({
+        showTime: true,
+        format: "YYYY-MM-DD HH:mm"
+      }, componentProps));
     case 'Upload':
       return /*#__PURE__*/_react["default"].createElement(UploadAny, componentProps);
     case 'Input':
@@ -85,11 +229,16 @@ var CustomForm = function CustomForm(_ref) {
   var _ref$columns = _ref.columns,
     columns = _ref$columns === void 0 ? 1 : _ref$columns,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? [0, 16, 16, 0] : _ref$spacing,
+    spacing = _ref$spacing === void 0 ? [0, 16] : _ref$spacing,
     _ref$emptyContent = _ref.emptyContent,
     emptyContent = _ref$emptyContent === void 0 ? '添加表单项' : _ref$emptyContent,
     _ref$formItems = _ref.formItems,
     formItems = _ref$formItems === void 0 ? [] : _ref$formItems,
+    initialValues = _ref.initialValues,
+    computedFields = _ref.computedFields,
+    fieldLinkage = _ref.fieldLinkage,
+    submitMapping = _ref.submitMapping,
+    globalFullWidth = _ref.fullWidth,
     _ref$showSubmit = _ref.showSubmit,
     showSubmit = _ref$showSubmit === void 0 ? true : _ref$showSubmit,
     _ref$submitText = _ref.submitText,
@@ -103,33 +252,266 @@ var CustomForm = function CustomForm(_ref) {
     _ref$resetText = _ref.resetText,
     resetText = _ref$resetText === void 0 ? '重置' : _ref$resetText,
     resetButtonProps = _ref.resetButtonProps,
+    operations = _ref.operations,
+    _ref$operationAlign = _ref.operationAlign,
+    operationAlign = _ref$operationAlign === void 0 ? 'center' : _ref$operationAlign,
     onSubmit = _ref.onSubmit,
     onSubmitFailed = _ref.onSubmitFailed,
+    onChange = _ref.onChange,
+    onReset = _ref.onReset,
     children = _ref.children,
+    labelAlign = _ref.labelAlign,
+    labelCol = _ref.labelCol,
+    globalSize = _ref.size,
     otherProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
-  var handleSubmit = (0, _react.useCallback)(function (values, errors, field) {
+  // ─── 直接传递列数，通过 device="desktop" 锁定成桌面模式，防止 ResponsiveGrid 根据视口自动缩列
+  // ResponsiveGrid columns 只接受 number/string，不接受 breakpoint 对象
+  var fixedColumns = columns;
+
+  // ─── 兼容旧版 4-value spacing → 标准化为 [rowGap, colGap] ─────────────────
+  var normalizedGap = (0, _react.useMemo)(function () {
+    var _spacing$, _spacing$2;
+    if (!Array.isArray(spacing)) return spacing;
+    if (spacing.length >= 2) return [spacing[0], spacing[1]];
+    return [(_spacing$ = spacing[0]) !== null && _spacing$ !== void 0 ? _spacing$ : 0, (_spacing$2 = spacing[0]) !== null && _spacing$2 !== void 0 ? _spacing$2 : 16];
+  }, [spacing]);
+
+  // ─── 标准化 initialValues / computedFields（支持设计器生成的数组格式与运行时对象格式）
+  var resolvedInitialValues = (0, _react.useMemo)(function () {
+    return normalizeInitialValues(initialValues);
+  }, [initialValues]);
+  var resolvedComputedFields = (0, _react.useMemo)(function () {
+    return normalizeComputedFields(computedFields);
+  }, [computedFields]);
+
+  // ─── 用 ref 缓存所有字段的当前值，避免 onChange 闭包过期 ──────────────────
+  // 初始化时直接合并 resolvedInitialValues，避免 useEffect 延迟问题
+  var valuesRef = (0, _react.useRef)(resolvedInitialValues ? (0, _extends4["default"])({}, resolvedInitialValues) : {});
+
+  // ─── 联动回填触发器：用 state 驱动组件重渲染以更新受控字段 ───────────────
+  var _useState = (0, _react.useState)(function () {
+      return resolvedInitialValues ? (0, _extends4["default"])({}, resolvedInitialValues) : {};
+    }),
+    linkageValues = _useState[0],
+    setLinkageValues = _useState[1];
+
+  // ─── 统一 onChange 处理器（阶段一 + 阶段二核心）─────────────────────────────
+  var handleFieldChange = (0, _react.useCallback)(function (field, value) {
+    var _extends2;
+    // 1. 更新本地 values 缓存
+    valuesRef.current = (0, _extends4["default"])({}, valuesRef.current, (_extends2 = {}, _extends2[field] = value, _extends2));
+    cfLog('onChange', "\u5B57\u6BB5 \"" + field + "\" \u53D8\u5316", {
+      value: value,
+      allValues: valuesRef.current
+    });
+
+    // 2. 字段联动（阶段二）：检查是否有对应的联动规则
+    var linkagePatched = null;
+    if (fieldLinkage && fieldLinkage.length > 0) {
+      fieldLinkage.forEach(function (rule) {
+        if (rule.watchField !== field) return;
+
+        // 2a. 静态联动规则（高级格式）
+        if (rule.staticRules) {
+          var staticFill = rule.staticRules[String(value)];
+          if (staticFill) {
+            linkagePatched = (0, _extends4["default"])({}, linkagePatched || {}, staticFill);
+            Object.assign(valuesRef.current, staticFill);
+            cfLog('linkage', "\u9759\u6001\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", staticFill);
+          }
+        }
+
+        // 2b. 数据源动态联动（高级格式）
+        if (rule.dataSource && rule.fillFields) {
+          var matchKey = rule.matchKey || 'value';
+          var matched = rule.dataSource.find(function (item) {
+            return item[matchKey] === value;
+          });
+          if (matched) {
+            var fill = {};
+            Object.entries(rule.fillFields).forEach(function (_ref2) {
+              var formField = _ref2[0],
+                dsKey = _ref2[1];
+              fill[formField] = matched[dsKey];
+            });
+            linkagePatched = (0, _extends4["default"])({}, linkagePatched || {}, fill);
+            Object.assign(valuesRef.current, fill);
+            cfLog('linkage', "\u52A8\u6001\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", fill);
+          }
+        }
+
+        // 2c. 简单联动格式（新格式，属性面板可视化编辑生成）
+        if (rule.fillField !== undefined && rule.fillValue !== undefined) {
+          var noConstraint = rule.matchValue === undefined || rule.matchValue === '';
+          var _matched = noConstraint || String(value) === String(rule.matchValue);
+          if (_matched) {
+            var _fill2;
+            var _fill = (_fill2 = {}, _fill2[rule.fillField] = rule.fillValue, _fill2);
+            linkagePatched = (0, _extends4["default"])({}, linkagePatched || {}, _fill);
+            Object.assign(valuesRef.current, _fill);
+            cfLog('linkage', "\u7B80\u5355\u8054\u52A8 \"" + field + "\" = " + value + "\uFF0C\u56DE\u586B", _fill);
+          }
+        }
+      });
+    }
+    // 有联动回填时，更新 linkageValues 触发重渲染
+    if (linkagePatched) {
+      setLinkageValues(function (prev) {
+        return (0, _extends4["default"])({}, prev, linkagePatched);
+      });
+    }
+
+    // 3. 计算 computedFields，得到包含衍生字段的完整值
+    var allValues = applyComputedFields(valuesRef.current, resolvedComputedFields);
+
+    // 4. 触发外部 onChange 事件（低代码侧可绑定 updateVariable）
+    if (onChange) {
+      onChange(field, value, allValues);
+    }
+  }, [resolvedComputedFields, fieldLinkage, onChange]);
+
+  // ─── 提交处理 ───────────────────────────────────────────────────────────────
+  // ─── 对齐方式映射 ───────────────────────────────────────────────────────────
+  var alignJustifyMap = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end'
+  };
+
+  // ─── 有效操作按钮列表 ────────────────────────────────────────────────────────
+  // operations prop 存在（哪怕是空数组）时：以 operations 为准，完全忽略旧版 showSubmit/showReset
+  // operations prop 为 undefined 时：回退到旧版双按钮模式（向后兼容）
+  var effectiveOperations = (0, _react.useMemo)(function () {
+    if (operations !== undefined) return operations;
+    var ops = [];
+    if (showReset) ops.push({
+      text: resetText || '重置',
+      action: 'reset',
+      type: 'normal'
+    });
+    if (showSubmit) ops.push({
+      text: submitText || '提交',
+      action: 'submit',
+      type: 'primary',
+      submitValidate: submitValidate
+    });
+    return ops;
+  }, [operations, showSubmit, submitText, submitValidate, showReset, resetText]);
+  var handleSubmit = (0, _react.useCallback)(function (values, errors, field, buttonDataSource) {
+    // 将 Form 收集的 values 与 ref 缓存合并（兼容 initialValues 未经 onChange 的字段）
+    var mergedValues = (0, _extends4["default"])({}, valuesRef.current, values);
+    // 追加 computedFields 衍生字段
+    var finalValues = applyComputedFields(mergedValues, resolvedComputedFields);
+
+    // submitMapping：自动组装 itemList 格式（阶段二）
+    if (submitMapping && submitMapping.items && submitMapping.items.length > 0) {
+      var _extends3;
+      var targetField = submitMapping.targetField || 'itemList';
+      var itemList = submitMapping.items.map(function (mappingItem) {
+        var columnValue;
+        if (mappingItem.field) {
+          var _finalValues$mappingI;
+          columnValue = (_finalValues$mappingI = finalValues[mappingItem.field]) !== null && _finalValues$mappingI !== void 0 ? _finalValues$mappingI : '';
+        } else if (mappingItem.template) {
+          columnValue = renderTemplate(mappingItem.template, finalValues);
+        } else {
+          columnValue = '';
+        }
+        return {
+          columnName: mappingItem.columnName,
+          columnValue: columnValue
+        };
+      });
+      finalValues = (0, _extends4["default"])({}, finalValues, (_extends3 = {}, _extends3[targetField] = itemList, _extends3));
+      cfLog('submitMapping', "\u5DF2\u751F\u6210 " + targetField, itemList);
+    }
+    cfLog('submit', '提交触发', {
+      rawValues: values,
+      errors: errors,
+      finalValues: finalValues
+    });
     if (errors && Object.keys(errors).length) {
+      cfWarn('submit', '校验失败', errors);
       if (onSubmitFailed) {
-        onSubmitFailed(values, errors, field);
+        onSubmitFailed(finalValues, errors, field);
       }
       return;
     }
+    cfLog('submit', '校验通过，准备提交', finalValues);
     if (onSubmit) {
-      onSubmit(values, errors, field);
+      onSubmit(finalValues, errors, field);
     }
-    runSubmitDataSource(submitDataSource, values, errors, field);
-  }, [onSubmit, onSubmitFailed, submitDataSource]);
+    // buttonDataSource：单个按钮绑定的数据源（优先）；未绑定时回退到组件级 submitDataSource
+    var effectiveDS = buttonDataSource !== null && buttonDataSource !== void 0 ? buttonDataSource : submitDataSource;
+    runSubmitDataSource(effectiveDS, finalValues, errors, field);
+  }, [computedFields, submitMapping, onSubmit, onSubmitFailed, submitDataSource]);
+
+  // ─── 渲染表单项，绑定统一 onChange ──────────────────────────────────────────
   var formItemNodes = formItems.map(function (item, index) {
+    var _linkageValues$item$f, _item$componentProps;
     var colSpan = Math.min(columns, Math.max(1, item.columnSpan || 1));
-    var formItemProps = item.formItemProps || {};
+
+    // 初始值优先级：item.initialValue > linkageValues[field]（含联动回填）> initialValues[field]
+    var fieldInitialValue = item.initialValue !== undefined ? item.initialValue : (_linkageValues$item$f = linkageValues[item.field]) !== null && _linkageValues$item$f !== void 0 ? _linkageValues$item$f : resolvedInitialValues === null || resolvedInitialValues === void 0 ? void 0 : resolvedInitialValues[item.field];
+
+    // 包装组件的 onChange，注入 field 信息
+    // fullWidth 优先级：item.fullWidth（单项）> globalFullWidth（全局）> undefined（不限制）
+    var effectiveFullWidth = item.fullWidth !== undefined ? item.fullWidth : globalFullWidth;
+    // 有效尺寸：单项 > 全局 > undefined（继承 Form 默认）
+    var effectiveSize = item.size || globalSize;
+    var componentPropsWithChange = (0, _extends4["default"])({}, item.placeholder ? {
+      placeholder: item.placeholder
+    } : {}, effectiveSize ? {
+      size: effectiveSize
+    } : {}, effectiveFullWidth !== undefined ? {
+      style: (0, _extends4["default"])({
+        width: effectiveFullWidth ? '100%' : undefined
+      }, ((_item$componentProps = item.componentProps) === null || _item$componentProps === void 0 ? void 0 : _item$componentProps.style) || {})
+    } : {}, item.componentProps || {}, {
+      onChange: function onChange(value) {
+        var _item$componentProps2;
+        if (typeof ((_item$componentProps2 = item.componentProps) === null || _item$componentProps2 === void 0 ? void 0 : _item$componentProps2.onChange) === 'function') {
+          item.componentProps.onChange(value);
+        }
+        handleFieldChange(item.field, value);
+      }
+    });
+
+    // 联动回填时，通过 value（受控）覆盖字段值；否则只用 defaultValue
+    var isLinkageControlled = linkageValues[item.field] !== undefined && item.initialValue === undefined;
+    if (isLinkageControlled) {
+      componentPropsWithChange.value = linkageValues[item.field];
+    } else if (fieldInitialValue !== undefined && componentPropsWithChange.value === undefined) {
+      componentPropsWithChange.defaultValue = fieldInitialValue;
+      cfLog('renderItem', "\u5B57\u6BB5 \"" + item.field + "\" \u6CE8\u5165\u521D\u59CB\u503C", fieldInitialValue);
+    }
+    if (!item.field) {
+      cfWarn('renderItem', "\u7B2C " + (index + 1) + " \u4E2A\u8868\u5355\u9879\u7F3A\u5C11 field \u5B57\u6BB5\uFF0ConChange \u5C06\u65E0\u6CD5\u7ED1\u5B9A");
+    }
+
+    // 合并 Form.Item 属性：通用属性 < 快捷字段 < formItemProps（最高优先级）
+    // labelAlign / labelCol 显式传入，确保设计器中不依赖 Form context 也能生效
+    var mergedFormItemProps = (0, _extends4["default"])({}, labelAlign ? {
+      labelAlign: labelAlign
+    } : {}, labelCol ? {
+      labelCol: labelCol
+    } : {}, effectiveSize ? {
+      size: effectiveSize
+    } : {}, item.help ? {
+      help: item.help
+    } : {}, item.extra ? {
+      extra: item.extra
+    } : {}, item.formItemProps || {});
     return /*#__PURE__*/_react["default"].createElement(ResponsiveGridCell, {
       colSpan: colSpan,
       key: (item.field || index) + "-form-item"
-    }, /*#__PURE__*/_react["default"].createElement(FormItemAny, (0, _extends2["default"])({
+    }, /*#__PURE__*/_react["default"].createElement(FormItemAny, (0, _extends4["default"])({
       label: item.label,
       name: item.field,
       required: item.required
-    }, formItemProps), renderFormItemComponent(item)));
+    }, mergedFormItemProps), renderFormItemComponent((0, _extends4["default"])({}, item, {
+      componentProps: componentPropsWithChange
+    }))));
   });
   var childrenNodes = _react["default"].Children.toArray(children).map(function (child, index) {
     if (/*#__PURE__*/_react["default"].isValidElement(child) && child.type === ResponsiveGridCell) {
@@ -141,24 +523,62 @@ var CustomForm = function CustomForm(_ref) {
     }, child);
   });
   var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
-  return /*#__PURE__*/_react["default"].createElement(NextFormAny, (0, _extends2["default"])({
+
+  // initialValues 通过 defaultValue 传入 Form（非受控初始化），避免覆盖联动回填的受控值
+  var formInitialProps = {};
+  if (initialValues && Object.keys(initialValues).length > 0) {
+    formInitialProps.defaultValue = initialValues;
+    cfLog('render', '表单携带 initialValues 渲染', initialValues);
+  }
+  return /*#__PURE__*/_react["default"].createElement(NextFormAny, (0, _extends4["default"])({
     className: "custom-form"
-  }, otherProps), hasContent ? /*#__PURE__*/_react["default"].createElement(ResponsiveGridAny, {
+  }, labelAlign ? {
+    labelAlign: labelAlign
+  } : {}, labelCol ? {
+    labelCol: labelCol
+  } : {}, globalSize ? {
+    size: globalSize
+  } : {}, formInitialProps, otherProps), hasContent ? /*#__PURE__*/_react["default"].createElement(ResponsiveGridAny, {
     className: "custom-form__grid",
-    gap: spacing,
-    columns: columns
+    device: "desktop",
+    gap: normalizedGap,
+    columns: fixedColumns
   }, formItemNodes, childrenNodes) : /*#__PURE__*/_react["default"].createElement("div", {
     className: "custom-form__empty"
-  }, emptyContent), showSubmit || showReset ? /*#__PURE__*/_react["default"].createElement("div", {
-    className: "custom-form__actions"
-  }, showReset ? /*#__PURE__*/_react["default"].createElement(NextFormAny.Reset, (0, _extends2["default"])({
-    className: "custom-form__reset"
-  }, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/_react["default"].createElement(NextFormAny.Submit, (0, _extends2["default"])({
-    className: "custom-form__submit",
-    type: "primary",
-    validate: submitValidate,
-    onClick: handleSubmit
-  }, submitButtonProps), submitText) : null) : null);
+  }, emptyContent), effectiveOperations.length > 0 ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "custom-form__actions",
+    style: {
+      justifyContent: alignJustifyMap[operationAlign] || 'center'
+    }
+  }, effectiveOperations.map(function (op, opIndex) {
+    // ── 重置按钮 ─────────────────────────────────────────────────────
+    if (op.action === 'reset') {
+      return /*#__PURE__*/_react["default"].createElement(NextFormAny.Reset, (0, _extends4["default"])({
+        key: opIndex,
+        type: op.type || 'normal',
+        onClick: onReset
+      }, op.buttonProps || {}), op.text);
+    }
+    // ── 提交按钮 ─────────────────────────────────────────────────────
+    if (op.action === 'submit') {
+      // 每个提交按钮独立决定是否校验：per-button > 全局 submitValidate
+      var btnValidate = op.submitValidate !== undefined ? op.submitValidate : submitValidate;
+      return /*#__PURE__*/_react["default"].createElement(NextFormAny.Submit, (0, _extends4["default"])({
+        key: opIndex,
+        type: op.type || 'primary',
+        validate: btnValidate,
+        onClick: function onClick(values, errors, field) {
+          return handleSubmit(values, errors, field, op.dataSource);
+        }
+      }, op.buttonProps || {}), op.text);
+    }
+    // ── 自定义按钮 ───────────────────────────────────────────────────
+    return /*#__PURE__*/_react["default"].createElement(ButtonAny, (0, _extends4["default"])({
+      key: opIndex,
+      type: op.type || 'normal',
+      onClick: op.onClick
+    }, op.buttonProps || {}), op.text);
+  })) : null);
 };
 CustomForm.displayName = 'CustomForm';
 var _default = exports["default"] = CustomForm;

package/lib/components/custom-form/index.d.ts

@@ -2,5 +2,5 @@
  * 自定义表单
  */
 import CustomForm from './custom-form';
-export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType } from './custom-form';
+export type { CustomFormProps, CustomFormItemSchema, CustomFormItemType, ComputedFields } from './custom-form';
 export { CustomForm };

package/lib/components/custom-form/index.scss

@@ -14,9 +14,9 @@
 
 .custom-form__actions {
   display: flex;
-  justify-content: center;
   gap: 12px;
   padding: 12px 0 0;
+  /* 对齐方式通过 style.justifyContent 动态注入，此处不再硬编码 center */
 }
 
 .custom-form__submit,