@dckj-npm/dc-material 0.1.377 → 0.1.379

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

@@ -5,13 +5,53 @@ import _NumberPicker from "@alifd/next/es/number-picker";
 import _DatePicker from "@alifd/next/es/date-picker";
 import _Checkbox from "@alifd/next/es/checkbox";
 import _Radio from "@alifd/next/es/radio";
+import _Button from "@alifd/next/es/button";
 import _Select from "@alifd/next/es/select";
 import _Input from "@alifd/next/es/input";
 import _ResponsiveGrid from "@alifd/next/es/responsive-grid";
 import _Form from "@alifd/next/es/form";
-var _excluded = ["columns", "spacing", "emptyContent", "formItems", "showSubmit", "submitText", "submitValidate", "submitDataSource", "submitButtonProps", "showReset", "resetText", "resetButtonProps", "onSubmit", "onSubmitFailed", "children"];
-import React, { useCallback } from 'react';
+var _excluded = ["format", "showTime"],
+  _excluded2 = ["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                             点击重置按钮后触发的回调事件
+ */
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import "./index.scss";
+// ─── 调试日志工具（阶段一）────────────────────────────────────────────────────
+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;
 var ResponsiveGridAny = _ResponsiveGrid;
 var ResponsiveGridCell = _ResponsiveGrid.Cell;
@@ -19,17 +59,130 @@ var FormItemAny = _Form.Item;
 var InputAny = _Input;
 var TextAreaAny = _Input.TextArea;
 var SelectAny = _Select;
+var ButtonAny = _Button;
 var RadioGroupAny = _Radio.Group;
 var CheckboxGroupAny = _Checkbox.Group;
 var DatePickerAny = _DatePicker;
 var NumberPickerAny = _NumberPicker;
 var UploadAny = _Upload;
+
+/**
+ * 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（阶段二） */
+
+/** rename 模式：单条字段重命名规则 */
+
+/**
+ * 操作按钮配置项（阶段四新增）
+ * 表单底部可配置多个按钮，每个按钮均可独立设置操作类型与数据源。
+ */
+
+/**
+ * 提交参数配置（阶段五扩展）
+ *
+ * 三种工作模式（mode）：
+ * - 'passthrough'：直接将 finalValues 作为请求参数，无需任何配置（字段名与 API 参数名相同时使用）。
+ * - 'rename'：按 fieldRenameMap 规则重命名指定字段，未列出的字段保持原名透传；
+ *             适合字段名与 API 参数名不一致的标准 REST 接口。
+ * - 'itemList'：将字段转换为动态表单格式 [{columnName, columnValue}]，
+ *              适合 /source/api/dynamicFormTableRecord/ 等动态表单接口。
+ *
+ * 向后兼容：未设置 mode 时，若 items 不为空则自动识别为 'itemList' 模式，否则等同于 'passthrough'。
+ */
+
+// ─── 工具：模板字符串渲染 ─────────────────────────────────────────────────────
+/**
+ * 将 "{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 = _extends({}, 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') {
     submitDataSource(values, errors, field);
     return;
   }
+  // lowcode-engine 数据源对象（this.dataSourceMap.xxx）使用 .load(params) 触发请求。
+  // params 会与数据源静态 options.params 合并覆盖；
+  // 若 submitMapping 已配置，values 中包含 itemList，可直接覆盖接口默认参数。
+  if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.load) === 'function') {
+    submitDataSource.load(values);
+    return;
+  }
   if (typeof (submitDataSource === null || submitDataSource === void 0 ? void 0 : submitDataSource.run) === 'function') {
     submitDataSource.run(values, errors, field);
     return;
@@ -47,8 +200,10 @@ 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.createElement(TextAreaAny, componentProps);
@@ -67,7 +222,29 @@ var renderFormItemComponent = function renderFormItemComponent(item) {
     case 'NumberPicker':
       return /*#__PURE__*/React.createElement(NumberPickerAny, componentProps);
     case 'DatePicker':
-      return /*#__PURE__*/React.createElement(DatePickerAny, componentProps);
+      return /*#__PURE__*/React.createElement(DatePickerAny, _extends({
+        format: "YYYY-MM-DD"
+      }, componentProps));
+    case 'DateTimePicker':
+      {
+        // 将 format / showTime 从 componentProps 中单独析构，防止 spread 覆盖我们的计算值
+        var cpFormat = componentProps.format,
+          _ignoredShowTime = componentProps.showTime,
+          restCp = _objectWithoutPropertiesLoose(componentProps, _excluded);
+        var dtFmt = cpFormat || 'YYYY-MM-DD HH:mm:ss';
+        // 提取日期部分（空格前）和时间部分（空格后）
+        // @alifd/next DatePicker 会将 format（日期）与 showTime.format（时间）拼接显示
+        // 若把含时间的完整格式传给 format，再传 showTime.format，会导致时间重复显示
+        var spaceIdx = dtFmt.indexOf(' ');
+        var dateFmt = spaceIdx !== -1 ? dtFmt.slice(0, spaceIdx) : dtFmt;
+        var timeFmt = spaceIdx !== -1 ? dtFmt.slice(spaceIdx + 1) : 'HH:mm:ss';
+        return /*#__PURE__*/React.createElement(DatePickerAny, _extends({}, restCp, {
+          format: dateFmt,
+          showTime: {
+            format: timeFmt
+          }
+        }));
+      }
     case 'Upload':
       return /*#__PURE__*/React.createElement(UploadAny, componentProps);
     case 'Input':
@@ -79,11 +256,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,
@@ -97,25 +279,283 @@ 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,
-    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var handleSubmit = useCallback(function (values, errors, field) {
+    labelAlign = _ref.labelAlign,
+    labelCol = _ref.labelCol,
+    globalSize = _ref.size,
+    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded2);
+  // ─── 直接传递列数，通过 device="desktop" 锁定成桌面模式，防止 ResponsiveGrid 根据视口自动缩列
+  // ResponsiveGrid columns 只接受 number/string，不接受 breakpoint 对象
+  var fixedColumns = columns;
+
+  // ─── 兼容旧版 4-value spacing → 标准化为 [rowGap, colGap] ─────────────────
+  var normalizedGap = 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 = useMemo(function () {
+    return normalizeInitialValues(initialValues);
+  }, [initialValues]);
+  var resolvedComputedFields = useMemo(function () {
+    return normalizeComputedFields(computedFields);
+  }, [computedFields]);
+
+  // ─── 用 ref 缓存所有字段的当前值，避免 onChange 闭包过期 ──────────────────
+  // 初始化时直接合并 resolvedInitialValues，避免 useEffect 延迟问题
+  var valuesRef = useRef(resolvedInitialValues ? _extends({}, resolvedInitialValues) : {});
+
+  // ─── 联动回填触发器：用 state 驱动组件重渲染以更新受控字段 ───────────────
+  // 注意：不预填 resolvedInitialValues，初始值通过 defaultValue（非受控）处理
+  // 预填会导致所有有初始值的字段变为受控组件，用户改值后因 linkageValues 未更新而回显旧值
+  var _useState = useState({}),
+    linkageValues = _useState[0],
+    setLinkageValues = _useState[1];
+
+  // ─── 统一 onChange 处理器（阶段一 + 阶段二核心）─────────────────────────────
+  var handleFieldChange = useCallback(function (field, value) {
+    var _extends2;
+    // 1. 更新本地 values 缓存
+    valuesRef.current = _extends({}, 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 = _extends({}, 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 = _extends({}, 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 = _extends({}, 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 _extends({}, 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 = 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 = useCallback(function (values, errors, field, buttonDataSource) {
+    // 将 Form 收集的 values 与 ref 缓存合并（兼容 initialValues 未经 onChange 的字段）
+    var mergedValues = _extends({}, valuesRef.current, values);
+    // 追加 computedFields 衍生字段
+    var finalValues = applyComputedFields(mergedValues, resolvedComputedFields);
+
+    // submitMapping：按 mode 构建请求参数（阶段五）
+    if (submitMapping) {
+      var _submitMapping$mode, _submitMapping$items, _submitMapping$fieldR, _submitMapping$items2;
+      // 向后兼容：未设置 mode 时，有 items 数组则默认 itemList，否则 passthrough
+      var mode = (_submitMapping$mode = submitMapping.mode) !== null && _submitMapping$mode !== void 0 ? _submitMapping$mode : (_submitMapping$items = submitMapping.items) !== null && _submitMapping$items !== void 0 && _submitMapping$items.length ? 'itemList' : 'passthrough';
+      if (mode === 'rename' && (_submitMapping$fieldR = submitMapping.fieldRenameMap) !== null && _submitMapping$fieldR !== void 0 && _submitMapping$fieldR.length) {
+        // ── rename：重命名指定字段，其余字段按原名透传
+        var renamed = _extends({}, finalValues);
+        submitMapping.fieldRenameMap.forEach(function (_ref3) {
+          var fromField = _ref3.fromField,
+            toField = _ref3.toField;
+          if (fromField && toField && fromField in renamed) {
+            renamed[toField] = renamed[fromField];
+            if (fromField !== toField) delete renamed[fromField];
+          }
+        });
+        finalValues = renamed;
+        cfLog('submitMapping', 'rename 模式字段重命名完成', finalValues);
+      } else if (mode === 'itemList' && (_submitMapping$items2 = submitMapping.items) !== null && _submitMapping$items2 !== void 0 && _submitMapping$items2.length) {
+        var _extends3;
+        // ── itemList：转换为动态表单格式 [{columnName, columnValue}]
+        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 = _extends({}, finalValues, (_extends3 = {}, _extends3[targetField] = itemList, _extends3));
+        cfLog('submitMapping', "itemList \u6A21\u5F0F\u5DF2\u751F\u6210 " + targetField, itemList);
+      }
+      // passthrough: finalValues 直接作为请求参数，无需处理
+    }
+    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 = _extends({}, item.placeholder ? {
+      placeholder: item.placeholder
+    } : {}, effectiveSize ? {
+      size: effectiveSize
+    } : {}, effectiveFullWidth !== undefined ? {
+      style: _extends({
+        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);
+        }
+        // DatePicker / DateTimePicker 的 onChange 返回 Moment 对象，需格式化为字符串后再存储
+        var storedValue = value;
+        if (['DatePicker', 'DateTimePicker'].includes(item.componentType) && value && typeof value.format === 'function') {
+          var _item$componentProps3;
+          var fmt = ((_item$componentProps3 = item.componentProps) === null || _item$componentProps3 === void 0 ? void 0 : _item$componentProps3.format) || (item.componentType === 'DateTimePicker' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
+          storedValue = value.format(fmt);
+        }
+        handleFieldChange(item.field, storedValue);
+      }
+    });
+
+    // 联动回填时，通过 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 = _extends({}, labelAlign ? {
+      labelAlign: labelAlign
+    } : {}, labelCol ? {
+      labelCol: labelCol
+    } : {}, effectiveSize ? {
+      size: effectiveSize
+    } : {}, item.help ? {
+      help: item.help
+    } : {}, item.extra ? {
+      extra: item.extra
+    } : {}, item.formItemProps || {});
     return /*#__PURE__*/React.createElement(ResponsiveGridCell, {
       colSpan: colSpan,
       key: (item.field || index) + "-form-item"
@@ -123,7 +563,9 @@ var CustomForm = function CustomForm(_ref) {
       label: item.label,
       name: item.field,
       required: item.required
-    }, formItemProps), renderFormItemComponent(item)));
+    }, mergedFormItemProps), renderFormItemComponent(_extends({}, item, {
+      componentProps: componentPropsWithChange
+    }))));
   });
   var childrenNodes = React.Children.toArray(children).map(function (child, index) {
     if (/*#__PURE__*/React.isValidElement(child) && child.type === ResponsiveGridCell) {
@@ -135,24 +577,62 @@ var CustomForm = function CustomForm(_ref) {
     }, child);
   });
   var hasContent = formItemNodes.length > 0 || childrenNodes.length > 0;
+
+  // initialValues 通过 defaultValue 传入 Form（非受控初始化），避免覆盖联动回填的受控值
+  var formInitialProps = {};
+  if (initialValues && Object.keys(initialValues).length > 0) {
+    formInitialProps.defaultValue = initialValues;
+    cfLog('render', '表单携带 initialValues 渲染', initialValues);
+  }
   return /*#__PURE__*/React.createElement(NextFormAny, _extends({
     className: "custom-form"
-  }, otherProps), hasContent ? /*#__PURE__*/React.createElement(ResponsiveGridAny, {
+  }, labelAlign ? {
+    labelAlign: labelAlign
+  } : {}, labelCol ? {
+    labelCol: labelCol
+  } : {}, globalSize ? {
+    size: globalSize
+  } : {}, formInitialProps, otherProps), hasContent ? /*#__PURE__*/React.createElement(ResponsiveGridAny, {
     className: "custom-form__grid",
-    gap: spacing,
-    columns: columns
+    device: "desktop",
+    gap: normalizedGap,
+    columns: fixedColumns
   }, formItemNodes, childrenNodes) : /*#__PURE__*/React.createElement("div", {
     className: "custom-form__empty"
-  }, emptyContent), showSubmit || showReset ? /*#__PURE__*/React.createElement("div", {
-    className: "custom-form__actions"
-  }, showReset ? /*#__PURE__*/React.createElement(NextFormAny.Reset, _extends({
-    className: "custom-form__reset"
-  }, resetButtonProps), resetText) : null, showSubmit ? /*#__PURE__*/React.createElement(NextFormAny.Submit, _extends({
-    className: "custom-form__submit",
-    type: "primary",
-    validate: submitValidate,
-    onClick: handleSubmit
-  }, submitButtonProps), submitText) : null) : null);
+  }, emptyContent), effectiveOperations.length > 0 ? /*#__PURE__*/React.createElement("div", {
+    className: "custom-form__actions",
+    style: {
+      justifyContent: alignJustifyMap[operationAlign] || 'center'
+    }
+  }, effectiveOperations.map(function (op, opIndex) {
+    // ── 重置按钮 ─────────────────────────────────────────────────────
+    if (op.action === 'reset') {
+      return /*#__PURE__*/React.createElement(NextFormAny.Reset, _extends({
+        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.createElement(NextFormAny.Submit, _extends({
+        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.createElement(ButtonAny, _extends({
+      key: opIndex,
+      type: op.type || 'normal',
+      onClick: op.onClick
+    }, op.buttonProps || {}), op.text);
+  })) : null);
 };
 CustomForm.displayName = 'CustomForm';
 export default CustomForm;

package/es/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/es/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,