From bf88de6db99416a8a2f25c890aaf7d78c5e5c106 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Tue, 11 Nov 2025 09:10:08 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96FormItemsRenderer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/FormBuilder/FormItemsRenderer.d.ts |   2 +-
 components/FormBuilder/FormItemsRenderer.js   | 123 +++++++++---------
 2 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/components/FormBuilder/FormItemsRenderer.d.ts b/components/FormBuilder/FormItemsRenderer.d.ts
index 491ee57..535ecf7 100644
--- a/components/FormBuilder/FormItemsRenderer.d.ts
+++ b/components/FormBuilder/FormItemsRenderer.d.ts
@@ -61,7 +61,7 @@ export interface FormOption {
   tip?: ReactNode;
   /** 是否隐藏，默认 false，支持函数动态计算 */
   hidden?: boolean | ((formValues: FormValues) => boolean);
-  /** 是否自定义渲染，默认 false，将不生成 Form.Item */
+  /** 是否自定义渲染，完全交给外部控制渲染，默认 false */
   customizeRender?: boolean;
   /** 选项数据（用于 select、radio、checkbox） */
   items?: OptionItem[];
diff --git a/components/FormBuilder/FormItemsRenderer.js b/components/FormBuilder/FormItemsRenderer.js
index 311d44d..aa9e6a6 100644
--- a/components/FormBuilder/FormItemsRenderer.js
+++ b/components/FormBuilder/FormItemsRenderer.js
@@ -135,8 +135,8 @@ const FormItemsRenderer = ({
 
   // 获取key
   const getKey = (option) => {
-    return option.key || option.name
-  }
+    return option.key || option.name;
+  };
 
   // 渲染表单控件
   const renderFormControl = (option) => {
@@ -272,6 +272,23 @@ const FormItemsRenderer = ({
   return (
     <>
       {options.map((option, index) => {
+        // 列数
+        const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
+        const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
+        const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span };
+
+        // 使用 style 控制显示/隐藏
+        const style = collapse && index >= 3 ? { display: "none" } : undefined;
+
+        // 如果是 customizeRender 类型，完全交给外部控制渲染
+        if (option.customizeRender) {
+          return (
+            <Col key={getKey(option) || index} span={itemSpan} style={style}>
+              {option.render}
+            </Col>
+          );
+        }
+
         // 如果是 onlyForLabel 类型，不渲染任何UI，只在表单中保存数据
         if (option.onlyForLabel) {
           return (
@@ -286,14 +303,6 @@ const FormItemsRenderer = ({
           );
         }
 
-        // 列数
-        const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
-        const itemLabelCol = option.labelCol ?? (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
-        const itemWrapperCol = option.wrapperCol ?? { span: 24 - itemLabelCol.span };
-
-        // 使用 style 控制显示/隐藏
-        const style = collapse && index >= 3 ? { display: "none" } : undefined;
-
         // 如果是分割线
         if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
           return (
@@ -306,43 +315,39 @@ const FormItemsRenderer = ({
         // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
         if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
           return (
-            option.customizeRender
-              ? (renderFormControl(option))
-              : (
-                  <Form.Item
-                    key={getKey(option) || index}
-                    noStyle
-                    preserve={false}
-                    shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
-                    dependencies={option.dependencies || option?.componentProps?.dependencies}
-                  >
-                    {() => {
-                    // 支持动态计算 hidden
-                      const hidden = typeof option.hidden === "function"
-                        ? option.hidden(getFormValues())
-                        : (option.hidden ?? false);
+            <Form.Item
+              key={getKey(option) || index}
+              noStyle
+              preserve={false}
+              shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
+              dependencies={option.dependencies || option?.componentProps?.dependencies}
+            >
+              {() => {
+                // 支持动态计算 hidden
+                const hidden = typeof option.hidden === "function"
+                  ? option.hidden(getFormValues())
+                  : (option.hidden ?? false);
 
-                      if (hidden)
-                        return null;
+                if (hidden)
+                  return null;
 
-                      return (
-                        <Col key={getKey(option) || index} span={itemSpan} style={style}>
-                          <Form.Item
-                            name={option.name}
-                            label={renderLabel(option)}
-                            rules={getRules(option)}
-                            labelCol={itemLabelCol}
-                            wrapperCol={itemWrapperCol}
-                            preserve={false}
-                            {...getFormItemProps(option)}
-                          >
-                            {renderFormControl(option)}
-                          </Form.Item>
-                        </Col>
-                      );
-                    }}
-                  </Form.Item>
-                )
+                return (
+                  <Col key={getKey(option) || index} span={itemSpan} style={style}>
+                    <Form.Item
+                      name={option.name}
+                      label={renderLabel(option)}
+                      rules={getRules(option)}
+                      labelCol={itemLabelCol}
+                      wrapperCol={itemWrapperCol}
+                      preserve={false}
+                      {...getFormItemProps(option)}
+                    >
+                      {renderFormControl(option)}
+                    </Form.Item>
+                  </Col>
+                );
+              }}
+            </Form.Item>
           );
         }
 
@@ -357,23 +362,17 @@ const FormItemsRenderer = ({
 
         return (
           <Col key={getKey(option) || index} span={itemSpan} style={style}>
-            {
-              option.customizeRender
-                ? (renderFormControl(option))
-                : (
-                    <Form.Item
-                      name={option.name}
-                      label={renderLabel(option)}
-                      rules={getRules(option)}
-                      labelCol={itemLabelCol}
-                      wrapperCol={itemWrapperCol}
-                      preserve={false}
-                      {...getFormItemProps(option)}
-                    >
-                      {renderFormControl(option)}
-                    </Form.Item>
-                  )
-            }
+            <Form.Item
+              name={option.name}
+              label={renderLabel(option)}
+              rules={getRules(option)}
+              labelCol={itemLabelCol}
+              wrapperCol={itemWrapperCol}
+              preserve={false}
+              {...getFormItemProps(option)}
+            >
+              {renderFormControl(option)}
+            </Form.Item>
           </Col>
         );
       })}