docs: Fix component doc alignment & support import usage (#48004)

* docs: init ref

* docs all support

* docs: fix link show

.dumi/theme/builtins/ComponentMeta/index.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable lodash/import-scope */
+import React from 'react';
+import { GithubOutlined } from '@ant-design/icons';
+import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd';
+import { createStyles, css } from 'antd-style';
+import { kebabCase } from 'lodash';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+import useLocale from '../../../hooks/useLocale';
+
+const locales = {
+  cn: {
+    import: '使用',
+    copy: '复制',
+    copied: '已复制',
+    source: '源码',
+  },
+  en: {
+    import: 'Import',
+    copy: 'Copy',
+    copied: 'Copied',
+    source: 'Source',
+  },
+};
+
+const useStyle = createStyles(({ token }) => ({
+  code: css`
+    cursor: pointer;
+    position: relative;
+    display: inline-block;
+    border-radius: 3px;
+    padding-inline: ${token.paddingXS}px;
+    transition: all ${token.motionDurationSlow} !important;
+
+    &:hover {
+      background: ${token.controlItemBgHover};
+    }
+  `,
+}));
+
+export interface ComponentMetaProps {
+  component: string;
+  source: string | true;
+}
+
+const ComponentMeta = (props: ComponentMetaProps) => {
+  const { component, source } = props;
+  const { token } = theme.useToken();
+
+  const [locale] = useLocale(locales);
+
+  const { styles } = useStyle();
+
+  // ========================= Copy =========================
+  const [copied, setCopied] = React.useState(false);
+
+  const onCopy = () => {
+    setCopied(true);
+  };
+
+  const onOpenChange = (open: boolean) => {
+    if (open) {
+      setCopied(false);
+    }
+  };
+
+  // ======================== Source ========================
+  const [filledSource, abbrSource] = React.useMemo(() => {
+    if (String(source) === 'true') {
+      const kebabComponent = kebabCase(component);
+      return [
+        `https://github.com/ant-design/ant-design/blob/master/components/${kebabComponent}`,
+        `components/${kebabComponent}`,
+      ];
+    }
+
+    if (typeof source !== 'string') {
+      return [null, null];
+    }
+
+    return [source, source];
+  }, [component, source]);
+
+  // ======================== Render ========================
+  const importList = [
+    <span key="import" style={{ color: token.magenta8 }}>
+      import
+    </span>,
+    <span key="component" style={{ color: token.colorText }}>{` { ${component} } `}</span>,
+    <span key="from" style={{ color: token.magenta8 }}>
+      from
+    </span>,
+    <span key="antd" style={{ color: token.green8 }}>
+      {`'antd'`}
+    </span>,
+    <span key="semicolon" style={{ color: token.colorText }}>
+      ;
+    </span>,
+  ];
+
+  return (
+    <Descriptions
+      size="small"
+      colon={false}
+      column={1}
+      style={{ marginTop: token.margin }}
+      labelStyle={{
+        paddingInlineEnd: token.padding,
+      }}
+      items={
+        [
+          {
+            label: locale.import,
+            children: (
+              <Tooltip
+                placement="right"
+                title={copied ? locale.copied : locale.copy}
+                onOpenChange={onOpenChange}
+              >
+                <span>
+                  <CopyToClipboard text={`import { ${component} } from 'antd';`} onCopy={onCopy}>
+                    <Typography.Text className={styles.code} onClick={onCopy}>
+                      {importList.map((txt, index) => (index === 0 ? txt : [' ', txt]))}
+                    </Typography.Text>
+                  </CopyToClipboard>
+                </span>
+              </Tooltip>
+            ),
+          },
+          filledSource && {
+            label: locale.source,
+            children: (
+              <Typography.Link className={styles.code} href={filledSource} target="_blank">
+                <GithubOutlined /> {abbrSource}
+              </Typography.Link>
+            ),
+          },
+        ].filter((v) => v) as GetProp<typeof Descriptions, 'items'>
+      }
+    />
+  );
+};
+
+export default ComponentMeta;

.dumi/theme/slots/Content/index.tsx

@@ -6,6 +6,7 @@ import { FormattedMessage, useRouteMeta } from 'dumi';
 
 import useLayoutState from '../../../hooks/useLayoutState';
 import useLocation from '../../../hooks/useLocation';
+import ComponentMeta from '../../builtins/ComponentMeta';
 import type { DemoContextProps } from '../DemoContext';
 import DemoContext from '../DemoContext';
 import SiteContext from '../SiteContext';
@@ -92,6 +93,13 @@ const Content: React.FC<React.PropsWithChildren> = ({ children }) => {
             <DocMeta />
           </InViewSuspense>
           {!meta.frontmatter.__autoDescription && meta.frontmatter.description}
+
+          {/* Import Info */}
+          {meta.frontmatter.category === 'Components' &&
+            String(meta.frontmatter.showImport) !== 'false' && (
+              <ComponentMeta component={meta.frontmatter.title} source />
+            )}
+
           <div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
           <InViewSuspense>
             <ColumnCard

components/_util/index.en-US.md

@@ -1,6 +1,8 @@
 ---
 category: Components
 title: Util
+description: Utilities are used to assist development and provide some common utility methods.
+showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +12,6 @@ group:
   order: 99
 ---
 
-Utilities are used to assist development and provide some common utility methods.
-
 ## GetRef
 
 Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.

components/_util/index.zh-CN.md

@@ -2,6 +2,8 @@
 category: Components
 title: Util
 subtitle: 工具类
+description: 辅助开发，提供一些常用的工具方法。
+showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*rRDlT7ST8DUAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,8 +13,6 @@ group:
   order: 99
 ---
 
-工具类用于辅助开发，提供一些常用的工具方法。
-
 ## GetRef
 
 获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。

components/affix/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Affix
+description: Stick an element to the viewport.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ group:
   order: 7
 ---
 
-Wrap Affix around another component to make it stick the viewport.
-
 ## When To Use
 
 On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.

components/affix/index.zh-CN.md

@@ -2,6 +2,7 @@
 category: Components
 title: Affix
 subtitle: 固钉
+description: 将页面元素钉在可视范围。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*03dxS64LxeQAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,8 +12,6 @@ group:
   order: 7
 ---
 
-将页面元素钉在可视范围。
-
 ## 何时使用
 
 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。

components/alert/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Alert
+description: Display warning messages that require attention.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ group:
   order: 6
 ---
 
-Alert component for feedback.
-
 ## When To Use
 
 - When you need to show alert messages to users.

components/alert/index.zh-CN.md

@@ -1,7 +1,8 @@
 ---
 category: Components
-subtitle: 警告提示
 title: Alert
+subtitle: 警告提示
+description: 警告提示，展现需要关注的信息。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QsvtS41m45UAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gOTISoMFZV0AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,8 +12,6 @@ group:
   order: 6
 ---
 
-警告提示，展现需要关注的信息。
-
 ## 何时使用
 
 - 当某个页面需要向用户显示警告的信息时。

components/anchor/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Anchor
+description: Hyperlinks to scroll on one page.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -9,8 +10,6 @@ group:
   order: 3
 ---
 
-Hyperlinks to scroll on one page.
-
 ## When To Use
 
 For displaying anchor hyperlinks on page and jumping between them.

components/anchor/index.zh-CN.md

@@ -2,6 +2,7 @@
 category: Components
 title: Anchor
 subtitle: 锚点
+description: 用于跳转到页面指定位置。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ufP1TLS5VvIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*_9_eTrgvHNQAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ group:
   order: 3
 ---
 
-用于跳转到页面指定位置。
-
 ## 何时使用
 
 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。

components/app/index.en-US.md

@@ -2,6 +2,7 @@
 category: Components
 group: Other
 title: App
+description: Application wrapper for some global usages.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -9,8 +10,6 @@ demo:
 tag: New
 ---
 
-Application wrapper for some global usages.
-
 ## When To Use
 
 - Provide reset styles based on `.ant-app` element.

components/app/index.zh-CN.md

@@ -1,8 +1,9 @@
 ---
 category: Components
-subtitle: 包裹组件
 group: 其他
 title: App
+subtitle: 包裹组件
+description: 提供重置样式和提供消费上下文的默认环境。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJz8SZos2wgAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oC92TK44Ex8AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ demo:
 tag: New
 ---
 
-新的包裹组件，提供重置样式和提供消费上下文的默认环境。
-
 ## 何时使用
 
 - 提供可消费 React context 的 `message.xxx`、`Modal.xxx`、`notification.xxx` 的静态方法，可以简化 useMessage 等方法需要手动植入 `contextHolder` 的问题。

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

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: AutoComplete
+description: Autocomplete function of input field.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAAAAAAAAAAAADrJ8AQ/original
 group:
@@ -10,8 +11,6 @@ demo:
   cols: 2
 ---
 
-Autocomplete function of input field.
-
 ## When To Use
 
 - When you need an input box instead of a selector.

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

@@ -1,7 +1,8 @@
 ---
 category: Components
-subtitle: 自动完成
 title: AutoComplete
+subtitle: 自动完成
+description: 输入框自动完成功能。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WERTQ6qvgEYAAAAAAAAAAAAADrJ8AQ/original
 group:
@@ -11,8 +12,6 @@ demo:
   cols: 2
 ---
 
-输入框自动完成功能。
-
 ## 何时使用
 
 - 需要一个输入框而不是选择器。

components/avatar/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Avatar
+description: Used to represent users or things, supporting the display of images, icons, or characters.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ group:
   order: 5
 ---
 
-Avatars can be used to represent people or objects. It supports images, `Icon`s, or letters.
-
 ## Examples
 
 <!-- prettier-ignore -->

components/avatar/index.zh-CN.md

@@ -1,7 +1,8 @@
 ---
 category: Components
-subtitle: 头像
 title: Avatar
+subtitle: 头像
+description: 用来代表用户或事物，支持图片、图标或字符展示。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YbgyQaRGz-UAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,8 +12,6 @@ group:
   order: 5
 ---
 
-用来代表用户或事物，支持图片、图标或字符展示。
-
 ## 设计师专属
 
 安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本。

components/badge/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Badge
+description: Small numerical value or status descriptor for UI elements.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -8,8 +9,6 @@ demo:
 group: Data Display
 ---
 
-Small numerical value or status descriptor for UI elements.
-
 ## When To Use
 
 Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count.

components/badge/index.zh-CN.md

@@ -1,7 +1,8 @@
 ---
 category: Components
-subtitle: 徽标数
 title: Badge
+subtitle: 徽标数
+description: 图标右上角的圆形徽标数字。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v8EQT7KoGbcAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -9,8 +10,6 @@ demo:
 group: 数据展示
 ---
 
-图标右上角的圆形徽标数字。
-
 ## 何时使用
 
 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。

components/breadcrumb/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Navigation
 title: Breadcrumb
+description: Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Tr90QKrE_LcAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-A breadcrumb displays the current location within a hierarchy. It allows going back to states higher up in the hierarchy.
-
 ## When To Use
 
 - When the system has more than two layers in a hierarchy.

components/breadcrumb/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 面包屑
 group: 导航
 title: Breadcrumb
+subtitle: 面包屑
+description: 显示当前页面在系统层级结构中的位置，并能向上返回。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Tr90QKrE_LcAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-显示当前页面在系统层级结构中的位置，并能向上返回。
-
 ## 何时使用
 
 - 当系统拥有超过两级以上的层级结构时；

components/button/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Button
+description: To trigger an operation.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ group:
   order: 1
 ---
 
-To trigger an operation.
-
 ## When To Use
 
 A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic.

components/button/index.zh-CN.md

@@ -2,6 +2,7 @@
 category: Components
 title: Button
 subtitle: 按钮
+description: 按钮用于开始一个即时操作。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7va7RKs3YzIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3T4cRqxH9-8AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,8 +12,6 @@ group:
   order: 1
 ---
 
-按钮用于开始一个即时操作。
-
 ## 何时使用
 
 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。

components/calendar/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Display
 title: Calendar
+description: A container that displays data in calendar form.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Container for displaying data in calendar form.
-
 ## When To Use
 
 When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.

components/calendar/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
 group: 数据展示
-subtitle: 日历
 title: Calendar
+subtitle: 日历
+description: 按照日历形式展示数据的容器。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-按照日历形式展示数据的容器。
-
 ## 何时使用
 
 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。

components/card/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Display
 title: Card
+description: A container for displaying information.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Simple rectangular container.
-
 ## When To Use
 
 A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.

components/card/index.zh-CN.md

@@ -3,12 +3,11 @@ category: Components
 group: 数据展示
 title: Card
 subtitle: 卡片
+description: 通用卡片容器。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QXO1SKEdIzYAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-通用卡片容器。
-
 ## 何时使用
 
 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

components/carousel/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Display
 title: Carousel
+description: A set of carousel areas.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-58QpYnqOsAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-A carousel component. Scales with its container.
-
 ## When To Use
 
 - When there is a group of content on the same level.

components/carousel/index.zh-CN.md

@@ -3,14 +3,13 @@ category: Components
 group: 数据展示
 title: Carousel
 subtitle: 走马灯
+description: 一组轮播的区域。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-58QpYnqOsAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-旋转木马，一组轮播的区域。
-
 ## 何时使用
 
 - 当有一组平级的内容。

components/cascader/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Cascader
+description: Cascade selection box.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ngTnQZNOcK0AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Nt8xR7afyr0AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Cascade selection box.
-
 ## When To Use
 
 - When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.

components/cascader/index.zh-CN.md

@@ -3,14 +3,13 @@ category: Components
 group: 数据录入
 title: Cascader
 subtitle: 级联选择
+description: 级联选择框。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ngTnQZNOcK0AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Nt8xR7afyr0AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-级联选择框。
-
 ## 何时使用
 
 - 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。

components/checkbox/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Checkbox
+description: Collect user's choices.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Checkbox component.
-
 ## When To Use
 
 - Used for selecting multiple values from several options.

components/checkbox/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 多选框
 group: 数据录入
 title: Checkbox
+subtitle: 多选框
+description: 收集用户的多项选择。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*G3MjTYXL6AIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-多选框。
-
 ## 何时使用
 
 - 在一组可选项中进行多项选择时；

components/collapse/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Display
 title: Collapse
+description: A content area which can be collapsed and expanded.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-A content area which can be collapsed and expanded.
-
 ## When To Use
 
 - Can be used to group or hide complex regions to keep the page clean.

components/collapse/index.zh-CN.md

@@ -3,12 +3,11 @@ category: Components
 group: 数据展示
 title: Collapse
 subtitle: 折叠面板
+description: 可以折叠/展开的内容区域。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-可以折叠/展开的内容区域。
-
 ## 何时使用
 
 - 对复杂区域进行分组和隐藏，保持页面的整洁。

components/color-picker/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: ColorPicker
+description: Used for color selection.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original
 tag: New
@@ -10,7 +11,7 @@ group:
   title: Data Entry
 ---
 
-Components providing color selection, Available since `5.5.0`.
+Available since `5.5.0`.
 
 ## When To Use
 

components/color-picker/index.zh-CN.md

@@ -1,7 +1,8 @@
 ---
 category: Components
-subtitle: 颜色选择器
 title: ColorPicker
+subtitle: 颜色选择器
+description: 用于选择颜色。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PpY4RYNM8UcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EHL-QYJofZsAAAAAAAAAAAAADrJ8AQ/original
 tag: New
@@ -11,7 +12,7 @@ group:
   title: 数据录入
 ---
 
-提供颜色选取的组件，自 `5.5.0` 版本开始提供该组件。
+自 `5.5.0` 版本开始提供该组件。
 
 ## 何时使用
 

components/config-provider/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Other
 title: ConfigProvider
+description: Provide a uniform configuration support for components.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-`ConfigProvider` provides a uniform configuration support for components.
-
 ## Usage
 
 This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.

components/config-provider/index.zh-CN.md

@@ -3,12 +3,11 @@ category: Components
 subtitle: 全局化配置
 group: 其他
 title: ConfigProvider
+description: 为组件提供统一的全局化配置。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YC4ERpGAddoAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-为组件提供统一的全局化配置。
-
 ## 使用
 
 ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。

components/descriptions/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Display
 title: Descriptions
+description: Display multiple read-only fields in a group.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Display multiple read-only fields in groups.
-
 ## When To Use
 
 Commonly displayed on the details page.

components/descriptions/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
-subtitle: 描述列表
 group: 数据展示
 title: Descriptions
+subtitle: 描述列表
+description: 展示多个只读字段的组合。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-成组展示多个只读字段。
-
 ## 何时使用
 
 常见于详情页的信息展示。

components/divider/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Divider
+description: A divider line separates different content.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,8 +11,6 @@ group:
   order: 2
 ---
 
-A divider line separates different content.
-
 ## When To Use
 
 - Divide sections of article.

components/divider/index.zh-CN.md

@@ -2,6 +2,7 @@
 category: Components
 title: Divider
 subtitle: 分割线
+description: 区隔内容的分割线。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KPSEQ74PLg4AAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,8 +12,6 @@ group:
   order: 2
 ---
 
-区隔内容的分割线。
-
 ## 何时使用
 
 - 对不同章节的文本段落进行分割。

components/drawer/index.en-US.md

@@ -1,16 +1,14 @@
 ---
 group: Feedback
 category: Components
-subtitle:
 title: Drawer
+description: A panel that slides out from the edge of the screen.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-A panel which slides in from the edge of the screen.
-
 ## When To Use
 
 A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since the user can interact with the Drawer without leaving the current page, tasks can be achieved more efficiently within the same context.

components/drawer/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 group: 反馈
 category: Components
-subtitle: 抽屉
 title: Drawer
+subtitle: 抽屉
+description: 屏幕边缘滑出的浮层面板。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BD2JSKm8I-kAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*r29rQ51bNdwAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-屏幕边缘滑出的浮层面板。
-
 ## 何时使用
 
 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。

components/dropdown/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Navigation
 title: Dropdown
+description: A dropdown list.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-A dropdown list.
-
 ## When To Use
 
 When there are more than a few options to choose from, you can wrap them in a `Dropdown`. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.

components/dropdown/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 下拉菜单
 group: 导航
 title: Dropdown
+subtitle: 下拉菜单
+description: 向下弹出的列表。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gTBySYX11WcAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k619RJ_7bKEAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-向下弹出的列表。
-
 ## 何时使用
 
 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

components/empty/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Display
 title: Empty
+description: Empty state placeholder.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Empty state placeholder.
-
 ## When To Use
 
 - When there is no data provided, display for friendly tips.

components/empty/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
-subtitle: 空状态
 group: 数据展示
 title: Empty
+subtitle: 空状态
+description: 空状态时的展示占位图。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-空状态时的展示占位图。
-
 ## 何时使用
 
 - 当目前没有数据时，用于显式的用户提示。

components/flex/index.en-US.md

@@ -2,12 +2,13 @@
 category: Components
 group: Layout
 title: Flex
+description: A flex layout container for alignment.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
 tag: New
 ---
 
-Flex. Available since `5.10.0`.
+Available since `5.10.0`.
 
 ## When To Use
 

components/flex/index.zh-CN.md

@@ -1,14 +1,15 @@
 ---
 category: Components
-subtitle: 弹性布局
 group: 布局
 title: Flex
+subtitle: 弹性布局
+description: 用于对齐的弹性布局容器。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*SMzgSJZE_AwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8yArQ43EGccAAAAAAAAAAAAADrJ8AQ/original
 tag: New
 ---
 
-弹性布局。自 `5.10.0` 版本开始提供该组件。
+自 `5.10.0` 版本开始提供该组件。
 
 ## 何时使用
 

components/float-button/index.en-US.md

@@ -2,6 +2,7 @@
 category: Components
 group: General
 title: FloatButton
+description: A button that floats at the top of the page.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -9,7 +10,7 @@ demo:
 tag: New
 ---
 
-FloatButton. Available since `5.0.0`.
+Available since `5.0.0`.
 
 ## When To Use
 

components/float-button/index.zh-CN.md

@@ -1,8 +1,9 @@
 ---
 category: Components
 group: 通用
-subtitle: 悬浮按钮
 title: FloatButton
+subtitle: 悬浮按钮
+description: 悬浮于页面上方的按钮。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tXAoQqyr-ioAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*hSAwR7cnabwAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -10,7 +11,7 @@ demo:
 tag: New
 ---
 
-悬浮按钮。自 `5.0.0` 版本开始提供该组件。
+自 `5.0.0` 版本开始提供该组件。
 
 ## 何时使用
 

components/form/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Entry
 title: Form
+description: High-performance form component with data domain management. Includes data entry, validation, and corresponding styles.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-High performance Form component with data scope management. Including data collection, verification, and styles.
-
 ## When to use
 
 - When you need to create an instance or collect information.

components/form/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
-subtitle: 表单
 group: 数据录入
 title: Form
+subtitle: 表单
+description: 高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
-
 ## 何时使用
 
 - 用于创建一个实体或收集信息。

components/grid/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Layout
 title: Grid
+description: 24 Grids System.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-24 Grids System.
-
 ## Design concept
 
 <div class="grid-demo">

components/grid/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
-subtitle: 栅格
 group: 布局
 title: Grid
+subtitle: 栅格
+description: 24 栅格系统。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DLUwQ4B2_zQAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-24 栅格系统。
-
 ## 设计理念
 
 <div class="grid-demo">

components/icon/index.en-US.md

@@ -4,6 +4,7 @@ group: General
 title: Icon
 description: Semantic vector graphics.
 toc: false
+showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -108,8 +109,8 @@ We added a `createFromIconfontCN` function to help developer use their own icons
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import { createFromIconfontCN } from '@ant-design/icons';
+import ReactDOM from 'react-dom/client';
 
 const MyIcon = createFromIconfontCN({
   scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // generate in iconfont.cn
@@ -157,9 +158,10 @@ module.exports = {
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom/client';
 import Icon from '@ant-design/icons';
 import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
+import ReactDOM from 'react-dom/client';
+
 // in create-react-app:
 // import { ReactComponent as MessageSvg } from 'path/to/message.svg';
 

components/icon/index.zh-CN.md

@@ -5,6 +5,7 @@ description: 语义化的矢量图形。
 group: 通用
 title: Icon
 toc: false
+showImport: false
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xEDOTJx2DEkAAAAAAAAAAAAADrJ8AQ/original
 demo:

components/image/index.en-US.md

@@ -2,13 +2,12 @@
 category: Components
 group: Data Display
 title: Image
+description: Preview-able image.
 cols: 2
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Previewable image.
-
 ## When To Use
 
 - When you need to display pictures.

components/image/index.zh-CN.md

@@ -1,15 +1,14 @@
 ---
 category: Components
-subtitle: 图片
 group: 数据展示
 title: Image
+subtitle: 图片
+description: 可预览的图片。
 cols: 2
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-可预览的图片。
-
 ## 何时使用
 
 - 需要展示图片时使用。

components/input-number/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: InputNumber
+description: Enter a number within certain range with the mouse or keyboard.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Enter a number within certain range with the mouse or keyboard.
-
 ## When To Use
 
 When a numeric value needs to be provided.

components/input-number/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 数字输入框
 group: 数据录入
 title: InputNumber
+subtitle: 数字输入框
+description: 通过鼠标或键盘，输入范围内的数值。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-通过鼠标或键盘，输入范围内的数值。
-
 ## 何时使用
 
 当需要获取标准数值时。

components/input/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Input
+description: Through mouse or keyboard input content, it is the most basic form field wrapper.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.
-
 ## When To Use
 
 - A user input in a form field is needed.

components/input/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 输入框
 group: 数据录入
 title: Input
+subtitle: 输入框
+description: 通过鼠标或键盘输入内容，是最基础的表单域的包装。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sBqqTatJ-AkAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-通过鼠标或键盘输入内容，是最基础的表单域的包装。
-
 ## 何时使用
 
 - 需要用户输入表单域内容时。

components/layout/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Layout
 title: Layout
+description: Handling the overall layout of a page.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Handling the overall layout of a page.
-
 ## Specification
 
 ### Size

components/layout/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
-subtitle: 布局
 group: 布局
 title: Layout
+subtitle: 布局
+description: 协助进行页面级整体布局。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-协助进行页面级整体布局。
-
 ## 设计规则
 
 ### 尺寸

components/list/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Data Display
 title: List
+description: Basic list display, which can carry text, lists, pictures, paragraphs.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Simple List.
-
 ## When To Use
 
 A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size.

components/list/index.zh-CN.md

@@ -3,12 +3,11 @@ category: Components
 group: 数据展示
 title: List
 subtitle: 列表
+description: 最基础的列表展示，可承载文字、列表、图片、段落。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAAAAAAAAAAAADrJ8AQ/original
 ---
 
-通用列表。
-
 ## 何时使用
 
 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。

components/mentions/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Mentions
+description: Used to mention someone or something in an input.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Mention component.
-
 ## When To Use
 
 When you need to mention someone or something.

components/mentions/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 提及
 group: 数据录入
 title: Mentions
+subtitle: 提及
+description: 用于在输入中提及某人或某事。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*pxR2S53P_xoAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-提及组件。
-
 ## 何时使用
 
 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。

components/menu/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Navigation
 title: Menu
+description: A versatile menu for navigation.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-A versatile menu for navigation.
-
 ## When To Use
 
 Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.

components/menu/index.zh-CN.md

@@ -3,12 +3,11 @@ category: Components
 group: 导航
 title: Menu
 subtitle: 导航菜单
+description: 为页面和功能提供导航的菜单列表。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*KeyQQL5iKkkAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-为页面和功能提供导航的菜单列表。
-
 ## 何时使用
 
 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。

components/message/index.en-US.md

@@ -3,14 +3,13 @@ category: Components
 group: Feedback
 noinstant: true
 title: Message
+description: Display global messages as feedback in response to user operations.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Xl5ORK7Iy44AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fv7mQIWdUgcAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Display global messages as feedback in response to user operations.
-
 ## When To Use
 
 - To provide feedback such as success, warning, error etc.

components/message/index.zh-CN.md

@@ -1,17 +1,16 @@
 ---
 category: Components
-subtitle: 全局提示
 group: 反馈
 noinstant: true
 title: Message
+subtitle: 全局提示
+description: 全局展示操作反馈信息。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Xl5ORK7Iy44AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fv7mQIWdUgcAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-全局展示操作反馈信息。
-
 ## 何时使用
 
 - 可提供成功、警告和错误等反馈信息。

components/modal/index.en-US.md

@@ -2,14 +2,13 @@
 group: Feedback
 category: Components
 title: Modal
+description: Display a modal dialog box, providing a title, content area, and action buttons.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Z9vzQZAdJDQAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WtgsSLPa1Z4AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Modal dialogs.
-
 ## When To Use
 
 When requiring users to interact with the application, but without jumping to a new page and interrupting the user's workflow, you can use `Modal` to create a new floating layer over the current page to get user feedback or display information.

components/modal/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 group: 反馈
 category: Components
-subtitle: 对话框
 title: Modal
+subtitle: 对话框
+description: 展示一个对话框，提供标题、内容区、操作区。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Z9vzQZAdJDQAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WtgsSLPa1Z4AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-模态对话框。
-
 ## 何时使用
 
 需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 `Modal` 在当前页面正中打开一个浮层，承载相应的操作。

components/notification/index.en-US.md

@@ -3,14 +3,13 @@ category: Components
 group: Feedback
 noinstant: true
 title: Notification
+description: Prompt notification message globally.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cRmqTY4nKPEAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*W3RmSov-xVMAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Display a notification message globally.
-
 ## When To Use
 
 To display a notification message at any of the four corners of the viewport. Typically it can be used in the following cases:

components/notification/index.zh-CN.md

@@ -4,14 +4,13 @@ group: 反馈
 noinstant: true
 title: Notification
 subtitle: 通知提醒框
+description: 全局展示通知提醒信息。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cRmqTY4nKPEAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*W3RmSov-xVMAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-全局展示通知提醒信息。
-
 ## 何时使用
 
 在系统四个角显示通知提醒信息。经常用于以下情况：

components/overview/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: Components Overview
+showImport: false
 ---
 
 `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.

components/overview/index.zh-CN.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: 组件总览
+showImport: false
 ---
 
 `antd` 为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。除了官方组件，我们也提供了[社区精选组件](/docs/react/recommendation-cn)作为必要的补充，另外如果您是内网用户，欢迎尝试使用 [TechUI](https://techui.alipay.com)。

components/pagination/index.en-US.md

@@ -2,12 +2,11 @@
 category: Components
 group: Navigation
 title: Pagination
+description: A long list can be divided into several pages, and only one page will be loaded at a time.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-A long list can be divided into several pages using `Pagination`, and only one page will be loaded at a time.
-
 ## When To Use
 
 - When it will take a long time to load/render all items.

components/pagination/index.zh-CN.md

@@ -1,14 +1,13 @@
 ---
 category: Components
-subtitle: 分页
 group: 导航
 title: Pagination
+subtitle: 分页
+description: 分页器用于分隔长列表，每次只加载一个页面。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*8y_iTJGY_aUAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-采用分页的形式分隔长列表，每次只加载一个页面。
-
 ## 何时使用
 
 - 当加载/渲染所有数据将花费很多时间时；

components/popconfirm/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Feedback
 title: Popconfirm
+description: Pop up a bubble confirmation box for an action.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-A simple and compact confirmation dialog of an action.
-
 ## When To Use
 
 A simple and compact dialog used for asking for user confirmation.

components/popconfirm/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 气泡确认框
 group: 反馈
 title: Popconfirm
+subtitle: 气泡确认框
+description: 点击元素，弹出气泡式的确认框。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a7tqQ6wrdeAAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*iwYsQpeFcB0AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-点击元素，弹出气泡式的确认框。
-
 ## 何时使用
 
 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。

components/popover/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Display
 title: Popover
+description: The floating card pops up when clicking/mouse hovering over an element.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-The floating card popped by clicking or hovering.
-
 ## When To Use
 
 A simple popup menu to provide extra information or operations.

components/popover/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 气泡卡片
 group: 数据展示
 title: Popover
+subtitle: 气泡卡片
+description: 点击/鼠标移入元素，弹出气泡式的卡片浮层。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*kfW5RrfF4L8AAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*6b8fSKVVtXIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-点击/鼠标移入元素，弹出气泡式的卡片浮层。
-
 ## 何时使用
 
 当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

components/progress/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Feedback
 title: Progress
+description: Display the current progress of the operation.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Display the current progress of an operation flow.
-
 ## When To Use
 
 If it will take a long time to complete an operation, you can use `Progress` to show the current progress and status.

components/progress/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 进度条
 group: 反馈
 title: Progress
+subtitle: 进度条
+description: 展示操作的当前进度。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gK_4S6fDRfgAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HJH8Tb1lcYAAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-展示操作的当前进度。
-
 ## 何时使用
 
 在操作需要较长时间才能完成时，为用户显示该操作的当前进度和状态。

components/qr-code/index.en-US.md

@@ -1,6 +1,7 @@
 ---
 category: Components
 title: QRCode
+description: Components that can convert text into QR codes, and support custom color and logo.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -11,7 +12,7 @@ group:
 tag: New
 ---
 
-Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`.
+Available since `antd@5.1.0`.
 
 <!-- prettier-ignore -->
 :::info

components/qr-code/index.zh-CN.md

@@ -1,7 +1,8 @@
 ---
 category: Components
-subtitle: 二维码
 title: QRCode
+subtitle: 二维码
+description: 能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cJopQrf0ncwAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M4PBTZ_n9OgAAAAAAAAAAAAADrJ8AQ/original
 demo:
@@ -12,7 +13,7 @@ group:
 tag: New
 ---
 
-能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。
+自 `antd@5.1.0` 版本开始提供该组件。
 
 <!-- prettier-ignore -->
 :::info

components/radio/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Radio
+description: Used to select a single state from multiple options.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mrPVRope68wAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xPfTSphsiA0AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Radio.
-
 ## When To Use
 
 - Used to select a single state from multiple options.

components/radio/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 单选框
 group: 数据录入
 title: Radio
+subtitle: 单选框
+description: 用于在多个备选项中选中单个状态。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mrPVRope68wAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xPfTSphsiA0AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-单选框。
-
 ## 何时使用
 
 - 用于在多个备选项中选中单个状态。

components/rate/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Rate
+description: Used for rating operation on something.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oyOcTrB12_YAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M7_ER7GJr6wAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Rate component.
-
 ## When To Use
 
 - Show evaluation.

components/rate/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 评分
 group: 数据录入
 title: Rate
+subtitle: 评分
+description: 用于对事物进行评分操作。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*oyOcTrB12_YAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*M7_ER7GJr6wAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-评分组件。
-
 ## 何时使用
 
 - 对评价进行展示。

components/result/index.en-US.md

@@ -2,12 +2,11 @@
 group: Feedback
 category: Components
 title: Result
+description: Used to feedback the processing results of a series of operations.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-Used to feed back the results of a series of operational tasks.
-
 ## When To Use
 
 Use when important operations need to inform the user to process the results and the feedback is more complicated.

components/result/index.zh-CN.md

@@ -3,12 +3,11 @@ group: 反馈
 category: Components
 title: Result
 subtitle: 结果
+description: 用于反馈一系列操作任务的处理结果。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-e2IRroDJyEAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAAAAAAAAAAAADrJ8AQ/original
 ---
 
-用于反馈一系列操作任务的处理结果。
-
 ## 何时使用
 
 当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

components/segmented/index.en-US.md

@@ -2,13 +2,14 @@
 category: Components
 group: Data Display
 title: Segmented
+description: Display multiple options and allow users to select a single option.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Segmented Controls. This component is available since `antd@4.20.0`.
+This component is available since `antd@4.20.0`.
 
 ## When To Use
 

components/segmented/index.zh-CN.md

@@ -1,15 +1,16 @@
 ---
 category: Components
-subtitle: 分段控制器
 group: 数据展示
 title: Segmented
+subtitle: 分段控制器
+description: 用于展示多个选项并允许用户选择其中单个选项。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*XJR2TbS1aaQAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-9tSSoO_MkIAAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-分段控制器。自 `antd@4.20.0` 版本开始提供该组件。
+自 `antd@4.20.0` 版本开始提供该组件。
 
 ## 何时使用
 

components/select/index.en-US.md

@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: Select
+description: A dropdown menu for displaying choices.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*qGSbQJ0POEsAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a6ggRInInJ4AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-Select component to select value from options.
-
 ## When To Use
 
 - A dropdown menu for displaying choices - an elegant alternative to the native `<select>` element.

components/select/index.zh-CN.md

@@ -1,16 +1,15 @@
 ---
 category: Components
-subtitle: 选择器
 group: 数据录入
 title: Select
+subtitle: 选择器
+description: 下拉选择器。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*qGSbQJ0POEsAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a6ggRInInJ4AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-下拉选择器。
-
 ## 何时使用
 
 - 弹出一个下拉菜单给用户选择操作，用于代替原生的选择器，或者需要一个更优雅的多选器时。