From bb63ad5258edf1b2ebd3dc8f551590f73e45c8c6 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Tue, 14 Apr 2026 17:20:05 +0800 Subject: [PATCH] =?UTF-8?q?refactor(form):=20=E4=BC=98=E5=8C=96=E8=A1=A8?= =?UTF-8?q?=E5=8D=95=E9=85=8D=E7=BD=AE=E9=A1=B9=E7=B1=BB=E5=9E=8B=E5=AE=9A?= =?UTF-8?q?=E4=B9=89=E4=BB=A5=E6=94=AF=E6=8C=81=E6=9B=B4=E7=B2=BE=E7=A1=AE?= =?UTF-8?q?=E7=9A=84=E7=B1=BB=E5=9E=8B=E7=BA=A6=E6=9D=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FormBuilder/FormItemsRenderer.d.ts | 94 ++++++++++++------- 1 file changed, 62 insertions(+), 32 deletions(-) diff --git a/src/components/FormBuilder/FormItemsRenderer.d.ts b/src/components/FormBuilder/FormItemsRenderer.d.ts index 61f6542..f8a51c8 100644 --- a/src/components/FormBuilder/FormItemsRenderer.d.ts +++ b/src/components/FormBuilder/FormItemsRenderer.d.ts @@ -72,10 +72,15 @@ export interface FormListUniqueProps { addInsertIndex?: number; } +/** + * 表单配置项属性类型辅助工具 + */ +type FormOptionProperty = O extends true ? never : (C extends true ? never : T); + /** * 表单配置项公共字段 */ -export interface FormOptionBase { +export interface FormOptionBase { /** React 需要的 key，如果传递了唯一的 name，则不需要 */ key?: string; /** 表单项字段名 */ @@ -83,77 +88,102 @@ export interface FormOptionBase { /** 表单项标签 */ label?: ReactNode; /** 占据栅格列数，默认 12 */ - span?: number | string; + span?: O extends true ? never : (number | string); /** 是否必填，默认 true，支持函数动态计算 */ - required?: boolean | ((formValues: FormValues) => boolean); + required?: FormOptionProperty boolean)>; /** 验证规则 */ - rules?: Rule | Rule[]; + rules?: FormOptionProperty; /** 是否使用字符验证限制 */ - useConstraints?: boolean; + useConstraints?: FormOptionProperty; /** 占位符文本，默认会根据传入的 render 类型自动判断（请选择、请输入）和 label 组合 */ - placeholder?: ReactNode; + placeholder?: FormOptionProperty; /** 提示信息，传入将在 label 右侧生成图标展示 tooltip */ - tip?: ReactNode; + tip?: FormOptionProperty; /** 是否隐藏，默认 false，支持函数动态计算 */ - hidden?: boolean | ((formValues: FormValues) => boolean); + hidden?: O extends true ? never : (boolean | ((formValues: FormValues) => boolean)); /** 是否自定义渲染，完全交给外部控制渲染，默认 false */ - customizeRender?: boolean; - /** 选项数据（用于 select、radio、checkbox） */ - items?: OptionItem[]; - /** 字段键配置 */ - itemsField?: ItemsFieldConfig; - /** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */ - checkboxCol?: number; + customizeRender?: C; /** 传递给 Form.Item 的属性，支持函数动态计算 */ - formItemProps?: FormItemProps | ((formValues: FormValues) => FormItemProps); + formItemProps?: FormOptionProperty FormItemProps)>; /** label 栅格配置，默认直接使用外层的 labelCol，如果 span 等于 24，是外层的 labelCol.span 一半 */ - labelCol?: ColProps; + labelCol?: FormOptionProperty; /** wrapper 栅格配置，默认 24 - labelCol.span */ - wrapperCol?: ColProps; + wrapperCol?: FormOptionProperty; /** 是否应该更新（用于表单联动） */ - shouldUpdate?: boolean | ((prevValues: FormValues, nextValues: FormValues, info: { source?: string }) => boolean); + shouldUpdate?: FormOptionProperty boolean)>; /** 依赖字段（用于表单联动） */ - dependencies?: FormFieldName[]; + dependencies?: FormOptionProperty; /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */ - onlyForLabel?: boolean; - /** Form.List 独有的属性 */ - formListUniqueProps?: FormListUniqueProps | ((formValues: FormValues) => FormListUniqueProps); + onlyForLabel?: O; } /** * 按 render 类型区分的表单项 */ -export type FormOptionByRender = FormOptionBase & { +export type FormOptionByRender = FormOptionBase & { /** 渲染类型（写字面量时 componentProps 会按该类型推导） */ render: K; /** 传递给表单控件的属性，类型由 render 决定 */ - componentProps?: FORM_ITEM_RENDER_TYPE_MAP[K] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP[K]); + componentProps?: FormOptionProperty FORM_ITEM_RENDER_TYPE_MAP[K])>; + /** 选项数据（用于 select、radio、checkbox） */ + items?: FormOptionProperty; + /** 字段键配置 */ + itemsField?: FormOptionProperty; + /** checkbox 的栅格数量，如果不传入不使用栅格，传入才使用 */ + checkboxCol?: FormOptionProperty; + /** Form.List 独有的属性 */ + formListUniqueProps?: FormOptionProperty FormListUniqueProps) : never>; }; /** * 不写 render 或 render 为 input 时的表单项（默认按输入框） */ -export type FormOptionDefault = FormOptionBase & { +export type FormOptionDefault = FormOptionBase & { + /** 渲染类型，默认 input */ render?: "input" | undefined; /** 传递给 Input 的属性 */ componentProps?: FORM_ITEM_RENDER_TYPE_MAP["input"] | ((formValues: FormValues) => FORM_ITEM_RENDER_TYPE_MAP["input"]); + /** 选项数据（用于 select、radio、checkbox），input 时不需要 */ + items?: never; + /** 字段键配置，input 时不需要 */ + itemsField?: never; + /** checkbox 的栅格数量，input 时不需要 */ + checkboxCol?: never; + /** Form.List 独有的属性，input 时不需要 */ + formListUniqueProps?: never; }; /** * 自定义渲染时的表单项（render 为 ReactNode 时使用） */ -export type FormOptionCustomRender = FormOptionBase & { - render?: ReactNode; - componentProps?: Record | ((formValues: FormValues) => Record); +export type FormOptionCustomRender = FormOptionBase & { + /** 渲染类型，默认 ReactNode */ + render: ReactNode; + /** 传递给表单控件的属性，自定义渲染时不需要 */ + componentProps?: FormOptionProperty; + /** 选项数据（用于 select、radio、checkbox），自定义渲染时不需要 */ + items?: never; + /** 字段键配置，自定义渲染时不需要 */ + itemsField?: never; + /** checkbox 的栅格数量，自定义渲染时不需要 */ + checkboxCol?: never; + /** Form.List 独有的属性，自定义渲染时不需要 */ + formListUniqueProps?: never; }; /** * 表单配置项 */ export type FormOption - = | FormOptionDefault - | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] - | FormOptionCustomRender; + = | FormOptionDefault + | FormOptionDefault + | FormOptionDefault + | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] + | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] + | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] + | FormOptionCustomRender + | FormOptionCustomRender + | FormOptionCustomRender; /** * FormItemsRenderer 组件属性