docs: fix demo (#38094)

* chore: update migrate.js

* docs: update md

* docs: update demo

* test: fix snapshot

* chore: move debug to code attr in migrate script

* chore: update md

Co-authored-by: PeachScript <scdzwyxst@gmail.com>

.jest.js

@@ -40,6 +40,7 @@ module.exports = {
     '!components/**/*/interface.{ts,tsx}',
     '!components/*/__tests__/image.test.{ts,tsx}',
     '!components/__tests__/node.test.tsx',
+    '!components/*/demo/*.tsx',
   ],
   transformIgnorePatterns,
   globals: {

components/affix/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { Affix, Button } from 'antd';
 import React, { useState } from 'react';
+import { Affix, Button } from 'antd';
 
 const App: React.FC = () => {
   const [top, setTop] = useState(10);

components/affix/demo/debug.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Affix, Button } from 'antd';
 import React, { useState } from 'react';
+import { Affix, Button } from 'antd';
 
 const App: React.FC = () => {
   const [top, setTop] = useState(10);

components/affix/demo/on-change.tsx

@@ -1,5 +1,5 @@
-import { Affix, Button } from 'antd';
 import React from 'react';
+import { Affix, Button } from 'antd';
 
 const App: React.FC = () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>

components/affix/demo/target.tsx

@@ -1,5 +1,5 @@
-import { Affix, Button } from 'antd';
 import React, { useState } from 'react';
+import { Affix, Button } from 'antd';
 
 const App: React.FC = () => {
   const [container, setContainer] = useState<HTMLDivElement | null>(null);

components/affix/index.en-US.md

@@ -1,10 +1,12 @@
 ---
 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
 ---
 
 Wrap Affix around another component to make it stick the viewport.
@@ -20,12 +22,12 @@ Please note that Affix should not cover other content on the page, especially wh
 <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>
+<code src="./demo/debug.tsx" debug>debug</code>
 
 ## API
 
 | Property | Description | Type | Default |
-| ------------ | -------------------------------------------------- | --------------------------- | ------------ |
+| --- | --- | --- | --- |
 | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
 | offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
 | target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |

components/affix/index.zh-CN.md

@@ -1,11 +1,13 @@
 ---
 category: Components
 subtitle: 固钉
-type: 导航
 title: Affix
 cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 demo:
   cols: 2
+group:
+  title: 导航
+  order: 3
 ---
 
 将页面元素钉在可视范围。
@@ -21,12 +23,12 @@ demo:
 <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>
+<code src="./demo/debug.tsx" debug>调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678</code>
 
 ## API
 
 | 成员 | 说明 | 类型 | 默认值 |
-| ------------ | ---------------------------------------------------------------------- | --------------------------- | ------------ |
+| --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | 0 |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |

components/alert/demo/action.tsx

@@ -1,5 +1,5 @@
-import { Alert, Button, Space } from 'antd';
 import React from 'react';
+import { Alert, Button, Space } from 'antd';
 
 const App: React.FC = () => (
   <>

components/alert/demo/banner.tsx

@@ -1,9 +1,9 @@
+import React from 'react';
 /*
  * iframe: 250
  */
 
 import { Alert } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/alert/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 
 const App: React.FC = () => <Alert message="Success Text" type="success" />;
 

components/alert/demo/closable.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 
 const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');

components/alert/demo/close-text.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 
 const App: React.FC = () => <Alert message="Info Text" type="info" closeText="Close Now" />;
 

components/alert/demo/custom-icon.tsx

@@ -1,10 +1,6 @@
-/*
- * debug: true
- */
-
+import React from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { Alert } from 'antd';
-import React from 'react';
 
 const icon = <SmileOutlined />;
 

components/alert/demo/description.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 
 const App: React.FC = () => (
   <>

components/alert/demo/error-boundary.tsx

@@ -1,5 +1,5 @@
-import { Alert, Button } from 'antd';
 import React, { useState } from 'react';
+import { Alert, Button } from 'antd';
 
 const { ErrorBoundary } = Alert;
 const ThrowError: React.FC = () => {

components/alert/demo/icon.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 
 const App: React.FC = () => (
   <>

components/alert/demo/loop-banner.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 import Marquee from 'react-fast-marquee';
 
 const App: React.FC = () => (

components/alert/demo/smooth-closed.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React, { useState } from 'react';
+import { Alert } from 'antd';
 
 const App: React.FC = () => {
   const [visible, setVisible] = useState(true);

components/alert/demo/style.tsx

@@ -1,5 +1,5 @@
-import { Alert } from 'antd';
 import React from 'react';
+import { Alert } from 'antd';
 
 const App: React.FC = () => (
   <>

components/alert/index.en-US.md

@@ -1,10 +1,12 @@
 ---
 category: Components
-type: Feedback
 title: Alert
 cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 demo:
   cols: 2
+group:
+  title: Feedback
+  order: 6
 ---
 
 Alert component for feedback.
@@ -26,13 +28,13 @@ Alert component for feedback.
 <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/custom-icon.tsx" debug>Custom Icon</code>
 <code src="./demo/action.tsx">Custom action</code>
 
 ## API
 
 | Property | Description | Type | Default | Version |
-| ----------- | -------------------------------------------------------------------- | ----------------------- | --------------------------------------------- | ------- |
+| --- | --- | --- | --- | --- |
 | action | The action of Alert | ReactNode | - | 4.9.0 |
 | afterClose | Called when close animation is finished | () => void | - |  |
 | banner | Whether to show as banner | boolean | false |  |

components/alert/index.zh-CN.md

@@ -1,11 +1,13 @@
 ---
 category: Components
 subtitle: 警告提示
-type: 反馈
 title: Alert
 cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 demo:
   cols: 2
+group:
+  title: 反馈
+  order: 6
 ---
 
 警告提示，展现需要关注的信息。
@@ -27,13 +29,13 @@ demo:
 <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/custom-icon.tsx" debug>自定义图标</code>
 <code src="./demo/action.tsx">操作</code>
 
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- | ------ |
+| --- | --- | --- | --- | --- |
 | action | 自定义操作项 | ReactNode | - | 4.9.0 |
 | afterClose | 关闭动画结束后触发的回调函数 | () => void | - |  |
 | banner | 是否用作顶部公告 | boolean | false |  |
@@ -50,6 +52,6 @@ demo:
 ### Alert.ErrorBoundary
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ----------- | -------------------------------------------- | --------- | ----------------- | ---- |
+| --- | --- | --- | --- | --- |
 | description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} |  |
 | message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} |  |

components/anchor/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from 'antd';
 import React from 'react';
+import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 

components/anchor/demo/customizeHighlight.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from 'antd';
 import React from 'react';
+import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 

components/anchor/demo/onChange.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from 'antd';
 import React from 'react';
+import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 

components/anchor/demo/onClick.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from 'antd';
 import React from 'react';
+import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 

components/anchor/demo/static.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from 'antd';
 import React from 'react';
+import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 

components/anchor/demo/targetOffset.tsx

@@ -1,5 +1,5 @@
-import { Anchor } from 'antd';
 import React, { useEffect, useState } from 'react';
+import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 

components/anchor/index.en-US.md

@@ -1,9 +1,11 @@
 ---
 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.
@@ -26,7 +28,7 @@ For displaying anchor hyperlinks on page and jumping between them.
 ### Anchor Props
 
 | Property | Description | Type | Default | Version |
-| ---------------- | --------------------------------------------------------------------------------------------- | ----------------------------------- | ------------ | ------- |
+| --- | --- | --- | --- | --- |
 | affix | Fixed mode of Anchor | boolean | true |  |
 | bounds | Bounding distance of anchor area | number | 5 |  |
 | getContainer | Scrolling container | () => HTMLElement | () => window |  |

components/anchor/index.zh-CN.md

@@ -2,9 +2,11 @@
 category: Components
 subtitle: 锚点
 cols: 2
-type: 其他
 title: Anchor
 cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
+group:
+  title: 其他
+  order: 7
 ---
 
 用于跳转到页面指定位置。
@@ -27,7 +29,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 ### Anchor Props
 
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
-| ---------------- | ----------------------------------------------------------------------------------- | ----------------------------------- | ------------ | ---- |
+| --- | --- | --- | --- | --- |
 | affix | 固定模式 | boolean | true |  |
 | bounds | 锚点区域边界 | number | 5 |  |
 | getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |

components/auto-complete/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete } from 'antd';
 import React, { useState } from 'react';
+import { AutoComplete } from 'antd';
 
 const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),

components/auto-complete/demo/certain-category.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { AutoComplete, Input } from 'antd';
-import React from 'react';
 
 const renderTitle = (title: string) => (
   <span>

components/auto-complete/demo/custom.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete, Input } from 'antd';
 import React, { useState } from 'react';
+import { AutoComplete, Input } from 'antd';
 
 const { TextArea } = Input;
 

components/auto-complete/demo/form-debug.tsx

@@ -1,10 +1,6 @@
-/*
- * debug: true
- */
-
+import React from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';
-import React from 'react';
 
 const formItemLayout = {
   labelCol: {

components/auto-complete/demo/non-case-sensitive.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete } from 'antd';
 import React from 'react';
+import { AutoComplete } from 'antd';
 
 const options = [
   { value: 'Burns Bay Road' },

components/auto-complete/demo/options.tsx

@@ -1,5 +1,5 @@
-import { AutoComplete } from 'antd';
 import React, { useState } from 'react';
+import { AutoComplete } from 'antd';
 
 const App: React.FC = () => {
   const [options, setOptions] = useState<{ value: string; label: string }[]>([]);

components/auto-complete/demo/render-panel.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { AutoComplete, Switch, Space } from 'antd';
 import React from 'react';
+import { AutoComplete, Switch, Space } from 'antd';
 
 const { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;
 

components/auto-complete/demo/status.tsx

@@ -1,9 +1,9 @@
+import React, { useState } from 'react';
 /*
  * version: 4.19.0
  */
 
 import { AutoComplete, Space } from 'antd';
-import React, { useState } from 'react';
 
 const mockVal = (str: string, repeat = 1) => ({
   value: str.repeat(repeat),

components/auto-complete/demo/uncertain-category.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { AutoComplete, Input } from 'antd';
 import type { SelectProps } from 'antd/es/select';
-import React, { useState } from 'react';
 
 const getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
 

components/auto-complete/index.en-US.md

@@ -1,9 +1,11 @@
 ---
 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.
@@ -27,13 +29,13 @@ The differences with Select are:
 <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>
+<code src="./demo/form-debug.tsx" debug>Debug in Form</code>
+<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 
 ## API
 
 | Property | Description | Type | Default | Version |
-| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------ | ------- |
+| --- | --- | --- | --- | --- |
 | allowClear | Show clear button | boolean | false |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | backfill | If backfill selected item the input when using keyboard | boolean | false |  |

components/auto-complete/index.zh-CN.md

@@ -1,10 +1,12 @@
 ---
 category: Components
 subtitle: 自动完成
-type: 数据录入
 cols: 2
 title: AutoComplete
 cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
+group:
+  title: 数据录入
+  order: 4
 ---
 
 输入框自动完成功能。
@@ -28,13 +30,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 <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>
+<code src="./demo/form-debug.tsx" debug>在 Form 中 Debug</code>
+<code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 
 ## API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | ------------------- | ------ |
+| --- | --- | --- | --- | --- |
 | allowClear | 支持清除 | boolean | false |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |

components/avatar/demo/badge.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Badge } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/basic.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/dynamic.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Button } from 'antd';
 import React, { useState } from 'react';
+import { Avatar, Button } from 'antd';
 
 const UserList = ['U', 'Lucy', 'Tom', 'Edward'];
 const ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];

components/avatar/demo/fallback.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Avatar } from 'antd';
 import React from 'react';
+import { Avatar } from 'antd';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/group.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
 import { Avatar, Divider, Tooltip } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/demo/responsive.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { AntDesignOutlined } from '@ant-design/icons';
 import { Avatar } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <Avatar

components/avatar/demo/toggle-debug.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Avatar, Button } from 'antd';
 import React, { useState } from 'react';
+import { Avatar, Button } from 'antd';
 
 type SizeType = 'large' | 'small' | 'default' | number;
 

components/avatar/demo/type.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { UserOutlined } from '@ant-design/icons';
 import { Avatar, Image } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/avatar/index.en-US.md

@@ -1,10 +1,12 @@
 ---
 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
 ---
 
 Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
@@ -16,16 +18,16 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 <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/toggle-debug.tsx" debug>Calculate text style when hiding</code>
 <code src="./demo/responsive.tsx">Responsive Size</code>
-<code src="./demo/fallback.tsx">Fallback</code>
+<code src="./demo/fallback.tsx" debug>Fallback</code>
 
 ## API
 
 ### Avatar
 
 | Property | Description | Type | Default | Version |
-| ----------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | --------- | ---------------- |
+| --- | --- | --- | --- | --- |
 | alt | This attribute defines the alternative text describing the image | string | - |  |
 | gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
 | icon | Custom icon type for an icon avatar | ReactNode | - |  |
@@ -42,7 +44,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 ### Avatar.Group (4.5.0+)
 
 | Property | Description | Type | Default | Version |
-| ------------------- | ---------------------------------------- | --------------------------------------------------------------------------- | --------- | ------- |
+| --- | --- | --- | --- | --- |
 | maxCount | Max avatars to show | number | - |  |
 | maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` |  |
 | maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |

components/avatar/index.zh-CN.md

@@ -1,11 +1,13 @@
 ---
 category: Components
 subtitle: 头像
-type: 数据展示
 title: Avatar
 cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 demo:
   cols: 2
+group:
+  title: 数据展示
+  order: 5
 ---
 
 用来代表用户或事物，支持图片、图标或字符展示。
@@ -21,16 +23,16 @@ demo:
 <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/toggle-debug.tsx" debug>隐藏情况下计算字符对齐</code>
 <code src="./demo/responsive.tsx">响应式尺寸</code>
-<code src="./demo/fallback.tsx">图片不存在时</code>
+<code src="./demo/fallback.tsx" debug>图片不存在时</code>
 
 ## API
 
 ### Avatar
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ----------- | ------------------------------------------------------------- | --------------------------------------------------------------------------- | --------- | ---------------- |
+| --- | --- | --- | --- | --- |
 | alt | 图像无法显示时的替代文本 | string | - |  |
 | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
 | icon | 设置头像的自定义图标 | ReactNode | - |  |
@@ -47,7 +49,7 @@ demo:
 ### Avatar.Group (4.5.0+)
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ------------------- | ------------------------------- | --------------------------------------------------------------------------- | --------- | ------ |
+| --- | --- | --- | --- | --- |
 | maxCount | 显示的最大头像个数 | number | - |  |
 | maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` |  |
 | maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |

components/back-top/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { BackTop } from 'antd';
 import React from 'react';
+import { BackTop } from 'antd';
 
 const App: React.FC = () => (
   <>

components/back-top/demo/custom.tsx

@@ -1,9 +1,9 @@
+import React from 'react';
 /*
  * iframe: 400
  */
 
 import { BackTop } from 'antd';
-import React from 'react';
 
 const style: React.CSSProperties = {
   height: 40,

components/back-top/index.en-US.md

@@ -1,10 +1,10 @@
 ---
 category: Components
-type: Other
 title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 demo:
   cols: 2
+group: Other
 ---
 
 `BackTop` makes it easy to go back to the top of the page.
@@ -26,7 +26,7 @@ demo:
 > If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
 
 | Property | Description | Type | Default | Version |
-| ---------------- | --------------------------------------------------------------------------- | ----------------- | ------------ | ------- |
+| --- | --- | --- | --- | --- |
 | duration | Time to return to top（ms） | number | 450 | 4.4.0 |
 | target | Specifies the scrollable area dom node | () => HTMLElement | () => window |  |
 | visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 |  |

components/back-top/index.zh-CN.md

@@ -1,11 +1,11 @@
 ---
 category: Components
-type: 其他
 subtitle: 回到顶部
 title: BackTop
 cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 demo:
   cols: 2
+group: 其他
 ---
 
 返回页面顶部的操作按钮。
@@ -27,7 +27,7 @@ demo:
 > 自定义样式宽高不大于 40px \* 40px。
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ---------------- | ------------------------------------------------------------- | ----------------- | ------------ | ----- |
+| --- | --- | --- | --- | --- |
 | duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |
 | target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |
 | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  |

components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -566,10 +566,7 @@ Array [
 ]
 `;
 
-<<<<<<< HEAD
-exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
-=======
-exports[`renders ./components/badge/demo/colorful-with-count-debug.md extend context correctly 1`] = `
+exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = `
 Array [
   <div
     style="display:inline-block;vertical-align:middle"
@@ -1081,8 +1078,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/dot.md extend context correctly 1`] = `
->>>>>>> next
+exports[`renders ./components/badge/demo/dot.tsx extend context correctly 1`] = `
 Array [
   <span
     class="ant-badge"

components/badge/__tests__/__snapshots__/demo.test.ts.snap

@@ -566,10 +566,7 @@ Array [
 ]
 `;
 
-<<<<<<< HEAD
-exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
-=======
-exports[`renders ./components/badge/demo/colorful-with-count-debug.md correctly 1`] = `
+exports[`renders ./components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
 Array [
   <div
     style="display:inline-block;vertical-align:middle"
@@ -1081,8 +1078,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/badge/demo/dot.md correctly 1`] = `
->>>>>>> next
+exports[`renders ./components/badge/demo/dot.tsx correctly 1`] = `
 Array [
   <span
     class="ant-badge"

components/badge/demo/basic.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { ClockCircleOutlined } from '@ant-design/icons';
 import { Avatar, Badge } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/badge/demo/change.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
 import { Avatar, Badge, Button, Divider, Switch } from 'antd';
-import React, { useState } from 'react';
 
 const ButtonGroup = Button.Group;
 

components/badge/demo/colorful-with-count-debug.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Badge } from 'antd';
 import React from 'react';
+import { Badge } from 'antd';
 
 const colors = [
   'pink',

components/badge/demo/colorful.tsx

@@ -1,5 +1,5 @@
-import { Badge, Divider, Space } from 'antd';
 import React from 'react';
+import { Badge, Divider, Space } from 'antd';
 
 const colors = [
   'pink',

components/badge/demo/dot.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { NotificationOutlined } from '@ant-design/icons';
 import { Badge } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/badge/demo/link.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Badge } from 'antd';
 import React from 'react';
+import { Avatar, Badge } from 'antd';
 
 const App: React.FC = () => (
   <a href="#">

components/badge/demo/mix.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Avatar, Badge } from 'antd';
 import React from 'react';
+import { Avatar, Badge } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/no-wrapper.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { ClockCircleOutlined } from '@ant-design/icons';
 import { Badge, Space, Switch } from 'antd';
-import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [show, setShow] = useState(true);

components/badge/demo/offset.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Badge } from 'antd';
 import React from 'react';
+import { Avatar, Badge } from 'antd';
 
 const App: React.FC = () => (
   <Badge count={5} offset={[10, 10]}>

components/badge/demo/overflow.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Badge } from 'antd';
 import React from 'react';
+import { Avatar, Badge } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/ribbbon.tsx

@@ -1,5 +1,5 @@
-import { Badge, Card } from 'antd';
 import React from 'react';
+import { Badge, Card } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/ribbon-debug.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Badge, Card, Space } from 'antd';
 import React from 'react';
+import { Badge, Card, Space } from 'antd';
 
 const App: React.FC = () => (
   <Space direction="vertical" style={{ width: '100%' }}>

components/badge/demo/size.tsx

@@ -1,5 +1,5 @@
-import { Avatar, Badge } from 'antd';
 import React from 'react';
+import { Avatar, Badge } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/status.tsx

@@ -1,5 +1,5 @@
-import { Badge, Space } from 'antd';
 import React from 'react';
+import { Badge, Space } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/demo/title.tsx

@@ -1,9 +1,5 @@
-/*
- * debug: true
- */
-
-import { Avatar, Badge } from 'antd';
 import React from 'react';
+import { Avatar, Badge } from 'antd';
 
 const App: React.FC = () => (
   <>

components/badge/index.en-US.md

@@ -1,10 +1,10 @@
 ---
 category: Components
-type: Data Display
 title: Badge
 cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 demo:
   cols: 2
+group: Data Display
 ---
 
 Small numerical value or status descriptor for UI elements.
@@ -26,17 +26,17 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 <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>
-<code src="./demo/colorful-with-count-debug.tsx">Colorful Badge support count Debug</code>
+<code src="./demo/ribbon-debug.tsx" debug>Ribbon Debug</code>
+<code src="./demo/mix.tsx" debug>Mixed usage</code>
+<code src="./demo/title.tsx" debug>Title</code>
+<code src="./demo/colorful-with-count-debug.tsx" debug>Colorful Badge support count Debug</code>
 
 ## API
 
 ### Badge
 
 | Property | Description | Type | Default | Version |
-| ------------- | -------------------------------------------------------------------- | -------------------------------------------------------------- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - |  |
 | count | Number to show in badge | ReactNode | - |  |
 | dot | Whether to display a red dot instead of `count` | boolean | false |  |
@@ -51,7 +51,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 ### Badge.Ribbon (4.5.0+)
 
 | Property | Description | Type | Default | Version |
-| --------- | --------------------------------------------------------------------------------- | ---------------- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | color | Customize Ribbon color | string | - |  |
 | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` |  |
 | text | Content inside the Ribbon | ReactNode | - |  |

components/badge/index.zh-CN.md

@@ -1,11 +1,11 @@
 ---
 category: Components
 subtitle: 徽标数
-type: 数据展示
 title: Badge
 cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 demo:
   cols: 2
+group: 数据展示
 ---
 
 图标右上角的圆形徽标数字。
@@ -27,17 +27,17 @@ demo:
 <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/colorful-with-count-debug.tsx">多彩徽标支持 count 显示 Debug</code>
+<code src="./demo/ribbon-debug.tsx" debug>Ribbon Debug</code>
+<code src="./demo/mix.tsx" debug>各种混用的情况</code>
+<code src="./demo/title.tsx" debug>自定义标题</code>
+<code src="./demo/colorful-with-count-debug.tsx" debug>多彩徽标支持 count 显示 Debug</code>
 
 ## API
 
 ### Badge
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------- | ------ | ----- |
+| --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - |  |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode | - |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
@@ -52,7 +52,7 @@ demo:
 ### Badge.Ribbon (4.5.0+)
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --------- | --------------------------------------------------------- | ---------------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
 | color | 自定义缎带的颜色 | string | - |  |
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |

components/breadcrumb/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
   <Breadcrumb>

components/breadcrumb/demo/overlay.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb, Menu } from 'antd';
 import React from 'react';
+import { Breadcrumb, Menu } from 'antd';
 
 const menu = (
   <Menu

components/breadcrumb/demo/react-router.tsx

@@ -1,10 +1,10 @@
+import React from 'react';
 /*
  * iframe: 200
  * reactRouter: react-router-dom
  */
 
 import { Alert, Breadcrumb } from 'antd';
-import React from 'react';
 import { HashRouter, Link, Route, Routes, useLocation } from 'react-router-dom';
 
 const Apps = () => (

components/breadcrumb/demo/separator-component.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
   <Breadcrumb separator="">

components/breadcrumb/demo/separator.tsx

@@ -1,5 +1,5 @@
-import { Breadcrumb } from 'antd';
 import React from 'react';
+import { Breadcrumb } from 'antd';
 
 const App: React.FC = () => (
   <Breadcrumb separator=">">

components/breadcrumb/demo/withIcon.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 import { Breadcrumb } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <Breadcrumb>

components/breadcrumb/index.en-US.md

@@ -1,6 +1,6 @@
 ---
 category: Components
-type: Navigation
+group: Navigation
 title: Breadcrumb
 cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 demo:
@@ -29,7 +29,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 ### Breadcrumb
 
 | Property | Description | Type | Default | Version |
-| ---------- | --------------------------------------- | ------------------------------------------- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | - |  |
 | params | Routing parameters | object | - |  |
 | routes | The routing stack information of router | [routes\[\]](#routes) | - |  |
@@ -38,7 +38,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 ### Breadcrumb.Item
 
 | Property | Description | Type | Default | Version |
-| ------------- | ------------------------------------- | -------------------------------------- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | className | The additional css class | string | - |  |
 | dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 | href | Target of hyperlink | string | - |  |
@@ -48,7 +48,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 ### Breadcrumb.Separator
 
 | Property | Description | Type | Default | Version |
-| -------- | ---------------- | --------- | ------- | ------- |
+| --- | --- | --- | --- | --- |
 | children | Custom separator | ReactNode | `/` |  |
 
 > When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.

components/breadcrumb/index.zh-CN.md

@@ -1,7 +1,7 @@
 ---
 category: Components
 subtitle: 面包屑
-type: 导航
+group: 导航
 title: Breadcrumb
 cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 demo:
@@ -30,7 +30,7 @@ demo:
 ### Breadcrumb
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ---------- | ---------------------------------------- | ------------------------------------------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
 | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |  |
 | params | 路由的参数 | object | - |  |
 | routes | router 的路由栈信息 | [routes\[\]](#routes) | - |  |
@@ -39,7 +39,7 @@ demo:
 ### Breadcrumb.Item
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| ------------- | ------------------------ | -------------------------------------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
 | className | 自定义类名 | string | - |  |
 | dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 | href | 链接的目的地 | string | - |  |
@@ -49,7 +49,7 @@ demo:
 ### Breadcrumb.Separator
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | -------------- | --------- | ------ | ---- |
+| --- | --- | --- | --- | --- |
 | children | 要显示的分隔符 | ReactNode | `/` |  |
 
 > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。

components/button/demo/basic.tsx

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import React from 'react';
+import { Button } from 'antd';
 
 const App: React.FC = () => (
   <>

components/button/demo/block.tsx

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import React from 'react';
+import { Button } from 'antd';
 
 const App: React.FC = () => (
   <>

components/button/demo/chinese-chars-loading.tsx

@@ -1,10 +1,6 @@
-/*
- * debug: true
- */
-
+import React from 'react';
 import { PoweroffOutlined } from '@ant-design/icons';
 import { Button } from 'antd';
-import React from 'react';
 
 const Text1 = () => '部署';
 const Text2 = () => <span>部署</span>;

components/button/demo/danger.tsx

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import React from 'react';
+import { Button } from 'antd';
 
 const App: React.FC = () => (
   <>

components/button/demo/disabled.tsx

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import React from 'react';
+import { Button } from 'antd';
 
 const App: React.FC = () => (
   <>

components/button/demo/ghost.tsx

@@ -1,5 +1,5 @@
-import { Button } from 'antd';
 import React from 'react';
+import { Button } from 'antd';
 
 const App: React.FC = () => (
   <div className="site-button-ghost-wrapper">

components/button/demo/icon.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import { SearchOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
-import React from 'react';
 
 const App: React.FC = () => (
   <>

components/button/demo/legacy-group.tsx

@@ -1,11 +1,7 @@
-/*
- * debug: true
- */
-
+import React from 'react';
 import { DownloadOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import type { ButtonGroupProps } from 'antd/es/button';
-import React from 'react';
 
 const getGroup = (props?: ButtonGroupProps) => (
   <div>

components/button/demo/loading.tsx

@@ -1,6 +1,6 @@
+import React, { useState } from 'react';
 import { PoweroffOutlined } from '@ant-design/icons';
 import { Button, Space } from 'antd';
-import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [loadings, setLoadings] = useState<boolean[]>([]);

components/button/demo/multiple.tsx

@@ -1,6 +1,6 @@
+import React from 'react';
 import type { MenuProps } from 'antd';
 import { Button, Dropdown, Menu } from 'antd';
-import React from 'react';
 
 const onMenuClick: MenuProps['onClick'] = e => {
   console.log('click', e);

components/button/demo/size.tsx

@@ -1,7 +1,7 @@
+import React, { useState } from 'react';
 import { DownloadOutlined } from '@ant-design/icons';
 import { Button, Radio } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
-import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('large');

components/button/index.en-US.md

@@ -1,10 +1,12 @@
 ---
 category: Components
-type: General
 title: Button
 cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 demo:
   cols: 2
+group:
+  title: General
+  order: 1
 ---
 
 To trigger an operation.
@@ -39,15 +41,15 @@ And 4 other properties additionally.
 <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>
+<code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code>
+<code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
 
 ## API
 
 Different button styles can be generated by setting Button properties. The recommended order is: `type` -> `shape` -> `size` -> `loading` -> `disabled`.
 
 | Property | Description | Type | Default | Version |
-| -------- | -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------- | ------- |
+| --- | --- | --- | --- | --- |
 | block | Option to fit button width to its parent width | boolean | false |  |
 | danger | Set the danger status of button | boolean | false |  |
 | disabled | Disabled state of button | boolean | false |  |

components/button/index.zh-CN.md

@@ -1,11 +1,13 @@
 ---
 category: Components
-type: 通用
 title: Button
 subtitle: 按钮
 cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 demo:
   cols: 2
+group:
+  title: 通用
+  order: 1
 ---
 
 按钮用于开始一个即时操作。
@@ -42,8 +44,8 @@ demo:
 <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>
+<code src="./demo/legacy-group.tsx" debug>废弃的 Block 组</code>
+<code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 
 ## API
 
@@ -52,7 +54,7 @@ demo:
 按钮的属性说明如下：
 
 | 属性 | 说明 | 类型 | 默认值 | 版本 |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | --------- | ---- |
+| --- | --- | --- | --- | --- |
 | block | 将按钮宽度调整为其父宽度的选项 | boolean | false |  |
 | danger | 设置危险按钮 | boolean | false |  |
 | disabled | 按钮失效状态 | boolean | false |  |

components/calendar/demo/basic.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
-import React from 'react';
 
 const App: React.FC = () => {
   const onPanelChange = (value: Dayjs, mode: CalendarMode) => {

components/calendar/demo/card.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import { Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
-import React from 'react';
 
 const App: React.FC = () => {
   const onPanelChange = (value: Dayjs, mode: CalendarMode) => {

components/calendar/demo/customize-header.tsx

@@ -1,10 +1,10 @@
+import React from 'react';
 import { Calendar, Col, Radio, Row, Select, Typography } from 'antd';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
 import dayLocaleData from 'dayjs/plugin/localeData';
 import type { CalendarMode } from 'antd/es/calendar/generateCalendar';
-import React from 'react';
 
 dayjs.extend(dayLocaleData);
 

components/calendar/demo/notice-calendar.tsx

@@ -1,7 +1,7 @@
+import React from 'react';
 import type { BadgeProps } from 'antd';
 import { Badge, Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
-import React from 'react';
 
 const getListData = (value: Dayjs) => {
   let listData;

components/calendar/demo/select.tsx

@@ -1,7 +1,7 @@
+import React, { useState } from 'react';
 import { Alert, Calendar } from 'antd';
 import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
-import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [value, setValue] = useState(() => dayjs('2017-01-25'));

components/calendar/index.en-US.md

@@ -1,8 +1,10 @@
 ---
 category: Components
-type: Data Display
+group: Data Display
 title: Calendar
 cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
+demo:
+  cols: 2
 ---
 
 Container for displaying data in calendar form.
@@ -38,7 +40,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 ```
 
 | Property | Description | Type | Default | Version |
-| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
+| --- | --- | --- | --- | --- |
 | dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: Dayjs): ReactNode | - |  |
 | dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: Dayjs): ReactNode | - |  |
 | defaultValue | The date selected by default | [dayjs](https://day.js.org/) | - |  |