npm - @agentscope-ai/design - Versions diffs - 1.0.26-beta.1767840384443 → 1.0.26-beta.1768271896414 - Mend

@agentscope-ai/design 1.0.26-beta.1767840384443 → 1.0.26-beta.1768271896414

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/llms/all.llms.txt CHANGED Viewed

@@ -1,5 +1,65 @@
+<DemoTitle title="Video" desc="视频展示">
+#### API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
+| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode |  |
+<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
+#### API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
+| maxHeight | 最大高度 | number \| string | '90vh' |
+<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| title | 提示文字 | ReactNode \| () => ReactNode | - |
+### 共同的 API
+以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
+<!-- prettier-ignore -->
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| align | 该值将合并到 placement 的配置中，设置参考  | object | - |  |
+| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
+| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
+| color | 背景颜色 | string | - | 4.3.0 |
+| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
+| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
+| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
+| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
+| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
+| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |  |
+| placement | 气泡框位置，可选  | string | top |  |
+| trigger | 触发行为，可选  | string \| string[] | hover |  |
+| open | 用于手动控制浮层显隐，小于 4.23.0 使用  | boolean | false | 4.23.0 |
+| zIndex | 设置 Tooltip 的  | number | - |  |
+| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
 <DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
 #### API
@@ -96,19 +156,6 @@
-<DemoTitle title="Video" desc="视频展示">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
-| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode |  |
 <DemoTitle title="Tag" desc="进行标记和分类的小标签">
 #### API
@@ -144,49 +191,115 @@
-<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
+<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
 #### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
-| maxHeight | 最大高度 | number \| string | '90vh' |
+<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
-<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
+## antd API
-## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| title | 提示文字 | ReactNode \| () => ReactNode | - |
+```jsx
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat'
-### 共同的 API
+dayjs.extend(customParseFormat)
+<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
+```
-以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
-<!-- prettier-ignore -->
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| align | 该值将合并到 placement 的配置中，设置参考  | object | - |  |
-| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
-| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
-| color | 背景颜色 | string | - | 4.3.0 |
-| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
-| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
-| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
-| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
-| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
-| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |  |
-| placement | 气泡框位置，可选  | string | top |  |
-| trigger | 触发行为，可选  | string \| string[] | hover |  |
-| open | 用于手动控制浮层显隐，小于 4.23.0 使用  | boolean | false | 4.23.0 |
-| zIndex | 设置 Tooltip 的  | number | - |  |
-| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
+| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
+| autoFocus | 自动获取焦点 | boolean | false |  |
+| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
+| className | 选择器类名 | string | - |  |
+| defaultValue | 默认时间 |  | - |  |
+| disabled | 禁用全部操作 | boolean | false |  |
+| disabledTime | 不可选择的时间 |  | - | 4.19.0 |
+| format | 展示的时间格式 | string | HH:mm:ss |  |
+| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
+| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |  |
+| hourStep | 小时选项间隔 | number | 1 |  |
+| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
+| minuteStep | 分钟选项间隔 | number | 1 |  |
+| needConfirm | 是否需要确认按钮，为  | boolean | - | 5.14.0 |
+| open | 面板是否打开 | boolean | false |  |
+| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 |  |
+| placement | 选择框弹出的位置 | bottomLeft | bottomLeft |  |
+| popupClassName | 弹出层类名 | string | - |  |
+| popupStyle | 弹出层样式对象 | object | - |  |
+| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
+| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  |
+| secondStep | 秒选项间隔 | number | 1 |  |
+| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
+| size | 输入框大小， | large | - |  |
+| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
+| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
+| use12Hours | 使用 12 小时制，为 true 时  | boolean | false |  |
+| value | 当前时间 |  | - |  |
+| variant | 形态变体 | outlined | outlined | 5.13.0 \|  |
+| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - |  |
+| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - |  |
+| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
+#### DisabledTime
+```typescript
+type DisabledTime = (now: Dayjs) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+  disabledMilliseconds?: (
+    selectedHour: number,
+    selectedMinute: number,
+    selectedSecond: number,
+  ) => number[];
+};
+```
+注意：`disabledMilliseconds` 为 `5.14.0` 新增。
+## 方法
+| 名称 | 描述 | 版本 |
+|--------|--------|--------|
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
+## RangePicker
+属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| disabledTime | 不可选择的时间 |  | - | 4.19.0 |
+| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
+### RangeDisabledTime
+```typescript
+type RangeDisabledTime = (
+  now: Dayjs,
+  type = 'start' | 'end',
+) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+};
+```
@@ -446,6 +559,47 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
+<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
+#### API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| label | Switch后的内容 | ReactNode |  |
+<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| autoFocus | 组件自动获取焦点 | boolean | false |  |
+| checked | 指定当前是否选中 | boolean | false |  |
+| checkedChildren | 选中时的内容 | ReactNode | - |  |
+| className | Switch 器类名 | string | - |  |
+| defaultChecked | 初始是否选中 | boolean | false |  |
+| defaultValue | defaultChecked | boolean | - | 5.12.0 |
+| disabled | 是否禁用 | boolean | false |  |
+| loading | 加载中的开关 | boolean | false |  |
+| size | 开关大小，可选值： | string | default |  |
+| unCheckedChildren | 非选中时的内容 | ReactNode | - |  |
+| value | checked | boolean | - | 5.12.0 |
+| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - |  |
+| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - |  |
+## 方法
+| 名称 | 描述 |
+|--------|--------|
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |
 <DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
 #### API
@@ -516,156 +670,62 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
-<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
+<DemoTitle title="Statistic" desc="展示统计数值">
 #### API
-<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
+<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-```jsx
-import dayjs from 'dayjs';
-import customParseFormat from 'dayjs/plugin/customParseFormat'
-dayjs.extend(customParseFormat)
-<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
-```
+#### Statistic
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
-| autoFocus | 自动获取焦点 | boolean | false |  |
-| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
-| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
-| className | 选择器类名 | string | - |  |
-| defaultValue | 默认时间 |  | - |  |
-| disabled | 禁用全部操作 | boolean | false |  |
-| disabledTime | 不可选择的时间 |  | - | 4.19.0 |
-| format | 展示的时间格式 | string | HH:mm:ss |  |
-| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
-| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |  |
-| hourStep | 小时选项间隔 | number | 1 |  |
-| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
-| minuteStep | 分钟选项间隔 | number | 1 |  |
-| needConfirm | 是否需要确认按钮，为  | boolean | - | 5.14.0 |
-| open | 面板是否打开 | boolean | false |  |
-| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 |  |
-| placement | 选择框弹出的位置 | bottomLeft | bottomLeft |  |
-| popupClassName | 弹出层类名 | string | - |  |
-| popupStyle | 弹出层样式对象 | object | - |  |
-| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
-| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  |
-| secondStep | 秒选项间隔 | number | 1 |  |
-| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
-| size | 输入框大小， | large | - |  |
-| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| use12Hours | 使用 12 小时制，为 true 时  | boolean | false |  |
-| value | 当前时间 |  | - |  |
-| variant | 形态变体 | outlined | outlined | 5.13.0 \|  |
-| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - |  |
-| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - |  |
-| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
-#### DisabledTime
-```typescript
-type DisabledTime = (now: Dayjs) => {
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-  disabledMilliseconds?: (
-    selectedHour: number,
-    selectedMinute: number,
-    selectedSecond: number,
-  ) => number[];
-};
-```
-注意：`disabledMilliseconds` 为 `5.14.0` 新增。
-## 方法
-| 名称 | 描述 | 版本 |
-|--------|--------|--------|
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+| decimalSeparator | 设置小数点 | string | . |  |
+| formatter | 自定义数值展示 | (value) => ReactNode | - |  |
+| groupSeparator | 设置千分位标识符 | string | , |  |
+| loading | 数值是否加载中 | boolean | false | 4.8.0 |
+| precision | 数值精度 | number | - |  |
+| prefix | 设置数值的前缀 | ReactNode | - |  |
+| suffix | 设置数值的后缀 | ReactNode | - |  |
+| title | 数值的标题 | ReactNode | - |  |
+| value | 数值内容 | string \| number | - |  |
+| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
-## RangePicker
+#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
-属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
+<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
+<!-- prettier-ignore -->
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| disabledTime | 不可选择的时间 |  | - | 4.19.0 |
-| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
-### RangeDisabledTime
-```typescript
-type RangeDisabledTime = (
-  now: Dayjs,
-  type = 'start' | 'end',
-) => {
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-};
-```
-<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| label | Switch后的内容 | ReactNode |  |
-<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
+| format | 格式化倒计时展示，参考  | string | HH:mm:ss |  |
+| prefix | 设置数值的前缀 | ReactNode | - |  |
+| suffix | 设置数值的后缀 | ReactNode | - |  |
+| title | 数值的标题 | ReactNode | - |  |
+| value | 数值内容 | number | - |  |
+| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
+| onFinish | 倒计时完成时触发 | () => void | - |  |
+| onChange | 倒计时时间变化时触发 | (value: number) => void | - |  |
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
+#### Statistic.Timer <Badge>5.25.0+</Badge>
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| autoFocus | 组件自动获取焦点 | boolean | false |  |
-| checked | 指定当前是否选中 | boolean | false |  |
-| checkedChildren | 选中时的内容 | ReactNode | - |  |
-| className | Switch 器类名 | string | - |  |
-| defaultChecked | 初始是否选中 | boolean | false |  |
-| defaultValue | defaultChecked | boolean | - | 5.12.0 |
-| disabled | 是否禁用 | boolean | false |  |
-| loading | 加载中的开关 | boolean | false |  |
-| size | 开关大小，可选值： | string | default |  |
-| unCheckedChildren | 非选中时的内容 | ReactNode | - |  |
-| value | checked | boolean | - | 5.12.0 |
-| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - |  |
-| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - |  |
-## 方法
-| 名称 | 描述 |
-|--------|--------|
-| blur() | 移除焦点 |
-| focus() | 获取焦点 |
+| type | 计时类型，正计时或者倒计时 | countdown | - |  |
+| format | 格式化倒计时展示，参考  | string | HH:mm:ss |  |
+| prefix | 设置数值的前缀 | ReactNode | - |  |
+| suffix | 设置数值的后缀 | ReactNode | - |  |
+| title | 数值的标题 | ReactNode | - |  |
+| value | 数值内容 | number | - |  |
+| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
+| onFinish | 倒计时完成时触发, 指定为  | () => void | - |  |
+| onChange | 倒计时时间变化时触发 | (value: number) => void | - |  |
@@ -729,66 +789,6 @@ type RangeDisabledTime = (
-<DemoTitle title="Statistic" desc="展示统计数值">
-#### API
-<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-#### Statistic
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| decimalSeparator | 设置小数点 | string | . |  |
-| formatter | 自定义数值展示 | (value) => ReactNode | - |  |
-| groupSeparator | 设置千分位标识符 | string | , |  |
-| loading | 数值是否加载中 | boolean | false | 4.8.0 |
-| precision | 数值精度 | number | - |  |
-| prefix | 设置数值的前缀 | ReactNode | - |  |
-| suffix | 设置数值的后缀 | ReactNode | - |  |
-| title | 数值的标题 | ReactNode | - |  |
-| value | 数值内容 | string \| number | - |  |
-| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
-#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
-<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
-<!-- prettier-ignore -->
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| format | 格式化倒计时展示，参考  | string | HH:mm:ss |  |
-| prefix | 设置数值的前缀 | ReactNode | - |  |
-| suffix | 设置数值的后缀 | ReactNode | - |  |
-| title | 数值的标题 | ReactNode | - |  |
-| value | 数值内容 | number | - |  |
-| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
-| onFinish | 倒计时完成时触发 | () => void | - |  |
-| onChange | 倒计时时间变化时触发 | (value: number) => void | - |  |
-#### Statistic.Timer <Badge>5.25.0+</Badge>
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| type | 计时类型，正计时或者倒计时 | countdown | - |  |
-| format | 格式化倒计时展示，参考  | string | HH:mm:ss |  |
-| prefix | 设置数值的前缀 | ReactNode | - |  |
-| suffix | 设置数值的后缀 | ReactNode | - |  |
-| title | 数值的标题 | ReactNode | - |  |
-| value | 数值内容 | number | - |  |
-| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
-| onFinish | 倒计时完成时触发, 指定为  | () => void | - |  |
-| onChange | 倒计时时间变化时触发 | (value: number) => void | - |  |
 <DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
 #### API
@@ -806,75 +806,14 @@ type RangeDisabledTime = (
-<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
+<DemoTitle title="Select" desc="下拉选择器">
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-### Skeleton
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| active | 是否展示动画效果 | boolean | false |
-| avatar | 是否显示头像占位图 | boolean \|  | false |
-| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
-| paragraph | 是否显示段落占位图 | boolean \|  | true |
-| round | 为 true 时，段落和标题显示圆角 | boolean | false |
-| title | 是否显示标题占位图 | boolean \|  | true |
-### SkeletonAvatarProps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
-| shape | 指定头像的形状 | circle | - |
-| size | 设置头像占位图的大小 | number \|  | - |
-### SkeletonTitleProps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| width | 设置标题占位图的宽度 | number \| string | - |
-### SkeletonParagraphProps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| rows | 设置段落占位图的行数 | number | - |
-| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
-### SkeletonButtonProps
+### Select props
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| active | 是否展示动画效果 | boolean | false |  |
-| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
-| shape | 指定按钮的形状 | circle | - |  |
-| size | 设置按钮的大小 | large | - |  |
-### SkeletonInputProps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| active | 是否展示动画效果 | boolean | false |
-| size | 设置输入框的大小 | large | - |
-<DemoTitle title="Select" desc="下拉选择器">
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-### Select props
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
 | allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
 | autoClearSearchValue | 是否在选中项后清空搜索框，只在  | boolean | true |  |
@@ -965,6 +904,18 @@ type RangeDisabledTime = (
+<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
+## API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| texture | 是否显示纹理 | boolean | false |
 <DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
 #### API
@@ -1029,21 +980,77 @@ type RangeDisabledTime = (
-<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
-## API
+<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
+## antd API
-| 属性名 | 描述 | 类型 | 默认值 |
+通用属性参考：[通用属性](/docs/react/common-props)
+### Skeleton
+| 属性 | 说明 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| texture | 是否显示纹理 | boolean | false |
+| active | 是否展示动画效果 | boolean | false |
+| avatar | 是否显示头像占位图 | boolean \|  | false |
+| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
+| paragraph | 是否显示段落占位图 | boolean \|  | true |
+| round | 为 true 时，段落和标题显示圆角 | boolean | false |
+| title | 是否显示标题占位图 | boolean \|  | true |
+### SkeletonAvatarProps
+| 属性 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
+| shape | 指定头像的形状 | circle | - |
+| size | 设置头像占位图的大小 | number \|  | - |
+### SkeletonTitleProps
+| 属性 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| width | 设置标题占位图的宽度 | number \| string | - |
+### SkeletonParagraphProps
+| 属性 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| rows | 设置段落占位图的行数 | number | - |
+| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
-<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
+### SkeletonButtonProps
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| active | 是否展示动画效果 | boolean | false |  |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
+| shape | 指定按钮的形状 | circle | - |  |
+| size | 设置按钮的大小 | large | - |  |
+### SkeletonInputProps
+| 属性 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| active | 是否展示动画效果 | boolean | false |
+| size | 设置输入框的大小 | large | - |
+<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
 #### API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| bordered | 边框 | boolean | false |
+| ghost | 按钮背景色类型 | boolean | true |
+| gap | 间距 | number | 12 px |
 <AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
@@ -1109,33 +1116,9 @@ type RangeDisabledTime = (
-<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| maxLength | 可以输入内容的最大长度 | number |  |
-| value | 输入的内容 | string | (必填) |
-| className | 输入内容的类名 | string |  |
-| onChange | 输入内容的回调 | (value: string) => void |  |
-| variables | 可以插入的变量列表 | Array |  |
-| onCreate | 新增变量的触发回调 | () => void |  |
-| createBtnText | 新增变量的按钮文本 | string |  |
-| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false |  |
-<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
+<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
 #### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| bordered | 边框 | boolean | false |
-| ghost | 按钮背景色类型 | boolean | true |
-| gap | 间距 | number | 12 px |
 <AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
@@ -1253,6 +1236,23 @@ type RangeDisabledTime = (
+<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
+#### API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| maxLength | 可以输入内容的最大长度 | number |  |
+| value | 输入的内容 | string | (必填) |
+| className | 输入内容的类名 | string |  |
+| onChange | 输入内容的回调 | (value: string) => void |  |
+| variables | 可以插入的变量列表 | Array |  |
+| onCreate | 新增变量的触发回调 | () => void |  |
+| createBtnText | 新增变量的按钮文本 | string |  |
+| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false |  |
 <DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
 #### API
@@ -1401,6 +1401,102 @@ type RangeDisabledTime = (
+<DemoTitle title="Notification" desc="用于指示任务的完成进度">
+#### API
+<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+- `notification.success(config)`
+- `notification.error(config)`
+- `notification.info(config)`
+- `notification.warning(config)`
+- `notification.open(config)`
+- `notification.destroy(key?: String)`
+config 参数如下：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
+| className | 自定义 CSS class | string | - | - |
+| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| description | 通知提醒内容，必选 | ReactNode | - | - |
+| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
+| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
+| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
+| icon | 自定义图标 | ReactNode | - | - |
+| key | 当前通知唯一标志 | string | - | - |
+| message | 通知提醒标题，必选 | ReactNode | - | - |
+| placement | 弹出位置，可选  | string | topRight | - |
+| style | 自定义内联样式 |  | - | - |
+| role | 供屏幕阅读器识别的通知内容语义，默认为  | alert \| status | alert | 5.6.0 |
+| onClick | 点击通知时触发的回调函数 | function | - | - |
+| onClose | 当通知关闭时触发 | function | - | - |
+| props | 透传至通知  | Object | - | - |
+- `notification.useNotification(config)`
+config 参数如下：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
+| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
+| placement | 弹出位置，可选  | string | topRight |  |
+| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
+| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
+| rtl | 是否开启 RTL 模式 | boolean | false |  |
+| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \|  | { threshold: 3 } | 5.10.0 |
+| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
+### 全局配置
+还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
+`notification.config(options)`
+当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
+```js
+notification.config({
+  placement: 'bottomRight',
+  bottom: 50,
+  duration: 3,
+  rtl: true,
+});
+```
+#### notification.config
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
+| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
+| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
+| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
+| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
+| placement | 弹出位置，可选  | string | topRight |  |
+| rtl | 是否开启 RTL 模式 | boolean | false |  |
+| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
 <DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
 #### API
@@ -1571,124 +1667,28 @@ const confirmed = await modal.confirm({ ... });
-<DemoTitle title="Notification" desc="用于指示任务的完成进度">
+<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
 #### API
-<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| conent | 显示的内容 | string | "" |
+<AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
+组件提供了一些静态方法，使用方式和参数如下：
-- `notification.success(config)`
-- `notification.error(config)`
-- `notification.info(config)`
-- `notification.warning(config)`
-- `notification.open(config)`
-- `notification.destroy(key?: String)`
-config 参数如下：
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
-| className | 自定义 CSS class | string | - | - |
-| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
-| description | 通知提醒内容，必选 | ReactNode | - | - |
-| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
-| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
-| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
-| icon | 自定义图标 | ReactNode | - | - |
-| key | 当前通知唯一标志 | string | - | - |
-| message | 通知提醒标题，必选 | ReactNode | - | - |
-| placement | 弹出位置，可选  | string | topRight | - |
-| style | 自定义内联样式 |  | - | - |
-| role | 供屏幕阅读器识别的通知内容语义，默认为  | alert \| status | alert | 5.6.0 |
-| onClick | 点击通知时触发的回调函数 | function | - | - |
-| onClose | 当通知关闭时触发 | function | - | - |
-| props | 透传至通知  | Object | - | - |
-- `notification.useNotification(config)`
-config 参数如下：
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
-| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
-| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
-| placement | 弹出位置，可选  | string | topRight |  |
-| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
-| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
-| rtl | 是否开启 RTL 模式 | boolean | false |  |
-| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \|  | { threshold: 3 } | 5.10.0 |
-| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
-| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
-### 全局配置
-还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
-`notification.config(options)`
-当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
-```js
-notification.config({
-  placement: 'bottomRight',
-  bottom: 50,
-  duration: 3,
-  rtl: true,
-});
-```
-#### notification.config
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
-| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
-| duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
-| showProgress | 显示自动关闭通知框的进度条 | boolean |  | 5.18.0 |
-| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
-| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
-| placement | 弹出位置，可选  | string | topRight |  |
-| rtl | 是否开启 RTL 模式 | boolean | false |  |
-| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
-| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
-<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| conent | 显示的内容 | string | "" |
-<AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-组件提供了一些静态方法，使用方式和参数如下：
-- `message.success(content, [duration], onClose)`
-- `message.error(content, [duration], onClose)`
-- `message.info(content, [duration], onClose)`
-- `message.warning(content, [duration], onClose)`
-- `message.loading(content, [duration], onClose)`
+- `message.success(content, [duration], onClose)`
+- `message.error(content, [duration], onClose)`
+- `message.info(content, [duration], onClose)`
+- `message.warning(content, [duration], onClose)`
+- `message.loading(content, [duration], onClose)`
 | 参数 | 说明 | 类型 | 默认值 |
 |--------|--------|--------|--------|
@@ -1767,137 +1767,55 @@ message.config({
-<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
+<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
 #### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| shape | 形态 | 'default' \| 'round' | default 默认 |
-<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
+<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-### Input
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - |  |
-| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - |  |
-| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - |  |
-| classNames | 语义化结构 class | Record< | - | 5.4.0 |
-| count | 字符计数配置 |  | - | 5.10.0 |
-| defaultValue | 输入框默认内容 | string | - |  |
-| disabled | 是否禁用状态，默认为 false | boolean | false |  |
-| id | 输入框的 id | string | - |  |
-| maxLength | 最大长度 | number | - |  |
-| prefix | 带有前缀图标的 input | ReactNode | - |  |
-| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
+| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
+| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
+| autoFocus | 自动获取焦点 | boolean | false | - |
+| changeOnBlur | 是否在失去焦点时，触发  | boolean | true | 5.11.0 |
+| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
+| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
+| decimalSeparator | 小数点 | string | - | - |
+| placeholder | 占位符 | string | - |  |
+| defaultValue | 初始值 | number | - | - |
+| disabled | 禁用 | boolean | false | - |
+| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
+| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
+| max | 最大值 | number |  | - |
+| min | 最小值 | number |  | - |
+| parser | 指定从  | function(string): number | - | - |
+| precision | 数值精度，配置  | number | - | - |
+| readOnly | 只读 | boolean | false | - |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
-| styles | 语义化结构 style | Record< | - | 5.4.0 |
-| size | 控件大小。注：标准表单内的输入框大小限制为  | large | - |  |
-| suffix | 带有后缀图标的 input | ReactNode | - |  |
-| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text |  |
-| value | 输入框内容 | string | - |  |
+| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
+| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
+| size | 输入框大小 | large | - | - |
+| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
+| stringMode | 字符值模式，开启后支持高精度小数。同时  | boolean | false | 4.13.0 |
+| value | 当前值 | number | - | - |
 | variant | 形态变体 | outlined | outlined | 5.13.0 \|  |
-| onChange | 输入框内容变化时的回调 | function(e) | - |  |
-| onPressEnter | 按下回车的回调 | function(e) | - |  |
-| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
-如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
-Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
-#### CountConfig
-```tsx
-interface CountConfig {
-  // 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
-  max?: number;
-  // 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
-  strategy?: (value: string) => number;
-  // 同 `showCount`
-  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
-  // 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
-  exceedFormatter?: (value: string, config: { max: number }) => string;
-}
-```
-### Input.TextArea
-同 Input 属性，外加：
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
-| classNames | 语义化结构 class | Record< | - | 5.4.0 |
-| styles | 语义化结构 style | Record< | - | 5.4.0 |
-`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
-### Input.Search
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与  | ReactNode | false |
-| loading | 搜索 loading | boolean | false |
-| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
-其余属性和 Input 一致。
-### Input.Password
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ?  : ) | 4.3.0 |
-| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \|  | true |  |
-### Input.OTP
-`5.16.0` 新增。
-开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultValue | 默认值 | string | - |  |
-| disabled | 是否禁用 | boolean | false |  |
-| formatter | 格式化展示，留空字段会被  | (value: string) => string | - |  |
-| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
-| mask | 自定义展示，和  | boolean \| string | false | 5.17.0 |
-| length | 输入元素数量 | number | 6 |  |
-| status | 设置校验状态 | 'error' \| 'warning' | - |  |
-| size | 输入框大小 | small | middle |  |
-| variant | 形态变体 | outlined | outlined | underlined |
-| value | 输入框内容 | string | - |  |
-| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - |  |
-| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
-#### VisibilityToggle
-| Property | Description | Type | Default | Version |
-|--------|--------|--------|--------|--------|
-| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
-| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
+| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
+| onPressEnter | 按下回车的回调 | function(e) | - | - |
+| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
-#### Input Methods
+## Ref
 | 名称 | 说明 | 参数 | 版本 |
 |--------|--------|--------|--------|
-| blur | 取消焦点 | - |  |
-| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
+| blur() | 移除焦点 | - |  |
+| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
+| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
@@ -2069,55 +1987,137 @@ type TransformAction =
-<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
+<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
 #### API
-<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| shape | 形态 | 'default' \| 'round' | default 默认 |
+<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
+### Input
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
-| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
-| autoFocus | 自动获取焦点 | boolean | false | - |
-| changeOnBlur | 是否在失去焦点时，触发  | boolean | true | 5.11.0 |
-| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
-| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
-| decimalSeparator | 小数点 | string | - | - |
-| placeholder | 占位符 | string | - |  |
-| defaultValue | 初始值 | number | - | - |
-| disabled | 禁用 | boolean | false | - |
-| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
-| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
-| max | 最大值 | number |  | - |
-| min | 最小值 | number |  | - |
-| parser | 指定从  | function(string): number | - | - |
-| precision | 数值精度，配置  | number | - | - |
-| readOnly | 只读 | boolean | false | - |
+| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - |  |
+| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - |  |
+| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - |  |
+| classNames | 语义化结构 class | Record< | - | 5.4.0 |
+| count | 字符计数配置 |  | - | 5.10.0 |
+| defaultValue | 输入框默认内容 | string | - |  |
+| disabled | 是否禁用状态，默认为 false | boolean | false |  |
+| id | 输入框的 id | string | - |  |
+| maxLength | 最大长度 | number | - |  |
+| prefix | 带有前缀图标的 input | ReactNode | - |  |
+| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
-| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
-| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
-| size | 输入框大小 | large | - | - |
-| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
-| stringMode | 字符值模式，开启后支持高精度小数。同时  | boolean | false | 4.13.0 |
-| value | 当前值 | number | - | - |
+| styles | 语义化结构 style | Record< | - | 5.4.0 |
+| size | 控件大小。注：标准表单内的输入框大小限制为  | large | - |  |
+| suffix | 带有后缀图标的 input | ReactNode | - |  |
+| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text |  |
+| value | 输入框内容 | string | - |  |
 | variant | 形态变体 | outlined | outlined | 5.13.0 \|  |
-| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
-| onPressEnter | 按下回车的回调 | function(e) | - | - |
-| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
+| onChange | 输入框内容变化时的回调 | function(e) | - |  |
+| onPressEnter | 按下回车的回调 | function(e) | - |  |
+| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
-## Ref
+如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
+Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
+#### CountConfig
+```tsx
+interface CountConfig {
+  // 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
+  max?: number;
+  // 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
+  strategy?: (value: string) => number;
+  // 同 `showCount`
+  show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
+  // 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
+  exceedFormatter?: (value: string, config: { max: number }) => string;
+}
+```
+### Input.TextArea
+同 Input 属性，外加：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
+| classNames | 语义化结构 class | Record< | - | 5.4.0 |
+| styles | 语义化结构 style | Record< | - | 5.4.0 |
+`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
+### Input.Search
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与  | ReactNode | false |
+| loading | 搜索 loading | boolean | false |
+| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
+其余属性和 Input 一致。
+### Input.Password
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ?  : ) | 4.3.0 |
+| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \|  | true |  |
+### Input.OTP
+`5.16.0` 新增。
+开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultValue | 默认值 | string | - |  |
+| disabled | 是否禁用 | boolean | false |  |
+| formatter | 格式化展示，留空字段会被  | (value: string) => string | - |  |
+| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
+| mask | 自定义展示，和  | boolean \| string | false | 5.17.0 |
+| length | 输入元素数量 | number | 6 |  |
+| status | 设置校验状态 | 'error' \| 'warning' | - |  |
+| size | 输入框大小 | small | middle |  |
+| variant | 形态变体 | outlined | outlined | underlined |
+| value | 输入框内容 | string | - |  |
+| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - |  |
+| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
+#### VisibilityToggle
+| Property | Description | Type | Default | Version |
+|--------|--------|--------|--------|--------|
+| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
+| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
+#### Input Methods
 | 名称 | 说明 | 参数 | 版本 |
 |--------|--------|--------|--------|
-| blur() | 移除焦点 | - |  |
-| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
-| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
+| blur | 取消焦点 | - |  |
+| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
@@ -2168,1228 +2168,1155 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
-<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
-#### API
-<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
+<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
+## API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| type | 空状态类型 | \| 'noData'
+    \| 'networkError'
+    \| '404'
+    \| 'arrears'
+    \| 'desktopOnly'
+    \| 'noAudio'
+    \| 'noImage'
+    \| 'noVideo'
+    \| 'noAccess'
+    \| 'error'
+    \| 'noChat'
+    \| 'noModel'
+    \| 'noApp'
+    \| 'success'
+    \| 'failed'
+    \| 'inProgress'
+    \| 'stayTuned' | 'noData' |
+| texture | 是否显示纹理 | boolean | true |
+| image | 图片地址 | string | 默认是no data的图片 |
+| imageStyle | 图片样式 | React.CSSProperties |  |
+| title | 标题内容 | React.ReactNode |  |
+| description | 自定义描述内容 | React.ReactNode |  |
+| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void |  |
+| okText | ok按钮的文本 | React.ReactNode |  |
+| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
+| okButtonProps | ok按钮的props | SparkButtonProps |  |
+| children | 自定义空状态的内容 | React.ReactNode |  |
+| className | 自定义空状态的类名 | string |  |
+| style | 自定义空状态的样式 | React.CSSProperties |  |
+| size | 自定义空状态的大小 | React.CSSProperties['width'] |  |
+| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
+<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
-### Form
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| colon | 配置 Form.Item 的  | boolean | true |  |
-| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
-| component | 设置 Form 渲染元素，为  | ComponentType \| false | form |  |
-| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 |  | - |  |
-| form | 经  |  | - |  |
-| feedbackIcons | 当  |  | - | 5.9.0 |
-| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  |
-| labelAlign | label 标签的文本对齐方式 | left | right |  |
-| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
-| labelCol | label 标签布局，同  |  | - |  |
-| layout | 表单布局 | horizontal | horizontal |  |
-| name | 表单名称，会作为表单字段  | string | - |  |
-| preserve | 当字段被删除时保留字段值。你可以通过  | boolean | true | 4.4.0 |
-| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \|  | true | renderProps |
-| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \|  | false | focus: 5.24.0 |
-| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - |  |
-| validateMessages | 验证提示模板，说明 |  | - |  |
-| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
-| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \|  |
-| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol |  | - |  |
-| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  |
-| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  |
-| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  |
-| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  |
-| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
-支持原生 form 除 `onSubmit` 外的所有属性。
-### validateMessages
+<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
+#### API
-Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
+<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
-```jsx
-const validateMessages = {
-  required: "'${name}' 是必选字段",
-  // ...
-};
+## antd API
-<Form validateMessages={validateMessages} />;
-```
+通用属性参考：[通用属性](/docs/react/common-props)
+自 `antd@5.0.0` 版本开始提供该组件。
-此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板：
+### 共同的 API
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| icon | 自定义图标 | ReactNode | - |  |
+| description | 文字及其它内容 | ReactNode | - |  |
+| tooltip | 气泡卡片的内容 | ReactNode \|  | - | TooltipProps: 5.25.0 |
+| type | 设置按钮类型 | default | default |  |
+| shape | 设置按钮形状 | circle | circle |  |
+| onClick | 点击按钮时的回调 | (event) => void | - |  |
+| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
+| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - |  |
+| htmlType | 设置  | submit | button | 5.21.0 |
+| badge | 带徽标数字的悬浮按钮（不支持  |  | - | 5.4.0 |
-```jsx
-const validateMessages = {
-  required: "'${name}' 是必选字段",
-  // ...
-};
-<ConfigProvider form={{ validateMessages }}>
-  <Form />
-</ConfigProvider>;
-```
+### FloatButton.Group
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| shape | 设置包含的 FloatButton 按钮形状 | circle | circle |  |
+| trigger | 触发方式（有触发方式为菜单模式） | click | - |  |
+| open | 受控展开，需配合 trigger 一起使用 | boolean | - |  |
+| closeIcon | 自定义关闭按钮 | React.ReactNode |  |  |
+| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
+| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - |  |
+| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
-## Form.Item
-表单字段组件，用于数据双向绑定、校验、布局等。
+### FloatButton.BackTop
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| colon | 配合  | boolean | true |  |
-| dependencies | 设置依赖字段，说明 |  | - |  |
-| extra | 额外的提示信息，和  | ReactNode | - |  |
-| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  |
-| getValueProps | 为子元素添加额外的属性 (不建议通过  | (value: any) => Record | - | 4.2.0 |
-| hasFeedback | 配合  | boolean \| { icons:  | false | icons: 5.9.0 |
-| help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - |  |
-| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 |
-| htmlFor | 设置子元素 label  | string | - |  |
-| initialValue | 设置子元素默认值，如果与 Form 的  | string | - | 4.2.0 |
-| label | label | ReactNode | - | null: 5.22.0 |
-| labelAlign | 标签文本对齐方式 | left | right |  |
-| labelCol | label |  | - |  |
-| messageVariables | 默认验证字段的信息，查看 | Record | - | 4.7.0 |
-| name | 字段名，支持数组 |  | - |  |
-| normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - |  |
-| noStyle | 为  | boolean | false |  |
-| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
-| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |  |
-| rules | 校验规则，设置字段的校验逻辑。点击 |  | - |  |
-| shouldUpdate | 自定义字段更新逻辑，说明 | boolean \| (prevValue, curValue) => boolean | false |  |
-| tooltip | 配置提示信息 | ReactNode \|  | - | 4.7.0 |
-| trigger | 设置收集字段值变更的时机。点击 | string | onChange |  |
-| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置  | boolean \|  | false | parallel |
-| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
-| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
-| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange |  |
-| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是  | string | value |  |
-| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同  |  | - |  |
-| layout | 表单项布局 | horizontal | - | 5.18.0 |
+| duration | 回到顶部所需时间（ms） | number | 450 |  |
+| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window |  |
+| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  |
+| onClick | 点击按钮的回调函数 | () => void | - |  |
-被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
-1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步（你可以使用 Form 的 `onValuesChange`），但还是可以继续监听 `onChange` 事件。
-2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。
-3. 你不应该用 `setState`，可以使用 `form.setFieldsValue` 来动态改变表单值。
+<DemoTitle title="Dropdown" desc="向下弹出的列表。">
+#### API
-### dependencies
+<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
-当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
-`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
+## antd API
-### FeedbackIcons
+通用属性参考：[通用属性](/docs/react/common-props)
-`({ status: ValidateStatus, errors: ReactNode, warnings: ReactNode }) => Record<ValidateStatus, ReactNode>`
+### Dropdown
-### shouldUpdate
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
+| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
+| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
+| disabled | 菜单是否禁用 | boolean | - |  |
+| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
+| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
+| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
+| menu | 菜单配置项 |  | - | 4.24.0 |
+| overlayClassName | 下拉根元素的类名称 | string | - |  |
+| overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
+| placement | 菜单弹出位置： | string | bottomLeft |  |
+| trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ |  |
+| open | 菜单是否显示，小于 4.23.0 使用  | boolean | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用  | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
-Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
-当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
+### Dropdown.Button
-相关issue：[#34500](https://github.com/ant-design/ant-design/issues/34500)
+属性与 Dropdown 的相同。还包含以下属性：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - |  |
+| loading | 设置按钮载入状态，和  | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
+| danger | 设置危险按钮 | boolean | - | 4.23.0 |
+| icon | 右侧的 icon | ReactNode | - |  |
+| size | 按钮大小，和  | large | middle |  |
+| type | 按钮类型，和  | primary | default |  |
+| onClick | 点击左侧按钮的回调，和  | (event: React.MouseEvent) => void | - |  |
-```jsx
-<Form.Item shouldUpdate>
-  {() => {
-    return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
-  }}
-</Form.Item>
-```
+## 注意
-你可以参考[示例](#form-demo-inline-login)查看具体使用场景。
+请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+## antd API
-当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
+### Menu
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - |  |
+| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - |  |
+| expandIcon | 自定义展开图标 | ReactNode \|  | - | 4.9.0 |
+| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |  |
+| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |  |
+| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |  |
+| items | 菜单内容 |  | - | 4.20.0 |
+| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical |  |
+| multiple | 是否允许多选 | boolean | false |  |
+| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - |  |
+| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode |  |  |
+| selectable | 是否允许选中 | boolean | true |  |
+| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - |  |
+| style | 根节点样式 | CSSProperties | - |  |
+| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |  |
+| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |  |
+| theme | 主题颜色 | light | light |  |
+| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover |  |
+| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |  |
+| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
+| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - |  |
+| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   |  |
-```jsx
-<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
-  {() => {
-    return (
-      <Form.Item name="other">
-        <Input />
-      </Form.Item>
-    );
-  }}
-</Form.Item>
-```
+更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
-你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
+### ItemType
-### messageVariables
+type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
-你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
+#### MenuItemType
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| danger | 展示错误状态样式 | boolean | false |  |
+| disabled | 是否禁用 | boolean | false |  |
+| extra | 额外节点 | ReactNode | - | 5.21.0 |
+| icon | 菜单图标 | ReactNode | - |  |
+| key | item 的唯一标志 | string | - |  |
+| label | 菜单项标题 | ReactNode | - |  |
+| title | 设置收缩时展示的悬浮标题 | string | - |  |
-```jsx
-<Form>
-  <Form.Item
-    messageVariables={{ another: 'good' }}
-    label="user"
-    rules={[{ required: true, message: '${another} is required' }]}
-  >
-    <Input />
-  </Form.Item>
-  <Form.Item
-    messageVariables={{ label: 'good' }}
-    label={<span>user</span>}
-    rules={[{ required: true, message: '${label} is required' }]}
-  >
-    <Input />
-  </Form.Item>
-</Form>
-```
+#### SubMenuType
-自 `5.20.2` 起，当你希望不要转译 `${}` 时，你可以通过 `\\${}` 来略过：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| children | 子菜单的菜单项 |  | - |  |
+| disabled | 是否禁用 | boolean | false |  |
+| icon | 菜单图标 | ReactNode | - |  |
+| key | 唯一标志 | string | - |  |
+| label | 菜单项标题 | ReactNode | - |  |
+| popupClassName | 子菜单样式， | string | - |  |
+| popupOffset | 子菜单偏移量， | [number, number] | - |  |
+| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
+| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - |  |
-```jsx
-{ required: true, message: '${label} is convert, \\${label} is not convert' }
+#### MenuItemGroupType
-// good is convert, ${label} is not convert
-```
+定义类型为 `group` 时，会作为分组处理:
-## Form.List
+```ts
+const groupItem = {
+  type: 'group', // Must have
+  label: 'My Group',
+  children: [],
+};
+```
-为字段提供数组化管理。
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - |  |
-| initialValue | 设置子元素默认值，如果与 Form 的  | any[] | - | 4.9.0 |
-| name | 字段名，支持数组。List 本身也是字段，因而  |  | - |  |
-| rules | 校验规则，仅支持自定义规则。需要配合  | { validator, message }[] | - | 4.7.0 |
+| children | 分组的菜单项 |  | - |  |
+| label | 分组标题 | ReactNode | - |  |
-```tsx
-<Form.List>
-  {(fields) =>
-    fields.map((field) => (
-      <Form.Item {...field}>
-        <Input />
-      </Form.Item>
-    ))
-  }
-</Form.List>
-```
+#### MenuDividerType
+菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
-注意：Form.List 下的字段不应该配置 `initialValue`，你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
-## operation
+```ts
+const dividerItem = {
+  type: 'divider', // Must have
+};
+```
-Form.List 渲染表单相关操作函数。
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 |
-| move | 移动表单项 | (from: number, to: number) => void | - |  |
-| remove | 删除表单项 | (index: number \| number[]) => void | number[] | 4.5.0 |
+| dashed | 是否虚线 | boolean | false |  |
-## Form.ErrorList
-4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| errors | 错误列表 | ReactNode[] | - |
+<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
+#### API
+<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
-## Form.Provider
-提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。
+## antd API
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
-| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |
+通用属性参考：[通用属性](/docs/react/common-props)
+### Descriptions
-```jsx
-<Form.Provider
-  onFormFinish={(name) => {
-    if (name === 'form1') {
-      // Do something...
-    }
-  }}
->
-  <Form name="form1">...</Form>
-  <Form name="form2">...</Form>
-</Form.Provider>
-```
-### FormInstance
-| 名称 | 说明 | 类型 | 版本 |
-|--------|--------|--------|--------|
-| getFieldError | 获取对应字段名的错误信息 | (name:  |  |
-| getFieldInstance | 获取对应字段实例 | (name:  | 4.4.0 |
-| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?:  |  |
-| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用  |  |  |
-| getFieldValue | 获取对应字段名的值 | (name:  |  |
-| isFieldsTouched | 检查一组字段是否被用户操作过， | (nameList?:  |  |
-| isFieldTouched | 检查对应字段是否被用户操作过 | (name:  |  |
-| isFieldValidating | 检查对应字段是否正在校验 | (name:  |  |
-| resetFields | 重置一组字段到  | (fields?:  |  |
-| scrollToField | 滚动到对应字段位置 | (name:  | focus: 5.24.0 |
-| setFields | 设置一组字段状态 | (fields:  |  |
-| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且 | (name:  | 4.22.0 |
-| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且 | (values) => void |  |
-| submit | 提交表单，与点击  | () => void |  |
-| validateFields | 触发表单验证，设置  | (nameList?:  |  |
-#### validateFields
-```tsx
-export interface ValidateConfig {
-  // 5.5.0 新增。仅校验内容而不会将错误信息展示到 UI 上。
-  validateOnly?: boolean;
-  // 5.9.0 新增。对提供的 `nameList` 与其子路径进行递归校验。
-  recursive?: boolean;
-  // 5.11.0 新增。校验 dirty 的字段（touched + validated）。
-  // 使用 `dirty` 可以很方便的仅校验用户操作过和被校验过的字段。
-  dirty?: boolean;
-}
-```
-返回示例：
-```jsx
-validateFields()
-  .then((values) => {
-    /*
-  values:
-    {
-      username: 'username',
-      password: 'password',
-    }
-  */
-  })
-  .catch((errorInfo) => {
-    /*
-    errorInfo:
-      {
-        values: {
-          username: 'username',
-          password: 'password',
-        },
-        errorFields: [
-          { name: ['password'], errors: ['Please input your Password!'] },
-        ],
-        outOfDate: false,
-      }
-    */
-  });
-```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| bordered | 是否展示边框 | boolean | false |  |
+| colon | 配置  | boolean | true |  |
+| column | 一行的  | number \|  | 3 |  |
+| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
+| items | 描述列表项内容 |  | - | 5.8.0 |
+| layout | 描述布局 | horizontal | horizontal |  |
+| size | 设置列表的大小。可以设置为  | default | - |  |
+| title | 描述列表的标题，显示在最顶部 | ReactNode | - |  |
+| classNames | 语义化结构 class |  | - | 5.23.0 |
+| styles | 语义化结构 style |  | - | 5.23.0 |
-## Hooks
-### Form.useForm
+### DescriptionItem
-`type Form.useForm = (): [FormInstance]`
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| label | 内容的描述 | ReactNode | - |  |
+| span | 包含列的数量（ | number\|  | 1 | screens: 5.9.0 |
-创建 Form 实例，用于管理所有数据状态。
-### Form.useFormInstance
+span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
-`type Form.useFormInstance = (): FormInstance`
-`4.20.0` 新增，获取当前上下文正在使用的 Form 实例，常见于封装子组件消费无需透传 Form 实例：
+<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
+#### API
-```tsx
-const Sub = () => {
-  const form = Form.useFormInstance();
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| showDivider | 是否显示分割线 | boolean | true |
-  return <Button onClick={() => form.setFieldsValue({})} />;
-};
+##### Drawer.Confirm - 带按钮的抽屉
-export default () => {
-  const [form] = Form.useForm();
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| footer | 自定义底部内容 | React.ReactNode |  |
+| onOk | 点击确定回调 | () => void |  |
+| okText | 确认按钮文字 | string |  |
+| okButtonProps | 确认按钮属性 | ButtonProps |  |
+| onCancel | 点击取消回调 | () => void |  |
+| cancelText | 取消按钮文字 | string |  |
+| cancelButtonProps | 取消按钮属性 | ButtonProps |  |
+| info | 底部额外内容 | React.ReactNode |  |
-  return (
-    <Form form={form}>
-      <Sub />
-    </Form>
-  );
-};
-```
+<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
-### Form.useWatch
+## antd API
-`type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
+通用属性参考：[通用属性](/docs/react/common-props)
-`5.12.0` 新增 `selector`
+<!-- prettier-ignore -->
+<Container type="warning" title="注意">
+v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
+</Container>
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
+| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - |  |
+| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
+| classNames | 语义化结构 className |  | - | 5.10.0 |
+| closeIcon | 自定义关闭图标。5.7.0：设置为  | ReactNode |  |  |
+| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
+| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
+| footer | 抽屉的页脚 | ReactNode | - |  |
+| forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
+| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
+| height | 高度，在  | string \| number | 378 |  |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
+| mask | 是否展示遮罩 | boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| placement | 抽屉的方向 | top | right |  |
+| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
+| rootStyle | 可用于设置 Drawer 最外层容器的样式，和  | CSSProperties | - |  |
+| size | 预设抽屉宽度（或高度），default  | 'default' \| 'large' | 'default' | 4.17.0 |
+| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用  | CSSProperties | - |  |
+| styles | 语义化结构 style |  | - | 5.10.0 |
+| title | 标题 | ReactNode | - |  |
+| loading | 显示骨架屏 | boolean | false | 5.17.0 |
+| open | Drawer 是否可见 | boolean | - |
+| width | 宽度 | string \| number | 378 |  |
+| zIndex | 设置 Drawer 的  | number | 1000 |  |
+| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
+| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
-用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
-```tsx
-const Demo = () => {
-  const [form] = Form.useForm();
-  const userName = Form.useWatch('username', form);
-  const { data: options } = useSWR(`/api/user/${userName}`, fetcher);
+<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
+#### API
-  return (
-    <Form form={form}>
-      <Form.Item name="username">
-        <AutoComplete options={options} />
-      </Form.Item>
-    </Form>
-  );
-};
-```
+<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
-如果你的组件被包裹在 `Form.Item` 内部，你可以省略第二个参数，`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
+## antd API
-`useWatch` 默认只监听在 Form 中注册的字段，如果需要监听非注册字段，可以通过配置 `preserve` 进行监听：
+通用属性参考：[通用属性](/docs/react/common-props)
+日期类组件包括以下五种形式。
-```tsx
-const Demo = () => {
-  const [form] = Form.useForm();
-  const age = Form.useWatch('age', { form, preserve: true });
-  console.log(age);
+- DatePicker
+- DatePicker[picker="month"]
+- DatePicker[picker="week"]
+- DatePicker[picker="year"]
+- DatePicker[picker="quarter"] (4.1.0 新增)
+- RangePicker
-  return (
-    <div>
-      <Button onClick={() => form.setFieldValue('age', 2)}>Update</Button>
-      <Form form={form}>
-        <Form.Item name="name">
-          <Input />
-        </Form.Item>
-      </Form>
-    </div>
-  );
-};
-```
+### 国际化配置
+默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
-### Form.Item.useStatus
+如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
-`type Form.Item.useStatus = (): { status: ValidateStatus | undefined, errors: ReactNode[], warnings: ReactNode[] }`
-`4.22.0` 新增，可用于获取当前 Form.Item 的校验状态，如果上层没有 Form.Item，`status` 将会返回 `undefined`。`5.4.0` 新增 `errors` 和 `warnings`，可用于获取当前 Form.Item 的错误信息和警告信息：
+```jsx
+// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
+// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
+import locale from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
-```tsx
-const CustomInput = ({ value, onChange }) => {
-  const { status, errors } = Form.Item.useStatus();
-  return (
-    <input
-      value={value}
-      onChange={onChange}
-      className={`custom-input-${status}`}
-      placeholder={(errors.length && errors[0]) || ''}
-    />
-  );
-};
+dayjs.locale('zh-cn');
-export default () => (
-  <Form>
-    <Form.Item name="username">
-      <CustomInput />
-    </Form.Item>
-  </Form>
-);
+<ConfigProvider locale={locale}>
+  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
+</ConfigProvider>;
 ```
-#### 与其他获取数据的方式的区别
-Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。
-## Interface
+<!-- prettier-ignore -->
+<Container type="warning">
+在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
+</Container>
+### 共同的 API
-### NamePath
+以下 API 为 DatePicker、 RangePicker 共享的 API。
-`string | number | (string | number)[]`
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
+| autoFocus | 自动获取焦点 | boolean | false |  |
+| className | 选择器 className | string | - |  |
+| dateRender | 自定义日期单元格的内容，5.4.0 起用  | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
+| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| components | 自定义面板 | Record | - | 5.14.0 |
+| defaultOpen | 是否默认展开控制弹层 | boolean | - |  |
+| disabled | 禁用 | boolean | false |  |
+| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考  |  |  |  |
+| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
+| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
+| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
+| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
+| locale | 国际化配置 | object |  |  |
+| minDate | 最小日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
+| maxDate | 最大日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
+| mode | 日期面板的状态（ | time | - |  |
+| needConfirm | 是否需要确认按钮，为  | boolean | - | 5.14.0 |
+| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
+| open | 控制弹层是否展开 | boolean | - |  |
+| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
+| picker | 设置选择器类型 | date | date | quarter |
+| placeholder | 输入框提示文字 | string \| [string, string] | - |  |
+| placement | 选择框弹出的位置 | bottomLeft | bottomLeft |  |
+| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
+| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
+| presets | 预设时间范围快捷选择, 自  | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }[] | - |  |
+| size | 输入框大小， | large | - |  |
+| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
+| style | 自定义输入框样式 | CSSProperties | {} |  |
+| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
+| superNextIcon | 自定义  | ReactNode | - | 4.17.0 |
+| superPrevIcon | 自定义  | ReactNode | - | 4.17.0 |
+| variant | 形态变体 | outlined | outlined | 5.13.0 \|  |
+| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - |  |
+| onPanelChange | 日历面板切换的回调 | function(value, mode) | - |  |
-### GetFieldsValue
-`getFieldsValue` 提供了多种重载方法：
+### 共同的方法
-#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
+| 名称 | 描述 | 版本 |
+|--------|--------|--------|
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
-当不提供 `nameList` 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。
-当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
+### DatePicker
-当 `nameList` 为数组时，返回规定路径的值。需要注意的是，`nameList` 为嵌套数组。例如你需要某路径值应该如下：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 |  | - | 5.14.0 |
+| defaultValue | 默认日期，如果开始时间或结束时间为  |  | - |  |
+| disabledTime | 不可选择的时间 | function(date) | - |  |
+| format | 展示的日期格式，配置参考  |  | YYYY-MM-DD |  |
+| multiple | 是否为多选，不支持  | boolean | false | 5.14.0 |
+| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合  |  | - | 5.14.0 |
+| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
+| showNow | 显示当前日期时间的快捷选择 | boolean | - |  |
+| showTime | 增加时间选择功能 | Object \| boolean |  |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒， |  | dayjs() |  |
+| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
+| value | 日期 |  | - |  |
+| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - |  |
+| onOk | 点击确定按钮的回调 | function() | - |  |
+| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |  |
-```tsx
-// 单个路径
-form.getFieldsValue([['user', 'age']]);
+### DatePicker[picker=year]
-// 多个路径
-form.getFieldsValue([
-  ['user', 'age'],
-  ['preset', 'account'],
-]);
-```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultValue | 默认日期 |  | - |  |
+| format | 展示的日期格式，配置参考  |  | YYYY |  |
+| multiple | 是否为多选 | boolean | false | 5.14.0 |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
+| value | 日期 |  | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
-#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
+### DatePicker[picker=quarter]
-`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中，如果 List 仅绑定了 `bamboo` 字段，那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
+`4.1.0` 新增。
-### FilterFunc
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultValue | 默认日期 |  | - |  |
+| format | 展示的日期格式，配置参考  |  | YYYY-\QQ |  |
+| multiple | 是否为多选 | boolean | false | 5.14.0 |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
+| value | 日期 |  | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
-用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
+### DatePicker[picker=month]
-```tsx
-type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
-```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultValue | 默认日期 |  | - |  |
+| format | 展示的日期格式，配置参考  |  | YYYY-MM |  |
+| multiple | 是否为多选 | boolean | false | 5.14.0 |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
+| value | 日期 |  | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
-### FieldData
+### DatePicker[picker=week]
-| 名称 | 说明 | 类型 |
-|--------|--------|--------|
-| errors | 错误信息 | string[] |
-| warnings | 警告信息 | string[] |
-| name | 字段名称 |  |
-| touched | 是否被用户操作过 | boolean |
-| validating | 是否正在校验 | boolean |
-| value | 字段对应值 | any |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| defaultValue | 默认日期 |  | - |  |
+| format | 展示的日期格式，配置参考  |  | YYYY-wo |  |
+| multiple | 是否为多选 | boolean | false | 5.14.0 |
+| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
+| value | 日期 |  | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
+| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
-### Rule
+### RangePicker
-Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] |  |
+| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
+| dateRender | 自定义日期单元格的内容，5.4.0 起用  | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
+| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 |  | - | 5.14.0 |
+| defaultValue | 默认日期 |  | - |  |
+| disabled | 禁用起始项 | [boolean, boolean] | - |  |
+| disabledTime | 不可选择的时间 | function(date: dayjs, partial:  | - | info.from |
+| format | 展示的日期格式，配置参考  |  | YYYY-MM-DD HH:mm:ss |  |
+| id | 设置输入框  | { start?: string, end?: string } | - | 5.14.0 |
+| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合  |  | - | 5.14.0 |
+| presets | 预设时间范围快捷选择，自  | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))[] }[] | - |  |
+| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
+| separator | 设置分隔符 | React.ReactNode |  |  |
+| showTime | 增加时间选择功能 | Object\|boolean |  |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒， |  | [dayjs(), dayjs()] |  |
+| value | 日期 |  | - |  |
+| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - |  |
+| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - |  |
+| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
+| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
-```tsx
-type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
-```
+#### formatType
-| 名称 | 说明 | 类型 | 版本 |
-|--------|--------|--------|--------|
-| defaultField | 仅在  |  |  |
-| enum | 是否匹配枚举中的值（需要将  | any[] |  |
-| fields | 仅在  | Record<string,  |  |
-| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |  |
-| max | 必须设置  | number |  |
-| message | 错误信息，不设置时会通过 | string \| ReactElement |  |
-| min | 必须设置  | number |  |
-| pattern | 正则表达式匹配 | RegExp |  |
-| required | 是否为必选字段 | boolean |  |
-| transform | 将字段值转换成目标值后进行校验 | (value) => any |  |
-| type | 类型，常见有  | string |  |
-| validateTrigger | 设置触发验证时机，必须是 Form.Item 的  | string \| string[] |  |
-| validator | 自定义校验，接收 Promise 作为返回值。 | ( |  |
-| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
-| whitespace | 如果字段仅包含空格则校验不通过，只在  | boolean |  |
+```typescript
+import type { Dayjs } from 'dayjs';
+type Generic = string;
+type GenericFn = (value: Dayjs) => string;
-### WatchOptions
+export type FormatType =
+  | Generic
+  | GenericFn
+  | Array
+  | {
+      format: string;
+      type?: 'mask';
+    };
+```
-| 名称 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
-| preserve | 是否监视没有对应的  | boolean | false | 5.4.0 |
+注意：`type` 定义为 `5.14.0` 新增。
-<DemoTitle title="Dropdown" desc="向下弹出的列表。">
+<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
 #### API
-<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
+<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-### Dropdown
+### Form
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
-| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
-| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
-| disabled | 菜单是否禁用 | boolean | - |  |
-| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
-| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
-| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
-| menu | 菜单配置项 |  | - | 4.24.0 |
-| overlayClassName | 下拉根元素的类名称 | string | - |  |
-| overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
-| placement | 菜单弹出位置： | string | bottomLeft |  |
-| trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ |  |
-| open | 菜单是否显示，小于 4.23.0 使用  | boolean | - | 4.23.0 |
-| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用  | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
+| colon | 配置 Form.Item 的  | boolean | true |  |
+| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
+| component | 设置 Form 渲染元素，为  | ComponentType \| false | form |  |
+| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 |  | - |  |
+| form | 经  |  | - |  |
+| feedbackIcons | 当  |  | - | 5.9.0 |
+| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  |
+| labelAlign | label 标签的文本对齐方式 | left | right |  |
+| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
+| labelCol | label 标签布局，同  |  | - |  |
+| layout | 表单布局 | horizontal | horizontal |  |
+| name | 表单名称，会作为表单字段  | string | - |  |
+| preserve | 当字段被删除时保留字段值。你可以通过  | boolean | true | 4.4.0 |
+| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \|  | true | renderProps |
+| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \|  | false | focus: 5.24.0 |
+| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - |  |
+| validateMessages | 验证提示模板，说明 |  | - |  |
+| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
+| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \|  |
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol |  | - |  |
+| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  |
+| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  |
+| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  |
+| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  |
+| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
-### Dropdown.Button
+支持原生 form 除 `onSubmit` 外的所有属性。
-属性与 Dropdown 的相同。还包含以下属性：
+### validateMessages
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - |  |
-| loading | 设置按钮载入状态，和  | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
-| danger | 设置危险按钮 | boolean | - | 4.23.0 |
-| icon | 右侧的 icon | ReactNode | - |  |
-| size | 按钮大小，和  | large | middle |  |
-| type | 按钮类型，和  | primary | default |  |
-| onClick | 点击左侧按钮的回调，和  | (event: React.MouseEvent) => void | - |  |
+Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
-## 注意
+```jsx
+const validateMessages = {
+  required: "'${name}' 是必选字段",
+  // ...
+};
-请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
-## antd API
+<Form validateMessages={validateMessages} />;
+```
-### Menu
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - |  |
-| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - |  |
-| expandIcon | 自定义展开图标 | ReactNode \|  | - | 4.9.0 |
-| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |  |
-| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |  |
-| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |  |
-| items | 菜单内容 |  | - | 4.20.0 |
-| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical |  |
-| multiple | 是否允许多选 | boolean | false |  |
-| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - |  |
-| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode |  |  |
-| selectable | 是否允许选中 | boolean | true |  |
-| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - |  |
-| style | 根节点样式 | CSSProperties | - |  |
-| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |  |
-| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |  |
-| theme | 主题颜色 | light | light |  |
-| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover |  |
-| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |  |
-| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
-| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - |  |
-| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   |  |
+此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板：
-更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
+```jsx
+const validateMessages = {
+  required: "'${name}' 是必选字段",
+  // ...
+};
+<ConfigProvider form={{ validateMessages }}>
+  <Form />
+</ConfigProvider>;
+```
-### ItemType
-type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
+## Form.Item
-#### MenuItemType
+表单字段组件，用于数据双向绑定、校验、布局等。
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| danger | 展示错误状态样式 | boolean | false |  |
-| disabled | 是否禁用 | boolean | false |  |
-| extra | 额外节点 | ReactNode | - | 5.21.0 |
-| icon | 菜单图标 | ReactNode | - |  |
-| key | item 的唯一标志 | string | - |  |
-| label | 菜单项标题 | ReactNode | - |  |
-| title | 设置收缩时展示的悬浮标题 | string | - |  |
+| colon | 配合  | boolean | true |  |
+| dependencies | 设置依赖字段，说明 |  | - |  |
+| extra | 额外的提示信息，和  | ReactNode | - |  |
+| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  |
+| getValueProps | 为子元素添加额外的属性 (不建议通过  | (value: any) => Record | - | 4.2.0 |
+| hasFeedback | 配合  | boolean \| { icons:  | false | icons: 5.9.0 |
+| help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - |  |
+| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 |
+| htmlFor | 设置子元素 label  | string | - |  |
+| initialValue | 设置子元素默认值，如果与 Form 的  | string | - | 4.2.0 |
+| label | label | ReactNode | - | null: 5.22.0 |
+| labelAlign | 标签文本对齐方式 | left | right |  |
+| labelCol | label |  | - |  |
+| messageVariables | 默认验证字段的信息，查看 | Record | - | 4.7.0 |
+| name | 字段名，支持数组 |  | - |  |
+| normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - |  |
+| noStyle | 为  | boolean | false |  |
+| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
+| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |  |
+| rules | 校验规则，设置字段的校验逻辑。点击 |  | - |  |
+| shouldUpdate | 自定义字段更新逻辑，说明 | boolean \| (prevValue, curValue) => boolean | false |  |
+| tooltip | 配置提示信息 | ReactNode \|  | - | 4.7.0 |
+| trigger | 设置收集字段值变更的时机。点击 | string | onChange |  |
+| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置  | boolean \|  | false | parallel |
+| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
+| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
+| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange |  |
+| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是  | string | value |  |
+| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同  |  | - |  |
+| layout | 表单项布局 | horizontal | - | 5.18.0 |
-#### SubMenuType
+被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| children | 子菜单的菜单项 |  | - |  |
-| disabled | 是否禁用 | boolean | false |  |
-| icon | 菜单图标 | ReactNode | - |  |
-| key | 唯一标志 | string | - |  |
-| label | 菜单项标题 | ReactNode | - |  |
-| popupClassName | 子菜单样式， | string | - |  |
-| popupOffset | 子菜单偏移量， | [number, number] | - |  |
-| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
-| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - |  |
+1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步（你可以使用 Form 的 `onValuesChange`），但还是可以继续监听 `onChange` 事件。
+2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。
+3. 你不应该用 `setState`，可以使用 `form.setFieldsValue` 来动态改变表单值。
-#### MenuItemGroupType
+### dependencies
-定义类型为 `group` 时，会作为分组处理:
+当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
+`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
-```ts
-const groupItem = {
-  type: 'group', // Must have
-  label: 'My Group',
-  children: [],
-};
-```
+### FeedbackIcons
+`({ status: ValidateStatus, errors: ReactNode, warnings: ReactNode }) => Record<ValidateStatus, ReactNode>`
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| children | 分组的菜单项 |  | - |  |
-| label | 分组标题 | ReactNode | - |  |
+### shouldUpdate
+Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
-#### MenuDividerType
+当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
-菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
+相关issue：[#34500](https://github.com/ant-design/ant-design/issues/34500)
-```ts
-const dividerItem = {
-  type: 'divider', // Must have
-};
+```jsx
+<Form.Item shouldUpdate>
+  {() => {
+    return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
+  }}
+</Form.Item>
 ```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| dashed | 是否虚线 | boolean | false |  |
+你可以参考[示例](#form-demo-inline-login)查看具体使用场景。
+当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
-<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
-## API
+```jsx
+<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
+  {() => {
+    return (
+      <Form.Item name="other">
+        <Input />
+      </Form.Item>
+    );
+  }}
+</Form.Item>
+```
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| type | 空状态类型 | \| 'noData'
-    \| 'networkError'
-    \| '404'
-    \| 'arrears'
-    \| 'desktopOnly'
-    \| 'noAudio'
-    \| 'noImage'
-    \| 'noVideo'
-    \| 'noAccess'
-    \| 'error'
-    \| 'noChat'
-    \| 'noModel'
-    \| 'noApp'
-    \| 'success'
-    \| 'failed'
-    \| 'inProgress'
-    \| 'stayTuned' | 'noData' |
-| texture | 是否显示纹理 | boolean | true |
-| image | 图片地址 | string | 默认是no data的图片 |
-| imageStyle | 图片样式 | React.CSSProperties |  |
-| title | 标题内容 | React.ReactNode |  |
-| description | 自定义描述内容 | React.ReactNode |  |
-| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void |  |
-| okText | ok按钮的文本 | React.ReactNode |  |
-| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
-| okButtonProps | ok按钮的props | SparkButtonProps |  |
-| children | 自定义空状态的内容 | React.ReactNode |  |
-| className | 自定义空状态的类名 | string |  |
-| style | 自定义空状态的样式 | React.CSSProperties |  |
-| size | 自定义空状态的大小 | React.CSSProperties['width'] |  |
-| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
+你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
-<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
+### messageVariables
+你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
+```jsx
+<Form>
+  <Form.Item
+    messageVariables={{ another: 'good' }}
+    label="user"
+    rules={[{ required: true, message: '${another} is required' }]}
+  >
+    <Input />
+  </Form.Item>
+  <Form.Item
+    messageVariables={{ label: 'good' }}
+    label={<span>user</span>}
+    rules={[{ required: true, message: '${label} is required' }]}
+  >
+    <Input />
+  </Form.Item>
+</Form>
+```
-<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
-#### API
+自 `5.20.2` 起，当你希望不要转译 `${}` 时，你可以通过 `\\${}` 来略过：
-<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
+```jsx
+{ required: true, message: '${label} is convert, \\${label} is not convert' }
-## antd API
+// good is convert, ${label} is not convert
+```
-通用属性参考：[通用属性](/docs/react/common-props)
-自 `antd@5.0.0` 版本开始提供该组件。
+## Form.List
-### 共同的 API
+为字段提供数组化管理。
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| icon | 自定义图标 | ReactNode | - |  |
-| description | 文字及其它内容 | ReactNode | - |  |
-| tooltip | 气泡卡片的内容 | ReactNode \|  | - | TooltipProps: 5.25.0 |
-| type | 设置按钮类型 | default | default |  |
-| shape | 设置按钮形状 | circle | circle |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
-| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |  |
-| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - |  |
-| htmlType | 设置  | submit | button | 5.21.0 |
-| badge | 带徽标数字的悬浮按钮（不支持  |  | - | 5.4.0 |
-### FloatButton.Group
+| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - |  |
+| initialValue | 设置子元素默认值，如果与 Form 的  | any[] | - | 4.9.0 |
+| name | 字段名，支持数组。List 本身也是字段，因而  |  | - |  |
+| rules | 校验规则，仅支持自定义规则。需要配合  | { validator, message }[] | - | 4.7.0 |
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| shape | 设置包含的 FloatButton 按钮形状 | circle | circle |  |
-| trigger | 触发方式（有触发方式为菜单模式） | click | - |  |
-| open | 受控展开，需配合 trigger 一起使用 | boolean | - |  |
-| closeIcon | 自定义关闭按钮 | React.ReactNode |  |  |
-| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
-| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - |  |
-| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
-### FloatButton.BackTop
+```tsx
+<Form.List>
+  {(fields) =>
+    fields.map((field) => (
+      <Form.Item {...field}>
+        <Input />
+      </Form.Item>
+    ))
+  }
+</Form.List>
+```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| duration | 回到顶部所需时间（ms） | number | 450 |  |
-| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window |  |
-| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  |
-| onClick | 点击按钮的回调函数 | () => void | - |  |
+注意：Form.List 下的字段不应该配置 `initialValue`，你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
+## operation
+Form.List 渲染表单相关操作函数。
-<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
-#### API
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 |
+| move | 移动表单项 | (from: number, to: number) => void | - |  |
+| remove | 删除表单项 | (index: number \| number[]) => void | number[] | 4.5.0 |
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| showDivider | 是否显示分割线 | boolean | true |
-##### Drawer.Confirm - 带按钮的抽屉
+## Form.ErrorList
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| footer | 自定义底部内容 | React.ReactNode |  |
-| onOk | 点击确定回调 | () => void |  |
-| okText | 确认按钮文字 | string |  |
-| okButtonProps | 确认按钮属性 | ButtonProps |  |
-| onCancel | 点击取消回调 | () => void |  |
-| cancelText | 取消按钮文字 | string |  |
-| cancelButtonProps | 取消按钮属性 | ButtonProps |  |
-| info | 底部额外内容 | React.ReactNode |  |
+4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
-<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| errors | 错误列表 | ReactNode[] | - |
-## antd API
+## Form.Provider
-通用属性参考：[通用属性](/docs/react/common-props)
+提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。
-<!-- prettier-ignore -->
-<Container type="warning" title="注意">
-v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
-</Container>
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
-| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - |  |
-| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
-| classNames | 语义化结构 className |  | - | 5.10.0 |
-| closeIcon | 自定义关闭图标。5.7.0：设置为  | ReactNode |  |  |
-| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
-| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
-| footer | 抽屉的页脚 | ReactNode | - |  |
-| forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
-| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
-| height | 高度，在  | string \| number | 378 |  |
-| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
-| mask | 是否展示遮罩 | boolean | true |  |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
-| placement | 抽屉的方向 | top | right |  |
-| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
-| rootStyle | 可用于设置 Drawer 最外层容器的样式，和  | CSSProperties | - |  |
-| size | 预设抽屉宽度（或高度），default  | 'default' \| 'large' | 'default' | 4.17.0 |
-| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用  | CSSProperties | - |  |
-| styles | 语义化结构 style |  | - | 5.10.0 |
-| title | 标题 | ReactNode | - |  |
-| loading | 显示骨架屏 | boolean | false | 5.17.0 |
-| open | Drawer 是否可见 | boolean | - |
-| width | 宽度 | string \| number | 378 |  |
-| zIndex | 设置 Drawer 的  | number | 1000 |  |
-| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
-| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
+| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |
+```jsx
+<Form.Provider
+  onFormFinish={(name) => {
+    if (name === 'form1') {
+      // Do something...
+    }
+  }}
+>
+  <Form name="form1">...</Form>
+  <Form name="form2">...</Form>
+</Form.Provider>
+```
-<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
-#### API
-<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
+### FormInstance
+| 名称 | 说明 | 类型 | 版本 |
+|--------|--------|--------|--------|
+| getFieldError | 获取对应字段名的错误信息 | (name:  |  |
+| getFieldInstance | 获取对应字段实例 | (name:  | 4.4.0 |
+| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?:  |  |
+| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用  |  |  |
+| getFieldValue | 获取对应字段名的值 | (name:  |  |
+| isFieldsTouched | 检查一组字段是否被用户操作过， | (nameList?:  |  |
+| isFieldTouched | 检查对应字段是否被用户操作过 | (name:  |  |
+| isFieldValidating | 检查对应字段是否正在校验 | (name:  |  |
+| resetFields | 重置一组字段到  | (fields?:  |  |
+| scrollToField | 滚动到对应字段位置 | (name:  | focus: 5.24.0 |
+| setFields | 设置一组字段状态 | (fields:  |  |
+| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且 | (name:  | 4.22.0 |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且 | (values) => void |  |
+| submit | 提交表单，与点击  | () => void |  |
+| validateFields | 触发表单验证，设置  | (nameList?:  |  |
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
+#### validateFields
-### Descriptions
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| bordered | 是否展示边框 | boolean | false |  |
-| colon | 配置  | boolean | true |  |
-| column | 一行的  | number \|  | 3 |  |
-| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
-| items | 描述列表项内容 |  | - | 5.8.0 |
-| layout | 描述布局 | horizontal | horizontal |  |
-| size | 设置列表的大小。可以设置为  | default | - |  |
-| title | 描述列表的标题，显示在最顶部 | ReactNode | - |  |
-| classNames | 语义化结构 class |  | - | 5.23.0 |
-| styles | 语义化结构 style |  | - | 5.23.0 |
+```tsx
+export interface ValidateConfig {
+  // 5.5.0 新增。仅校验内容而不会将错误信息展示到 UI 上。
+  validateOnly?: boolean;
+  // 5.9.0 新增。对提供的 `nameList` 与其子路径进行递归校验。
+  recursive?: boolean;
+  // 5.11.0 新增。校验 dirty 的字段（touched + validated）。
+  // 使用 `dirty` 可以很方便的仅校验用户操作过和被校验过的字段。
+  dirty?: boolean;
+}
+```
-### DescriptionItem
+返回示例：
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| label | 内容的描述 | ReactNode | - |  |
-| span | 包含列的数量（ | number\|  | 1 | screens: 5.9.0 |
+```jsx
+validateFields()
+  .then((values) => {
+    /*
+  values:
+    {
+      username: 'username',
+      password: 'password',
+    }
+  */
+  })
+  .catch((errorInfo) => {
+    /*
+    errorInfo:
+      {
+        values: {
+          username: 'username',
+          password: 'password',
+        },
+        errorFields: [
+          { name: ['password'], errors: ['Please input your Password!'] },
+        ],
+        outOfDate: false,
+      }
+    */
+  });
+```
-span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
+## Hooks
+### Form.useForm
-<DemoTitle title="CollapsePanel" desc="折叠面板">
-#### API
+`type Form.useForm = (): [FormInstance]`
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
-| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
-| title | 面板标题 | string \| React.ReactNode | "" |
-| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
-| extra | 面板右侧内容 | React.ReactNode |  |
-| children | 面板内容 | React.ReactNode |  |
-| defaultExpanded | 是否默认展开 | boolean | false |
-| classNames | 语义化的classNames | Partial> |  |
-| styles | 语义化的styles | Partial<
-    Record
-  > |  |
+创建 Form 实例，用于管理所有数据状态。
+### Form.useFormInstance
+`type Form.useFormInstance = (): FormInstance`
-## antd API
+`4.20.0` 新增，获取当前上下文正在使用的 Form 实例，常见于封装子组件消费无需透传 Form 实例：
-通用属性参考：[通用属性](/docs/react/common-props)
-### Collapse
+```tsx
+const Sub = () => {
+  const form = Form.useFormInstance();
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| accordion | 手风琴模式 | boolean | false |  |
-| activeKey | 当前激活 tab 面板的 key | string[] \| string  |  |  |
-| bordered | 带边框风格的折叠面板 | boolean | true |  |
-| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
-| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - |  |
-| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
-| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
-| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
-| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
-| size | 设置折叠面板大小 | large | middle | 5.2.0 |
-| onChange | 切换面板的回调 | function | - |  |
-| items | 折叠项目内容 |  | - | 5.6.0 |
+  return <Button onClick={() => form.setFieldsValue({})} />;
+};
+export default () => {
+  const [form] = Form.useForm();
-### ItemType
+  return (
+    <Form form={form}>
+      <Sub />
+    </Form>
+  );
+};
+```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| classNames | 语义化结构 className |  | - | 5.21.0 |
-| collapsible | 是否可折叠或指定可折叠触发区域 | header | - |  |
-| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false |  |
-| key | 对应 activeKey | string \| number | - |  |
-| label | 面板标题 | ReactNode | - | - |
-| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true |  |
-| styles | 语义化结构 style |  | - | 5.21.0 |
+### Form.useWatch
-### Collapse.Panel
+`type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
-<!-- prettier-ignore -->
-<Container type="warning" title="已废弃">
-版本 >= 5.6.0 时请使用 items 方式配置面板。
-</Container>
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
-| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false |  |
-| header | 面板标题 | ReactNode | - |  |
-| key | 对应 activeKey | string \| number | - |  |
-| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true |  |
+`5.12.0` 新增 `selector`
+用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
+```tsx
+const Demo = () => {
+  const [form] = Form.useForm();
+  const userName = Form.useWatch('username', form);
-<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
-#### API
+  const { data: options } = useSWR(`/api/user/${userName}`, fetcher);
-<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
+  return (
+    <Form form={form}>
+      <Form.Item name="username">
+        <AutoComplete options={options} />
+      </Form.Item>
+    </Form>
+  );
+};
+```
-## antd API
+如果你的组件被包裹在 `Form.Item` 内部，你可以省略第二个参数，`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
-通用属性参考：[通用属性](/docs/react/common-props)
+`useWatch` 默认只监听在 Form 中注册的字段，如果需要监听非注册字段，可以通过配置 `preserve` 进行监听：
-日期类组件包括以下五种形式。
+```tsx
+const Demo = () => {
+  const [form] = Form.useForm();
-- DatePicker
-- DatePicker[picker="month"]
-- DatePicker[picker="week"]
-- DatePicker[picker="year"]
-- DatePicker[picker="quarter"] (4.1.0 新增)
-- RangePicker
+  const age = Form.useWatch('age', { form, preserve: true });
+  console.log(age);
-### 国际化配置
+  return (
+    <div>
+      <Button onClick={() => form.setFieldValue('age', 2)}>Update</Button>
+      <Form form={form}>
+        <Form.Item name="name">
+          <Input />
+        </Form.Item>
+      </Form>
+    </div>
+  );
+};
+```
-默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
-如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
+### Form.Item.useStatus
+`type Form.Item.useStatus = (): { status: ValidateStatus | undefined, errors: ReactNode[], warnings: ReactNode[] }`
-```jsx
-// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
-// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
-import locale from 'antd/locale/zh_CN';
-import dayjs from 'dayjs';
+`4.22.0` 新增，可用于获取当前 Form.Item 的校验状态，如果上层没有 Form.Item，`status` 将会返回 `undefined`。`5.4.0` 新增 `errors` 和 `warnings`，可用于获取当前 Form.Item 的错误信息和警告信息：
-import 'dayjs/locale/zh-cn';
-dayjs.locale('zh-cn');
+```tsx
+const CustomInput = ({ value, onChange }) => {
+  const { status, errors } = Form.Item.useStatus();
+  return (
+    <input
+      value={value}
+      onChange={onChange}
+      className={`custom-input-${status}`}
+      placeholder={(errors.length && errors[0]) || ''}
+    />
+  );
+};
-<ConfigProvider locale={locale}>
-  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
-</ConfigProvider>;
+export default () => (
+  <Form>
+    <Form.Item name="username">
+      <CustomInput />
+    </Form.Item>
+  </Form>
+);
 ```
-<!-- prettier-ignore -->
-<Container type="warning">
-在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
-</Container>
-### 共同的 API
-以下 API 为 DatePicker、 RangePicker 共享的 API。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
-| autoFocus | 自动获取焦点 | boolean | false |  |
-| className | 选择器 className | string | - |  |
-| dateRender | 自定义日期单元格的内容，5.4.0 起用  | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
-| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
-| components | 自定义面板 | Record | - | 5.14.0 |
-| defaultOpen | 是否默认展开控制弹层 | boolean | - |  |
-| disabled | 禁用 | boolean | false |  |
-| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考  |  |  |  |
-| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
-| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
-| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
-| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
-| locale | 国际化配置 | object |  |  |
-| minDate | 最小日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
-| maxDate | 最大日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
-| mode | 日期面板的状态（ | time | - |  |
-| needConfirm | 是否需要确认按钮，为  | boolean | - | 5.14.0 |
-| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
-| open | 控制弹层是否展开 | boolean | - |  |
-| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
-| picker | 设置选择器类型 | date | date | quarter |
-| placeholder | 输入框提示文字 | string \| [string, string] | - |  |
-| placement | 选择框弹出的位置 | bottomLeft | bottomLeft |  |
-| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
-| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
-| presets | 预设时间范围快捷选择, 自  | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }[] | - |  |
-| size | 输入框大小， | large | - |  |
-| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
-| style | 自定义输入框样式 | CSSProperties | {} |  |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| superNextIcon | 自定义  | ReactNode | - | 4.17.0 |
-| superPrevIcon | 自定义  | ReactNode | - | 4.17.0 |
-| variant | 形态变体 | outlined | outlined | 5.13.0 \|  |
-| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - |  |
-| onPanelChange | 日历面板切换的回调 | function(value, mode) | - |  |
+#### 与其他获取数据的方式的区别
+Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。
-### 共同的方法
+## Interface
-| 名称 | 描述 | 版本 |
-|--------|--------|--------|
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+### NamePath
+`string | number | (string | number)[]`
-### DatePicker
+### GetFieldsValue
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 |  | - | 5.14.0 |
-| defaultValue | 默认日期，如果开始时间或结束时间为  |  | - |  |
-| disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 展示的日期格式，配置参考  |  | YYYY-MM-DD |  |
-| multiple | 是否为多选，不支持  | boolean | false | 5.14.0 |
-| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合  |  | - | 5.14.0 |
-| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
-| showNow | 显示当前日期时间的快捷选择 | boolean | - |  |
-| showTime | 增加时间选择功能 | Object \| boolean |  |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒， |  | dayjs() |  |
-| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
-| value | 日期 |  | - |  |
-| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - |  |
-| onOk | 点击确定按钮的回调 | function() | - |  |
-| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |  |
+`getFieldsValue` 提供了多种重载方法：
+#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
-### DatePicker[picker=year]
+当不提供 `nameList` 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultValue | 默认日期 |  | - |  |
-| format | 展示的日期格式，配置参考  |  | YYYY |  |
-| multiple | 是否为多选 | boolean | false | 5.14.0 |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 |  | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
+当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
+当 `nameList` 为数组时，返回规定路径的值。需要注意的是，`nameList` 为嵌套数组。例如你需要某路径值应该如下：
-### DatePicker[picker=quarter]
-`4.1.0` 新增。
+```tsx
+// 单个路径
+form.getFieldsValue([['user', 'age']]);
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultValue | 默认日期 |  | - |  |
-| format | 展示的日期格式，配置参考  |  | YYYY-\QQ |  |
-| multiple | 是否为多选 | boolean | false | 5.14.0 |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 |  | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
+// 多个路径
+form.getFieldsValue([
+  ['user', 'age'],
+  ['preset', 'account'],
+]);
+```
-### DatePicker[picker=month]
+#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultValue | 默认日期 |  | - |  |
-| format | 展示的日期格式，配置参考  |  | YYYY-MM |  |
-| multiple | 是否为多选 | boolean | false | 5.14.0 |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 |  | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
+`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中，如果 List 仅绑定了 `bamboo` 字段，那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
+### FilterFunc
-### DatePicker[picker=week]
+用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| defaultValue | 默认日期 |  | - |  |
-| format | 展示的日期格式，配置参考  |  | YYYY-wo |  |
-| multiple | 是否为多选 | boolean | false | 5.14.0 |
-| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
-| value | 日期 |  | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
-| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
+```tsx
+type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
+```
-### RangePicker
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] |  |
-| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
-| dateRender | 自定义日期单元格的内容，5.4.0 起用  | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
-| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 |  | - | 5.14.0 |
-| defaultValue | 默认日期 |  | - |  |
-| disabled | 禁用起始项 | [boolean, boolean] | - |  |
-| disabledTime | 不可选择的时间 | function(date: dayjs, partial:  | - | info.from |
-| format | 展示的日期格式，配置参考  |  | YYYY-MM-DD HH:mm:ss |  |
-| id | 设置输入框  | { start?: string, end?: string } | - | 5.14.0 |
-| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合  |  | - | 5.14.0 |
-| presets | 预设时间范围快捷选择，自  | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))[] }[] | - |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| separator | 设置分隔符 | React.ReactNode |  |  |
-| showTime | 增加时间选择功能 | Object\|boolean |  |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒， |  | [dayjs(), dayjs()] |  |
-| value | 日期 |  | - |  |
-| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - |  |
-| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - |  |
-| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
-| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
+### FieldData
+| 名称 | 说明 | 类型 |
+|--------|--------|--------|
+| errors | 错误信息 | string[] |
+| warnings | 警告信息 | string[] |
+| name | 字段名称 |  |
+| touched | 是否被用户操作过 | boolean |
+| validating | 是否正在校验 | boolean |
+| value | 字段对应值 | any |
-#### formatType
+### Rule
-```typescript
-import type { Dayjs } from 'dayjs';
+Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
-type Generic = string;
-type GenericFn = (value: Dayjs) => string;
-export type FormatType =
-  | Generic
-  | GenericFn
-  | Array
-  | {
-      format: string;
-      type?: 'mask';
-    };
+```tsx
+type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 ```
-注意：`type` 定义为 `5.14.0` 新增。
+| 名称 | 说明 | 类型 | 版本 |
+|--------|--------|--------|--------|
+| defaultField | 仅在  |  |  |
+| enum | 是否匹配枚举中的值（需要将  | any[] |  |
+| fields | 仅在  | Record<string,  |  |
+| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |  |
+| max | 必须设置  | number |  |
+| message | 错误信息，不设置时会通过 | string \| ReactElement |  |
+| min | 必须设置  | number |  |
+| pattern | 正则表达式匹配 | RegExp |  |
+| required | 是否为必选字段 | boolean |  |
+| transform | 将字段值转换成目标值后进行校验 | (value) => any |  |
+| type | 类型，常见有  | string |  |
+| validateTrigger | 设置触发验证时机，必须是 Form.Item 的  | string \| string[] |  |
+| validator | 自定义校验，接收 Promise 作为返回值。 | ( |  |
+| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
+| whitespace | 如果字段仅包含空格则校验不通过，只在  | boolean |  |
-<DemoTitle title="CodeBlock" desc="代码块">
-#### API
+### WatchOptions
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| language | 语言 | string \| string[] | (必填) |
-| value | 值 | string |  |
-| className | 类名 | string |  |
-| theme | 主题 | 'dark' \| 'light' |  |
-| readOnly | 只读 | boolean |  |
-| onChange |  | (value?: string) => void |  |
+| 名称 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
+| preserve | 是否监视没有对应的  | boolean | false | 5.4.0 |
-<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
+<DemoTitle title="CollapsePanel" desc="折叠面板">
 #### API
-<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
+| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
+| title | 面板标题 | string \| React.ReactNode | "" |
+| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
+| extra | 面板右侧内容 | React.ReactNode |  |
+| children | 面板内容 | React.ReactNode |  |
+| defaultExpanded | 是否默认展开 | boolean | false |
+| classNames | 语义化的classNames | Partial> |  |
+| styles | 语义化的styles | Partial<
+    Record
+  > |  |
 ## antd API
@@ -3444,6 +3371,21 @@ export type FormatType =
+<DemoTitle title="CodeBlock" desc="代码块">
+#### API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| language | 语言 | string \| string[] | (必填) |
+| value | 值 | string | (必填) |
+| className | 类名 | string |  |
+| theme | 主题 | 'dark' \| 'light' |  |
+| readOnly | 只读 | boolean |  |
+| onChange |  | (value: string) => void |  |
 <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
 #### API
@@ -3515,6 +3457,64 @@ interface Option {
+<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
+#### API
+<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+### Collapse
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| accordion | 手风琴模式 | boolean | false |  |
+| activeKey | 当前激活 tab 面板的 key | string[] \| string  |  |  |
+| bordered | 带边框风格的折叠面板 | boolean | true |  |
+| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
+| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - |  |
+| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
+| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
+| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
+| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
+| size | 设置折叠面板大小 | large | middle | 5.2.0 |
+| onChange | 切换面板的回调 | function | - |  |
+| items | 折叠项目内容 |  | - | 5.6.0 |
+### ItemType
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| classNames | 语义化结构 className |  | - | 5.21.0 |
+| collapsible | 是否可折叠或指定可折叠触发区域 | header | - |  |
+| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false |  |
+| key | 对应 activeKey | string \| number | - |  |
+| label | 面板标题 | ReactNode | - | - |
+| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true |  |
+| styles | 语义化结构 style |  | - | 5.21.0 |
+### Collapse.Panel
+<!-- prettier-ignore -->
+<Container type="warning" title="已废弃">
+版本 >= 5.6.0 时请使用 items 方式配置面板。
+</Container>
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
+| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false |  |
+| header | 面板标题 | ReactNode | - |  |
+| key | 对应 activeKey | string \| number | - |  |
+| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true |  |
 <DemoTitle title="Card" desc="通用卡片容器">
 #### API
@@ -4060,349 +4060,6 @@ const confirmed = await modal.confirm({ ... });
-<div align="center"><a name="readme-top"></a>
-  <img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
-  <h1>Alibaba Cloud Spark Design</h1>
-</div>
-# 概述
-Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
-<br />
-<br />
-## ✨ 特性
-- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
-- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
-- 🧠 为 LLM 产品设计的各种场景组件。
-- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
-- 🎨 多种预设主题。
-- ☀️ 轻松切换明暗模式。
-## 📦 安装
-```bash
-npm install antd @agentscope-ai/icons @agentscope-ai/design --save
-```
-## Tree Shaking 支持
-@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
-## TypeScript
-@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
-## 内置主题
-我们提供四种内置主题：
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
-## 🏗️ 开源
-[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
-## 内置主题
-Alibaba Cloud Spark Design 提供四种内置主题：
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
-### 示例用法
-```tsx
-import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
-const App = () => {
-  return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
-};
-export default App;
-```
-## 从 Antd token 生成您自己的主题
-如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
-```tsx
-import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
-const yourToken = {
-  borderRadiusXS: 2,
-  borderRadiusSM: 4,
-  borderRadius: 6,
-  borderRadiusLG: 8,
-  borderRadiusXL: 12,
-  borderRadiusFull: 999,
-  wireframe: false,
-  colorPrimaryBg: '#F2F0FF',
-  colorPrimaryBgHover: '#F2F0FF',
-  colorPrimaryBorder: '#E2DEFF',
-  colorPrimaryBorderHover: '#BCB5FF',
-  // ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
-};
-const darkMode = false;
-const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
-const App = () => {
-  return (
-    <ConfigProvider {...yourThemeWithSparkStyle}>
-      Hello Spark Design!
-    </ConfigProvider>
-  );
-};
-export default App;
-```
-您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
-# 使用
-如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
-```tsx
-import {
-  ConfigProvider,
-  purpleTheme,
-  Button,
-  IconFont,
-  IconButton,
-} from '@agentscope-ai/design';
-import { Flex } from 'antd';
-import zhCN from 'antd/locale/zh_CN';
-import { useState } from 'react';
-const App = () => {
-  const prefix = 'sps';
-  const iconSymbol = 'spark-effciency-line';
-  const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
-  return (
-    <ConfigProvider
-      {...purpleTheme}
-      prefix={prefix}
-      prefixCls={prefix}
-      iconfont={iconfont}
-      locale={zhCN}
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <Flex
-        style={{
-          width: '100%',
-          height: '100%',
-          backgroundColor: `var(--${prefix}-color-bg-base)`,
-        }}
-        justify="center"
-        align="center"
-      >
-        <Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
-          <Flex gap={8}>
-            <div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
-            <IconFont type={iconSymbol} />
-          </Flex>
-          <Flex gap={8}>
-            <div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
-            <Button type="primary" iconType={iconSymbol}>
-              添加用户
-            </Button>
-          </Flex>
-          <Flex gap={8}>
-            <div style={{ width: '100px', lineHeight: '32px' }}>
-              IconButton:
-            </div>
-            <IconButton iconType={iconSymbol}></IconButton>
-          </Flex>
-        </Flex>
-      </Flex>
-    </ConfigProvider>
-  );
-};
-export default App;
-```
-# 从 Antd 迁移
-## 📦 安装
-```bash
-$ npm install @agentscope-ai/icons @agentscope-ai/design --save
-```
-## 🔨 使用
-从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
-```tsx
-import {
-  Button,
-  Image,
-  ConfigProvider,
-  purpleDarkTheme,
-  purpleTheme,
-} from '@agentscope-ai/design';
-import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
-import { Flex } from 'antd';
-import zhCN from 'antd/locale/zh_CN';
-import { useState } from 'react';
-const App = () => {
-  const [colorMode, setColorMode] = useState('light');
-  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
-  const prefix = 'sps';
-  return (
-    <ConfigProvider
-      {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
-      prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
-      prefixCls={prefix}
-      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
-      locale={zhCN} // 来自 Ant Design 的语言包
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          backgroundColor: `var(--${prefix}-color-bg-base)`,
-        }}
-      >
-        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
-          <Image
-            width={120}
-            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
-          />
-          <div
-            style={{
-              color: `var(--${prefix}-ant-color-text-base)`,
-              fontSize: '24px',
-              textAlign: 'center',
-            }}
-          >
-            Hello Spark Design!
-          </div>
-          <Button
-            type="primary"
-            onClick={() => {
-              setColorMode(colorMode === 'light' ? 'dark' : 'light');
-            }}
-            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
-          >
-            {colorMode === 'light' ? '暗色' : '亮色'} 模式
-          </Button>
-        </Flex>
-      </div>
-    </ConfigProvider>
-  );
-};
-export default App;
-```
-如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
-```tsx
-import {
-  ConfigProvider,
-  purpleDarkTheme,
-  purpleTheme,
-} from '@agentscope-ai/design';
-import { Button, Image, Flex } from 'antd';
-import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
-import zhCN from 'antd/locale/zh_CN';
-import { useState } from 'react';
-const App = () => {
-  const [colorMode, setColorMode] = useState('light');
-  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
-  const prefix = 'sps';
-  return (
-    <ConfigProvider
-      {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
-      prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
-      prefixCls={prefix}
-      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
-      locale={zhCN} // 来自 Ant Design 的语言包
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          backgroundColor: `var(--${prefix}-color-bg-base)`,
-        }}
-      >
-        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
-          <Image
-            width={120}
-            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
-          />
-          <div
-            style={{
-              color: `var(--${prefix}-ant-color-text-base)`,
-              fontSize: '24px',
-              textAlign: 'center',
-            }}
-          >
-            Hello Spark Design!
-          </div>
-          <Button
-            type="primary"
-            onClick={() => {
-              setColorMode(colorMode === 'light' ? 'dark' : 'light');
-            }}
-            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
-          >
-            {colorMode === 'light' ? '暗色' : '亮色'} 模式
-          </Button>
-        </Flex>
-      </div>
-    </ConfigProvider>
-  );
-};
-export default App;
-```
 # 使用
@@ -4425,574 +4082,4 @@ export default () => {
 基本用法
-访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
-# Vibe 编程
-## LLMs.txt
-为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
-- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
-- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
-在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
-## D2C
-在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
-- 准确识别 icon
-- 使用标准 css token
-- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
-- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
-<div>
-<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
-</div>
-我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
-# 从零开始使用
-## 📦 安装
-```bash
-$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
-```
-## 🔨 使用
-```tsx
-import {
-  Button,
-  Image,
-  ConfigProvider,
-  purpleDarkTheme,
-  purpleTheme,
-} from '@agentscope-ai/design';
-import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
-import { Flex } from 'antd';
-import zhCN from 'antd/locale/zh_CN';
-import { useState } from 'react';
-const App = () => {
-  const [colorMode, setColorMode] = useState('light');
-  const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
-  const prefix = 'sps';
-  return (
-    <ConfigProvider
-      {...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
-      prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
-      prefixCls={prefix}
-      iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
-      locale={zhCN} // 来自 Ant Design 的语言包
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <div
-        style={{
-          width: '100%',
-          height: '100%',
-          backgroundColor: `var(--${prefix}-color-bg-base)`,
-        }}
-      >
-        <Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
-          <Image
-            width={120}
-            src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
-          />
-          <div
-            style={{
-              color: `var(--${prefix}-ant-color-text-base)`,
-              fontSize: '24px',
-              textAlign: 'center',
-            }}
-          >
-            Hello Spark Design!
-          </div>
-          <Button
-            type="primary"
-            onClick={() => {
-              setColorMode(colorMode === 'light' ? 'dark' : 'light');
-            }}
-            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
-          >
-            {colorMode === 'light' ? '暗色' : '亮色'} 模式
-          </Button>
-        </Flex>
-      </div>
-    </ConfigProvider>
-  );
-};
-export default App;
-```
-# Tokens
-除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
-```json
-{
-  "borderRadiusXS": 2,
-  "borderRadiusSM": 4,
-  "borderRadius": 6,
-  "borderRadiusLG": 8,
-  "borderRadiusXL": 12,
-  "borderRadiusFull": 999,
-  "wireframe": false,
-  "colorPrimaryBg": "rgba(97, 92, 237, 0.08)",
-  "colorPrimaryBgHover": "#F2F0FF",
-  "colorPrimaryBorder": "#E2DEFF",
-  "colorPrimaryBorderHover": "#BCB5FF",
-  "colorPrimaryHover": "#9189FA",
-  "colorPrimary": "#615CED",
-  "colorPrimaryActive": "#4444C7",
-  "colorPrimaryTextHover": "#9189FA",
-  "colorPrimaryText": "#615CED",
-  "colorPrimaryTextActive": "#4444C7",
-  "colorTextBase": "#26244c",
-  "colorBgBase": "#FFFFFF",
-  "colorText": "rgba(38, 36, 76, 0.88)",
-  "colorTextSecondary": "rgba(38, 36, 76, 0.65)",
-  "colorTextTertiary": "rgba(38, 36, 76, 0.45)",
-  "colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
-  "colorBorder": "#cdd0dc",
-  "colorBorderSecondary": "#e6e8ee",
-  "colorFill": "#cdd0dc5c",
-  "colorFillSecondary": "#cdd0dc33",
-  "colorFillTertiary": "#cdd0dc26",
-  "colorFillQuaternary": "#cdd0dc1a",
-  "colorBgContainer": "#FFFFFF",
-  "colorBgElevated": "#FFFFFF",
-  "colorBgLayout": "#f9fafd",
-  "colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
-  "colorBgMask": "rgba(20, 19, 39, 0.45)",
-  "colorInfo": "#0B83F1",
-  "colorInfoHover": "#5EBCFF",
-  "colorInfoBorder": "#87D1FF",
-  "colorInfoText": "#0B83F1",
-  "colorInfoBg": "#E6F7FF",
-  "colorInfoBgHover": "#B0E3FF",
-  "colorInfoBorderHover": "#5EBCFF",
-  "colorSuccess": "#5BB98B",
-  "colorSuccessHover": "#ABD4BE",
-  "colorSuccessBg": "#EBFAF0",
-  "colorSuccessBgHover": "#DFEDE4",
-  "colorSuccessBorder": "#D3E0D9",
-  "colorSuccessBorderHover": "#ABD4BE",
-  "colorWarning": "#FAAD14",
-  "colorWarningHover": "#FFD666",
-  "colorWarningBg": "#FFFBE6",
-  "colorWarningBgHover": "#FFF1B8",
-  "colorWarningBorder": "#FFE58F",
-  "colorWarningBorderHover": "#FFD666",
-  "colorError": "#FF4D4F",
-  "colorErrorHover": "#FF7875",
-  "colorErrorBg": "#FFF2F0",
-  "colorErrorBgHover": "#FFF1F0",
-  "colorErrorBorder": "#FFCCC7",
-  "colorErrorBorderHover": "#FFA39E",
-  "colorLink": "#615CED",
-  "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
-  "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
-  "colorTextWhite": "#ffffff",
-  "colorTextOnPrimary": "#ffffff",
-  "colorFillDisable": "#DBDAE7",
-  "colorPurple": "#615CED",
-  "colorPurpleHover": "#8080FF",
-  "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
-  "colorPink": "#EC4899",
-  "colorPinkHover": "#E593BC",
-  "colorPinkBg": "rgba(251, 220, 239, 0.8)",
-  "colorYellow": "#EAB308",
-  "colorYellowHover": "#F1D372",
-  "colorYellowBg": "rgba(255, 250, 184, 0.8)",
-  "colorOrange": "#FA8125",
-  "colorOrangeHover": "#E88C45",
-  "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
-  "colorTeal": "#14B8A6",
-  "colorTealHover": "#5FB3A9",
-  "colorTealBg": "rgba(200, 244, 233, 0.8)",
-  "colorBlue": "#0090FF",
-  "colorBlueHover": "#72BCF5",
-  "colorBlueBg": "rgba(194, 229, 255, 0.8)",
-  "colorMauve": "#8E8C99",
-  "colorMauveHover": "#C0BFC8",
-  "colorMauveBg": "rgba(239, 240, 243, 0.8)",
-  "colorSlate": "#1E293B",
-  "colorSlateHover": "#475569",
-  "colorSlateBg": "#E2E8F0",
-  "colorLavender": "#A77BFF",
-  "colorLavenderHover": "#BB99FF",
-  "colorLavenderBg": "rgba(226, 212, 255, 0.8)",
-  "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
-  "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
-  "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
-}
-```
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
-```json
-{
-  "borderRadiusXS": 2,
-  "borderRadiusSM": 4,
-  "borderRadius": 6,
-  "borderRadiusLG": 8,
-  "borderRadiusXL": 12,
-  "borderRadiusFull": 999,
-  "wireframe": false,
-  "colorPrimaryBg": "#202041",
-  "colorPrimaryBgHover": "#202041",
-  "colorPrimaryBorder": "#2B2A55",
-  "colorPrimaryBorderHover": "#373476",
-  "colorPrimaryHover": "#857DE3",
-  "colorPrimary": "#5551CC",
-  "colorPrimaryActive": "#4643A1",
-  "colorPrimaryTextHover": "#857DE3",
-  "colorPrimaryText": "#5551CC",
-  "colorPrimaryTextActive": "#4643A1",
-  "colorTextBase": "#E7E7ED",
-  "colorBgBase": "#000000",
-  "colorText": "rgba(231, 231, 237, 0.88)",
-  "colorTextSecondary": "rgba(231, 231, 237, 0.65)",
-  "colorTextTertiary": "rgba(231, 231, 237, 0.45)",
-  "colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
-  "colorBorder": "rgba(71, 71, 97, 0.8)",
-  "colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
-  "colorFill": "rgba(231, 231, 237, 0.18)",
-  "colorFillSecondary": "rgba(231, 231, 237, 0.12)",
-  "colorFillTertiary": "rgba(231, 231, 237, 0.08)",
-  "colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
-  "colorBgContainer": "#0F0F14",
-  "colorBgElevated": "#0F0F14",
-  "colorBgLayout": "#0F0F14",
-  "colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
-  "colorBgMask": "rgba(5, 5, 8, 0.8)",
-  "colorInfo": "#0B83F1",
-  "colorInfoHover": "rgba(42, 114, 165, 1)",
-  "colorInfoBorder": "rgba(135, 209, 255, 0.2)",
-  "colorInfoText": "#0B83F1",
-  "colorInfoBg": "rgba(27, 73, 115, 0.25)",
-  "colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
-  "colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
-  "colorSuccess": "#5BB98B",
-  "colorSuccessHover": "rgba(87, 141, 112, 1)",
-  "colorSuccessBg": "rgba(0, 50, 26, 0.25)",
-  "colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
-  "colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
-  "colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
-  "colorWarning": "#FAAD14",
-  "colorWarningHover": "rgba(170, 136, 43, 1)",
-  "colorWarningBg": "rgba(129, 116, 49, 0.25)",
-  "colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
-  "colorWarningBorder": "rgba(255, 229, 143, 0.2)",
-  "colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
-  "colorError": "#FF4D4F",
-  "colorErrorHover": "rgba(165, 50, 48, 1)",
-  "colorErrorBg": "rgba(129, 46, 46, 0.25)",
-  "colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
-  "colorErrorBorder": "rgba(255, 204, 199, 0.2)",
-  "colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
-  "colorLink": "#5551CC",
-  "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
-  "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.04),0px 8px 40px 0px rgba(255, 255, 255, 0.06),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
- "colorTextWhite": "#fff",
- "colorTextOnPrimary": "#fff",
-  "colorFillDisable": "#8D8C98",
-  "colorPurple": "#5551CC",
-  "colorPurpleHover": "#8383F0",
-  "colorPurpleBg": "rgba(226, 222, 255, 0.2)",
-  "colorPink": "#EC4899",
-  "colorPinkHover": "#E494BC",
-  "colorPinkBg": "rgba(251, 220, 239, 0.2)",
-  "colorYellow": "#EAB308",
-  "colorYellowHover": "#DBBE62",
-  "colorYellowBg": "rgba(255, 250, 184, 0.2)",
-  "colorOrange": "#FA8125",
-  "colorOrangeHover": "#F7A25F",
-  "colorOrangeBg": "rgba(255, 232, 201, 0.2)",
-  "colorTeal": "#14B8A6",
-  "colorTealHover": "#7BC7BE",
-  "colorTealBg": "rgba(200, 244, 233, 0.2)",
-  "colorBlue": "#0090FF",
-  "colorBlueHover": "#83BFED",
-  "colorBlueBg": "rgba(194, 229, 255, 0.2)",
-  "colorMauve": "#8E8C99",
-  "colorMauveHover": "#BBB8CA",
-  "colorMauveBg": "rgba(239, 240, 243, 0.2)",
- "colorSlate": "#2C3A50",
-  "colorSlateHover": "#354252",
-  "colorSlateBg": "#232B36",
-  "colorLavender": "#A77BFF",
-  "colorLavenderHover": "#BFA5F3",
-  "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
-  "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.16),0px 12px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
-  "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.16),-12px 0px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02);",
-  "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
-}
-```
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
-```json
-{
-  "borderRadiusXS": 2,
-  "borderRadiusSM": 4,
-  "borderRadius": 6,
-  "borderRadiusLG": 8,
-  "borderRadiusXL": 12,
-  "borderRadiusFull": 999,
-  "wireframe": false,
-  "colorPrimaryBg": "rgba(244, 244, 247, 1)",
-  "colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
-  "colorPrimaryBorder": "rgba(62, 63, 66, 1)",
-  "colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
-  "colorPrimaryHover": "rgba(38, 38, 41, 1)",
-  "colorPrimary": "rgba(26, 26, 29, 1)",
-  "colorPrimaryActive": "rgba(0, 0, 0, 1)",
-  "colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
-  "colorPrimaryText": "rgba(26, 26, 29, 1)",
-  "colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
-  "colorTextBase": "rgba(26, 26, 29, 1)",
-  "colorBgBase": "rgba(255, 255, 255, 1)",
-  "colorText": "rgba(26, 26, 29, 0.88)",
-  "colorTextSecondary": "rgba(26, 26, 29, 0.65)",
-  "colorTextTertiary": "rgba(26, 26, 29, 0.45)",
-  "colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
-  "colorBorder": "rgba(187, 187, 193, 1)",
-  "colorBorderSecondary": "rgba(234, 234, 234, 1)",
-  "colorFill": "rgba(0, 0, 43, 0.06)",
-  "colorFillSecondary": "rgba(0, 0, 85, 0.03)",
-  "colorFillTertiary": "rgba(205, 208, 220, 0.15)",
-  "colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
-  "colorBgContainer": "rgba(255, 255, 255, 1)",
-  "colorBgElevated": "rgba(255, 255, 255, 1)",
-  "colorBgLayout": "rgba(250, 250, 251, 1)",
-  "colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
-  "colorBgMask": "rgba(0, 0, 0, 0.45)",
-  "colorInfo": "rgba(11, 131, 241, 1)",
-  "colorInfoHover": "rgba(94, 188, 255, 1)",
-  "colorInfoBorder": "rgba(135, 209, 255, 1)",
-  "colorInfoText": "rgba(11, 131, 241, 1)",
-  "colorInfoBg": "rgba(230, 247, 255, 1)",
-  "colorInfoBgHover": "rgba(176, 227, 255, 1)",
-  "colorInfoBorderHover": "rgba(94, 188, 255, 1)",
-  "colorSuccess": "rgba(91, 185, 139, 1)",
-  "colorSuccessHover": "rgba(171, 212, 190, 1)",
-  "colorSuccessBg": "rgba(235, 250, 240, 1)",
-  "colorSuccessBgHover": "rgba(223, 237, 228, 1)",
-  "colorSuccessBorder": "rgba(211, 224, 217, 1)",
-  "colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
-  "colorWarning": "rgba(250, 173, 20, 1)",
-  "colorWarningHover": "rgba(255, 214, 102, 1)",
-  "colorWarningBg": "rgba(255, 251, 230, 1)",
-  "colorWarningBgHover": "rgba(255, 241, 184, 1)",
-  "colorWarningBorder": "rgba(255, 229, 143, 1)",
-  "colorWarningBorderHover": "rgba(255, 214, 102, 1)",
-  "colorError": "rgba(255, 77, 79, 1)",
-  "colorErrorHover": "rgba(255, 120, 117, 1)",
-  "colorErrorBg": "rgba(255, 242, 240, 1)",
-  "colorErrorBgHover": "rgba(255, 241, 240, 1)",
-  "colorErrorBorder": "rgba(255, 204, 199, 1)",
-  "colorErrorBorderHover": "rgba(255, 163, 158, 1)",
-  "colorLink": "rgba(0, 77, 255, 1)",
-  "boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
-  "boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
-  "colorTextWhite": "#ffffff",
-  "colorTextOnPrimary": "#ffffff",
-  "colorFillDisable": "rgba(232, 232, 235, 1)",
-  "colorPurple": "rgba(97, 92, 237, 1)",
-  "colorPurpleHover": "#8080FF",
-  "colorPurpleBg": "rgba(226, 222, 255, 0.8)",
-  "colorPink": "rgba(236, 72, 153, 1)",
-  "colorPinkHover": "#E593BC",
-  "colorPinkBg": "rgba(251, 220, 239, 0.8)",
-  "colorYellow": "rgba(234, 179, 8, 1)",
-  "colorYellowHover": "#F1D372",
-  "colorYellowBg": "rgba(255, 250, 184, 0.8)",
-  "colorOrange": "rgba(250, 129, 37, 1)",
-  "colorOrangeHover": "#E88C45",
-  "colorOrangeBg": "rgba(255, 232, 201, 0.8)",
-  "colorTeal": "rgba(20, 184, 166, 1)",
-  "colorTealHover": "#5FB3A9",
-  "colorTealBg": "rgba(200, 244, 233, 0.8)",
-  "colorBlue": "rgba(0, 144, 255, 1)",
-  "colorBlueHover": "#72BCF5",
-  "colorBlueBg": "rgba(194, 229, 255, 0.8)",
-  "colorMauve": "rgba(142, 140, 153, 1)",
-  "colorMauveHover": "#C0BFC8",
-  "colorMauveBg": "rgba(239, 240, 243, 0.8)",
-  "colorSlate": "#2C3A50",
-  "colorSlateHover": "#354252",
-  "colorSlateBg": "#232B36",
-  "boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
-  "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
-  "boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
-}
-```
-<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
-```json
-{
-  "borderRadiusXS": 2,
-  "borderRadiusSM": 4,
-  "borderRadius": 6,
-  "borderRadiusLG": 8,
-  "borderRadiusXL": 12,
-  "borderRadiusFull": 999,
-  "wireframe": false,
-  "colorPrimaryBg": "#181818",
-  "colorPrimaryBgHover": "#2E2E2E",
-  "colorPrimaryBorder": "#323232",
-  "colorPrimaryBorderHover": "#2C2C2C",
-  "colorPrimaryHover": "#DFDFDF",
-  "colorPrimary": "#E4E4E4",
-  "colorPrimaryActive": "#7E7E7E",
-  "colorPrimaryTextHover": "#909090",
-  "colorPrimaryText": "#676767",
-  "colorPrimaryTextActive": "#959595",
-  "colorTextBase": "#E7E7ED",
-  "colorBgBase": "#0A0A0B",
-  "colorText": "#E7E7EDC7",
-  "colorTextSecondary": "#E7E7EDA6",
-  "colorTextTertiary": "#E7E7ED73",
-  "colorTextQuaternary": "#E7E7ED40",
-  "colorBorder": "#5B5B5BCC",
-  "colorBorderSecondary": "#323232CC",
-  "colorFill": "#E7E7ED2E",
-  "colorFillSecondary": "#E7E7ED1F",
-  "colorFillTertiary": "#E7E7ED14",
-  "colorFillQuaternary": "#E7E7ED0A",
-  "colorBgContainer": "#121212",
-  "colorBgElevated": "#212121",
-  "colorBgLayout": "#141414",
-  "colorBgSpotlight": "#525252D9",
-  "colorBgMask": "#050508CC",
-  "colorInfo": "#0B83F1",
-  "colorInfoHover": "#5EBCFF",
-  "colorInfoBorder": "#3990C9",
-  "colorInfoText": "#0B83F1",
-  "colorInfoBg": "#112233",
-  "colorInfoBgHover": "#264866",
-  "colorInfoBorderHover": "#5EBCFF",
-  "colorSuccess": "#5BB98B",
-  "colorSuccessHover": "#74A47C",
-  "colorSuccessBg": "#293631",
-  "colorSuccessBgHover": "#3F5147",
-  "colorSuccessBorder": "#73A377",
-  "colorSuccessBorderHover": "#ABD4BE",
-  "colorWarning": "#FAAD14",
-  "colorWarningHover": "#FF8C28",
-  "colorWarningBg": "#2D231A",
-  "colorWarningBgHover": "#4D3B23",
-  "colorWarningBorder": "#FFA628",
-  "colorWarningBorderHover": "#FFD666",
-  "colorError": "#FF4D4F",
-  "colorErrorHover": "#EE654E",
-  "colorErrorBg": "#2B0B08",
-  "colorErrorBgHover": "#4A2A28",
-  "colorErrorBorder": "#EE5B4E",
-  "colorErrorBorderHover": "#FFA39E",
-  "colorLink": "#4D7DFF",
-  "boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
-  "boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
- "colorTextWhite": "#ffffff",
- "colorTextBlack": "#000000",
- "colorTextOnPrimary": "#ffffff",
-  "colorFillDisable": "#898989",
-  "colorPurple": "#615CED",
-  "colorPurpleHover": "#8383F0",
-  "colorPurpleBg": "#6964877A",
-  "colorPink": "#EC4899",
-  "colorPinkHover": "#E494BC",
-  "colorPinkBg": "#53424D7A",
-  "colorYellow": "#EAB308",
-  "colorYellowHover": "#DBBE62",
-  "colorYellowBg": "#9585527A",
-  "colorOrange": "#FA8125",
-  "colorOrangeHover": "#F7A25F",
-  "colorOrangeBg": "#6F58417A",
-  "colorTeal": "#14B8A6",
-  "colorTealHover": "#7BC7BE",
-  "colorTealBg": "#4658547A",
-  "colorBlue": "#0090FF",
-  "colorBlueHover": "#83BFED",
-  "colorBlueBg": "#5E76897A",
-  "colorMauve": "#8E8C99",
-  "colorMauveHover": "#BBB8CA",
-  "colorMauveBg": "#5859647A",
-  "colorSlate": "#2C3A50",
-  "colorSlateHover": "#354252",
-  "colorSlateBg": "#232B36",
-  "colorLavender": "#A77BFF",
-  "colorLavenderHover": "#BFA5F3",
-  "colorLavenderBg": "rgba(150, 143, 167, 0.48)",
-  "boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.24),0px 12px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
-  "boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.24),-12px 0px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
-  "boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
-}
-```
-# CSS 变量
-Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
-```less
-.example {
-  background: var(--sps-color-bg-base);
-  color: var(--sps-color-pink);
-}
-// 提示：您可以将 'sps' 替换为您自己的前缀
-```
-### 1.0.21
-`2025-12-25`
-##### Changed
-- AlertDialog 组件：定位距离顶部的默认高度调整为当前窗口高度的 36%
-- Table 组件：表格行 hover 背景色修改为 `color-bg-layout` 颜色变量；表格行选中背景色修改为 `color-primary-bg-hover` 颜色变量
-- Select 组件：多选模式的选中项背景色调整
-- 主题色变量更新：,
-  - bailianDarkTheme：添加 `"colorLinkHover": "#857DE3"`
-  - bailianTheme：添加 `"colorLinkHover": "#8080FF"`
-  - carbonDarkTheme：修改 `"colorTextOnPrimary": "#ffffff"`
-##### Fixed
-- Slider 组件：水平滑动条组件取消默认左右两边的外边距 margin，操作按钮 handle 在最左侧与最右侧不超出滑动轨道宽度
+访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon