From 30e56aa336788178e24eedf1497746a31bd8b6b6 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Fri, 15 Jul 2022 17:56:45 +0800
Subject: [PATCH] feat(pro:form): add ProForm component

fix #981
---
 packages/cdk/forms/src/messages/en-US.ts      |   2 +-
 packages/cdk/forms/src/messages/zh-CN.ts      |   6 +-
 packages/cdk/forms/src/validators.ts          |   7 +-
 packages/components/checkbox/src/types.ts     |   4 +-
 .../config/__tests__/globalConfig.spec.ts     |   2 +-
 .../form/demo/CustomizedValidation.md         |   6 +-
 .../form/demo/CustomizedValidation.vue        |  11 +-
 packages/components/form/demo/DynamicItem.vue |   2 +-
 packages/components/form/docs/Index.zh.md     |   2 +-
 packages/components/form/index.ts             |   1 -
 packages/components/form/src/FormItem.tsx     |  10 +-
 .../form/src/composables/useFormItem.ts       |   3 +
 packages/components/form/src/types.ts         |  15 +-
 .../components/modal/src/ModalWrapper.tsx     |   1 +
 packages/components/table/docs/Index.zh.md    |   1 -
 packages/pro/config/src/defaultConfig.ts      |  16 +-
 packages/pro/config/src/types.ts              |  43 ++++-
 packages/pro/default.less                     |   4 +-
 packages/pro/form/__tests__/proForm.spec.ts   |  25 +++
 packages/pro/form/demo/Basic.md               |  14 ++
 packages/pro/form/demo/Basic.vue              |  69 +++++++
 packages/pro/form/demo/BasicSchema.md         |  14 ++
 packages/pro/form/demo/BasicSchema.vue        |  81 ++++++++
 packages/pro/form/demo/Register.md            |  14 ++
 packages/pro/form/demo/Register.vue           | 116 ++++++++++++
 packages/pro/form/demo/RegisterSchema.md      |  14 ++
 packages/pro/form/demo/RegisterSchema.vue     | 125 ++++++++++++
 packages/pro/form/docs/Design.en.md           |   3 +
 packages/pro/form/docs/Design.zh.md           |   3 +
 packages/pro/form/docs/Index.en.md            |  29 +++
 packages/pro/form/docs/Index.zh.md            |  89 +++++++++
 packages/pro/form/index.ts                    |  23 +++
 packages/pro/form/src/ProForm.tsx             |  76 ++++++++
 .../form/src/composables/useAjvValidator.ts   | 122 ++++++++++++
 packages/pro/form/src/composables/useForm.ts  | 178 ++++++++++++++++++
 packages/pro/form/src/types.ts                | 124 ++++++++++++
 packages/pro/form/style/index.less            |   5 +
 packages/pro/form/style/themes/default.less   |   4 +
 packages/pro/form/style/themes/default.ts     |   5 +
 .../form/style/themes/default.variable.less   |   0
 packages/pro/form/style/themes/seer.less      |   4 +
 packages/pro/form/style/themes/seer.ts        |   5 +
 .../pro/form/style/themes/seer.variable.less  |   1 +
 packages/pro/index.ts                         |   5 +-
 packages/pro/package.json                     |   2 +
 packages/pro/seer.less                        |   1 +
 packages/pro/style/variable/prefix.less       |   5 +-
 packages/pro/types.d.ts                       |   2 +
 48 files changed, 1253 insertions(+), 41 deletions(-)
 create mode 100644 packages/pro/form/__tests__/proForm.spec.ts
 create mode 100644 packages/pro/form/demo/Basic.md
 create mode 100644 packages/pro/form/demo/Basic.vue
 create mode 100644 packages/pro/form/demo/BasicSchema.md
 create mode 100644 packages/pro/form/demo/BasicSchema.vue
 create mode 100644 packages/pro/form/demo/Register.md
 create mode 100644 packages/pro/form/demo/Register.vue
 create mode 100644 packages/pro/form/demo/RegisterSchema.md
 create mode 100644 packages/pro/form/demo/RegisterSchema.vue
 create mode 100644 packages/pro/form/docs/Design.en.md
 create mode 100644 packages/pro/form/docs/Design.zh.md
 create mode 100644 packages/pro/form/docs/Index.en.md
 create mode 100644 packages/pro/form/docs/Index.zh.md
 create mode 100644 packages/pro/form/index.ts
 create mode 100644 packages/pro/form/src/ProForm.tsx
 create mode 100644 packages/pro/form/src/composables/useAjvValidator.ts
 create mode 100644 packages/pro/form/src/composables/useForm.ts
 create mode 100644 packages/pro/form/src/types.ts
 create mode 100644 packages/pro/form/style/index.less
 create mode 100644 packages/pro/form/style/themes/default.less
 create mode 100644 packages/pro/form/style/themes/default.ts
 create mode 100644 packages/pro/form/style/themes/default.variable.less
 create mode 100644 packages/pro/form/style/themes/seer.less
 create mode 100644 packages/pro/form/style/themes/seer.ts
 create mode 100644 packages/pro/form/style/themes/seer.variable.less

diff --git a/packages/cdk/forms/src/messages/en-US.ts b/packages/cdk/forms/src/messages/en-US.ts
index 31d63d97c..3c689d9e2 100644
--- a/packages/cdk/forms/src/messages/en-US.ts
+++ b/packages/cdk/forms/src/messages/en-US.ts
@@ -37,7 +37,7 @@ export const enUSMessages = {
     return `Please enter a number no greater than ${err.max}`
   },
   range: (err: Omit<ValidateError, 'message'>, __: AbstractControl): string => {
-    return `Please enter a number between ${err.min - 1}-${err.max + 1}`
+    return `Please enter a number between ${err.min}-${err.max}`
   },
   minLength: (err: Omit<ValidateError, 'message'>, __: AbstractControl): string => {
     const { minLength, isArray } = err
diff --git a/packages/cdk/forms/src/messages/zh-CN.ts b/packages/cdk/forms/src/messages/zh-CN.ts
index 64e476f0e..f12e66708 100644
--- a/packages/cdk/forms/src/messages/zh-CN.ts
+++ b/packages/cdk/forms/src/messages/zh-CN.ts
@@ -30,13 +30,13 @@ export const zhCNMessages = {
     return `请输入正确的邮箱格式${example ? ', 例: ' + example : ''}`
   },
   min: (err: Omit<ValidateError, 'message'>, __: AbstractControl): string => {
-    return `请输入一个不小于 ${err.min} 的数字`
+    return `请输入不小于 ${err.min} 的数字`
   },
   max: (err: Omit<ValidateError, 'message'>, __: AbstractControl): string => {
-    return `请输入一个不大于 ${err.max} 的数字`
+    return `请输入不大于 ${err.max} 的数字`
   },
   range: (err: Omit<ValidateError, 'message'>, __: AbstractControl): string => {
-    return `请输入一个 ${err.min - 1}-${err.max + 1} 之间的数字`
+    return `请输入 ${err.min}-${err.max} 之间的数字`
   },
   minLength: (err: Omit<ValidateError, 'message'>, __: AbstractControl): string => {
     const { minLength, isArray } = err
diff --git a/packages/cdk/forms/src/validators.ts b/packages/cdk/forms/src/validators.ts
index 15e08ae91..15335f135 100644
--- a/packages/cdk/forms/src/validators.ts
+++ b/packages/cdk/forms/src/validators.ts
@@ -13,6 +13,7 @@ import type {
   AsyncValidatorFn,
   ValidateError,
   ValidateErrors,
+  ValidateMessage,
   ValidateMessageFn,
   ValidateMessages,
   ValidatorFn,
@@ -35,6 +36,10 @@ export class Validators {
     Validators.messages = { ...Validators.messages, ...messages }
   }
 
+  static getMessage(key: string): ValidateMessage | undefined {
+    return Validators.messages[key]
+  }
+
   static getError(
     key: string,
     control: AbstractControl,
@@ -207,7 +212,7 @@ export class Validators {
 
 /** checks whether string or array is empty */
 function isEmpty(val: any): boolean {
-  return isNil(val) || (val.length === 0 && (isString(val) || isArray(val)))
+  return isNil(val) || ((isString(val) || isArray(val)) && val.length === 0)
 }
 
 /** checks whether variable has length props */
diff --git a/packages/components/checkbox/src/types.ts b/packages/components/checkbox/src/types.ts
index 90577a156..f16a1c849 100644
--- a/packages/components/checkbox/src/types.ts
+++ b/packages/components/checkbox/src/types.ts
@@ -27,9 +27,9 @@ export const checkboxProps = {
   size: { type: String as PropType<FormSize>, default: undefined },
 
   // events
-  'onUpdate:checked': { type: [Function, Array] as PropType<MaybeArray<<K = CheckValue>(checked: K) => void>> },
+  'onUpdate:checked': { type: [Function, Array] as PropType<MaybeArray<(checked: any) => void>> },
   onChange: {
-    type: [Function, Array] as PropType<MaybeArray<<K = CheckValue>(newChecked: K, oldChecked: K) => void>>,
+    type: [Function, Array] as PropType<MaybeArray<(newChecked: any, oldChecked: any) => void>>,
   },
   onBlur: { type: [Function, Array] as PropType<MaybeArray<(evt: FocusEvent) => void>> },
   onFocus: { type: [Function, Array] as PropType<MaybeArray<(evt: FocusEvent) => void>> },
diff --git a/packages/components/config/__tests__/globalConfig.spec.ts b/packages/components/config/__tests__/globalConfig.spec.ts
index 296eb212d..00fa722de 100644
--- a/packages/components/config/__tests__/globalConfig.spec.ts
+++ b/packages/components/config/__tests__/globalConfig.spec.ts
@@ -14,7 +14,7 @@ const ParentComponent = {
   components: { ChildComponent },
   template: `<ChildComponent />`,
   setup() {
-    const [, changeConfig] = useGlobalConfig('form', true)
+    const [, changeConfig] = useGlobalConfig('form', {})
     return { changeConfig }
   },
 }
diff --git a/packages/components/form/demo/CustomizedValidation.md b/packages/components/form/demo/CustomizedValidation.md
index 41e524994..bfba2a877 100644
--- a/packages/components/form/demo/CustomizedValidation.md
+++ b/packages/components/form/demo/CustomizedValidation.md
@@ -7,16 +7,14 @@ order: 7
 
 ## zh
 
-我们提供了 `status`, `hasFeedback` 和 `message` 等属性，你可以不通过 `control` 来设置验证状态和提示信息。
+我们提供了 `status`, 和 `message` 等属性，你可以不通过 `control` 来设置验证状态和提示信息。
 
 - `status`: 校验状态, 共3种: `valid`, `validating`, `invalid`。
-- `hasFeedback`: 添加反馈图标。
 - `message`: 设置提示信息。
 
 ## en
 
-We provide properties like `status`, `hasFeedback` and `message` to customize validate status and message, without using `control`.
+We provide properties like `status` and `message` to customize validate status and message, without using `control`.
 
 - `status`: validate status of form components which could be `valid`, `validating` and `invalid`.
-- `hasFeedback`: display feed icon of input control
 - `message`: display validate message.
diff --git a/packages/components/form/demo/CustomizedValidation.vue b/packages/components/form/demo/CustomizedValidation.vue
index 2d30db828..85166fd12 100644
--- a/packages/components/form/demo/CustomizedValidation.vue
+++ b/packages/components/form/demo/CustomizedValidation.vue
@@ -1,15 +1,15 @@
 <template>
-  <IxForm class="demo-form" hasFeedback labelCol="6">
-    <IxFormItem label="Valid" status="valid" :message="messageMap">
+  <IxForm class="demo-form" labelCol="6">
+    <IxFormItem label="Valid" status="valid" :message="messageMap.valid">
       <IxInput v-model:value="formValue.valid"></IxInput>
     </IxFormItem>
-    <IxFormItem label="Validating" status="validating" :message="messageMap">
+    <IxFormItem label="Validating" status="validating" :message="messageMap.validating">
       <IxInput v-model:value="formValue.validating"></IxInput>
     </IxFormItem>
-    <IxFormItem label="Invalid" status="invalid" :message="messageMap">
+    <IxFormItem label="Invalid" status="invalid" :message="messageMap.invalid">
       <IxInput v-model:value="formValue.invalid"></IxInput>
     </IxFormItem>
-    <IxFormItem label="Dynamic" :status="status" :message="messageMap">
+    <IxFormItem label="Dynamic" :status="status" :message="getMessage">
       <IxInput v-model:value="formValue.dynamic"></IxInput>
     </IxFormItem>
     <IxFormItem :controlCol="{ offset: 6 }">
@@ -39,6 +39,7 @@ const messageMap = {
   validating: 'This is validating field!',
   invalid: 'This is invalid field!',
 }
+const getMessage = () => messageMap[status.value]
 
 const changeStatus = () => {
   const currStatus = status.value
diff --git a/packages/components/form/demo/DynamicItem.vue b/packages/components/form/demo/DynamicItem.vue
index 54b0479d1..3ed9db2dd 100644
--- a/packages/components/form/demo/DynamicItem.vue
+++ b/packages/components/form/demo/DynamicItem.vue
@@ -27,7 +27,7 @@ import { useFormArray, useFormControl, useFormGroup } from '@idux/cdk/forms'
 
 interface FormValue {
   array: string[]
-  [key: string]: any
+  [key: string]: unknown
 }
 
 const formArray = useFormArray([['']])
diff --git a/packages/components/form/docs/Index.zh.md b/packages/components/form/docs/Index.zh.md
index 4e96955e0..1a4a51f49 100644
--- a/packages/components/form/docs/Index.zh.md
+++ b/packages/components/form/docs/Index.zh.md
@@ -47,7 +47,7 @@ order: 0
 | `labelTooltip` | 配置表单文本的提示信息 | `string \| #labelTooltip` | - | - | 通常用于对表单本文的解释说名 |
 | `labelTooltipIcon` | 配置表单文本的提示信息icon | `string` | - | -| - |
 | `required` | 必填样式设置 | `boolean` | `false` | - | 仅控制样式 |
-| `message` | 手动指定表单项的校验提示 | `string \| (control?: AbstractControl) => string \| FormValidateMessage` | - | - | 传入 `string` 时，为 `invalid` 状态的提示 |
+| `message` | 手动指定表单项的校验提示 | `string \| (control?: AbstractControl) => string` | - | - | 传入 `string` 时，为 `invalid` 状态的提示 |
 | `status` | 手动指定表单项的校验状态 | `valid \| invalid \| validating` | - | - | - |
 
 ### IxFormWrapper
diff --git a/packages/components/form/index.ts b/packages/components/form/index.ts
index 65a1be642..f21965034 100644
--- a/packages/components/form/index.ts
+++ b/packages/components/form/index.ts
@@ -39,7 +39,6 @@ export type {
   FormColType,
   FormLabelAlign,
   FormLayout,
-  FormValidateMessage,
   FormSize,
 } from './src/types'
 
diff --git a/packages/components/form/src/FormItem.tsx b/packages/components/form/src/FormItem.tsx
index 65a173300..fe4246edd 100644
--- a/packages/components/form/src/FormItem.tsx
+++ b/packages/components/form/src/FormItem.tsx
@@ -115,6 +115,7 @@ function renderControl(
     extra: extraSlot,
     extraMessage: extraMessageSlot,
     description: descriptionSlot,
+    message: messageSlot,
   } = slots
   if (__DEV__ && (extra || extraSlot)) {
     Logger.warn('components/form', '`extra` was deprecated, please use `description` instead.')
@@ -127,11 +128,10 @@ function renderControl(
       <IxIcon name={statusIcon.value} />
     </span>
   )
-  const messageNode = message.value && <div class={`${prefixCls}-message`}>{message.value}</div>
+  const tooltipNode = renderTooltip(controlTooltipSlot, controlTooltip, controlTooltipIcon.value)
+  const messageNode = messageSlot ? messageSlot(message.value) : message.value
   const _descriptionSlot = extraSlot || extraMessageSlot || descriptionSlot
   const descriptionNode = _descriptionSlot ? _descriptionSlot() : extra || extraMessage || description
-  const descriptionWrapper = descriptionNode && <div class={`${prefixCls}-description`}>{descriptionNode}</div>
-  const tooltipNode = renderTooltip(controlTooltipSlot, controlTooltip, controlTooltipIcon.value)
   return (
     <IxCol class={`${prefixCls}-control`} {...controlColConfig.value}>
       <div class={`${prefixCls}-control-input`}>
@@ -139,8 +139,8 @@ function renderControl(
         {statusNode}
         {tooltipNode && <span class={`${prefixCls}-control-tooltip`}>{tooltipNode}</span>}
       </div>
-      {messageNode}
-      {descriptionWrapper}
+      {message.value && <div class={`${prefixCls}-message`}>{messageNode}</div>}
+      {descriptionNode && <div class={`${prefixCls}-description`}>{descriptionNode}</div>}
     </IxCol>
   )
 }
diff --git a/packages/components/form/src/composables/useFormItem.ts b/packages/components/form/src/composables/useFormItem.ts
index 7bdf62f61..67e1b8976 100644
--- a/packages/components/form/src/composables/useFormItem.ts
+++ b/packages/components/form/src/composables/useFormItem.ts
@@ -140,6 +140,9 @@ function useMessage(
   status: ComputedRef<ValidateStatus | undefined>,
 ) {
   const locale = useGlobalConfig('locale')
+  /**
+   * @deprecated
+   */
   const messages = computed(() => {
     const message = props.message
     return isString(message) || isFunction(message) ? { invalid: message } : message || {}
diff --git a/packages/components/form/src/types.ts b/packages/components/form/src/types.ts
index efb81c16e..d387b8c6c 100644
--- a/packages/components/form/src/types.ts
+++ b/packages/components/form/src/types.ts
@@ -7,7 +7,7 @@
 
 import type { AbstractControl, ValidateStatus } from '@idux/cdk/forms'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
-import type { ColProps } from '@idux/components/grid'
+import type { ColProps, RowProps } from '@idux/components/grid'
 import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 const colProp = [Number, String, Object] as PropType<number | string | ColProps>
@@ -49,7 +49,6 @@ export type FormInstance = InstanceType<DefineComponent<FormProps>>
 export type FormColType = number | string | ColProps
 export type FormLabelAlign = 'start' | 'end'
 export type FormLayout = 'horizontal' | 'vertical' | `inline`
-export type FormValidateMessage = Partial<Record<ValidateStatus, string | ((control: AbstractControl) => string)>>
 export type FormSize = 'sm' | 'md' | 'lg'
 
 export const formItemProps = {
@@ -77,19 +76,17 @@ export const formItemProps = {
    * @deprecated Use `description` instead.
    */
   extraMessage: String,
-  label: String,
+  label: [String, Number] as PropType<string | number>,
   labelAlign: String as PropType<FormLabelAlign>,
   labelCol: colProp,
-  labelFor: String,
+  labelFor: [String, Number] as PropType<string | number>,
   labelTooltip: String,
   labelTooltipIcon: String,
   required: {
     type: Boolean,
     default: false,
   },
-  message: [String, Function, Object] as PropType<
-    string | ((control: AbstractControl) => string) | FormValidateMessage
-  >,
+  message: [String, Function, Object] as PropType<string | ((control: AbstractControl) => string)>,
   status: String as PropType<ValidateStatus>,
   /**
    * @deprecated
@@ -105,7 +102,9 @@ export type FormItemPublicProps = Omit<
   ExtractPublicPropTypes<typeof formItemProps>,
   'extra' | 'extraMessage' | 'hasFeedback' | 'statusIcon'
 >
-export type FormItemComponent = DefineComponent<Omit<HTMLAttributes, keyof FormItemPublicProps> & FormItemPublicProps>
+export type FormItemComponent = DefineComponent<
+  Omit<HTMLAttributes, keyof FormItemPublicProps> & FormItemPublicProps & RowProps
+>
 export type FormItemInstance = InstanceType<DefineComponent<FormItemProps>>
 
 export const formWrapperProps = {
diff --git a/packages/components/modal/src/ModalWrapper.tsx b/packages/components/modal/src/ModalWrapper.tsx
index 1b5d5c593..557dd1d47 100644
--- a/packages/components/modal/src/ModalWrapper.tsx
+++ b/packages/components/modal/src/ModalWrapper.tsx
@@ -210,6 +210,7 @@ function watchVisibleChange(
   wrapperRef: Ref<HTMLDivElement | undefined>,
   sentinelStartRef: Ref<HTMLDivElement | undefined>,
   mask: ComputedRef<boolean>,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   draggableResult: Ref<any>,
 ) {
   let lastOutSideActiveElement: HTMLElement | null = null
diff --git a/packages/components/table/docs/Index.zh.md b/packages/components/table/docs/Index.zh.md
index c3589fb61..90196c832 100644
--- a/packages/components/table/docs/Index.zh.md
+++ b/packages/components/table/docs/Index.zh.md
@@ -80,7 +80,6 @@ export type TableColumn<T = any, V = any> =
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `type` | 列类型 | `'expandable'` | - | - | 必填 |
-
 | `disabled` |  设置是否允许行展开 | `(record:T) => boolean` | - | - | - |
 | `icon` | 展开按钮图标 | `string` | `'right'` | ✅ | - |
 | `indent` | 展示树形数据时，每层缩进的宽度 | `number` | `12` | - | - |
diff --git a/packages/pro/config/src/defaultConfig.ts b/packages/pro/config/src/defaultConfig.ts
index dc2cbe874..b7180c1d9 100644
--- a/packages/pro/config/src/defaultConfig.ts
+++ b/packages/pro/config/src/defaultConfig.ts
@@ -5,6 +5,8 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+import { IxInput } from '@idux/components/input'
+import { type ProFormJsonSchema } from '@idux/pro/form'
 import { zhCN } from '@idux/pro/locales'
 
 import { type ProGlobalConfig } from './types'
@@ -12,7 +14,19 @@ import { type ProGlobalConfig } from './types'
 export const defaultConfig: ProGlobalConfig = {
   common: { prefixCls: 'ix-pro' },
   locale: zhCN,
-
+  form: {
+    ajvOptions: {
+      allErrors: true,
+      loopEnum: 50,
+    },
+    autoId: true,
+    autoLabelFor: true,
+    formatComponents: {
+      default: { component: IxInput },
+    },
+    ignoreKeywords: ['type', 'enum'],
+    schemaFormatter: (fields, schema) => ({ fields: fields || {}, schema: schema || ({} as ProFormJsonSchema) }),
+  },
   table: {
     columnIndexable: {
       align: 'center',
diff --git a/packages/pro/config/src/types.ts b/packages/pro/config/src/types.ts
index c3f40690a..075f47082 100644
--- a/packages/pro/config/src/types.ts
+++ b/packages/pro/config/src/types.ts
@@ -5,15 +5,20 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
 import type { PortalTargetType } from '@idux/cdk/portal'
+import type { ProFormSchemaFormatter } from '@idux/pro/form'
 import type { ProLocale } from '@idux/pro/locales'
 import type { ProTableColumnIndexable } from '@idux/pro/table'
-import type { VNode } from 'vue'
+import type { Options as AjvOptions } from 'ajv'
+import type { Component, VNode } from 'vue'
 
 export interface ProGlobalConfig {
   common: ProCommonConfig
   locale: ProLocale
 
+  form: ProFormConfig
   table: ProTableConfig
   tree: ProTreeConfig
   search: ProSearchConfig
@@ -25,6 +30,42 @@ export interface ProCommonConfig {
   prefixCls: string
 }
 
+interface ProFormConfigFormatComponent {
+  component?: string | Component
+  componentProps?: any
+}
+
+export interface ProFormConfig {
+  /**
+   * [ajv](https://ajv.js.org/options.html) 参数
+   */
+  ajvOptions: AjvOptions
+  autoId: boolean
+  autoLabelFor: boolean
+  /**
+   * 根据 format 字段渲染的组件
+   *
+   * @example { 'date': { component: IxDatePicker, componentProps: { format: 'dd/MM/yyyy' }}}
+   */
+  formatComponents: {
+    default?: ProFormConfigFormatComponent
+    data?: ProFormConfigFormatComponent
+    time?: ProFormConfigFormatComponent
+    'date-time'?: ProFormConfigFormatComponent
+    uri?: ProFormConfigFormatComponent
+    email?: ProFormConfigFormatComponent
+    ipv4?: ProFormConfigFormatComponent
+    ipv6?: ProFormConfigFormatComponent
+    [key: string]: ProFormConfigFormatComponent | undefined
+  }
+  /**
+   * 忽略某些数据类型 (type) 的校验, 默认：['type', 'enum']
+   */
+  ignoreKeywords: string[]
+
+  schemaFormatter: ProFormSchemaFormatter
+}
+
 export interface ProTableConfig {
   columnIndexable: Omit<ProTableColumnIndexable, 'type'>
 }
diff --git a/packages/pro/default.less b/packages/pro/default.less
index 98c23f66a..7a356e0dd 100644
--- a/packages/pro/default.less
+++ b/packages/pro/default.less
@@ -1,5 +1,7 @@
+@import './form/style/themes/default.less';
 @import './layout/style/themes/default.less';
+@import './search/style/themes/default.less';
 @import './table/style/themes/default.less';
 @import './transfer/style/themes/default.less';
 @import './tree/style/themes/default.less';
-@import './search/style/themes/default.less';
\ No newline at end of file
+
diff --git a/packages/pro/form/__tests__/proForm.spec.ts b/packages/pro/form/__tests__/proForm.spec.ts
new file mode 100644
index 000000000..b8ec4be10
--- /dev/null
+++ b/packages/pro/form/__tests__/proForm.spec.ts
@@ -0,0 +1,25 @@
+import { MountingOptions, mount } from '@vue/test-utils'
+
+import { renderWork } from '@tests'
+
+import ProForm from '../src/ProForm'
+import { ProFormProps } from '../src/types'
+
+describe.skip('ProForm', () => {
+  const ProFormMount = (options?: MountingOptions<Partial<ProFormProps>>) =>
+    mount(ProForm, { ...(options as MountingOptions<ProFormProps>) })
+
+  renderWork<ProFormProps>(ProForm, {
+    props: {},
+  })
+
+  test('xxx work', async () => {
+    const wrapper = ProFormMount({ props: { xxx: 'Xxx' } })
+
+    expect(wrapper.classes()).toContain('ix-Xxx')
+
+    await wrapper.setProps({ xxx: 'Yyy' })
+
+    expect(wrapper.classes()).toContain('ix-Yyy')
+  })
+})
diff --git a/packages/pro/form/demo/Basic.md b/packages/pro/form/demo/Basic.md
new file mode 100644
index 000000000..e2727790d
--- /dev/null
+++ b/packages/pro/form/demo/Basic.md
@@ -0,0 +1,14 @@
+---
+order: 0
+title:
+  zh: 基本使用
+  en: Basic usage
+---
+
+## zh
+
+最简单的用法, 使用 `ProFormFieldsSchema` 来描述表单。
+
+## en
+
+The simplest usage, use `ProFormFieldsSchema` to describe the form.
diff --git a/packages/pro/form/demo/Basic.vue b/packages/pro/form/demo/Basic.vue
new file mode 100644
index 000000000..e5c7e12e4
--- /dev/null
+++ b/packages/pro/form/demo/Basic.vue
@@ -0,0 +1,69 @@
+<template>
+  <IxProForm class="demo-form" autoId="basic" :fields="fields" @submit="onSubmit">
+    <template #password="props">
+      <IxInput
+        v-bind="props"
+        autocomplete="current-password"
+        prefix="lock"
+        :type="passwordVisible ? 'text' : 'password'"
+      >
+        <template #suffix>
+          <IxIcon :name="passwordVisible ? 'eye-invisible' : 'eye'" @click="passwordVisible = !passwordVisible">
+          </IxIcon>
+        </template>
+      </IxInput>
+    </template>
+    <IxFormItem>
+      <IxButton block mode="primary" type="submit">Login</IxButton>
+    </IxFormItem>
+  </IxProForm>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { Validators } from '@idux/cdk/forms'
+import { IxCheckbox } from '@idux/components/checkbox'
+import { ProFormFieldsSchema } from '@idux/pro/form'
+
+const passwordVisible = ref(false)
+
+interface FormValue {
+  username: string
+  password: string
+  remember: boolean
+}
+
+const { required, rangeLength } = Validators
+const fields: ProFormFieldsSchema<FormValue> = {
+  properties: {
+    username: {
+      componentProps: {
+        prefix: 'user',
+      },
+      validators: required,
+    },
+    password: {
+      customControl: 'password',
+      validators: [required, rangeLength(6, 18)],
+    },
+    remember: {
+      component: IxCheckbox,
+      componentProps: {
+        label: 'Remember me',
+      },
+      default: true,
+    },
+  },
+}
+
+const onSubmit = (value: FormValue) => {
+  console.log('submit', value)
+}
+</script>
+
+<style scoped lang="less">
+.demo-form {
+  max-width: 300px;
+}
+</style>
diff --git a/packages/pro/form/demo/BasicSchema.md b/packages/pro/form/demo/BasicSchema.md
new file mode 100644
index 000000000..f34e4b745
--- /dev/null
+++ b/packages/pro/form/demo/BasicSchema.md
@@ -0,0 +1,14 @@
+---
+order: 10
+title:
+  zh: 基本使用(JsonSchema)
+  en: Basic usage(JsonSchema)
+---
+
+## zh
+
+最简单的用法, 使用 `JsonSchema` 来验证表单。
+
+## en
+
+The simplest usage, use `JsonSchema` to validate the form.
diff --git a/packages/pro/form/demo/BasicSchema.vue b/packages/pro/form/demo/BasicSchema.vue
new file mode 100644
index 000000000..4b207e937
--- /dev/null
+++ b/packages/pro/form/demo/BasicSchema.vue
@@ -0,0 +1,81 @@
+<template>
+  <IxProForm class="demo-form" autoId="basic-schema" :fields="fields" :schema="schema" @submit="onSubmit">
+    <template #password="props">
+      <IxInput
+        v-bind="props"
+        autocomplete="current-password"
+        prefix="lock"
+        :type="passwordVisible ? 'text' : 'password'"
+      >
+        <template #suffix>
+          <IxIcon :name="passwordVisible ? 'eye-invisible' : 'eye'" @click="passwordVisible = !passwordVisible">
+          </IxIcon>
+        </template>
+      </IxInput>
+    </template>
+    <IxFormItem>
+      <IxButton block mode="primary" type="submit">Login</IxButton>
+    </IxFormItem>
+  </IxProForm>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+import { IxCheckbox } from '@idux/components/checkbox'
+import { ProFormFieldsSchema, ProFormJsonSchema } from '@idux/pro/form'
+
+const passwordVisible = ref(false)
+
+interface FormValue {
+  username: string
+  password: string
+  remember: boolean
+}
+
+const fields: ProFormFieldsSchema<FormValue> = {
+  properties: {
+    username: {
+      componentProps: {
+        prefix: 'user',
+      },
+    },
+    password: {
+      customControl: 'password',
+    },
+    remember: {
+      component: IxCheckbox,
+      componentProps: {
+        label: 'Remember me',
+      },
+    },
+  },
+}
+
+const schema: ProFormJsonSchema<FormValue> = {
+  properties: {
+    username: {
+      type: 'string',
+    },
+    password: {
+      type: 'string',
+      minLength: 6,
+      maxLength: 18,
+    },
+    remember: {
+      type: 'boolean',
+    },
+  },
+  required: ['username', 'password'],
+}
+
+const onSubmit = (value: FormValue) => {
+  console.log('submit', value)
+}
+</script>
+
+<style scoped lang="less">
+.demo-form {
+  max-width: 300px;
+}
+</style>
diff --git a/packages/pro/form/demo/Register.md b/packages/pro/form/demo/Register.md
new file mode 100644
index 000000000..d39aa9d66
--- /dev/null
+++ b/packages/pro/form/demo/Register.md
@@ -0,0 +1,14 @@
+---
+order: 1
+title:
+  zh: 注册表单
+  en: Registration form
+---
+
+## zh
+
+用户填写必须的信息以注册新用户。
+
+## en
+
+Fill in this form to create a new account for you.
diff --git a/packages/pro/form/demo/Register.vue b/packages/pro/form/demo/Register.vue
new file mode 100644
index 000000000..4a25a6ce6
--- /dev/null
+++ b/packages/pro/form/demo/Register.vue
@@ -0,0 +1,116 @@
+<template>
+  <IxProForm class="demo-form" autoId="register" :fields="fields" @submit="onSubmit">
+    <template #password="props">
+      <IxRow gutter="8">
+        <IxCol span="12">
+          <IxInput v-bind="props"> </IxInput>
+        </IxCol>
+        <IxCol span="12">
+          <IxButton @click="getCaptcha">Get captcha</IxButton>
+        </IxCol>
+      </IxRow>
+    </template>
+    <IxFormItem :controlCol="noLabelControlCol">
+      <IxButton block mode="primary" type="submit">Submit</IxButton>
+    </IxFormItem>
+  </IxProForm>
+</template>
+
+<script setup lang="ts">
+import { AbstractControl, ValidateErrors, Validators } from '@idux/cdk/forms'
+import { IxCheckbox } from '@idux/components/checkbox'
+import { ProFormFieldsSchema } from '@idux/pro/form'
+
+const noLabelControlCol = { sm: { offset: 8, span: 16 }, xs: 24 }
+
+const { required, requiredTrue, email, rangeLength } = Validators
+const confirmPasswordValidator = (value: string, control: AbstractControl): ValidateErrors | undefined => {
+  if (!value) {
+    return { required: { message: 'Please confirm your password!' } }
+  } else if (value !== control.root.get('password')?.getValue()) {
+    return { confirm: { message: 'Two passwords that you enter is inconsistent!' } }
+  }
+  return undefined
+}
+
+const getCaptcha = () => console.log('getCaptcha')
+
+const fields: ProFormFieldsSchema = {
+  formProps: {
+    labelCol: { sm: 8, xs: 24 },
+    controlCol: { sm: 16, xs: 24 },
+  },
+  properties: {
+    email: {
+      formItemProps: {
+        label: 'E-mail',
+        required: true,
+      },
+      validators: [required, email],
+    },
+    password: {
+      formItemProps: {
+        label: 'Password',
+        required: true,
+      },
+      componentProps: {
+        type: 'password',
+      },
+      validators: [required, rangeLength(6, 18)],
+    },
+    confirmPassword: {
+      formItemProps: {
+        label: 'Confirm Password',
+        required: true,
+      },
+      componentProps: {
+        type: 'password',
+      },
+      validators: [required, confirmPasswordValidator],
+    },
+    nickname: {
+      formItemProps: {
+        label: 'Nickname',
+        labelTooltip: 'What do you want others to call you?',
+        required: true,
+      },
+      validators: [required],
+    },
+    website: {
+      formItemProps: {
+        label: 'Website',
+      },
+    },
+    captcha: {
+      customControl: 'captcha',
+      formItemProps: {
+        label: 'Captcha',
+        description: 'We must make sure that your are a human.',
+        required: true,
+      },
+      disabled: true,
+      validators: [required],
+    },
+    agree: {
+      formItemProps: {
+        controlCol: noLabelControlCol,
+      },
+      component: IxCheckbox,
+      componentProps: {
+        label: 'I have read the agreement',
+      },
+      validators: [requiredTrue],
+    },
+  },
+}
+
+const onSubmit = (value: unknown) => {
+  console.log('submit', value)
+}
+</script>
+
+<style scoped lang="less">
+.demo-form {
+  max-width: 400px;
+}
+</style>
diff --git a/packages/pro/form/demo/RegisterSchema.md b/packages/pro/form/demo/RegisterSchema.md
new file mode 100644
index 000000000..16d6a10e6
--- /dev/null
+++ b/packages/pro/form/demo/RegisterSchema.md
@@ -0,0 +1,14 @@
+---
+order: 11
+title:
+  zh: 注册表单(JsonSchema)
+  en: Registration form(JsonSchema)
+---
+
+## zh
+
+用户填写必须的信息以注册新用户。
+
+## en
+
+Fill in this form to create a new account for you.
diff --git a/packages/pro/form/demo/RegisterSchema.vue b/packages/pro/form/demo/RegisterSchema.vue
new file mode 100644
index 000000000..0650c0e14
--- /dev/null
+++ b/packages/pro/form/demo/RegisterSchema.vue
@@ -0,0 +1,125 @@
+<template>
+  <IxProForm class="demo-form" autoId="register-schema" :fields="fields" :schema="schema" @submit="onSubmit">
+    <template #password="props">
+      <IxRow gutter="8">
+        <IxCol span="12">
+          <IxInput v-bind="props"> </IxInput>
+        </IxCol>
+        <IxCol span="12">
+          <IxButton @click="getCaptcha">Get captcha</IxButton>
+        </IxCol>
+      </IxRow>
+    </template>
+    <IxFormItem :controlCol="noLabelControlCol">
+      <IxButton block mode="primary" type="submit">Submit</IxButton>
+    </IxFormItem>
+  </IxProForm>
+</template>
+
+<script setup lang="ts">
+import { AbstractControl, ValidateErrors } from '@idux/cdk/forms'
+import { IxCheckbox } from '@idux/components/checkbox'
+import { ProFormFieldsSchema, ProFormJsonSchema } from '@idux/pro/form'
+
+const noLabelControlCol = { sm: { offset: 8, span: 16 }, xs: 24 }
+
+const confirmPasswordValidator = (value: string, control: AbstractControl): ValidateErrors | undefined => {
+  if (!value) {
+    return { required: { message: 'Please confirm your password!' } }
+  } else if (value !== control.root.get('password')?.getValue()) {
+    return { confirm: { message: 'Two passwords that you enter is inconsistent!' } }
+  }
+  return undefined
+}
+
+const getCaptcha = () => console.log('getCaptcha')
+
+const fields: ProFormFieldsSchema = {
+  formProps: {
+    labelCol: { sm: 8, xs: 24 },
+    controlCol: { sm: 16, xs: 24 },
+  },
+  properties: {
+    password: {
+      componentProps: {
+        type: 'password',
+      },
+    },
+    confirmPassword: {
+      componentProps: {
+        type: 'password',
+      },
+      validators: [confirmPasswordValidator],
+    },
+    nickname: {
+      formItemProps: {
+        labelTooltip: 'What do you want others to call you?',
+      },
+    },
+    captcha: {
+      customControl: 'captcha',
+      formItemProps: {
+        description: 'We must make sure that your are a human.',
+      },
+      disabled: true,
+    },
+    agree: {
+      formItemProps: {
+        controlCol: noLabelControlCol,
+      },
+      component: IxCheckbox,
+      componentProps: {
+        label: 'I have read the agreement',
+      },
+    },
+  },
+}
+
+const schema: ProFormJsonSchema = {
+  properties: {
+    email: {
+      type: 'string',
+      title: 'E-mail',
+      format: 'email',
+    },
+    password: {
+      type: 'string',
+      title: 'Password',
+      minLength: 6,
+      maxLength: 18,
+    },
+    confirmPassword: {
+      type: 'string',
+      title: 'Confirm Password',
+    },
+    nickname: {
+      type: 'string',
+      title: 'Nickname',
+    },
+    website: {
+      type: 'string',
+      title: 'Website',
+    },
+    captcha: {
+      type: 'string',
+      title: 'Captcha',
+      description: 'We must make sure that your are a human.',
+    },
+    agree: {
+      type: 'boolean',
+      const: true,
+    },
+  },
+  required: ['email', 'password', 'confirmPassword', 'nickname', 'captcha'],
+}
+
+const onSubmit = (value: unknown) => {
+  console.log('submit', value)
+}
+</script>
+
+<style scoped lang="less">
+.demo-form {
+  max-width: 400px;
+}
+</style>
diff --git a/packages/pro/form/docs/Design.en.md b/packages/pro/form/docs/Design.en.md
new file mode 100644
index 000000000..d1e713d5e
--- /dev/null
+++ b/packages/pro/form/docs/Design.en.md
@@ -0,0 +1,3 @@
+## Description
+
+## Usage scenarios
diff --git a/packages/pro/form/docs/Design.zh.md b/packages/pro/form/docs/Design.zh.md
new file mode 100644
index 000000000..933801767
--- /dev/null
+++ b/packages/pro/form/docs/Design.zh.md
@@ -0,0 +1,3 @@
+## 组件定义
+
+## 使用场景
diff --git a/packages/pro/form/docs/Index.en.md b/packages/pro/form/docs/Index.en.md
new file mode 100644
index 000000000..f634ec6ba
--- /dev/null
+++ b/packages/pro/form/docs/Index.en.md
@@ -0,0 +1,29 @@
+---
+category: pro
+type: Data Entry
+order: 0
+title: ProForm
+subtitle:
+---
+
+## API
+
+### IxProForm
+
+#### ProFormProps
+
+| Name | Description | Type | Default | Global Config | Remark |
+| --- | --- | --- | --- | --- | --- |
+| - | - | - | - | ✅ | - |
+
+#### ProFormSlots
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |
+
+#### ProFormMethods
+
+| Name | Description | Parameter Type | Remark |
+| --- | --- | --- | --- |
+| - | - | - | - |
diff --git a/packages/pro/form/docs/Index.zh.md b/packages/pro/form/docs/Index.zh.md
new file mode 100644
index 000000000..06fdb9196
--- /dev/null
+++ b/packages/pro/form/docs/Index.zh.md
@@ -0,0 +1,89 @@
+---
+category: pro
+type: 数据录入
+order: 0
+title: ProForm
+subtitle:
+---
+
+## API
+
+### IxProForm
+
+#### ProFormProps
+
+> 除以下表格之外还支持 [FormProps](./components/form#FormProps) 的全部属性
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `ajvOptions` | `ajv` 的配置 | `AjvOptions` | - | ✅ | 参见 [Ajv options](https://ajv.js.org/options.html) |
+| `autoId` | 自定设置表单控件的 `id` | `boolean \| string` | `true` | ✅ | 类型为 `string` 时，为 `id` 的前缀 |
+| `autoLabelFor` | 自定设置 `IxFormItem` 的 `labelFor` | `boolean` | `true` | ✅ | 通常配合 `autoId` 一起使用 |
+| `fields` | 表单字段的描述信息 | `ProFormFieldsSchema` | - | - | - |
+| `ignoreKeywords` | 配置 `ajv` 验证器忽略的错误字段 | `string[]` | `['type', 'enum']` | ✅ | - |
+| `schema` | 配置表单的 Schema | `ProFormJsonSchema` | - | - | - |
+| `schemaFormatter` | `fields` 和 `schema` 的格式化函数 | `ProFormSchemaFormatter` | - | ✅ | - |
+| `onSubmit` | 提交时的回调 | `(formData: any) => void` | - | - | 验证通过时才触发 |
+
+#### ProFormFieldsSchema
+
+表单字段的描述信息，主要用于描述 UI 信息，也可以添加验证信息。
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `formProps` | `IxForm` 组件的配置 | `FormProps` | - | - | - |
+| `formItemProps` | `IxFormItem` 组件的配置 | `FormItemProps & RowProps` | - | - | - |
+| `component` | 需要渲染输入控件 | `string \| Component` | `IxInput` | - | - | - |
+| `componentProps` | 传递给输入控件的属性 | `any` | - | - | - |
+| `default` | 当前控件的默认值 | `any` | - | - | - |
+| `disabled` | 默认禁用当前控件 | `boolean` | - | - | - |
+| `name` | 控件的名称 | `string` | - | - | 通常用于自定义提示信息 |
+| `example` | 控件的示例 | `string` | - | - | 通常用于自定义提示信息 |
+| `trigger` | 验证器触发的时机 | `'change' \| 'blur' \| 'submit'` | `change` | - | - |
+| `validators` | 一个同步验证器函数或数组 | `ValidatorFn \| ValidatorFn[]` | - | - | - |
+| `asyncValidators` | 一个异步验证器函数或数组 | `AsyncValidatorFn \| AsyncValidatorFn[]` | - | - | - |
+| `type` | Schema 类型 | `'object' \| 'array'` | - | - | 第一层 Schema 默认为 `object`, 其他层默认为 `undefined` |
+| `properties` | Schema 的子元素属性 | `[K in keyof T]: ProFormFieldsSchema` | - | - | `type='object'` 时生效，且必传 |
+| `items` | Schema 的 item 元素属性 | `ProFormFieldsSchema` | - | - | `type='array'` 时生效，且必传 |
+| `customControl` | 自定义输入控件，等同于 `IxFormItem` 的默认插槽 | `string | ((props: any) => VNodeChild)` | - | - | props 为内部计算后的属性, 通常包含 `control`, `id` 等  |
+| `customControlTooltip` | 等同于 `IxFormItem` 的 `controlTooltip` 插槽 | `string | ((props: any) => VNodeChild)` | - | - | 类型为 `string` 时，对应 `IxProForm` 的插槽名 |
+| `customDescription` | 等同于 `IxFormItem` 的 `description` 插槽 | `string | ((props: any) => VNodeChild)` | - | - | - |
+| `customLabel` | 等同于 `IxFormItem` 的 `label` 插槽 | `string | ((props: any) => VNodeChild)` | - | - | - |
+| `customLabelTooltip` | 等同于 `IxFormItem` 的 `labelTooltip` 插槽 | `string | ((props: any) => VNodeChild)` | - | - | - |
+| `customMessage` | 等同于 `IxFormItem` 的 `message` 插槽 | `string | ((props: any) => VNodeChild)` | - | - | - |
+
+#### ProFormJsonSchema
+
+表单验证的描述信息，内置了 [ajv](https://ajv.js.org) 验证器，支持标准的 jsonSchema 验证，下面列出常见的一些字段。
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `title` | 属性名称，也就是 `IxFormItem` 的 `label` 属性  | `string` | - | - | - |
+| `description` | 属性描述，也就是 `IxFormItem` 的 `description` 属性 | `string` | - | - | - |
+| `const` | `const` 验证 | `any` | - | - |- |
+| `enum` | `enum` 验证 | `any[]` | - | - | - |
+| `default` | 当前控件的默认值 | `any` | - | - | - |
+| `type` | Schema 类型 | `'object' \| 'array' \| 'string' \| 'number' \| 'integer' \| 'boolean'` | - | - | 第一层 Schema 默认为 `object`, 其他层默认为 `undefined` |
+| `properties` | Schema 的子元素属性 | `[K in keyof T]: ProFormJsonSchema` | - | - | `type='object'` 时生效，且必传 |
+| `required` | Schema 的必需属性 | `(keyof T)[]` | - | - | `type='object'` 时生效 |
+| `items` | Schema 的 `item` 元素属性 | `ProFormJsonSchema` | - | - | `type='array'` 时生效 |
+| `minItems` | 数组最小长度 | `number` | - | - | `type='array'` 时生效 |
+| `maxItems` | 数组最大长度 | `number` | - | - | `type='array'` 时生效 |
+| `minLength` | 字符串最小长度 | `number` | - | - | `type='string'` 时生效 |
+| `maxLength` | 字符串最大长度 | `number` | - | - | `type='string'` 时生效 |
+| `pattern` | 字符串规则 | `string` | - | - | `type='string'` 时生效 |
+| `format` | 字符串格式, 参见[formats](https://ajv.js.org/guide/formats.html) | `number` | - | - | `type='string' \| 'number'` 时生效 |
+| `minimum` | 数字最小值 | `number` | - | - | `type='number \| integer'` 时生效 |
+| `maximum` | 数字最大值 | `number` | - | - | `type='number \| 'integer'` 时生效 |
+
+#### ProFormSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `default` | 默认插槽 | `{formGroup: FormGroup}` | - |
+
+#### ProFormMethods
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `getFormGroup` | 获取 `FormGroup` | `() => FormGroup` | - |
diff --git a/packages/pro/form/index.ts b/packages/pro/form/index.ts
new file mode 100644
index 000000000..f8a34c574
--- /dev/null
+++ b/packages/pro/form/index.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import type { ProFormComponent } from './src/types'
+
+import ProForm from './src/ProForm'
+
+const IxProForm = ProForm as unknown as ProFormComponent
+
+export { IxProForm }
+
+export type {
+  ProFormInstance,
+  ProFormComponent,
+  ProFormPublicProps as ProFormProps,
+  ProFormFieldsSchema,
+  ProFormJsonSchema,
+  ProFormSchemaFormatter,
+} from './src/types'
diff --git a/packages/pro/form/src/ProForm.tsx b/packages/pro/form/src/ProForm.tsx
new file mode 100644
index 000000000..35cadbeb9
--- /dev/null
+++ b/packages/pro/form/src/ProForm.tsx
@@ -0,0 +1,76 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { type VNodeChild, computed, createVNode, defineComponent } from 'vue'
+
+import { isString } from 'lodash-es'
+
+import { callEmit } from '@idux/cdk/utils'
+import { IxForm, IxFormItem } from '@idux/components/form'
+import { useGlobalConfig } from '@idux/pro/config'
+
+import { useAjvValidator } from './composables/useAjvValidator'
+import { useForm } from './composables/useForm'
+import { proFormProps } from './types'
+
+export default defineComponent({
+  name: 'IxProForm',
+  props: proFormProps,
+  setup(props, { expose, slots }) {
+    const common = useGlobalConfig('common')
+    const config = useGlobalConfig('form')
+
+    const mergedPrefixCls = computed(() => `${common.prefixCls}-form`)
+    const createValidator = useAjvValidator(props, config)
+    const formContext = useForm(props, config, createValidator)
+
+    const getFormGroup = () => formContext.formGroup
+
+    expose({ getFormGroup })
+
+    const onSubmit = (evt: Event) => {
+      evt.stopPropagation()
+      evt.preventDefault()
+      const { formGroup } = formContext
+      if (formGroup.valid.value) {
+        callEmit(props.onSubmit, formGroup.getValue())
+      } else {
+        formGroup.markAsDirty()
+        formGroup.markAsBlurred()
+      }
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const getSlot = (custom: string | ((_?: any) => VNodeChild) | undefined) => {
+      return isString(custom) ? slots[custom] : custom
+    }
+
+    return () => {
+      const { formGroup, formProps, formItems } = formContext
+      const items = formItems.map(item => {
+        const { component, componentProps, formItemProps } = item
+        const defaultSlot = getSlot(item.customControl)
+
+        const itemSlots = {
+          default: defaultSlot ? () => defaultSlot(componentProps) : () => createVNode(component!, componentProps),
+          controlTooltip: getSlot(item.customControlTooltip),
+          description: getSlot(item.customDescription),
+          label: getSlot(item.customLabel),
+          labelTooltip: getSlot(item.customLabelTooltip),
+          message: getSlot(item.customMessage),
+        }
+        return <IxFormItem v-slots={itemSlots} {...formItemProps}></IxFormItem>
+      })
+      return (
+        <IxForm class={mergedPrefixCls} control={formGroup} onSubmit={onSubmit} {...formProps}>
+          {items}
+          {slots.default?.({ formGroup })}
+        </IxForm>
+      )
+    }
+  },
+})
diff --git a/packages/pro/form/src/composables/useAjvValidator.ts b/packages/pro/form/src/composables/useAjvValidator.ts
new file mode 100644
index 000000000..95968a9fa
--- /dev/null
+++ b/packages/pro/form/src/composables/useAjvValidator.ts
@@ -0,0 +1,122 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+import { computed } from 'vue'
+
+import { cloneDeep, isArray, isString, merge } from 'lodash-es'
+
+import Ajv, { ErrorObject } from 'ajv'
+import addFormats from 'ajv-formats'
+
+import {
+  type AbstractControl,
+  type ValidateError,
+  type ValidateErrors,
+  type ValidatorFn,
+  Validators,
+} from '@idux/cdk/forms'
+import { Logger } from '@idux/cdk/utils'
+import { type ProFormConfig } from '@idux/pro/config'
+
+import {
+  type ArrayKeywords,
+  type NumberKeywords,
+  type ProFormJsonSchema,
+  type ProFormProps,
+  type StringKeywords,
+} from '../types'
+
+export type SchemaValidatorCreator = (schema: ProFormJsonSchema) => ValidatorFn
+
+export function useAjvValidator(props: ProFormProps, config: ProFormConfig): SchemaValidatorCreator {
+  // 非响应式，如果后面有动态设置 ajvOptions 的情况，再做优化
+  const ajvOptions = merge(cloneDeep(config.ajvOptions), props.ajvOptions)
+  const ajv = new Ajv(ajvOptions)
+  addFormats(ajv)
+
+  const mergedIgnoreKeywords = computed(() => props.ignoreKeywords ?? config.ignoreKeywords)
+
+  const createValidator = (schema: ProFormJsonSchema): ValidatorFn => {
+    return (value: unknown, control: AbstractControl): ValidateErrors | undefined => {
+      if (value == null || ((isString(value) || isArray(value)) && value.length === 0)) {
+        return undefined
+      }
+      try {
+        ajv.validate(schema, value)
+      } catch (e) {
+        __DEV__ && Logger.warn('pro/forms', e)
+      }
+      let errors = ajv.errors || []
+      const ignoreKeywords = mergedIgnoreKeywords.value
+      if (ignoreKeywords.length) {
+        errors = errors.filter(err => !ignoreKeywords.includes(err.keyword))
+      }
+      console.log('errors', errors)
+      if (errors.length) {
+        const error =
+          getError(errors, schema, value) || Validators.getError('schema', control, { actual: value, errors, schema })
+        return { schema: error }
+      }
+      return undefined
+    }
+  }
+
+  return createValidator
+}
+
+function getError(errors: ErrorObject[], schema: ProFormJsonSchema, value: unknown) {
+  let error: ValidateError | undefined
+  const [firstError] = errors
+  switch (firstError.keyword) {
+    case 'format': {
+      const { format } = schema as StringKeywords<unknown>
+      const message = Validators.getMessage(format!)
+      if (message) {
+        error = { actual: value, errors, schema, message }
+      }
+      break
+    }
+    case 'pattern': {
+      const { pattern } = schema as StringKeywords<unknown>
+      const message = Validators.getMessage('pattern')
+      if (message) {
+        error = { actual: value, pattern, errors, schema, message }
+      }
+      break
+    }
+    case 'minLength':
+    case 'maxLength': {
+      const { minLength, maxLength } = schema as StringKeywords<unknown>
+      const actual = (value as string).length
+      const isArray = false
+      const messageKey = minLength != null && maxLength != null ? 'rangeLength' : firstError.keyword
+      const message = Validators.getMessage(messageKey)
+      error = { actual, minLength, maxLength, isArray, errors, schema, message }
+      break
+    }
+    case 'minimum':
+    case 'maximum': {
+      const { minimum: min, maximum: max } = schema as NumberKeywords<unknown>
+      const actual = value
+      const messageKey = min != null && max != null ? 'range' : firstError.keyword
+      const message = Validators.getMessage(messageKey)
+      error = { actual, min, max, errors, schema, message }
+      break
+    }
+    case 'minItems':
+    case 'maxItems': {
+      const { minItems: minLength, maxItems: maxLength } = schema as ArrayKeywords<unknown>
+      const actual = (value as string).length
+      const isArray = true
+      const messageKey = minLength != null && maxLength != null ? 'rangeLength' : firstError.keyword
+      const message = Validators.getMessage(messageKey)
+      error = { actual, minLength, maxLength, isArray, errors, schema, message }
+      break
+    }
+  }
+  return error
+}
diff --git a/packages/pro/form/src/composables/useForm.ts b/packages/pro/form/src/composables/useForm.ts
new file mode 100644
index 000000000..2a7b6015c
--- /dev/null
+++ b/packages/pro/form/src/composables/useForm.ts
@@ -0,0 +1,178 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { type Component, computed } from 'vue'
+
+import { isString } from 'lodash-es'
+
+import {
+  type AbstractControl,
+  type FormGroup,
+  ValidatorFn,
+  Validators,
+  useFormArray,
+  useFormControl,
+  useFormGroup,
+} from '@idux/cdk/forms'
+import { convertArray } from '@idux/cdk/utils'
+import { type FormItemProps, type FormProps } from '@idux/components/form'
+import { type RowProps } from '@idux/components/grid'
+import { type ProFormConfig } from '@idux/pro/config'
+
+import {
+  type ObjectKeywords,
+  type ProFormFieldsSchema,
+  type ProFormItemCustoms,
+  type ProFormJsonSchema,
+  type ProFormProps,
+  type StringKeywords,
+} from '../types'
+import { type SchemaValidatorCreator } from './useAjvValidator'
+
+export interface FormContext {
+  formGroup: FormGroup
+  formProps?: FormProps
+  formItems: FormItem[]
+}
+
+export interface FormItem extends ProFormItemCustoms {
+  type?: 'object' | 'array'
+  formItemProps?: FormItemProps & RowProps
+  component?: string | Component
+  componentProps?: any
+}
+
+export function useForm(
+  props: ProFormProps,
+  config: ProFormConfig,
+  createValidator: SchemaValidatorCreator,
+): FormContext {
+  const mergedAutoId = computed(() => props.autoId ?? config.autoId)
+  const mergedAutoLabelFor = computed(() => props.autoLabelFor ?? config.autoLabelFor)
+  const mergedSchemaFormatter = computed(() => props.schemaFormatter ?? config.schemaFormatter)
+
+  function useGroupConfigAndFormItems(fieldsSchema: ProFormFieldsSchema, jsonSchema: ProFormJsonSchema) {
+    const groupConfig: Record<string, AbstractControl> = {}
+    const formItems: FormItem[] = []
+
+    const { properties: fieldsProperties = {} } = fieldsSchema
+    const { properties: schemaProperties = {} } = jsonSchema as ObjectKeywords<unknown>
+
+    // TODO: order
+    const propKeys = new Set([...Object.keys(schemaProperties), ...Object.keys(fieldsProperties)])
+
+    propKeys.forEach(key => {
+      const { fields, schema } = mergedSchemaFormatter.value(fieldsProperties[key], (schemaProperties as any)[key])
+      const { control, items } = useControlAndItems(fields, schema, fieldsSchema, jsonSchema, key)
+      groupConfig[key] = control
+      formItems.push(...items)
+    })
+
+    return { groupConfig, formItems }
+  }
+
+  function useControlAndItems(
+    fieldsSchema: ProFormFieldsSchema,
+    jsonSchema: ProFormJsonSchema,
+    parentFields: ProFormFieldsSchema,
+    parentSchema: ProFormJsonSchema,
+    currKey: string | number,
+  ) {
+    const type = fieldsSchema.type || jsonSchema.type
+    if (type === 'object' && (fieldsSchema.properties || (jsonSchema as any).properties)) {
+      const context = useGroupConfigAndFormItems(fieldsSchema, jsonSchema)
+      const { disabled, name, example, trigger, validators, asyncValidators } = fieldsSchema
+      const control = useFormGroup(context.groupConfig, {
+        disabled,
+        name,
+        example,
+        trigger,
+        validators,
+        asyncValidators,
+      })
+      return { control, items: context.formItems }
+    } else if (type === 'array' && (fieldsSchema.items || (jsonSchema as any).items)) {
+      const childrenControls: AbstractControl[] = []
+      const items: FormItem[] = []
+      const initArr = fieldsSchema.default ?? parentFields.default?.[currKey] ?? (jsonSchema.default || [undefined])
+      initArr.forEach((_: any, index: number) => {
+        const { fields, schema } = mergedSchemaFormatter.value(fieldsSchema.items, (jsonSchema as any).items)
+        const context = useControlAndItems(fields, schema, fieldsSchema, jsonSchema, index)
+        childrenControls.push(context.control)
+        items.push(...context.items)
+      })
+      const { disabled, name, example, trigger, validators, asyncValidators } = fieldsSchema
+      const control = useFormArray(childrenControls, { disabled, name, example, trigger, validators, asyncValidators })
+      return { control, items }
+    } else {
+      const initValue = fieldsSchema.default ?? parentFields.default?.[currKey] ?? jsonSchema.default
+      const { disabled, name, example, trigger, validators, asyncValidators } = fieldsSchema
+
+      const required = (parentSchema as ObjectKeywords<any>).required?.includes(currKey as string)
+
+      const mergedValidators = [
+        required ? Validators.required : undefined,
+        ...convertArray(validators),
+        createValidator(jsonSchema),
+      ] as ValidatorFn[]
+
+      const control = useFormControl(initValue, {
+        disabled,
+        name,
+        example,
+        trigger,
+        asyncValidators,
+        validators: mergedValidators,
+      })
+
+      const {
+        formItemProps,
+        component,
+        componentProps,
+        customControl,
+        customControlTooltip,
+        customDescription,
+        customLabel,
+        customLabelTooltip,
+        customMessage,
+      } = fieldsSchema
+      const { title: label, description, format } = jsonSchema as StringKeywords<unknown>
+      const defaultComponentConfig = config.formatComponents[format!] || config.formatComponents.default!
+      const autoId = mergedAutoId.value
+      const id = isString(autoId) ? autoId + currKey : autoId ? currKey : undefined
+      const labelFor = mergedAutoLabelFor.value ? id : undefined
+      return {
+        control,
+        items: [
+          {
+            formItemProps: { label, labelFor, description, control, required, ...formItemProps },
+            component: component || defaultComponentConfig.component,
+            componentProps: component
+              ? { id, control, ...componentProps }
+              : { ...defaultComponentConfig.componentProps, id, control, ...componentProps },
+            customControl,
+            customControlTooltip,
+            customDescription,
+            customLabel,
+            customLabelTooltip,
+            customMessage,
+          },
+        ],
+      }
+    }
+  }
+
+  const { fields, schema } = mergedSchemaFormatter.value(props.fields, props.schema)
+  const { groupConfig, formItems } = useGroupConfigAndFormItems(fields, schema)
+
+  const { formProps, disabled, name, example, trigger, asyncValidators, validators } = fields
+  const formGroup = useFormGroup(groupConfig, { disabled, name, example, trigger, asyncValidators, validators })
+
+  return { formGroup, formProps, formItems }
+}
diff --git a/packages/pro/form/src/types.ts b/packages/pro/form/src/types.ts
new file mode 100644
index 000000000..89390335f
--- /dev/null
+++ b/packages/pro/form/src/types.ts
@@ -0,0 +1,124 @@
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
+ */
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import type { AbstractControl, AsyncValidatorFn, ValidatorFn } from '@idux/cdk/forms'
+import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '@idux/cdk/utils'
+import type { FormItemProps, FormProps } from '@idux/components/form'
+import type { RowProps } from '@idux/components/grid'
+import type { Options as AjvOptions } from 'ajv'
+import type { Component, DefineComponent, HTMLAttributes, PropType, VNodeChild } from 'vue'
+
+export const proFormProps = {
+  ajvOptions: Object as PropType<AjvOptions>,
+  autoId: { type: [Boolean, String] as PropType<boolean | string>, default: undefined },
+  autoLabelFor: { type: Boolean, default: undefined },
+  fields: Object as PropType<ProFormFieldsSchema>,
+  ignoreKeywords: Array as PropType<string[]>,
+  schema: Object as PropType<ProFormJsonSchema>,
+  schemaFormatter: Function as PropType<ProFormSchemaFormatter>,
+
+  //events
+  onSubmit: [Function, Array] as PropType<MaybeArray<(formData: any) => void>>,
+} as const
+
+export type ProFormProps = ExtractInnerPropTypes<typeof proFormProps>
+export type ProFormPublicProps = ExtractPublicPropTypes<typeof proFormProps>
+export type ProFormComponent = DefineComponent<
+  Omit<HTMLAttributes, keyof ProFormPublicProps> & ProFormPublicProps & FormProps
+>
+export type ProFormInstance = InstanceType<DefineComponent<ProFormProps>>
+
+type ArrayElement<A> = A extends (infer T)[] ? T : never
+
+export type ProFormSchemaFormatter = (
+  fields: ProFormFieldsSchema | undefined,
+  schema: ProFormJsonSchema | undefined,
+) => { fields: ProFormFieldsSchema; schema: ProFormJsonSchema }
+
+// custom render(slots)
+export interface ProFormItemCustoms {
+  customControl?: string | ((props: { control: AbstractControl; [key: string]: any }) => VNodeChild)
+  customControlTooltip?: string | (() => VNodeChild)
+  customDescription?: string | (() => VNodeChild)
+  customLabel?: string | (() => VNodeChild)
+  customLabelTooltip?: string | (() => VNodeChild)
+  customMessage?: string | (() => VNodeChild)
+}
+
+export interface ProFormFieldsSchema<T = any> extends ProFormItemCustoms {
+  formProps?: FormProps
+  formItemProps?: FormItemProps & RowProps
+  component?: string | Component
+  componentProps?: any
+
+  default?: T
+
+  disabled?: boolean
+  name?: string
+  example?: string
+  trigger?: 'change' | 'blur' | 'submit'
+  validators?: ValidatorFn | ValidatorFn[]
+  asyncValidators?: AsyncValidatorFn | AsyncValidatorFn[]
+
+  order?: string[]
+  type?: 'object' | 'array'
+
+  // show?: boolean | ((control: AbstractControl) => boolean)
+  // if?: boolean | ((control: AbstractControl) => boolean)
+
+  properties?: { readonly [K in keyof T]: ProFormFieldsSchema<T[K]> }
+  items?: ProFormFieldsSchema<ArrayElement<T>>
+}
+
+export type ProFormJsonSchema<T = any> =
+  | ObjectKeywords<T>
+  | ArrayKeywords<T>
+  | StringKeywords<T>
+  | NumberKeywords<T>
+  | BooleanKeywords<T>
+
+export interface CommonKeywords<T> {
+  title?: string
+  description?: string
+  const?: any
+  enum?: Readonly<(T | null)[]>
+  default?: T | null
+}
+
+export interface ObjectKeywords<T> extends CommonKeywords<T> {
+  type?: 'object'
+  properties: { readonly [K in keyof T]: ProFormJsonSchema<T[K]> }
+  required?: (keyof T)[]
+}
+
+export interface ArrayKeywords<T> extends CommonKeywords<T> {
+  type: 'array'
+  items?: ProFormJsonSchema<ArrayElement<T>>
+  minItems?: number
+  maxItems?: number
+}
+
+export interface StringKeywords<T> extends CommonKeywords<T> {
+  type: 'string'
+  minLength?: number
+  maxLength?: number
+  pattern?: string
+  format?: string
+}
+
+export interface NumberKeywords<T> extends CommonKeywords<T> {
+  type: 'number' | 'integer'
+  minimum?: number
+  maximum?: number
+  format?: string
+}
+
+export interface BooleanKeywords<T> extends CommonKeywords<T> {
+  type: 'boolean'
+}
diff --git a/packages/pro/form/style/index.less b/packages/pro/form/style/index.less
new file mode 100644
index 000000000..b5ae535be
--- /dev/null
+++ b/packages/pro/form/style/index.less
@@ -0,0 +1,5 @@
+// @import '../../style/mixins/reset.less';
+
+.@{pro-form-prefix} {
+ // .reset-component();
+}
diff --git a/packages/pro/form/style/themes/default.less b/packages/pro/form/style/themes/default.less
new file mode 100644
index 000000000..a66443560
--- /dev/null
+++ b/packages/pro/form/style/themes/default.less
@@ -0,0 +1,4 @@
+@import '../../../style/themes/default.less';
+@import './default.variable.less';
+
+@import '../index.less';
diff --git a/packages/pro/form/style/themes/default.ts b/packages/pro/form/style/themes/default.ts
new file mode 100644
index 000000000..25e3122a6
--- /dev/null
+++ b/packages/pro/form/style/themes/default.ts
@@ -0,0 +1,5 @@
+// style dependencies
+
+import '@idux/components/form/style/themes/default'
+
+import './default.less'
diff --git a/packages/pro/form/style/themes/default.variable.less b/packages/pro/form/style/themes/default.variable.less
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/pro/form/style/themes/seer.less b/packages/pro/form/style/themes/seer.less
new file mode 100644
index 000000000..32bf707c1
--- /dev/null
+++ b/packages/pro/form/style/themes/seer.less
@@ -0,0 +1,4 @@
+@import '../../../style/themes/seer.less';
+@import './seer.variable.less';
+
+@import '../index.less';
diff --git a/packages/pro/form/style/themes/seer.ts b/packages/pro/form/style/themes/seer.ts
new file mode 100644
index 000000000..ad82910d6
--- /dev/null
+++ b/packages/pro/form/style/themes/seer.ts
@@ -0,0 +1,5 @@
+// style dependencies
+
+import '@idux/components/form/style/themes/seer'
+
+import './seer.less'
diff --git a/packages/pro/form/style/themes/seer.variable.less b/packages/pro/form/style/themes/seer.variable.less
new file mode 100644
index 000000000..498793af1
--- /dev/null
+++ b/packages/pro/form/style/themes/seer.variable.less
@@ -0,0 +1 @@
+@import './default.variable.less';
diff --git a/packages/pro/index.ts b/packages/pro/index.ts
index 93279f558..ae89ae819 100644
--- a/packages/pro/index.ts
+++ b/packages/pro/index.ts
@@ -7,6 +7,7 @@
 
 import type { App, Directive } from 'vue'
 
+import { IxProForm } from '@idux/pro/form'
 import { IxProLayout, IxProLayoutSiderTrigger } from '@idux/pro/layout'
 import { IxProSearch } from '@idux/pro/search'
 import { IxProTable, IxProTableLayoutTool } from '@idux/pro/table'
@@ -17,6 +18,7 @@ import { version } from '@idux/pro/version'
 const directives: Record<string, Directive> = {}
 
 const components = [
+  IxProForm,
   IxProLayout,
   IxProLayoutSiderTrigger,
   IxProTable,
@@ -41,9 +43,10 @@ const installer = { install, version }
 export default installer
 export { install }
 
+export * from '@idux/pro/form'
 export * from '@idux/pro/layout'
+export * from '@idux/pro/search'
 export * from '@idux/pro/table'
 export * from '@idux/pro/transfer'
 export * from '@idux/pro/tree'
-export * from '@idux/pro/search'
 export * from '@idux/pro/version'
diff --git a/packages/pro/package.json b/packages/pro/package.json
index 235e4f747..0d45c90e8 100644
--- a/packages/pro/package.json
+++ b/packages/pro/package.json
@@ -34,6 +34,8 @@
   "dependencies": {
     "@idux/cdk": "^1.0.0-beta.19",
     "@idux/components": "^1.0.0-beta.20",
+    "ajv": "^8.11.0",
+    "ajv-formats": "^3.0.0-rc.0",
     "lodash-es": "^4.17.0"
   },
   "devDependencies": {
diff --git a/packages/pro/seer.less b/packages/pro/seer.less
index 032766f21..0df48bc94 100644
--- a/packages/pro/seer.less
+++ b/packages/pro/seer.less
@@ -1,3 +1,4 @@
+@import './form/style/themes/seer.less';
 @import './layout/style/themes/seer.less';
 @import './table/style/themes/seer.less';
 @import './transfer/style/themes/seer.less';
diff --git a/packages/pro/style/variable/prefix.less b/packages/pro/style/variable/prefix.less
index 9499dc23d..0609687b5 100644
--- a/packages/pro/style/variable/prefix.less
+++ b/packages/pro/style/variable/prefix.less
@@ -1,10 +1,9 @@
 @idux-pro-prefix: ix-pro;
 
+@pro-form-prefix: ~'@{idux-pro-prefix}-form';
 @pro-layout-prefix: ~'@{idux-pro-prefix}-layout';
-
-// Transfer
+@pro-search-prefix: ~'@{idux-pro-prefix}-search';
 @pro-table-prefix: ~'@{idux-pro-prefix}-table';
 @pro-transfer-prefix: ~'@{idux-pro-prefix}-transfer';
 @pro-tree-prefix: ~'@{idux-pro-prefix}-tree';
 
-@pro-search-prefix: ~'@{idux-pro-prefix}-search';
\ No newline at end of file
diff --git a/packages/pro/types.d.ts b/packages/pro/types.d.ts
index 4dad610d9..52b524154 100644
--- a/packages/pro/types.d.ts
+++ b/packages/pro/types.d.ts
@@ -5,6 +5,7 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
+import type { ProFormComponent } from '@idux/pro/form'
 import type { ProLayoutComponent, ProLayoutSiderTriggerComponent } from '@idux/pro/layout'
 import type { ProSearchComponent } from '@idux/pro/search'
 import type { ProTableComponent, ProTableLayoutToolComponent } from '@idux/pro/table'
@@ -13,6 +14,7 @@ import type { ProTreeComponent } from '@idux/pro/tree'
 
 declare module 'vue' {
   export interface GlobalComponents {
+    IxProForm: ProFormComponent
     IxProLayout: ProLayoutComponent
     IxProLayoutSiderTrigger: ProLayoutSiderTriggerComponent
     IxProTable: ProTableComponent