重构 FormItemsRenderer 中的表单配置项类型定义

.claude/settings.local.json

@@ -9,7 +9,8 @@
       "Bash(git rm:*)",
       "Bash(git check-ignore:*)",
       "Bash(git checkout:*)",
-      "Bash(find:*)"
+      "Bash(find:*)",
+      "Bash(mkdir:*)"
     ],
     "deny": [],
     "ask": []

src/components/FormBuilder/FormBuilder.d.ts

@@ -1,5 +1,4 @@
 import type { FormInstance, FormProps } from "antd/es/form";
-import type { useForm, useWatch } from "antd/es/form/Form";
 import type { Gutter } from "antd/es/grid/row";
 import type { FC, ReactNode } from "react";
 import type { FormOption, FormValues } from "./FormItemsRenderer";
@@ -42,8 +41,8 @@ export interface FormBuilderProps extends Omit<FormProps, "form"> {
  * 表单构建器组件
  */
 declare const FormBuilder: FC<FormBuilderProps> & {
-  useForm: typeof useForm;
-  useWatch: typeof useWatch;
+  useForm: typeof import("antd").Form.useForm;
+  useWatch: typeof import("antd").Form.useWatch;
 };
 
 export default FormBuilder;

src/components/FormBuilder/FormItemsRenderer.d.ts

@@ -2,12 +2,14 @@ import type { ColProps } from "antd/es/col";
 import type { FormItemProps, Rule } from "antd/es/form";
 import type { FormListFieldData } from "antd/es/form/FormList";
 import type { Gutter } from "antd/es/grid/row";
-import type { NamePath } from "rc-field-form/lib/interface";
 import type { FC, ReactNode } from "react";
 import type { FORM_ITEM_RENDER_TYPE_MAP } from "../../enum/formItemRender";
 
+/** 表单项 name */
+export type FormFieldName = string | number | (string | number)[];
+
 /**
- * 选项项数据类型
+ * 选择项数据类型
  */
 export interface OptionItem {
   /** ID字段 */
@@ -22,7 +24,7 @@ export interface OptionItem {
 /**
  * 字段键配置
  */
-export interface itemsFieldConfig {
+export interface ItemsFieldConfig {
   /** 值字段的键名，默认 'bianma' */
   valueKey?: string;
   /** 标签字段的键名，默认 'name' */
@@ -71,17 +73,15 @@ export interface FormListUniqueProps {
 }
 
 /**
- * 表单配置项
+ * 表单配置项公共字段
  */
-export interface FormOption<T extends keyof FORM_ITEM_RENDER_TYPE_MAP = keyof FORM_ITEM_RENDER_TYPE_MAP> {
+export interface FormOptionBase {
   /** React 需要的 key，如果传递了唯一的 name，则不需要 */
   key?: string;
   /** 表单项字段名 */
-  name?: string | string[];
+  name?: FormFieldName;
   /** 表单项标签 */
   label?: ReactNode;
-  /** 渲染类型 */
-  render?: T | ReactNode;
   /** 占据栅格列数，默认 12 */
   span?: number | string;
   /** 是否必填，默认 true，支持函数动态计算 */
@@ -101,11 +101,9 @@ export interface FormOption<T extends keyof FORM_ITEM_RENDER_TYPE_MAP = keyof FO
   /** 选项数据（用于 select、radio、checkbox） */
   items?: OptionItem[];
   /** 字段键配置 */
-  itemsField?: itemsFieldConfig;
+  itemsField?: ItemsFieldConfig;
   /** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */
   checkboxCol?: number;
-  /** 传递给表单控件的属性，支持函数动态计算 */
-  componentProps?: FORM_ITEM_RENDER_TYPE_MAP[T] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[T]);
   /** 传递给 Form.Item 的属性，支持函数动态计算 */
   formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps);
   /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */
@@ -115,13 +113,48 @@ export interface FormOption<T extends keyof FORM_ITEM_RENDER_TYPE_MAP = keyof FO
   /** 是否应该更新（用于表单联动） */
   shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean);
   /** 依赖字段（用于表单联动） */
-  dependencies?: NamePath[];
+  dependencies?: FormFieldName[];
   /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */
   onlyForLabel?: boolean;
   /** Form.List 独有的属性 */
   formListUniqueProps?: FormListUniqueProps | ((formValues: FormValues) => FormListUniqueProps);
 }
 
+/**
+ * 按 render 类型区分的表单项
+ */
+export type FormOptionByRender<K extends keyof FORM_ITEM_RENDER_TYPE_MAP> = FormOptionBase & {
+  /** 渲染类型（写字面量时 componentProps 会按该类型推导） */
+  render: K;
+  /** 传递给表单控件的属性，类型由 render 决定 */
+  componentProps?: FORM_ITEM_RENDER_TYPE_MAP[K] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[K]);
+};
+
+/**
+ * 不写 render 或 render 为 input 时的表单项（默认按输入框）
+ */
+export type FormOptionDefault = FormOptionBase & {
+  render?: "input" | undefined;
+  /** 传递给 Input 的属性 */
+  componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP["input"]);
+};
+
+/**
+ * 自定义渲染时的表单项（render 为 ReactNode 时使用）
+ */
+export type FormOptionCustomRender = FormOptionBase & {
+  render?: ReactNode;
+  componentProps?: Record<string, any> | ((formValues: FormValues) => Record<string, any>);
+};
+
+/**
+ * 表单配置项
+ */
+export type FormOption
+  = | FormOptionDefault
+    | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender<K> }[keyof FORM_ITEM_RENDER_TYPE_MAP]
+    | FormOptionCustomRender;
+
 /**
  * FormItemsRenderer 组件属性
  */

src/components/Search/index.d.ts

@@ -1,5 +1,4 @@
 import type { FormInstance, FormProps } from "antd/es/form";
-import type { useForm, useWatch } from "antd/es/form/Form";
 import type { FC, ReactNode } from "react";
 import type { FormOption } from "../FormBuilder/FormItemsRenderer";
 
@@ -38,8 +37,8 @@ export interface SearchProps extends Omit<FormProps, "form" | "onFinish"> {
  * 支持自动展开/收起功能，当表单项超过4个时显示展开/收起按钮
  */
 declare const Search: FC<SearchProps> & {
-  useForm: typeof useForm;
-  useWatch: typeof useWatch;
+  useForm: typeof import("antd").Form.useForm;
+  useWatch: typeof import("antd").Form.useWatch;
 };
 
 export default Search;