refactor(form): 优化选择类组件的渲染方式

- 将 Select、Radio、Checkbox 组件的 options 属性改为直接传入选项数组，简化子组件结构
- Select 组件更改 showSearch 的 optionFilterProp 为 label，提升搜索匹配准确度
- Basic Select 组件同样改用 options 属性传递选项，移除手动渲染 Option 子组件
- SelectCreate 组件改为使用 options 传递选项，删除手动渲染逻辑
- MapSelector 中的固定区域选择改为使用 options 传递选项，代码更简洁易读

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:
+      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}>
-            {
-              option.checkboxCol
-                ? (
               <Row>
-                      {(option.items || []).map((item) => {
-                        const { value, label, disabled } = getSelectableItemAttributes(item, itemsFieldKey);
-                        return (
+                {selectableOptions.map(({ value, label, disabled }) => (
                   <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>
           );
+        }
+        return <Checkbox.Group options={selectableOptions} {...componentProps} />;
+      }
 
       case FORM_ITEM_RENDER_ENUM.DATE:
         return <DatePicker placeholder={placeholder} format="YYYY-MM-DD" style={{ width: "100%" }} {...componentProps} />;

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>

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}
+    />
   );
 }
 

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>
+    />
   );
 }