From 0ced0479df5b4966c578f220048540205084ed39 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Fri, 6 Mar 2026 10:30:42 +0800 Subject: [PATCH] =?UTF-8?q?=E9=87=8D=E6=9E=84=20FormItemsRenderer=20?= =?UTF-8?q?=E4=B8=AD=E7=9A=84=E8=A1=A8=E5=8D=95=E9=85=8D=E7=BD=AE=E9=A1=B9?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=9A=E4=B9=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/settings.local.json | 3 +- src/components/FormBuilder/FormBuilder.d.ts | 5 +- .../FormBuilder/FormItemsRenderer.d.ts | 57 +++++++++++++++---- src/components/Search/index.d.ts | 5 +- 4 files changed, 51 insertions(+), 19 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index ef897ed..8fa5c6e 100644 --- a/.claude/settings.local.json +++ b/.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": [] diff --git a/src/components/FormBuilder/FormBuilder.d.ts b/src/components/FormBuilder/FormBuilder.d.ts index 6057236..8d33ae6 100644 --- a/src/components/FormBuilder/FormBuilder.d.ts +++ b/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 { * 表单构建器组件 */ declare const FormBuilder: FC & { - useForm: typeof useForm; - useWatch: typeof useWatch; + useForm: typeof import("antd").Form.useForm; + useWatch: typeof import("antd").Form.useWatch; }; export default FormBuilder; diff --git a/src/components/FormBuilder/FormItemsRenderer.d.ts b/src/components/FormBuilder/FormItemsRenderer.d.ts index 021aeda..61f6542 100644 --- a/src/components/FormBuilder/FormItemsRenderer.d.ts +++ b/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 { +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 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 boolean); /** 依赖字段（用于表单联动） */ - dependencies?: NamePath[]; + dependencies?: FormFieldName[]; /** 是否仅用于保存标签，不渲染到页面上，只在表单中保存数据，默认 false */ onlyForLabel?: boolean; /** Form.List 独有的属性 */ formListUniqueProps?: FormListUniqueProps | ((formValues: FormValues) => FormListUniqueProps); } +/** + * 按 render 类型区分的表单项 + */ +export type FormOptionByRender = 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 | ((formValues: FormValues) => Record); +}; + +/** + * 表单配置项 + */ +export type FormOption + = | FormOptionDefault + | { [K in keyof FORM_ITEM_RENDER_TYPE_MAP]: FormOptionByRender }[keyof FORM_ITEM_RENDER_TYPE_MAP] + | FormOptionCustomRender; + /** * FormItemsRenderer 组件属性 */ diff --git a/src/components/Search/index.d.ts b/src/components/Search/index.d.ts index be1eb46..2a7ed64 100644 --- a/src/components/Search/index.d.ts +++ b/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 { * 支持自动展开/收起功能，当表单项超过4个时显示展开/收起按钮 */ declare const Search: FC & { - useForm: typeof useForm; - useWatch: typeof useWatch; + useForm: typeof import("antd").Form.useForm; + useWatch: typeof import("antd").Form.useWatch; }; export default Search;