From 565d2194496d4fd8b04e042c19540a1cd410f8cd Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Mon, 3 Aug 2026 15:18:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor(form-builder):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=A1=A8=E5=8D=95=E9=A1=B9=E6=B8=B2=E6=9F=93=E5=8F=8A=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E6=9B=B4=E6=96=B0=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 Select、Radio.Group 和 Checkbox.Group 的 options 属性简化渲染逻辑
- 针对 Checkbox 支持列布局时保留原有 Row/Col 结构，保证布局一致性
- 增加 renderDynamicFormItem 函数，统一处理动态更新表单项的渲染逻辑
- 优化动态表单项渲染时对 shouldUpdate 和 dependencies 的支持，改进联动效果
- 在渲染其他类型表单项时添加隐藏判断，避免不必要渲染
- 调整表单列表内部动态表单项的渲染顺序，保证联动功能正常
- 移除冗余代码，提升代码可读性和维护性
---
 .../FormBuilder/FormItemsRenderer.js          | 150 ++++++++----------
 1 file changed, 70 insertions(+), 80 deletions(-)

diff --git a/src/components/FormBuilder/FormItemsRenderer.js b/src/components/FormBuilder/FormItemsRenderer.js
index c7de69e..2353e08 100644
--- a/src/components/FormBuilder/FormItemsRenderer.js
+++ b/src/components/FormBuilder/FormItemsRenderer.js
@@ -302,64 +302,38 @@ const FormItemsRenderer = ({
 
       case FORM_ITEM_RENDER_ENUM.SELECT:
         return (
-          <Select placeholder={placeholder} showSearch={{ optionFilterProp: "children" }} allowClear {...componentProps}>
-            {(option.items || []).map((item) => {
-              const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey);
-              return (
-                <Select.Option key={value} value={value} disabled={disabled}>
-                  {label}
-                </Select.Option>
-              );
-            })}
-          </Select>
+          <Select
+            placeholder={placeholder}
+            showSearch={{ optionFilterProp: "label" }}
+            allowClear
+            options={(option.items || []).map(item => getSelectableItemAttributes(item, itemsFieldKey))}
+            {...componentProps}
+          />
         );
 
       case FORM_ITEM_RENDER_ENUM.RADIO:
-        return (
-          <Radio.Group {...componentProps}>
-            {(option.items || []).map((item) => {
-              const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey);
-              return (
-                <Radio key={value} value={value} disabled={disabled}>
-                  {label}
-                </Radio>
-              );
-            })}
-          </Radio.Group>
-        );
+        return <Radio.Group options={(option.items || []).map(item => getSelectableItemAttributes(item, itemsFieldKey))} {...componentProps} />;
 
-      case FORM_ITEM_RENDER_ENUM.CHECKBOX:
-        return (
-          <Checkbox.Group {...componentProps}>
-            {
-              option.checkboxCol
-                ? (
-                    <Row>
-                      {(option.items || []).map((item) => {
-                        const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey);
-                        return (
-                          <Col span={option.checkboxCol} key={value}>
-                            <Checkbox value={value} disabled={disabled}>
-                              {label}
-                            </Checkbox>
-                          </Col>
-                        );
-                      })}
-                    </Row>
-                  )
-                : (
-                    (option.items || []).map((item) => {
-                      const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey);
-                      return (
-                        <Checkbox key={value} value={value} disabled={disabled}>
-                          {label}
-                        </Checkbox>
-                      );
-                    })
-                  )
-            }
-          </Checkbox.Group>
-        );
+      case FORM_ITEM_RENDER_ENUM.CHECKBOX: {
+        const selectableOptions = (option.items || []).map(item => getSelectableItemAttributes(item, itemsFieldKey));
+        // checkboxCol 时需要栅格布局，Checkbox.Group 的 options 不支持列布局，此处使用 children + Row/Col 保持原有行为
+        if (option.checkboxCol) {
+          return (
+            <Checkbox.Group {...componentProps}>
+              <Row>
+                {selectableOptions.map(({ value, label, disabled }) => (
+                  <Col span={option.checkboxCol} key={value}>
+                    <Checkbox value={value} disabled={disabled}>
+                      {label}
+                    </Checkbox>
+                  </Col>
+                ))}
+              </Row>
+            </Checkbox.Group>
+          );
+        }
+        return <Checkbox.Group options={selectableOptions} {...componentProps} />;
+      }
 
       case FORM_ITEM_RENDER_ENUM.DATE:
         return <DatePicker placeholder={placeholder} format="YYYY-MM-DD" style={{ width: "100%" }} {...componentProps} />;
@@ -485,6 +459,9 @@ const FormItemsRenderer = ({
   const renderOtherTypeItem = ({ option, style, col, index, preserve }) => {
     const componentProps = getComponentProps(option);
 
+    if (getHidden(option.hidden))
+      return null;
+
     // 如果是 customizeRender 类型，完全交给外部控制渲染
     if (option.customizeRender) {
       return (
@@ -520,30 +497,14 @@ const FormItemsRenderer = ({
     return null;
   };
 
-  // 渲染需要动态更新的表单项
-  const renderDynamicFormItem = ({ option, index, style, col, preserve }) => {
-    const formItemProps = getFormItemProps(option);
-
-    return (
-      <Form.Item
-        key={getKey(option) || index}
-        noStyle
-        preserve={preserve}
-        shouldUpdate={option.shouldUpdate ?? formItemProps.shouldUpdate}
-        dependencies={option.dependencies ?? formItemProps.dependencies}
-      >
-        {() => {
-          return renderFormItem({ option, style, col, index, preserve });
-        }}
-      </Form.Item>
-    );
-  };
-
   // 渲染 Form.List
   const renderFormList = ({ option, index, col, style }) => {
     const formListUniqueProps = getFormListUniqueProps(option);
     const componentProps = getComponentProps(option);
 
+    if (getHidden(option.hidden))
+      return null;
+
     return (
       <Col key={getKey(option) || index} span={col.span} style={{ ...style, ...getColStyle(option) }}>
         {getColTitle(option)}
@@ -568,6 +529,12 @@ const FormItemsRenderer = ({
                         index: `${fieldIndex}_${listIndex}`,
                         preserve: true,
                       };
+
+                      // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
+                      // 注意：动态检测必须在 renderOtherTypeItem 之前，否则特殊类型（customizeRender / onlyForLabel / DIVIDER）无法响应联动
+                      if (getIsDynamicFormItem(listOption, formItemProps))
+                        return renderDynamicFormItem(params);
+
                       const otherTypeItem = renderOtherTypeItem(params);
                       if (otherTypeItem)
                         return otherTypeItem;
@@ -575,9 +542,6 @@ const FormItemsRenderer = ({
                       if (listOption.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
                         return renderFormList(params);
 
-                      if (getIsDynamicFormItem(listOption, formItemProps))
-                        return renderDynamicFormItem(params);
-
                       // 从后往前查找最后一个普通可见表单项，特殊项不允许承载操作按钮。
                       const findLastButtonIndex = () => {
                         for (let i = listOptions.length - 1; i >= 0; i--) {
@@ -662,6 +626,32 @@ const FormItemsRenderer = ({
     );
   };
 
+  // 渲染需要动态更新的表单项
+  const renderDynamicFormItem = ({ option, index, style, col, preserve }) => {
+    const formItemProps = getFormItemProps(option);
+
+    return (
+      <Form.Item
+        key={getKey(option) || index}
+        noStyle
+        preserve={preserve}
+        shouldUpdate={option.shouldUpdate ?? formItemProps.shouldUpdate}
+        dependencies={option.dependencies ?? formItemProps.dependencies}
+      >
+        {() => {
+          const otherTypeItem = renderOtherTypeItem({ option, style, col, index, preserve });
+          if (otherTypeItem)
+            return otherTypeItem;
+
+          if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
+            return renderFormList({ option, index, col, style });
+
+          return renderFormItem({ option, style, col, index, preserve });
+        }}
+      </Form.Item>
+    );
+  };
+
   return (
     <>
       {options.map((option, index) => {
@@ -677,6 +667,10 @@ const FormItemsRenderer = ({
           preserve: false,
         };
 
+        // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
+        if (getIsDynamicFormItem(option, formItemProps))
+          return renderDynamicFormItem(params);
+
         // 处理特殊类型的表单项
         const otherTypeItem = renderOtherTypeItem(params);
         if (otherTypeItem)
@@ -686,10 +680,6 @@ const FormItemsRenderer = ({
         if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST)
           return renderFormList(params);
 
-        // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
-        if (getIsDynamicFormItem(option, formItemProps))
-          return renderDynamicFormItem(params);
-
         // 普通表单项（静态配置）
         return renderFormItem(params);
       })}