From 05621be75807b9eb9eee08abad2abbff26f4394b Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Tue, 23 Jun 2026 13:51:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(formBuilder):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E5=8A=A8=E6=80=81=20col=20=E6=A0=B7=E5=BC=8F=E5=8F=8A=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=EF=BC=8C=E5=A2=9E=E5=BC=BA=20FormList=20=E8=A1=8C?=
 =?UTF-8?q?=E5=AE=9A=E5=88=B6=E8=83=BD=E5=8A=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增 colStyle 属性，支持 Col 内联样式函数动态计算
- 新增 colTitle 属性，支持 Col 内部标题节点动态渲染
- 新增 rowStyle 属性，允许 FormList 每行样式动态定义
- 新增 rowTitle 属性，支持 FormList 每行标题动态渲染
---
 .../FormBuilder/FormItemsRenderer.d.ts        | 12 +++++-
 .../FormBuilder/FormItemsRenderer.js          | 42 +++++++++++++++++--
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/src/components/FormBuilder/FormItemsRenderer.d.ts b/src/components/FormBuilder/FormItemsRenderer.d.ts
index 570ba8c..54ffd38 100644
--- a/src/components/FormBuilder/FormItemsRenderer.d.ts
+++ b/src/components/FormBuilder/FormItemsRenderer.d.ts
@@ -1,9 +1,9 @@
+import type { NamePath } from "@rc-component/form/lib/interface";
 import type { ColProps } from "antd/es/col";
 import type { FormItemProps, Rule } from "antd/es/form";
 import type { FormListFieldData } from "antd/es/form/FormList";
 import type { Gutter } from "antd/es/grid/row";
-import type { NamePath } from "rc-field-form/lib/interface";
-import type { ReactElement, ReactNode } from "react";
+import type { CSSProperties, ReactElement, ReactNode } from "react";
 import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender";
 import type { DeepPartial } from "./FormBuilder";
 
@@ -131,6 +131,10 @@ export interface FormOptionBase<
   dependencies?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, Dependencies[]>;
   /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */
   onlyForLabel?: IsOnlyForLabel;
+  /** Col 的内联样式，会合并到 Col 的 style 上，支持函数动态计算 */
+  colStyle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, CSSProperties | ((formValues: AllValues) => CSSProperties)>;
+  /** Col 内部、Form.Item 之前渲染的标题节点，支持函数动态计算 */
+  colTitle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, ReactNode | ((formValues: AllValues) => ReactNode)>;
 }
 
 /**
@@ -157,6 +161,10 @@ export type FormOptionByRender<
   checkboxCol?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "checkbox" ? number : never>;
   /** Form.List 独有的属性 */
   formListUniqueProps?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? FormListUniqueProps | ((formValues: AllValues) => FormListUniqueProps) : never>;
+  /** FormList 每行的内联样式，仅 render 为 formList 时可用，支持函数按行计算 */
+  rowStyle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? CSSProperties | ((field: FormListFieldData, fieldIndex: number) => CSSProperties) : never>;
+  /** FormList 每行起始位置渲染的标题节点，仅 render 为 formList 时可用，支持函数按行计算 */
+  rowTitle?: FormOptionProperty<IsOnlyForLabel, IsCustomizeRender, RenderType extends "formList" ? ReactNode | ((field: FormListFieldData, fieldIndex: number) => ReactNode) : never>;
 };
 
 /**
diff --git a/src/components/FormBuilder/FormItemsRenderer.js b/src/components/FormBuilder/FormItemsRenderer.js
index 676491b..4b647e3 100644
--- a/src/components/FormBuilder/FormItemsRenderer.js
+++ b/src/components/FormBuilder/FormItemsRenderer.js
@@ -223,6 +223,34 @@ const FormItemsRenderer = ({
     return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
   };
 
+  // 获取 col 样式
+  const getColStyle = (option) => {
+    return typeof option.colStyle === "function"
+      ? option.colStyle(getFormValues())
+      : option.colStyle;
+  };
+
+  // 获取 col 标题（Col 内部、Form.Item 之后）
+  const getColTitle = (option) => {
+    return typeof option.colTitle === "function"
+      ? option.colTitle(getFormValues())
+      : option.colTitle;
+  };
+
+  // 获取 row 样式（FormList 的每一行）
+  const getRowStyle = (option, field, fieldIndex) => {
+    return typeof option.rowStyle === "function"
+      ? option.rowStyle(field, fieldIndex)
+      : option.rowStyle;
+  };
+
+  // 获取 row 标题（FormList 每行末尾）
+  const getRowTitle = (option, field, fieldIndex) => {
+    return typeof option.rowTitle === "function"
+      ? option.rowTitle(field, fieldIndex)
+      : option.rowTitle;
+  };
+
   // 获取是否动态表单项
   const getIsDynamicFormItem = (option, formItemProps) => {
     return (option.shouldUpdate ?? option.dependencies) || (formItemProps.shouldUpdate ?? formItemProps.dependencies);
@@ -434,7 +462,8 @@ const FormItemsRenderer = ({
       return null;
 
     return (
-      <Col key={getKey(option) || index} span={col.span} style={style}>
+      <Col key={getKey(option) || index} span={col.span} style={{ ...style, ...getColStyle(option) }}>
+        {getColTitle(option)}
         <Form.Item
           name={option.name}
           label={renderLabel(option)}
@@ -516,14 +545,18 @@ const FormItemsRenderer = ({
     const componentProps = getComponentProps(option);
 
     return (
-      <Col key={getKey(option) || index} span={col.span} style={style}>
+      <Col key={getKey(option) || index} span={col.span} style={{ ...style, ...getColStyle(option) }}>
+        {getColTitle(option)}
         <Form.List name={option.name} {...componentProps}>
           {(fields, { add, remove, move }) => (
             <>
               {fields.map((field, fieldIndex) => {
                 const listOptions = getListOptions(formListUniqueProps.options, field, fieldIndex, add, remove, move);
+                const rowStyle = getRowStyle(option, field, fieldIndex);
+                const rowTitle = getRowTitle(option, field, fieldIndex);
                 return (
-                  <Row gutter={gutter} key={field.key}>
+                  <Row gutter={gutter} key={field.key} style={rowStyle}>
+                    {rowTitle}
                     {listOptions.map((listOption, listIndex) => {
                       const col = getCol(listOption);
                       const formItemProps = getFormItemProps(listOption);
@@ -574,7 +607,8 @@ const FormItemsRenderer = ({
                         delete formItemProps.shouldUpdate;
 
                         return (
-                          <Col key={getKey(listOption) || listIndex} span={col.span} style={style}>
+                          <Col key={getKey(listOption) || listIndex} span={col.span} style={{ ...style, ...getColStyle(listOption) }}>
+                            {getColTitle(listOption)}
                             <Form.Item
                               label={renderLabel(listOption)}
                               labelCol={col.labelCol}