优化FormItemsRenderer

components/FormBuilder/FormBuilder.js

@@ -44,6 +44,7 @@ const FormBuilder = (props) => {
       <Row gutter={gutter}>
         <FormItemsRenderer
           options={options}
+          labelCol={labelCol}
           span={span}
           useAutoGenerateRequired={useAutoGenerateRequired}
         />

components/FormBuilder/FormItemsRenderer.d.ts

@@ -59,7 +59,7 @@ export interface FormOption {
   tip?: ReactNode;
   /** 是否隐藏，默认 false，支持函数动态计算 */
   hidden?: boolean | ((formValues: FormValues) => boolean);
-  /** 是否自定义渲染，默认 false，将不生成 Col 和 Form.Item（ 仅生效 render、items、itemsField、componentProps ） */
+  /** 是否自定义渲染，默认 false，将不生成 Form.Item */
   customizeRender?: boolean;
   /** 选项数据（用于 select、radio、checkbox） */
   items?: OptionItem[];
@@ -69,9 +69,9 @@ export interface FormOption {
   componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
   /** 传递给 Form.Item 的属性，支持函数动态计算 */
   formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
-  /** label 栅格配置 */
+  /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
   labelCol?: ColProps;
-  /** wrapper 栅格配置 */
+  /** wrapper 栅格配置，默认为 24 - labelCol.span */
   wrapperCol?: ColProps;
   /** 是否应该更新（用于表单联动） */
   shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);

components/FormBuilder/FormItemsRenderer.js

@@ -22,6 +22,7 @@ const { RangePicker } = DatePicker;
  */
 const FormItemsRenderer = ({
   options,
+  labelCol,
   span = 12,
   collapse = false,
   useAutoGenerateRequired = true,
@@ -260,7 +261,11 @@ const FormItemsRenderer = ({
   return (
     <>
       {options.map((option, index) => {
+        // 列数
         const itemSpan = option.render === FORM_ITEM_RENDER_ENUM.DIVIDER ? 24 : option.span ?? span;
+        const itemLabelCol = option.labelCol ? option.labelCol : (itemSpan === 24 ? { span: labelCol.span / 2 } : labelCol);
+        const itemWrapperCol = option.wrapperCol ? option.wrapperCol : { span: 24 - itemLabelCol.span };
+
         // 使用 style 控制显示/隐藏
         const style = collapse && index >= 3 ? { display: "none" } : undefined;
 
@@ -299,8 +304,8 @@ const FormItemsRenderer = ({
                             name={option.name}
                             label={renderLabel(option)}
                             rules={getRules(option)}
-                            labelCol={option.labelCol}
-                            wrapperCol={option.wrapperCol}
+                            labelCol={itemLabelCol}
+                            wrapperCol={itemWrapperCol}
                             {...getFormItemProps(option)}
                           >
                             {renderFormControl(option)}
@@ -318,22 +323,24 @@ const FormItemsRenderer = ({
           return null;
 
         return (
-          option.customizeRender
-            ? (renderFormControl(option))
-            : (
-                <Col key={option.name || index} span={itemSpan} style={style}>
-                  <Form.Item
-                    name={option.name}
-                    label={renderLabel(option)}
-                    rules={getRules(option)}
-                    labelCol={option.labelCol}
-                    wrapperCol={option.wrapperCol}
-                    {...getFormItemProps(option)}
-                  >
-                    {renderFormControl(option)}
-                  </Form.Item>
-                </Col>
-              )
+          <Col key={option.name || index} span={itemSpan} style={style}>
+            {
+              option.customizeRender
+                ? (renderFormControl(option))
+                : (
+                    <Form.Item
+                      name={option.name}
+                      label={renderLabel(option)}
+                      rules={getRules(option)}
+                      labelCol={itemLabelCol}
+                      wrapperCol={itemWrapperCol}
+                      {...getFormItemProps(option)}
+                    >
+                      {renderFormControl(option)}
+                    </Form.Item>
+                  )
+            }
+          </Col>
         );
       })}
     </>

components/Search/index.js

@@ -80,6 +80,7 @@ const Search = (props) => {
       <Row className={classNameRef.current}>
         <FormItemsRenderer
           options={options}
+          labelCol={labelCol}
           span={6}
           collapse={collapse}
           useAutoGenerateRequired={false}