chore: auto merge branches (#48020)

chore: merge master into feature
2024-11-24 02:59:58 +08:00 · 2024-03-23 16:15:34 +00:00 · 2024-03-23 16:15:34 +00:00 · 80f49bfcf2
commit 80f49bfcf2
parent dee3901183 611993b0a8
193 changed files with 796 additions and 525 deletions
--- a/.dumi/global.css
+++ b/.dumi/global.css
@ -13,3 +13,8 @@
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
 }
+
+html {
+  scrollbar-width: thin;
+  scrollbar-color: unset;
+}
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@ -6,19 +6,50 @@ import { useFullSidebarData, useSidebarData } from 'dumi';
 import Link from '../theme/common/Link';
 import useLocation from './useLocation';

-const ItemTag: React.FC<{ tag?: string; show?: boolean }> = (props) => {
-  const { tag, show = true } = props;
-  if (!show || !tag) {
-    return null;
+const MenuItemLabelWithTag: React.FC<{
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  link: string;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  search?: string;
+  tag?: string;
+  className?: string;
+}> = ({ before, after, link, title, subtitle, search, tag = '', className }) => {
+  if (!before && !after) {
+    return (
+      <Link
+        to={`${link}${search}`}
+        style={
+          tag
+            ? { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }
+            : undefined
+        }
+        className={className}
+      >
+        <span>
+          {title}
+          {subtitle && <span className="chinese">{subtitle}</span>}
+        </span>
+        {tag && (
+          <Tag
+            bordered={false}
+            color={tag === 'New' ? 'success' : 'processing'}
+            style={{ marginBlockEnd: 0 }}
+          >
+            {tag.replace('VERSION', version)}
+          </Tag>
+        )}
+      </Link>
+    );
  }
  return (
-    <Tag
-      bordered={false}
-      color={tag === 'New' ? 'success' : 'processing'}
-      style={{ marginInlineStart: 'auto', marginInlineEnd: 0, marginTop: -2 }}
-    >
-      {tag.replace('VERSION', version)}
-    </Tag>
+    <Link to={`${link}${search}`} className={className}>
+      {before}
+      {title}
+      {subtitle && <span className="chinese">{subtitle}</span>}
+      {after}
+    </Link>
  );
 };

@ -120,18 +151,15 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
              key: group?.title,
              children: group.children?.map((item) => ({
                label: (
-                  <Link
-                    to={`${item.link}${search}`}
-                    style={{ display: 'flex', alignItems: 'center' }}
-                  >
-                    {before}
-                    <span key="english">{item?.title}</span>
-                    <span className="chinese" key="chinese">
-                      {item.frontmatter?.subtitle}
-                    </span>
-                    <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
-                    {after}
-                  </Link>
+                  <MenuItemLabelWithTag
+                    before={before}
+                    after={after}
+                    link={item.link}
+                    title={item?.title}
+                    subtitle={item.frontmatter?.subtitle}
+                    search={search}
+                    tag={item.frontmatter?.tag}
+                  />
                ),
                key: item.link.replace(/(-cn$)/g, ''),
              })),
@ -146,15 +174,14 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
          result.push(
            ...list.map((item) => ({
              label: (
-                <Link
-                  to={`${item.link}${search}`}
-                  style={{ display: 'flex', alignItems: 'center' }}
-                >
-                  {before}
-                  {item?.title}
-                  <ItemTag tag={item.frontmatter?.tag} show={!before && !after} />
-                  {after}
-                </Link>
+                <MenuItemLabelWithTag
+                  before={before}
+                  after={after}
+                  link={item.link}
+                  title={item?.title}
+                  search={search}
+                  tag={item.frontmatter?.tag}
+                />
              ),
              key: item.link.replace(/(-cn$)/g, ''),
            })),
--- a/.dumi/theme/builtins/ComponentMeta/index.tsx
+++ b/.dumi/theme/builtins/ComponentMeta/index.tsx
@ -0,0 +1,184 @@
+import React from 'react';
+import { EditOutlined, GithubOutlined } from '@ant-design/icons';
+import { Descriptions, theme, Tooltip, Typography, type GetProp } from 'antd';
+import { createStyles, css } from 'antd-style';
+import kebabCase from 'lodash/kebabCase';
+import CopyToClipboard from 'react-copy-to-clipboard';
+
+import useLocale from '../../../hooks/useLocale';
+
+const locales = {
+  cn: {
+    import: '使用',
+    copy: '复制',
+    copied: '已复制',
+    source: '源码',
+    docs: '文档',
+    edit: '编辑此页',
+  },
+  en: {
+    import: 'Import',
+    copy: 'Copy',
+    copied: 'Copied',
+    source: 'Source',
+    docs: 'Docs',
+    edit: 'Edit this page',
+  },
+};
+
+const branchUrl = 'https://github.com/ant-design/ant-design/edit/master/';
+
+const useStyle = createStyles(({ token }) => ({
+  code: css`
+    cursor: pointer;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    column-gap: 4px;
+    border-radius: 4px;
+    padding-inline: ${token.paddingXS}px;
+    transition: all ${token.motionDurationSlow} !important;
+    font-family: ${token.codeFamily};
+    color: ${token.colorTextSecondary} !important;
+
+    &:hover {
+      background: ${token.controlItemBgHover};
+    }
+
+    a&:hover {
+      text-decoration: underline !important;
+    }
+  `,
+  import: css`
+    color: ${token.magenta8};
+  `,
+  component: css`
+    color: ${token.colorText};
+  `,
+  from: css`
+    color: ${token.magenta8};
+  `,
+  antd: css`
+    color: ${token.green8};
+  `,
+  semicolon: css`
+    color: ${token.colorText};
+  `,
+}));
+
+export interface ComponentMetaProps {
+  component: string;
+  source: string | true;
+  filename?: string;
+}
+
+const ComponentMeta: React.FC<ComponentMetaProps> = (props) => {
+  const { component, source, filename } = 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" className={styles.import}>
+      import
+    </span>,
+    <span key="component" className={styles.component}>{`{ ${component} }`}</span>,
+    <span key="from" className={styles.from}>
+      from
+    </span>,
+    <span key="antd" className={styles.antd}>
+      {`"antd"`}
+    </span>,
+    <span key="semicolon" className={styles.semicolon}>
+      ;
+    </span>,
+  ];
+
+  return (
+    <Descriptions
+      size="small"
+      colon={false}
+      column={1}
+      style={{ marginTop: token.margin }}
+      labelStyle={{ paddingInlineEnd: token.padding, width: 54 }}
+      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}
+                    </Typography.Text>
+                  </CopyToClipboard>
+                </span>
+              </Tooltip>
+            ),
+          },
+          filledSource && {
+            label: locale.source,
+            children: (
+              <Typography.Link className={styles.code} href={filledSource} target="_blank">
+                <GithubOutlined style={{ marginInlineEnd: 4 }} />
+                <span>{abbrSource}</span>
+              </Typography.Link>
+            ),
+          },
+          filename && {
+            label: locale.docs,
+            children: (
+              <Typography.Link
+                className={styles.code}
+                href={`${branchUrl}${filename}`}
+                target="_blank"
+              >
+                <EditOutlined style={{ marginInlineEnd: 4 }} />
+                <span>{locale.edit}</span>
+              </Typography.Link>
+            ),
+          },
+        ].filter((v) => v) as GetProp<typeof Descriptions, 'items'>
+      }
+    />
+  );
+};
+
+export default ComponentMeta;
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.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,16 @@ 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
+                filename={meta.frontmatter.filename}
+              />
+            )}
          <div style={{ minHeight: 'calc(100vh - 64px)' }}>{children}</div>
          <InViewSuspense>
            <ColumnCard
--- a/.dumi/theme/slots/Sidebar/index.tsx
+++ b/.dumi/theme/slots/Sidebar/index.tsx
@ -111,6 +111,8 @@ const useStyle = createStyles(({ token, css }) => {
        height: 100%;
        max-height: calc(100vh - ${token.headerHeight + token.contentMarginTop}px);
        overflow: hidden;
+        scrollbar-width: thin;
+        scrollbar-color: unset;
      }

      &:hover .main-menu-inner {
--- a/components/_util/tests/getScroll.test.ts
+++ b/components/_util/tests/getScroll.test.ts
@ -1,12 +1,12 @@
 import getScroll from '../getScroll';

 describe('getScroll', () => {
-  it('getScroll target null', async () => {
+  it('getScroll target null', () => {
    expect(getScroll(null, true)).toBe(0);
    expect(getScroll(null, false)).toBe(0);
  });

-  it('getScroll window', async () => {
+  it('getScroll window', () => {
    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
      window.pageXOffset = x;
      window.pageYOffset = y;
@ -17,7 +17,7 @@ describe('getScroll', () => {
    scrollToSpy.mockRestore();
  });

-  it('getScroll document', async () => {
+  it('getScroll document', () => {
    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
      document.documentElement.scrollLeft = x;
      document.documentElement.scrollTop = y;
@ -28,7 +28,7 @@ describe('getScroll', () => {
    scrollToSpy.mockRestore();
  });

-  it('getScroll div', async () => {
+  it('getScroll div', () => {
    const div = document.createElement('div');
    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
      div.scrollLeft = x;
@ -40,7 +40,7 @@ describe('getScroll', () => {
    scrollToSpy.mockRestore();
  });

-  it('getScroll documentElement', async () => {
+  it('getScroll documentElement', () => {
    const div: any = {};
    const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((x, y) => {
      div.scrollLeft = null;
--- a/components/_util/tests/type.test.tsx
+++ b/components/_util/tests/type.test.tsx
@ -65,6 +65,22 @@ describe('type', () => {

      expect(<RefFC ref={ref} />).toBeTruthy();
    });
+
+    it('Support ForwardRefExoticComponent type', () => {
+      interface InnerProps {
+        test: number;
+      }
+      interface InnerRef {
+        bamboo: number;
+      }
+      type TestComponent = React.ForwardRefExoticComponent<
+        InnerProps & React.RefAttributes<InnerRef>
+      >;
+      type ExtractedTestRef = GetRef<TestComponent>;
+
+      const a: ExtractedTestRef = { bamboo: 123 };
+      expect(a).toBeTruthy();
+    });
  });

  describe('GetProp', () => {
--- a/components/_util/index.en-US.md
+++ b/components/_util/index.en-US.md
@ -0,0 +1,45 @@
+---
+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:
+  cols: 2
+group:
+  title: Other
+  order: 99
+---
+
+## GetRef
+
+Get the `ref` property definition of the component, which is very useful for components that are not directly exposed or child components.
+
+```tsx
+import type { GetRef, Select } from 'antd';
+
+type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
+```
+
+## GetProps
+
+Get the `props` property definition of the component:
+
+```tsx
+import type { Checkbox, GetProps } from 'antd';
+
+type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
+```
+
+## GetProp
+
+Get the single `props` property definition of the component. It has encapsulated `NonNullable`, so you don't have to worry about being empty:
+
+```tsx
+import type { GetProp, Select, SelectProps } from 'antd';
+
+// Both of this can work
+type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
+type SelectOptionType2 = GetProp<typeof Select, 'options'>[number];
+```
--- a/components/_util/index.zh-CN.md
+++ b/components/_util/index.zh-CN.md
@ -0,0 +1,46 @@
+---
+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:
+  cols: 2
+group:
+  title: 其他
+  order: 99
+---
+
+## GetRef
+
+获取组件的 `ref` 属性定义，这对于未直接暴露或者子组件的 `ref` 属性定义非常有用。
+
+```tsx
+import type { GetRef, Select } from 'antd';
+
+type SelectRefType = GetRef<typeof Select>; // BaseSelectRef
+```
+
+## GetProps
+
+获取组件的 `props` 属性定义：
+
+```tsx
+import type { Checkbox, GetProps } from 'antd';
+
+type CheckboxGroupType = GetProps<typeof Checkbox.Group>;
+```
+
+## GetProp
+
+获取组件的单个 `props` 属性定义。它已经将 `NonNullable` 进行了封装，所以不用在考虑为空的情况：
+
+```tsx
+import type { GetProp, Select, SelectProps } from 'antd';
+
+// 以下两种都可以生效
+type SelectOptionType1 = GetProp<SelectProps, 'options'>[number];
+type SelectOptionType2 = GetProp<typeof Select, 'options'>[number];
+```
--- a/components/_util/type.ts
+++ b/components/_util/type.ts
@ -24,9 +24,11 @@ type ReactRefComponent<Props extends { ref?: React.Ref<any> | string }> = (
  props: Props,
 ) => React.ReactNode;

+type ExtractRefAttributesRef<T> = T extends React.RefAttributes<infer P> ? P : never;
+
 export type GetRef<T extends ReactRefComponent<any> | React.Component<any>> =
  T extends React.Component<any>
    ? T
-    : T extends ReactRefComponent<React.RefAttributes<infer RefType>>
-      ? RefType
+    : T extends React.ComponentType<infer P>
+      ? ExtractRefAttributesRef<P>
      : never;
--- a/components/affix/index.en-US.md
+++ b/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.
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@ -53,7 +53,7 @@ interface AffixState {
  prevTarget: Window | HTMLElement | null;
 }

-interface AffixRef {
+export interface AffixRef {
  updatePosition: ReturnType<typeof throttleByAnimationFrame>;
 }

--- a/components/affix/index.zh-CN.md
+++ b/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
 ---

-将页面元素钉在可视范围。
-
 ## 何时使用

 当内容区域比较长，需要滚动页面时，这部分内容对应的操作或者导航需要在滚动范围内始终展现。常用于侧边菜单和按钮组合。
--- a/components/alert/index.en-US.md
+++ b/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.
--- a/components/alert/index.zh-CN.md
+++ b/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
 ---

-警告提示，展现需要关注的信息。
-
 ## 何时使用

 - 当某个页面需要向用户显示警告的信息时。
--- a/components/anchor/index.en-US.md
+++ b/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.
--- a/components/anchor/index.zh-CN.md
+++ b/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
 ---

-用于跳转到页面指定位置。
-
 ## 何时使用

 需要展现当前页面上可供跳转的锚点链接，以及快速在锚点之间跳转。
--- a/components/app/index.en-US.md
+++ b/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.
--- a/components/app/index.zh-CN.md
+++ b/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` 的问题。
--- a/components/auto-complete/demo/variant.md
+++ b/components/auto-complete/demo/variant.md
@ -4,4 +4,4 @@

 ## en-US

-There are `outlined` `fille` and `borderless`, totally three variants to choose from.
+There are `outlined` `filled` and `borderless`, totally three variants to choose from.
--- a/components/auto-complete/index.en-US.md
+++ b/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.
--- a/components/auto-complete/index.zh-CN.md
+++ b/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
 ---

-输入框自动完成功能。
-
 ## 何时使用

 - 需要一个输入框而不是选择器。
--- a/components/avatar/index.en-US.md
+++ b/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 -->
--- a/components/avatar/index.zh-CN.md
+++ b/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)，一键填充高逼格头像和文本。
--- a/components/back-top/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/back-top/tests/snapshots/demo-extend.test.ts.snap
@ -9,7 +9,7 @@ Array [
  <strong
    class="site-back-top-basic"
  >
-     gray
+     gray 
  </strong>,
  button.,
 ]
--- a/components/back-top/tests/snapshots/demo.test.ts.snap
+++ b/components/back-top/tests/snapshots/demo.test.ts.snap
@ -9,7 +9,7 @@ Array [
  <strong
    class="site-back-top-basic"
  >
-     gray
+     gray 
  </strong>,
  button.,
 ]
--- a/components/badge/index.en-US.md
+++ b/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.
--- a/components/badge/index.zh-CN.md
+++ b/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: 数据展示
 ---

-图标右上角的圆形徽标数字。
-
 ## 何时使用

 一般出现在通知图标或头像的右上角，用于显示需要处理的消息条数，通过醒目视觉形式吸引用户处理。
--- a/components/breadcrumb/index.en-US.md
+++ b/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.
--- a/components/breadcrumb/index.zh-CN.md
+++ b/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
 ---

-显示当前页面在系统层级结构中的位置，并能向上返回。
-
 ## 何时使用

 - 当系统拥有超过两级以上的层级结构时；
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@ -2,7 +2,7 @@

 按钮有大、中、小三种尺寸。

-通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸为中。
+通过设置 `size` 为 `large` `small` 分别把按钮设为大、小尺寸。若不设置 `size`，则尺寸默认为中。

 ## en-US

--- a/components/button/index.en-US.md
+++ b/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.
--- a/components/button/index.zh-CN.md
+++ b/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
 ---

-按钮用于开始一个即时操作。
-
 ## 何时使用

 标记了一个（或封装一组）操作命令，响应用户点击行为，触发相应的业务逻辑。
--- a/components/calendar/index.en-US.md
+++ b/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.
--- a/components/calendar/index.zh-CN.md
+++ b/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
 ---

-按照日历形式展示数据的容器。
-
 ## 何时使用

 当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
--- a/components/card/index.en-US.md
+++ b/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.
--- a/components/card/index.zh-CN.md
+++ b/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
 ---

-通用卡片容器。
-
 ## 何时使用

 最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。
--- a/components/carousel/index.en-US.md
+++ b/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.
--- a/components/carousel/index.zh-CN.md
+++ b/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
 ---

-旋转木马，一组轮播的区域。
-
 ## 何时使用

 - 当有一组平级的内容。
--- a/components/cascader/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/cascader/tests/snapshots/demo-extend.test.ts.snap
@ -498,10 +498,10 @@ exports[`renders components/cascader/demo/custom-render.tsx extend context corre
      class="ant-select-selection-item"
    >
      <span>
-        Zhejiang /
+        Zhejiang / 
      </span>
      <span>
-        Hangzhou /
+        Hangzhou / 
      </span>
      <span>
        West Lake (
@ -660,7 +660,7 @@ exports[`renders components/cascader/demo/custom-render.tsx extend context corre

 exports[`renders components/cascader/demo/custom-trigger.tsx extend context correctly 1`] = `
 <span>
-  Unselect
+  Unselect 
  <a>
    Change city
  </a>
--- a/components/cascader/tests/snapshots/demo.test.tsx.snap
+++ b/components/cascader/tests/snapshots/demo.test.tsx.snap
@ -214,12 +214,12 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
      <span>
        Zhejiang
        <!-- -->
-         /
+         / 
      </span>
      <span>
        Hangzhou
        <!-- -->
-         /
+         / 
      </span>
      <span>
        West Lake
--- a/components/cascader/index.en-US.md
+++ b/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.
--- a/components/cascader/index.zh-CN.md
+++ b/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
 ---

-级联选择框。
-
 ## 何时使用

 - 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
--- a/components/checkbox/index.en-US.md
+++ b/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.
--- a/components/checkbox/index.zh-CN.md
+++ b/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
 ---

-多选框。
-
 ## 何时使用

 - 在一组可选项中进行多项选择时；
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@ -1083,7 +1083,7 @@ Array [
  </div>,
  <br />,
  <span>
-    Expand Icon Position:
+    Expand Icon Position: 
  </span>,
  <div
    class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@ -1071,7 +1071,7 @@ Array [
  </div>,
  <br />,
  <span>
-    Expand Icon Position:
+    Expand Icon Position: 
  </span>,
  <div
    class="ant-select ant-select-outlined ant-select-single ant-select-show-arrow"
--- a/components/collapse/demo/size.md
+++ b/components/collapse/demo/size.md
@ -2,7 +2,7 @@

 折叠面板有大、中、小三种尺寸。

-通过设置 `size` 为 `large` `small` 分别把折叠面板设为大、小尺寸。若不设置 `size`，则尺寸为中。
+通过设置 `size` 为 `large` `small` 分别把折叠面板设为大、小尺寸。若不设置 `size`，则尺寸默认为中。

 ## en-US

--- a/components/collapse/index.en-US.md
+++ b/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.
--- a/components/collapse/index.zh-CN.md
+++ b/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
 ---

-可以折叠/展开的内容区域。
-
 ## 何时使用

 - 对复杂区域进行分组和隐藏，保持页面的整洁。
--- a/components/color-picker/tests/snapshots/demo.test.ts.snap
+++ b/components/color-picker/tests/snapshots/demo.test.ts.snap
@ -130,7 +130,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
        class="ant-space-item"
      >
        <span>
-          HEX:
+          HEX: 
          <!-- -->
          #1677ff
        </span>
@ -163,7 +163,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
        class="ant-space-item"
      >
        <span>
-          HSB:
+          HSB: 
          <!-- -->
          hsb(215, 91%, 100%)
        </span>
@ -196,7 +196,7 @@ exports[`renders components/color-picker/demo/format.tsx correctly 1`] = `
        class="ant-space-item"
      >
        <span>
-          RGB:
+          RGB: 
          <!-- -->
          rgb(22, 119, 255)
        </span>
--- a/components/color-picker/demo/size.md
+++ b/components/color-picker/demo/size.md
@ -1,7 +1,11 @@
 ## zh-CN

-触发器有大、中、小三种尺寸，若不设置 size，则尺寸为中。
+触发器有大、中、小三种尺寸。
+
+通过设置 `size` 为 `large` `small` 分别把触发器设为大、小尺寸。若不设置 `size`，则尺寸默认为中。

 ## en-US

-The trigger has three sizes: large, medium and small. If size is not set, the size will be medium.
+Ant Design supports a default trigger size as well as a large and small size.
+
+If a large or small trigger is desired, set the `size` property to either `large` or `small` respectively. Omit the `size` property for a trigger with the default size.
--- a/components/color-picker/index.en-US.md
+++ b/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

--- a/components/color-picker/index.zh-CN.md
+++ b/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` 版本开始提供该组件。

 ## 何时使用

--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@ -54,8 +54,16 @@ export interface ThemeConfig {
  token?: Partial<AliasToken>;
  components?: ComponentsConfig;
  algorithm?: MappingAlgorithm | MappingAlgorithm[];
-  hashed?: boolean;
  inherit?: boolean;
+  /**
+   * @descCN 是否开启 `hashed` 属性。如果你的应用中只存在一个版本的 antd，你可以设置为 `false` 来进一步减小样式体积。默认值为 `ture`。
+   * @descEN Whether to enable the `hashed` attribute. If there is only one version of antd in your application, you can set `false` to reduce the bundle size. defaults to `true`.
+   */
+  hashed?: boolean;
+  /**
+   * @descCN 通过 `cssVar` 配置来开启 CSS 变量模式，这个配置会被继承。默认值为 `false`。
+   * @descEN Enable CSS variable mode through `cssVar` configuration, This configuration will be inherited. defaults to `false`.
+   */
  cssVar?:
    | {
        /**
--- a/components/config-provider/index.en-US.md
+++ b/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.
--- a/components/config-provider/index.zh-CN.md
+++ b/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) 特性，只需在应用外围包裹一次即可全局生效。
--- a/components/descriptions/index.en-US.md
+++ b/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.
--- a/components/descriptions/index.zh-CN.md
+++ b/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
 ---

-成组展示多个只读字段。
-
 ## 何时使用

 常见于详情页的信息展示。
--- a/components/divider/index.en-US.md
+++ b/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.
--- a/components/divider/index.zh-CN.md
+++ b/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
 ---

-区隔内容的分割线。
-
 ## 何时使用

 - 对不同章节的文本段落进行分割。
--- a/components/drawer/tests/Drawer.test.tsx
+++ b/components/drawer/tests/Drawer.test.tsx
@ -244,7 +244,7 @@ describe('Drawer', () => {
      errorSpy.mockRestore();
    });

-    it('should hide close button when closeIcon is null or false', async () => {
+    it('should hide close button when closeIcon is null or false', () => {
      const { baseElement, rerender } = render(
        <Drawer open closeIcon={null}>
          Here is content of Drawer
@ -311,7 +311,7 @@ describe('Drawer', () => {
      expect(baseElement.querySelector('.anticon-close')).not.toBeNull();
    });

-    it('match between styles and deprecated style prop', async () => {
+    it('match between styles and deprecated style prop', () => {
      const initialFontSize = 10;
      let fontSize1 = initialFontSize;
      let fontSize2 = initialFontSize;
--- a/components/drawer/index.en-US.md
+++ b/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.
--- a/components/drawer/index.zh-CN.md
+++ b/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
 ---

-屏幕边缘滑出的浮层面板。
-
 ## 何时使用

 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到原任务。
--- a/components/dropdown/index.en-US.md
+++ b/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.
--- a/components/dropdown/index.zh-CN.md
+++ b/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
 ---

-向下弹出的列表。
-
 ## 何时使用

 当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。
--- a/components/empty/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/empty/tests/snapshots/demo-extend.test.ts.snap
@ -1091,7 +1091,7 @@ exports[`renders components/empty/demo/customize.tsx extend context correctly 1`
    class="ant-empty-description"
  >
    <span>
-      Customize
+      Customize 
      <a
        href="#API"
      >
--- a/components/empty/tests/snapshots/demo.test.ts.snap
+++ b/components/empty/tests/snapshots/demo.test.ts.snap
@ -739,7 +739,7 @@ exports[`renders components/empty/demo/customize.tsx correctly 1`] = `
    class="ant-empty-description"
  >
    <span>
-      Customize
+      Customize 
      <a
        href="#API"
      >
--- a/components/empty/index.en-US.md
+++ b/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.
--- a/components/empty/index.zh-CN.md
+++ b/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
 ---

-空状态时的展示占位图。
-
 ## 何时使用

 - 当目前没有数据时，用于显式的用户提示。
--- a/components/flex/index.en-US.md
+++ b/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

--- a/components/flex/index.zh-CN.md
+++ b/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` 版本开始提供该组件。

 ## 何时使用

--- a/components/float-button/index.en-US.md
+++ b/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

--- a/components/float-button/index.zh-CN.md
+++ b/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` 版本开始提供该组件。

 ## 何时使用

--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -2451,7 +2451,7 @@ exports[`renders components/form/demo/dependencies.tsx extend context correctly
    class="ant-typography"
  >
    <p>
-      Only Update when
+      Only Update when 
      <code>
        password2
      </code>
@ -2587,7 +2587,7 @@ Array [
                    />
                  </span>
                  <span>
-                     Apple
+                     Apple 
                  </span>
                </label>
                <label
@ -2607,7 +2607,7 @@ Array [
                    />
                  </span>
                  <span>
-                     Pear
+                     Pear 
                  </span>
                </label>
              </div>
@ -7216,7 +7216,7 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
            <span
              class="ant-typography ant-typography-secondary ant-form-text"
            >
-              (
+              ( 
              <span
                aria-label="smile"
                class="anticon anticon-smile"
@ -8581,7 +8581,7 @@ exports[`renders components/form/demo/normal-login.tsx extend context correctly
                Log in
              </span>
            </button>
-            Or
+            Or 
            <a
              href=""
            >
@ -10016,7 +10016,7 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
                />
              </span>
              <span>
-                I have read the
+                I have read the 
                <a
                  href=""
                >
@ -20018,10 +20018,10 @@ Array [
    class="ant-typography"
  >
    <pre>
-      Name Value:
+      Name Value: 
    </pre>
    <pre>
-      Custom Value: name:
+      Custom Value: name: 
    </pre>
  </article>,
 ]
--- a/components/form/tests/snapshots/demo.test.tsx.snap
+++ b/components/form/tests/snapshots/demo.test.tsx.snap
@ -1849,7 +1849,7 @@ exports[`renders components/form/demo/dependencies.tsx correctly 1`] = `
    class="ant-typography"
  >
    <p>
-      Only Update when
+      Only Update when 
      <code>
        password2
      </code>
@ -1983,7 +1983,7 @@ Array [
                    />
                  </span>
                  <span>
-                     Apple
+                     Apple 
                  </span>
                </label>
                <label
@ -2003,7 +2003,7 @@ Array [
                    />
                  </span>
                  <span>
-                     Pear
+                     Pear 
                  </span>
                </label>
              </div>
@ -4149,7 +4149,7 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
            <span
              class="ant-typography ant-typography-secondary ant-form-text"
            >
-              (
+              ( 
              <span
                aria-label="smile"
                class="anticon anticon-smile"
@ -5496,7 +5496,7 @@ exports[`renders components/form/demo/normal-login.tsx correctly 1`] = `
                Log in
              </span>
            </button>
-            Or
+            Or 
            <a
              href=""
            >
@ -6551,7 +6551,7 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
                />
              </span>
              <span>
-                I have read the
+                I have read the 
                <a
                  href=""
                >
@ -8238,10 +8238,10 @@ Array [
    class="ant-typography"
  >
    <pre>
-      Name Value:
+      Name Value: 
    </pre>
    <pre>
-      Custom Value:
+      Custom Value: 
    </pre>
  </article>,
 ]
--- a/components/form/index.en-US.md
+++ b/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.
--- a/components/form/index.zh-CN.md
+++ b/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
 ---

-高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
-
 ## 何时使用

 - 用于创建一个实体或收集信息。
@ -149,7 +148,7 @@ const validateMessages = {
 | validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
 | validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` |  |
-| valuePropName | 子节点的值的属性，如 Switch、Checkbox 的是 `checked`。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` |  |
+| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是是 `checked`，否则无法获取这个两个组件的值。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` |  |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid-cn#col) | - |  |

 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
--- a/components/grid/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/grid/tests/snapshots/demo-extend.test.ts.snap
@ -880,7 +880,7 @@ exports[`renders components/grid/demo/offset.tsx extend context correctly 2`] =
 exports[`renders components/grid/demo/playground.tsx extend context correctly 1`] = `
 Array [
  <span>
-    Horizontal Gutter (px):
+    Horizontal Gutter (px): 
  </span>,
  <div
    style="width: 50%;"
@ -996,7 +996,7 @@ Array [
    </div>
  </div>,
  <span>
-    Vertical Gutter (px):
+    Vertical Gutter (px): 
  </span>,
  <div
    style="width: 50%;"
--- a/components/grid/tests/snapshots/demo.test.ts.snap
+++ b/components/grid/tests/snapshots/demo.test.ts.snap
@ -866,7 +866,7 @@ Array [
 exports[`renders components/grid/demo/playground.tsx correctly 1`] = `
 Array [
  <span>
-    Horizontal Gutter (px):
+    Horizontal Gutter (px): 
  </span>,
  <div
    style="width:50%"
@ -963,7 +963,7 @@ Array [
    </div>
  </div>,
  <span>
-    Vertical Gutter (px):
+    Vertical Gutter (px): 
  </span>,
  <div
    style="width:50%"
--- a/components/grid/index.en-US.md
+++ b/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">
--- a/components/grid/index.zh-CN.md
+++ b/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">
--- a/components/icon/index.en-US.md
+++ b/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';

--- a/components/icon/index.zh-CN.md
+++ b/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:
@ -46,7 +47,7 @@ demo:
 | rotate | 图标旋转角度（IE9 无效） | number | - |  |
 | spin | 是否有旋转动画 | boolean | false |  |
 | style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
-| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |  |
+| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色，支持设置十六进制颜色字符串 | string \| string[] | - |  |

 其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。

--- a/components/image/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/image/tests/snapshots/demo-extend.test.ts.snap
@ -129,7 +129,7 @@ exports[`renders components/image/demo/component-token.tsx extend context correc
 exports[`renders components/image/demo/controlled-preview.tsx extend context correctly 1`] = `
 Array [
  <div>
-    scaleStep:
+    scaleStep: 
    <div
      class="ant-input-number ant-input-number-outlined"
    >
--- a/components/image/index.en-US.md
+++ b/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.
--- a/components/image/index.zh-CN.md
+++ b/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
 ---

-可预览的图片。
-
 ## 何时使用

 - 需要展示图片时使用。
--- a/components/index.ts
+++ b/components/index.ts
@ -1,7 +1,7 @@
 export type { Breakpoint } from './_util/responsiveObserver';
 export type { GetProps, GetRef, GetProp } from './_util/type';
 export { default as Affix } from './affix';
-export type { AffixProps } from './affix';
+export type { AffixProps, AffixRef } from './affix';
 export { default as Alert } from './alert';
 export type { AlertProps } from './alert';
 export { default as Anchor } from './anchor';
--- a/components/input-number/index.en-US.md
+++ b/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.
--- a/components/input-number/index.zh-CN.md
+++ b/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
 ---

-通过鼠标或键盘，输入范围内的数值。
-
 ## 何时使用

 当需要获取标准数值时。
--- a/components/input/index.en-US.md
+++ b/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.
--- a/components/input/index.zh-CN.md
+++ b/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
 ---

-通过鼠标或键盘输入内容，是最基础的表单域的包装。
-
 ## 何时使用

 - 需要用户输入表单域内容时。
--- a/components/layout/index.en-US.md
+++ b/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
--- a/components/layout/index.zh-CN.md
+++ b/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
 ---

-协助进行页面级整体布局。
-
 ## 设计规则

 ### 尺寸
--- a/components/list/index.en-US.md
+++ b/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.
--- a/components/list/index.zh-CN.md
+++ b/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
 ---

-通用列表。
-
 ## 何时使用

 最基础的列表展示，可承载文字、列表、图片、段落，常用于后台数据展示页面。
--- a/components/mentions/index.en-US.md
+++ b/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.
--- a/components/mentions/index.zh-CN.md
+++ b/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
 ---

-提及组件。
-
 ## 何时使用

 用于在输入中提及某人或某事，常用于发布、聊天或评论功能。
--- a/components/menu/index.en-US.md
+++ b/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.
--- a/components/menu/index.zh-CN.md
+++ b/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
 ---

-为页面和功能提供导航的菜单列表。
-
 ## 何时使用

 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
--- a/Show More
+++ b/Show More