npm - @agentscope-ai/design - Versions diffs - 1.0.27-beta.1769741632982 → 1.0.28-beta.1769761940248 - Mend

@agentscope-ai/design 1.0.27-beta.1769741632982 → 1.0.28-beta.1769761940248

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 (15) hide show

package/llms/all.llms.txt CHANGED Viewed

@@ -1,48 +1,14 @@
-<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
+<DemoTitle title="Video" 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
+| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
+| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode |  |
-以下 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 |
@@ -160,50 +126,49 @@ type RangeDisabledTime = (
-<DemoTitle title="Video" desc="视频展示">
+<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
 #### API
 | 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
-| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode |  |
+| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
+| maxHeight | 最大高度 | number \| string | '90vh' |
+<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
+## antd API
-<DemoTitle title="Tag" desc="进行标记和分类的小标签">
-#### API
+通用属性参考：[通用属性](/docs/react/common-props)
-| 属性名 | 描述 | 类型 | 默认值 |
+| 参数 | 说明 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| size | 尺寸 | 'small' \| 'middle' | 'middle' |
-| color | 标签色 | SparkTagColors \| string | 'purple' |
-<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
+| title | 提示文字 | ReactNode \| () => ReactNode | - |
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
+### 共同的 API
-### Tag
+以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
+<!-- prettier-ignore -->
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| closeIcon | 自定义关闭按钮。5.7.0：设置为  | ReactNode | false | 4.4.0 |
-| icon | 设置图标 | ReactNode | - |  |
-| bordered | 是否有边框 | boolean | true | 5.4.0 |
-| onClose | 关闭时的回调（可通过  | (e: React.MouseEvent) => void | - |  |
-### Tag.CheckableTag
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| checked | 设置标签的选中状态 | boolean | false |
-| onChange | 点击标签时触发的回调 | (checked) => void | - |
+| 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 |
@@ -310,7 +275,6 @@ type RangeDisabledTime = (
 | 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
 | type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
-| className | 类名 | string | '' |
 <AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
@@ -375,263 +339,121 @@ type RangeDisabledTime = (
-<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
+<DemoTitle title="Tag" desc="进行标记和分类的小标签">
 #### API
-<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| size | 尺寸 | 'small' \| 'middle' | 'middle' |
+| color | 标签色 | SparkTagColors \| string | 'purple' |
+<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-### Steps
-整体步骤条。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| className | 步骤条类名 | string | - |  |
-| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过  | number | 0 |  |
-| direction | 指定步骤条方向。目前支持水平（ | string | horizontal |  |
-| initial | 起始序号，从 0 开始记数 | number | 0 |  |
-| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选  | string | horizontal |  |
-| percent | 当前  | number | - | 4.5.0 |
-| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为  | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false |  |
-| responsive | 当屏幕宽度小于  | boolean | true |  |
-| size | 指定大小，目前支持普通（ | string | default |  |
-| status | 指定当前步骤的状态，可选  | string | process |  |
-| type | 步骤条类型，可选  | string | default | inline: 5.0 |
-| onChange | 点击切换步骤时触发 | (current) => void | - |  |
-| items | 配置选项卡内容 |  | [] | 4.24.0 |
-### `type="inline"`
+### Tag
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| className | 步骤条类名 | string | - |  |
-| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过  | number | 0 |  |
-| initial | 起始序号，从 0 开始记数 | number | 0 |  |
-| status | 指定当前步骤的状态，可选  | string | process |  |
-| onChange | 点击切换步骤时触发 | (current) => void | - |  |
-| items | 配置选项卡内容，不支持  |  | [] | 4.24.0 |
+| closeIcon | 自定义关闭按钮。5.7.0：设置为  | ReactNode | false | 4.4.0 |
+| icon | 设置图标 | ReactNode | - |  |
+| bordered | 是否有边框 | boolean | true | 5.4.0 |
+| onClose | 关闭时的回调（可通过  | (e: React.MouseEvent) => void | - |  |
-### StepItem
-步骤条内的每一个步骤。
+### Tag.CheckableTag
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| description | 步骤的详情描述，可选 | ReactNode | - |  |
-| disabled | 禁用点击 | boolean | false |  |
-| icon | 步骤图标的类型，可选 | ReactNode | - |  |
-| status | 指定状态。当不配置该属性时，会使用 Steps 的  | string | wait |  |
-| subTitle | 子标题 | ReactNode | - |  |
-| title | 标题 | ReactNode | - |  |
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| checked | 设置标签的选中状态 | boolean | false |
+| onChange | 点击标签时触发的回调 | (checked) => void | - |
-<DemoTitle title="Statistic" desc="展示统计数值">
+<DemoTitle title="Table" desc="展示行列数据。">
 #### API
-<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
+<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-#### Statistic
+### Table
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| 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 | - |  |
+| bordered | 是否展示外边框和列边框 | boolean | false |  |
+| columns | 表格列的配置描述，具体项见下表 |  | - |  |
+| components | 覆盖默认的 table 元素 |  | - |  |
+| dataSource | 数据数组 | object[] | - |  |
+| expandable | 配置展开属性 |  | - |  |
+| footer | 表格尾部 | function(currentPageData) | - |  |
+| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement |  |
+| loading | 页面是否加载中 | boolean \|  | false |  |
+| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object |  |  |
+| pagination | 分页器，参考 | object \|  | - |  |
+| rowClassName | 表格行的类名 | function(record, index): string | - |  |
+| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key |  |
+| rowSelection | 表格行是否可选择， | object | - |  |
+| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
+| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - |  |
+| showHeader | 是否显示表头 | boolean | true |  |
+| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \|  | { target: 'full-header' } | 5.16.0 |
+| size | 表格大小 | large | large |  |
+| sortDirections | 支持的排序方式，取值为  | Array | [ |  |
+| sticky | 设置粘性头部和滚动条 | boolean \|  | - | 4.6.0 (getContainer: 4.7.0) |
+| summary | 总结栏 | (currentData) => ReactNode | - |  |
+| tableLayout | 表格元素的  | - \|  | 无 |  |
+| title | 表格标题 | function(currentPageData) | - |  |
+| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
+| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action:  | - |  |
+| onHeaderRow | 设置头部行属性 | function(columns, index) | - |  |
+| onRow | 设置行属性 | function(record, index) | - |  |
+| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
-#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
+### Table ref
-<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
+| 参数 | 说明 | 类型 | 版本 |
+|--------|--------|--------|--------|
+| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
+| scrollTo | 滚动到目标位置（设置  | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
-<!-- prettier-ignore -->
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| format | 格式化倒计时展示，参考  | string | HH:mm:ss |  |
-| prefix | 设置数值的前缀 | ReactNode | - |  |
-| suffix | 设置数值的后缀 | ReactNode | - |  |
-| title | 数值的标题 | ReactNode | - |  |
-| value | 数值内容 | number | - |  |
-| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
-| onFinish | 倒计时完成时触发 | () => void | - |  |
-| onChange | 倒计时时间变化时触发 | (value: number) => void | - |  |
+#### onRow 用法
-#### Statistic.Timer <Badge>5.25.0+</Badge>
+适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| type | 计时类型，正计时或者倒计时 | countdown | - |  |
-| format | 格式化倒计时展示，参考  | string | HH:mm:ss |  |
-| prefix | 设置数值的前缀 | ReactNode | - |  |
-| suffix | 设置数值的后缀 | ReactNode | - |  |
-| title | 数值的标题 | ReactNode | - |  |
-| value | 数值内容 | number | - |  |
-| valueStyle | 设置数值区域的样式 | CSSProperties | - |  |
-| onFinish | 倒计时完成时触发, 指定为  | () => void | - |  |
-| onChange | 倒计时时间变化时触发 | (value: number) => void | - |  |
+```jsx
+<Table
+  onRow={(record) => {
+    return {
+      onClick: (event) => {}, // 点击行
+      onDoubleClick: (event) => {},
+      onContextMenu: (event) => {},
+      onMouseEnter: (event) => {}, // 鼠标移入行
+      onMouseLeave: (event) => {},
+    };
+  }}
+  onHeaderRow={(columns, index) => {
+    return {
+      onClick: () => {}, // 点击表头行
+    };
+  }}
+/>
+```
+### Column
-<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| tip | indicator下方的tip | React.ReactNode | - |
-| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
-| children | 被spinner包裹的子元素 | React.ReactNode | - |
-| style | spinner最外层的样式 | React.CSSProperties | - |
-| className | spinner的类名 | string | - |
-| percent | 进度条的百分比 | number | - |
-| spinning | 是否为加载中状态 | boolean | false |
-| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
-<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="Table" desc="展示行列数据。">
-#### API
-<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-### Table
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| bordered | 是否展示外边框和列边框 | boolean | false |  |
-| columns | 表格列的配置描述，具体项见下表 |  | - |  |
-| components | 覆盖默认的 table 元素 |  | - |  |
-| dataSource | 数据数组 | object[] | - |  |
-| expandable | 配置展开属性 |  | - |  |
-| footer | 表格尾部 | function(currentPageData) | - |  |
-| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement |  |
-| loading | 页面是否加载中 | boolean \|  | false |  |
-| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object |  |  |
-| pagination | 分页器，参考 | object \|  | - |  |
-| rowClassName | 表格行的类名 | function(record, index): string | - |  |
-| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key |  |
-| rowSelection | 表格行是否可选择， | object | - |  |
-| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
-| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - |  |
-| showHeader | 是否显示表头 | boolean | true |  |
-| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \|  | { target: 'full-header' } | 5.16.0 |
-| size | 表格大小 | large | large |  |
-| sortDirections | 支持的排序方式，取值为  | Array | [ |  |
-| sticky | 设置粘性头部和滚动条 | boolean \|  | - | 4.6.0 (getContainer: 4.7.0) |
-| summary | 总结栏 | (currentData) => ReactNode | - |  |
-| tableLayout | 表格元素的  | - \|  | 无 |  |
-| title | 表格标题 | function(currentPageData) | - |  |
-| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
-| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action:  | - |  |
-| onHeaderRow | 设置头部行属性 | function(columns, index) | - |  |
-| onRow | 设置行属性 | function(record, index) | - |  |
-| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
-### Table ref
-| 参数 | 说明 | 类型 | 版本 |
-|--------|--------|--------|--------|
-| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
-| scrollTo | 滚动到目标位置（设置  | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
-#### onRow 用法
-适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
-```jsx
-<Table
-  onRow={(record) => {
-    return {
-      onClick: (event) => {}, // 点击行
-      onDoubleClick: (event) => {},
-      onContextMenu: (event) => {},
-      onMouseEnter: (event) => {}, // 鼠标移入行
-      onMouseLeave: (event) => {},
-    };
-  }}
-  onHeaderRow={(columns, index) => {
-    return {
-      onClick: () => {}, // 点击表头行
-    };
-  }}
-/>
-```
-### Column
-列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
+列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
@@ -807,10 +629,14 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
-<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
+<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
 #### API
-<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| label | Switch后的内容 | ReactNode |  |
+<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
 ## antd API
@@ -819,127 +645,227 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| autoFocus | 自动获取焦点 | boolean | false |  |
-| classNames | 语义化结构 className |  | - | 5.10.0 |
-| defaultValue | 设置初始取值。当  | number \| [number, number] | 0 \| [0, 0] |  |
-| disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
-| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
-| dots | 是否只能拖拽到刻度上 | boolean | false |  |
-| included | marks | boolean | true |  |
-| marks | 刻度标记，key 的类型必须为  | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |  |
-| max | 最大值 | number | 100 |  |
-| min | 最小值 | number | 0 |  |
-| range | 双滑块模式 | boolean \|  | false |  |
-| reverse | 反向坐标轴 | boolean | false |  |
-| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当  | number \| null | 1 |  |
-| styles | 语义化结构 styles |  | - | 5.10.0 |
-| tooltip | 设置 Tooltip 相关属性 |  | - | 4.23.0 |
-| value | 设置当前取值。当  | number \| [number, number] | - |  |
-| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false |  |
-| onChangeComplete | 与  | (value) => void | - |  |
-| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |  |
-### range
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| draggableTrack | 范围刻度是否可被拖拽 | boolean | false |  |
-| editable | 启动动态增减节点，不能和  | boolean | false | 5.20.0 |
-| minCount | 配置  | number | 0 | 5.20.0 |
-| maxCount | 配置  | number | - | 5.20.0 |
+| 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) | - |  |
-### tooltip
+## 方法
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
-| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
-| placement | 设置 Tooltip 展示位置。参考  | string | - | 4.23.0 |
-| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
-| formatter | Slider 会把当前值传给  | value => ReactNode \| null | IDENTITY | 4.23.0 |
+| 名称 | 描述 |
+|--------|--------|
+| blur() | 移除焦点 |
+| focus() | 获取焦点 |
-## 方法
-| 名称 | 描述 | 版本 |
-|--------|--------|--------|
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
+#### API
+<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
-<DemoTitle title="Skeleton" 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
+### Steps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
-| shape | 指定头像的形状 | circle | - |
-| size | 设置头像占位图的大小 | number \|  | - |
+整体步骤条。
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| className | 步骤条类名 | string | - |  |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过  | number | 0 |  |
+| direction | 指定步骤条方向。目前支持水平（ | string | horizontal |  |
+| initial | 起始序号，从 0 开始记数 | number | 0 |  |
+| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选  | string | horizontal |  |
+| percent | 当前  | number | - | 4.5.0 |
+| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为  | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false |  |
+| responsive | 当屏幕宽度小于  | boolean | true |  |
+| size | 指定大小，目前支持普通（ | string | default |  |
+| status | 指定当前步骤的状态，可选  | string | process |  |
+| type | 步骤条类型，可选  | string | default | inline: 5.0 |
+| onChange | 点击切换步骤时触发 | (current) => void | - |  |
+| items | 配置选项卡内容 |  | [] | 4.24.0 |
-### SkeletonTitleProps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| width | 设置标题占位图的宽度 | number \| string | - |
+### `type="inline"`
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| className | 步骤条类名 | string | - |  |
+| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过  | number | 0 |  |
+| initial | 起始序号，从 0 开始记数 | number | 0 |  |
+| status | 指定当前步骤的状态，可选  | string | process |  |
+| onChange | 点击切换步骤时触发 | (current) => void | - |  |
+| items | 配置选项卡内容，不支持  |  | [] | 4.24.0 |
-### SkeletonParagraphProps
-| 属性 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| rows | 设置段落占位图的行数 | number | - |
-| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
+### StepItem
+步骤条内的每一个步骤。
-### SkeletonButtonProps
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| active | 是否展示动画效果 | boolean | false |  |
-| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
-| shape | 指定按钮的形状 | circle | - |  |
-| size | 设置按钮的大小 | large | - |  |
+| description | 步骤的详情描述，可选 | ReactNode | - |  |
+| disabled | 禁用点击 | boolean | false |  |
+| icon | 步骤图标的类型，可选 | ReactNode | - |  |
+| status | 指定状态。当不配置该属性时，会使用 Steps 的  | string | wait |  |
+| subTitle | 子标题 | ReactNode | - |  |
+| title | 标题 | ReactNode | - |  |
-### SkeletonInputProps
-| 属性 | 说明 | 类型 | 默认值 |
+<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
+#### API
+| 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| active | 是否展示动画效果 | boolean | false |
-| size | 设置输入框的大小 | large | - |
+| tip | indicator下方的tip | React.ReactNode | - |
+| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
+| children | 被spinner包裹的子元素 | React.ReactNode | - |
+| style | spinner最外层的样式 | React.CSSProperties | - |
+| className | spinner的类名 | string | - |
+| percent | 进度条的百分比 | number | - |
+| spinning | 是否为加载中状态 | boolean | false |
+| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
-<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
-## API
+<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="Slider" desc="滑动型输入器，展示当前值和可选范围。">
+#### API
+<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| autoFocus | 自动获取焦点 | boolean | false |  |
+| classNames | 语义化结构 className |  | - | 5.10.0 |
+| defaultValue | 设置初始取值。当  | number \| [number, number] | 0 \| [0, 0] |  |
+| disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
+| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
+| dots | 是否只能拖拽到刻度上 | boolean | false |  |
+| included | marks | boolean | true |  |
+| marks | 刻度标记，key 的类型必须为  | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } |  |
+| max | 最大值 | number | 100 |  |
+| min | 最小值 | number | 0 |  |
+| range | 双滑块模式 | boolean \|  | false |  |
+| reverse | 反向坐标轴 | boolean | false |  |
+| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当  | number \| null | 1 |  |
+| styles | 语义化结构 styles |  | - | 5.10.0 |
+| tooltip | 设置 Tooltip 相关属性 |  | - | 4.23.0 |
+| value | 设置当前取值。当  | number \| [number, number] | - |  |
+| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false |  |
+| onChangeComplete | 与  | (value) => void | - |  |
+| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |  |
+### range
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| draggableTrack | 范围刻度是否可被拖拽 | boolean | false |  |
+| editable | 启动动态增减节点，不能和  | boolean | false | 5.20.0 |
+| minCount | 配置  | number | 0 | 5.20.0 |
+| maxCount | 配置  | number | - | 5.20.0 |
+### tooltip
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
+| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
+| placement | 设置 Tooltip 展示位置。参考  | string | - | 4.23.0 |
+| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
+| formatter | Slider 会把当前值传给  | value => ReactNode \| null | IDENTITY | 4.23.0 |
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| texture | 是否显示纹理 | boolean | false |
+## 方法
+| 名称 | 描述 | 版本 |
+|--------|--------|--------|
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
@@ -1042,20 +968,75 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
-<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
-#### API
+<DemoTitle title="Skeleton" 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
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| active | 是否展示动画效果 | boolean | false |  |
+| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
+| shape | 指定按钮的形状 | circle | - |  |
+| size | 设置按钮的大小 | large | - |  |
+### SkeletonInputProps
+| 属性 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| active | 是否展示动画效果 | boolean | false |
+| size | 设置输入框的大小 | large | - |
+<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
+## API
 | 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| maxLength | 可以输入内容的最大长度 | number |  |
-| value | 输入的内容 | string |  |
-| className | 输入内容的类名 | string |  |
-| onChange | 输入内容的回调 | (value: string) => void |  |
-| variables | 可以插入的变量列表 | Array |  |
-| onCreate | 新增变量的触发回调 | () => void |  |
-| createBtnText | 新增变量的按钮文本 | string |  |
-| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false |  |
-| readOnly | 仅可读 | boolean | false |
+| texture | 是否显示纹理 | boolean | false |
@@ -1203,72 +1184,28 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
-<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
-#### API
-<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
+<DemoTitle title="Progress" desc="用于指示任务的完成进度">
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+各类型共用的属性。
+| 属性 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| content | 卡片内容 | ReactNode \| () => ReactNode | - |  |
-| title | 卡片标题 | ReactNode \| () => ReactNode | - |  |
+| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent +  | - |
+| percent | 百分比 | number | 0 | - |
+| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
+| status | 状态，可选： | string | - | - |
+| strokeColor | 进度条的色彩 | string | - | - |
+| strokeLinecap | 进度条的样式 | round | round | - |
+| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
+| trailColor | 未完成的分段的颜色 | string | - | - |
+| type | 类型，可选  | string | line | - |
+| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
-<!-- 共同的 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 |
-## 注意
-请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
-<DemoTitle title="Progress" desc="用于指示任务的完成进度">
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-各类型共用的属性。
-| 属性 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent +  | - |
-| percent | 百分比 | number | 0 | - |
-| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
-| status | 状态，可选： | string | - | - |
-| strokeColor | 进度条的色彩 | string | - | - |
-| strokeLinecap | 进度条的样式 | round | round | - |
-| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
-| trailColor | 未完成的分段的颜色 | string | - | - |
-| type | 类型，可选  | string | line | - |
-| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
-### `type="line"`
+### `type="line"`
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
@@ -1299,49 +1236,19 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
-<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
-## API
+<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
+#### API
 | 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
-<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-```jsx
-<Pagination onChange={onChange} total={50} />
-```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
-| current | 当前页数 | number | - |  |
-| defaultCurrent | 默认的当前页数 | number | 1 |  |
-| defaultPageSize | 默认的每页条数 | number | 10 |  |
-| disabled | 禁用分页 | boolean | - |  |
-| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |  |
-| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |  |
-| pageSize | 每页条数 | number | - |  |
-| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ |  |
-| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
-| showLessItems | 是否显示较少页面内容 | boolean | false |  |
-| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false |  |
-| showSizeChanger | 是否展示  | boolean \|  | - | SelectProps: 5.21.0 |
-| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true |  |
-| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - |  |
-| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - |  |
-| size | 当为  | default | default |  |
-| total | 数据总数 | number | 0 |  |
-| onChange | 页码或  | function(page, pageSize) | - |  |
-| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
+| maxLength | 可以输入内容的最大长度 | number |  |
+| value | 输入的内容 | string | (必填) |
+| className | 输入内容的类名 | string |  |
+| onChange | 输入内容的回调 | (value: string) => void |  |
+| variables | 可以插入的变量列表 | Array |  |
+| onCreate | 新增变量的触发回调 | () => void |  |
+| createBtnText | 新增变量的按钮文本 | string |  |
+| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false |  |
@@ -1403,6 +1310,97 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
+<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
+#### API
+<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| content | 卡片内容 | ReactNode \| () => ReactNode | - |  |
+| 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 |
+## 注意
+请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
+## API
+| 属性名 | 描述 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
+<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+```jsx
+<Pagination onChange={onChange} total={50} />
+```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
+| current | 当前页数 | number | - |  |
+| defaultCurrent | 默认的当前页数 | number | 1 |  |
+| defaultPageSize | 默认的每页条数 | number | 10 |  |
+| disabled | 禁用分页 | boolean | - |  |
+| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false |  |
+| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |  |
+| pageSize | 每页条数 | number | - |  |
+| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ |  |
+| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
+| showLessItems | 是否显示较少页面内容 | boolean | false |  |
+| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false |  |
+| showSizeChanger | 是否展示  | boolean \|  | - | SelectProps: 5.21.0 |
+| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true |  |
+| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - |  |
+| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - |  |
+| size | 当为  | default | default |  |
+| total | 数据总数 | number | 0 |  |
+| onChange | 页码或  | function(page, pageSize) | - |  |
+| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
 <DemoTitle title="Notification" desc="用于指示任务的完成进度">
 #### API
@@ -1499,175 +1497,75 @@ notification.config({
-<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
+<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
 #### API
 | 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
-| conent | 显示的内容 | string | "" |
+| info | 底部额外内容 | string \| React.ReactNode |  |
+| showDivider | 是否显示分割线 | boolean | true |
-<AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
+<AntdApiRef url="https://ant.design/components/modal-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-组件提供了一些静态方法，使用方式和参数如下：
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| afterClose | Modal 完全关闭后的回调 | function | - |  |
+| classNames | 配置弹窗内置模块的 className |  | - |  |
+| styles | 配置弹窗内置模块的 style |  | - | 5.10.0 |
+| cancelButtonProps | cancel 按钮 props |  | - |  |
+| cancelText | 取消按钮文字 | ReactNode | 取消 |  |
+| centered | 垂直居中展示 Modal | boolean | false |  |
+| closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true |  |
+| closeIcon | 自定义关闭图标。5.7.0：设置为  | ReactNode |  |  |
+| confirmLoading | 确定按钮 loading | boolean | false |  |
+| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
+| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
+| footer | 底部内容，当不需要默认底部按钮时，可以设为  | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
+| forceRender | 强制渲染 Modal | boolean | false |  |
+| getContainer | 指定 Modal 挂载的节点，但依旧为全屏展示， | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
+| mask | 是否展示遮罩 | boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
+| okButtonProps | ok 按钮 props |  | - |  |
+| okText | 确认按钮文字 | ReactNode | 确定 |  |
+| okType | 确认按钮类型 | string | primary |  |
+| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |  |
+| loading | 显示骨架屏 | boolean |  | 5.18.0 |
+| title | 标题 | ReactNode | - |  |
+| open | 对话框是否可见 | boolean | - |  |
+| width | 宽度 | string \| number \|  | 520 | Breakpoint: 5.23.0 |
+| wrapClassName | 对话框外层容器的类名 | string | - |  |
+| zIndex | 设置 Modal 的  | number | 1000 |  |
+| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
+| onOk | 点击确定回调 | function(e) | - |  |
+| afterOpenChange | 打开和关闭 Modal 时动画结束后的回调 | (open: boolean) => void | - | 5.4.0 |
-- `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)`
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| content | 提示内容 | ReactNode \| config | - |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
-| onClose | 关闭时触发的回调函数 | function | - |
+#### 注意
-组件同时提供 promise 接口。
+- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnHidden`。
+- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
+- `Modal.method()` RTL 模式仅支持 hooks 用法。
+### Modal.method()
-- `message[level](content, [duration]).then(afterClose)`
-- `message[level](content, [duration], onClose).then(afterClose)`
+包括：
-其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
-也可以对象的形式传递参数：
+- `Modal.info`
+- `Modal.success`
+- `Modal.error`
+- `Modal.warning`
+- `Modal.confirm`
-- `message.open(config)`
-- `message.success(config)`
-- `message.error(config)`
-- `message.info(config)`
-- `message.warning(config)`
-- `message.loading(config)`
-`config` 对象属性如下：
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| className | 自定义 CSS class | string | - |
-| content | 提示内容 | ReactNode | - |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
-| icon | 自定义图标 | ReactNode | - |
-| key | 当前提示的唯一标志 | string \| number | - |
-| style | 自定义内联样式 |  | - |
-| onClick | 点击 message 时触发的回调函数 | function | - |
-| onClose | 关闭时触发的回调函数 | function | - |
-### 全局方法
-还提供了全局配置和全局销毁方法：
-- `message.config(options)`
-- `message.destroy()`
-也可通过 `message.destroy(key)` 来关闭一条消息。
-#### message.config
-当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
-```js
-message.config({
-  top: 100,
-  duration: 2,
-  maxCount: 3,
-  rtl: true,
-  prefixCls: 'my-message',
-});
-```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| duration | 默认自动关闭延时，单位秒 | number | 3 |  |
-| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body |  |
-| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - |  |
-| prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
-| rtl | 是否开启 RTL 模式 | boolean | false |  |
-| top | 消息距离顶部的位置 | string \| number | 8 |  |
-<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| info | 底部额外内容 | string \| React.ReactNode |  |
-| showDivider | 是否显示分割线 | boolean | true |
-<AntdApiRef url="https://ant.design/components/modal-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| afterClose | Modal 完全关闭后的回调 | function | - |  |
-| classNames | 配置弹窗内置模块的 className |  | - |  |
-| styles | 配置弹窗内置模块的 style |  | - | 5.10.0 |
-| cancelButtonProps | cancel 按钮 props |  | - |  |
-| cancelText | 取消按钮文字 | ReactNode | 取消 |  |
-| centered | 垂直居中展示 Modal | boolean | false |  |
-| closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true |  |
-| closeIcon | 自定义关闭图标。5.7.0：设置为  | ReactNode |  |  |
-| confirmLoading | 确定按钮 loading | boolean | false |  |
-| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
-| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
-| footer | 底部内容，当不需要默认底部按钮时，可以设为  | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
-| forceRender | 强制渲染 Modal | boolean | false |  |
-| getContainer | 指定 Modal 挂载的节点，但依旧为全屏展示， | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
-| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
-| mask | 是否展示遮罩 | boolean | true |  |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
-| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
-| okButtonProps | ok 按钮 props |  | - |  |
-| okText | 确认按钮文字 | ReactNode | 确定 |  |
-| okType | 确认按钮类型 | string | primary |  |
-| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |  |
-| loading | 显示骨架屏 | boolean |  | 5.18.0 |
-| title | 标题 | ReactNode | - |  |
-| open | 对话框是否可见 | boolean | - |  |
-| width | 宽度 | string \| number \|  | 520 | Breakpoint: 5.23.0 |
-| wrapClassName | 对话框外层容器的类名 | string | - |  |
-| zIndex | 设置 Modal 的  | number | 1000 |  |
-| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
-| onOk | 点击确定回调 | function(e) | - |  |
-| afterOpenChange | 打开和关闭 Modal 时动画结束后的回调 | (open: boolean) => void | - | 5.4.0 |
-#### 注意
-- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnHidden`。
-- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
-- `Modal.method()` RTL 模式仅支持 hooks 用法。
-### Modal.method()
-包括：
-- `Modal.info`
-- `Modal.success`
-- `Modal.error`
-- `Modal.warning`
-- `Modal.confirm`
-以上均为一个函数，参数为 object，具体属性如下：
+以上均为一个函数，参数为 object，具体属性如下：
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
@@ -1769,6 +1667,106 @@ const confirmed = await modal.confirm({ ... });
+<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)`
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| content | 提示内容 | ReactNode \| config | - |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
+| onClose | 关闭时触发的回调函数 | function | - |
+组件同时提供 promise 接口。
+- `message[level](content, [duration]).then(afterClose)`
+- `message[level](content, [duration], onClose).then(afterClose)`
+其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
+也可以对象的形式传递参数：
+- `message.open(config)`
+- `message.success(config)`
+- `message.error(config)`
+- `message.info(config)`
+- `message.warning(config)`
+- `message.loading(config)`
+`config` 对象属性如下：
+| 参数 | 说明 | 类型 | 默认值 |
+|--------|--------|--------|--------|
+| className | 自定义 CSS class | string | - |
+| content | 提示内容 | ReactNode | - |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
+| icon | 自定义图标 | ReactNode | - |
+| key | 当前提示的唯一标志 | string \| number | - |
+| style | 自定义内联样式 |  | - |
+| onClick | 点击 message 时触发的回调函数 | function | - |
+| onClose | 关闭时触发的回调函数 | function | - |
+### 全局方法
+还提供了全局配置和全局销毁方法：
+- `message.config(options)`
+- `message.destroy()`
+也可通过 `message.destroy(key)` 来关闭一条消息。
+#### message.config
+当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
+```js
+message.config({
+  top: 100,
+  duration: 2,
+  maxCount: 3,
+  rtl: true,
+  prefixCls: 'my-message',
+});
+```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| duration | 默认自动关闭延时，单位秒 | number | 3 |  |
+| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body |  |
+| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - |  |
+| prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
+| rtl | 是否开启 RTL 模式 | boolean | false |  |
+| top | 消息距离顶部的位置 | string \| number | 8 |  |
 <DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
 #### API
@@ -1957,29 +1955,6 @@ interface CountConfig {
-<DemoTitle title="MediaPreview" desc="用于预览图片和视频的弹窗组件">
-#### API
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| visible | 是否显示预览 | boolean | false |
-| mediaList | 媒体列表 | MediaItem[] | [] |
-| currentIndex | 当前选中的索引 | number | 0 |
-| onClose | 关闭回调 | () => void | - |
-| className | 自定义样式类名 | string | - |
-#### MediaItem
-| 参数 | 说明 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| type | 媒体类型 | 'image' \| 'video' | - |
-| src | 媒体资源地址 | string | - |
-| alt | 媒体替代文本 | string | - |
 <DemoTitle title="Image" desc="可预览的图片">
 #### API
@@ -2147,13 +2122,6 @@ type TransformAction =
-<DemoTitle title="InputSearch" desc="带搜索按钮的输入框，用于搜索场景。">
-#### API
-<AntdApiRef url="https://ant.design/components/input-cn/#inputsearch"></AntdApiRef>
 <DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
 #### API
@@ -2200,22 +2168,226 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
-<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
+<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
 #### API
-<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
+<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
 ## antd API
 通用属性参考：[通用属性](/docs/react/common-props)
-### Form
+自 `antd@5.0.0` 版本开始提供该组件。
+### 共同的 API
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| colon | 配置 Form.Item 的  | boolean | true |  |
-| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
+| 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
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| 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
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| duration | 回到顶部所需时间（ms） | number | 450 |  |
+| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window |  |
+| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  |
+| onClick | 点击按钮的回调函数 | () => void | - |  |
+<DemoTitle title="Dropdown" desc="向下弹出的列表。">
+#### API
+<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+### Dropdown
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| 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 |
+### Dropdown.Button
+属性与 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 | - |  |
+## 注意
+请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+## antd API
+### 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 }) | -   |  |
+更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
+### ItemType
+type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
+#### MenuItemType
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| danger | 展示错误状态样式 | boolean | false |  |
+| disabled | 是否禁用 | boolean | false |  |
+| extra | 额外节点 | ReactNode | - | 5.21.0 |
+| icon | 菜单图标 | ReactNode | - |  |
+| key | item 的唯一标志 | string | - |  |
+| label | 菜单项标题 | ReactNode | - |  |
+| title | 设置收缩时展示的悬浮标题 | string | - |  |
+#### SubMenuType
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| children | 子菜单的菜单项 |  | - |  |
+| disabled | 是否禁用 | boolean | false |  |
+| icon | 菜单图标 | ReactNode | - |  |
+| key | 唯一标志 | string | - |  |
+| label | 菜单项标题 | ReactNode | - |  |
+| popupClassName | 子菜单样式， | string | - |  |
+| popupOffset | 子菜单偏移量， | [number, number] | - |  |
+| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
+| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - |  |
+#### MenuItemGroupType
+定义类型为 `group` 时，会作为分组处理:
+```ts
+const groupItem = {
+  type: 'group', // Must have
+  label: 'My Group',
+  children: [],
+};
+```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| children | 分组的菜单项 |  | - |  |
+| label | 分组标题 | ReactNode | - |  |
+#### MenuDividerType
+菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
+```ts
+const dividerItem = {
+  type: 'divider', // Must have
+};
+```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| dashed | 是否虚线 | boolean | false |  |
+<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
+#### API
+<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+### Form
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| colon | 配置 Form.Item 的  | boolean | true |  |
+| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
 | component | 设置 Form 渲染元素，为  | ComponentType \| false | form |  |
 | fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 |  | - |  |
 | form | 经  |  | - |  |
@@ -2760,89 +2932,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
-<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
-#### API
-##### FileIcon Props
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| src |  | string |  |
-| image |  | string |  |
-| type |  | string | (必填) |
-| size |  | number |  |
-| style |  | React.CSSProperties |  |
-##### FileCard Props
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| iconSize |  | number |  |
-| src |  | string |  |
-| type |  | string | (必填) |
-| name |  | string | (必填) |
-| desc |  | string |  |
-| size |  | number |  |
-| width |  | React.CSSProperties['width'] |  |
-| children |  | React.ReactNode |  |
-<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
-#### API
-<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-自 `antd@5.0.0` 版本开始提供该组件。
-### 共同的 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
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| 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
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| duration | 回到顶部所需时间（ms） | number | 450 |  |
-| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window |  |
-| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  |
-| onClick | 点击按钮的回调函数 | () => void | - |  |
 <DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
 ## API
@@ -2887,157 +2976,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
-<DemoTitle title="Dropdown" desc="向下弹出的列表。">
-#### API
-<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-### Dropdown
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| 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 |
-### Dropdown.Button
-属性与 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 | - |  |
-## 注意
-请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
-## antd API
-### 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 }) | -   |  |
-更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
-### ItemType
-type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
-#### MenuItemType
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| danger | 展示错误状态样式 | boolean | false |  |
-| disabled | 是否禁用 | boolean | false |  |
-| extra | 额外节点 | ReactNode | - | 5.21.0 |
-| icon | 菜单图标 | ReactNode | - |  |
-| key | item 的唯一标志 | string | - |  |
-| label | 菜单项标题 | ReactNode | - |  |
-| title | 设置收缩时展示的悬浮标题 | string | - |  |
-#### SubMenuType
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| children | 子菜单的菜单项 |  | - |  |
-| disabled | 是否禁用 | boolean | false |  |
-| icon | 菜单图标 | ReactNode | - |  |
-| key | 唯一标志 | string | - |  |
-| label | 菜单项标题 | ReactNode | - |  |
-| popupClassName | 子菜单样式， | string | - |  |
-| popupOffset | 子菜单偏移量， | [number, number] | - |  |
-| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
-| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - |  |
-#### MenuItemGroupType
-定义类型为 `group` 时，会作为分组处理:
-```ts
-const groupItem = {
-  type: 'group', // Must have
-  label: 'My Group',
-  children: [],
-};
-```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| children | 分组的菜单项 |  | - |  |
-| label | 分组标题 | ReactNode | - |  |
-#### MenuDividerType
-菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
-```ts
-const dividerItem = {
-  type: 'divider', // Must have
-};
-```
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| dashed | 是否虚线 | boolean | false |  |
 <DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
 #### API
@@ -3121,100 +3059,42 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | 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 |
-### DescriptionItem
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| label | 内容的描述 | ReactNode | - |  |
-| span | 包含列的数量（ | number\|  | 1 | screens: 5.9.0 |
-span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
-<DemoTitle title="CollapsePanel" desc="折叠面板">
-#### API
-| 属性名 | 描述 | 类型 | 默认值 |
-|--------|--------|--------|--------|
-| 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
-通用属性参考：[通用属性](/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 |
+| layout | 描述布局 | horizontal | horizontal |  |
+| size | 设置列表的大小。可以设置为  | default | - |  |
+| title | 描述列表的标题，显示在最顶部 | ReactNode | - |  |
+| classNames | 语义化结构 class |  | - | 5.23.0 |
+| styles | 语义化结构 style |  | - | 5.23.0 |
-### ItemType
+### DescriptionItem
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |--------|--------|--------|--------|--------|
-| 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
+| label | 内容的描述 | ReactNode | - |  |
+| span | 包含列的数量（ | number\|  | 1 | screens: 5.9.0 |
-<!-- 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 |  |
+span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
-<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
@@ -3491,18 +3371,75 @@ export type FormatType =
+<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="CodeBlock" desc="代码块">
 #### API
 | 属性名 | 描述 | 类型 | 默认值 |
 |--------|--------|--------|--------|
 | language | 语言 | string \| string[] | (必填) |
-| value | 值 | string |  |
+| value | 值 | string | (必填) |
 | className | 类名 | string |  |
 | theme | 主题 | 'dark' \| 'light' |  |
 | readOnly | 只读 | boolean |  |
-| onChange |  | (value?: string) => void |  |
-| extensions | 扩展 | Extension[] | [] |
+| onChange |  | (value: string) => void |  |
@@ -3696,6 +3633,54 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
+<DemoTitle title="Audio" desc="音频展示">
+#### API
+ApiParser解析结果为空
+<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
+#### API
+<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+### Avatar
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| alt | 图像无法显示时的替代文本 | string | - |  |
+| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
+| icon | 设置头像的自定义图标 | ReactNode | - |  |
+| shape | 指定头像的形状 | circle | circle |  |
+| size | 设置头像的大小 | number \|  | default | 4.7.0 |
+| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
+| srcSet | 设置图片类头像响应式资源地址 | string | - |  |
+| draggable | 图片是否允许拖动 | boolean \|  | true |  |
+| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
+| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
+Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
+### Avatar.Group <Badge>4.5.0+</Badge>
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
+| size | 设置头像的大小 | number \|  | default | 4.8.0 |
+| shape | 设置头像的形状 | circle | circle | 5.8.0 |
 <DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
 #### API
@@ -3810,108 +3795,7 @@ function itemRender(currentRoute, params, items, paths) {
 }
 return <Breadcrumb itemRender={itemRender} items={items} />;
-```
-<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
-#### API
-<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-### Avatar
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| alt | 图像无法显示时的替代文本 | string | - |  |
-| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
-| icon | 设置头像的自定义图标 | ReactNode | - |  |
-| shape | 指定头像的形状 | circle | circle |  |
-| size | 设置头像的大小 | number \|  | default | 4.7.0 |
-| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
-| srcSet | 设置图片类头像响应式资源地址 | string | - |  |
-| draggable | 图片是否允许拖动 | boolean \|  | true |  |
-| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
-| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
-Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
-### Avatar.Group <Badge>4.5.0+</Badge>
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
-| size | 设置头像的大小 | number \|  | default | 4.8.0 |
-| shape | 设置头像的形状 | circle | circle | 5.8.0 |
-<DemoTitle title="Audio" desc="音频展示">
-#### API
-ApiParser解析结果为空
-<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
-#### API
-<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
-## antd API
-通用属性参考：[通用属性](/docs/react/common-props)
-### Anchor Props
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
-| bounds | 锚点区域边界 | number | 5 |  |
-| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |
-| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - |  |
-| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
-| showInkInFixed | affix={false} | boolean | false |  |
-| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - |  |
-| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - |  |
-| onClick | click | (e: MouseEvent, link: object) => void | - |  |
-| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[]  | - | 5.1.0 |
-| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
-| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
-### AnchorItem
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| key | 唯一标志 | string \| number | - |  |
-| href | 锚点链接 | string | - |  |
-| target | 该属性指定在何处显示链接的资源 | string | - |  |
-| title | 文字内容 | ReactNode | - |  |
-| children | 嵌套的 Anchor Link， |  | - |  |
-| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
-### Link Props
-建议使用 items 形式。
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-|--------|--------|--------|--------|--------|
-| href | 锚点链接 | string | - |  |
-| target | 该属性指定在何处显示链接的资源 | string | - |  |
-| title | 文字内容 | ReactNode | - |  |
+```
@@ -4089,6 +3973,270 @@ const confirmed = await modal.confirm({ ... });
+<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
+#### API
+<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
+## antd API
+通用属性参考：[通用属性](/docs/react/common-props)
+### Anchor Props
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
+| bounds | 锚点区域边界 | number | 5 |  |
+| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |
+| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - |  |
+| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
+| showInkInFixed | affix={false} | boolean | false |  |
+| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - |  |
+| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - |  |
+| onClick | click | (e: MouseEvent, link: object) => void | - |  |
+| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[]  | - | 5.1.0 |
+| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
+| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
+### AnchorItem
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| key | 唯一标志 | string \| number | - |  |
+| href | 锚点链接 | string | - |  |
+| target | 该属性指定在何处显示链接的资源 | string | - |  |
+| title | 文字内容 | ReactNode | - |  |
+| children | 嵌套的 Anchor Link， |  | - |  |
+| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
+### Link Props
+建议使用 items 形式。
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|--------|--------|--------|--------|--------|
+| href | 锚点链接 | string | - |  |
+| target | 该属性指定在何处显示链接的资源 | string | - |  |
+| title | 文字内容 | ReactNode | - |  |
+## 内置主题
+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 的最佳体验。
+<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 访问我们的项目。
+# 使用
+如果您有自己的 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;
+```
+# 使用
+```tsx
+import { SparkLoadingLine } from '@agentscope-ai/icons';
+export default () => {
+  return (
+    <SparkLoadingLine
+      className="your-class-name"
+      style={{ color: 'var(--sps-color-primary)' }}
+      spin
+      size={48}
+    />
+  );
+};
+```
+基本用法
+访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
 <DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
 #### API
@@ -4123,335 +4271,728 @@ const confirmed = await modal.confirm({ ... });
-# 使用
+# 从零开始使用
+## 📦 安装
-```tsx
-import { SparkLoadingLine } from '@agentscope-ai/icons';
+```bash
+$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
+```
-export default () => {
+## 🔨 使用
+```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 (
-    <SparkLoadingLine
-      className="your-class-name"
-      style={{ color: 'var(--sps-color-primary)' }}
-      spin
-      size={48}
-    />
+    <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;
 ```
-基本用法
-访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
+# 从 Antd 迁移
-# Icon Library
+## 📦 安装
+```bash
+$ npm install @agentscope-ai/icons @agentscope-ai/design --save
+```
-```tsx
-import React, { useEffect, useMemo, useState } from 'react';
-import * as SparkIcons from '@agentscope-ai/icons';
-import { Input, Radio, message, copy } from '@agentscope-ai/design';
-import { createStyles } from 'antd-style';
-import { useLocale } from 'dumi';
-import { SparkSearchLine } from '@agentscope-ai/icons';
-import { categorizeIcon, ICON_CATEGORIES } from './iconCategories';
-import $i18n from '@/i18n';
-/**
- * Icons Library
- * - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
- * - 支持搜索、点击复制
- */
-interface IconItem {
-  /** 图标导出名称 */
-  name: string;
-  /** 图标 React 组件 */
-  Icon: React.ComponentType<any>;
-  /** 图标分类 */
-  category: string;
-}
-type CopyMode = 'name' | 'import' | 'jsx';
+## 🔨 使用
-const useStyles = createStyles(() => ({
-  container: {
-    position: 'relative',
-    padding: 16,
-    paddingTop: 72,
-  },
-  toolbar: {
-    position: 'fixed',
-    width: '100%',
-    padding: '16px',
-    top: 0,
-    left: 0,
-    display: 'flex',
-    gap: 12,
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    flexWrap: 'wrap',
-    background: 'var(--sps-color-bg-base)',
-    borderBottom: '1px solid var(--sps-color-border-secondary)',
-    marginBottom: '16px',
-  },
-  toolbarLeft: {
-    display: 'flex',
-    gap: 12,
-    alignItems: 'center',
-  },
-  toolbarRight: {
-    display: 'flex',
-    gap: 12,
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    flexWrap: 'wrap',
-  },
-  search: {
-    maxWidth: 300,
-  },
-  count: {
-    color: 'var(--sps-color-text-tertiary)',
-    fontSize: 12,
-  },
-  groups: {
-    marginTop: 16,
-    display: 'flex',
-    flexDirection: 'column',
-    gap: 24,
-  },
-  groupTitle: {
-    fontSize: 14,
-    fontWeight: 600,
-    color: 'var(--sps-color-text-base)',
-    marginBottom: 12,
-  },
-  groupCount: {
-    marginLeft: 8,
-    fontSize: 12,
-    fontWeight: 400,
-    color: 'var(--sps-color-text-tertiary)',
-  },
-  grid: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
-    gap: 12,
-  },
-  card: {
-    padding: 12,
-    borderRadius: 8,
-    cursor: 'pointer',
-    border: '1px solid var(--sps-color-border-secondary)',
-    background: 'var(--sps-color-bg-base)',
-  },
-  iconWrap: {
-    width: 48,
-    height: 48,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  name: {
-    marginTop: 8,
-    fontSize: 12,
-    lineHeight: '16px',
-    color: 'var(--sps-color-text-tertiary)',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    width: '100%',
-    fontFamily:
-      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
-  },
-}));
+从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
-export default function IconLibrary() {
-  const { styles } = useStyles();
-  const locale = useLocale();
-  const [keyword, setKeyword] = useState<string>('');
-  const [copyMode, setCopyMode] = useState<CopyMode>('name');
-  useEffect(() => {
-    // 同步 dumi 站点语言到 $i18n（$i18n 识别 zh-cn / en）
-    $i18n.updateLocale(locale.id === 'zh-CN' ? 'zh-cn' : 'en');
-  }, [locale.id]);
-  const excludedIcons = useMemo(
-    () =>
-      new Set([
-        'SparkDelete01LineCopy',
-        'SparkA2d2dFill',
-        'SparkA3d3dFill',
-        'SparkBoldLine1',
-        'SparkShanguangdengweikaiqiFlashlightOffLine',
-        'SparkZhinengshengchengAiGenerateLine',
-        'SparkQqkongjianQzoneFill',
-        'SparkAccountManagementFill',
-      ]),
-    [],
+```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>
   );
+};
-  const allIcons = useMemo<IconItem[]>(() => {
-    return Object.entries(SparkIcons)
-      .filter(([name, Icon]) => {
-        if (!name.startsWith('Spark')) return false;
-        if (excludedIcons.has(name)) return false;
-        return typeof Icon === 'function';
-      })
-      .map(([name, Icon]) => ({
-        name,
-        Icon: Icon as React.ComponentType<any>,
-        category: categorizeIcon(name),
-      }))
-      .sort((a, b) => a.name.localeCompare(b.name));
-  }, [excludedIcons]);
-  const filteredIcons = useMemo<IconItem[]>(() => {
-    const q = keyword.trim().toLowerCase();
-    if (!q) return allIcons;
-    return allIcons.filter((item) => item.name.toLowerCase().includes(q));
-  }, [allIcons, keyword]);
-  const groupedIcons = useMemo<Record<string, IconItem[]>>(() => {
-    return filteredIcons.reduce<Record<string, IconItem[]>>((acc, icon) => {
-      const key = icon.category;
-      if (!acc[key]) acc[key] = [];
-      acc[key].push(icon);
-      return acc;
-    }, {});
-  }, [filteredIcons]);
-  const orderedCategories = useMemo<string[]>(() => {
-    const configOrder = Object.keys(ICON_CATEGORIES);
-    const existing = new Set(Object.keys(groupedIcons));
-    const ordered = configOrder.filter((k) => existing.has(k));
-    const rest = Object.keys(groupedIcons)
-      .filter((k) => !configOrder.includes(k))
-      .sort((a, b) => a.localeCompare(b));
-    return [...ordered, ...rest];
-  }, [groupedIcons]);
-  const handleCopy = (item: IconItem) => {
-    let text = item.name;
-    if (copyMode === 'import') {
-      text = `import { ${item.name} } from '@agentscope-ai/icons';`;
-    }
-    if (copyMode === 'jsx') {
-      text = `<${item.name} style={{ fontSize: 24 }} />`;
-    }
+export default App;
+```
+如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
-    copy(text);
-    message.success(
-      $i18n.get({
-        id: 'docs.icons.IconLibrary.CopySuccess',
-        dm: '已复制',
-      }),
-    );
-  };
+```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 (
-    <div className={styles.container}>
-      <div className={styles.toolbar}>
-        <div className={styles.toolbarLeft}>
-          <Input
-            placeholder={$i18n.get({
-              id: 'docs.icons.IconLibrary.SearchPlaceholder',
-              dm: '搜索图标（按导出名）',
-            })}
-            value={keyword}
-            onChange={(e) => setKeyword((e?.target as any)?.value || '')}
-            className={styles.search}
-            prefix={<SparkSearchLine style={{ fontSize: 16 }} />}
-            allowClear
+    <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>
-        <div className={styles.toolbarRight}>
-          <div className={styles.count}>
-            {$i18n.get(
-              {
-                id: 'docs.icons.IconLibrary.TotalCount',
-                dm: '共 {count} 个',
-              },
-              { count: String(filteredIcons.length) },
-            )}
+          <div
+            style={{
+              color: `var(--${prefix}-ant-color-text-base)`,
+              fontSize: '24px',
+              textAlign: 'center',
+            }}
+          >
+            Hello Spark Design!
           </div>
-          <Radio.Group
-            value={copyMode}
-            onChange={(e) => setCopyMode(e.target.value)}
-            optionType="button"
-            buttonStyle="solid"
-            options={[
-              {
-                label: $i18n.get({
-                  id: 'docs.icons.IconLibrary.CopyName',
-                  dm: '复制名称',
-                }),
-                value: 'name',
-              },
-              {
-                label: $i18n.get({
-                  id: 'docs.icons.IconLibrary.CopyImport',
-                  dm: '复制 import',
-                }),
-                value: 'import',
-              },
-              {
-                label: $i18n.get({
-                  id: 'docs.icons.IconLibrary.CopyJSX',
-                  dm: '复制 JSX',
-                }),
-                value: 'jsx',
-              },
-            ]}
-          />
-        </div>
-      </div>
-      <div className={styles.groups}>
-        {orderedCategories.map((category) => {
-          const list = groupedIcons[category] || [];
-          return (
-            <div key={category}>
-              <div className={styles.groupTitle}>
-                {category}
-                <span className={styles.groupCount}>({list.length})</span>
-              </div>
-              <div className={styles.grid}>
-                {list.map((item) => {
-                  const Icon = item.Icon;
-                  return (
-                    <div
-                      key={item.name}
-                      className={styles.card}
-                      onClick={() => handleCopy(item)}
-                    >
-                      <div className={styles.iconWrap}>
-                        <Icon style={{ fontSize: 24 }} />
-                      </div>
-                      <div className={styles.name} title={item.name}>
-                        {item.name}
-                      </div>
-                    </div>
-                  );
-                })}
-              </div>
-            </div>
-          );
-        })}
+          <Button
+            type="primary"
+            onClick={() => {
+              setColorMode(colorMode === 'light' ? 'dark' : 'light');
+            }}
+            icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
+          >
+            {colorMode === 'light' ? '暗色' : '亮色'} 模式
+          </Button>
+        </Flex>
       </div>
-    </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": "#000000",
+  "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 在最左侧与最右侧不超出滑动轨道宽度
+# 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，帮助您高效率还原视觉稿