zy-react-library 1.1.0 → 1.1.2

package/components/FormBuilder/FormItemsRenderer.js

@@ -1,24 +1,16 @@
-import { InfoCircleOutlined } from "@ant-design/icons";
-import {
-  Button,
-  Checkbox,
-  Col,
-  DatePicker,
-  Divider,
-  Form,
-  Input,
-  InputNumber,
-  Radio,
-  Row,
-  Select,
-  Tooltip,
-} from "antd";
-import dayjs from "dayjs";
-import { FORM_ITEM_RENDER_ENUM } from "../../enum/formItemRender";
-
-const { TextArea } = Input;
-const { RangePicker } = DatePicker;
-
+import { InfoCircleOutlined } from '@ant-design/icons';
+import { Input, DatePicker, Form, Col, Divider, Row, Button, Tooltip, Checkbox, Radio, Select, InputNumber } from 'antd';
+import dayjs from 'dayjs';
+import { FORM_ITEM_RENDER_ENUM } from '../../enum/formItemRender/index.js';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+
+const {
+  TextArea
+} = Input;
+const {
+  RangePicker
+} = DatePicker;
+
 /**
  * 表单项渲染器组件
  * @param {object} props - 组件属性
@@ -29,563 +21,569 @@ const { RangePicker } = DatePicker;
  * @param {boolean} props.collapse - 是否折叠（仅显示前3项）
  * @param {boolean} props.useAutoGenerateRequired - 是否自动生成必填规则
  * @param {object} props.initialValues - 初始值
- */
-const FormItemsRenderer = ({
-  options,
-  labelCol,
-  gutter = 24,
-  span = 12,
-  collapse = false,
-  useAutoGenerateRequired = true,
-  initialValues,
-}) => {
-  const form = Form.useFormInstance();
-
-  // 获取表单值，优先使用 initialValues
-  const getFormValues = () => {
-    const formValues = form.getFieldsValue();
-    // 如果表单值为空但有 initialValues，则使用 initialValues
-    if (Object.keys(formValues).length === 0 && initialValues) {
-      return initialValues;
-    }
-    return formValues;
-  };
-
-  // 获取传给组件的属性
-  const getComponentProps = (option) => {
-    return typeof option.componentProps === "function"
-      ? option.componentProps(getFormValues())
-      : (option.componentProps || {});
-  };
-
-  // 获取 Form.List 独有的属性
-  const getFormListUniqueProps = (option) => {
-    const defaultProps = {
-      showAddButton: true,
-      showRemoveButton: true,
-      addButtonText: "添加",
-      removeButtonText: "删除",
-      options: [],
-      addDefaultValue: {},
-      addInsertIndex: undefined,
-    };
-
-    if (typeof option.formListUniqueProps === "function") {
-      return {
-        ...defaultProps,
-        ...option.formListUniqueProps(getFormValues()),
-      };
-    }
-
-    return {
-      ...defaultProps,
-      ...(option.formListUniqueProps || {}),
-    };
-  };
-
-  // 获取传给formItem的属性
-  const getFormItemProps = (option) => {
-    const formItemProps = typeof option.formItemProps === "function"
-      ? option.formItemProps(getFormValues())
-      : (option.formItemProps || {});
-
-    // 为日期组件添加特殊处理
-    if ([
-      FORM_ITEM_RENDER_ENUM.DATE,
-      FORM_ITEM_RENDER_ENUM.DATE_MONTH,
-      FORM_ITEM_RENDER_ENUM.DATE_YEAR,
-      FORM_ITEM_RENDER_ENUM.DATETIME,
-    ].includes(option.render)) {
-      formItemProps.getValueFromEvent = (_, dateString) => dateString;
-      formItemProps.getValueProps = value => ({ value: value ? dayjs(value) : undefined });
-    }
-
-    // 为日期周组件添加特殊处理
-    if ([
-      FORM_ITEM_RENDER_ENUM.DATE_WEEK,
-    ].includes(option.render)) {
-      formItemProps.getValueFromEvent = (_, dateString) => dateString;
-      formItemProps.getValueProps = value => ({ value: value ? dayjs(value, "YYYY-wo") : undefined });
-    }
-
-    // 为日期范围组件添加特殊处理
-    if ([
-      FORM_ITEM_RENDER_ENUM.DATE_RANGE,
-      FORM_ITEM_RENDER_ENUM.DATETIME_RANGE,
-    ].includes(option.render)) {
-      formItemProps.getValueFromEvent = (_, dateString) => dateString;
-      formItemProps.getValueProps = value => ({ value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined });
-    }
-
-    return formItemProps;
-  };
-
-  // 获取items里的value和label字段key
-  const getItemsFieldKey = (option) => {
-    return {
-      valueKey: option?.itemsField?.valueKey || "bianma",
-      labelKey: option?.itemsField?.labelKey || "name",
-    };
-  };
-
-  // 获取 required
-  const getRequired = (required) => {
-    // 支持动态计算 required
-    return typeof required === "function"
-      ? required(getFormValues())
-      : (required ?? true);
-  };
-
-  // 获取验证规则
-  const getRules = (option) => {
-    if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER)
-      return [];
-
-    const rules = [];
-
-    /** @type {string | Function} */
-    const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
-    switch (render) {
-      case FORM_ITEM_RENDER_ENUM.INPUT:
-        option.useConstraints !== false && rules.push({ max: 50, message: "最多输入50字符" });
-        break;
-
-      case FORM_ITEM_RENDER_ENUM.TEXTAREA:
-        option.useConstraints !== false && rules.push({ max: 500, message: "最多输入500字符" });
-        break;
-
-      case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
-      case FORM_ITEM_RENDER_ENUM.NUMBER:
-        option.useConstraints !== false && rules.push({ pattern: /^(\d+)(\.\d{1,2})?$/, message: "请输入正确的数字，最多保留两位小数" });
-        option.useConstraints !== false && rules.push({
-          validator: (_, value) => {
-            if (value && Math.abs(Number.parseFloat(value)) > 999999999) {
-              return Promise.reject("输入数值超出安全范围");
-            }
-            return Promise.resolve();
-          },
-        });
-        break;
-    }
-
-    if (!useAutoGenerateRequired)
-      return option.rules ? (Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules]) : rules;
-
-    if (getRequired(option.required)) {
-      const isBlurTrigger = !option.render || [
-        FORM_ITEM_RENDER_ENUM.INPUT,
-        FORM_ITEM_RENDER_ENUM.TEXTAREA,
-        FORM_ITEM_RENDER_ENUM.INPUT_NUMBER,
-        FORM_ITEM_RENDER_ENUM.NUMBER,
-      ].includes(option.render);
-
-      rules.push({ required: true, message: `${isBlurTrigger ? "请输入" : "请选择"}${option.label}` });
-
-      if (option.rules) {
-        if (Array.isArray(option.rules)) {
-          rules.push(...option.rules);
-        }
-        else {
-          rules.push(option.rules);
-        }
-      }
-
-      return rules;
-    }
-
-    return option.rules ? (Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules]) : rules;
-  };
-
-  // 获取key
-  const getKey = (option) => {
-    return option.key || option.name;
-  };
-
-  // 使用 style 控制显示/隐藏
-  const getStyle = (index) => {
-    return collapse && index >= 3 ? { display: "none" } : undefined;
-  };
-
-  // 列数
-  const getCol = (option) => {
-    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 };
-    return { span: itemSpan, labelCol: itemLabelCol, wrapperCol: itemWrapperCol };
-  };
-
-  // 获取 hidden
-  const getHidden = (hidden) => {
-    // 支持动态计算 hidden
-    return typeof hidden === "function"
-      ? hidden(getFormValues())
-      : (hidden ?? false);
-  };
-
-  // 获取 listOptions
-  const getListOptions = (listOptions, field, fieldIndex, add, remove, move) => {
-    return typeof listOptions === "function"
-      ? listOptions(field, fieldIndex, { field, fieldIndex, add, remove, move })
-      : (listOptions ?? []);
-  };
-
-  // 渲染表单控件
-  const renderFormControl = (option) => {
-    const componentProps = getComponentProps(option);
-    const itemsFieldKey = getItemsFieldKey(option);
-    /** @type {string | Function} */
-    const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
-    const placeholder = option.placeholder || `请${[FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(render) ? "输入" : "选择"}${option.label}`;
-
-    switch (render) {
-      case FORM_ITEM_RENDER_ENUM.INPUT:
-        return <Input placeholder={placeholder} maxLength={50} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.TEXTAREA:
-        return <TextArea placeholder={placeholder} maxLength={500} showCount={true} rows={3} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
-      case FORM_ITEM_RENDER_ENUM.NUMBER:
-        return <InputNumber placeholder={placeholder} style={{ width: "100%" }} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.SELECT:
-        return (
-          <Select placeholder={placeholder} showSearch allowClear optionFilterProp="children" {...componentProps}>
-            {(option.items || []).map((item) => {
-              const value = item[itemsFieldKey.valueKey];
-              const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
-              return (
-                <Select.Option key={value} value={value}>
-                  {label}
-                </Select.Option>
-              );
-            })}
-          </Select>
-        );
-
-      case FORM_ITEM_RENDER_ENUM.RADIO:
-        return (
-          <Radio.Group {...componentProps}>
-            {(option.items || []).map((item) => {
-              const value = item[itemsFieldKey.valueKey];
-              const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
-              return (
-                <Radio key={value} value={value}>
-                  {label}
-                </Radio>
-              );
-            })}
-          </Radio.Group>
-        );
-
-      case FORM_ITEM_RENDER_ENUM.CHECKBOX:
-        return (
-          <Checkbox.Group {...componentProps}>
-            {(option.items || []).map((item) => {
-              const value = item[itemsFieldKey.valueKey];
-              const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
-              return (
-                <Checkbox key={value} value={value}>
-                  {label}
-                </Checkbox>
-              );
-            })}
-          </Checkbox.Group>
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE:
-        return <DatePicker placeholder={placeholder} format="YYYY-MM-DD" style={{ width: "100%" }} {...componentProps} />;
-
-      case FORM_ITEM_RENDER_ENUM.DATE_MONTH:
-        return (
-          <DatePicker
-            picker="month"
-            placeholder={placeholder}
-            format="YYYY-MM"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE_YEAR:
-        return (
-          <DatePicker
-            picker="year"
-            placeholder={placeholder}
-            format="YYYY"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE_WEEK:
-        return (
-          <DatePicker
-            picker="week"
-            placeholder={placeholder}
-            format="YYYY-wo"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATE_RANGE:
-        return (
-          <RangePicker
-            placeholder={[`请选择开始${option.label}`, `请选择结束${option.label}`]}
-            format="YYYY-MM-DD"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATETIME:
-        return (
-          <DatePicker
-            showTime
-            placeholder={placeholder}
-            format="YYYY-MM-DD HH:mm:ss"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DATETIME_RANGE:
-        return (
-          <RangePicker
-            showTime
-            placeholder={[`请选择开始${option.label}`, `请选择结束${option.label}`]}
-            format="YYYY-MM-DD HH:mm:ss"
-            style={{ width: "100%" }}
-            {...componentProps}
-          />
-        );
-
-      case FORM_ITEM_RENDER_ENUM.DIVIDER:
-        return null;
-
-      default:
-        return render;
-    }
-  };
-
-  // 渲染 label（带提示）
-  const renderLabel = (option) => {
-    if (!option.tip)
-      return option.label;
-
-    return (
-      <>
-        {option.label}
-        <Tooltip title={option.tip}>
-          <InfoCircleOutlined style={{ marginLeft: 4, fontSize: 12 }} />
-        </Tooltip>
-      </>
-    );
-  };
-
-  // 渲染普通表单项
-  const renderFormItem = ({ option, style, col, index }) => {
-    if (getHidden(option.hidden))
-      return null;
-
-    return (
-      <Col key={getKey(option) || index} span={col.span} style={style}>
-        <Form.Item
-          name={option.name}
-          label={renderLabel(option)}
-          rules={getRules(option)}
-          labelCol={col.labelCol}
-          wrapperCol={col.wrapperCol}
-          preserve={false}
-          {...getFormItemProps(option)}
-        >
-          {renderFormControl(option)}
-        </Form.Item>
-      </Col>
-    );
-  };
-
-  // 渲染特殊类型的表单项
-  const renderOtherTypeItem = ({ option, style, col, index }) => {
-    const componentProps = getComponentProps(option);
-
-    // 如果是 customizeRender 类型，完全交给外部控制渲染
-    if (option.customizeRender) {
-      return (
-        <Col key={getKey(option) || index} span={col.span} style={style}>
-          {option.render}
-        </Col>
-      );
-    }
-
-    // 如果是 onlyForLabel 类型，不渲染任何UI，只在表单中保存数据
-    if (option.onlyForLabel) {
-      return (
-        <Form.Item
-          key={getKey(option) || index}
-          name={option.name}
-          noStyle
-          preserve={false}
-        >
-          <input type="hidden" />
-        </Form.Item>
-      );
-    }
-
-    // 如果是分割线
-    if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
-      return (
-        <Col key={getKey(option) || index} span={col.span} style={style}>
-          <Divider orientation="left" {...componentProps}>{option.label}</Divider>
-        </Col>
-      );
-    }
-
-    return null;
-  };
-
-  // 渲染 Form.List
-  const renderFormList = (option, index, col, style) => {
-    const formListUniqueProps = getFormListUniqueProps(option);
-    const componentProps = getComponentProps(option);
-
-    return (
-      <Col key={getKey(option) || index} span={col.span} style={style}>
-        <Form.List name={option.name} {...componentProps}>
-          {(fields, { add, remove, move }) => (
-            <>
-              {fields.map((field, fieldIndex) => {
-                const listOptions = getListOptions(option.formListUniqueProps.options, field, fieldIndex, add, remove, move);
-                return (
-                  <Row gutter={gutter} key={field.key}>
-                    {listOptions.map((listOption, listIndex) => {
-                      const col = getCol(listOption);
-
-                      const params = {
-                        option: listOption,
-                        style,
-                        col,
-                        index: `${fieldIndex}_${listIndex}`,
-                      };
-                      const otherTypeItem = renderOtherTypeItem(params);
-                      if (otherTypeItem)
-                        return otherTypeItem;
-
-                      // 如果是最后一个表单项，则在其后添加操作按钮
-                      // 这样可以确保每个表单项组都有添加/删除按钮
-                      if (listIndex === listOptions.length - 1) {
-                        return (
-                          <Col key={getKey(listOption) || listIndex} span={col.span} style={style}>
-                            <Form.Item
-                              label={renderLabel(listOption)}
-                              labelCol={col.labelCol}
-                              wrapperCol={col.wrapperCol}
-                              preserve={false}
-                              required={getRequired(listOption.required)}
-                              {...getFormItemProps(listOption)}
-                            >
-                              <div style={{ display: "flex", gap: 10, alignItems: "center", justifyContent: "space-between" }}>
-                                <div style={{ flex: 1 }}>
-                                  <Form.Item
-                                    noStyle
-                                    rules={getRules(listOption)}
-                                    name={listOption.name}
-                                  >
-                                    {renderFormControl(listOption)}
-                                  </Form.Item>
-                                </div>
-                                {
-                                  // 只有当不是第一行时才显示删除按钮
-                                  fieldIndex >= 1
-                                    ? (
-                                        formListUniqueProps.showRemoveButton
-                                        && (
-                                          <Button
-                                            type="primary"
-                                            danger
-                                            onClick={() => remove(field.name)}
-                                          >
-                                            {formListUniqueProps.removeButtonText}
-                                          </Button>
-                                        )
-                                      )
-                                    : (
-                                        // 第一行显示添加按钮
-                                        formListUniqueProps.showAddButton
-                                        && (
-                                          <Button
-                                            type="primary"
-                                            onClick={() => add(formListUniqueProps.addDefaultValue, formListUniqueProps.addInsertIndex)}
-                                          >
-                                            {formListUniqueProps.addButtonText}
-                                          </Button>
-                                        )
-                                      )
-                                }
-                              </div>
-                            </Form.Item>
-                          </Col>
-                        );
-                      }
-
-                      return renderFormItem(params);
-                    })}
-                  </Row>
-                );
-              })}
-            </>
-          )}
-        </Form.List>
-      </Col>
-    );
-  };
-
-  // 渲染需要动态更新的表单项
-  const renderDynamicFormItem = (option, index, style, col) => {
-    return (
-      <Form.Item
-        key={getKey(option) || index}
-        noStyle
-        preserve={false}
-        shouldUpdate={option.shouldUpdate ?? option?.componentProps?.shouldUpdate}
-        dependencies={option.dependencies ?? option?.componentProps?.dependencies}
-      >
-        {() => {
-          return renderFormItem({ option, style, col, index });
-        }}
-      </Form.Item>
-    );
-  };
-
-  return (
-    <>
-      {options.map((option, index) => {
-        const col = getCol(option);
-        const style = getStyle(index);
-
-        // 处理特殊类型的表单项
-        const otherTypeItem = renderOtherTypeItem({ option, style, col, index });
-        if (otherTypeItem)
-          return otherTypeItem;
-
-        // 如果是 Form.List
-        if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST) {
-          return renderFormList(option, index, col, style);
-        }
-
-        // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
-        if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
-          return renderDynamicFormItem(option, index, style, col);
-        }
-
-        // 普通表单项（静态配置）
-        return renderFormItem({ option, style, col, index });
-      })}
-    </>
-  );
-};
-
-FormItemsRenderer.displayName = "FormItemsRenderer";
-
-export default FormItemsRenderer;
+ */
+const FormItemsRenderer = ({
+  options,
+  labelCol,
+  gutter = 24,
+  span = 12,
+  collapse = false,
+  useAutoGenerateRequired = true,
+  initialValues
+}) => {
+  const form = Form.useFormInstance();
+
+  // 获取表单值，优先使用 initialValues
+  const getFormValues = () => {
+    const formValues = form.getFieldsValue();
+    // 如果表单值为空但有 initialValues，则使用 initialValues
+    if (Object.keys(formValues).length === 0 && initialValues) {
+      return initialValues;
+    }
+    return formValues;
+  };
+
+  // 获取传给组件的属性
+  const getComponentProps = option => {
+    return typeof option.componentProps === "function" ? option.componentProps(getFormValues()) : option.componentProps || {};
+  };
+
+  // 获取 Form.List 独有的属性
+  const getFormListUniqueProps = option => {
+    const defaultProps = {
+      showAddButton: true,
+      showRemoveButton: true,
+      addButtonText: "添加",
+      removeButtonText: "删除",
+      options: [],
+      addDefaultValue: {},
+      addInsertIndex: undefined
+    };
+    if (typeof option.formListUniqueProps === "function") {
+      return {
+        ...defaultProps,
+        ...option.formListUniqueProps(getFormValues())
+      };
+    }
+    return {
+      ...defaultProps,
+      ...(option.formListUniqueProps || {})
+    };
+  };
+
+  // 获取传给formItem的属性
+  const getFormItemProps = option => {
+    const formItemProps = typeof option.formItemProps === "function" ? option.formItemProps(getFormValues()) : option.formItemProps || {};
+
+    // 为日期组件添加特殊处理
+    if ([FORM_ITEM_RENDER_ENUM.DATE, FORM_ITEM_RENDER_ENUM.DATE_MONTH, FORM_ITEM_RENDER_ENUM.DATE_YEAR, FORM_ITEM_RENDER_ENUM.DATETIME].includes(option.render)) {
+      formItemProps.getValueFromEvent = (_, dateString) => dateString;
+      formItemProps.getValueProps = value => ({
+        value: value ? dayjs(value) : undefined
+      });
+    }
+
+    // 为日期周组件添加特殊处理
+    if ([FORM_ITEM_RENDER_ENUM.DATE_WEEK].includes(option.render)) {
+      formItemProps.getValueFromEvent = (_, dateString) => dateString;
+      formItemProps.getValueProps = value => ({
+        value: value ? dayjs(value, "YYYY-wo") : undefined
+      });
+    }
+
+    // 为日期范围组件添加特殊处理
+    if ([FORM_ITEM_RENDER_ENUM.DATE_RANGE, FORM_ITEM_RENDER_ENUM.DATETIME_RANGE].includes(option.render)) {
+      formItemProps.getValueFromEvent = (_, dateString) => dateString;
+      formItemProps.getValueProps = value => ({
+        value: Array.isArray(value) ? value.map(v => v ? dayjs(v) : undefined) : undefined
+      });
+    }
+    return formItemProps;
+  };
+
+  // 获取items里的value和label字段key
+  const getItemsFieldKey = option => {
+    return {
+      valueKey: option?.itemsField?.valueKey || "bianma",
+      labelKey: option?.itemsField?.labelKey || "name"
+    };
+  };
+
+  // 获取 required
+  const getRequired = required => {
+    // 支持动态计算 required
+    return typeof required === "function" ? required(getFormValues()) : required ?? true;
+  };
+
+  // 获取验证规则
+  const getRules = option => {
+    if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) return [];
+    const rules = [];
+
+    /** @type {string | Function} */
+    const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
+    switch (render) {
+      case FORM_ITEM_RENDER_ENUM.INPUT:
+        option.useConstraints !== false && rules.push({
+          max: 50,
+          message: "最多输入50字符"
+        });
+        break;
+      case FORM_ITEM_RENDER_ENUM.TEXTAREA:
+        option.useConstraints !== false && rules.push({
+          max: 500,
+          message: "最多输入500字符"
+        });
+        break;
+      case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
+      case FORM_ITEM_RENDER_ENUM.NUMBER:
+        option.useConstraints !== false && rules.push({
+          pattern: /^(\d+)(\.\d{1,2})?$/,
+          message: "请输入正确的数字，最多保留两位小数"
+        });
+        option.useConstraints !== false && rules.push({
+          validator: (_, value) => {
+            if (value && Math.abs(Number.parseFloat(value)) > 999999999) {
+              return Promise.reject("输入数值超出安全范围");
+            }
+            return Promise.resolve();
+          }
+        });
+        break;
+    }
+    if (!useAutoGenerateRequired) return option.rules ? Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules] : rules;
+    if (getRequired(option.required)) {
+      const isBlurTrigger = !option.render || [FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(option.render);
+      rules.push({
+        required: true,
+        message: `${isBlurTrigger ? "请输入" : "请选择"}${option.label}`
+      });
+      if (option.rules) {
+        if (Array.isArray(option.rules)) {
+          rules.push(...option.rules);
+        } else {
+          rules.push(option.rules);
+        }
+      }
+      return rules;
+    }
+    return option.rules ? Array.isArray(option.rules) ? [...option.rules, ...rules] : [option.rules, ...rules] : rules;
+  };
+
+  // 获取key
+  const getKey = option => {
+    return option.key || option.name;
+  };
+
+  // 使用 style 控制显示/隐藏
+  const getStyle = index => {
+    return collapse && index >= 3 ? {
+      display: "none"
+    } : undefined;
+  };
+
+  // 列数
+  const getCol = option => {
+    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
+    };
+    return {
+      span: itemSpan,
+      labelCol: itemLabelCol,
+      wrapperCol: itemWrapperCol
+    };
+  };
+
+  // 获取 hidden
+  const getHidden = hidden => {
+    // 支持动态计算 hidden
+    return typeof hidden === "function" ? hidden(getFormValues()) : hidden ?? false;
+  };
+
+  // 获取 listOptions
+  const getListOptions = (listOptions, field, fieldIndex, add, remove, move) => {
+    return typeof listOptions === "function" ? listOptions(field, fieldIndex, {
+      field,
+      fieldIndex,
+      add,
+      remove,
+      move
+    }) : listOptions ?? [];
+  };
+
+  // 渲染表单控件
+  const renderFormControl = option => {
+    const componentProps = getComponentProps(option);
+    const itemsFieldKey = getItemsFieldKey(option);
+    /** @type {string | Function} */
+    const render = option.render || FORM_ITEM_RENDER_ENUM.INPUT;
+    const placeholder = option.placeholder || `请${[FORM_ITEM_RENDER_ENUM.INPUT, FORM_ITEM_RENDER_ENUM.TEXTAREA, FORM_ITEM_RENDER_ENUM.INPUT_NUMBER, FORM_ITEM_RENDER_ENUM.NUMBER].includes(render) ? "输入" : "选择"}${option.label}`;
+    switch (render) {
+      case FORM_ITEM_RENDER_ENUM.INPUT:
+        return /*#__PURE__*/jsx(Input, {
+          placeholder: placeholder,
+          maxLength: 50,
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.TEXTAREA:
+        return /*#__PURE__*/jsx(TextArea, {
+          placeholder: placeholder,
+          maxLength: 500,
+          showCount: true,
+          rows: 3,
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.INPUT_NUMBER:
+      case FORM_ITEM_RENDER_ENUM.NUMBER:
+        return /*#__PURE__*/jsx(InputNumber, {
+          placeholder: placeholder,
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.SELECT:
+        return /*#__PURE__*/jsx(Select, {
+          placeholder: placeholder,
+          showSearch: true,
+          allowClear: true,
+          optionFilterProp: "children",
+          ...componentProps,
+          children: (option.items || []).map(item => {
+            const value = item[itemsFieldKey.valueKey];
+            const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
+            return /*#__PURE__*/jsx(Select.Option, {
+              value: value,
+              children: label
+            }, value);
+          })
+        });
+      case FORM_ITEM_RENDER_ENUM.RADIO:
+        return /*#__PURE__*/jsx(Radio.Group, {
+          ...componentProps,
+          children: (option.items || []).map(item => {
+            const value = item[itemsFieldKey.valueKey];
+            const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
+            return /*#__PURE__*/jsx(Radio, {
+              value: value,
+              children: label
+            }, value);
+          })
+        });
+      case FORM_ITEM_RENDER_ENUM.CHECKBOX:
+        return /*#__PURE__*/jsx(Checkbox.Group, {
+          ...componentProps,
+          children: (option.items || []).map(item => {
+            const value = item[itemsFieldKey.valueKey];
+            const label = item[typeof itemsFieldKey.labelKey === "function" ? itemsFieldKey.labelKey(item) : itemsFieldKey.labelKey];
+            return /*#__PURE__*/jsx(Checkbox, {
+              value: value,
+              children: label
+            }, value);
+          })
+        });
+      case FORM_ITEM_RENDER_ENUM.DATE:
+        return /*#__PURE__*/jsx(DatePicker, {
+          placeholder: placeholder,
+          format: "YYYY-MM-DD",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DATE_MONTH:
+        return /*#__PURE__*/jsx(DatePicker, {
+          picker: "month",
+          placeholder: placeholder,
+          format: "YYYY-MM",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DATE_YEAR:
+        return /*#__PURE__*/jsx(DatePicker, {
+          picker: "year",
+          placeholder: placeholder,
+          format: "YYYY",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DATE_WEEK:
+        return /*#__PURE__*/jsx(DatePicker, {
+          picker: "week",
+          placeholder: placeholder,
+          format: "YYYY-wo",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DATE_RANGE:
+        return /*#__PURE__*/jsx(RangePicker, {
+          placeholder: [`请选择开始${option.label}`, `请选择结束${option.label}`],
+          format: "YYYY-MM-DD",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DATETIME:
+        return /*#__PURE__*/jsx(DatePicker, {
+          showTime: true,
+          placeholder: placeholder,
+          format: "YYYY-MM-DD HH:mm:ss",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DATETIME_RANGE:
+        return /*#__PURE__*/jsx(RangePicker, {
+          showTime: true,
+          placeholder: [`请选择开始${option.label}`, `请选择结束${option.label}`],
+          format: "YYYY-MM-DD HH:mm:ss",
+          style: {
+            width: "100%"
+          },
+          ...componentProps
+        });
+      case FORM_ITEM_RENDER_ENUM.DIVIDER:
+        return null;
+      default:
+        return render;
+    }
+  };
+
+  // 渲染 label（带提示）
+  const renderLabel = option => {
+    if (!option.tip) return option.label;
+    return /*#__PURE__*/jsxs(Fragment, {
+      children: [option.label, /*#__PURE__*/jsx(Tooltip, {
+        title: option.tip,
+        children: /*#__PURE__*/jsx(InfoCircleOutlined, {
+          style: {
+            marginLeft: 4,
+            fontSize: 12
+          }
+        })
+      })]
+    });
+  };
+
+  // 渲染普通表单项
+  const renderFormItem = ({
+    option,
+    style,
+    col,
+    index
+  }) => {
+    if (getHidden(option.hidden)) return null;
+    return /*#__PURE__*/jsx(Col, {
+      span: col.span,
+      style: style,
+      children: /*#__PURE__*/jsx(Form.Item, {
+        name: option.name,
+        label: renderLabel(option),
+        rules: getRules(option),
+        labelCol: col.labelCol,
+        wrapperCol: col.wrapperCol,
+        preserve: false,
+        ...getFormItemProps(option),
+        children: renderFormControl(option)
+      })
+    }, getKey(option) || index);
+  };
+
+  // 渲染特殊类型的表单项
+  const renderOtherTypeItem = ({
+    option,
+    style,
+    col,
+    index
+  }) => {
+    const componentProps = getComponentProps(option);
+
+    // 如果是 customizeRender 类型，完全交给外部控制渲染
+    if (option.customizeRender) {
+      return /*#__PURE__*/jsx(Col, {
+        span: col.span,
+        style: style,
+        children: option.render
+      }, getKey(option) || index);
+    }
+
+    // 如果是 onlyForLabel 类型，不渲染任何UI，只在表单中保存数据
+    if (option.onlyForLabel) {
+      return /*#__PURE__*/jsx(Form.Item, {
+        name: option.name,
+        noStyle: true,
+        preserve: false,
+        children: /*#__PURE__*/jsx("input", {
+          type: "hidden"
+        })
+      }, getKey(option) || index);
+    }
+
+    // 如果是分割线
+    if (option.render === FORM_ITEM_RENDER_ENUM.DIVIDER) {
+      return /*#__PURE__*/jsx(Col, {
+        span: col.span,
+        style: style,
+        children: /*#__PURE__*/jsx(Divider, {
+          orientation: "left",
+          ...componentProps,
+          children: option.label
+        })
+      }, getKey(option) || index);
+    }
+    return null;
+  };
+
+  // 渲染 Form.List
+  const renderFormList = (option, index, col, style) => {
+    const formListUniqueProps = getFormListUniqueProps(option);
+    const componentProps = getComponentProps(option);
+    return /*#__PURE__*/jsx(Col, {
+      span: col.span,
+      style: style,
+      children: /*#__PURE__*/jsx(Form.List, {
+        name: option.name,
+        ...componentProps,
+        children: (fields, {
+          add,
+          remove,
+          move
+        }) => /*#__PURE__*/jsx(Fragment, {
+          children: fields.map((field, fieldIndex) => {
+            const listOptions = getListOptions(option.formListUniqueProps.options, field, fieldIndex, add, remove, move);
+            return /*#__PURE__*/jsx(Row, {
+              gutter: gutter,
+              children: listOptions.map((listOption, listIndex) => {
+                const col = getCol(listOption);
+                const params = {
+                  option: listOption,
+                  style,
+                  col,
+                  index: `${fieldIndex}_${listIndex}`
+                };
+                const otherTypeItem = renderOtherTypeItem(params);
+                if (otherTypeItem) return otherTypeItem;
+
+                // 如果是最后一个表单项，则在其后添加操作按钮
+                // 这样可以确保每个表单项组都有添加/删除按钮
+                if (listIndex === listOptions.length - 1) {
+                  return /*#__PURE__*/jsx(Col, {
+                    span: col.span,
+                    style: style,
+                    children: /*#__PURE__*/jsx(Form.Item, {
+                      label: renderLabel(listOption),
+                      labelCol: col.labelCol,
+                      wrapperCol: col.wrapperCol,
+                      preserve: false,
+                      required: getRequired(listOption.required),
+                      ...getFormItemProps(listOption),
+                      children: /*#__PURE__*/jsxs("div", {
+                        style: {
+                          display: "flex",
+                          gap: 10,
+                          alignItems: "center",
+                          justifyContent: "space-between"
+                        },
+                        children: [/*#__PURE__*/jsx("div", {
+                          style: {
+                            flex: 1
+                          },
+                          children: /*#__PURE__*/jsx(Form.Item, {
+                            noStyle: true,
+                            rules: getRules(listOption),
+                            name: listOption.name,
+                            children: renderFormControl(listOption)
+                          })
+                        }),
+                        // 只有当不是第一行时才显示删除按钮
+                        fieldIndex >= 1 ? formListUniqueProps.showRemoveButton && /*#__PURE__*/jsx(Button, {
+                          type: "primary",
+                          danger: true,
+                          onClick: () => remove(field.name),
+                          children: formListUniqueProps.removeButtonText
+                        }) :
+                        // 第一行显示添加按钮
+                        formListUniqueProps.showAddButton && /*#__PURE__*/jsx(Button, {
+                          type: "primary",
+                          onClick: () => add(formListUniqueProps.addDefaultValue, formListUniqueProps.addInsertIndex),
+                          children: formListUniqueProps.addButtonText
+                        })]
+                      })
+                    })
+                  }, getKey(listOption) || listIndex);
+                }
+                return renderFormItem(params);
+              })
+            }, field.key);
+          })
+        })
+      })
+    }, getKey(option) || index);
+  };
+
+  // 渲染需要动态更新的表单项
+  const renderDynamicFormItem = (option, index, style, col) => {
+    return /*#__PURE__*/jsx(Form.Item, {
+      noStyle: true,
+      preserve: false,
+      shouldUpdate: option.shouldUpdate ?? option?.componentProps?.shouldUpdate,
+      dependencies: option.dependencies ?? option?.componentProps?.dependencies,
+      children: () => {
+        return renderFormItem({
+          option,
+          style,
+          col,
+          index
+        });
+      }
+    }, getKey(option) || index);
+  };
+  return /*#__PURE__*/jsx(Fragment, {
+    children: options.map((option, index) => {
+      const col = getCol(option);
+      const style = getStyle(index);
+
+      // 处理特殊类型的表单项
+      const otherTypeItem = renderOtherTypeItem({
+        option,
+        style,
+        col,
+        index
+      });
+      if (otherTypeItem) return otherTypeItem;
+
+      // 如果是 Form.List
+      if (option.render === FORM_ITEM_RENDER_ENUM.FORM_LIST) {
+        return renderFormList(option, index, col, style);
+      }
+
+      // 如果配置了 shouldUpdate 或 dependencies，使用 Form.Item 的联动机制
+      if ((option.shouldUpdate ?? option.dependencies) || (option?.componentProps?.shouldUpdate ?? option?.componentProps?.dependencies)) {
+        return renderDynamicFormItem(option, index, style, col);
+      }
+
+      // 普通表单项（静态配置）
+      return renderFormItem({
+        option,
+        style,
+        col,
+        index
+      });
+    })
+  });
+};
+FormItemsRenderer.displayName = "FormItemsRenderer";
+
+export { FormItemsRenderer as default };