From 487cdd142adce79fb6125ab25b25e7536478e4c0 Mon Sep 17 00:00:00 2001
From: LiuJiaNan <15703339975@163.com>
Date: Tue, 7 Jul 2026 13:53:50 +0800
Subject: [PATCH] =?UTF-8?q?refactor(form):=20=E4=BC=98=E5=8C=96=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=B1=BB=E7=BB=84=E4=BB=B6=E7=9A=84=E6=B8=B2=E6=9F=93?=
 =?UTF-8?q?=E6=96=B9=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将 Select、Radio、Checkbox 组件的 options 属性改为直接传入选项数组，简化子组件结构
- Select 组件更改 showSearch 的 optionFilterProp 为 label，提升搜索匹配准确度
- Basic Select 组件同样改用 options 属性传递选项，移除手动渲染 Option 子组件
- SelectCreate 组件改为使用 options 传递选项，删除手动渲染逻辑
- MapSelector 中的固定区域选择改为使用 options 传递选项，代码更简洁易读
---
 .../FormBuilder/FormItemsRenderer.js          | 82 +++++++------------
 src/components/Map/MapSelector.js             | 10 ++-
 src/components/Select/Basic/index.js          | 22 ++---
 src/components/SelectCreate/index.js          |  9 +-
 4 files changed, 47 insertions(+), 76 deletions(-)

diff --git a/src/components/FormBuilder/FormItemsRenderer.js b/src/components/FormBuilder/FormItemsRenderer.js
index 29e230e..875ee0e 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} />;
diff --git a/src/components/Map/MapSelector.js b/src/components/Map/MapSelector.js
index 6253ac9..ef8ffa1 100644
--- a/src/components/Map/MapSelector.js
+++ b/src/components/Map/MapSelector.js
@@ -286,10 +286,12 @@ const MapSelector = (props) => {
             <Row gutter={24}>
               <Col span={12}>
                 <Form.Item label="所属区域">
-                  <Select value={currentArea} onChange={e => setCurrentArea(e)} allowClear>
-                    <Select.Option value="1">东港区</Select.Option>
-                    <Select.Option value="2">西港区</Select.Option>
-                  </Select>
+                  <Select
+                    value={currentArea}
+                    onChange={e => setCurrentArea(e)}
+                    allowClear
+                    options={[{ value: "1", label: "东港区" }, { value: "2", label: "西港区" }]}
+                  />
                 </Form.Item>
               </Col>
             </Row>
diff --git a/src/components/Select/Basic/index.js b/src/components/Select/Basic/index.js
index 7b151cc..4615482 100644
--- a/src/components/Select/Basic/index.js
+++ b/src/components/Select/Basic/index.js
@@ -59,17 +59,17 @@ function BasicSelect(props) {
   }, [data]);
 
   return (
-    <Select placeholder={`请选择${placeholder}`} showSearch={{ optionFilterProp: "children" }} allowClear onChange={handleChange} {...restProps}>
-      {data.map((item) => {
-        const value = item[idKey];
-        const label = labelRender ? labelRender(item) : item[nameKey];
-        return (
-          <Select.Option key={value} value={value}>
-            {label}
-          </Select.Option>
-        );
-      })}
-    </Select>
+    <Select
+      placeholder={`请选择${placeholder}`}
+      showSearch={{ optionFilterProp: "children" }}
+      allowClear
+      onChange={handleChange}
+      options={data.map(item => ({
+        value: item[idKey],
+        label: labelRender ? labelRender(item) : item[nameKey],
+      }))}
+      {...restProps}
+    />
   );
 }
 
diff --git a/src/components/SelectCreate/index.js b/src/components/SelectCreate/index.js
index ea3ca29..3a5ec6b 100644
--- a/src/components/SelectCreate/index.js
+++ b/src/components/SelectCreate/index.js
@@ -39,14 +39,9 @@ function SelectCreate(props) {
           }
         </div>
       )}
+      options={items.map(item => ({ value: item.id, label: item.name }))}
       {...restProps}
-    >
-      {
-        items.map(item => (
-          <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
-        ))
-      }
-    </Select>
+    />
   );
 }