chore: auto merge branches (#39192)

chore: feature merge master
2024-12-02 12:09:14 +08:00 · 2022-12-02 08:22:43 +00:00 · 2022-12-02 08:22:43 +00:00 · 834f00022e
commit 834f00022e
parent 51da7e3dc1 eb77c5a7e6
202 changed files with 2020 additions and 1549 deletions
--- a/.antd-tools.config.js
+++ b/.antd-tools.config.js
@ -2,14 +2,20 @@ const fs = require('fs');
 const path = require('path');

 const restCssPath = path.join(process.cwd(), 'components', 'style', 'reset.css');
+const tokenStatisticPath = path.join(process.cwd(), 'components', 'version', 'token.json');
+const tokenMetaPath = path.join(process.cwd(), 'components', 'version', 'token-meta.json');

 function finalizeCompile() {
  if (fs.existsSync(path.join(__dirname, './es'))) {
    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'es', 'style', 'reset.css'));
+    fs.copyFileSync(tokenStatisticPath, path.join(process.cwd(), 'es', 'version', 'token.json'));
+    fs.copyFileSync(tokenMetaPath, path.join(process.cwd(), 'es', 'version', 'token-meta.json'));
  }

  if (fs.existsSync(path.join(__dirname, './lib'))) {
    fs.copyFileSync(restCssPath, path.join(process.cwd(), 'lib', 'style', 'reset.css'));
+    fs.copyFileSync(tokenStatisticPath, path.join(process.cwd(), 'lib', 'version', 'token.json'));
+    fs.copyFileSync(tokenMetaPath, path.join(process.cwd(), 'lib', 'version', 'token-meta.json'));
  }
 }

--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@ -44,7 +44,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>

    return (
      sidebarItems?.reduce<Exclude<MenuProps['items'], undefined>>((result, group) => {
-        if (group.title) {
+        if (group?.title) {
          // 设计文档特殊处理二级分组
          if (pathname.startsWith('/docs/spec')) {
            const childrenGroup = group.children.reduce<
@ -63,7 +63,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                label: (
                  <Link to={`${item.link}${search}`}>
                    {before}
-                    {item.title}
+                    {item?.title}
                    {after}
                  </Link>
                ),
@ -80,7 +80,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
                    label: (
                      <Link to={`${item.link}${search}`}>
                        {before}
-                        {item.title}
+                        {item?.title}
                        {after}
                      </Link>
                    ),
@ -90,20 +90,20 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
              }
            });
            result.push({
-              label: group.title,
-              key: group.title,
+              label: group?.title,
+              key: group?.title,
              children: childItems,
            });
          } else {
            result.push({
              type: 'group',
-              label: group.title,
-              key: group.title,
+              label: group?.title,
+              key: group?.title,
              children: group.children?.map((item) => ({
                label: (
                  <Link to={`${item.link}${search}`}>
                    {before}
-                    <span key="english">{item.title}</span>
+                    <span key="english">{item?.title}</span>
                    <span className="chinese" key="chinese">
                      {(item.frontmatter as any).subtitle}
                    </span>
@ -120,7 +120,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
              label: (
                <Link to={`${item.link}${search}`}>
                  {before}
-                  {item.title}
+                  {item?.title}
                  {after}
                </Link>
              ),
--- a/.dumi/pages/index/components/BannerRecommends.tsx
+++ b/.dumi/pages/index/components/BannerRecommends.tsx
@ -52,14 +52,14 @@ export default function BannerRecommends({ extras = [], icons = [] }: BannerReco
        textAlign: 'start',
      }}
    >
-      {first3.map((extra) => {
+      {first3.map((extra, index) => {
        if (!extra) {
-          return <Skeleton key={extra.title} />;
+          return <Skeleton key={index} />;
        }
        const icon = icons.find((i) => i.name === extra.source);
        return (
-          <a key={extra.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
-            <Typography.Title level={5}>{extra.title}</Typography.Title>
+          <a key={extra?.title} href={extra.href} target="_blank" css={style.card} rel="noreferrer">
+            <Typography.Title level={5}>{extra?.title}</Typography.Title>
            <Typography.Paragraph type="secondary" style={{ flex: 'auto' }}>
              {extra.description}
            </Typography.Paragraph>
--- a/.dumi/pages/index/components/RecommendsOld.tsx
+++ b/.dumi/pages/index/components/RecommendsOld.tsx
@ -91,7 +91,7 @@ export default function Recommends({ recommendations = [] }: RecommendsProps) {
            {data ? (
              <div css={style.card} style={{ backgroundImage: `url(${data.img})` }}>
                <div className="intro">
-                  <Typography.Title level={4}>{data.title}</Typography.Title>
+                  <Typography.Title level={4}>{data?.title}</Typography.Title>
                  <Typography.Paragraph>{data.description}</Typography.Paragraph>
                </div>
              </div>
--- a/.dumi/theme/builtins/ComponentOverview/index.tsx
+++ b/.dumi/theme/builtins/ComponentOverview/index.tsx
@ -97,11 +97,11 @@ const Overview: React.FC = () => {
  const groups = useMemo<{ title: string; children: Component[] }[]>(
    () =>
      data
-        .filter((item) => item.title)
+        .filter((item) => item?.title)
        .map<{ title: string; children: Component[] }>((item) => ({
-          title: item.title!,
+          title: item?.title,
          children: item.children.map((child) => ({
-            title: child.frontmatter.title,
+            title: child.frontmatter?.title,
            subtitle: child.frontmatter.subtitle,
            cover: child.frontmatter.cover,
            link: child.link,
@ -136,19 +136,19 @@ const Overview: React.FC = () => {
      />
      <Divider />
      {groups
-        .filter((i) => i.title)
+        .filter((i) => i?.title)
        .map((group) => {
          const components = group?.children?.filter(
            (component) =>
              !search.trim() ||
-              component.title.toLowerCase().includes(search.trim().toLowerCase()) ||
+              component?.title?.toLowerCase()?.includes(search.trim().toLowerCase()) ||
              (component?.subtitle || '').toLowerCase().includes(search.trim().toLowerCase()),
          );
          return components?.length ? (
-            <div key={group.title} css={style.componentsOverview}>
+            <div key={group?.title} css={style.componentsOverview}>
              <Title level={2} css={style.componentsOverviewGroupTitle}>
                <Space align="center">
-                  <span style={{ fontSize: 24 }}>{group.title}</span>
+                  <span style={{ fontSize: 24 }}>{group?.title}</span>
                  <Tag style={{ display: 'block' }}>{components.length}</Tag>
                </Space>
              </Title>
@ -160,7 +160,7 @@ const Overview: React.FC = () => {
                  const ComponentLink = !url.startsWith('http') ? Link : 'a';

                  return (
-                    <Col xs={24} sm={12} lg={8} xl={6} key={component.title}>
+                    <Col xs={24} sm={12} lg={8} xl={6} key={component?.title}>
                      <ComponentLink to={url} href={url} onClick={() => onClickCard(url)}>
                        <Card
                          bodyStyle={{
@ -172,12 +172,12 @@ const Overview: React.FC = () => {
                          css={style.componentsOverviewCard}
                          title={
                            <div css={style.componentsOverviewTitle}>
-                              {component.title} {component.subtitle}
+                              {component?.title} {component.subtitle}
                            </div>
                          }
                        >
                          <div css={style.componentsOverviewImg}>
-                            <img src={component.cover} alt={component.title} />
+                            <img src={component.cover} alt={component?.title} />
                          </div>
                        </Card>
                      </ComponentLink>
--- a/.dumi/theme/builtins/Previewer/index.jsx
+++ b/.dumi/theme/builtins/Previewer/index.jsx
@ -158,7 +158,7 @@ class Demo extends React.Component {
      expand: codeExpand,
      'code-box-debug': meta.debug,
    });
-    const localizedTitle = meta.title[locale] || meta.title;
+    const localizedTitle = meta?.title[locale] || meta?.title;
    const localizeIntro = content[locale] || content;
    const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }} />;

--- a/.dumi/theme/builtins/ResourceArticles/index.tsx
+++ b/.dumi/theme/builtins/ResourceArticles/index.tsx
@ -84,7 +84,7 @@ const ArticleList: React.FC<ArticleListProps> = ({ name, data = [], authors = []
                </a>
                <Divider type="vertical" />
                <a href={article.href} target="_blank" rel="noreferrer">
-                  {article.title}
+                  {article?.title}
                </a>
              </li>
            );
--- a/.dumi/theme/builtins/ResourceCards/index.tsx
+++ b/.dumi/theme/builtins/ResourceCards/index.tsx
@ -94,7 +94,7 @@ const ResourceCard: React.FC<ResourceCardProps> = ({ resource }) => {
          style={coverColor ? { backgroundColor: coverColor } : {}}
        />
        {official && <div css={styles.badge}>Official</div>}
-        <p css={styles.title}>{title}</p>
+        <p css={styles?.title}>{title}</p>
        <p css={styles.description}>{description}</p>
      </a>
    </Col>
@ -108,7 +108,7 @@ export type ResourceCardsProps = {
 const ResourceCards: React.FC<ResourceCardsProps> = ({ resources }) => (
  <Row style={{ margin: '-12px -12px 0 -12px' }}>
    {resources.map((item) => (
-      <ResourceCard resource={item} key={item.title} />
+      <ResourceCard resource={item} key={item?.title} />
    ))}
  </Row>
 );
--- a/.dumi/theme/builtins/TokenTable/index.tsx
+++ b/.dumi/theme/builtins/TokenTable/index.tsx
@ -4,8 +4,8 @@ import React, { useMemo } from 'react';
 // @ts-ignore
 import tokenMeta from 'antd/es/version/token-meta.json';
 import { getDesignToken } from 'antd-token-previewer';
-import type { TableProps } from 'antd';
 import { Table } from 'antd';
+import type { TableProps } from 'antd';
 import { css } from '@emotion/react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
@ -68,7 +68,6 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
      title: locale.description,
      key: 'desc',
      dataIndex: 'desc',
-      width: 300,
    },
    {
      title: locale.type,
@ -103,12 +102,14 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {

  const data = useMemo<TokenData[]>(
    () =>
-      tokenMeta[type].map((token) => ({
-        name: token.name,
-        desc: lang === 'cn' ? token.desc : token.descEn,
-        type: token.type,
-        value: (defaultToken as any)[token.name],
-      })),
+      Object.entries(tokenMeta)
+        .filter(([, meta]) => meta.source === type)
+        .map(([token, meta]) => ({
+          name: token,
+          desc: lang === 'cn' ? meta.desc : meta.descEn,
+          type: meta.type,
+          value: (defaultToken as any)[token],
+        })),
    [type, lang],
  );

--- a/.dumi/theme/common/CommonHelmet.tsx
+++ b/.dumi/theme/common/CommonHelmet.tsx
@ -5,7 +5,9 @@ const CommonHelmet = () => {
  const meta = useRouteMeta();

  const [title, description] = useMemo(() => {
-    const helmetTitle = `${meta.frontmatter.subtitle || ''} ${meta.frontmatter.title} - Ant Design`;
+    const helmetTitle = `${meta.frontmatter.subtitle || ''} ${
+      meta.frontmatter?.title
+    } - Ant Design`;
    const helmetDescription = meta.frontmatter.description;
    return [helmetTitle, helmetDescription];
  }, [meta]);
--- a/.dumi/theme/layouts/DocLayout/index.tsx
+++ b/.dumi/theme/layouts/DocLayout/index.tsx
@ -7,7 +7,6 @@ import type { DirectionType } from 'antd/es/config-provider';
 import ConfigProvider from 'antd/es/config-provider';
 import classNames from 'classnames';
 import zhCN from 'antd/es/locale/zh_CN';
-import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import Header from '../../slots/Header';
 import Footer from '../../slots/Footer';
 import useLocale from '../../../hooks/useLocale';
@ -17,11 +16,6 @@ import ResourceLayout from '../ResourceLayout';
 import GlobalStyles from '../../common/GlobalStyles';
 import SidebarLayout from '../SidebarLayout';

-const styleCache = createCache();
-if (typeof global !== 'undefined') {
-  (global as any).styleCache = styleCache;
-}
-
 const locales = {
  cn: {
    title: 'Ant Design - 一套企业级 UI 设计语言和 React 组件库',
@ -135,34 +129,32 @@ const DocLayout: React.FC = () => {
  );

  return (
-    <StyleProvider cache={styleCache}>
-      <SiteContext.Provider value={siteContextValue}>
-        <Helmet encodeSpecialCharacters={false}>
-          <html
-            lang={lang}
-            data-direction={direction}
-            className={classNames({ [`rtl`]: direction === 'rtl' })}
-          />
-          <title>{locale.title}</title>
-          <link
-            sizes="144x144"
-            href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
-          />
-          <meta name="description" content={locale.description} />
-          <meta property="og:title" content={locale.title} />
-          <meta property="og:type" content="website" />
-          <meta
-            property="og:image"
-            content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
-          />
-        </Helmet>
-        <ConfigProvider locale={lang === 'cn' ? zhCN : undefined} direction={direction}>
-          <GlobalStyles />
-          <Header changeDirection={changeDirection} />
-          {content}
-        </ConfigProvider>
-      </SiteContext.Provider>
-    </StyleProvider>
+    <SiteContext.Provider value={siteContextValue}>
+      <Helmet encodeSpecialCharacters={false}>
+        <html
+          lang={lang}
+          data-direction={direction}
+          className={classNames({ [`rtl`]: direction === 'rtl' })}
+        />
+        <title>{locale?.title}</title>
+        <link
+          sizes="144x144"
+          href="https://gw.alipayobjects.com/zos/antfincdn/UmVnt3t4T0/antd.png"
+        />
+        <meta name="description" content={locale.description} />
+        <meta property="og:title" content={locale?.title} />
+        <meta property="og:type" content="website" />
+        <meta
+          property="og:image"
+          content="https://gw.alipayobjects.com/zos/rmsportal/rlpTLlbMzTNYuZGGCVYM.png"
+        />
+      </Helmet>
+      <ConfigProvider locale={lang === 'cn' ? zhCN : undefined} direction={direction}>
+        <GlobalStyles />
+        <Header changeDirection={changeDirection} />
+        {content}
+      </ConfigProvider>
+    </SiteContext.Provider>
  );
 };

--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@ -1,12 +1,16 @@
-import React, { useLayoutEffect } from 'react';
+import React, { startTransition, useLayoutEffect } from 'react';
 import { useOutlet } from 'dumi';
 import { ConfigProvider, theme as antdTheme } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
-import type { ThemeContextProps } from '../slots/ThemeContext';
-import ThemeContext from '../slots/ThemeContext';
+import { createCache, StyleProvider } from '@ant-design/cssinjs';
 import ThemeSwitch from '../common/ThemeSwitch';
 import useLocation from '../../hooks/useLocation';

+const styleCache = createCache();
+if (typeof global !== 'undefined') {
+  (global as any).styleCache = styleCache;
+}
+
 const ANT_DESIGN_SITE_THEME = 'antd-site-theme';

 const getAlgorithm = (theme: string) => {
@ -54,38 +58,24 @@ const GlobalLayout: React.FC = () => {
    );
  };

-  const contextValue = React.useMemo<ThemeContextProps>(
-    () => ({
-      theme,
-      setTheme: handleThemeChange,
-    }),
-    [theme],
-  );
-
  useLayoutEffect(() => {
    const localTheme = localStorage.getItem(ANT_DESIGN_SITE_THEME);
    if (localTheme) {
-      try {
-        const themeConfig = JSON.parse(localTheme);
-        if (themeConfig.algorithm) {
-          themeConfig.algorithm = themeConfig.algorithm.map((item: string) => getAlgorithm(item));
-        } else {
-          themeConfig.algorithm = [antdTheme.defaultAlgorithm];
-        }
-        setTheme(themeConfig);
-      } catch (e) {
-        console.error(e);
+      const themeConfig = JSON.parse(localTheme);
+      if (themeConfig.algorithm) {
+        themeConfig.algorithm = themeConfig.algorithm.map((item: string) => getAlgorithm(item));
+      } else {
+        themeConfig.algorithm = [antdTheme.defaultAlgorithm];
      }
+      startTransition(() => {
+        setTheme(themeConfig);
+      });
    }
  }, []);

  return (
-    <ThemeContext.Provider value={contextValue}>
-      <ConfigProvider
-        theme={{
-          ...theme,
-        }}
-      >
+    <StyleProvider cache={styleCache}>
+      <ConfigProvider theme={theme}>
        {outlet}
        {!pathname.startsWith('/~demos') && (
          <ThemeSwitch
@ -94,7 +84,7 @@ const GlobalLayout: React.FC = () => {
          />
        )}
      </ConfigProvider>
-    </ThemeContext.Provider>
+    </StyleProvider>
  );
 };

--- a/.dumi/theme/layouts/ResourceLayout/index.tsx
+++ b/.dumi/theme/layouts/ResourceLayout/index.tsx
@ -122,7 +122,7 @@ const ResourceLayout: FC<ResourceLayoutProps> = ({ children }) => {
          <AffixTabs />
          <div css={styles.banner}>
            <Typography.Title style={{ fontSize: 30 }}>
-              {meta.frontmatter.title}
+              {meta.frontmatter?.title}
              <EditButton
                title={<FormattedMessage id="app.content.edit-page" />}
                filename={meta.frontmatter.filename}
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -101,7 +101,7 @@ type AnchorItem = {

 const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
  const meta = useRouteMeta();
-  const { pathname } = useLocation();
+  const { pathname, hash } = useLocation();
  const { formatMessage } = useIntl();
  const styles = useStyle();
  const { direction } = useContext(SiteContext);
@ -112,8 +112,10 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
    [meta],
  );

+  const isDebugDemo = debugDemos.includes(hash.slice(1));
+
  useLayoutEffect(() => {
-    setShowDebug(process.env.NODE_ENV === 'development');
+    setShowDebug(process.env.NODE_ENV === 'development' || isDebugDemo);
  }, []);

  const contextValue = useMemo<DemoContextProps>(
@ -147,7 +149,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
          <section css={styles.tocWrapper} className={classNames({ rtl: isRTL })}>
            <Anchor css={styles.toc} affix={false} showInkInFixed>
              {anchorItems.map((item) => (
-                <Anchor.Link href={`#${item.id}`} title={item.title} key={item.id}>
+                <Anchor.Link href={`#${item.id}`} title={item?.title} key={item.id}>
                  {item.children
                    ?.filter((child) => showDebug || !debugDemos.includes(child.id))
                    .map((child) => (
@ -157,7 +159,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
                          <span
                            className={classNames(debugDemos.includes(child.id) && 'toc-debug')}
                          >
-                            {child.title}
+                            {child?.title}
                          </span>
                        }
                        key={child.id}
@ -170,7 +172,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
        </Affix>
        <article css={styles.articleWrapper} className={classNames({ rtl: isRTL })}>
          <Typography.Title style={{ fontSize: 30 }}>
-            {meta.frontmatter.title}
+            {meta.frontmatter?.title}
            {meta.frontmatter.subtitle && (
              <span style={{ marginLeft: 12 }}>{meta.frontmatter.subtitle}</span>
            )}
--- a/.dumi/theme/slots/Header/Navigation.tsx
+++ b/.dumi/theme/slots/Header/Navigation.tsx
@ -148,7 +148,7 @@ export default ({
          target="_blank"
          rel="noopener noreferrer"
        >
-          Github
+          GitHub
        </a>
      ),
      key: 'github',
--- a/.dumi/theme/slots/Header/SwitchBtn.tsx
+++ b/.dumi/theme/slots/Header/SwitchBtn.tsx
@ -41,10 +41,6 @@ const useStyle = () => {

      &:hover {
        background: ${token.colorBgTextHover};
-
-        .btn-inner {
-          transform: scale(1.1);
-        }
      }

      img {
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@ -341,7 +341,7 @@ const Header: React.FC<HeaderProps> = (props) => {
    <Popover
      key="version"
      open={!!notify}
-      title={locale.title}
+      title={locale?.title}
      content={
        <Typography style={{ marginTop: token.marginXS }}>
          {lang === 'cn' ? (
@ -352,7 +352,7 @@ const Header: React.FC<HeaderProps> = (props) => {
                  target="_blank"
                  href="https://github.com/ant-design/ant-design/issues/38463"
                >
-                  Github Issue
+                  GitHub Issue
                </Typography.Link>{' '}
                反馈。
              </div>
@ -366,7 +366,7 @@ const Header: React.FC<HeaderProps> = (props) => {
                  target="_blank"
                  href="https://github.com/ant-design/ant-design/issues/38463"
                >
-                  Github Issue
+                  GitHub Issue
                </Typography.Link>
                .
              </div>
@ -383,6 +383,7 @@ const Header: React.FC<HeaderProps> = (props) => {
        defaultValue={antdVersion}
        onChange={handleVersionChange}
        dropdownStyle={getDropdownStyle}
+        dropdownMatchSelectWidth={false}
        getPopupContainer={(trigger) => trigger.parentNode}
        onClick={onClose}
      >
--- a/.dumi/theme/slots/ThemeContext.tsx
+++ b/.dumi/theme/slots/ThemeContext.tsx
@ -1,11 +0,0 @@
-import { createContext } from 'react';
-import type { ThemeConfig } from 'antd/es/config-provider/context';
-
-export type ThemeContextProps = {
-  theme: ThemeConfig;
-  setTheme: (theme: ThemeConfig) => void;
-};
-
-const ThemeContext = createContext<ThemeContextProps>({ theme: {}, setTheme: () => {} });
-
-export default ThemeContext;
--- a/.dumi/theme/utils.tsx
+++ b/.dumi/theme/utils.tsx
@ -41,7 +41,7 @@ export function getMenuItems(
    if (meta.type) {
      meta.type = meta.type[locale] || meta.type;
    }
-    if (meta.title) {
+    if (meta?.title) {
      meta.title = meta.title[locale] || meta.title;
    }

@ -52,7 +52,7 @@ export function getMenuItems(

    // Component
    if (meta.category === 'Components' && meta.type) {
-      let type = menuItems.find((i) => i.title === meta.type);
+      let type = menuItems.find((i) => i?.title === meta.type);
      if (!type) {
        type = {
          type: 'type',
@ -67,7 +67,7 @@ export function getMenuItems(
      return;
    }

-    let group = menuItems.find((i) => i.title === meta.category);
+    let group = menuItems.find((i) => i?.title === meta.category);

    if (!group) {
      group = {
@ -82,7 +82,7 @@ export function getMenuItems(
    group.children = group.children || [];

    if (meta.type) {
-      let type = group.children.filter((i) => i.title === meta.type)[0];
+      let type = group.children.filter((i) => i?.title === meta.type)[0];
      if (!type) {
        type = {
          type: 'type',
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,20 @@ timeline: true

 ---

+## 5.0.3
+
+`2022-11-30`
+
+- 🐞 Fix Spin alignment when using `tip`. [#38923](https://github.com/ant-design/ant-design/pull/38923) [@sribich](https://github.com/sribich)
+- Menu
+  - 🐞 Fix Menu Submenu style when overflowed. [#39093](https://github.com/ant-design/ant-design/pull/39093)
+  - 🐞 Fix Menu.Item hover area when trigger active color change. [#39077](https://github.com/ant-design/ant-design/pull/39077) [@Pulset](https://github.com/Pulset)
+- 🐞 Fix Input.TextArea resize behavior by adding reset style. [aa92f02](https://github.com/ant-design/ant-design/commit/aa92f02)
+- 🐞 Fix Upload default icon color. [#39114](https://github.com/ant-design/ant-design/pull/39114) [@MARKX97](https://github.com/MARKX97)
+- 🐞 Fix ssr warning in dev mode caused by dynamic hashId. [#39069](https://github.com/ant-design/ant-design/pull/39069)
+- 🐞 Fix FloatButton.Group flicking on closing. [#39061](https://github.com/ant-design/ant-design/pull/39061)
+- 🐞 Fix Card.Meta that width is not 100%. [#39026](https://github.com/ant-design/ant-design/pull/39026) [@justanotheranonymoususer](https://github.com/justanotheranonymoususer)
+
 ## 5.0.2

 `2022-11-27`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,20 @@ timeline: true

 ---

+## 5.0.3
+
+`2022-11-30`
+
+- 🐞 修复 Spin 包裹模式时的样式偏移问题。[#38923](https://github.com/ant-design/ant-design/pull/38923) [@sribich](https://github.com/sribich)
+- Menu
+  - 🐞 修复 Menu 溢出时下拉菜单的样式问题。[#39093](https://github.com/ant-design/ant-design/pull/39093)
+  - 🐞 修复 hover 在 Menu.Item 外面时颜色变蓝的问题。[#39077](https://github.com/ant-design/ant-design/pull/39077) [@Pulset](https://github.com/Pulset)
+- 🐞 修复 Input.TextArea 没有重置样式导致 resize 行为和 4.x 不一致的问题。[aa92f02](https://github.com/ant-design/ant-design/commit/aa92f02)
+- 🐞 修复 Upload 默认图标颜色。[#39114](https://github.com/ant-design/ant-design/pull/39114) [@MARKX97](https://github.com/MARKX97)
+- 🐞 修复 dev 下动态 hashId 导致的 ssr 注水失败的问题。[#39069](https://github.com/ant-design/ant-design/pull/39069)
+- 🐞 修复 FloatButton.Group 关闭时闪烁的问题。[#39061](https://github.com/ant-design/ant-design/pull/39061)
+- 🐞 修复 Card.Meta 宽度没有默认填满容器的问题。[#39026](https://github.com/ant-design/ant-design/pull/39026) [@justanotheranonymoususer](https://github.com/justanotheranonymoususer)
+
 ## 5.0.2

 `2022-11-27`
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@ -1,11 +1,11 @@
 ---
 category: Components
 title: Affix
-cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
-  title: 其他
+  title: Other
  order: 7
 ---

--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 title: Affix
 subtitle: 固钉
-cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*YSm4RI3iOJ8AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: Alert
-cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ct7bT7rrTTAAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 subtitle: 警告提示
 title: Alert
-cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ct7bT7rrTTAAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
@ -19,6 +19,7 @@ group:

 ## 代码演示

+<!-- prettier-ignore -->
 <code src="./demo/basic.tsx">基本</code>
 <code src="./demo/style.tsx">四种样式</code>
 <code src="./demo/closable.tsx">可关闭的警告提示</code>
@ -34,24 +35,24 @@ group:

 ## API

-| 参数        | 说明                                                                 | 类型                    | 默认值                                    | 版本   |
-| ----------- | -------------------------------------------------------------------- | ----------------------- | ----------------------------------------- | ------ |
-| action      | 自定义操作项                                                         | ReactNode               | -                                         | 4.9.0  |
-| afterClose  | 关闭动画结束后触发的回调函数                                         | () => void              | -                                         |        |
-| banner      | 是否用作顶部公告                                                     | boolean                 | false                                     |        |
-| closable    | 默认不显示关闭按钮                                                   | boolean                 | -                                         |        |
-| closeText   | 自定义关闭按钮                                                       | ReactNode               | -                                         |        |
-| closeIcon   | 自定义关闭 Icon                                                      | ReactNode               | `<CloseOutlined />`                       | 4.18.0 |
-| description | 警告提示的辅助性文字介绍                                             | ReactNode               | -                                         |        |
-| icon        | 自定义图标，`showIcon` 为 true 时有效                                | ReactNode               | -                                         |        |
-| message     | 警告提示内容                                                         | ReactNode               | -                                         |        |
-| showIcon    | 是否显示辅助图标                                                     | boolean                 | false，`banner` 模式下默认值为 true       |        |
-| type        | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string                  | `info`，`banner` 模式下默认值为 `warning` |        |
-| onClose     | 关闭时触发的回调函数                                                 | (e: MouseEvent) => void | -                                         |        |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| action | 自定义操作项 | ReactNode | - | 4.9.0 |
+| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |  |
+| banner | 是否用作顶部公告 | boolean | false |  |
+| closable | 默认不显示关闭按钮 | boolean | - |  |
+| closeText | 自定义关闭按钮 | ReactNode | - |  |
+| closeIcon | 自定义关闭 Icon | ReactNode | `<CloseOutlined />` | 4.18.0 |
+| description | 警告提示的辅助性文字介绍 | ReactNode | - |  |
+| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |  |
+| message | 警告提示内容 | ReactNode | - |  |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |  |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |  |
+| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |  |

 ### Alert.ErrorBoundary

-| 参数        | 说明                                         | 类型      | 默认值            | 版本 |
-| ----------- | -------------------------------------------- | --------- | ----------------- | ---- |
-| description | 自定义错误内容，如果未指定会展示报错堆栈     | ReactNode | {{ error stack }} |      |
-| message     | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }}       |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} |  |
+| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} |  |
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: Anchor
-cover: https://gw.alipayobjects.com/zos/bmw-prod/669b87c5-7b44-4c99-a5ea-4c38f8004788.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 title: Anchor
 subtitle: 锚点
-cover: https://gw.alipayobjects.com/zos/bmw-prod/669b87c5-7b44-4c99-a5ea-4c38f8004788.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*TBTSR4PyVmkAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: AutoComplete
-cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original
 group:
  title: Data Entry
  order: 4
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 subtitle: 自动完成
 title: AutoComplete
-cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*g8THS4NpV6sAAAAAAAAAAAAADrJ8AQ/original
 group:
  title: 数据录入
  order: 4
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: Avatar
-cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 subtitle: 头像
 title: Avatar
-cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JJBSS5lBG4IAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/badge/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/badge/tests/snapshots/demo-extend.test.ts.snap
@ -549,7 +549,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:#f50"
+          style="color:#f50;background:#f50"
        />
        <span
          class="ant-badge-status-text"
@ -567,7 +567,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:rgb(45, 183, 245)"
+          style="color:rgb(45, 183, 245);background:rgb(45, 183, 245)"
        />
        <span
          class="ant-badge-status-text"
@ -585,7 +585,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hsl(102, 53%, 61%)"
+          style="color:hsl(102, 53%, 61%);background:hsl(102, 53%, 61%)"
        />
        <span
          class="ant-badge-status-text"
@ -602,7 +602,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hwb(205 6% 9%)"
+          style="color:hwb(205 6% 9%);background:hwb(205 6% 9%)"
        />
        <span
          class="ant-badge-status-text"
--- a/components/badge/tests/snapshots/demo.test.ts.snap
+++ b/components/badge/tests/snapshots/demo.test.ts.snap
@ -549,7 +549,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:#f50"
+          style="color:#f50;background:#f50"
        />
        <span
          class="ant-badge-status-text"
@ -567,7 +567,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:rgb(45, 183, 245)"
+          style="color:rgb(45, 183, 245);background:rgb(45, 183, 245)"
        />
        <span
          class="ant-badge-status-text"
@ -585,7 +585,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hsl(102, 53%, 61%)"
+          style="color:hsl(102, 53%, 61%);background:hsl(102, 53%, 61%)"
        />
        <span
          class="ant-badge-status-text"
@ -602,7 +602,7 @@ Array [
      >
        <span
          class="ant-badge-status-dot"
-          style="background:hwb(205 6% 9%)"
+          style="color:hwb(205 6% 9%);background:hwb(205 6% 9%)"
        />
        <span
          class="ant-badge-status-text"
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: Badge
-cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group: Data Display
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@ -153,6 +153,7 @@ const Badge: CompoundedComponent = ({

  const statusStyle: React.CSSProperties = {};
  if (color && !isPresetColor(color)) {
+    statusStyle.color = color;
    statusStyle.background = color;
  }

--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 subtitle: 徽标数
 title: Badge
-cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e0qITYqF394AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group: 数据展示
--- a/components/badge/style/index.tsx
+++ b/components/badge/style/index.tsx
@ -185,6 +185,7 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
        },
        [`${componentCls}-status-processing`]: {
          position: 'relative',
+          color: token.colorPrimary,
          backgroundColor: token.colorPrimary,

          '&::after': {
@ -193,7 +194,9 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
            insetInlineStart: 0,
            width: '100%',
            height: '100%',
-            border: `${badgeShadowSize}px solid ${token.colorPrimary}`,
+            borderWidth: badgeShadowSize,
+            borderStyle: 'solid',
+            borderColor: 'inherit',
            borderRadius: '50%',
            animationName: antStatusProcessing,
            animationDuration: token.badgeProcessingDuration,
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@ -19,10 +19,10 @@ export interface BreadcrumbItemProps {
  /** @deprecated Please use `menu` instead */
  overlay?: DropdownProps['overlay'];
 }
-interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
+type CompoundedComponent = React.FC<BreadcrumbItemProps> & {
  __ANT_BREADCRUMB_ITEM: boolean;
-}
-const BreadcrumbItem: BreadcrumbItemInterface = (props) => {
+};
+const BreadcrumbItem: CompoundedComponent = (props) => {
  const {
    prefixCls: customizePrefixCls,
    separator = '/',
--- a/components/breadcrumb/BreadcrumbSeparator.tsx
+++ b/components/breadcrumb/BreadcrumbSeparator.tsx
@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';

-interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
+type CompoundedComponent = React.FC<{ children?: React.ReactNode }> & {
  /** @internal */
  __ANT_BREADCRUMB_SEPARATOR: boolean;
-}
+};

-const BreadcrumbSeparator: BreadcrumbSeparatorInterface = ({ children }) => {
+const BreadcrumbSeparator: CompoundedComponent = ({ children }) => {
  const { getPrefixCls } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('breadcrumb');

--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Navigation
 title: Breadcrumb
-cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 面包屑
 group: 导航
 title: Breadcrumb
-cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*I5a2Tpqs3y0AAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: Button
-cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BrFMQ5s7AAQAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 title: Button
 subtitle: 按钮
-cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BrFMQ5s7AAQAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: Calendar
-cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 ---

 Container for displaying data in calendar form.
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据展示
 subtitle: 日历
 title: Calendar
-cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nF6_To7pDSAAAAAAAAAAAAAADrJ8AQ/original
 ---

 按照日历形式展示数据的容器。
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: Card
-cover: https://gw.alipayobjects.com/zos/alicdn/keNB-R8Y9/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---

 Simple rectangular container.
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据展示
 title: Card
 subtitle: 卡片
-cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VXtCTp93KPAAAAAAAAAAAAAADrJ8AQ/original
 ---

 通用卡片容器。
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: Carousel
-cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据展示
 title: Carousel
 subtitle: 走马灯
-cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*bPMSSqbaTMkAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: Cascader
-cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tokLTp73TsQAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据录入
 title: Cascader
 subtitle: 级联选择
-cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tokLTp73TsQAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: Checkbox
-cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 多选框
 group: 数据录入
 title: Checkbox
-cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DzgiRbW3khIAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@ -174,6 +174,16 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
          borderColor: token.colorPrimary,
        },
      },
+
+      [`${wrapperCls}:not(${wrapperCls}-disabled)`]: {
+        [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled) ${checkboxCls}-inner`]: {
+          backgroundColor: token.colorPrimaryHover,
+          borderColor: 'transparent',
+        },
+        [`&:hover ${checkboxCls}-checked:not(${checkboxCls}-disabled):after`]: {
+          borderColor: token.colorPrimaryHover,
+        },
+      },
    },

    // ==================== Checked ====================
@ -183,7 +193,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
        [`${checkboxCls}-inner`]: {
          backgroundColor: token.colorPrimary,
          borderColor: token.colorPrimary,
-          zIndex: 2,

          '&:after': {
            opacity: 1,
@ -195,7 +204,6 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
        // Checked Effect
        '&:after': {
          position: 'absolute',
-          zIndex: 1,
          top: 0,
          insetInlineStart: 0,
          width: '100%',
@ -208,6 +216,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
          animationTimingFunction: 'ease-in-out',
          animationFillMode: 'backwards',
          content: '""',
+          transition: `all ${token.motionDurationSlow}`,
        },
      },

@ -219,6 +228,9 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
          backgroundColor: token.colorPrimaryHover,
          borderColor: 'transparent',
        },
+        [`&:hover ${checkboxCls}:after`]: {
+          borderColor: token.colorPrimaryHover,
+        },
      },
    },

--- a/components/collapse/Collapse.tsx
+++ b/components/collapse/Collapse.tsx
@ -50,11 +50,11 @@ interface PanelProps {
  collapsible?: CollapsibleType;
 }

-interface CollapseInterface extends React.FC<CollapseProps> {
+type CompoundedComponent = React.FC<CollapseProps> & {
  Panel: typeof CollapsePanel;
-}
+};

-const Collapse: CollapseInterface = (props) => {
+const Collapse: CompoundedComponent = (props) => {
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
  const {
    prefixCls: customizePrefixCls,
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: Collapse
-cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
 ---

 A content area which can be collapsed and expanded.
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据展示
 title: Collapse
 subtitle: 折叠面板
-cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*B7HKR5OBe8gAAAAAAAAAAAAADrJ8AQ/original
 ---

 可以折叠/展开的内容区域。
--- a/components/config-provider/demo/theme.tsx
+++ b/components/config-provider/demo/theme.tsx
@ -23,8 +23,14 @@ export default () => {
    >
      <Form
        form={form}
-        onValuesChange={(_, nextData) => {
-          setData({ ...nextData, colorPrimary: nextData.colorPrimary.hex });
+        onValuesChange={(changedValues, allValues) => {
+          const colorObj = changedValues?.colorPrimary
+            ? { colorPrimary: allValues?.colorPrimary?.hex }
+            : {};
+          setData({
+            ...allValues,
+            ...colorObj,
+          });
        }}
        name="theme"
        initialValues={defaultData}
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Other
 title: ConfigProvider
-cover: https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
 ---

 `ConfigProvider` provides a uniform configuration support for components.
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 全局化配置
 group: 其他
 title: ConfigProvider
-cover: https://gw.alipayobjects.com/zos/alicdn/kegYxl1wj/ConfigProvider.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAAAAAAAADrJ8AQ/original
 ---

 为组件提供统一的全局化配置。
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: DatePicker
-cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xXA9TJ8BTioAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据录入
 title: DatePicker
 subtitle: 日期选择框
-cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xXA9TJ8BTioAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: Descriptions
-cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
 ---

 Display multiple read-only fields in groups.
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 描述列表
 group: 数据展示
 title: Descriptions
-cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
 ---

 成组展示多个只读字段。
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@ -1,7 +1,7 @@
 ---
 category: Components
 title: Divider
-cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@ -2,7 +2,7 @@
 category: Components
 title: Divider
 subtitle: 分割线
-cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*7sMiTbzvaDoAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 group:
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -3,7 +3,7 @@ group: Feedback
 category: Components
 subtitle:
 title: Drawer
-cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v3TvSq2E0HAAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -3,7 +3,7 @@ group: 反馈
 category: Components
 subtitle: 抽屉
 title: Drawer
-cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!6000000001681-55-tps-161-117.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*v3TvSq2E0HAAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@ -28,12 +28,12 @@ export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
  buttonsRender?: (buttons: React.ReactNode[]) => React.ReactNode[];
 }

-interface DropdownButtonInterface extends React.FC<DropdownButtonProps> {
+type CompoundedComponent = React.FC<DropdownButtonProps> & {
  /** @internal */
  __ANT_BUTTON: boolean;
-}
+};

-const DropdownButton: DropdownButtonInterface = (props) => {
+const DropdownButton: CompoundedComponent = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@ -82,12 +82,12 @@ export interface DropdownProps {
  onVisibleChange?: (open: boolean) => void;
 }

-interface DropdownInterface extends React.FC<DropdownProps> {
+type CompoundedComponent = React.FC<DropdownProps> & {
  Button: typeof DropdownButton;
  _InternalPanelDoNotUseOrYouWillBeFired: typeof WrapPurePanel;
-}
+};

-const Dropdown: DropdownInterface = (props) => {
+const Dropdown: CompoundedComponent = (props) => {
  const {
    getPopupContainer: getContextPopupContainer,
    getPrefixCls,
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Navigation
 title: Dropdown
-cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mBBcQ6goljkAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 下拉菜单
 group: 导航
 title: Dropdown
-cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mBBcQ6goljkAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: Empty
-cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
 ---

 Empty state placeholder.
--- a/components/empty/index.tsx
+++ b/components/empty/index.tsx
@ -25,12 +25,12 @@ export interface EmptyProps {
  children?: React.ReactNode;
 }

-interface EmptyType extends React.FC<EmptyProps> {
+type CompoundedComponent = React.FC<EmptyProps> & {
  PRESENTED_IMAGE_DEFAULT: React.ReactNode;
  PRESENTED_IMAGE_SIMPLE: React.ReactNode;
-}
+};

-const Empty: EmptyType = ({
+const Empty: CompoundedComponent = ({
  className,
  prefixCls: customizePrefixCls,
  image = defaultEmptyImg,
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 空状态
 group: 数据展示
 title: Empty
-cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAAAAAAAADrJ8AQ/original
 ---

 空状态时的展示占位图。
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Other
 title: FloatButton
-cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 其他
 subtitle: 悬浮按钮
 title: FloatButton
-cover: https://gw.alipayobjects.com/zos/bmw-prod/9b1b62fe-e677-4afc-b9fe-1b2993662611.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HS-wTIIwu0kAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@ -393,11 +393,11 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea

 type InternalFormItemType = typeof InternalFormItem;

-interface FormItemInterface extends InternalFormItemType {
+type CompoundedComponent = InternalFormItemType & {
  useStatus: typeof useFormItemStatus;
-}
+};

-const FormItem = InternalFormItem as FormItemInterface;
+const FormItem = InternalFormItem as CompoundedComponent;
 FormItem.useStatus = useFormItemStatus;

 export default FormItem;
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: Form
-cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original
 ---

 High performance Form component with data scope management. Including data collection, verification, and styles.
--- a/components/form/index.tsx
+++ b/components/form/index.tsx
@ -13,7 +13,7 @@ import useFormInstance from './hooks/useFormInstance';

 type InternalFormType = typeof InternalForm;

-interface FormInterface extends InternalFormType {
+type CompoundedComponent = InternalFormType & {
  useForm: typeof useForm;
  useFormInstance: typeof useFormInstance;
  useWatch: typeof useWatch;
@ -24,9 +24,9 @@ interface FormInterface extends InternalFormType {

  /** @deprecated Only for warning usage. Do not use. */
  create: () => void;
-}
+};

-const Form = InternalForm as FormInterface;
+const Form = InternalForm as CompoundedComponent;

 Form.Item = Item;
 Form.List = List;
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 表单
 group: 数据录入
 title: Form
-cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-lcdS5Qm1bsAAAAAAAAAAAAADrJ8AQ/original
 ---

 高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。
@ -215,8 +215,8 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到

 ```tsx
 <Form.List>
-  {fields =>
-    fields.map(field => (
+  {(fields) =>
+    fields.map((field) => (
      <Form.Item {...field}>
        <Input />
      </Form.Item>
@ -256,7 +256,7 @@ Form.List 渲染表单相关操作函数。

 ```jsx
 <Form.Provider
-  onFormFinish={name => {
+  onFormFinish={(name) => {
    if (name === 'form1') {
      // Do something...
    }
@ -291,7 +291,7 @@ Form.List 渲染表单相关操作函数。

 ```jsx
 validateFields()
-  .then(values => {
+  .then((values) => {
    /*
  values:
    {
@ -300,7 +300,7 @@ validateFields()
    }
  */
  })
-  .catch(errorInfo => {
+  .catch((errorInfo) => {
    /*
    errorInfo:
      {
@ -524,8 +524,8 @@ Form.List 下的字段需要包裹 Form.List 本身的 `name`，比如：

 ```tsx
 <Form.List name="users">
-  {fields =>
-    fields.map(field => (
+  {(fields) =>
+    fields.map((field) => (
      <React.Fragment key={field.key}>
        <Form.Item name={[field.name, 'name']} {...someRest1} />
        <Form.Item name={[field.name, 'age']} {...someRest1} />
--- a/components/form/style/index.tsx
+++ b/components/form/style/index.tsx
@ -404,9 +404,7 @@ const makeVerticalLayout = (token: FormToken): CSSObject => {
  const { componentCls, formItemCls } = token;

  return {
-    [`${formItemCls} ${formItemCls}-label`]: {
-      ...makeVerticalLayoutLabel(token),
-    },
+    [`${formItemCls} ${formItemCls}-label`]: makeVerticalLayoutLabel(token),
    [componentCls]: {
      [formItemCls]: {
        flexWrap: 'wrap',
@ -443,40 +441,32 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {

    [`${componentCls}-vertical ${formItemCls}-label,
      .${rootPrefixCls}-col-24${formItemCls}-label,
-      .${rootPrefixCls}-col-xl-24${formItemCls}-label`]: {
-      ...makeVerticalLayoutLabel(token),
-    },
+      .${rootPrefixCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),

-    [`@media (max-width: ${token.screenSMMax}px)`]: {
-      ...makeVerticalLayout(token),
-      [componentCls]: {
-        [`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
+    [`@media (max-width: ${token.screenXSMax}px)`]: [
+      makeVerticalLayout(token),
+      {
+        [componentCls]: {
+          [`.${rootPrefixCls}-col-xs-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
        },
      },
-    },
+    ],

    [`@media (max-width: ${token.screenSMMax}px)`]: {
      [componentCls]: {
-        [`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
-        },
+        [`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
      },
    },

    [`@media (max-width: ${token.screenMDMax}px)`]: {
      [componentCls]: {
-        [`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
-        },
+        [`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
      },
    },

    [`@media (max-width: ${token.screenLGMax}px)`]: {
      [componentCls]: {
-        [`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: {
-          ...makeVerticalLayoutLabel(token),
-        },
+        [`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
      },
    },
  };
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Layout
 title: Grid
-cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original
 ---

 24 Grids System.
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 栅格
 group: 布局
 title: Grid
-cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*mfJeS6cqZrEAAAAAAAAAAAAADrJ8AQ/original
 ---

 24 栅格系统。
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -3,7 +3,7 @@ category: Components
 group: General
 title: Icon
 toc: false
-cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -4,7 +4,7 @@ subtitle: 图标
 group: 通用
 title: Icon
 toc: false
-cover: https://gw.alipayobjects.com/zos/alicdn/rrwbSt3FQ/Icon.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*PdAYS7anRpoAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@ -3,7 +3,7 @@ category: Components
 group: Data Display
 title: Image
 cols: 2
-cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
 ---

 Previewable image.
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -4,7 +4,7 @@ subtitle: 图片
 group: 数据展示
 title: Image
 cols: 2
-cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*FbOCS6aFMeUAAAAAAAAAAAAADrJ8AQ/original
 ---

 可预览的图片。
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: InputNumber
-cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/input-number/index.tsx
+++ b/components/input-number/index.tsx
@ -3,7 +3,7 @@ import UpOutlined from '@ant-design/icons/UpOutlined';
 import classNames from 'classnames';
 import type { InputNumberProps as RcInputNumberProps } from 'rc-input-number';
 import RcInputNumber from 'rc-input-number';
-import type { ValueType } from 'rc-input-number/lib/utils/MiniDecimal';
+import type { ValueType } from '@rc-component/mini-decimal';
 import * as React from 'react';
 import { useContext } from 'react';
 import ConfigProvider, { ConfigContext } from '../config-provider';
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 数字输入框
 group: 数据录入
 title: InputNumber
-cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: Input
-cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 输入框
 group: 数据录入
 title: Input
-cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Y3R0RowXHlAAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/input/style/index.tsx
+++ b/components/input/style/index.tsx
@ -180,12 +180,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
    lineHeight: token.lineHeight,
    verticalAlign: 'bottom',
    transition: `all ${token.motionDurationSlow}, height 0s`,
-  },
-
-  '&-textarea': {
-    '&-rtl': {
-      direction: 'rtl',
-    },
+    resize: 'vertical',
  },

  // Size
@ -196,9 +191,14 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({
    ...genInputSmallStyle(token),
  },

+  // RTL
  '&-rtl': {
    direction: 'rtl',
  },
+
+  '&-textarea-rtl': {
+    direction: 'rtl',
+  },
 });

 export const genInputGroupStyle = (token: InputToken): CSSObject => {
@ -904,15 +904,17 @@ const genTextAreaStyle: GenerateStyle<InputToken> = (token) => {
        },

        '&::after': {
-          position: 'absolute',
-          bottom: 0,
-          insetInlineEnd: 0,
          color: token.colorTextDescription,
          whiteSpace: 'nowrap',
          content: 'attr(data-count)',
          pointerEvents: 'none',
-          display: 'block',
-          transform: 'translateY(100%)',
+          float: 'right',
+        },
+      },
+
+      '&-rtl': {
+        '&::after': {
+          float: 'left',
        },
      },
    },
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Layout
 title: Layout
-cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
 ---

 Handling the overall layout of a page.
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 布局
 group: 布局
 title: Layout
-cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*4i58ToAcxaYAAAAAAAAAAAAADrJ8AQ/original
 ---

 协助进行页面级整体布局。
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Display
 title: List
-cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 group: 数据展示
 title: List
 subtitle: 列表
-cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EYuhSpw1iSwAAAAAAAAAAAAADrJ8AQ/original
 ---

 通用列表。
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@ -2,7 +2,7 @@
 category: Components
 group: Data Entry
 title: Mentions
-cover: https://gw.alipayobjects.com/zos/alicdn/0pF5j477V/Mentions.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@ -3,7 +3,7 @@ category: Components
 subtitle: 提及
 group: 数据录入
 title: Mentions
-cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*e4bXT7Uhi9YAAAAAAAAAAAAADrJ8AQ/original
 demo:
  cols: 2
 ---
--- a/Show More
+++ b/Show More