chore: Update migrate script

2024-11-24 11:10:01 +08:00 · 2022-10-18 11:22:22 +08:00 · 2022-10-18 11:22:22 +08:00 · 32af35c7bf
commit 32af35c7bf
parent d0b1bf0a89
129 changed files with 142 additions and 2134 deletions
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@ -1,12 +1,8 @@
 ---
 category: Components
+type: Navigation
 title: Affix
 cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
-demo:
-  cols: 2
-group:
-  title: Navigation
-  order: 3
 demo:
  cols: 2
 ---
@ -26,13 +22,6 @@ Please note that Affix should not cover other content on the page, especially wh
 <code src="./demo/target.tsx">Container to scroll.</code>
 <code src="./demo/debug.tsx">debug</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/on-change.tsx">Callback</code>
-<code src="./demo/target.tsx">Container to scroll.</code>
-<code src="./demo/debug.tsx">debug</code>
-
 ## API

 | Property     | Description                                        | Type                        | Default      |
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@ -1,13 +1,9 @@
 ---
 category: Components
 subtitle: 固钉
+type: 导航
 title: Affix
 cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
-demo:
-  cols: 2
-group:
-  title: 导航
-  order: 3
 demo:
  cols: 2
 ---
@ -27,13 +23,6 @@ demo:
 <code src="./demo/target.tsx">滚动容器</code>
 <code src="./demo/debug.tsx">调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/on-change.tsx">固定状态改变的回调</code>
-<code src="./demo/target.tsx">滚动容器</code>
-<code src="./demo/debug.tsx">调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
-
 ## API

 | 成员         | 说明                                                                   | 类型                        | 默认值       |
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -1,12 +1,8 @@
 ---
 category: Components
+type: Feedback
 title: Alert
 cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
-demo:
-  cols: 2
-group:
-  title: Feedback
-  order: 6
 demo:
  cols: 2
 ---
@ -33,21 +29,6 @@ Alert component for feedback.
 <code src="./demo/custom-icon.tsx">Custom Icon</code>
 <code src="./demo/action.tsx">Custom action</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/style.tsx">More types</code>
-<code src="./demo/closable.tsx">Closable</code>
-<code src="./demo/description.tsx">Description</code>
-<code src="./demo/icon.tsx">Icon</code>
-<code src="./demo/close-text.tsx">Customized Close Text</code>
-<code src="./demo/banner.tsx">Banner</code>
-<code src="./demo/loop-banner.tsx">Loop Banner</code>
-<code src="./demo/smooth-closed.tsx">Smoothly Unmount</code>
-<code src="./demo/error-boundary.tsx">ErrorBoundary</code>
-<code src="./demo/custom-icon.tsx">Custom Icon</code>
-<code src="./demo/action.tsx">Custom action</code>
-
 ## API

 | Property    | Description                                                          | Type                    | Default                                       | Version |
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@ -1,13 +1,9 @@
 ---
 category: Components
 subtitle: 警告提示
+type: 反馈
 title: Alert
 cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
-demo:
-  cols: 2
-group:
-  title: 反馈
-  order: 6
 demo:
  cols: 2
 ---
@ -34,21 +30,6 @@ demo:
 <code src="./demo/custom-icon.tsx">自定义图标</code>
 <code src="./demo/action.tsx">操作</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/style.tsx">四种样式</code>
-<code src="./demo/closable.tsx">可关闭的警告提示</code>
-<code src="./demo/description.tsx">含有辅助性文字介绍</code>
-<code src="./demo/icon.tsx">图标</code>
-<code src="./demo/close-text.tsx">自定义关闭</code>
-<code src="./demo/banner.tsx">顶部公告</code>
-<code src="./demo/loop-banner.tsx">轮播的公告</code>
-<code src="./demo/smooth-closed.tsx">平滑地卸载</code>
-<code src="./demo/error-boundary.tsx">React 错误处理</code>
-<code src="./demo/custom-icon.tsx">自定义图标</code>
-<code src="./demo/action.tsx">操作</code>
-
 ## API

 | 参数        | 说明                                                                 | 类型                    | 默认值                                    | 版本   |
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -1,11 +1,9 @@
 ---
 category: Components
+type: Other
 cols: 2
 title: Anchor
 cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
-group:
-  title: Other
-  order: 7
 ---

 Hyperlinks to scroll on one page.
@ -23,15 +21,6 @@ For displaying anchor hyperlinks on page and jumping between them.
 <code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
 <code src="./demo/onChange.tsx">Listening for anchor link change</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/static.tsx">Static Anchor</code>
-<code src="./demo/onClick.tsx">Customize the onClick event</code>
-<code src="./demo/customizeHighlight.tsx">Customize the anchor highlight</code>
-<code src="./demo/targetOffset.tsx">Set Anchor scroll offset</code>
-<code src="./demo/onChange.tsx">Listening for anchor link change</code>
-
 ## API

 ### Anchor Props
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -2,11 +2,9 @@
 category: Components
 subtitle: 锚点
 cols: 2
+type: 其他
 title: Anchor
 cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
-group:
-  title: 其他
-  order: 7
 ---

 用于跳转到页面指定位置。
@ -24,15 +22,6 @@ group:
 <code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
 <code src="./demo/onChange.tsx">监听锚点链接改变</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/static.tsx">静态位置</code>
-<code src="./demo/onClick.tsx">自定义 onClick 事件</code>
-<code src="./demo/customizeHighlight.tsx">自定义锚点高亮</code>
-<code src="./demo/targetOffset.tsx">设置锚点滚动偏移量</code>
-<code src="./demo/onChange.tsx">监听锚点链接改变</code>
-
 ## API

 ### Anchor Props
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -1,11 +1,9 @@
 ---
 category: Components
+type: Data Entry
 cols: 2
 title: AutoComplete
 cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
-group:
-  title: Data Entry
-  order: 4
 ---

 Autocomplete function of input field.
@ -32,18 +30,6 @@ The differences with Select are:
 <code src="./demo/form-debug.tsx">Debug in Form</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/options.tsx">Customized</code>
-<code src="./demo/custom.tsx">Customize Input Component</code>
-<code src="./demo/non-case-sensitive.tsx">Non-case-sensitive AutoComplete</code>
-<code src="./demo/certain-category.tsx">Lookup-Patterns - Certain Category</code>
-<code src="./demo/uncertain-category.tsx">Lookup-Patterns - Uncertain Category</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/form-debug.tsx">Debug in Form</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | Property                               | Description                                                                                                                                                                                                                                                 | Type                                                                               | Default      | Version |
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -1,12 +1,10 @@
 ---
 category: Components
 subtitle: 自动完成
+type: 数据录入
 cols: 2
 title: AutoComplete
 cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
-group:
-  title: 数据录入
-  order: 4
 ---

 输入框自动完成功能。
@ -33,18 +31,6 @@ group:
 <code src="./demo/form-debug.tsx">在 Form 中 Debug</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/options.tsx">自定义选项</code>
-<code src="./demo/custom.tsx">自定义输入组件</code>
-<code src="./demo/non-case-sensitive.tsx">不区分大小写</code>
-<code src="./demo/certain-category.tsx">查询模式 - 确定类目</code>
-<code src="./demo/uncertain-category.tsx">查询模式 - 不确定类目</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/form-debug.tsx">在 Form 中 Debug</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | 参数                        | 说明                                                                                                                                            | 类型                                                                               | 默认值              | 版本   |
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -1,12 +1,8 @@
 ---
 category: Components
+type: Data Display
 title: Avatar
 cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
-demo:
-  cols: 2
-group:
-  title: Data Display
-  order: 5
 demo:
  cols: 2
 ---
@ -24,17 +20,6 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 <code src="./demo/responsive.tsx">Responsive Size</code>
 <code src="./demo/fallback.tsx">Fallback</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/type.tsx">Type</code>
-<code src="./demo/dynamic.tsx">Autoset Font Size</code>
-<code src="./demo/badge.tsx">With Badge</code>
-<code src="./demo/group.tsx">Avatar.Group</code>
-<code src="./demo/toggle-debug.tsx">Calculate text style when hiding</code>
-<code src="./demo/responsive.tsx">Responsive Size</code>
-<code src="./demo/fallback.tsx">Fallback</code>
-
 ## API

 ### Avatar
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -1,13 +1,9 @@
 ---
 category: Components
 subtitle: 头像
+type: 数据展示
 title: Avatar
 cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
-demo:
-  cols: 2
-group:
-  title: 数据展示
-  order: 5
 demo:
  cols: 2
 ---
@ -29,17 +25,6 @@ demo:
 <code src="./demo/responsive.tsx">响应式尺寸</code>
 <code src="./demo/fallback.tsx">图片不存在时</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/type.tsx">类型</code>
-<code src="./demo/dynamic.tsx">自动调整字符大小</code>
-<code src="./demo/badge.tsx">带徽标的头像</code>
-<code src="./demo/group.tsx">Avatar.Group</code>
-<code src="./demo/toggle-debug.tsx">隐藏情况下计算字符对齐</code>
-<code src="./demo/responsive.tsx">响应式尺寸</code>
-<code src="./demo/fallback.tsx">图片不存在时</code>
-
 ## API

 ### Avatar
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@ -1,11 +1,8 @@
 ---
 category: Components
+type: Other
 title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
-demo:
-  cols: 2
-group: Other
-order: 1
 demo:
  cols: 2
 ---
@ -22,11 +19,6 @@ demo:
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/custom.tsx">Custom style</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/custom.tsx">Custom style</code>
-
 ## API

 > The distance to the bottom is set to `50px` by default, which is overridable.
--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
+type: 其他
 subtitle: 回到顶部
 title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
-demo:
-  cols: 2
-group: 其他
 demo:
  cols: 2
 ---
@ -22,11 +20,6 @@ demo:
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/custom.tsx">自定义样式</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/custom.tsx">自定义样式</code>
-
 ## API

 > 有默认样式，距离底部 `50px`，可覆盖。
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
+type: Data Display
 title: Badge
 cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
-demo:
-  cols: 2
-group: Data Display
 demo:
  cols: 2
 ---
@ -17,23 +15,6 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca

 ## Examples

-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/no-wrapper.tsx">Standalone</code>
-<code src="./demo/overflow.tsx">Overflow Count</code>
-<code src="./demo/dot.tsx">Red badge</code>
-<code src="./demo/change.tsx">Dynamic</code>
-<code src="./demo/link.tsx">Clickable</code>
-<code src="./demo/offset.tsx">Offset</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/colorful.tsx">Colorful Badge</code>
-<code src="./demo/ribbbon.tsx">Ribbon</code>
-<code src="./demo/ribbon-debug.tsx">Ribbon Debug</code>
-<code src="./demo/mix.tsx">Mixed usage</code>
-<code src="./demo/title.tsx">Title</code>
-
-## Examples
-
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/no-wrapper.tsx">Standalone</code>
 <code src="./demo/overflow.tsx">Overflow Count</code>
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 徽标数
+type: 数据展示
 title: Badge
 cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
-demo:
-  cols: 2
-group: 数据展示
 demo:
  cols: 2
 ---
@ -18,23 +16,6 @@ demo:

 ## 代码演示

-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/no-wrapper.tsx">独立使用</code>
-<code src="./demo/overflow.tsx">封顶数字</code>
-<code src="./demo/dot.tsx">讨嫌的小红点</code>
-<code src="./demo/change.tsx">动态</code>
-<code src="./demo/link.tsx">可点击</code>
-<code src="./demo/offset.tsx">自定义位置偏移</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/status.tsx">状态点</code>
-<code src="./demo/colorful.tsx">多彩徽标</code>
-<code src="./demo/ribbbon.tsx">缎带</code>
-<code src="./demo/ribbon-debug.tsx">Ribbon Debug</code>
-<code src="./demo/mix.tsx">各种混用的情况</code>
-<code src="./demo/title.tsx">自定义标题</code>
-
-## 代码演示
-
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/no-wrapper.tsx">独立使用</code>
 <code src="./demo/overflow.tsx">封顶数字</code>
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Breadcrumb
 cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -26,15 +24,6 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 <code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
 <code src="./demo/separator-component.tsx">Configuring the Separator</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/withIcon.tsx">With an Icon</code>
-<code src="./demo/react-router.tsx">react-router V6</code>
-<code src="./demo/separator.tsx">Configuring the Separator</code>
-<code src="./demo/overlay.tsx">Bread crumbs with drop down menu</code>
-<code src="./demo/separator-component.tsx">Configuring the Separator</code>
-
 ## API

 ### Breadcrumb
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 面包屑
-group: 导航
+type: 导航
 title: Breadcrumb
 cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -27,15 +25,6 @@ demo:
 <code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
 <code src="./demo/separator-component.tsx">分隔符</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/withIcon.tsx">带有图标的</code>
-<code src="./demo/react-router.tsx">react-router V6</code>
-<code src="./demo/separator.tsx">分隔符</code>
-<code src="./demo/overlay.tsx">带下拉菜单的面包屑</code>
-<code src="./demo/separator-component.tsx">分隔符</code>
-
 ## API

 ### Breadcrumb
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -1,12 +1,8 @@
 ---
 category: Components
+type: General
 title: Button
 cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
-demo:
-  cols: 2
-group:
-  title: General
-  order: 1
 demo:
  cols: 2
 ---
@ -46,20 +42,6 @@ And 4 other properties additionally.
 <code src="./demo/legacy-group.tsx">Deprecated Button Group</code>
 <code src="./demo/chinese-chars-loading.tsx">Loading style bug</code>

-## Examples
-
-<code src="./demo/basic.tsx">Type</code>
-<code src="./demo/icon.tsx">Icon</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/loading.tsx">Loading</code>
-<code src="./demo/multiple.tsx">Multiple Buttons</code>
-<code src="./demo/ghost.tsx">Ghost Button</code>
-<code src="./demo/danger.tsx">Danger Buttons</code>
-<code src="./demo/block.tsx">Block Button</code>
-<code src="./demo/legacy-group.tsx">Deprecated Button Group</code>
-<code src="./demo/chinese-chars-loading.tsx">Loading style bug</code>
-
 ## API

 Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -1,13 +1,9 @@
 ---
 category: Components
+type: 通用
 title: Button
 subtitle: 按钮
 cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
-demo:
-  cols: 2
-group:
-  title: 通用
-  order: 1
 demo:
  cols: 2
 ---
@ -49,20 +45,6 @@ demo:
 <code src="./demo/legacy-group.tsx">废弃的 Block 组</code>
 <code src="./demo/chinese-chars-loading.tsx">加载中状态 bug 还原</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">按钮类型</code>
-<code src="./demo/icon.tsx">图标按钮</code>
-<code src="./demo/size.tsx">按钮尺寸</code>
-<code src="./demo/disabled.tsx">不可用状态</code>
-<code src="./demo/loading.tsx">加载中状态</code>
-<code src="./demo/multiple.tsx">多个按钮组合</code>
-<code src="./demo/ghost.tsx">幽灵按钮</code>
-<code src="./demo/danger.tsx">危险按钮</code>
-<code src="./demo/block.tsx">Block 按钮</code>
-<code src="./demo/legacy-group.tsx">废弃的 Block 组</code>
-<code src="./demo/chinese-chars-loading.tsx">加载中状态 bug 还原</code>
-
 ## API

 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Calendar
 cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
-demo:
-  cols: 2
 ---

 Container for displaying data in calendar form.
@ -21,14 +19,6 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 <code src="./demo/select.tsx">Selectable Calendar</code>
 <code src="./demo/customize-header.tsx">Customize Header</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/notice-calendar.tsx">Notice Calendar</code>
-<code src="./demo/card.tsx">Card</code>
-<code src="./demo/select.tsx">Selectable Calendar</code>
-<code src="./demo/customize-header.tsx">Customize Header</code>
-
 ## API

 **Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `dayjs` correctly.
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 subtitle: 日历
 title: Calendar
 cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
-demo:
-  cols: 2
 ---

 按照日历形式展示数据的容器。
@ -22,14 +20,6 @@ demo:
 <code src="./demo/select.tsx">选择功能</code>
 <code src="./demo/customize-header.tsx">自定义头部</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/notice-calendar.tsx">通知事项日历</code>
-<code src="./demo/card.tsx">卡片模式</code>
-<code src="./demo/select.tsx">选择功能</code>
-<code src="./demo/customize-header.tsx">自定义头部</code>
-
 ## API

 **注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 dayjs 的 locale。
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Card
 cover: https://gw.alipayobjects.com/zos/alicdn/keNB-R8Y9/Card.svg
-demo:
-  cols: 2
 ---

 Simple rectangular container.
@ -26,19 +24,6 @@ A card can be used to display content related to a single subject. The content c
 <code src="./demo/tabs.tsx">With tabs</code>
 <code src="./demo/meta.tsx">Support more content configuration</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic card</code>
-<code src="./demo/border-less.tsx">No border</code>
-<code src="./demo/simple.tsx">Simple card</code>
-<code src="./demo/flexible-content.tsx">Customized content</code>
-<code src="./demo/in-column.tsx">Card in column</code>
-<code src="./demo/loading.tsx">Loading card</code>
-<code src="./demo/grid-card.tsx">Grid card</code>
-<code src="./demo/inner.tsx">Inner card</code>
-<code src="./demo/tabs.tsx">With tabs</code>
-<code src="./demo/meta.tsx">Support more content configuration</code>
-
 ## API

 ```jsx
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Card
 subtitle: 卡片
 cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
-demo:
-  cols: 2
 ---

 通用卡片容器。
@ -27,19 +25,6 @@ demo:
 <code src="./demo/tabs.tsx">带页签的卡片</code>
 <code src="./demo/meta.tsx">支持更多内容配置</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">典型卡片</code>
-<code src="./demo/border-less.tsx">无边框</code>
-<code src="./demo/simple.tsx">简洁卡片</code>
-<code src="./demo/flexible-content.tsx">更灵活的内容展示</code>
-<code src="./demo/in-column.tsx">栅格卡片</code>
-<code src="./demo/loading.tsx">预加载的卡片</code>
-<code src="./demo/grid-card.tsx">网格型内嵌卡片</code>
-<code src="./demo/inner.tsx">内部卡片</code>
-<code src="./demo/tabs.tsx">带页签的卡片</code>
-<code src="./demo/meta.tsx">支持更多内容配置</code>
-
 ## API

 ```jsx
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Carousel
 cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -24,13 +22,6 @@ A carousel component. Scales with its container.
 <code src="./demo/autoplay.tsx">Scroll automatically</code>
 <code src="./demo/fade.tsx">Fade in</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/position.tsx">Position</code>
-<code src="./demo/autoplay.tsx">Scroll automatically</code>
-<code src="./demo/fade.tsx">Fade in</code>
-
 ## API

 | Property     | Description                                                                                    | Type                              | Default   | Version |
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Carousel
 subtitle: 走马灯
 cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -25,13 +23,6 @@ demo:
 <code src="./demo/autoplay.tsx">自动切换</code>
 <code src="./demo/fade.tsx">渐显</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/position.tsx">位置</code>
-<code src="./demo/autoplay.tsx">自动切换</code>
-<code src="./demo/fade.tsx">渐显</code>
-
 ## API

 | 参数         | 说明                                                                | 类型                              | 默认值    | 版本 |
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Cascader
 cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -38,27 +36,6 @@ Cascade selection box.
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/default-value.tsx">Default value</code>
-<code src="./demo/custom-trigger.tsx">Custom trigger</code>
-<code src="./demo/hover.tsx">Hover</code>
-<code src="./demo/disabled-option.tsx">Disabled option</code>
-<code src="./demo/change-on-select.tsx">Change on select</code>
-<code src="./demo/multiple.tsx">Multiple</code>
-<code src="./demo/showCheckedStrategy.tsx">ShowCheckedStrategy</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/custom-render.tsx">Custom render</code>
-<code src="./demo/search.tsx">Search</code>
-<code src="./demo/lazy.tsx">Load Options Lazily</code>
-<code src="./demo/fields-name.tsx">Custom Field Names</code>
-<code src="./demo/suffix.tsx">Custom Icons</code>
-<code src="./demo/custom-dropdown.tsx">Custom dropdown</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ```jsx
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据录入
+type: 数据录入
 title: Cascader
 subtitle: 级联选择
 cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -39,27 +37,6 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/default-value.tsx">默认值</code>
-<code src="./demo/custom-trigger.tsx">可以自定义显示</code>
-<code src="./demo/hover.tsx">移入展开</code>
-<code src="./demo/disabled-option.tsx">禁用选项</code>
-<code src="./demo/change-on-select.tsx">选择即改变</code>
-<code src="./demo/multiple.tsx">多选</code>
-<code src="./demo/showCheckedStrategy.tsx">自定义回填方式</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/custom-render.tsx">自定义已选项</code>
-<code src="./demo/search.tsx">搜索</code>
-<code src="./demo/lazy.tsx">动态加载选项</code>
-<code src="./demo/fields-name.tsx">自定义字段名</code>
-<code src="./demo/suffix.tsx">自定义图标</code>
-<code src="./demo/custom-dropdown.tsx">扩展菜单</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ```jsx
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Checkbox
 cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -26,16 +24,6 @@ Checkbox component.
 <code src="./demo/layout.tsx">Use with Grid</code>
 <code src="./demo/debug-line.tsx">Same line</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/controller.tsx">Controlled Checkbox</code>
-<code src="./demo/group.tsx">Checkbox Group</code>
-<code src="./demo/check-all.tsx">Check all</code>
-<code src="./demo/layout.tsx">Use with Grid</code>
-<code src="./demo/debug-line.tsx">Same line</code>
-
 ## API

 ### Props
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 多选框
-group: 数据录入
+type: 数据录入
 title: Checkbox
 cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -27,16 +25,6 @@ demo:
 <code src="./demo/layout.tsx">布局</code>
 <code src="./demo/debug-line.tsx">同行布局</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/controller.tsx">受控的 Checkbox</code>
-<code src="./demo/group.tsx">Checkbox 组</code>
-<code src="./demo/check-all.tsx">全选</code>
-<code src="./demo/layout.tsx">布局</code>
-<code src="./demo/debug-line.tsx">同行布局</code>
-
 ## API

 ### 属性
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Collapse
 cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
-demo:
-  cols: 2
 ---

 A content area which can be collapsed and expanded.
@ -26,18 +24,6 @@ A content area which can be collapsed and expanded.
 <code src="./demo/ghost.tsx">Ghost Collapse</code>
 <code src="./demo/collapsible.tsx">Collapsible</code>

-## Examples
-
-<code src="./demo/basic.tsx">Collapse</code>
-<code src="./demo/accordion.tsx">Accordion</code>
-<code src="./demo/mix.tsx">Nested panel</code>
-<code src="./demo/borderless.tsx">Borderless</code>
-<code src="./demo/custom.tsx">Custom Panel</code>
-<code src="./demo/noarrow.tsx">No arrow</code>
-<code src="./demo/extra.tsx">Extra node</code>
-<code src="./demo/ghost.tsx">Ghost Collapse</code>
-<code src="./demo/collapsible.tsx">Collapsible</code>
-
 ## API

 ### Collapse
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: Collapse
 subtitle: 折叠面板
 cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
-demo:
-  cols: 2
 ---

 可以折叠/展开的内容区域。
@ -27,18 +25,6 @@ demo:
 <code src="./demo/ghost.tsx">幽灵折叠面板</code>
 <code src="./demo/collapsible.tsx">可折叠触发区域</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">折叠面板</code>
-<code src="./demo/accordion.tsx">手风琴</code>
-<code src="./demo/mix.tsx">面板嵌套</code>
-<code src="./demo/borderless.tsx">简洁风格</code>
-<code src="./demo/custom.tsx">自定义面板</code>
-<code src="./demo/noarrow.tsx">隐藏箭头</code>
-<code src="./demo/extra.tsx">额外节点</code>
-<code src="./demo/ghost.tsx">幽灵折叠面板</code>
-<code src="./demo/collapsible.tsx">可折叠触发区域</code>
-
 ## API

 ### Collapse
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Other
+type: Other
 title: ConfigProvider
 cover: https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg
-demo:
-  cols: 2
 ---

 `ConfigProvider` provides a uniform configuration support for components.
@ -43,14 +41,6 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 <code src="./demo/theme.tsx">Global Theme</code>
 <code src="./demo/prefixCls.tsx">prefixCls</code>

-## Examples
-
-<code src="./demo/locale.tsx">Locale</code>
-<code src="./demo/direction.tsx">Direction</code>
-<code src="./demo/size.tsx">Component size</code>
-<code src="./demo/theme.tsx">Global Theme</code>
-<code src="./demo/prefixCls.tsx">prefixCls</code>
-
 ## API

 | Property                 | Description                                                                                                                                                                                            | Type                                                                                                                | Default             | Version             |
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 全局化配置
-group: 其他
+type: 其他
 title: ConfigProvider
 cover: https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg
-demo:
-  cols: 2
 ---

 为组件提供统一的全局化配置。
@ -44,14 +42,6 @@ export default () => (
 <code src="./demo/theme.tsx">全局样式</code>
 <code src="./demo/prefixCls.tsx">前缀</code>

-## 代码演示
-
-<code src="./demo/locale.tsx">国际化</code>
-<code src="./demo/direction.tsx">方向</code>
-<code src="./demo/size.tsx">组件尺寸</code>
-<code src="./demo/theme.tsx">全局样式</code>
-<code src="./demo/prefixCls.tsx">前缀</code>
-
 ## API

 | 参数                     | 说明                                                                                                                                                                                                           | 类型                                                                                                                                | 默认值              | 版本                               |
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: DatePicker
 cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -17,28 +15,6 @@ By clicking the input box, you can select a date from a popup calendar.

 ## Examples

-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/range-picker.tsx">Range Picker</code>
-<code src="./demo/switchable.tsx">Switchable picker</code>
-<code src="./demo/format.tsx">Date Format</code>
-<code src="./demo/time.tsx">Choose Time</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/disabled-date.tsx">Disabled Date & Time</code>
-<code src="./demo/select-in-range.tsx">Select range dates in 7 days</code>
-<code src="./demo/presetted-ranges.tsx">Preset Ranges</code>
-<code src="./demo/extra-footer.tsx">Extra Footer</code>
-<code src="./demo/size.tsx">Three Sizes</code>
-<code src="./demo/date-render.tsx">Customized Date Rendering</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
-<code src="./demo/placement.tsx">Basic</code>
-<code src="./demo/mode.tsx">Controlled Panels</code>
-<code src="./demo/start-end.tsx">Customized Range Picker</code>
-<code src="./demo/suffix.tsx">Suffix</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## Examples
-
 <code src="./demo/basic.tsx">Basic</code>
 <code src="./demo/range-picker.tsx">Range Picker</code>
 <code src="./demo/switchable.tsx">Switchable picker</code>
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据录入
+type: 数据录入
 title: DatePicker
 subtitle: 日期选择框
 cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -18,28 +16,6 @@ demo:

 ## 代码演示

-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/range-picker.tsx">范围选择器</code>
-<code src="./demo/switchable.tsx">切换不同的选择器</code>
-<code src="./demo/format.tsx">日期格式</code>
-<code src="./demo/time.tsx">日期时间选择</code>
-<code src="./demo/disabled.tsx">禁用</code>
-<code src="./demo/disabled-date.tsx">不可选择日期和时间</code>
-<code src="./demo/select-in-range.tsx">选择不超过七天的范围</code>
-<code src="./demo/presetted-ranges.tsx">预设范围</code>
-<code src="./demo/extra-footer.tsx">额外的页脚</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/date-render.tsx">定制日期单元格</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/bordered.tsx">无边框</code>
-<code src="./demo/placement.tsx">基本</code>
-<code src="./demo/mode.tsx">受控面板</code>
-<code src="./demo/start-end.tsx">自定义日期范围选择</code>
-<code src="./demo/suffix.tsx">后缀图标</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## 代码演示
-
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/range-picker.tsx">范围选择器</code>
 <code src="./demo/switchable.tsx">切换不同的选择器</code>
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Descriptions
 cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
-demo:
-  cols: 2
 ---

 Display multiple read-only fields in groups.
@ -24,17 +22,6 @@ Commonly displayed on the details page.
 <code src="./demo/vertical-border.tsx">Vertical border</code>
 <code src="./demo/style.tsx">Customize label & wrapper style</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/border.tsx">border</code>
-<code src="./demo/text.tsx">border</code>
-<code src="./demo/size.tsx">Custom size</code>
-<code src="./demo/responsive.tsx">responsive</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/vertical-border.tsx">Vertical border</code>
-<code src="./demo/style.tsx">Customize label & wrapper style</code>
-
 ## API

 ### Descriptions
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 描述列表
-group: 数据展示
+type: 数据展示
 title: Descriptions
 cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
-demo:
-  cols: 2
 ---

 成组展示多个只读字段。
@ -25,17 +23,6 @@ demo:
 <code src="./demo/vertical-border.tsx">垂直带边框的</code>
 <code src="./demo/style.tsx">自定义 label & wrapper 样式</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/border.tsx">带边框的</code>
-<code src="./demo/text.tsx">复杂文本的情况</code>
-<code src="./demo/size.tsx">自定义尺寸</code>
-<code src="./demo/responsive.tsx">响应式</code>
-<code src="./demo/vertical.tsx">垂直</code>
-<code src="./demo/vertical-border.tsx">垂直带边框的</code>
-<code src="./demo/style.tsx">自定义 label & wrapper 样式</code>
-
 ## API

 ### Descriptions
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@ -1,12 +1,8 @@
 ---
 category: Components
+type: Layout
 title: Divider
 cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
-demo:
-  cols: 2
-group:
-  title: Layout
-  order: 2
 demo:
  cols: 2
 ---
@ -26,14 +22,6 @@ A divider line separates different content.
 <code src="./demo/vertical.tsx">Vertical</code>
 <code src="./demo/customize-style.tsx">Style Customization</code>

-## Examples
-
-<code src="./demo/horizontal.tsx">Horizontal</code>
-<code src="./demo/with-text.tsx">Divider with title</code>
-<code src="./demo/plain.tsx">Text without heading style</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/customize-style.tsx">Style Customization</code>
-
 ## API

 | Property          | Description                                                                                                       | Type                          | Default      | Version |
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@ -1,13 +1,9 @@
 ---
 category: Components
+type: 布局
 title: Divider
 subtitle: 分割线
 cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
-demo:
-  cols: 2
-group:
-  title: 布局
-  order: 2
 demo:
  cols: 2
 ---
@ -27,14 +23,6 @@ demo:
 <code src="./demo/vertical.tsx">垂直分割线</code>
 <code src="./demo/customize-style.tsx">样式自定义</code>

-## 代码演示
-
-<code src="./demo/horizontal.tsx">水平分割线</code>
-<code src="./demo/with-text.tsx">带文字的分割线</code>
-<code src="./demo/plain.tsx">分割文字使用正文样式</code>
-<code src="./demo/vertical.tsx">垂直分割线</code>
-<code src="./demo/customize-style.tsx">样式自定义</code>
-
 ## API

 | 参数              | 说明                                                                                            | 类型                          | 默认值       | 版本  |
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -1,11 +1,9 @@
 ---
-group: Feedback
+type: Feedback
 category: Components
 subtitle:
 title: Drawer
 cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -22,20 +20,6 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr

 ## Examples

-<code src="./demo/basic-right.tsx">Basic</code>
-<code src="./demo/placement.tsx">Custom Placement</code>
-<code src="./demo/extra.tsx">Extra Actions</code>
-<code src="./demo/render-in-current.tsx">Render in current dom</code>
-<code src="./demo/form-in-drawer.tsx">Submit form in drawer</code>
-<code src="./demo/user-profile.tsx">Preview drawer</code>
-<code src="./demo/multi-level-drawer.tsx">Multi-level drawer</code>
-<code src="./demo/size.tsx">Presetted size</code>
-<code src="./demo/config-provider.tsx">ConfigProvider</code>
-<code src="./demo/no-mask.tsx">No mask</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## Examples
-
 <code src="./demo/basic-right.tsx">Basic</code>
 <code src="./demo/placement.tsx">Custom Placement</code>
 <code src="./demo/extra.tsx">Extra Actions</code>
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
-group: 反馈
+type: 反馈
 category: Components
 subtitle: 抽屉
 title: Drawer
 cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -21,20 +19,6 @@ demo:

 ## 代码演示

-<code src="./demo/basic-right.tsx">基础抽屉</code>
-<code src="./demo/placement.tsx">自定义位置</code>
-<code src="./demo/extra.tsx">额外操作</code>
-<code src="./demo/render-in-current.tsx">渲染在当前 DOM</code>
-<code src="./demo/form-in-drawer.tsx">抽屉表单</code>
-<code src="./demo/user-profile.tsx">信息预览抽屉</code>
-<code src="./demo/multi-level-drawer.tsx">多层抽屉</code>
-<code src="./demo/size.tsx">预设宽度</code>
-<code src="./demo/config-provider.tsx">ConfigProvider</code>
-<code src="./demo/no-mask.tsx">无遮罩</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
-## 代码演示
-
 <code src="./demo/basic-right.tsx">基础抽屉</code>
 <code src="./demo/placement.tsx">自定义位置</code>
 <code src="./demo/extra.tsx">额外操作</code>
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Dropdown
 cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -33,24 +31,6 @@ When there are more than a few options to choose from, you can wrap them in a `D
 <code src="./demo/menu-full.tsx">Menu full styles</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/arrow.tsx">Arrow</code>
-<code src="./demo/item.tsx">Other elements</code>
-<code src="./demo/arrow-center.tsx">Arrow pointing at the center</code>
-<code src="./demo/trigger.tsx">Trigger mode</code>
-<code src="./demo/event.tsx">Click event</code>
-<code src="./demo/dropdown-button.tsx">Button with dropdown menu</code>
-<code src="./demo/sub-menu.tsx">Cascading menu</code>
-<code src="./demo/overlay-open.tsx">The way of hiding menu.</code>
-<code src="./demo/context-menu.tsx">Context Menu</code>
-<code src="./demo/loading.tsx">Loading</code>
-<code src="./demo/selectable.tsx">Selectable Menu</code>
-<code src="./demo/menu-full.tsx">Menu full styles</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ### Dropdown
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 下拉菜单
-group: 导航
+type: 导航
 title: Dropdown
 cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -37,24 +35,6 @@ demo:
 <code src="./demo/menu-full.tsx">Menu 完整样式</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/arrow.tsx">箭头</code>
-<code src="./demo/item.tsx">其他元素</code>
-<code src="./demo/arrow-center.tsx">箭头指向</code>
-<code src="./demo/trigger.tsx">触发方式</code>
-<code src="./demo/event.tsx">触发事件</code>
-<code src="./demo/dropdown-button.tsx">带下拉框的按钮</code>
-<code src="./demo/sub-menu.tsx">多级菜单</code>
-<code src="./demo/overlay-open.tsx">菜单隐藏方式</code>
-<code src="./demo/context-menu.tsx">右键菜单</code>
-<code src="./demo/loading.tsx">加载中状态</code>
-<code src="./demo/selectable.tsx">菜单可选选择</code>
-<code src="./demo/menu-full.tsx">Menu 完整样式</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 属性如下
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Empty
 cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
-demo:
-  cols: 2
 ---

 Empty state placeholder.
@ -22,14 +20,6 @@ Empty state placeholder.
 <code src="./demo/config-provider.tsx">ConfigProvider</code>
 <code src="./demo/description.tsx">No description</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/simple.tsx">Chose image</code>
-<code src="./demo/customize.tsx">Customize</code>
-<code src="./demo/config-provider.tsx">ConfigProvider</code>
-<code src="./demo/description.tsx">No description</code>
-
 ## API

 ```jsx
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 空状态
-group: 数据展示
+type: 数据展示
 title: Empty
 cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
-demo:
-  cols: 2
 ---

 空状态时的展示占位图。
@ -23,14 +21,6 @@ demo:
 <code src="./demo/config-provider.tsx">全局化配置</code>
 <code src="./demo/description.tsx">无描述</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/simple.tsx">选择图片</code>
-<code src="./demo/customize.tsx">自定义</code>
-<code src="./demo/config-provider.tsx">全局化配置</code>
-<code src="./demo/description.tsx">无描述</code>
-
 ## API

 ```jsx
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Other
+type: Other
 title: FloatButton
 cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -27,17 +25,6 @@ FloatButton. Available since `5.0.0`.
 <code src="./demo/group-menu.tsx">Menu mode</code>
 <code src="./demo/back-top.tsx">BackTop</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/type.tsx">Type</code>
-<code src="./demo/shape.tsx">Shape</code>
-<code src="./demo/description.tsx">Description</code>
-<code src="./demo/tooltip.tsx">FloatButton with tooltip</code>
-<code src="./demo/group.tsx">FloatButton Group</code>
-<code src="./demo/group-menu.tsx">Menu mode</code>
-<code src="./demo/back-top.tsx">BackTop</code>
-
 ## API

 ### common API
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 其他
+type: 其他
 subtitle: 悬浮按钮
 title: FloatButton
 cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -28,17 +26,6 @@ demo:
 <code src="./demo/group-menu.tsx">菜单模式</code>
 <code src="./demo/back-top.tsx">回到顶部</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/type.tsx">类型</code>
-<code src="./demo/shape.tsx">形状</code>
-<code src="./demo/description.tsx">描述</code>
-<code src="./demo/tooltip.tsx">含有气泡卡片的悬浮按钮</code>
-<code src="./demo/group.tsx">浮动按钮组</code>
-<code src="./demo/group-menu.tsx">菜单模式</code>
-<code src="./demo/back-top.tsx">回到顶部</code>
-
 ## API

 ### 共同的 API
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Form
 cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
-demo:
-  cols: 2
 ---

 High performance Form component with data scope management. Including data collection, verification, and styles.
@ -51,43 +49,6 @@ High performance Form component with data scope management. Including data colle
 <code src="./demo/col-24-debug.tsx">Test col 24 usage</code>
 <code src="./demo/ref-item.tsx">Ref item</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/control-hooks.tsx">Form methods</code>
-<code src="./demo/control-ref.tsx">Form methods (Class component)</code>
-<code src="./demo/layout.tsx">Form Layout</code>
-<code src="./demo/disabled.tsx">Form disabled</code>
-<code src="./demo/required-mark.tsx">Required style</code>
-<code src="./demo/size.tsx">Form size</code>
-<code src="./demo/layout-can-wrap.tsx">label can wrap</code>
-<code src="./demo/warning-only.tsx">No block rule</code>
-<code src="./demo/useWatch.tsx">Watch Hooks</code>
-<code src="./demo/dynamic-form-item.tsx">Dynamic Form Item</code>
-<code src="./demo/dynamic-form-items.tsx">Dynamic Form nest Items</code>
-<code src="./demo/dynamic-form-items-no-style.tsx">Dynamic Form nest pure Items</code>
-<code src="./demo/dynamic-form-items-complex.tsx">Complex Dynamic Form Item</code>
-<code src="./demo/nest-messages.tsx">Nest</code>
-<code src="./demo/complex-form-control.tsx">complex form control</code>
-<code src="./demo/customized-form-controls.tsx">Customized Form Controls</code>
-<code src="./demo/global-state.tsx">Store Form Data into Upper Component</code>
-<code src="./demo/form-context.tsx">Control between forms</code>
-<code src="./demo/inline-login.tsx">Inline Login Form</code>
-<code src="./demo/normal-login.tsx">Login Form</code>
-<code src="./demo/register.tsx">Registration</code>
-<code src="./demo/advanced-search.tsx">Advanced search</code>
-<code src="./demo/form-in-modal.tsx">Form in Modal to Create</code>
-<code src="./demo/time-related-controls.tsx">Time-related Controls</code>
-<code src="./demo/without-form-create.tsx">Handle Form Data Manually</code>
-<code src="./demo/validate-static.tsx">Customized Validation</code>
-<code src="./demo/dynamic-rule.tsx">Dynamic Rules</code>
-<code src="./demo/validate-other.tsx">Other Form Controls</code>
-<code src="./demo/disabled-input-debug.tsx">Disabled Input Debug</code>
-<code src="./demo/dep-debug.tsx">Dep Debug</code>
-<code src="./demo/label-debug.tsx">label ellipsis</code>
-<code src="./demo/col-24-debug.tsx">Test col 24 usage</code>
-<code src="./demo/ref-item.tsx">Ref item</code>
-
 ## API

 ### Form
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 表单
-group: 数据录入
+type: 数据录入
 title: Form
 cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
-demo:
-  cols: 2
 ---

 高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
@ -52,43 +50,6 @@ demo:
 <code src="./demo/col-24-debug.tsx">测试特殊 col 24 用法</code>
 <code src="./demo/ref-item.tsx">引用字段</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/control-hooks.tsx">表单方法调用</code>
-<code src="./demo/control-ref.tsx">表单方法调用（Class component）</code>
-<code src="./demo/layout.tsx">表单布局</code>
-<code src="./demo/disabled.tsx">表单禁用</code>
-<code src="./demo/required-mark.tsx">必选样式</code>
-<code src="./demo/size.tsx">表单尺寸</code>
-<code src="./demo/layout-can-wrap.tsx">表单标签可换行</code>
-<code src="./demo/warning-only.tsx">非阻塞校验</code>
-<code src="./demo/useWatch.tsx">字段监听 Hooks</code>
-<code src="./demo/dynamic-form-item.tsx">动态增减表单项</code>
-<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
-<code src="./demo/dynamic-form-items-no-style.tsx">动态增减嵌套纯字段</code>
-<code src="./demo/dynamic-form-items-complex.tsx">复杂的动态增减表单项</code>
-<code src="./demo/nest-messages.tsx">嵌套结构与校验信息</code>
-<code src="./demo/complex-form-control.tsx">复杂一点的控件</code>
-<code src="./demo/customized-form-controls.tsx">自定义表单控件</code>
-<code src="./demo/global-state.tsx">表单数据存储于上层组件</code>
-<code src="./demo/form-context.tsx">多表单联动</code>
-<code src="./demo/inline-login.tsx">内联登录栏</code>
-<code src="./demo/normal-login.tsx">登录框</code>
-<code src="./demo/register.tsx">注册新用户</code>
-<code src="./demo/advanced-search.tsx">高级搜索</code>
-<code src="./demo/form-in-modal.tsx">弹出层中的新建表单</code>
-<code src="./demo/time-related-controls.tsx">时间类控件</code>
-<code src="./demo/without-form-create.tsx">自行处理表单数据</code>
-<code src="./demo/validate-static.tsx">自定义校验</code>
-<code src="./demo/dynamic-rule.tsx">动态校验规则</code>
-<code src="./demo/validate-other.tsx">校验其他组件</code>
-<code src="./demo/disabled-input-debug.tsx">Disabled Input Debug</code>
-<code src="./demo/dep-debug.tsx">Dep Debug</code>
-<code src="./demo/label-debug.tsx">测试 label 省略</code>
-<code src="./demo/col-24-debug.tsx">测试特殊 col 24 用法</code>
-<code src="./demo/ref-item.tsx">引用字段</code>
-
 ## API

 ### Form
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Layout
+type: Layout
 title: Grid
 cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
-demo:
-  cols: 2
 ---

 24 Grids System.
@ -49,21 +47,6 @@ Layout uses a 24 grid layout to define the width of each "box", but does not rig
 <code src="./demo/playground.tsx">Playground</code>
 <code src="./demo/useBreakpoint.tsx">undefined</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Grid</code>
-<code src="./demo/gutter.tsx">Grid Gutter</code>
-<code src="./demo/offset.tsx">Column offset</code>
-<code src="./demo/sort.tsx">Grid sort</code>
-<code src="./demo/flex.tsx">Typesetting</code>
-<code src="./demo/flex-align.tsx">Alignment</code>
-<code src="./demo/flex-order.tsx">Order</code>
-<code src="./demo/flex-stretch.tsx">Flex Stretch</code>
-<code src="./demo/responsive.tsx">Responsive</code>
-<code src="./demo/responsive-more.tsx">More responsive</code>
-<code src="./demo/playground.tsx">Playground</code>
-<code src="./demo/useBreakpoint.tsx">undefined</code>
-
 ## API

 If the Ant Design grid layout component does not meet your needs, you can use the excellent layout components of the community:
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 栅格
-group: 布局
+type: 布局
 title: Grid
 cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
-demo:
-  cols: 2
 ---

 24 栅格系统。
@ -48,21 +46,6 @@ demo:
 <code src="./demo/playground.tsx">栅格配置器</code>
 <code src="./demo/useBreakpoint.tsx">undefined</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基础栅格</code>
-<code src="./demo/gutter.tsx">区块间隔</code>
-<code src="./demo/offset.tsx">左右偏移</code>
-<code src="./demo/sort.tsx">栅格排序</code>
-<code src="./demo/flex.tsx">排版</code>
-<code src="./demo/flex-align.tsx">对齐</code>
-<code src="./demo/flex-order.tsx">排序</code>
-<code src="./demo/flex-stretch.tsx">Flex 填充</code>
-<code src="./demo/responsive.tsx">响应式布局</code>
-<code src="./demo/responsive-more.tsx">其他属性的响应式</code>
-<code src="./demo/playground.tsx">栅格配置器</code>
-<code src="./demo/useBreakpoint.tsx">undefined</code>
-
 ## API

 Ant Design 的布局组件若不能满足你的需求，你也可以直接使用社区的优秀布局组件：
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: General
+type: General
 title: Icon
 toc: false
 cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -31,14 +29,6 @@ ReactDOM.render(<IconDisplay />, mountNode);
 <code src="./demo/iconfont.tsx">Use iconfont.cn</code>
 <code src="./demo/scriptUrl.tsx">Multiple resources from iconfont.cn</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/two-tone.tsx">Two-tone icon and colorful icon</code>
-<code src="./demo/custom.tsx">Custom Icon</code>
-<code src="./demo/iconfont.tsx">Use iconfont.cn</code>
-<code src="./demo/scriptUrl.tsx">Multiple resources from iconfont.cn</code>
-
 ## API

 ### Common Icon
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -1,12 +1,10 @@
 ---
 category: Components
 subtitle: 图标
-group: 通用
+type: 通用
 title: Icon
 toc: false
 cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -36,14 +34,6 @@ ReactDOM.render(<IconDisplay />, mountNode);
 <code src="./demo/iconfont.tsx">使用 iconfont.cn</code>
 <code src="./demo/scriptUrl.tsx">使用 iconfont.cn 的多个资源</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/two-tone.tsx">多色图标</code>
-<code src="./demo/custom.tsx">自定义图标</code>
-<code src="./demo/iconfont.tsx">使用 iconfont.cn</code>
-<code src="./demo/scriptUrl.tsx">使用 iconfont.cn 的多个资源</code>
-
 ## API

 从 4.0 开始，antd 不再内置 Icon 组件，请使用独立的包 `@ant-design/icons`。
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@ -1,6 +1,6 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Image
 cols: 2
 cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
@ -25,18 +25,6 @@ Previewable image.
 <code src="./demo/preview-mask.tsx">Custom preview mask</code>
 <code src="./demo/preview-group-top-progress.tsx">Top progress customization when previewing multiple images</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/fallback.tsx">Fault tolerant</code>
-<code src="./demo/placeholder.tsx">Progressive Loading</code>
-<code src="./demo/preview-group.tsx">Multiple image preview</code>
-<code src="./demo/preview-group-visible.tsx">Preview from one image</code>
-<code src="./demo/previewSrc.tsx">Custom preview image</code>
-<code src="./demo/controlled-preview.tsx">Controlled Preview</code>
-<code src="./demo/preview-mask.tsx">Custom preview mask</code>
-<code src="./demo/preview-group-top-progress.tsx">Top progress customization when previewing multiple images</code>
-
 ## API

 | Property      | Description                                                       | Type                                   | Default | Version                                 |
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 图片
-group: 数据展示
+type: 数据展示
 title: Image
 cols: 2
 cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
@ -26,18 +26,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
 <code src="./demo/preview-mask.tsx">自定义预览文本</code>
 <code src="./demo/preview-group-top-progress.tsx">多图预览时顶部进度自定义</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/fallback.tsx">容错处理</code>
-<code src="./demo/placeholder.tsx">渐进加载</code>
-<code src="./demo/preview-group.tsx">多张图片预览</code>
-<code src="./demo/preview-group-visible.tsx">相册模式</code>
-<code src="./demo/previewSrc.tsx">自定义预览图片</code>
-<code src="./demo/controlled-preview.tsx">受控的预览</code>
-<code src="./demo/preview-mask.tsx">自定义预览文本</code>
-<code src="./demo/preview-group-top-progress.tsx">多图预览时顶部进度自定义</code>
-
 ## API

 | 参数          | 说明                                                   | 类型                                   | 默认值 | 版本                                    |
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: InputNumber
 cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -32,23 +30,6 @@ When a numeric value needs to be provided.
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug-token.tsx">Override Component Style</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/size.tsx">Sizes</code>
-<code src="./demo/addon.tsx">Pre / Post tab</code>
-<code src="./demo/disabled.tsx">Disabled</code>
-<code src="./demo/digit.tsx">High precision decimals</code>
-<code src="./demo/formatter.tsx">Formatter</code>
-<code src="./demo/keyboard.tsx">Keyboard</code>
-<code src="./demo/borderless.tsx">Borderless</code>
-<code src="./demo/out-of-range.tsx">Out of range</code>
-<code src="./demo/prefix.tsx">Prefix</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/controls.tsx">Icon</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-<code src="./demo/debug-token.tsx">Override Component Style</code>
-
 ## API

 | Property         | Description                                                                                      | Type                                                                                    | Default                                                                                                                             | Version      |
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 数字输入框
-group: 数据录入
+type: 数据录入
 title: InputNumber
 cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -33,23 +31,6 @@ demo:
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/debug-token.tsx">覆盖组件样式</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/addon.tsx">前置/后置标签</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/digit.tsx">高精度小数</code>
-<code src="./demo/formatter.tsx">格式化展示</code>
-<code src="./demo/keyboard.tsx">键盘行为</code>
-<code src="./demo/borderless.tsx">无边框</code>
-<code src="./demo/out-of-range.tsx">超出边界</code>
-<code src="./demo/prefix.tsx">前缀</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/controls.tsx">图标按钮</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-<code src="./demo/debug-token.tsx">覆盖组件样式</code>
-
 ## API

 属性如下
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Input
 cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -39,29 +37,6 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 <code src="./demo/align.tsx">Text Align</code>
 <code src="./demo/textarea-resize.tsx">TextArea</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic usage</code>
-<code src="./demo/size.tsx">Three sizes of Input</code>
-<code src="./demo/addon.tsx">Pre / Post tab</code>
-<code src="./demo/group.tsx">Input Group</code>
-<code src="./demo/search-input.tsx">Search box</code>
-<code src="./demo/search-input-loading.tsx">Search box with loading</code>
-<code src="./demo/textarea.tsx">TextArea</code>
-<code src="./demo/autosize-textarea.tsx">Autosizing the height to fit the content</code>
-<code src="./demo/tooltip.tsx">Format Tooltip Input</code>
-<code src="./demo/presuffix.tsx">prefix and suffix</code>
-<code src="./demo/password-input.tsx">Password box</code>
-<code src="./demo/allowClear.tsx">With clear icon</code>
-<code src="./demo/show-count.tsx">With character counting</code>
-<code src="./demo/textarea-show-count.tsx">Textarea with character counting</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/borderless.tsx">Borderless</code>
-<code src="./demo/focus.tsx">Focus</code>
-<code src="./demo/borderless-debug.tsx">Borderless Debug</code>
-<code src="./demo/align.tsx">Text Align</code>
-<code src="./demo/textarea-resize.tsx">TextArea</code>
-
 ## API

 ### Input
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 输入框
-group: 数据录入
+type: 数据录入
 title: Input
 cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -40,29 +38,6 @@ demo:
 <code src="./demo/align.tsx">文本对齐</code>
 <code src="./demo/textarea-resize.tsx">文本域</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/addon.tsx">前置/后置标签</code>
-<code src="./demo/group.tsx">输入框组合</code>
-<code src="./demo/search-input.tsx">搜索框</code>
-<code src="./demo/search-input-loading.tsx">搜索框 loading</code>
-<code src="./demo/textarea.tsx">文本域</code>
-<code src="./demo/autosize-textarea.tsx">适应文本高度的文本域</code>
-<code src="./demo/tooltip.tsx">输入时格式化展示</code>
-<code src="./demo/presuffix.tsx">前缀和后缀</code>
-<code src="./demo/password-input.tsx">密码框</code>
-<code src="./demo/allowClear.tsx">带移除图标</code>
-<code src="./demo/show-count.tsx">带字数提示</code>
-<code src="./demo/textarea-show-count.tsx">带字数提示的文本域</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/borderless.tsx">无边框</code>
-<code src="./demo/focus.tsx">聚焦</code>
-<code src="./demo/borderless-debug.tsx">Borderless Debug</code>
-<code src="./demo/align.tsx">文本对齐</code>
-<code src="./demo/textarea-resize.tsx">文本域</code>
-
 ## API

 ### Input
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Layout
+type: Layout
 title: Layout
 cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
-demo:
-  cols: 2
 ---

 Handling the overall layout of a page.
@ -70,19 +68,6 @@ Style of a navigation should conform to its level.
 <code src="./demo/fixed-sider.tsx">Fixed Sider</code>
 <code src="./demo/custom-trigger-debug.tsx">Custom trigger debug</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Structure</code>
-<code src="./demo/top.tsx">Header-Content-Footer</code>
-<code src="./demo/top-side-2.tsx">Header Sider 2</code>
-<code src="./demo/top-side.tsx">Header-Sider</code>
-<code src="./demo/side.tsx">Sider</code>
-<code src="./demo/custom-trigger.tsx">Custom trigger</code>
-<code src="./demo/responsive.tsx">Responsive</code>
-<code src="./demo/fixed.tsx">Fixed Header</code>
-<code src="./demo/fixed-sider.tsx">Fixed Sider</code>
-<code src="./demo/custom-trigger-debug.tsx">Custom trigger debug</code>
-
 ## API

 ```jsx
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 布局
-group: 布局
+type: 布局
 title: Layout
 cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
-demo:
-  cols: 2
 ---

 协助进行页面级整体布局。
@ -71,19 +69,6 @@ demo:
 <code src="./demo/fixed-sider.tsx">固定侧边栏</code>
 <code src="./demo/custom-trigger-debug.tsx">自定义触发器 Debug</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本结构</code>
-<code src="./demo/top.tsx">上中下布局</code>
-<code src="./demo/top-side-2.tsx">顶部-侧边布局-通栏</code>
-<code src="./demo/top-side.tsx">顶部-侧边布局</code>
-<code src="./demo/side.tsx">侧边布局</code>
-<code src="./demo/custom-trigger.tsx">自定义触发器</code>
-<code src="./demo/responsive.tsx">响应式布局</code>
-<code src="./demo/fixed.tsx">固定头部</code>
-<code src="./demo/fixed-sider.tsx">固定侧边栏</code>
-<code src="./demo/custom-trigger-debug.tsx">自定义触发器 Debug</code>
-
 ## API

 ```jsx
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: List
 cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
-demo:
-  cols: 2
 ---

 Simple List.
@ -25,18 +23,6 @@ A list can be used to display content related to a single subject. The content c
 <code src="./demo/infinite-load.tsx">Scrolling loaded</code>
 <code src="./demo/virtual-list.tsx">virtual list</code>

-## Examples
-
-<code src="./demo/simple.tsx">Simple list</code>
-<code src="./demo/basic.tsx">Basic list</code>
-<code src="./demo/loadmore.tsx">Load more</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/grid.tsx">Grid</code>
-<code src="./demo/grid-test.tsx">Test Grid</code>
-<code src="./demo/responsive.tsx">Responsive grid list</code>
-<code src="./demo/infinite-load.tsx">Scrolling loaded</code>
-<code src="./demo/virtual-list.tsx">virtual list</code>
-
 ## API

 ### List
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 数据展示
+type: 数据展示
 title: List
 subtitle: 列表
 cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
-demo:
-  cols: 2
 ---

 通用列表。
@ -26,18 +24,6 @@ demo:
 <code src="./demo/infinite-load.tsx">滚动加载</code>
 <code src="./demo/virtual-list.tsx">滚动加载无限长列表</code>

-## 代码演示
-
-<code src="./demo/simple.tsx">简单列表</code>
-<code src="./demo/basic.tsx">基础列表</code>
-<code src="./demo/loadmore.tsx">加载更多</code>
-<code src="./demo/vertical.tsx">竖排列表样式</code>
-<code src="./demo/grid.tsx">栅格列表</code>
-<code src="./demo/grid-test.tsx">测试栅格列表</code>
-<code src="./demo/responsive.tsx">响应式的栅格列表</code>
-<code src="./demo/infinite-load.tsx">滚动加载</code>
-<code src="./demo/virtual-list.tsx">滚动加载无限长列表</code>
-
 ## API

 另外我们封装了 [ProList](https://procomponents.ant.design/components/list)，在 `antd` List 之上扩展了更多便捷易用的功能，比如多选，展开等功能，使用体验贴近 Table，欢迎尝试使用。
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Mentions
 cover: https://gw.alipayobjects.com/zos/alicdn/0pF5j477V/Mentions.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -27,18 +25,6 @@ When you need to mention someone or something.
 <code src="./demo/status.tsx">Status</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/async.tsx">Asynchronous loading</code>
-<code src="./demo/form.tsx">With Form</code>
-<code src="./demo/prefix.tsx">Customize Trigger Token</code>
-<code src="./demo/readonly.tsx">disabled or readOnly</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/autoSize.tsx">autoSize</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ```jsx
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 提及
-group: 数据录入
+type: 数据录入
 title: Mentions
 cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -28,18 +26,6 @@ demo:
 <code src="./demo/status.tsx">自定义状态</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/async.tsx">异步加载</code>
-<code src="./demo/form.tsx">配合 Form 使用</code>
-<code src="./demo/prefix.tsx">自定义触发字符</code>
-<code src="./demo/readonly.tsx">无效或只读</code>
-<code src="./demo/placement.tsx">向上展开</code>
-<code src="./demo/autoSize.tsx">自动大小</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ```jsx
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Menu
 cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
-demo:
-  cols: 2
 ---

 A versatile menu for navigation.
@ -65,19 +63,6 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 <code src="./demo/switch-mode.tsx">Switch the menu type</code>
 <code src="./demo/style-debug.tsx">Style debug</code>

-## Examples
-
-<code src="./demo/deprecated.tsx">Basic usage (deprecated syntactic sugar)</code>
-<code src="./demo/horizontal.tsx">Top Navigation</code>
-<code src="./demo/inline.tsx">Inline menu</code>
-<code src="./demo/inline-collapsed.tsx">Collapsed inline menu</code>
-<code src="./demo/sider-current.tsx">Open current submenu only</code>
-<code src="./demo/vertical.tsx">Vertical menu</code>
-<code src="./demo/theme.tsx">Menu Themes</code>
-<code src="./demo/submenu-theme.tsx">Sub-menu theme</code>
-<code src="./demo/switch-mode.tsx">Switch the menu type</code>
-<code src="./demo/style-debug.tsx">Style debug</code>
-
 ## API

 ### Menu
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 导航
+type: 导航
 title: Menu
 subtitle: 导航菜单
 cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
-demo:
-  cols: 2
 ---

 为页面和功能提供导航的菜单列表。
@ -66,19 +64,6 @@ return <Menu items={items} />;
 <code src="./demo/switch-mode.tsx">切换菜单类型</code>
 <code src="./demo/style-debug.tsx">Style debug</code>

-## 代码演示
-
-<code src="./demo/deprecated.tsx">基础用法（废弃的语法糖）</code>
-<code src="./demo/horizontal.tsx">顶部导航</code>
-<code src="./demo/inline.tsx">内嵌菜单</code>
-<code src="./demo/inline-collapsed.tsx">缩起内嵌菜单</code>
-<code src="./demo/sider-current.tsx">只展开当前父级菜单</code>
-<code src="./demo/vertical.tsx">垂直菜单</code>
-<code src="./demo/theme.tsx">主题</code>
-<code src="./demo/submenu-theme.tsx">子菜单主题</code>
-<code src="./demo/switch-mode.tsx">切换菜单类型</code>
-<code src="./demo/style-debug.tsx">Style debug</code>
-
 ## API

 ### Menu
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 noinstant: true
 title: Message
 cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -29,18 +27,6 @@ Display global messages as feedback in response to user operations.
 <code src="./demo/info.tsx">Normal prompt</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/hooks.tsx">Hooks usage (recommended)</code>
-<code src="./demo/other.tsx">Other types of message</code>
-<code src="./demo/duration.tsx">Customize duration</code>
-<code src="./demo/loading.tsx">Message with loading indicator</code>
-<code src="./demo/thenable.tsx">Promise interface</code>
-<code src="./demo/custom-style.tsx">Customized style</code>
-<code src="./demo/update.tsx">Update Message Content</code>
-<code src="./demo/info.tsx">Normal prompt</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 This components provides some static methods, with usage and arguments as following:
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@ -1,12 +1,10 @@
 ---
 category: Components
 subtitle: 全局提示
-group: 反馈
+type: 反馈
 noinstant: true
 title: Message
 cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -30,18 +28,6 @@ demo:
 <code src="./demo/info.tsx">普通提示</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/hooks.tsx">Hooks 调用（推荐）</code>
-<code src="./demo/other.tsx">其他提示类型</code>
-<code src="./demo/duration.tsx">修改延时</code>
-<code src="./demo/loading.tsx">加载中</code>
-<code src="./demo/thenable.tsx">Promise 接口</code>
-<code src="./demo/custom-style.tsx">自定义样式</code>
-<code src="./demo/update.tsx">更新消息内容</code>
-<code src="./demo/info.tsx">普通提示</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 组件提供了一些静态方法，使用方式和参数如下：
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -1,10 +1,8 @@
 ---
-group: Feedback
+type: Feedback
 category: Components
 title: Modal
 cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -33,24 +31,6 @@ When requiring users to interact with the application, but without jumping to a
 <code src="./demo/width.tsx">To customize the width of modal</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/async.tsx">Asynchronously close</code>
-<code src="./demo/footer.tsx">Customized Footer</code>
-<code src="./demo/confirm.tsx">Confirmation modal dialog</code>
-<code src="./demo/info.tsx">Information modal dialog</code>
-<code src="./demo/locale.tsx">Internationalization</code>
-<code src="./demo/manual.tsx">Manual to update destroy</code>
-<code src="./demo/position.tsx">To customize the position of modal</code>
-<code src="./demo/confirm-router.tsx">destroy confirmation modal dialog</code>
-<code src="./demo/dark.tsx">Dark Bg</code>
-<code src="./demo/button-props.tsx">Customize footer buttons props</code>
-<code src="./demo/hooks.tsx">Use hooks to get context</code>
-<code src="./demo/modal-render.tsx">Custom modal content render</code>
-<code src="./demo/width.tsx">To customize the width of modal</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | Property               | Description                                                                                                | Type                                                   | Default                 | Version |
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
-group: 反馈
+type: 反馈
 category: Components
 subtitle: 对话框
 title: Modal
 cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -36,24 +34,6 @@ demo:
 <code src="./demo/width.tsx">自定义模态的宽度</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/async.tsx">异步关闭</code>
-<code src="./demo/footer.tsx">自定义页脚</code>
-<code src="./demo/confirm.tsx">确认对话框</code>
-<code src="./demo/info.tsx">信息提示</code>
-<code src="./demo/locale.tsx">国际化</code>
-<code src="./demo/manual.tsx">手动更新和移除</code>
-<code src="./demo/position.tsx">自定义位置</code>
-<code src="./demo/confirm-router.tsx">销毁确认对话框</code>
-<code src="./demo/dark.tsx">暗背景</code>
-<code src="./demo/button-props.tsx">自定义页脚按钮属性</code>
-<code src="./demo/hooks.tsx">使用 hooks 获得上下文</code>
-<code src="./demo/modal-render.tsx">自定义渲染对话框</code>
-<code src="./demo/width.tsx">自定义模态的宽度</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | 参数                   | 说明                                                              | 类型                                                   | 默认值               | 版本  |
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 noinstant: true
 title: Notification
 cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -33,19 +31,6 @@ To display a notification message at any of the four corners of the viewport. Ty
 <code src="./demo/update.tsx">Update Message Content</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/hooks.tsx">Hooks usage (recommended)</code>
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/duration.tsx">Duration after which the notification box is closed</code>
-<code src="./demo/with-icon.tsx">Notification with icon</code>
-<code src="./demo/with-btn.tsx">Custom close button</code>
-<code src="./demo/custom-icon.tsx">Customized Icon</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/custom-style.tsx">Customized style</code>
-<code src="./demo/update.tsx">Update Message Content</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 - `notification.success(config)`
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@ -1,12 +1,10 @@
 ---
 category: Components
-group: 反馈
+type: 反馈
 noinstant: true
 title: Notification
 subtitle: 通知提醒框
 cover: https://gw.alipayobjects.com/zos/alicdn/Jxm5nw61w/Notification.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -34,19 +32,6 @@ demo:
 <code src="./demo/update.tsx">更新消息内容</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/hooks.tsx">Hooks 调用（推荐）</code>
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/duration.tsx">自动关闭的延时</code>
-<code src="./demo/with-icon.tsx">带有图标的通知提醒框</code>
-<code src="./demo/with-btn.tsx">自定义按钮</code>
-<code src="./demo/custom-icon.tsx">自定义图标</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/custom-style.tsx">自定义样式</code>
-<code src="./demo/update.tsx">更新消息内容</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 - `notification.success(config)`
--- a/components/overview/index.en-US.md
+++ b/components/overview/index.en-US.md
@ -1,8 +1,7 @@
 ---
 category: Components
 title: Components Overview
+type: Overview
 ---

 `antd` provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. We also recommend some great [Third-Party Libraries](/docs/react/recommendation) additionally.
-
-<ComponentOverview></ComponentOverview>
--- a/components/overview/index.zh-CN.md
+++ b/components/overview/index.zh-CN.md
@ -1,8 +1,7 @@
 ---
 category: Components
 title: 组件总览
+type: 组件总览
 ---

 `antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。
-
-<ComponentOverview></ComponentOverview>
--- a/components/pagination/index.en-US.md
+++ b/components/pagination/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Navigation
+type: Navigation
 title: Pagination
 cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
-demo:
-  cols: 2
 ---

 A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.
@ -27,19 +25,6 @@ A long list can be divided into several pages using `Pagination`, and only one p
 <code src="./demo/all.tsx">Show All</code>
 <code src="./demo/itemRender.tsx">Prev and next</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/more.tsx">More</code>
-<code src="./demo/changer.tsx">Changer</code>
-<code src="./demo/jump.tsx">Jumper</code>
-<code src="./demo/mini.tsx">Mini size</code>
-<code src="./demo/simple.tsx">Simple mode</code>
-<code src="./demo/controlled.tsx">Controlled</code>
-<code src="./demo/total.tsx">Total number</code>
-<code src="./demo/all.tsx">Show All</code>
-<code src="./demo/itemRender.tsx">Prev and next</code>
-
 ## API

 ```jsx
--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 分页
-group: 导航
+type: 导航
 title: Pagination
 cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
-demo:
-  cols: 2
 ---

 采用分页的形式分隔长列表，每次只加载一个页面。
@ -28,19 +26,6 @@ demo:
 <code src="./demo/all.tsx">全部展示</code>
 <code src="./demo/itemRender.tsx">上一步和下一步</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/more.tsx">更多</code>
-<code src="./demo/changer.tsx">改变</code>
-<code src="./demo/jump.tsx">跳转</code>
-<code src="./demo/mini.tsx">迷你</code>
-<code src="./demo/simple.tsx">简洁</code>
-<code src="./demo/controlled.tsx">受控</code>
-<code src="./demo/total.tsx">总数</code>
-<code src="./demo/all.tsx">全部展示</code>
-<code src="./demo/itemRender.tsx">上一步和下一步</code>
-
 ## API

 ```jsx
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Popconfirm
 cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -28,17 +26,6 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 <code src="./demo/promise.tsx">Asynchronously close on Promise</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/locale.tsx">Locale text</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/dynamic-trigger.tsx">Conditional trigger</code>
-<code src="./demo/icon.tsx">Customize icon</code>
-<code src="./demo/async.tsx">Asynchronously close</code>
-<code src="./demo/promise.tsx">Asynchronously close on Promise</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | Param             | Description                                         | Type                                   | Default value            | Version |
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 气泡确认框
-group: 反馈
+type: 反馈
 title: Popconfirm
 cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -29,17 +27,6 @@ demo:
 <code src="./demo/promise.tsx">基于 Promise 的异步关闭</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/locale.tsx">国际化</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/dynamic-trigger.tsx">条件触发</code>
-<code src="./demo/icon.tsx">自定义 Icon 图标</code>
-<code src="./demo/async.tsx">异步关闭</code>
-<code src="./demo/promise.tsx">基于 Promise 的异步关闭</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | 参数              | 说明                                   | 类型                                   | 默认值                   | 版本   |
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Popover
 cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -27,16 +25,6 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 <code src="./demo/hover-with-click.tsx">Hover with click popover</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/triggerType.tsx">Three ways to trigger</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/control.tsx">Controlling the close of the dialog</code>
-<code src="./demo/arrow-point-at-center.tsx">Arrow pointing</code>
-<code src="./demo/hover-with-click.tsx">Hover with click popover</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | Param   | Description         | Type                         | Default value | Version |
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 气泡卡片
-group: 数据展示
+type: 数据展示
 title: Popover
 cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -28,16 +26,6 @@ demo:
 <code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/triggerType.tsx">三种触发方式</code>
-<code src="./demo/placement.tsx">位置</code>
-<code src="./demo/control.tsx">从浮层内关闭</code>
-<code src="./demo/arrow-point-at-center.tsx">箭头指向</code>
-<code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 | 参数    | 说明     | 类型                         | 默认值 | 版本 |
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Progress
 cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -33,21 +31,6 @@ If it will take a long time to complete an operation, you can use `Progress` to
 <code src="./demo/gradient-line.tsx">Custom line gradient</code>
 <code src="./demo/steps.tsx">Progress bar with steps</code>

-## Examples
-
-<code src="./demo/line.tsx">Progress bar</code>
-<code src="./demo/circle.tsx">Circular progress bar</code>
-<code src="./demo/line-mini.tsx">Mini size progress bar</code>
-<code src="./demo/circle-mini.tsx">Mini size circular progress bar</code>
-<code src="./demo/circle-dynamic.tsx">Dynamic circular progress bar</code>
-<code src="./demo/dynamic.tsx">Dynamic</code>
-<code src="./demo/format.tsx">Custom text format</code>
-<code src="./demo/dashboard.tsx">Dashboard</code>
-<code src="./demo/segment.tsx">Progress bar with success segment</code>
-<code src="./demo/linecap.tsx">Stroke Linecap</code>
-<code src="./demo/gradient-line.tsx">Custom line gradient</code>
-<code src="./demo/steps.tsx">Progress bar with steps</code>
-
 ## API

 Properties that shared by all types.
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 进度条
-group: 反馈
+type: 反馈
 title: Progress
 cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -34,21 +32,6 @@ demo:
 <code src="./demo/gradient-line.tsx">自定义进度条渐变色</code>
 <code src="./demo/steps.tsx">步骤进度条</code>

-## 代码演示
-
-<code src="./demo/line.tsx">进度条</code>
-<code src="./demo/circle.tsx">进度圈</code>
-<code src="./demo/line-mini.tsx">小型进度条</code>
-<code src="./demo/circle-mini.tsx">小型进度圈</code>
-<code src="./demo/circle-dynamic.tsx">进度圈动态展示</code>
-<code src="./demo/dynamic.tsx">动态展示</code>
-<code src="./demo/format.tsx">自定义文字格式</code>
-<code src="./demo/dashboard.tsx">仪表盘</code>
-<code src="./demo/segment.tsx">分段进度条</code>
-<code src="./demo/linecap.tsx">边缘形状</code>
-<code src="./demo/gradient-line.tsx">自定义进度条渐变色</code>
-<code src="./demo/steps.tsx">步骤进度条</code>
-
 ## API

 各类型共用的属性。
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Radio
 cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -29,19 +27,6 @@ Radio.
 <code src="./demo/radiobutton-solid.tsx">Solid radio button</code>
 <code src="./demo/badge.tsx">测试 Badge 的样式</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/disabled.tsx">disabled</code>
-<code src="./demo/radiogroup.tsx">Radio Group</code>
-<code src="./demo/radiogroup-more.tsx">Vertical Radio.Group</code>
-<code src="./demo/radiogroup-options.tsx">Radio.Group group - optional</code>
-<code src="./demo/radiobutton.tsx">radio style</code>
-<code src="./demo/radiogroup-with-name.tsx">Radio.Group with name</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/radiobutton-solid.tsx">Solid radio button</code>
-<code src="./demo/badge.tsx">测试 Badge 的样式</code>
-
 ## API

 ### Radio/Radio.Button
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 单选框
-group: 数据录入
+type: 数据录入
 title: Radio
 cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -30,19 +28,6 @@ demo:
 <code src="./demo/radiobutton-solid.tsx">填底的按钮样式</code>
 <code src="./demo/badge.tsx">Badge style</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/radiogroup.tsx">单选组合</code>
-<code src="./demo/radiogroup-more.tsx">Radio.Group 垂直</code>
-<code src="./demo/radiogroup-options.tsx">Radio.Group 组合 - 配置方式</code>
-<code src="./demo/radiobutton.tsx">按钮样式</code>
-<code src="./demo/radiogroup-with-name.tsx">单选组合 - 配合 name 使用</code>
-<code src="./demo/size.tsx">大小</code>
-<code src="./demo/radiobutton-solid.tsx">填底的按钮样式</code>
-<code src="./demo/badge.tsx">Badge style</code>
-
 ## API

 ### Radio/Radio.Button
--- a/components/rate/index.en-US.md
+++ b/components/rate/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Rate
 cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -26,16 +24,6 @@ Rate component.
 <code src="./demo/character.tsx">Other Character</code>
 <code src="./demo/character-function.tsx">Customize character</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/half.tsx">Half star</code>
-<code src="./demo/text.tsx">Show copywriting</code>
-<code src="./demo/disabled.tsx">Read only</code>
-<code src="./demo/clear.tsx">Clear star</code>
-<code src="./demo/character.tsx">Other Character</code>
-<code src="./demo/character-function.tsx">Customize character</code>
-
 ## API

 | Property      | Description                             | type                                  | Default           | Version           |
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 评分
-group: 数据录入
+type: 数据录入
 title: Rate
 cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -27,16 +25,6 @@ demo:
 <code src="./demo/character.tsx">其他字符</code>
 <code src="./demo/character-function.tsx">自定义字符</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/half.tsx">半星</code>
-<code src="./demo/text.tsx">文案展现</code>
-<code src="./demo/disabled.tsx">只读</code>
-<code src="./demo/clear.tsx">清除</code>
-<code src="./demo/character.tsx">其他字符</code>
-<code src="./demo/character-function.tsx">自定义字符</code>
-
 ## API

 | 属性          | 说明                     | 类型                                  | 默认值            | 版本              |
--- a/components/result/index.en-US.md
+++ b/components/result/index.en-US.md
@ -1,10 +1,8 @@
 ---
-group: Feedback
+type: Feedback
 category: Components
 title: Result
 cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
-demo:
-  cols: 2
 ---

 Used to feed back the results of a series of operational tasks.
@ -24,17 +22,6 @@ Use when important operations need to inform the user to process the results and
 <code src="./demo/error.tsx">Error</code>
 <code src="./demo/customIcon.tsx">Custom icon</code>

-## Examples
-
-<code src="./demo/success.tsx">Success</code>
-<code src="./demo/info.tsx">Info</code>
-<code src="./demo/warning.tsx">Warning</code>
-<code src="./demo/403.tsx">403</code>
-<code src="./demo/404.tsx">404</code>
-<code src="./demo/500.tsx">500</code>
-<code src="./demo/error.tsx">Error</code>
-<code src="./demo/customIcon.tsx">Custom icon</code>
-
 ## API

 | Property | Description                            | Type                                                                   | Default |
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
-group: 反馈
+type: 反馈
 category: Components
 title: Result
 subtitle: 结果
 cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
-demo:
-  cols: 2
 ---

 用于反馈一系列操作任务的处理结果。
@ -25,17 +23,6 @@ demo:
 <code src="./demo/error.tsx">Error</code>
 <code src="./demo/customIcon.tsx">自定义 icon</code>

-## 代码演示
-
-<code src="./demo/success.tsx">Success</code>
-<code src="./demo/info.tsx">Info</code>
-<code src="./demo/warning.tsx">Warning</code>
-<code src="./demo/403.tsx">403</code>
-<code src="./demo/404.tsx">404</code>
-<code src="./demo/500.tsx">500</code>
-<code src="./demo/error.tsx">Error</code>
-<code src="./demo/customIcon.tsx">自定义 icon</code>
-
 ## API

 | 参数     | 说明                       | 类型                                                                   | 默认值 |
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Display
+type: Data Display
 title: Segmented
 cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -30,20 +28,6 @@ Segmented Controls. This component is available since `antd@4.20.0`.
 <code src="./demo/controlled-two.tsx">Controlled Synced mode</code>
 <code src="./demo/size-consistent.tsx">Consistent height</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/block.tsx">Block Segmented</code>
-<code src="./demo/disabled.tsx">Basic</code>
-<code src="./demo/controlled.tsx">Controlled mode</code>
-<code src="./demo/custom.tsx">Custom Render</code>
-<code src="./demo/dynamic.tsx">Dynamic</code>
-<code src="./demo/size.tsx">Three sizes of Segmented</code>
-<code src="./demo/with-icon.tsx">With Icon</code>
-<code src="./demo/icon-only.tsx">With Icon only</code>
-<code src="./demo/controlled-two.tsx">Controlled Synced mode</code>
-<code src="./demo/size-consistent.tsx">Consistent height</code>
-
 ## API

 > This component is available since `antd@4.20.0`
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 分段控制器
-group: 数据展示
+type: 数据展示
 title: Segmented
 cover: https://gw.alipayobjects.com/zos/bmw-prod/a3ff040f-24ba-43e0-92e9-c845df1612ad.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -31,20 +29,6 @@ demo:
 <code src="./demo/controlled-two.tsx">受控同步模式</code>
 <code src="./demo/size-consistent.tsx">统一高度</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/block.tsx">Block 分段选择器</code>
-<code src="./demo/disabled.tsx">不可用</code>
-<code src="./demo/controlled.tsx">受控模式</code>
-<code src="./demo/custom.tsx">自定义渲染</code>
-<code src="./demo/dynamic.tsx">动态数据</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/with-icon.tsx">设置图标</code>
-<code src="./demo/icon-only.tsx">只设置图标</code>
-<code src="./demo/controlled-two.tsx">受控同步模式</code>
-<code src="./demo/size-consistent.tsx">统一高度</code>
-
 ## API

 > 自 `antd@4.20.0` 版本开始提供该组件。
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Select
 cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -43,33 +41,6 @@ Select component to select value from options.
 <code src="./demo/debug.tsx">4.0 Debug</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic Usage</code>
-<code src="./demo/search.tsx">Select with search field</code>
-<code src="./demo/multiple.tsx">multiple selection</code>
-<code src="./demo/size.tsx">Sizes</code>
-<code src="./demo/option-label-prop.tsx">Custom selection render</code>
-<code src="./demo/search-sort.tsx">Search with sort</code>
-<code src="./demo/tags.tsx">Tags</code>
-<code src="./demo/optgroup.tsx">Option Group</code>
-<code src="./demo/coordinate.tsx">coordinate</code>
-<code src="./demo/search-box.tsx">Search Box</code>
-<code src="./demo/label-in-value.tsx">Get value of selected item</code>
-<code src="./demo/automatic-tokenization.tsx">Automatic tokenization</code>
-<code src="./demo/select-users.tsx">Search and Select Users</code>
-<code src="./demo/suffix.tsx">Suffix</code>
-<code src="./demo/custom-dropdown-menu.tsx">Custom dropdown</code>
-<code src="./demo/hide-selected.tsx">Hide Already Selected</code>
-<code src="./demo/bordered.tsx">Bordered-less</code>
-<code src="./demo/custom-tag-render.tsx">Custom Tag Render</code>
-<code src="./demo/responsive.tsx">Responsive maxTagCount</code>
-<code src="./demo/big-data.tsx">Big Data</code>
-<code src="./demo/status.tsx">Status</code>
-<code src="./demo/placement.tsx">Placement</code>
-<code src="./demo/debug.tsx">4.0 Debug</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ```jsx
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 选择器
-group: 数据录入
+type: 数据录入
 title: Select
 cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -44,33 +42,6 @@ demo:
 <code src="./demo/debug.tsx">4.0 Debug</code>
 <code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本使用</code>
-<code src="./demo/search.tsx">带搜索框</code>
-<code src="./demo/multiple.tsx">多选</code>
-<code src="./demo/size.tsx">三种大小</code>
-<code src="./demo/option-label-prop.tsx">定制回填内容</code>
-<code src="./demo/search-sort.tsx">带排序的搜索</code>
-<code src="./demo/tags.tsx">标签</code>
-<code src="./demo/optgroup.tsx">分组</code>
-<code src="./demo/coordinate.tsx">联动</code>
-<code src="./demo/search-box.tsx">搜索框</code>
-<code src="./demo/label-in-value.tsx">获得选项的文本</code>
-<code src="./demo/automatic-tokenization.tsx">自动分词</code>
-<code src="./demo/select-users.tsx">搜索用户</code>
-<code src="./demo/suffix.tsx">后缀图标</code>
-<code src="./demo/custom-dropdown-menu.tsx">扩展菜单</code>
-<code src="./demo/hide-selected.tsx">隐藏已选择选项</code>
-<code src="./demo/bordered.tsx">无边框</code>
-<code src="./demo/custom-tag-render.tsx">自定义选择标签</code>
-<code src="./demo/responsive.tsx">响应式 maxTagCount</code>
-<code src="./demo/big-data.tsx">大数据</code>
-<code src="./demo/status.tsx">自定义状态</code>
-<code src="./demo/placement.tsx">弹出位置</code>
-<code src="./demo/debug.tsx">4.0 Debug</code>
-<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>
-
 ## API

 ```jsx
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Skeleton
 cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
-demo:
-  cols: 2
 ---

 Provide a placeholder while you wait for content to load, or to visualise content that doesn't exist yet.
@ -25,15 +23,6 @@ Provide a placeholder while you wait for content to load, or to visualise conten
 <code src="./demo/children.tsx">Contains sub component</code>
 <code src="./demo/list.tsx">List</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/complex.tsx">Complex combination</code>
-<code src="./demo/active.tsx">Active Animation</code>
-<code src="./demo/element.tsx">Button/Avatar/Input/Image/Node</code>
-<code src="./demo/children.tsx">Contains sub component</code>
-<code src="./demo/list.tsx">List</code>
-
 ## API

 ### Skeleton
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 骨架屏
-group: 反馈
+type: 反馈
 title: Skeleton
 cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
-demo:
-  cols: 2
 ---

 在需要等待加载内容的位置提供一个占位图形组合。
@ -26,15 +24,6 @@ demo:
 <code src="./demo/children.tsx">包含子组件</code>
 <code src="./demo/list.tsx">列表</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/complex.tsx">复杂的组合</code>
-<code src="./demo/active.tsx">动画效果</code>
-<code src="./demo/element.tsx">按钮/头像/输入框/图像/自定义节点</code>
-<code src="./demo/children.tsx">包含子组件</code>
-<code src="./demo/list.tsx">列表</code>
-
 ## API

 ### Skeleton
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Data Entry
+type: Data Entry
 title: Slider
 cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -28,19 +26,6 @@ To input a value in a range.
 <code src="./demo/reverse.tsx">Reverse</code>
 <code src="./demo/dragableTrack.tsx">Draggable track</code>

-## Examples
-
-<code src="./demo/basic.tsx">Basic</code>
-<code src="./demo/input-number.tsx">Slider with InputNumber</code>
-<code src="./demo/icon-slider.tsx">Slider with icon</code>
-<code src="./demo/tip-formatter.tsx">Customize tooltip</code>
-<code src="./demo/event.tsx">Event</code>
-<code src="./demo/mark.tsx">Graduated slider</code>
-<code src="./demo/vertical.tsx">Vertical</code>
-<code src="./demo/show-tooltip.tsx">Control visible of ToolTip</code>
-<code src="./demo/reverse.tsx">Reverse</code>
-<code src="./demo/dragableTrack.tsx">Draggable track</code>
-
 ## API

 | Property      | Description                                                                                                                                       | Type                        | Default                                                                         | Version |
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
 subtitle: 滑动输入条
-group: 数据录入
+type: 数据录入
 title: Slider
 cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -29,19 +27,6 @@ demo:
 <code src="./demo/reverse.tsx">反向</code>
 <code src="./demo/dragableTrack.tsx">范围可拖拽</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本</code>
-<code src="./demo/input-number.tsx">带输入框的滑块</code>
-<code src="./demo/icon-slider.tsx">带 icon 的滑块</code>
-<code src="./demo/tip-formatter.tsx">自定义提示</code>
-<code src="./demo/event.tsx">事件</code>
-<code src="./demo/mark.tsx">带标签的滑块</code>
-<code src="./demo/vertical.tsx">垂直</code>
-<code src="./demo/show-tooltip.tsx">控制 ToolTip 的显示</code>
-<code src="./demo/reverse.tsx">反向</code>
-<code src="./demo/dragableTrack.tsx">范围可拖拽</code>
-
 ## API

 | 参数          | 说明                                                                                                                                           | 类型                        | 默认值                                                                          | 版本   |
--- a/components/space/index.en-US.md
+++ b/components/space/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Layout
+type: Layout
 title: Space
 cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
-demo:
-  cols: 2
 ---

 Set components spacing.
@ -25,18 +23,6 @@ Avoid components clinging together and set a unified space.
 <code src="./demo/gap-in-line.tsx">Flex gap style</code>
 <code src="./demo/split.tsx">Split</code>

-## Examples
-
-<code src="./demo/base.tsx">Basic Usage</code>
-<code src="./demo/vertical.tsx">Vertical Space</code>
-<code src="./demo/size.tsx">Space Size</code>
-<code src="./demo/align.tsx">Align</code>
-<code src="./demo/customize.tsx">Customize Size</code>
-<code src="./demo/wrap.tsx">Wrap</code>
-<code src="./demo/debug.tsx">Diverse Child</code>
-<code src="./demo/gap-in-line.tsx">Flex gap style</code>
-<code src="./demo/split.tsx">Split</code>
-
 ## API

 | Property  | Description                                 | Type                                     | Default      | Version               |
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 布局
+type: 布局
 subtitle: 间距
 title: Space
 cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
-demo:
-  cols: 2
 ---

 设置组件之间的间距。
@ -29,18 +27,6 @@ demo:
 <code src="./demo/gap-in-line.tsx">Flex gap 样式</code>
 <code src="./demo/split.tsx">分隔符</code>

-## 代码演示
-
-<code src="./demo/base.tsx">基本用法</code>
-<code src="./demo/vertical.tsx">垂直间距</code>
-<code src="./demo/size.tsx">间距大小</code>
-<code src="./demo/align.tsx">对齐</code>
-<code src="./demo/customize.tsx">自定义尺寸</code>
-<code src="./demo/wrap.tsx">自动换行</code>
-<code src="./demo/debug.tsx">多样的 Child</code>
-<code src="./demo/gap-in-line.tsx">Flex gap 样式</code>
-<code src="./demo/split.tsx">分隔符</code>
-
 ## API

 | 参数      | 说明                                   | 类型                                     | 默认值       | 版本                  |
--- a/components/spin/index.en-US.md
+++ b/components/spin/index.en-US.md
@ -1,10 +1,8 @@
 ---
 category: Components
-group: Feedback
+type: Feedback
 title: Spin
 cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -25,16 +23,6 @@ When part of the page is waiting for asynchronous data or during a rendering pro
 <code src="./demo/delayAndDebounce.tsx">delay</code>
 <code src="./demo/custom-indicator.tsx">Custom spinning indicator</code>

-## Examples
-
-<code src="./demo/basic.tsx">basic Usage</code>
-<code src="./demo/size.tsx">Size</code>
-<code src="./demo/inside.tsx">Inside a container</code>
-<code src="./demo/nested.tsx">Embedded mode</code>
-<code src="./demo/tip.tsx">Customized description</code>
-<code src="./demo/delayAndDebounce.tsx">delay</code>
-<code src="./demo/custom-indicator.tsx">Custom spinning indicator</code>
-
 ## API

 | Property         | Description                                                         | Type                  | Default   |
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@ -1,11 +1,9 @@
 ---
 category: Components
-group: 反馈
+type: 反馈
 title: Spin
 subtitle: 加载中
 cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg
-demo:
-  cols: 2
 demo:
  cols: 2
 ---
@ -26,16 +24,6 @@ demo:
 <code src="./demo/delayAndDebounce.tsx">延迟</code>
 <code src="./demo/custom-indicator.tsx">自定义指示符</code>

-## 代码演示
-
-<code src="./demo/basic.tsx">基本用法</code>
-<code src="./demo/size.tsx">各种大小</code>
-<code src="./demo/inside.tsx">容器</code>
-<code src="./demo/nested.tsx">卡片加载中</code>
-<code src="./demo/tip.tsx">自定义描述文案</code>
-<code src="./demo/delayAndDebounce.tsx">延迟</code>
-<code src="./demo/custom-indicator.tsx">自定义指示符</code>
-
 ## API

 | 参数             | 说明                                         | 类型          | 默认值    |
--- a/Show More
+++ b/Show More