From fd2db7614f15b29aa2e9f79d6370d17211eeaf1f Mon Sep 17 00:00:00 2001
From: carla-cn <75775973+carla-cn@users.noreply.github.com>
Date: Fri, 17 Feb 2023 15:45:29 +0800
Subject: [PATCH 01/21] fix: diabled Input abbdon should not have status style
 (#40744)

Co-authored-by: zhouling <zhouling@kezaihui.com>
---
 .../__snapshots__/components.test.tsx.snap    |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  2 +-
 .../__snapshots__/demo.test.tsx.snap          |  2 +-
 components/input/Input.tsx                    |  1 +
 components/input/style/index.ts               | 20 ++++++++++++-------
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index 494ae8f053..4a41303780 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -16015,7 +16015,7 @@ exports[`ConfigProvider components Input configProvider componentDisabled 1`] =
       value=""
     />
     <span
-      class="config-input-group-wrapper config-input-search"
+      class="config-input-group-wrapper config-input-search config-input-group-wrapper-disabled"
     >
       <span
         class="config-input-wrapper config-input-group"
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 65f32112f5..3d87252c71 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5526,7 +5526,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.tsx extend context
             class="ant-form-item-control-input-content"
           >
             <span
-              class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
+              class="ant-input-group-wrapper ant-input-group-wrapper-disabled ant-input-group-wrapper-status-error"
             >
               <span
                 class="ant-input-wrapper ant-input-group"
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
index d60a79badf..6ecedcb04c 100644
--- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap
@@ -2999,7 +2999,7 @@ exports[`renders ./components/form/demo/disabled-input-debug.tsx correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <span
-              class="ant-input-group-wrapper ant-input-group-wrapper-status-error"
+              class="ant-input-group-wrapper ant-input-group-wrapper-disabled ant-input-group-wrapper-status-error"
             >
               <span
                 class="ant-input-wrapper ant-input-group"
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index 4956b25994..8e11d63879 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -219,6 +219,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
             [`${prefixCls}-group-wrapper-sm`]: mergedSize === 'small',
             [`${prefixCls}-group-wrapper-lg`]: mergedSize === 'large',
             [`${prefixCls}-group-wrapper-rtl`]: direction === 'rtl',
+            [`${prefixCls}-group-wrapper-disabled`]: mergedDisabled,
           },
           getStatusClassNames(`${prefixCls}-group-wrapper`, mergedStatus, hasFeedback),
           hashId,
diff --git a/components/input/style/index.ts b/components/input/style/index.ts
index abb141fa3a..c67412c0ac 100644
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@@ -1,9 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import type { GlobalToken } from '../../theme/interface';
 import { clearFix, resetComponent } from '../../style';
 import { genCompactItemStyle } from '../../style/compact-item';
+import type { GlobalToken } from '../../theme/interface';
+import type { FullToken, GenerateStyle } from '../../theme/internal';
+import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export type InputToken<T extends GlobalToken = FullToken<'Input'>> = T & {
   inputAffixPadding: number;
@@ -669,7 +669,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
 };
 
 const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
-  const { componentCls, colorError, colorSuccess, borderRadiusLG, borderRadiusSM } = token;
+  const { componentCls, colorError, colorWarning, borderRadiusLG, borderRadiusSM } = token;
 
   return {
     [`${componentCls}-group`]: {
@@ -711,9 +711,15 @@ const genGroupStyle: GenerateStyle<InputToken> = (token: InputToken) => {
           },
         },
         '&-status-warning': {
-          [`${componentCls}-group-addon:last-child`]: {
-            color: colorSuccess,
-            borderColor: colorSuccess,
+          [`${componentCls}-group-addon`]: {
+            color: colorWarning,
+            borderColor: colorWarning,
+          },
+        },
+
+        '&-disabled': {
+          [`${componentCls}-group-addon`]: {
+            ...genDisabledStyle(token),
           },
         },
       },

From 5199344d09954fb16d7cf216905a63256408bada Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 17 Feb 2023 18:27:35 +0800
Subject: [PATCH 02/21] docs: fix unsupported syntax (#40779)

---
 components/theme/interface/seeds.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/theme/interface/seeds.ts b/components/theme/interface/seeds.ts
index 27ebd46b70..51cbf69082 100644
--- a/components/theme/interface/seeds.ts
+++ b/components/theme/interface/seeds.ts
@@ -50,7 +50,7 @@ export interface SeedToken extends PresetColorType {
   /**
    * @nameZH 基础文本色
    * @nameEN Seed Text Color
-   * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但**请不要在代码中直接使用该 Seed Token**！
+   * @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
    * @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
    */
   colorTextBase: string;
@@ -58,7 +58,7 @@ export interface SeedToken extends PresetColorType {
   /**
    * @nameZH 基础背景色
    * @nameEN Seed Background Color
-   * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但 **请不要在代码中直接使用该 Seed Token** ！
+   * @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
    * @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
    */
   colorBgBase: string;

From 51200e77323e16cccedcfdad37acd2157a0a20b9 Mon Sep 17 00:00:00 2001
From: shitian9 <33782196+shitian9@users.noreply.github.com>
Date: Fri, 17 Feb 2023 22:10:23 +0800
Subject: [PATCH 03/21] demo: fix lazy.tsx type (#40778)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Demo 有问题，会在 VSCode中 引用 `loadData`、`onChange` 时 会报错
---
 components/cascader/demo/lazy.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/cascader/demo/lazy.tsx b/components/cascader/demo/lazy.tsx
index 6693da2ffc..49f3c91d63 100644
--- a/components/cascader/demo/lazy.tsx
+++ b/components/cascader/demo/lazy.tsx
@@ -2,8 +2,8 @@ import React, { useState } from 'react';
 import { Cascader } from 'antd';
 
 interface Option {
-  value: string;
-  label: string;
+  value?: string | number | null;
+  label: React.ReactNode;
   children?: Option[];
   isLeaf?: boolean;
   loading?: boolean;
@@ -25,7 +25,7 @@ const optionLists: Option[] = [
 const App: React.FC = () => {
   const [options, setOptions] = useState<Option[]>(optionLists);
 
-  const onChange = (value: string[], selectedOptions: Option[]) => {
+  const onChange = (value: (string | number)[], selectedOptions: Option[]) => {
     console.log(value, selectedOptions);
   };
 

From de82a15b22eab4fb05629740639eec55f691e0b3 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Fri, 17 Feb 2023 22:11:06 +0800
Subject: [PATCH 04/21] type: simplify getPlacement return type (#40775)

---
 components/select/index.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/select/index.tsx b/components/select/index.tsx
index fdc91fa358..fe28f1dfde 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -1,7 +1,7 @@
 // TODO: 4.0 - codemod should help to change `filterOption` to support node props.
 import classNames from 'classnames';
+import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select';
 import RcSelect, { OptGroup, Option } from 'rc-select';
-import type { SelectProps as RcSelectProps, BaseSelectRef } from 'rc-select';
 import type { OptionProps } from 'rc-select/lib/Option';
 import type { BaseOptionType, DefaultOptionType } from 'rc-select/lib/Select';
 import omit from 'rc-util/lib/omit';
@@ -18,10 +18,10 @@ import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import getIcons from './utils/iconUtil';
 
-import useStyle from './style';
+import { useCompactItemContext } from '../space/Compact';
 import genPurePanel from '../_util/PurePanel';
 import warning from '../_util/warning';
-import { useCompactItemContext } from '../space/Compact';
+import useStyle from './style';
 
 type RawValue = string | number;
 
@@ -182,13 +182,11 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   );
 
   // ===================== Placement =====================
-  const getPlacement = () => {
+  const getPlacement = (): SelectCommonPlacement => {
     if (placement !== undefined) {
       return placement;
     }
-    return direction === 'rtl'
-      ? ('bottomRight' as SelectCommonPlacement)
-      : ('bottomLeft' as SelectCommonPlacement);
+    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
   };
 
   // ====================== Warning ======================

From 12a6f7182dec1d685eaa30e5e4e708be63ff37c1 Mon Sep 17 00:00:00 2001
From: Simon He <57086651+Simon-He95@users.noreply.github.com>
Date: Fri, 17 Feb 2023 22:12:19 +0800
Subject: [PATCH 05/21] chore: add lint cache (#40369)

---
 .eslintignore | 1 +
 package.json  | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 1d60062b10..6fbfa158dc 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -14,6 +14,7 @@ server
 .dumi/tmp-production
 !.dumi/
 node_modules
+.eslintcache
 _site
 dist
 coverage
diff --git a/package.json b/package.json
index 0654d510fb..59bb595c1d 100644
--- a/package.json
+++ b/package.json
@@ -76,9 +76,9 @@
     "lint:deps": "antd-tools run deps-lint",
     "lint:md": "remark . -f -q",
     "lint:style": "ts-node --project tsconfig.node.json scripts/check-cssinjs.js",
-    "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx --cache",
     "pre-publish": "npm run test-all -- --skip-build",
-    "prettier": "prettier -c --write **/*",
+    "prettier": "prettier -c --write **/* --cache",
     "pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub",
     "rome:format": "rome format --write .",
     "prepublishOnly": "antd-tools run guard",

From 66e2b146dd3137c7b0b63bf859a90401c908783c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Fri, 17 Feb 2023 23:15:30 +0800
Subject: [PATCH 06/21] chore(deps-dev): bump @testing-library/dom from 8.20.0
 to 9.0.0 (#40780)

Bumps [@testing-library/dom](https://github.com/testing-library/dom-testing-library) from 8.20.0 to 9.0.0.
- [Release notes](https://github.com/testing-library/dom-testing-library/releases)
- [Changelog](https://github.com/testing-library/dom-testing-library/blob/main/CHANGELOG.md)
- [Commits](https://github.com/testing-library/dom-testing-library/compare/v8.20.0...v9.0.0)

---
updated-dependencies:
- dependency-name: "@testing-library/dom"
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 59bb595c1d..e5bb4e8776 100644
--- a/package.json
+++ b/package.json
@@ -168,7 +168,7 @@
     "@qixian.cs/github-contributors-list": "^1.0.3",
     "@size-limit/file": "^8.1.0",
     "@stackblitz/sdk": "^1.3.0",
-    "@testing-library/dom": "^8.17.1",
+    "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.4.2",

From 0a246768456b0e57f6884fc39bca4a39f9bc589b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= <pingfj77@gmail.com>
Date: Sun, 19 Feb 2023 12:48:28 +0800
Subject: [PATCH 07/21] fix: use loading delay not delay at first time (#40751)
 (#40759)

* fix: use loading delay not delay at first time

* perf: test code

* refactor: optimization code

* fix: lint problem

* refactor: prefer code

* refactor: prefer code

* refactor: prefer code
---
 .../button/__tests__/delay-timer.test.tsx     |  5 +++
 components/button/button.tsx                  | 43 ++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/components/button/__tests__/delay-timer.test.tsx b/components/button/__tests__/delay-timer.test.tsx
index 4deb8d5c8b..42bdca9207 100644
--- a/components/button/__tests__/delay-timer.test.tsx
+++ b/components/button/__tests__/delay-timer.test.tsx
@@ -91,3 +91,8 @@ it('Delay loading timer in Button component', () => {
 
   jest.restoreAllMocks();
 });
+it('Delay loading while use loading delay at first time', () => {
+  const Demo = () => <Button loading={{ delay: specialDelay }} />;
+  const wrapper = render(<Demo />);
+  expect(wrapper.container.firstChild).not.toHaveClass('ant-btn-loading');
+});
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 838fdc420c..ec8a50a32a 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -2,19 +2,19 @@
 import classNames from 'classnames';
 import omit from 'rc-util/lib/omit';
 import * as React from 'react';
-import warning from '../_util/warning';
-import Wave from '../_util/wave';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
 import SizeContext from '../config-provider/SizeContext';
 import { useCompactItemContext } from '../space/Compact';
+import warning from '../_util/warning';
+import Wave from '../_util/wave';
 import Group, { GroupSizeContext } from './button-group';
 import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers';
 import LoadingIcon from './LoadingIcon';
 import useStyle from './style';
 
-import type { ButtonType, ButtonHTMLType, ButtonShape } from './buttonHelpers';
 import type { SizeType } from '../config-provider/SizeContext';
+import type { ButtonHTMLType, ButtonShape, ButtonType } from './buttonHelpers';
 
 export type LegacyButtonType = ButtonType | 'danger';
 
@@ -66,6 +66,27 @@ type CompoundedComponent = React.ForwardRefExoticComponent<
 
 type Loading = number | boolean;
 
+type LoadingConfigType = {
+  loading: boolean;
+  delay: number;
+};
+
+function getLoadingConfig(loading: BaseButtonProps['loading']): LoadingConfigType {
+  if (typeof loading === 'object' && loading) {
+    const delay = loading?.delay;
+    const isDelay = !Number.isNaN(delay) && typeof delay === 'number';
+    return {
+      loading: false,
+      delay: isDelay ? delay : 0,
+    };
+  }
+
+  return {
+    loading: !!loading,
+    delay: 0,
+  };
+}
+
 const InternalButton: React.ForwardRefRenderFunction<
   HTMLButtonElement | HTMLAnchorElement,
   ButtonProps
@@ -99,7 +120,11 @@ const InternalButton: React.ForwardRefRenderFunction<
   const mergedDisabled = customDisabled ?? disabled;
 
   const groupSize = React.useContext(GroupSizeContext);
-  const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
+  const loadingOrDelay: LoadingConfigType = React.useMemo(
+    () => getLoadingConfig(loading),
+    [loading],
+  );
+  const [innerLoading, setLoading] = React.useState<Loading>(loadingOrDelay.loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
   const buttonRef = (ref as any) || React.createRef<HTMLAnchorElement | HTMLButtonElement>();
 
@@ -121,18 +146,16 @@ const InternalButton: React.ForwardRefRenderFunction<
     }
   };
 
-  const loadingOrDelay: Loading = typeof loading === 'boolean' ? loading : loading?.delay || true;
-
   React.useEffect(() => {
     let delayTimer: number | null = null;
 
-    if (typeof loadingOrDelay === 'number') {
+    if (loadingOrDelay.delay > 0) {
       delayTimer = window.setTimeout(() => {
         delayTimer = null;
-        setLoading(loadingOrDelay);
-      }, loadingOrDelay);
+        setLoading(true);
+      }, loadingOrDelay.delay);
     } else {
-      setLoading(loadingOrDelay);
+      setLoading(loadingOrDelay.loading);
     }
 
     function cleanupTimer() {

From 5dfce5443744271f778313c23eb8ec3a5af481f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Sun, 19 Feb 2023 13:56:20 +0800
Subject: [PATCH 08/21] ci: use node 16 (#40800)

* chore: use node 16

* chore: all lock ver

* chore: size-limit

* chore: mv clean up logic into master
---
 .github/workflows/size-limit.yml |  4 ++++
 .github/workflows/test.yml       | 33 ++++++++++++++++++++++++++++++++
 tests/setup.js                   | 15 +++++++++++++++
 3 files changed, 52 insertions(+)

diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml
index bcce41cd74..147e80e5bd 100644
--- a/.github/workflows/size-limit.yml
+++ b/.github/workflows/size-limit.yml
@@ -25,6 +25,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: cache package-lock.json
         uses: actions/cache@v3
         with:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 78d828022c..76f053b7ec 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -19,6 +19,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: cache package-lock.json
         uses: actions/cache@v3
         with:
@@ -51,6 +55,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -73,6 +81,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -97,6 +109,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -136,6 +152,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -209,6 +229,11 @@ jobs:
     needs: [normal-test]
     steps:
       - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - uses: actions/download-artifact@v3
         with:
           name: coverage-artifacts
@@ -231,6 +256,10 @@ jobs:
       - name: checkout
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
@@ -278,6 +307,10 @@ jobs:
         if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
         uses: actions/checkout@v3
 
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
       - name: restore cache from package-lock.json
         # lib only run in master branch not in pull request
         if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
diff --git a/tests/setup.js b/tests/setup.js
index 8623ee6bb0..25f9bf9901 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -4,6 +4,21 @@ const util = require('util');
 // eslint-disable-next-line no-console
 console.log('Current React Version:', React.version);
 
+const originConsoleErr = console.error;
+
+// Hack off React warning to avoid too large log in CI.
+console.error = (...args) => {
+  const str = args.join('').replace(/\n/g, '');
+
+  if (
+    ['validateDOMNesting', 'on an unmounted component', 'not wrapped in act'].every(
+      (warn) => !str.includes(warn),
+    )
+  ) {
+    originConsoleErr(...args);
+  }
+};
+
 /* eslint-disable global-require */
 if (typeof window !== 'undefined') {
   global.window.resizeTo = (width, height) => {

From 54d3a738f6ef3ffe73ae076893b8f2d7e28f2539 Mon Sep 17 00:00:00 2001
From: Ritesh Makan <ritesh.makan@gmail.com>
Date: Sun, 19 Feb 2023 07:20:01 +0100
Subject: [PATCH 09/21] demo: Fix broken avatars (#40793)

* Update links from https://joeschmoe.io to https://joesch.moe

* updated snapshots
---
 .../__snapshots__/demo-extend.test.ts.snap    |  6 ++---
 .../__snapshots__/demo.test.tsx.snap          |  6 ++---
 components/avatar/demo/group.tsx              | 10 ++++-----
 .../__snapshots__/demo-extend.test.ts.snap    |  2 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  2 +-
 components/card/demo/loading.tsx              |  8 +++----
 components/card/demo/meta.tsx                 |  6 ++---
 .../__snapshots__/demo-extend.test.ts.snap    | 22 +++++++++----------
 .../__tests__/__snapshots__/demo.test.ts.snap | 22 +++++++++----------
 components/list/demo/basic.tsx                |  2 +-
 components/list/demo/pagination.tsx           |  2 +-
 components/list/demo/vertical.tsx             |  6 ++---
 .../__snapshots__/demo-extend.test.ts.snap    |  2 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  2 +-
 components/segmented/demo/custom.tsx          |  2 +-
 components/skeleton/demo/list.tsx             |  8 +++----
 .../__snapshots__/demo-extend.test.ts.snap    |  8 +++----
 .../__tests__/__snapshots__/demo.test.ts.snap |  8 +++----
 components/steps/demo/inline.tsx              |  2 +-
 19 files changed, 63 insertions(+), 63 deletions(-)

diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 19d029d4e7..31669d253f 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joeschmoe.io/api/v1/random"
+        src="https://joesch.moe/api/v1/random"
       />
     </span>
     <a
@@ -517,7 +517,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joeschmoe.io/api/v1/random"
+        src="https://joesch.moe/api/v1/random"
       />
     </span>
     <span
@@ -653,7 +653,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joeschmoe.io/api/v1/random"
+        src="https://joesch.moe/api/v1/random"
       />
     </span>
     <span
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
index ef85aadceb..4d69d27fd8 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joeschmoe.io/api/v1/random"
+        src="https://joesch.moe/api/v1/random"
       />
     </span>
     <a
@@ -493,7 +493,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joeschmoe.io/api/v1/random"
+        src="https://joesch.moe/api/v1/random"
       />
     </span>
     <span
@@ -530,7 +530,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joeschmoe.io/api/v1/random"
+        src="https://joesch.moe/api/v1/random"
       />
     </span>
     <span
diff --git a/components/avatar/demo/group.tsx b/components/avatar/demo/group.tsx
index b7511d2045..dcbde12245 100644
--- a/components/avatar/demo/group.tsx
+++ b/components/avatar/demo/group.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
-import { Avatar, Divider, Tooltip } from 'antd';
+import { AntDesignOutlined,UserOutlined } from '@ant-design/icons';
+import { Avatar,Divider,Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <>
     <Avatar.Group>
-      <Avatar src="https://joeschmoe.io/api/v1/random" />
+      <Avatar src="https://joesch.moe/api/v1/random" />
       <a href="https://ant.design">
         <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       </a>
@@ -16,7 +16,7 @@ const App: React.FC = () => (
     </Avatar.Group>
     <Divider />
     <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
-      <Avatar src="https://joeschmoe.io/api/v1/random" />
+      <Avatar src="https://joesch.moe/api/v1/random" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
@@ -29,7 +29,7 @@ const App: React.FC = () => (
       size="large"
       maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
     >
-      <Avatar src="https://joeschmoe.io/api/v1/random" />
+      <Avatar src="https://joesch.moe/api/v1/random" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index 46d98e27f1..c9710ed751 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -601,7 +601,7 @@ exports[`renders ./components/card/demo/meta.tsx extend context correctly 1`] =
           class="ant-avatar ant-avatar-circle ant-avatar-image"
         >
           <img
-            src="https://joeschmoe.io/api/v1/random"
+            src="https://joesch.moe/api/v1/random"
           />
         </span>
       </div>
diff --git a/components/card/__tests__/__snapshots__/demo.test.ts.snap b/components/card/__tests__/__snapshots__/demo.test.ts.snap
index 59137e86f0..a41d241731 100644
--- a/components/card/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.ts.snap
@@ -601,7 +601,7 @@ exports[`renders ./components/card/demo/meta.tsx correctly 1`] = `
           class="ant-avatar ant-avatar-circle ant-avatar-image"
         >
           <img
-            src="https://joeschmoe.io/api/v1/random"
+            src="https://joesch.moe/api/v1/random"
           />
         </span>
       </div>
diff --git a/components/card/demo/loading.tsx b/components/card/demo/loading.tsx
index b530291968..7c594245b4 100644
--- a/components/card/demo/loading.tsx
+++ b/components/card/demo/loading.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
-import { Avatar, Card, Skeleton, Switch } from 'antd';
+import { EditOutlined,EllipsisOutlined,SettingOutlined } from '@ant-design/icons';
+import { Avatar,Card,Skeleton,Switch } from 'antd';
 
 const { Meta } = Card;
 
@@ -17,7 +17,7 @@ const App: React.FC = () => {
 
       <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
         <Meta
-          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+          avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
           title="Card title"
           description="This is the description"
         />
@@ -33,7 +33,7 @@ const App: React.FC = () => {
       >
         <Skeleton loading={loading} avatar active>
           <Meta
-            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+            avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
             title="Card title"
             description="This is the description"
           />
diff --git a/components/card/demo/meta.tsx b/components/card/demo/meta.tsx
index 0a5b003ffd..e2628041e5 100644
--- a/components/card/demo/meta.tsx
+++ b/components/card/demo/meta.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
-import { Avatar, Card } from 'antd';
+import { EditOutlined,EllipsisOutlined,SettingOutlined } from '@ant-design/icons';
+import { Avatar,Card } from 'antd';
 
 const { Meta } = Card;
 
@@ -20,7 +20,7 @@ const App: React.FC = () => (
     ]}
   >
     <Meta
-      avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+      avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
       title="Card title"
       description="This is the description"
     />
diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
index aafc1e097a..381bd0c283 100644
--- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -26,7 +26,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -63,7 +63,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -100,7 +100,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -137,7 +137,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -1360,7 +1360,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1397,7 +1397,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1434,7 +1434,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1471,7 +1471,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -2072,7 +2072,7 @@ exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -2238,7 +2238,7 @@ exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -2404,7 +2404,7 @@ exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
diff --git a/components/list/__tests__/__snapshots__/demo.test.ts.snap b/components/list/__tests__/__snapshots__/demo.test.ts.snap
index 2aa24dde08..0f92fa4af8 100644
--- a/components/list/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.ts.snap
@@ -26,7 +26,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -63,7 +63,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -100,7 +100,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -137,7 +137,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -1360,7 +1360,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1397,7 +1397,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1434,7 +1434,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1471,7 +1471,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -2072,7 +2072,7 @@ exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -2238,7 +2238,7 @@ exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -2404,7 +2404,7 @@ exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
diff --git a/components/list/demo/basic.tsx b/components/list/demo/basic.tsx
index 1d390f7387..9e4ccc38c1 100644
--- a/components/list/demo/basic.tsx
+++ b/components/list/demo/basic.tsx
@@ -23,7 +23,7 @@ const App: React.FC = () => (
     renderItem={(item) => (
       <List.Item>
         <List.Item.Meta
-          avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+          avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
           title={<a href="https://ant.design">{item.title}</a>}
           description="Ant Design, a design language for background applications, is refined by Ant UED Team"
         />
diff --git a/components/list/demo/pagination.tsx b/components/list/demo/pagination.tsx
index 7a20ed8df8..f87c5fc7f8 100644
--- a/components/list/demo/pagination.tsx
+++ b/components/list/demo/pagination.tsx
@@ -70,7 +70,7 @@ const App: React.FC = () => {
         renderItem={(item) => (
           <List.Item>
             <List.Item.Meta
-              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+              avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
               title={<a href="https://ant.design">{item.title}</a>}
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />
diff --git a/components/list/demo/vertical.tsx b/components/list/demo/vertical.tsx
index d53931b1bb..f7eaa8d6a2 100644
--- a/components/list/demo/vertical.tsx
+++ b/components/list/demo/vertical.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
-import { Avatar, List, Space } from 'antd';
+import { LikeOutlined,MessageOutlined,StarOutlined } from '@ant-design/icons';
+import { Avatar,List,Space } from 'antd';
 
 const data = Array.from({ length: 23 }).map((_, i) => ({
   href: 'https://ant.design',
   title: `ant design part ${i}`,
-  avatar: 'https://joeschmoe.io/api/v1/random',
+  avatar: 'https://joesch.moe/api/v1/random',
   description:
     'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content:
diff --git a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
index 50bfc5a554..0846d1d0bb 100644
--- a/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -330,7 +330,7 @@ exports[`renders ./components/segmented/demo/custom.tsx extend context correctly
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
               <div>
diff --git a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
index 45397ac205..be3d84f227 100644
--- a/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/segmented/__tests__/__snapshots__/demo.test.ts.snap
@@ -330,7 +330,7 @@ exports[`renders ./components/segmented/demo/custom.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
               <div>
diff --git a/components/segmented/demo/custom.tsx b/components/segmented/demo/custom.tsx
index 2e524b226b..4ccba19174 100644
--- a/components/segmented/demo/custom.tsx
+++ b/components/segmented/demo/custom.tsx
@@ -9,7 +9,7 @@ const App: React.FC = () => (
         {
           label: (
             <div style={{ padding: 4 }}>
-              <Avatar src="https://joeschmoe.io/api/v1/random" />
+              <Avatar src="https://joesch.moe/api/v1/random" />
               <div>User 1</div>
             </div>
           ),
diff --git a/components/skeleton/demo/list.tsx b/components/skeleton/demo/list.tsx
index 0cebce1539..b9d2e6c778 100644
--- a/components/skeleton/demo/list.tsx
+++ b/components/skeleton/demo/list.tsx
@@ -1,7 +1,7 @@
 import type Icon from '@ant-design/icons';
-import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
-import { Avatar, List, Skeleton, Switch } from 'antd';
-import React, { useState } from 'react';
+import { LikeOutlined,MessageOutlined,StarOutlined } from '@ant-design/icons';
+import { Avatar,List,Skeleton,Switch } from 'antd';
+import React,{ useState } from 'react';
 
 interface IconTextProps {
   icon: typeof Icon;
@@ -11,7 +11,7 @@ interface IconTextProps {
 const listData = Array.from({ length: 3 }).map((_, i) => ({
   href: 'https://ant.design',
   title: `ant design part ${i + 1}`,
-  avatar: 'https://joeschmoe.io/api/v1/random',
+  avatar: 'https://joesch.moe/api/v1/random',
   description:
     'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content:
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index d1b9227f16..59244c1af9 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -895,7 +895,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1117,7 +1117,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1339,7 +1339,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1561,7 +1561,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index faaebfd989..80ba222f84 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -751,7 +751,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -901,7 +901,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1051,7 +1051,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
@@ -1201,7 +1201,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joeschmoe.io/api/v1/random"
+                    src="https://joesch.moe/api/v1/random"
                   />
                 </span>
               </div>
diff --git a/components/steps/demo/inline.tsx b/components/steps/demo/inline.tsx
index 3a5592d4d8..b39d86230a 100644
--- a/components/steps/demo/inline.tsx
+++ b/components/steps/demo/inline.tsx
@@ -45,7 +45,7 @@ const App: React.FC = () => (
       renderItem={(item) => (
         <List.Item>
           <List.Item.Meta
-            avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+            avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
             title={<a href="https://ant.design">{item.title}</a>}
             description="Ant Design, a design language for background applications, is refined by Ant UED Team"
           />

From d39aa653ecc0c6c8b8108e87bf016fbbb2dd8e86 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 19 Feb 2023 15:24:46 +0800
Subject: [PATCH 10/21] chore(deps): update dependency @testing-library/react
 to v14 (#40797)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index e5bb4e8776..8d146c8c68 100644
--- a/package.json
+++ b/package.json
@@ -170,7 +170,7 @@
     "@stackblitz/sdk": "^1.3.0",
     "@testing-library/dom": "^9.0.0",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^13.0.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.2",
     "@types/gtag.js": "^0.0.12",
     "@types/jest": "^29.0.0",

From f8c511045d8fd50907026b4b21aa51c1cca4896c Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 19 Feb 2023 15:47:18 +0800
Subject: [PATCH 11/21] chore(deps): update cimg/node docker tag to v16.19.1
 (#40796)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
---
 .circleci/config.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index a1a3866c82..9b63d1e760 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -7,7 +7,7 @@ version: 2.1
 jobs:
   test-argos-ci:
     docker:
-      - image: cimg/node:16.19.0-browsers
+      - image: cimg/node:16.19.1-browsers
     steps:
       - checkout
       - run:

From 76dc87f1c384dbe63aad2cbe83e3fcbd6f0b0569 Mon Sep 17 00:00:00 2001
From: Jungzl <35426360+Jungzl@users.noreply.github.com>
Date: Sun, 19 Feb 2023 16:24:20 +0800
Subject: [PATCH 12/21] fix: adjust onBackground outputs to support
 semi-transparent colors (#40729)

* chore(deps): bump @ctrl/tinycolor from 3.4.0 to 3.6.0

* fix: adjust onBackground outputs to support semi-transparent colors
---
 components/empty/simple.tsx       | 12 ++++++++----
 components/slider/style/index.tsx |  6 +++---
 components/table/style/index.ts   |  8 ++++----
 package.json                      |  2 +-
 4 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/components/empty/simple.tsx b/components/empty/simple.tsx
index 00ce81b536..375a9da2d4 100644
--- a/components/empty/simple.tsx
+++ b/components/empty/simple.tsx
@@ -1,6 +1,6 @@
+import { TinyColor } from '@ctrl/tinycolor';
 import * as React from 'react';
 import { useMemo } from 'react';
-import { TinyColor } from '@ctrl/tinycolor';
 import { useToken } from '../theme/internal';
 
 const Simple = () => {
@@ -10,9 +10,13 @@ const Simple = () => {
 
   const { borderColor, shadowColor, contentColor } = useMemo(
     () => ({
-      borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexString(),
-      shadowColor: new TinyColor(colorFillTertiary).onBackground(colorBgContainer).toHexString(),
-      contentColor: new TinyColor(colorFillQuaternary).onBackground(colorBgContainer).toHexString(),
+      borderColor: new TinyColor(colorFill).onBackground(colorBgContainer).toHexShortString(),
+      shadowColor: new TinyColor(colorFillTertiary)
+        .onBackground(colorBgContainer)
+        .toHexShortString(),
+      contentColor: new TinyColor(colorFillQuaternary)
+        .onBackground(colorBgContainer)
+        .toHexShortString(),
     }),
     [colorFill, colorFillTertiary, colorFillQuaternary, colorBgContainer],
   );
diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx
index 0fe821760c..a2aeffa015 100644
--- a/components/slider/style/index.tsx
+++ b/components/slider/style/index.tsx
@@ -1,9 +1,9 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import type * as React from 'react';
 import { TinyColor } from '@ctrl/tinycolor';
+import type * as React from 'react';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 
 // Direction naming standard:
 // Horizontal base:
@@ -214,7 +214,7 @@ const genBaseStyle: GenerateStyle<SliderToken> = (token) => {
           height: token.handleSize,
           boxShadow: `0 0 0 ${token.handleLineWidth}px ${new TinyColor(token.colorTextDisabled)
             .onBackground(token.colorBgContainer)
-            .toHexString()}`,
+            .toHexShortString()}`,
           insetInlineStart: 0,
           insetBlockStart: 0,
         },
diff --git a/components/table/style/index.ts b/components/table/style/index.ts
index 0a00afdd8e..fed833761a 100644
--- a/components/table/style/index.ts
+++ b/components/table/style/index.ts
@@ -1,5 +1,6 @@
 import type { CSSObject } from '@ant-design/cssinjs';
 import { TinyColor } from '@ctrl/tinycolor';
+import { clearFix, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import genBorderedStyle from './bordered';
@@ -16,7 +17,6 @@ import genSizeStyle from './size';
 import genSorterStyle from './sorter';
 import genStickyStyle from './sticky';
 import genSummaryStyle from './summary';
-import { clearFix, resetComponent } from '../../style';
 
 export interface ComponentToken {}
 
@@ -257,14 +257,14 @@ export default genComponentStyleHook('Table', (token) => {
 
   const colorFillSecondarySolid = new TinyColor(colorFillSecondary)
     .onBackground(colorBgContainer)
-    .toHexString();
+    .toHexShortString();
   const colorFillContentSolid = new TinyColor(colorFillContent)
     .onBackground(colorBgContainer)
-    .toHexString();
+    .toHexShortString();
 
   const colorFillAlterSolid = new TinyColor(colorFillAlter)
     .onBackground(colorBgContainer)
-    .toHexString();
+    .toHexShortString();
 
   const tableToken = mergeToken<TableToken>(token, {
     tableFontSize: fontSize,
diff --git a/package.json b/package.json
index 8d146c8c68..90518c53a1 100644
--- a/package.json
+++ b/package.json
@@ -112,7 +112,7 @@
     "@ant-design/icons": "^5.0.0",
     "@ant-design/react-slick": "~1.0.0",
     "@babel/runtime": "^7.18.3",
-    "@ctrl/tinycolor": "^3.4.0",
+    "@ctrl/tinycolor": "^3.6.0",
     "@rc-component/mutate-observer": "^1.0.0",
     "@rc-component/tour": "~1.6.0",
     "classnames": "^2.2.6",

From 6fa4c2e59fa3ba801f4acbfd2d04fcb274e99fbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Licek?=
 <43842809+LukasLic@users.noreply.github.com>
Date: Sun, 19 Feb 2023 09:59:20 +0100
Subject: [PATCH 13/21] demo: Example checkbox does not disable Form (#40740)

* fix: Example checkbox does not disable Form

In this demo, the example checkbox disables the form, which should be the functionality of the "Form disabled" checkbox and only that one.

* Update disabled.tsx

---------

Co-authored-by: afc163 <afc163@gmail.com>
---
 components/form/demo/disabled.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/components/form/demo/disabled.tsx b/components/form/demo/disabled.tsx
index de8fc20558..2e2d38fbfc 100644
--- a/components/form/demo/disabled.tsx
+++ b/components/form/demo/disabled.tsx
@@ -20,9 +20,6 @@ const { TextArea } = Input;
 
 const FormDisabledDemo: React.FC = () => {
   const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
-  const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
-    setComponentDisabled(disabled);
-  };
 
   return (
     <>
@@ -36,7 +33,6 @@ const FormDisabledDemo: React.FC = () => {
         labelCol={{ span: 4 }}
         wrapperCol={{ span: 14 }}
         layout="horizontal"
-        onValuesChange={onFormLayoutChange}
         disabled={componentDisabled}
         style={{ maxWidth: 600 }}
       >

From 9b25304c29c33ed8c3cd3ab2f56e09af18fd5a4e Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 19 Feb 2023 20:35:36 +0800
Subject: [PATCH 14/21] style: fix Table dropdown radius style (#40802)

---
 components/table/style/filter.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/table/style/filter.ts b/components/table/style/filter.ts
index f3e00a383b..c11337aa03 100644
--- a/components/table/style/filter.ts
+++ b/components/table/style/filter.ts
@@ -142,7 +142,6 @@ const genFilterStyle: GenerateStyle<TableToken> = (token) => {
             justifyContent: 'space-between',
             padding: `${paddingXS - lineWidth}px ${paddingXS}px`,
             overflow: 'hidden',
-            backgroundColor: 'inherit',
             borderTop: tableBorder,
           },
         },

From e142e2436d473aedfe5d43446580490a235931ab Mon Sep 17 00:00:00 2001
From: JiaQi <112228030+Yuiai01@users.noreply.github.com>
Date: Sun, 19 Feb 2023 21:27:46 +0800
Subject: [PATCH 15/21] style(DatePicker): fix hover style error when checked
 again (#40785)

---
 components/date-picker/style/index.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts
index 395cf8105e..7074e5e594 100644
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@@ -206,6 +206,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
 
     // Hover with in range
     [`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before,
+      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
+      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before,
       &-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before,
       &-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before,
       &-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before,

From 3b2cd725cbc00c94d28dfb018388b245ef11fab9 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 19 Feb 2023 21:40:05 +0800
Subject: [PATCH 16/21] style: fix Upload picture card style alignment (#40805)

- Align SVG elements in the picture card style
- Update components/upload/style/picture.ts

[components/upload/style/picture.ts]
- Add vertical alignment for SVG elements in the picture card style
---
 components/upload/style/picture.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/components/upload/style/picture.ts b/components/upload/style/picture.ts
index e8343024d4..b20c568cca 100644
--- a/components/upload/style/picture.ts
+++ b/components/upload/style/picture.ts
@@ -185,6 +185,10 @@ const genPictureCardStyle: GenerateStyle<UploadToken> = (token) => {
             fontSize: fontSizeLG,
             cursor: 'pointer',
             transition: `all ${token.motionDurationSlow}`,
+
+            svg: {
+              verticalAlign: 'baseline',
+            },
           },
         },
 

From c32e5e38efe56fc578e5ae18864235350d806070 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 19 Feb 2023 21:43:23 +0800
Subject: [PATCH 17/21] style: fix List item padding when enable `grid`
 (#40806)

- Reduce the horizontal padding of list items from `${token.paddingContentHorizontalLG}px` to `0`

[components/list/style/index.ts]
- Reduce the horizontal padding of list items from `${token.paddingContentHorizontalLG}px` to `0`
---
 components/list/style/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/list/style/index.ts b/components/list/style/index.ts
index db6e0e4829..9692ac48f9 100644
--- a/components/list/style/index.ts
+++ b/components/list/style/index.ts
@@ -351,7 +351,7 @@ export default genComponentStyleHook(
     const listToken = mergeToken<ListToken>(token, {
       listBorderedCls: `${token.componentCls}-bordered`,
       minHeight: token.controlHeightLG,
-      listItemPadding: `${token.paddingContentVertical}px ${token.paddingContentHorizontalLG}px`,
+      listItemPadding: `${token.paddingContentVertical}px 0`,
       listItemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`,
       listItemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`,
     });

From 8e93ae76d0673d4ff8ae439836d5f1988987ad1a Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Sun, 19 Feb 2023 22:43:04 +0800
Subject: [PATCH 18/21] docs: changelog for 5.2.2 (#40807)

---
 CHANGELOG.en-US.md | 34 +++++++++++++++++++++++++++-------
 CHANGELOG.zh-CN.md | 34 +++++++++++++++++++++++++++-------
 package.json       |  2 +-
 3 files changed, 55 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 89e3518ae8..cf8189ddd0 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,9 +15,29 @@ timeline: true
 
 ---
 
+## 5.2.2
+
+`2023-02-19`
+
+- DatePicker
+  - 💄 Optimize DatePicker date panel style. [#40768](https://github.com/ant-design/ant-design/pull/40768)
+  - 🐞 Fix RangePicker hover style on wrong date. [#40785](https://github.com/ant-design/ant-design/pull/40785) [@Yuiai01](https://github.com/Yuiai01)
+- Form
+  - 🐞 Fixed inconsistency between Checkbox and Radio in table when Form is `disabled`. [#40728](https://github.com/ant-design/ant-design/pull/40728) [@Yuiai01](https://github.com/Yuiai01)
+  - 🐞 Fix Radio/Checkbox under Form `disabled` property don't works correctly. [#40741](https://github.com/ant-design/ant-design/pull/40741) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix List extra padding when enable `grid` property. [#40806](https://github.com/ant-design/ant-design/pull/40806)
+- 🐞 Fix Upload actions icon alignment issue. [#40805](https://github.com/ant-design/ant-design/pull/40805)
+- 💄 Tweak Table filter dropdown radius style. [#40802](https://github.com/ant-design/ant-design/pull/40802)
+- 🐞 Fix Button `loading.delay` not delay at first time. [#40759](https://github.com/ant-design/ant-design/pull/40759) [@RedJue](https://github.com/RedJue)
+- 🐞 Fix Input status style when using `addonAfter` and `addonBefore`. [#40744](https://github.com/ant-design/ant-design/pull/40744) [@carla-cn](https://github.com/carla-cn)
+- 🐞 Fix Skeleton `active` flicky animation in Safari. [#40692](https://github.com/ant-design/ant-design/pull/40692) [@slotDumpling](https://github.com/slotDumpling)
+- Locales
+  - 🇫🇷 Added french locale for Tour component. [#40750](https://github.com/ant-design/ant-design/pull/40750) [@RedJue](https://github.com/RedJue)
+  - 🇰🇷 Update ko_KR locale. [#40716](https://github.com/ant-design/ant-design/pull/40716) [@owjs3901](https://github.com/owjs3901)
+
 ## 5.2.1
 
-`2023-2-13`
+`2023-02-13`
 
 - 🛠 Rewrite `panelRender` in Tour to function component。[#40670](https://github.com/ant-design/ant-design/pull/40670) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 Fix `className` property wrongly passed to child nodes in TimeLine。[#40700](https://github.com/ant-design/ant-design/pull/40700) [@any1024](https://github.com/any1024)
@@ -32,7 +52,7 @@ timeline: true
 
 ## 5.2.0
 
-`2023-2-8`
+`2023-02-08`
 
 - 🔥 Add `picture-circle` to Upload's `listType` prop. [#40134](https://github.com/ant-design/ant-design/pull/40134) [@ds1371dani](https://github.com/ds1371dani)
 - 🔥 Anchor component add `direction`, which supports vertical. [#39372](https://github.com/ant-design/ant-design/pull/39372) [@foryuki](https://github.com/foryuki)
@@ -94,7 +114,7 @@ timeline: true
 
 ## 5.1.7
 
-`2023-1-31`
+`2023-01-31`
 
 - Input
   - 🐞 Fix Input that unexpected cancel button is shown when `type="search"`. [#40457](https://github.com/ant-design/ant-design/pull/40457) [@MadCcc](https://github.com/MadCcc)
@@ -113,7 +133,7 @@ timeline: true
 
 ## 5.1.6
 
-`2023-1-20`
+`2023-01-20`
 
 - 🐞 Fix DatePicker animation timing function. [#40133](https://github.com/ant-design/ant-design/pull/40133) [@MadCcc](https://github.com/MadCcc)
 - Menu
@@ -131,7 +151,7 @@ timeline: true
 
 ## 5.1.5
 
-`2023-1-15`
+`2023-01-15`
 
 - 🐞 Fix Checkbox that label not aligned with checkbox. [#40208](https://github.com/ant-design/ant-design/pull/40208)
 - 🐞 Fix Button wave effect sometime makes layout shaking. [#40192](https://github.com/ant-design/ant-design/pull/40192)
@@ -148,7 +168,7 @@ timeline: true
 
 ## 5.1.4
 
-`2023-1-9`
+`2023-01-09`
 
 - 🐞 Fix missing locale file. [#40116](https://github.com/ant-design/ant-design/pull/40116)
 - 🐞 Fix Cascader dropdown `placement` in RTL mode. [#40109](https://github.com/ant-design/ant-design/pull/40109) [@3hson](https://github.com/3hson)
@@ -156,7 +176,7 @@ timeline: true
 
 ## 5.1.3
 
-`2023-1-9`
+`2023-01-09`
 
 - Table
   - 🛠 Optimize the Table `shouldCellUpdate` logic to increase the secondary rendering speed. [#40063](https://github.com/ant-design/ant-design/pull/40063)
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index d9572093fe..0932f41b58 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,9 +15,29 @@ timeline: true
 
 ---
 
+## 5.2.2
+
+`2023-02-19`
+
+- DatePicker
+  - 💄 调整 DatePicker 组件日期面板的间距样式。[#40768](https://github.com/ant-design/ant-design/pull/40768)
+  - 🐞 修复 RangePicker `hover` 日期错位的问题。[#40785](https://github.com/ant-design/ant-design/pull/40785) [@Yuiai01](https://github.com/Yuiai01)
+- Form
+  - 🐞 修复 Form 下 Radio/Checkbox 的 disabled 优先级问题。[#40741](https://github.com/ant-design/ant-design/pull/40741) [@Yuiai01](https://github.com/Yuiai01)
+  - 🐞 修复 Form 为 `disabled` 时 Checkbox 和 Radio 表现不一致的问题。[#40728](https://github.com/ant-design/ant-design/pull/40728) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 List 启用 `grid` 时下额外 `padding` 样式。[#40806](https://github.com/ant-design/ant-design/pull/40806)
+- 🐞 修复 Upload 操作图标不对齐的问题。[#40805](https://github.com/ant-design/ant-design/pull/40805)
+- 💄 调整 Table 筛选菜单的底部圆角样式。[#40802](https://github.com/ant-design/ant-design/pull/40802)
+- 🐞 修复 Button 组件 `loading.delay` 第一次不生效的问题。[#40759](https://github.com/ant-design/ant-design/pull/40759) [@RedJue](https://github.com/RedJue)
+- 🐞 修复 Input `addonAfter` 和 `addonBefore` 的各种状态样式。[#40744](https://github.com/ant-design/ant-design/pull/40744) [@carla-cn](https://github.com/carla-cn)
+- 🐞 修复 Skeleton 在 Safari 下 `active` 效果闪烁的问题。[#40692](https://github.com/ant-design/ant-design/pull/40692) [@slotDumpling](https://github.com/slotDumpling)
+- 国际化
+  - 🇫🇷 补充 Tour 法语本地化文案。[#40750](https://github.com/ant-design/ant-design/pull/40750) [@RedJue](https://github.com/RedJue)
+  - 🇰🇷 更新韩国本地化文案。[#40716](https://github.com/ant-design/ant-design/pull/40716) [@owjs3901](https://github.com/owjs3901)
+
 ## 5.2.1
 
-`2023-2-13`
+`2023-02-13`
 
 - 🛠 重构 Tour 中 `panelRender` 为函数式组件。[#40670](https://github.com/ant-design/ant-design/pull/40670) [@li-jia-nan](https://github.com/li-jia-nan)
 - 🐞 修复 TimeLine 中 `className` 传给子节点的问题。[#40700](https://github.com/ant-design/ant-design/pull/40700) [@any1024](https://github.com/any1024)
@@ -32,7 +52,7 @@ timeline: true
 
 ## 5.2.0
 
-`2023-2-8`
+`2023-02-08`
 
 - 🔥 Upload 的 `listType` 属性添加 `picture-circle` 支持。[#40134](https://github.com/ant-design/ant-design/pull/40134) [@ds1371dani](https://github.com/ds1371dani)
 - 🔥 Anchor 组件新增 `direction` 属性，支持 vertical。[#39372](https://github.com/ant-design/ant-design/pull/39372) [@foryuki](https://github.com/foryuki)
@@ -94,7 +114,7 @@ timeline: true
 
 ## 5.1.7
 
-`2023-1-31`
+`2023-01-31`
 
 - Input
   - 🐞 修复 Input 组件 `type="search"` 时未隐藏浏览器原生取消按钮的问题。[#40457](https://github.com/ant-design/ant-design/pull/40457) [@MadCcc](https://github.com/MadCcc)
@@ -113,7 +133,7 @@ timeline: true
 
 ## 5.1.6
 
-`2023-1-20`
+`2023-01-20`
 
 - 🐞 修复 DatePicker 等组件动画 timing function 错误的问题。[#40133](https://github.com/ant-design/ant-design/pull/40133) [@MadCcc](https://github.com/MadCcc)
 - Menu
@@ -131,7 +151,7 @@ timeline: true
 
 ## 5.1.5
 
-`2023-1-15`
+`2023-01-15`
 
 - 🐞 修复 Checkbox 组件 label 不对齐的问题。 [#40208](https://github.com/ant-design/ant-design/pull/40208)
 - 🐞 修复 Button 水波纹效果有时会使得布局抖动的问题。[#40192](https://github.com/ant-design/ant-design/pull/40192)
@@ -148,7 +168,7 @@ timeline: true
 
 ## 5.1.4
 
-`2023-1-9`
+`2023-01-09`
 
 - 🐞 修复 locale 文件丢失的问题。[#40116](https://github.com/ant-design/ant-design/pull/40116)
 - 🐞 修复 Cascader 组件 RTL 模式中下拉菜单位置问题。[#40109](https://github.com/ant-design/ant-design/pull/40109) [@3hson](https://github.com/3hson)
@@ -156,7 +176,7 @@ timeline: true
 
 ## 5.1.3
 
-`2023-1-9`
+`2023-01-09`
 
 - Table
   - 🛠 优化 Table `shouldCellUpdate` 逻辑，提升二次渲染速度。[#40063](https://github.com/ant-design/ant-design/pull/40063)
diff --git a/package.json b/package.json
index 90518c53a1..f19ec8b8e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.2.1",
+  "version": "5.2.2",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

From 3e5058c8c3635ba6db71aaead8b900639f251144 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 20 Feb 2023 10:10:17 +0800
Subject: [PATCH 19/21] Delete codeql.yml

---
 .github/workflows/codeql.yml | 74 ------------------------------------
 1 file changed, 74 deletions(-)
 delete mode 100644 .github/workflows/codeql.yml

diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml
deleted file mode 100644
index 385f723c48..0000000000
--- a/.github/workflows/codeql.yml
+++ /dev/null
@@ -1,74 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ "master", "feature" ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ "master", "feature" ]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
-        # Use only 'java' to analyze code written in Java, Kotlin or both
-        # Use only 'javascript' to analyze code written in JavaScript, TypeScript or both
-        # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v3
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v2
-      with:
-        languages: ${{ matrix.language }}
-        # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file.
-        # Prefix the list here with "+" to use these queries and those in the config file.
-
-        # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
-        # queries: security-extended,security-and-quality
-
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, Go, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v2
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 See https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idstepsrun
-
-    #   If the Autobuild fails above, remove it and uncomment the following three lines.
-    #   modify them (or add more) to build your code if your project, please refer to the EXAMPLE below for guidance.
-
-    # - run: |
-    #   echo "Run, Build Application using script"
-    #   ./location_of_script_within_repo/buildscript.sh
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v2
-      with:
-        category: "/language:${{matrix.language}}"

From 33275b6e802535f3a13748bcb1e0d839ffabbcb2 Mon Sep 17 00:00:00 2001
From: lijianan <574980606@qq.com>
Date: Mon, 20 Feb 2023 10:24:40 +0800
Subject: [PATCH 20/21] demo: fixed the avatars are all the same picture
 (#40809)

* demo: update demo

* update snap

* update snap

* update snap
---
 components/avatar/__tests__/Avatar.test.tsx   |  8 +++----
 .../__snapshots__/Avatar.test.tsx.snap        |  4 ++--
 .../__snapshots__/demo-extend.test.ts.snap    |  6 ++---
 .../__snapshots__/demo.test.tsx.snap          |  6 ++---
 components/avatar/demo/group.tsx              | 10 ++++-----
 components/card/demo/loading.tsx              | 10 ++++-----
 .../__snapshots__/components.test.tsx.snap    | 14 ++++++------
 .../__tests__/components.test.tsx             |  4 ++--
 components/list/__tests__/Item.test.tsx       |  4 ++--
 .../__snapshots__/demo-extend.test.ts.snap    | 22 +++++++++----------
 .../__tests__/__snapshots__/demo.test.ts.snap | 22 +++++++++----------
 components/list/demo/basic.tsx                |  6 ++---
 components/list/demo/pagination.tsx           |  8 +++----
 components/list/demo/vertical.tsx             |  6 ++---
 components/skeleton/demo/list.tsx             |  8 +++----
 .../__snapshots__/demo-extend.test.ts.snap    |  8 +++----
 .../__tests__/__snapshots__/demo.test.ts.snap |  8 +++----
 components/steps/demo/inline.tsx              |  8 +++----
 tests/setup.js                                |  1 +
 19 files changed, 81 insertions(+), 82 deletions(-)

diff --git a/components/avatar/__tests__/Avatar.test.tsx b/components/avatar/__tests__/Avatar.test.tsx
index 13b3624986..e07ac6bbb2 100644
--- a/components/avatar/__tests__/Avatar.test.tsx
+++ b/components/avatar/__tests__/Avatar.test.tsx
@@ -53,7 +53,7 @@ describe('Avatar Render', () => {
 
   it('should handle onError correctly', () => {
     const LOAD_FAILURE_SRC = 'http://error.url/';
-    const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
     const Foo: React.FC = () => {
       const [avatarSrc, setAvatarSrc] = useState<typeof LOAD_FAILURE_SRC | typeof LOAD_SUCCESS_SRC>(
         LOAD_FAILURE_SRC,
@@ -75,7 +75,7 @@ describe('Avatar Render', () => {
 
   it('should show image on success after a failure state', () => {
     const LOAD_FAILURE_SRC = 'http://error.url';
-    const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
 
     const div = global.document.createElement('div');
     global.document.body.appendChild(div);
@@ -172,7 +172,7 @@ describe('Avatar Render', () => {
   });
 
   it('should exist crossorigin attribute', () => {
-    const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
     const crossOrigin = 'anonymous';
     const { container } = render(
       <Avatar src={LOAD_SUCCESS_SRC} crossOrigin={crossOrigin}>
@@ -184,7 +184,7 @@ describe('Avatar Render', () => {
   });
 
   it('should not exist crossorigin attribute', () => {
-    const LOAD_SUCCESS_SRC = 'https://joeschmoe.io/api/v1/random';
+    const LOAD_SUCCESS_SRC = 'https://joesch.moe/api/v1/random';
     const { container } = render(<Avatar src={LOAD_SUCCESS_SRC}>crossorigin</Avatar>);
     expect(container.querySelector('img')?.crossOrigin).toBeFalsy();
     expect(container.querySelector('img')?.crossOrigin).toEqual('');
diff --git a/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap b/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
index 80dce08eba..bc692839d4 100644
--- a/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
+++ b/components/avatar/__tests__/__snapshots__/Avatar.test.tsx.snap
@@ -140,7 +140,7 @@ exports[`Avatar Render should handle onError correctly 1`] = `
   class="ant-avatar ant-avatar-circle ant-avatar-image"
 >
   <img
-    src="https://joeschmoe.io/api/v1/random"
+    src="https://joesch.moe/api/v1/random"
   />
 </span>
 `;
@@ -163,7 +163,7 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
   class="ant-avatar ant-avatar-circle ant-avatar-image"
 >
   <img
-    src="https://joeschmoe.io/api/v1/random"
+    src="https://joesch.moe/api/v1/random"
   />
 </span>
 `;
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 31669d253f..1085ca7b62 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random"
+        src="https://joesch.moe/api/v1/random?key=1"
       />
     </span>
     <a
@@ -517,7 +517,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random"
+        src="https://joesch.moe/api/v1/random?key=2"
       />
     </span>
     <span
@@ -653,7 +653,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random"
+        src="https://joesch.moe/api/v1/random?key=3"
       />
     </span>
     <span
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
index 4d69d27fd8..df598dbbca 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap
@@ -415,7 +415,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random"
+        src="https://joesch.moe/api/v1/random?key=1"
       />
     </span>
     <a
@@ -493,7 +493,7 @@ Array [
       class="ant-avatar ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random"
+        src="https://joesch.moe/api/v1/random?key=2"
       />
     </span>
     <span
@@ -530,7 +530,7 @@ Array [
       class="ant-avatar ant-avatar-lg ant-avatar-circle ant-avatar-image"
     >
       <img
-        src="https://joesch.moe/api/v1/random"
+        src="https://joesch.moe/api/v1/random?key=3"
       />
     </span>
     <span
diff --git a/components/avatar/demo/group.tsx b/components/avatar/demo/group.tsx
index dcbde12245..61c70eb01a 100644
--- a/components/avatar/demo/group.tsx
+++ b/components/avatar/demo/group.tsx
@@ -1,11 +1,11 @@
+import { AntDesignOutlined, UserOutlined } from '@ant-design/icons';
+import { Avatar, Divider, Tooltip } from 'antd';
 import React from 'react';
-import { AntDesignOutlined,UserOutlined } from '@ant-design/icons';
-import { Avatar,Divider,Tooltip } from 'antd';
 
 const App: React.FC = () => (
   <>
     <Avatar.Group>
-      <Avatar src="https://joesch.moe/api/v1/random" />
+      <Avatar src="https://joesch.moe/api/v1/random?key=1" />
       <a href="https://ant.design">
         <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       </a>
@@ -16,7 +16,7 @@ const App: React.FC = () => (
     </Avatar.Group>
     <Divider />
     <Avatar.Group maxCount={2} maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>
-      <Avatar src="https://joesch.moe/api/v1/random" />
+      <Avatar src="https://joesch.moe/api/v1/random?key=2" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
@@ -29,7 +29,7 @@ const App: React.FC = () => (
       size="large"
       maxStyle={{ color: '#f56a00', backgroundColor: '#fde3cf' }}
     >
-      <Avatar src="https://joesch.moe/api/v1/random" />
+      <Avatar src="https://joesch.moe/api/v1/random?key=3" />
       <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>
       <Tooltip title="Ant User" placement="top">
         <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
diff --git a/components/card/demo/loading.tsx b/components/card/demo/loading.tsx
index 7c594245b4..7bd6ae8b40 100644
--- a/components/card/demo/loading.tsx
+++ b/components/card/demo/loading.tsx
@@ -1,6 +1,6 @@
+import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
+import { Avatar, Card, Skeleton, Switch } from 'antd';
 import React, { useState } from 'react';
-import { EditOutlined,EllipsisOutlined,SettingOutlined } from '@ant-design/icons';
-import { Avatar,Card,Skeleton,Switch } from 'antd';
 
 const { Meta } = Card;
 
@@ -14,15 +14,13 @@ const App: React.FC = () => {
   return (
     <>
       <Switch checked={!loading} onChange={onChange} />
-
       <Card style={{ width: 300, marginTop: 16 }} loading={loading}>
         <Meta
-          avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+          avatar={<Avatar src="https://joesch.moe/api/v1/random?key=1" />}
           title="Card title"
           description="This is the description"
         />
       </Card>
-
       <Card
         style={{ width: 300, marginTop: 16 }}
         actions={[
@@ -33,7 +31,7 @@ const App: React.FC = () => {
       >
         <Skeleton loading={loading} avatar active>
           <Meta
-            avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+            avatar={<Avatar src="https://joesch.moe/api/v1/random?key=2" />}
             title="Card title"
             description="This is the description"
           />
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index 4a41303780..f22153cdf4 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -17327,7 +17327,7 @@ exports[`ConfigProvider components List configProvider 1`] = `
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -17379,7 +17379,7 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = `
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -17431,7 +17431,7 @@ exports[`ConfigProvider components List configProvider componentSize large 1`] =
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -17483,7 +17483,7 @@ exports[`ConfigProvider components List configProvider componentSize middle 1`]
                 class="config-avatar config-avatar-circle config-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -17535,7 +17535,7 @@ exports[`ConfigProvider components List configProvider virtual and dropdownMatch
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -17587,7 +17587,7 @@ exports[`ConfigProvider components List normal 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
@@ -17639,7 +17639,7 @@ exports[`ConfigProvider components List prefixCls 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joeschmoe.io/api/v1/random"
+                  src="https://joesch.moe/api/v1/random"
                 />
               </span>
             </div>
diff --git a/components/config-provider/__tests__/components.test.tsx b/components/config-provider/__tests__/components.test.tsx
index d9c4ebea4f..173a7e7b40 100644
--- a/components/config-provider/__tests__/components.test.tsx
+++ b/components/config-provider/__tests__/components.test.tsx
@@ -40,6 +40,7 @@ import Skeleton from '../../skeleton';
 import type { SliderTooltipProps } from '../../slider';
 import Slider from '../../slider';
 // eslint-disable-next-line import/no-named-as-default
+import { render } from '../../../tests/utils';
 import Spin from '../../spin';
 import Statistic from '../../statistic';
 import Steps from '../../steps';
@@ -55,7 +56,6 @@ import Transfer from '../../transfer';
 import Tree from '../../tree';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
-import { render } from '../../../tests/utils';
 
 dayjs.extend(customParseFormat);
 jest.mock('rc-util/lib/Portal');
@@ -351,7 +351,7 @@ describe('ConfigProvider', () => {
           <List.Item {...props}>
             <List.Item.Meta
               {...props}
-              avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
+              avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
               title="Ant Design"
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />
diff --git a/components/list/__tests__/Item.test.tsx b/components/list/__tests__/Item.test.tsx
index 3825a2d387..64af9280a7 100644
--- a/components/list/__tests__/Item.test.tsx
+++ b/components/list/__tests__/Item.test.tsx
@@ -8,8 +8,8 @@ describe('List Item Layout', () => {
     {
       key: 1,
       href: 'https://ant.design',
-      title: `ant design`,
-      avatar: 'https://joeschmoe.io/api/v1/random',
+      title: 'ant design',
+      avatar: 'https://joesch.moe/api/v1/random',
       description:
         'Ant Design, a design language for background applications, is refined by Ant UED Team.',
       content:
diff --git a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
index 381bd0c283..ae35eb9ea4 100644
--- a/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -26,7 +26,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=0"
                 />
               </span>
             </div>
@@ -63,7 +63,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=1"
                 />
               </span>
             </div>
@@ -100,7 +100,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=2"
                 />
               </span>
             </div>
@@ -137,7 +137,7 @@ exports[`renders ./components/list/demo/basic.tsx extend context correctly 1`] =
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=3"
                 />
               </span>
             </div>
@@ -1360,7 +1360,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=0"
                   />
                 </span>
               </div>
@@ -1397,7 +1397,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=1"
                   />
                 </span>
               </div>
@@ -1434,7 +1434,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=2"
                   />
                 </span>
               </div>
@@ -1471,7 +1471,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=3"
                   />
                 </span>
               </div>
@@ -2072,7 +2072,7 @@ exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=0"
                   />
                 </span>
               </div>
@@ -2238,7 +2238,7 @@ exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=1"
                   />
                 </span>
               </div>
@@ -2404,7 +2404,7 @@ exports[`renders ./components/list/demo/vertical.tsx extend context correctly 1`
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=2"
                   />
                 </span>
               </div>
diff --git a/components/list/__tests__/__snapshots__/demo.test.ts.snap b/components/list/__tests__/__snapshots__/demo.test.ts.snap
index 0f92fa4af8..5a91f65c0e 100644
--- a/components/list/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/list/__tests__/__snapshots__/demo.test.ts.snap
@@ -26,7 +26,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=0"
                 />
               </span>
             </div>
@@ -63,7 +63,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=1"
                 />
               </span>
             </div>
@@ -100,7 +100,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=2"
                 />
               </span>
             </div>
@@ -137,7 +137,7 @@ exports[`renders ./components/list/demo/basic.tsx correctly 1`] = `
                 class="ant-avatar ant-avatar-circle ant-avatar-image"
               >
                 <img
-                  src="https://joesch.moe/api/v1/random"
+                  src="https://joesch.moe/api/v1/random?key=3"
                 />
               </span>
             </div>
@@ -1360,7 +1360,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=0"
                   />
                 </span>
               </div>
@@ -1397,7 +1397,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=1"
                   />
                 </span>
               </div>
@@ -1434,7 +1434,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=2"
                   />
                 </span>
               </div>
@@ -1471,7 +1471,7 @@ Array [
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=3"
                   />
                 </span>
               </div>
@@ -2072,7 +2072,7 @@ exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=0"
                   />
                 </span>
               </div>
@@ -2238,7 +2238,7 @@ exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=1"
                   />
                 </span>
               </div>
@@ -2404,7 +2404,7 @@ exports[`renders ./components/list/demo/vertical.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=2"
                   />
                 </span>
               </div>
diff --git a/components/list/demo/basic.tsx b/components/list/demo/basic.tsx
index 9e4ccc38c1..c4a57e0fc7 100644
--- a/components/list/demo/basic.tsx
+++ b/components/list/demo/basic.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Avatar, List } from 'antd';
+import React from 'react';
 
 const data = [
   {
@@ -20,10 +20,10 @@ const App: React.FC = () => (
   <List
     itemLayout="horizontal"
     dataSource={data}
-    renderItem={(item) => (
+    renderItem={(item, index) => (
       <List.Item>
         <List.Item.Meta
-          avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+          avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
           title={<a href="https://ant.design">{item.title}</a>}
           description="Ant Design, a design language for background applications, is refined by Ant UED Team"
         />
diff --git a/components/list/demo/pagination.tsx b/components/list/demo/pagination.tsx
index f87c5fc7f8..6b9740cedc 100644
--- a/components/list/demo/pagination.tsx
+++ b/components/list/demo/pagination.tsx
@@ -1,5 +1,5 @@
+import { Avatar, List, Radio, Space } from 'antd';
 import React, { useState } from 'react';
-import { Avatar, List, Space, Radio } from 'antd';
 
 type PaginationPosition = 'top' | 'bottom' | 'both';
 
@@ -30,7 +30,7 @@ const App: React.FC = () => {
 
   return (
     <>
-      <Space direction='vertical' style={{ marginBottom: '20px' }} size="middle">
+      <Space direction="vertical" style={{ marginBottom: '20px' }} size="middle">
         <Space>
           <span>Pagination Position:</span>
           <Radio.Group
@@ -67,10 +67,10 @@ const App: React.FC = () => {
       <List
         pagination={{ position, align }}
         dataSource={data}
-        renderItem={(item) => (
+        renderItem={(item, index) => (
           <List.Item>
             <List.Item.Meta
-              avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+              avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
               title={<a href="https://ant.design">{item.title}</a>}
               description="Ant Design, a design language for background applications, is refined by Ant UED Team"
             />
diff --git a/components/list/demo/vertical.tsx b/components/list/demo/vertical.tsx
index f7eaa8d6a2..e0e91bcfd3 100644
--- a/components/list/demo/vertical.tsx
+++ b/components/list/demo/vertical.tsx
@@ -1,11 +1,11 @@
+import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+import { Avatar, List, Space } from 'antd';
 import React from 'react';
-import { LikeOutlined,MessageOutlined,StarOutlined } from '@ant-design/icons';
-import { Avatar,List,Space } from 'antd';
 
 const data = Array.from({ length: 23 }).map((_, i) => ({
   href: 'https://ant.design',
   title: `ant design part ${i}`,
-  avatar: 'https://joesch.moe/api/v1/random',
+  avatar: `https://joesch.moe/api/v1/random?key=${i}`,
   description:
     'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content:
diff --git a/components/skeleton/demo/list.tsx b/components/skeleton/demo/list.tsx
index b9d2e6c778..8bf4bde336 100644
--- a/components/skeleton/demo/list.tsx
+++ b/components/skeleton/demo/list.tsx
@@ -1,7 +1,7 @@
 import type Icon from '@ant-design/icons';
-import { LikeOutlined,MessageOutlined,StarOutlined } from '@ant-design/icons';
-import { Avatar,List,Skeleton,Switch } from 'antd';
-import React,{ useState } from 'react';
+import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
+import { Avatar, List, Skeleton, Switch } from 'antd';
+import React, { useState } from 'react';
 
 interface IconTextProps {
   icon: typeof Icon;
@@ -11,7 +11,7 @@ interface IconTextProps {
 const listData = Array.from({ length: 3 }).map((_, i) => ({
   href: 'https://ant.design',
   title: `ant design part ${i + 1}`,
-  avatar: 'https://joesch.moe/api/v1/random',
+  avatar: `https://joesch.moe/api/v1/random?key=${i}`,
   description:
     'Ant Design, a design language for background applications, is refined by Ant UED Team.',
   content:
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index 59244c1af9..8fda2d6742 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -895,7 +895,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=0"
                   />
                 </span>
               </div>
@@ -1117,7 +1117,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=1"
                   />
                 </span>
               </div>
@@ -1339,7 +1339,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=2"
                   />
                 </span>
               </div>
@@ -1561,7 +1561,7 @@ exports[`renders ./components/steps/demo/inline.tsx extend context correctly 1`]
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=3"
                   />
                 </span>
               </div>
diff --git a/components/steps/__tests__/__snapshots__/demo.test.ts.snap b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
index 80ba222f84..a93b9b60c9 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.ts.snap
@@ -751,7 +751,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=0"
                   />
                 </span>
               </div>
@@ -901,7 +901,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=1"
                   />
                 </span>
               </div>
@@ -1051,7 +1051,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=2"
                   />
                 </span>
               </div>
@@ -1201,7 +1201,7 @@ exports[`renders ./components/steps/demo/inline.tsx correctly 1`] = `
                   class="ant-avatar ant-avatar-circle ant-avatar-image"
                 >
                   <img
-                    src="https://joesch.moe/api/v1/random"
+                    src="https://joesch.moe/api/v1/random?key=3"
                   />
                 </span>
               </div>
diff --git a/components/steps/demo/inline.tsx b/components/steps/demo/inline.tsx
index b39d86230a..76be63ff30 100644
--- a/components/steps/demo/inline.tsx
+++ b/components/steps/demo/inline.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
 import type { StepsProps } from 'antd';
-import { Steps, List, Avatar } from 'antd';
+import { Avatar, List, Steps } from 'antd';
+import React from 'react';
 
 const data = [
   {
@@ -42,10 +42,10 @@ const App: React.FC = () => (
     <List
       itemLayout="horizontal"
       dataSource={data}
-      renderItem={(item) => (
+      renderItem={(item, index) => (
         <List.Item>
           <List.Item.Meta
-            avatar={<Avatar src="https://joesch.moe/api/v1/random" />}
+            avatar={<Avatar src={`https://joesch.moe/api/v1/random?key=${index}`} />}
             title={<a href="https://ant.design">{item.title}</a>}
             description="Ant Design, a design language for background applications, is refined by Ant UED Team"
           />
diff --git a/tests/setup.js b/tests/setup.js
index 25f9bf9901..2e81d19c39 100644
--- a/tests/setup.js
+++ b/tests/setup.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-console */
 const React = require('react');
 const util = require('util');
 

From 853283b7e4754bc5e4b0d150605357cc9c7d187e Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 20 Feb 2023 10:51:18 +0800
Subject: [PATCH 21/21] docs: DatePicker design tab (#40745)

* docs: DatePicker design tab

* docs: add design demo

* docs: add anchor for design demo

* docs: init g6

* docs: behavior map

* test: fix test cov

* docs: behavior map comp

* docs: add map title

* docs: fix ssr

* docs: update demo

* docs: optimize copy ux

* docs: update demo

* chore: code clean
---
 .../builtins/Previewer/CodePreviewer.tsx      | 556 ++++++++++++++++++
 .../builtins/Previewer/DesignPreviewer.tsx    | 102 ++++
 .../builtins/Previewer/fromDumiProps.tsx      |  95 ---
 .dumi/theme/builtins/Previewer/index.tsx      | 520 +---------------
 .dumi/theme/common/BehaviorMap/index.tsx      | 334 +++++++++++
 .dumi/theme/layouts/GlobalLayout.tsx          |  18 +-
 .dumi/theme/slots/Content/index.tsx           |   8 +-
 .dumi/theme/slots/ContentTabs/index.tsx       |  57 ++
 .jest.js                                      |   1 +
 components/date-picker/demo/aaa.css           |   0
 .../date-picker/design/behavior-pattern.tsx   | 112 ++++
 .../design/demo/date-extra-info.tsx           | 120 ++++
 .../design/demo/pick-date-range.tsx           |   9 +
 .../date-picker/design/demo/pick-date.tsx     |   9 +
 .../design/demo/pick-month-range.tsx          |   9 +
 .../date-picker/design/demo/pick-month.tsx    |   9 +
 .../design/demo/pick-quarter-range.tsx        |   9 +
 .../date-picker/design/demo/pick-quarter.tsx  |   9 +
 .../design/demo/pick-time-range.tsx           |   9 +
 .../date-picker/design/demo/pick-time.tsx     |   9 +
 .../design/demo/pick-week-range.tsx           |   9 +
 .../date-picker/design/demo/pick-week.tsx     |   9 +
 .../design/demo/pick-year-range.tsx           |   9 +
 .../date-picker/design/demo/pick-year.tsx     |   9 +
 .../date-picker/design/demo/preset-range.tsx  |  18 +
 .../date-picker/design/demo/preset-time.tsx   |  17 +
 .../date-picker/index.$tab-design.zh-CN.md    |  39 ++
 components/date-picker/index.en-US.md         |   3 +-
 components/date-picker/index.ts               |   3 +
 components/date-picker/index.zh-CN.md         |   3 +-
 components/icon/index.en-US.md                |   5 +-
 components/icon/index.zh-CN.md                |   5 +-
 package.json                                  |   3 +
 33 files changed, 1508 insertions(+), 619 deletions(-)
 create mode 100644 .dumi/theme/builtins/Previewer/CodePreviewer.tsx
 create mode 100644 .dumi/theme/builtins/Previewer/DesignPreviewer.tsx
 delete mode 100644 .dumi/theme/builtins/Previewer/fromDumiProps.tsx
 create mode 100644 .dumi/theme/common/BehaviorMap/index.tsx
 create mode 100644 .dumi/theme/slots/ContentTabs/index.tsx
 delete mode 100644 components/date-picker/demo/aaa.css
 create mode 100644 components/date-picker/design/behavior-pattern.tsx
 create mode 100644 components/date-picker/design/demo/date-extra-info.tsx
 create mode 100644 components/date-picker/design/demo/pick-date-range.tsx
 create mode 100644 components/date-picker/design/demo/pick-date.tsx
 create mode 100644 components/date-picker/design/demo/pick-month-range.tsx
 create mode 100644 components/date-picker/design/demo/pick-month.tsx
 create mode 100644 components/date-picker/design/demo/pick-quarter-range.tsx
 create mode 100644 components/date-picker/design/demo/pick-quarter.tsx
 create mode 100644 components/date-picker/design/demo/pick-time-range.tsx
 create mode 100644 components/date-picker/design/demo/pick-time.tsx
 create mode 100644 components/date-picker/design/demo/pick-week-range.tsx
 create mode 100644 components/date-picker/design/demo/pick-week.tsx
 create mode 100644 components/date-picker/design/demo/pick-year-range.tsx
 create mode 100644 components/date-picker/design/demo/pick-year.tsx
 create mode 100644 components/date-picker/design/demo/preset-range.tsx
 create mode 100644 components/date-picker/design/demo/preset-time.tsx
 create mode 100644 components/date-picker/index.$tab-design.zh-CN.md

diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
new file mode 100644
index 0000000000..cf9d1516df
--- /dev/null
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@@ -0,0 +1,556 @@
+import {
+  CheckOutlined,
+  LinkOutlined,
+  SnippetsOutlined,
+  ThunderboltOutlined,
+} from '@ant-design/icons';
+import type { Project } from '@stackblitz/sdk';
+import stackblitzSdk from '@stackblitz/sdk';
+import { Alert, Badge, Space, Tooltip } from 'antd';
+import classNames from 'classnames';
+import LZString from 'lz-string';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import type { IPreviewerProps } from 'dumi';
+import { FormattedMessage } from 'dumi';
+import Prism from 'prismjs';
+import JsonML from 'jsonml.js/lib/utils';
+import toReactElement from 'jsonml-to-react-element';
+import { ping } from '../../utils';
+import ClientOnly from '../../common/ClientOnly';
+import BrowserFrame from '../../common/BrowserFrame';
+import EditButton from '../../common/EditButton';
+import CodePenIcon from '../../common/CodePenIcon';
+import CodePreview from '../../common/CodePreview';
+import CodeSandboxIcon from '../../common/CodeSandboxIcon';
+import RiddleIcon from '../../common/RiddleIcon';
+import ExternalLinkIcon from '../../common/ExternalLinkIcon';
+import type { SiteContextProps } from '../../slots/SiteContext';
+import SiteContext from '../../slots/SiteContext';
+import useLocation from '../../../hooks/useLocation';
+
+const { ErrorBoundary } = Alert;
+
+function toReactComponent(jsonML: any) {
+  return toReactElement(jsonML, [
+    [
+      (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
+      (node: any, index: any) => {
+        // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
+        const attr = JsonML.getAttributes(node);
+        return React.createElement(
+          'pre',
+          {
+            key: index,
+            className: `language-${attr.lang}`,
+          },
+          React.createElement('code', {
+            dangerouslySetInnerHTML: { __html: attr.highlighted },
+          }),
+        );
+      },
+    ],
+  ]);
+}
+
+function compress(string: string): string {
+  return LZString.compressToBase64(string)
+    .replace(/\+/g, '-') // Convert '+' to '-'
+    .replace(/\//g, '_') // Convert '/' to '_'
+    .replace(/=+$/, ''); // Remove ending '='
+}
+
+const track = ({ type, demo }: { type: string; demo: string }) => {
+  if (!window.gtag) {
+    return;
+  }
+  window.gtag('event', 'demo', { event_category: type, event_label: demo });
+};
+
+let pingDeferrer: PromiseLike<boolean>;
+
+function useShowRiddleButton() {
+  const [showRiddleButton, setShowRiddleButton] = useState(false);
+
+  useEffect(() => {
+    pingDeferrer ??= new Promise<boolean>((resolve) => {
+      ping((status) => {
+        if (status !== 'timeout' && status !== 'error') {
+          return resolve(true);
+        }
+
+        return resolve(false);
+      });
+    });
+    pingDeferrer.then(setShowRiddleButton);
+  }, []);
+
+  return showRiddleButton;
+}
+
+const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
+  const {
+    asset,
+    expand,
+    iframe,
+    demoUrl,
+    children,
+    title,
+    description,
+    debug,
+    jsx,
+    style,
+    compact,
+    background,
+    filePath,
+    version,
+  } = props;
+
+  const location = useLocation();
+
+  const entryCode = asset.dependencies['index.tsx'].value;
+  const showRiddleButton = useShowRiddleButton();
+
+  const liveDemo = useRef<React.ReactNode>(null);
+  const anchorRef = useRef<HTMLAnchorElement>(null);
+  const codeSandboxIconRef = useRef<HTMLFormElement>(null);
+  const riddleIconRef = useRef<HTMLFormElement>(null);
+  const codepenIconRef = useRef<HTMLFormElement>(null);
+  const [codeExpand, setCodeExpand] = useState<boolean>(false);
+  const [copyTooltipOpen, setCopyTooltipOpen] = useState<boolean>(false);
+  const [copied, setCopied] = useState<boolean>(false);
+  const [codeType, setCodeType] = useState<string>('tsx');
+  const { theme } = useContext<SiteContextProps>(SiteContext);
+
+  const { hash, pathname, search } = location;
+  const docsOnlineUrl = `https://ant.design${pathname}${search}#${asset.id}`;
+
+  const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
+
+  const highlightedCodes = {
+    jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'),
+    tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'),
+  };
+
+  const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : '';
+
+  useEffect(() => {
+    const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
+    setShowOnlineUrl(
+      process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname),
+    );
+  }, []);
+
+  const handleCodeExpand = (demo: string) => {
+    setCodeExpand((prev) => !prev);
+    track({ type: 'expand', demo });
+  };
+
+  const handleCodeCopied = (demo: string) => {
+    setCopied(true);
+    track({ type: 'copy', demo });
+  };
+
+  const onCopyTooltipOpenChange = (open: boolean) => {
+    setCopyTooltipOpen(open);
+    if (open) {
+      setCopied(false);
+    }
+  };
+
+  useEffect(() => {
+    if (asset.id === hash.slice(1)) {
+      anchorRef.current?.click();
+    }
+  }, []);
+
+  useEffect(() => {
+    setCodeExpand(expand);
+  }, [expand]);
+
+  if (!liveDemo.current) {
+    liveDemo.current = iframe ? (
+      <BrowserFrame>
+        <iframe
+          src={demoUrl}
+          height={iframe === true ? undefined : iframe}
+          title="demo"
+          className="iframe-demo"
+        />
+      </BrowserFrame>
+    ) : (
+      children
+    );
+  }
+
+  const codeBoxClass = classNames('code-box', {
+    expand: codeExpand,
+    'code-box-debug': debug,
+  });
+
+  const localizedTitle = title;
+  const introChildren = <div dangerouslySetInnerHTML={{ __html: description }} />;
+  const highlightClass = classNames('highlight-wrapper', {
+    'highlight-wrapper-expand': codeExpand,
+  });
+
+  const html = `
+    <!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+          <meta name="theme-color" content="#000000">
+        </head>
+        <body>
+          <div id="container" style="padding: 24px" />
+          <script>const mountNode = document.getElementById('container');</script>
+        </body>
+      </html>
+    `;
+
+  const tsconfig = `
+    {
+      "compilerOptions": {
+        "jsx": "react-jsx",
+        "target": "esnext",
+        "module": "esnext",
+        "esModuleInterop": true,
+        "moduleResolution": "node",
+      }
+    }
+  `;
+
+  const suffix = codeType === 'tsx' ? 'tsx' : 'js';
+
+  const dependencies: Record<PropertyKey, string> = jsx.split('\n').reduce(
+    (acc, line) => {
+      const matches = line.match(/import .+? from '(.+)';$/);
+      if (matches && matches[1] && !line.includes('antd')) {
+        const paths = matches[1].split('/');
+        if (paths.length) {
+          const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
+          acc[dep] = 'latest';
+        }
+      }
+      return acc;
+    },
+    { antd: version },
+  );
+
+  dependencies['@ant-design/icons'] = 'latest';
+
+  if (suffix === 'tsx') {
+    dependencies['@types/react'] = '^18.0.0';
+    dependencies['@types/react-dom'] = '^18.0.0';
+  }
+
+  dependencies.react = '^18.0.0';
+  dependencies['react-dom'] = '^18.0.0';
+
+  const codepenPrefillConfig = {
+    title: `${localizedTitle} - antd@${dependencies.antd}`,
+    html,
+    js: `const { createRoot } = ReactDOM;\n${jsx
+      .replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
+      .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
+      .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
+      .replace("import moment from 'moment';", '')
+      .replace("import React from 'react';", '')
+      .replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
+      .replace(
+        /import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
+        'const { $1 } = ReactRouterDOM;',
+      )
+      .replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2')
+      .replace(
+        /export default/,
+        'const ComponentDemo =',
+      )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
+    editors: '001',
+    css: '',
+    js_external: [
+      'react@18/umd/react.development.js',
+      'react-dom@18/umd/react-dom.development.js',
+      'dayjs@1/dayjs.min.js',
+      `antd@${version}/dist/antd-with-locales.js`,
+      `@ant-design/icons/dist/index.umd.js`,
+      'react-router-dom/dist/umd/react-router-dom.production.min.js',
+      'react-router/dist/umd/react-router.production.min.js',
+    ]
+      .map((url) => `https://unpkg.com/${url}`)
+      .join(';'),
+    js_pre_processor: 'typescript',
+  };
+
+  const riddlePrefillConfig = {
+    title: `${localizedTitle} - antd@${dependencies.antd}`,
+    js: `${
+      /import React(\D*)from 'react';/.test(jsx) ? '' : `import React from 'react';\n`
+    }import { createRoot } from 'react-dom/client';\n${jsx.replace(
+      /export default/,
+      'const ComponentDemo =',
+    )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
+    css: '',
+    json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
+  };
+
+  // Reorder source code
+  let parsedSourceCode = suffix === 'tsx' ? entryCode : jsx;
+  let importReactContent = "import React from 'react';";
+  const importReactReg = /import React(\D*)from 'react';/;
+  const matchImportReact = parsedSourceCode.match(importReactReg);
+  if (matchImportReact) {
+    [importReactContent] = matchImportReact;
+    parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
+  }
+  const demoJsContent = `
+    ${importReactContent}
+    import './index.css';
+    ${parsedSourceCode}
+    `.trim();
+  const indexCssContent = (style || '')
+    .trim()
+    .replace(new RegExp(`#${asset.id}\\s*`, 'g'), '')
+    .replace('</style>', '')
+    .replace('<style>', '');
+
+  const indexJsContent = `
+    import React from 'react';
+    import { createRoot } from 'react-dom/client';
+    import Demo from './demo';
+
+    createRoot(document.getElementById('container')).render(<Demo />);
+  `;
+
+  const codesandboxPackage = {
+    title: `${localizedTitle} - antd@${dependencies.antd}`,
+    main: 'index.js',
+    dependencies: {
+      ...dependencies,
+      react: '^18.0.0',
+      'react-dom': '^18.0.0',
+      'react-scripts': '^4.0.0',
+    },
+    devDependencies: {
+      typescript: '^4.0.5',
+    },
+    scripts: {
+      start: 'react-scripts start',
+      build: 'react-scripts build',
+      test: 'react-scripts test --env=jsdom',
+      eject: 'react-scripts eject',
+    },
+    browserslist: ['>0.2%', 'not dead'],
+  };
+
+  const codesanboxPrefillConfig = {
+    files: {
+      'package.json': { content: codesandboxPackage },
+      'index.css': { content: indexCssContent },
+      [`index.${suffix}`]: { content: indexJsContent },
+      [`demo.${suffix}`]: { content: demoJsContent },
+      'index.html': {
+        content: html,
+      },
+    },
+  };
+
+  const stackblitzPrefillConfig: Project = {
+    title: `${localizedTitle} - antd@${dependencies.antd}`,
+    template: 'create-react-app',
+    dependencies,
+    description: '',
+    files: {
+      'index.css': indexCssContent,
+      [`index.${suffix}`]: indexJsContent,
+      [`demo.${suffix}`]: demoJsContent,
+      'index.html': html,
+    },
+  };
+  if (suffix === 'tsx') {
+    stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
+  }
+
+  const backgroundGrey = theme.includes('dark') ? '#303030' : '#f0f2f5';
+
+  const codeBoxDemoStyle: React.CSSProperties = {
+    padding: iframe || compact ? 0 : undefined,
+    overflow: iframe || compact ? 'hidden' : undefined,
+    backgroundColor: background === 'grey' ? backgroundGrey : undefined,
+  };
+
+  const codeBox: React.ReactNode = (
+    <section className={codeBoxClass} id={asset.id}>
+      <section className="code-box-demo" style={codeBoxDemoStyle}>
+        <ErrorBoundary>
+          <React.StrictMode>{liveDemo.current}</React.StrictMode>
+        </ErrorBoundary>
+        {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
+      </section>
+      <section className="code-box-meta markdown">
+        <div className="code-box-title">
+          <Tooltip title={debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
+            <a href={`#${asset.id}`} ref={anchorRef}>
+              {localizedTitle}
+            </a>
+          </Tooltip>
+          <EditButton title={<FormattedMessage id="app.content.edit-demo" />} filename={filePath} />
+        </div>
+        <div className="code-box-description">{introChildren}</div>
+        <Space wrap size="middle" className="code-box-actions">
+          {showOnlineUrl && (
+            <Tooltip title={<FormattedMessage id="app.demo.online" />}>
+              <a
+                className="code-box-code-action"
+                target="_blank"
+                rel="noreferrer"
+                href={docsOnlineUrl}
+              >
+                <LinkOutlined className="code-box-online" />
+              </a>
+            </Tooltip>
+          )}
+          {showRiddleButton ? (
+            <form
+              className="code-box-code-action"
+              action="//riddle.alibaba-inc.com/riddles/define"
+              method="POST"
+              target="_blank"
+              ref={riddleIconRef}
+              onClick={() => {
+                track({ type: 'riddle', demo: asset.id });
+                riddleIconRef.current?.submit();
+              }}
+            >
+              <input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
+              <Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
+                <RiddleIcon className="code-box-riddle" />
+              </Tooltip>
+            </form>
+          ) : null}
+          <form
+            className="code-box-code-action"
+            action="https://codesandbox.io/api/v1/sandboxes/define"
+            method="POST"
+            target="_blank"
+            ref={codeSandboxIconRef}
+            onClick={() => {
+              track({ type: 'codesandbox', demo: asset.id });
+              codeSandboxIconRef.current?.submit();
+            }}
+          >
+            <input
+              type="hidden"
+              name="parameters"
+              value={compress(JSON.stringify(codesanboxPrefillConfig))}
+            />
+            <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
+              <CodeSandboxIcon className="code-box-codesandbox" />
+            </Tooltip>
+          </form>
+          <form
+            className="code-box-code-action"
+            action="https://codepen.io/pen/define"
+            method="POST"
+            target="_blank"
+            ref={codepenIconRef}
+            onClick={() => {
+              track({ type: 'codepen', demo: asset.id });
+              codepenIconRef.current?.submit();
+            }}
+          >
+            <ClientOnly>
+              <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
+            </ClientOnly>
+            <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
+              <CodePenIcon className="code-box-codepen" />
+            </Tooltip>
+          </form>
+          <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
+            <span
+              className="code-box-code-action"
+              onClick={() => {
+                track({ type: 'stackblitz', demo: asset.id });
+                stackblitzSdk.openProject(stackblitzPrefillConfig, {
+                  openFile: [`demo.${suffix}`],
+                });
+              }}
+            >
+              <ThunderboltOutlined className="code-box-stackblitz" />
+            </span>
+          </Tooltip>
+          <CopyToClipboard text={entryCode} onCopy={() => handleCodeCopied(asset.id)}>
+            <Tooltip
+              open={copyTooltipOpen as boolean}
+              onOpenChange={onCopyTooltipOpenChange}
+              title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
+            >
+              {React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {
+                className: 'code-box-code-copy code-box-code-action',
+              })}
+            </Tooltip>
+          </CopyToClipboard>
+          <Tooltip title={<FormattedMessage id="app.demo.separate" />}>
+            <a className="code-box-code-action" target="_blank" rel="noreferrer" href={demoUrl}>
+              <ExternalLinkIcon className="code-box-separate" />
+            </a>
+          </Tooltip>
+
+          <Tooltip
+            title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
+          >
+            <div className="code-expand-icon code-box-code-action">
+              <img
+                alt="expand code"
+                src={
+                  theme?.includes('dark')
+                    ? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
+                    : 'https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg'
+                }
+                className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
+                onClick={() => handleCodeExpand(asset.id)}
+              />
+              <img
+                alt="expand code"
+                src={
+                  theme?.includes('dark')
+                    ? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
+                    : 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
+                }
+                className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
+                onClick={() => handleCodeExpand(asset.id)}
+              />
+            </div>
+          </Tooltip>
+        </Space>
+      </section>
+      <section className={highlightClass} key="code">
+        <CodePreview
+          codes={highlightedCodes}
+          toReactComponent={toReactComponent}
+          onCodeTypeChange={(type) => setCodeType(type)}
+        />
+        {highlightedStyle ? (
+          <div key="style" className="highlight">
+            <pre>
+              <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
+            </pre>
+          </div>
+        ) : null}
+      </section>
+    </section>
+  );
+
+  if (version) {
+    return (
+      <Badge.Ribbon text={version} color={version.includes('<') ? 'red' : null}>
+        {codeBox}
+      </Badge.Ribbon>
+    );
+  }
+
+  return codeBox;
+};
+
+export default CodePreviewer;
diff --git a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
new file mode 100644
index 0000000000..e0d083dafc
--- /dev/null
+++ b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
@@ -0,0 +1,102 @@
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import type { IPreviewerProps } from 'dumi';
+import { createStyles, css } from 'antd-style';
+import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
+import { nodeToGroup } from 'html2sketch';
+import copy from 'copy-to-clipboard';
+import { App } from 'antd';
+
+const useStyle = createStyles(({ token }) => ({
+  wrapper: css`
+    border: 1px solid ${token.colorBorderSecondary};
+    border-radius: ${token.borderRadius}px;
+    padding: 20px 24px 40px;
+    position: relative;
+    margin-bottom: ${token.marginLG}px;
+  `,
+  title: css`
+    font-size: ${token.fontSizeLG}px;
+    font-weight: ${token.fontWeightStrong};
+    color: ${token.colorTextHeading};
+
+    &:hover {
+      color: ${token.colorTextHeading};
+    }
+  `,
+  description: css`
+    margin-top: ${token.margin}px;
+  `,
+  demo: css`
+    margin-top: ${token.marginLG}px;
+    display: flex;
+    justify-content: center;
+  `,
+  copy: css`
+    position: absolute;
+    inset-inline-end: 20px;
+    inset-block-start: 20px;
+    cursor: pointer;
+  `,
+  copyTip: css`
+    color: ${token.colorTextTertiary};
+  `,
+  copiedTip: css`
+    .anticon {
+      color: ${token.colorSuccess};
+    }
+  `,
+  tip: css`
+    color: ${token.colorTextTertiary};
+    margin-top: 40px;
+  `,
+}));
+
+const DesignPreviewer: FC<IPreviewerProps> = ({ children, title, description, tip, asset }) => {
+  const { styles } = useStyle();
+  const demoRef = useRef<HTMLDivElement>(null);
+  const [copied, setCopied] = React.useState<boolean>(false);
+  const { message } = App.useApp();
+
+  const handleCopy = async () => {
+    try {
+      const group = await nodeToGroup(demoRef.current);
+      copy(JSON.stringify(group.toSketchJSON()));
+      setCopied(true);
+      setTimeout(() => {
+        setCopied(false);
+      }, 5000);
+    } catch (e) {
+      console.error(e);
+      message.error('复制失败');
+    }
+  };
+
+  return (
+    <div className={styles.wrapper} id={asset.id}>
+      <a className={styles.title} href={`#${asset.id}`}>
+        {title}
+      </a>
+      <div className={styles.description} dangerouslySetInnerHTML={{ __html: description }} />
+      <div className={styles.copy}>
+        {copied ? (
+          <div className={styles.copiedTip}>
+            <CheckOutlined />
+            <span style={{ marginLeft: 8 }}>已复制，使用 Kitchen 插件即可粘贴</span>
+          </div>
+        ) : (
+          <div onClick={handleCopy} className={styles.copyTip}>
+            <SketchOutlined />
+            <span style={{ marginLeft: 8 }}>复制 Sketch JSON</span>
+          </div>
+        )}
+      </div>
+      <div className={styles.demo} ref={demoRef}>
+        {children}
+      </div>
+      <div className={styles.tip}>{tip}</div>
+    </div>
+  );
+};
+
+export default DesignPreviewer;
diff --git a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
deleted file mode 100644
index 8e9612715f..0000000000
--- a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import JsonML from 'jsonml.js/lib/utils';
-import toReactComponent from 'jsonml-to-react-element';
-import Prism from 'prismjs';
-import 'prismjs/components/prism-typescript';
-import { useLocation, useIntl, type IPreviewerProps } from 'dumi';
-import { ping } from '../../utils';
-
-let pingDeferrer: PromiseLike<boolean>;
-
-function useShowRiddleButton() {
-  const [showRiddleButton, setShowRiddleButton] = useState(false);
-
-  useEffect(() => {
-    pingDeferrer ??= new Promise<boolean>((resolve) => {
-      ping((status) => {
-        if (status !== 'timeout' && status !== 'error') {
-          return resolve(true);
-        }
-
-        return resolve(false);
-      });
-    });
-    pingDeferrer.then(setShowRiddleButton);
-  }, []);
-
-  return showRiddleButton;
-}
-
-/**
- * HOC for convert dumi previewer props to bisheng previewer props
- */
-export default function fromDumiProps<P extends object>(
-  WrappedComponent: React.ComponentType<P>,
-): React.FC<IPreviewerProps> {
-  const hoc = function DumiPropsAntdPreviewer(props: IPreviewerProps) {
-    const showRiddleButton = useShowRiddleButton();
-    const location = useLocation();
-    const { asset, children, demoUrl, expand, description = '', ...meta } = props;
-    const intl = useIntl();
-    const entryCode = asset.dependencies['index.tsx'].value;
-    const transformedProps = {
-      meta: {
-        id: asset.id,
-        title: '',
-        filename: meta.filePath,
-        ...meta,
-      },
-      content: description,
-      preview: () => children,
-      utils: {
-        toReactComponent(jsonML: any) {
-          return toReactComponent(jsonML, [
-            [
-              (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
-              (node: any, index: any) => {
-                // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
-                const attr = JsonML.getAttributes(node);
-                return React.createElement(
-                  'pre',
-                  {
-                    key: index,
-                    className: `language-${attr.lang}`,
-                  },
-                  React.createElement('code', {
-                    dangerouslySetInnerHTML: { __html: attr.highlighted },
-                  }),
-                );
-              },
-            ],
-          ]);
-        },
-      },
-      intl: { locale: intl.locale },
-      showRiddleButton,
-      sourceCodes: {
-        jsx: meta.jsx,
-        tsx: entryCode,
-      },
-      highlightedCodes: {
-        jsx: Prism.highlight(meta.jsx, Prism.languages.javascript, 'jsx'),
-        tsx: Prism.highlight(entryCode, Prism.languages.typescript, 'tsx'),
-      },
-      style: meta.style,
-      location,
-      src: demoUrl,
-      expand,
-      highlightedStyle: meta.style ? Prism.highlight(meta.style, Prism.languages.css, 'css') : '',
-    } as P;
-
-    return <WrappedComponent {...transformedProps} />;
-  };
-
-  return hoc;
-}
diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx
index f8b3067de7..40b95fc0fc 100644
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@@ -1,512 +1,18 @@
-import {
-  CheckOutlined,
-  SnippetsOutlined,
-  ThunderboltOutlined,
-  LinkOutlined,
-} from '@ant-design/icons';
-import stackblitzSdk from '@stackblitz/sdk';
-import type { Project } from '@stackblitz/sdk';
-import { Alert, Badge, Tooltip, Space } from 'antd';
-import classNames from 'classnames';
-import LZString from 'lz-string';
-import React, { useContext, useEffect, useRef, useState } from 'react';
-import CopyToClipboard from 'react-copy-to-clipboard';
-import ReactDOM from 'react-dom';
-import { FormattedMessage } from 'dumi';
-import ClientOnly from '../../common/ClientOnly';
-import BrowserFrame from '../../common/BrowserFrame';
-import EditButton from '../../common/EditButton';
-import CodePenIcon from '../../common/CodePenIcon';
-import CodePreview from '../../common/CodePreview';
-import CodeSandboxIcon from '../../common/CodeSandboxIcon';
-import RiddleIcon from '../../common/RiddleIcon';
-import ExternalLinkIcon from '../../common/ExternalLinkIcon';
-import fromDumiProps from './fromDumiProps';
-import type { SiteContextProps } from '../../slots/SiteContext';
-import SiteContext from '../../slots/SiteContext';
-import { version } from '../../../../package.json';
+import type { FC } from 'react';
+import React from 'react';
+import type { IPreviewerProps } from 'dumi';
+import { useTabMeta } from 'dumi';
+import CodePreviewer from './CodePreviewer';
+import DesignPreviewer from './DesignPreviewer';
 
-const { ErrorBoundary } = Alert;
+const Previewer: FC<IPreviewerProps> = ({ ...props }) => {
+  const tab = useTabMeta();
 
-function compress(string: string): string {
-  return LZString.compressToBase64(string)
-    .replace(/\+/g, '-') // Convert '+' to '-'
-    .replace(/\//g, '_') // Convert '/' to '_'
-    .replace(/=+$/, ''); // Remove ending '='
-}
-
-const track = ({ type, demo }: { type: string; demo: string }) => {
-  if (!window.gtag) {
-    return;
+  if (tab?.frontmatter.title === 'Design') {
+    return <DesignPreviewer {...props} />;
   }
-  window.gtag('event', 'demo', { event_category: type, event_label: demo });
+
+  return <CodePreviewer {...props} />;
 };
 
-interface DemoProps {
-  meta: any;
-  intl: any;
-  utils?: any;
-  src: string;
-  content: string;
-  highlightedCodes: Record<PropertyKey, string>;
-  style: string;
-  highlightedStyle: string;
-  expand: boolean;
-  sourceCodes: Record<'jsx' | 'tsx', string>;
-  location: Location;
-  showRiddleButton: boolean;
-  preview: (react: typeof React, reactDOM: typeof ReactDOM) => React.ReactNode;
-}
-
-const Demo: React.FC<DemoProps> = (props) => {
-  const {
-    location,
-    sourceCodes,
-    meta,
-    src,
-    utils,
-    content,
-    highlightedCodes,
-    style,
-    highlightedStyle,
-    expand,
-    intl: { locale },
-    showRiddleButton,
-    preview,
-  } = props;
-
-  const liveDemo = useRef<React.ReactNode>(null);
-  const anchorRef = useRef<HTMLAnchorElement>(null);
-  const codeSandboxIconRef = useRef<HTMLFormElement>(null);
-  const riddleIconRef = useRef<HTMLFormElement>(null);
-  const codepenIconRef = useRef<HTMLFormElement>(null);
-  const [codeExpand, setCodeExpand] = useState<boolean>(false);
-  const [copyTooltipOpen, setCopyTooltipOpen] = useState<boolean>(false);
-  const [copied, setCopied] = useState<boolean>(false);
-  const [codeType, setCodeType] = useState<string>('tsx');
-  const { theme } = useContext<SiteContextProps>(SiteContext);
-
-  const { hash, pathname, search } = location;
-  const docsOnlineUrl = `https://ant.design${pathname}${search}#${meta.id}`;
-
-  const [showOnlineUrl, setShowOnlineUrl] = useState<boolean>(false);
-
-  useEffect(() => {
-    const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses
-    setShowOnlineUrl(
-      process.env.NODE_ENV === 'development' || regexp.test(window.location.hostname),
-    );
-  }, []);
-
-  const handleCodeExpand = (demo: string) => {
-    setCodeExpand((prev) => !prev);
-    track({ type: 'expand', demo });
-  };
-
-  const handleCodeCopied = (demo: string) => {
-    setCopied(true);
-    track({ type: 'copy', demo });
-  };
-
-  const onCopyTooltipOpenChange = (open: boolean) => {
-    setCopyTooltipOpen(open);
-    if (open) {
-      setCopied(false);
-    }
-  };
-
-  useEffect(() => {
-    if (meta.id === hash.slice(1)) {
-      anchorRef.current?.click();
-    }
-  }, []);
-
-  useEffect(() => {
-    setCodeExpand(expand);
-  }, [expand]);
-
-  if (!liveDemo.current) {
-    liveDemo.current = meta.iframe ? (
-      <BrowserFrame>
-        <iframe src={src} height={meta.iframe} title="demo" className="iframe-demo" />
-      </BrowserFrame>
-    ) : (
-      preview(React, ReactDOM)
-    );
-  }
-
-  const codeBoxClass = classNames('code-box', {
-    expand: codeExpand,
-    'code-box-debug': meta.originDebug,
-  });
-
-  const localizedTitle = meta?.title[locale] || meta?.title;
-  const localizeIntro = content[locale] || content;
-  const introChildren = <div dangerouslySetInnerHTML={{ __html: localizeIntro }} />;
-  const highlightClass = classNames('highlight-wrapper', {
-    'highlight-wrapper-expand': codeExpand,
-  });
-
-  const html = `
-    <!DOCTYPE html>
-      <html lang="en">
-        <head>
-          <meta charset="utf-8">
-          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-          <meta name="theme-color" content="#000000">
-        </head>
-        <body>
-          <div id="container" style="padding: 24px" />
-          <script>const mountNode = document.getElementById('container');</script>
-        </body>
-      </html>
-    `;
-
-  const tsconfig = `
-    {
-      "compilerOptions": {
-        "jsx": "react-jsx",
-        "target": "esnext",
-        "module": "esnext",
-        "esModuleInterop": true,
-        "moduleResolution": "node",
-      }
-    }
-  `;
-
-  const suffix = codeType === 'tsx' ? 'tsx' : 'js';
-
-  const dependencies: Record<PropertyKey, string> = sourceCodes?.jsx.split('\n').reduce(
-    (acc, line) => {
-      const matches = line.match(/import .+? from '(.+)';$/);
-      if (matches && matches[1] && !line.includes('antd')) {
-        const paths = matches[1].split('/');
-        if (paths.length) {
-          const dep = paths[0].startsWith('@') ? `${paths[0]}/${paths[1]}` : paths[0];
-          acc[dep] = 'latest';
-        }
-      }
-      return acc;
-    },
-    { antd: version },
-  );
-
-  dependencies['@ant-design/icons'] = 'latest';
-
-  if (suffix === 'tsx') {
-    dependencies['@types/react'] = '^18.0.0';
-    dependencies['@types/react-dom'] = '^18.0.0';
-  }
-
-  dependencies.react = '^18.0.0';
-  dependencies['react-dom'] = '^18.0.0';
-
-  const codepenPrefillConfig = {
-    title: `${localizedTitle} - antd@${dependencies.antd}`,
-    html,
-    js: `const { createRoot } = ReactDOM;\n${sourceCodes?.jsx
-      .replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
-      .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
-      .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
-      .replace("import moment from 'moment';", '')
-      .replace("import React from 'react';", '')
-      .replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
-      .replace(
-        /import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
-        'const { $1 } = ReactRouterDOM;',
-      )
-      .replace(/([A-Za-z]*)\s+as\s+([A-Za-z]*)/, '$1:$2')
-      .replace(
-        /export default/,
-        'const ComponentDemo =',
-      )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
-    editors: '001',
-    css: '',
-    js_external: [
-      'react@18/umd/react.development.js',
-      'react-dom@18/umd/react-dom.development.js',
-      'dayjs@1/dayjs.min.js',
-      `antd@${version}/dist/antd-with-locales.js`,
-      `@ant-design/icons/dist/index.umd.js`,
-      'react-router-dom/dist/umd/react-router-dom.production.min.js',
-      'react-router/dist/umd/react-router.production.min.js',
-    ]
-      .map((url) => `https://unpkg.com/${url}`)
-      .join(';'),
-    js_pre_processor: 'typescript',
-  };
-
-  const riddlePrefillConfig = {
-    title: `${localizedTitle} - antd@${dependencies.antd}`,
-    js: `${
-      /import React(\D*)from 'react';/.test(sourceCodes?.jsx) ? '' : `import React from 'react';\n`
-    }import { createRoot } from 'react-dom/client';\n${sourceCodes?.jsx.replace(
-      /export default/,
-      'const ComponentDemo =',
-    )}\n\ncreateRoot(mountNode).render(<ComponentDemo />);\n`,
-    css: '',
-    json: JSON.stringify({ name: 'antd-demo', dependencies }, null, 2),
-  };
-
-  // Reorder source code
-  let parsedSourceCode = suffix === 'tsx' ? sourceCodes?.tsx : sourceCodes?.jsx;
-  let importReactContent = "import React from 'react';";
-  const importReactReg = /import React(\D*)from 'react';/;
-  const matchImportReact = parsedSourceCode.match(importReactReg);
-  if (matchImportReact) {
-    [importReactContent] = matchImportReact;
-    parsedSourceCode = parsedSourceCode.replace(importReactReg, '').trim();
-  }
-  const demoJsContent = `
-    ${importReactContent}
-    import './index.css';
-    ${parsedSourceCode}
-    `.trim();
-  const indexCssContent = (style || '')
-    .trim()
-    .replace(new RegExp(`#${meta.id}\\s*`, 'g'), '')
-    .replace('</style>', '')
-    .replace('<style>', '');
-
-  const indexJsContent = `
-    import React from 'react';
-    import { createRoot } from 'react-dom/client';
-    import Demo from './demo';
-
-    createRoot(document.getElementById('container')).render(<Demo />);
-  `;
-
-  const codesandboxPackage = {
-    title: `${localizedTitle} - antd@${dependencies.antd}`,
-    main: 'index.js',
-    dependencies: {
-      ...dependencies,
-      react: '^18.0.0',
-      'react-dom': '^18.0.0',
-      'react-scripts': '^4.0.0',
-    },
-    devDependencies: {
-      typescript: '^4.0.5',
-    },
-    scripts: {
-      start: 'react-scripts start',
-      build: 'react-scripts build',
-      test: 'react-scripts test --env=jsdom',
-      eject: 'react-scripts eject',
-    },
-    browserslist: ['>0.2%', 'not dead'],
-  };
-
-  const codesanboxPrefillConfig = {
-    files: {
-      'package.json': { content: codesandboxPackage },
-      'index.css': { content: indexCssContent },
-      [`index.${suffix}`]: { content: indexJsContent },
-      [`demo.${suffix}`]: { content: demoJsContent },
-      'index.html': {
-        content: html,
-      },
-    },
-  };
-
-  const stackblitzPrefillConfig: Project = {
-    title: `${localizedTitle} - antd@${dependencies.antd}`,
-    template: 'create-react-app',
-    dependencies,
-    description: '',
-    files: {
-      'index.css': indexCssContent,
-      [`index.${suffix}`]: indexJsContent,
-      [`demo.${suffix}`]: demoJsContent,
-      'index.html': html,
-    },
-  };
-  if (suffix === 'tsx') {
-    stackblitzPrefillConfig.files['tsconfig.json'] = tsconfig;
-  }
-
-  const backgroundGrey = theme.includes('dark') ? '#303030' : '#f0f2f5';
-
-  const codeBoxDemoStyle: React.CSSProperties = {
-    padding: meta.iframe || meta.compact ? 0 : undefined,
-    overflow: meta.iframe || meta.compact ? 'hidden' : undefined,
-    backgroundColor: meta.background === 'grey' ? backgroundGrey : undefined,
-  };
-
-  const codeBox: React.ReactNode = (
-    <section className={codeBoxClass} id={meta.id}>
-      <section className="code-box-demo" style={codeBoxDemoStyle}>
-        <ErrorBoundary>
-          <React.StrictMode>{liveDemo.current}</React.StrictMode>
-        </ErrorBoundary>
-        {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
-      </section>
-      <section className="code-box-meta markdown">
-        <div className="code-box-title">
-          <Tooltip title={meta.originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
-            <a href={`#${meta.id}`} ref={anchorRef}>
-              {localizedTitle}
-            </a>
-          </Tooltip>
-          <EditButton
-            title={<FormattedMessage id="app.content.edit-demo" />}
-            filename={meta.filename}
-          />
-        </div>
-        <div className="code-box-description">{introChildren}</div>
-        <Space wrap size="middle" className="code-box-actions">
-          {showOnlineUrl && (
-            <Tooltip title={<FormattedMessage id="app.demo.online" />}>
-              <a
-                className="code-box-code-action"
-                target="_blank"
-                rel="noreferrer"
-                href={docsOnlineUrl}
-              >
-                <LinkOutlined className="code-box-online" />
-              </a>
-            </Tooltip>
-          )}
-          {showRiddleButton ? (
-            <form
-              className="code-box-code-action"
-              action="//riddle.alibaba-inc.com/riddles/define"
-              method="POST"
-              target="_blank"
-              ref={riddleIconRef}
-              onClick={() => {
-                track({ type: 'riddle', demo: meta.id });
-                riddleIconRef.current?.submit();
-              }}
-            >
-              <input type="hidden" name="data" value={JSON.stringify(riddlePrefillConfig)} />
-              <Tooltip title={<FormattedMessage id="app.demo.riddle" />}>
-                <RiddleIcon className="code-box-riddle" />
-              </Tooltip>
-            </form>
-          ) : null}
-          <form
-            className="code-box-code-action"
-            action="https://codesandbox.io/api/v1/sandboxes/define"
-            method="POST"
-            target="_blank"
-            ref={codeSandboxIconRef}
-            onClick={() => {
-              track({ type: 'codesandbox', demo: meta.id });
-              codeSandboxIconRef.current?.submit();
-            }}
-          >
-            <input
-              type="hidden"
-              name="parameters"
-              value={compress(JSON.stringify(codesanboxPrefillConfig))}
-            />
-            <Tooltip title={<FormattedMessage id="app.demo.codesandbox" />}>
-              <CodeSandboxIcon className="code-box-codesandbox" />
-            </Tooltip>
-          </form>
-          <form
-            className="code-box-code-action"
-            action="https://codepen.io/pen/define"
-            method="POST"
-            target="_blank"
-            ref={codepenIconRef}
-            onClick={() => {
-              track({ type: 'codepen', demo: meta.id });
-              codepenIconRef.current?.submit();
-            }}
-          >
-            <ClientOnly>
-              <input type="hidden" name="data" value={JSON.stringify(codepenPrefillConfig)} />
-            </ClientOnly>
-            <Tooltip title={<FormattedMessage id="app.demo.codepen" />}>
-              <CodePenIcon className="code-box-codepen" />
-            </Tooltip>
-          </form>
-          <Tooltip title={<FormattedMessage id="app.demo.stackblitz" />}>
-            <span
-              className="code-box-code-action"
-              onClick={() => {
-                track({ type: 'stackblitz', demo: meta.id });
-                stackblitzSdk.openProject(stackblitzPrefillConfig, {
-                  openFile: [`demo.${suffix}`],
-                });
-              }}
-            >
-              <ThunderboltOutlined className="code-box-stackblitz" />
-            </span>
-          </Tooltip>
-          <CopyToClipboard text={sourceCodes?.tsx} onCopy={() => handleCodeCopied(meta.id)}>
-            <Tooltip
-              open={copyTooltipOpen as boolean}
-              onOpenChange={onCopyTooltipOpenChange}
-              title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
-            >
-              {React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {
-                className: 'code-box-code-copy code-box-code-action',
-              })}
-            </Tooltip>
-          </CopyToClipboard>
-          <Tooltip title={<FormattedMessage id="app.demo.separate" />}>
-            <a className="code-box-code-action" target="_blank" rel="noreferrer" href={src}>
-              <ExternalLinkIcon className="code-box-separate" />
-            </a>
-          </Tooltip>
-
-          <Tooltip
-            title={<FormattedMessage id={`app.demo.code.${codeExpand ? 'hide' : 'show'}`} />}
-          >
-            <div className="code-expand-icon code-box-code-action">
-              <img
-                alt="expand code"
-                src={
-                  theme?.includes('dark')
-                    ? 'https://gw.alipayobjects.com/zos/antfincdn/btT3qDZn1U/wSAkBuJFbdxsosKKpqyq.svg'
-                    : 'https://gw.alipayobjects.com/zos/antfincdn/Z5c7kzvi30/expand.svg'
-                }
-                className={codeExpand ? 'code-expand-icon-hide' : 'code-expand-icon-show'}
-                onClick={() => handleCodeExpand(meta.id)}
-              />
-              <img
-                alt="expand code"
-                src={
-                  theme?.includes('dark')
-                    ? 'https://gw.alipayobjects.com/zos/antfincdn/CjZPwcKUG3/OpROPHYqWmrMDBFMZtKF.svg'
-                    : 'https://gw.alipayobjects.com/zos/antfincdn/4zAaozCvUH/unexpand.svg'
-                }
-                className={codeExpand ? 'code-expand-icon-show' : 'code-expand-icon-hide'}
-                onClick={() => handleCodeExpand(meta.id)}
-              />
-            </div>
-          </Tooltip>
-        </Space>
-      </section>
-      <section className={highlightClass} key="code">
-        <CodePreview
-          codes={highlightedCodes}
-          toReactComponent={utils?.toReactComponent}
-          onCodeTypeChange={(type) => setCodeType(type)}
-        />
-        {highlightedStyle ? (
-          <div key="style" className="highlight">
-            <pre>
-              <code className="css" dangerouslySetInnerHTML={{ __html: highlightedStyle }} />
-            </pre>
-          </div>
-        ) : null}
-      </section>
-    </section>
-  );
-
-  if (meta.version) {
-    return (
-      <Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : null}>
-        {codeBox}
-      </Badge.Ribbon>
-    );
-  }
-
-  return codeBox;
-};
-
-export default fromDumiProps(Demo);
+export default Previewer;
diff --git a/.dumi/theme/common/BehaviorMap/index.tsx b/.dumi/theme/common/BehaviorMap/index.tsx
new file mode 100644
index 0000000000..2122b24029
--- /dev/null
+++ b/.dumi/theme/common/BehaviorMap/index.tsx
@@ -0,0 +1,334 @@
+import type { FC } from 'react';
+import React, { useEffect, useRef } from 'react';
+import G6 from '@antv/g6';
+import { createStyles, css } from 'antd-style';
+import { useRouteMeta } from 'dumi';
+
+G6.registerNode('behavior-start-node', {
+  draw: (cfg, group) => {
+    const textWidth = G6.Util.getTextSize(cfg!.label, 16)[0];
+    const size = [textWidth + 20 * 2, 48];
+    const keyShape = group!.addShape('rect', {
+      name: 'start-node',
+      attrs: {
+        width: size[0],
+        height: size[1],
+        y: -size[1] / 2,
+        radius: 8,
+        fill: '#fff',
+      },
+    });
+    group!.addShape('text', {
+      attrs: {
+        text: `${cfg!.label}`,
+        fill: 'rgba(0, 0, 0, 0.88)',
+        fontSize: 16,
+        fontWeight: 500,
+        x: 20,
+        textBaseline: 'middle',
+      },
+      name: 'start-node-text',
+    });
+    return keyShape;
+  },
+  getAnchorPoints() {
+    return [
+      [0, 0.5],
+      [1, 0.5],
+    ];
+  },
+});
+
+G6.registerNode(
+  'behavior-sub-node',
+  {
+    draw: (cfg, group) => {
+      const textWidth = G6.Util.getTextSize(cfg!.label, 14)[0];
+      const padding = 16;
+      const size = [textWidth + 16 * 2 + (cfg!.targetType ? 12 : 0) + (cfg!.link ? 20 : 0), 40];
+      const keyShape = group!.addShape('rect', {
+        name: 'sub-node',
+        attrs: {
+          width: size[0],
+          height: size[1],
+          y: -size[1] / 2,
+          radius: 8,
+          fill: '#fff',
+          cursor: 'pointer',
+        },
+      });
+      group!.addShape('text', {
+        attrs: {
+          text: `${cfg!.label}`,
+          x: cfg!.targetType ? 12 + 16 : padding,
+          fill: 'rgba(0, 0, 0, 0.88)',
+          fontSize: 14,
+          textBaseline: 'middle',
+          cursor: 'pointer',
+        },
+        name: 'sub-node-text',
+      });
+      if (cfg!.targetType) {
+        group!.addShape('rect', {
+          name: 'sub-node-type',
+          attrs: {
+            width: 8,
+            height: 8,
+            radius: 4,
+            y: -4,
+            x: 12,
+            fill: cfg!.targetType === 'mvp' ? '#1677ff' : '#A0A0A0',
+            cursor: 'pointer',
+          },
+        });
+      }
+      if (cfg!.children) {
+        const { length } = cfg!.children as any;
+        group!.addShape('rect', {
+          name: 'sub-node-children-length',
+          attrs: {
+            width: 20,
+            height: 20,
+            radius: 10,
+            y: -10,
+            x: size[0] - 4,
+            fill: '#404040',
+            cursor: 'pointer',
+          },
+        });
+        group!.addShape('text', {
+          name: 'sub-node-children-length-text',
+          attrs: {
+            text: `${length}`,
+            x: size[0] + 6 - G6.Util.getTextSize(`${length}`, 12)[0] / 2,
+            textBaseline: 'middle',
+            fill: '#fff',
+            fontSize: 12,
+            cursor: 'pointer',
+          },
+        });
+      }
+      if (cfg!.link) {
+        group!.addShape('dom', {
+          attrs: {
+            width: 16,
+            height: 16,
+            x: size[0] - 12 - 16,
+            y: -8,
+            cursor: 'pointer',
+            // DOM's html
+            html: `
+            <div style="width: 16px; height: 16px;">
+              <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
+                          <g id="编组-30" transform="translate(288.000000, 354.000000)">
+                              <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
+                                  <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
+                                      <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                                      <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#BFBFBF"></path>
+                                      <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#BFBFBF"></path>
+                                  </g>
+                              </g>
+                          </g>
+                      </g>
+                  </g>
+              </svg>
+            </div>
+          `,
+          },
+          // 在 G6 3.3 及之后的版本中，必须指定 name，可以是任意字符串，但需要在同一个自定义元素类型中保持唯一性
+          name: 'sub-node-link',
+        });
+      }
+      return keyShape;
+    },
+    getAnchorPoints() {
+      return [
+        [0, 0.5],
+        [1, 0.5],
+      ];
+    },
+    options: {
+      stateStyles: {
+        hover: {
+          stroke: '#1677ff',
+          'sub-node-link': {
+            html: `
+            <div style="width: 16px; height: 16px;">
+              <svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                  <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+                      <g id="DatePicker" transform="translate(-890.000000, -441.000000)" fill-rule="nonzero">
+                          <g id="编组-30" transform="translate(288.000000, 354.000000)">
+                              <g id="编组-7备份-7" transform="translate(522.000000, 79.000000)">
+                                  <g id="right-circle-outlinedd" transform="translate(80.000000, 8.000000)">
+                                      <rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="16" height="16"></rect>
+                                      <path d="M10.4171875,7.8984375 L6.5734375,5.1171875 C6.490625,5.0578125 6.375,5.115625 6.375,5.21875 L6.375,5.9515625 C6.375,6.1109375 6.4515625,6.2625 6.58125,6.35625 L8.853125,8 L6.58125,9.64375 C6.4515625,9.7375 6.375,9.8875 6.375,10.0484375 L6.375,10.78125 C6.375,10.8828125 6.490625,10.9421875 6.5734375,10.8828125 L10.4171875,8.1015625 C10.4859375,8.0515625 10.4859375,7.9484375 10.4171875,7.8984375 Z" id="路径" fill="#1677ff"></path>
+                                      <path d="M8,1 C4.134375,1 1,4.134375 1,8 C1,11.865625 4.134375,15 8,15 C11.865625,15 15,11.865625 15,8 C15,4.134375 11.865625,1 8,1 Z M8,13.8125 C4.790625,13.8125 2.1875,11.209375 2.1875,8 C2.1875,4.790625 4.790625,2.1875 8,2.1875 C11.209375,2.1875 13.8125,4.790625 13.8125,8 C13.8125,11.209375 11.209375,13.8125 8,13.8125 Z" id="形状" fill="#1677ff"></path>
+                                  </g>
+                              </g>
+                          </g>
+                      </g>
+                  </g>
+              </svg>
+            </div>
+          `,
+          },
+        },
+      },
+    },
+  },
+  'rect',
+);
+
+const dataTransform = (data: BehaviorMapItem) => {
+  const changeData = (d: any, level = 0) => {
+    const clonedData: any = {
+      ...d,
+    };
+    switch (level) {
+      case 0:
+        clonedData.type = 'behavior-start-node';
+        break;
+      case 1:
+        clonedData.type = 'behavior-sub-node';
+        clonedData.collapsed = true;
+        break;
+      default:
+        clonedData.type = 'behavior-sub-node';
+        break;
+    }
+
+    if (d.children) {
+      clonedData.children = d.children.map((child: any) => changeData(child, level + 1));
+    }
+    return clonedData;
+  };
+  return changeData(data);
+};
+
+type BehaviorMapItem = {
+  id: string;
+  label: string;
+  targetType?: 'mvp' | 'extension';
+  children?: BehaviorMapItem[];
+  link?: string;
+};
+
+const useStyle = createStyles(() => ({
+  container: css`
+    width: 100%;
+    height: 600px;
+    background-color: #f5f5f5;
+    border: 1px solid #e8e8e8;
+    border-radius: 8px;
+    overflow: hidden;
+    position: relative;
+  `,
+  title: css`
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    font-size: 16px;
+  `,
+  tips: css`
+    display: flex;
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+  `,
+  mvp: css`
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      background-color: #1677ff;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+  `,
+  extension: css`
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '';
+      display: block;
+      width: 8px;
+      height: 8px;
+      background-color: #A0A0A0;
+      border-radius: 50%;
+      margin-right: 8px;
+    }
+  `,
+}));
+
+export type BehaviorMapProps = {
+  data: BehaviorMapItem;
+};
+
+const BehaviorMap: FC<BehaviorMapProps> = ({ data }) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const { styles } = useStyle();
+  const meta = useRouteMeta();
+
+  useEffect(() => {
+    const graph = new G6.TreeGraph({
+      container: ref.current!,
+      width: ref.current!.scrollWidth,
+      height: ref.current!.scrollHeight,
+      renderer: 'svg',
+      modes: {
+        default: ['collapse-expand', 'drag-canvas'],
+      },
+      defaultEdge: {
+        type: 'cubic-horizontal',
+        style: {
+          lineWidth: 1,
+          stroke: '#BFBFBF',
+        },
+      },
+      layout: {
+        type: 'mindmap',
+        direction: 'LR',
+        getHeight: () => 48,
+        getWidth: (node: any) => G6.Util.getTextSize(node.label, 16)[0] + 20 * 2,
+        getVGap: () => 10,
+        getHGap: () => 60,
+        getSide: (node: any) => node.data.direction,
+      },
+    });
+
+    graph.on('node:mouseenter', (e) => {
+      graph.setItemState(e.item!, 'hover', true);
+    });
+    graph.on('node:mouseleave', (e) => {
+      graph.setItemState(e.item!, 'hover', false);
+    });
+    graph.on('node:click', (e) => {
+      const { link } = e.item!.getModel();
+      if (link) {
+        window.location.hash = link as string;
+      }
+    });
+
+    graph.data(dataTransform(data));
+    graph.render();
+    graph.fitCenter();
+  }, []);
+
+  return (
+    <div ref={ref} className={styles.container}>
+      <div className={styles.title}>{`${meta.frontmatter.title} 行为模式地图`}</div>
+      <div className={styles.tips}>
+        <div className={styles.mvp}>MVP 行为目的</div>
+        <div className={styles.extension}>拓展行为目的</div>
+      </div>
+    </div>
+  );
+};
+
+export default BehaviorMap;
diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx
index 392461bbc8..3f0950daaf 100644
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@@ -5,7 +5,7 @@ import {
   parentSelectorLinter,
   StyleProvider,
 } from '@ant-design/cssinjs';
-import { ConfigProvider, theme as antdTheme } from 'antd';
+import { ConfigProvider, theme as antdTheme, App } from 'antd';
 import type { DirectionType } from 'antd/es/config-provider';
 import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
 import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
@@ -118,13 +118,15 @@ const GlobalLayout: React.FC = () => {
             algorithm: getAlgorithm(theme),
           }}
         >
-          {outlet}
-          {!pathname.startsWith('/~demos') && (
-            <ThemeSwitch
-              value={theme}
-              onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
-            />
-          )}
+          <App>
+            {outlet}
+            {!pathname.startsWith('/~demos') && (
+              <ThemeSwitch
+                value={theme}
+                onChange={(nextTheme) => updateSiteConfig({ theme: nextTheme })}
+              />
+            )}
+          </App>
         </ConfigProvider>
       </SiteContext.Provider>
     </StyleProvider>
diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx
index 78d6bfc027..234b1b8d4f 100644
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@@ -4,7 +4,7 @@ import ContributorsList from '@qixian.cs/github-contributors-list';
 import { Affix, Anchor, Avatar, Col, Skeleton, Space, Tooltip, Typography } from 'antd';
 import classNames from 'classnames';
 import DayJS from 'dayjs';
-import { FormattedMessage, useIntl, useRouteMeta } from 'dumi';
+import { FormattedMessage, useIntl, useRouteMeta, useTabMeta } from 'dumi';
 import type { ReactNode } from 'react';
 import React, { useContext, useLayoutEffect, useMemo, useState } from 'react';
 import useLocation from '../../../hooks/useLocation';
@@ -107,6 +107,7 @@ type AnchorItem = {
 
 const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
   const meta = useRouteMeta();
+  const tab = useTabMeta();
   const { pathname, hash } = useLocation();
   const { formatMessage } = useIntl();
   const styles = useStyle();
@@ -132,7 +133,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
 
   const anchorItems = useMemo(
     () =>
-      meta.toc.reduce<AnchorItem[]>((result, item) => {
+      (tab?.toc || meta.toc).reduce<AnchorItem[]>((result, item) => {
         if (item.depth === 2) {
           result.push({ ...item });
         } else if (item.depth === 3) {
@@ -144,7 +145,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
         }
         return result;
       }, []),
-    [meta.toc],
+    [tab?.toc, meta.toc],
   );
 
   const isRTL = direction === 'rtl';
@@ -219,6 +220,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
               </Space>
             </Typography.Paragraph>
           ) : null}
+          {meta.frontmatter.description !== meta.texts[0]?.value && meta.frontmatter.description}
           {children}
           {meta.frontmatter.filename && (
             <ContributorsList
diff --git a/.dumi/theme/slots/ContentTabs/index.tsx b/.dumi/theme/slots/ContentTabs/index.tsx
new file mode 100644
index 0000000000..a295fbf6f6
--- /dev/null
+++ b/.dumi/theme/slots/ContentTabs/index.tsx
@@ -0,0 +1,57 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+import { CodeOutlined, SkinOutlined } from '@ant-design/icons';
+import { Tabs } from 'antd';
+import { useRouteMeta } from 'dumi';
+import type { IContentTabsProps } from 'dumi/theme-default/slots/ContentTabs';
+import type { TabsProps } from 'rc-tabs';
+
+const titleMap: Record<string, string> = {
+  design: '设计',
+};
+
+const iconMap: Record<string, ReactNode> = {
+  design: <SkinOutlined />,
+};
+
+const ContentTabs: FC<IContentTabsProps> = ({ tabs, tabKey, onChange }) => {
+  const meta = useRouteMeta();
+
+  if (!meta.tabs) {
+    return null;
+  }
+
+  const items: TabsProps['items'] = [
+    {
+      label: (
+        <span>
+          <CodeOutlined />
+          开发
+        </span>
+      ),
+      key: 'development',
+    },
+  ];
+  tabs?.forEach((tab) => {
+    items.push({
+      label: (
+        <span>
+          {iconMap[tab.key]}
+          {titleMap[tab.key]}
+        </span>
+      ),
+      key: tab.key,
+    });
+  });
+
+  return (
+    <Tabs
+      items={items}
+      activeKey={tabKey || 'development'}
+      onChange={(key) => onChange(tabs.find((tab) => tab.key === key))}
+      style={{ margin: '32px 0 -16px' }}
+    />
+  );
+};
+
+export default ContentTabs;
diff --git a/.jest.js b/.jest.js
index 44cc2e7595..e367fe38d6 100644
--- a/.jest.js
+++ b/.jest.js
@@ -52,6 +52,7 @@ module.exports = {
     '!components/*/__tests__/image.test.{ts,tsx}',
     '!components/__tests__/node.test.tsx',
     '!components/*/demo/*.tsx',
+    '!components/*/design/**',
   ],
   transformIgnorePatterns,
   globals: {
diff --git a/components/date-picker/demo/aaa.css b/components/date-picker/demo/aaa.css
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/components/date-picker/design/behavior-pattern.tsx b/components/date-picker/design/behavior-pattern.tsx
new file mode 100644
index 0000000000..2e0958bfd2
--- /dev/null
+++ b/components/date-picker/design/behavior-pattern.tsx
@@ -0,0 +1,112 @@
+import React from 'react';
+import BehaviorMap from '../../../.dumi/theme/common/BehaviorMap';
+
+const BehaviorPattern = () => (
+  <BehaviorMap
+    data={{
+      id: '200000004',
+      label: '选择（输入）日期数据',
+      children: [
+        {
+          id: '500000061',
+          label: '选择时间点',
+          targetType: 'mvp',
+          children: [
+            {
+              id: '707000085',
+              label: '选择某天',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date',
+            },
+            {
+              id: '707000086',
+              label: '选择某周',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week',
+            },
+            {
+              id: '707000087',
+              label: '选择某月',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month',
+            },
+            {
+              id: '707000088',
+              label: '选择某季度',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter',
+            },
+            {
+              id: '707000089',
+              label: '选择某年',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year',
+            },
+            {
+              id: '707000090',
+              label: '选择某时间',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time',
+            },
+          ],
+        },
+        {
+          id: '200000005',
+          label: '选择时间段',
+          targetType: 'mvp',
+          children: [
+            {
+              id: '7070000851',
+              label: '选择某天至某天',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-date-range',
+            },
+            {
+              id: '7070000861',
+              label: '选择某周至某周',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-week-range',
+            },
+            {
+              id: '7070000871',
+              label: '选择某月至某月',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-month-range',
+            },
+            {
+              id: '7070000881',
+              label: '选择某季度至某季度',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-quarter-range',
+            },
+            {
+              id: '7070000891',
+              label: '选择某年至某年',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-year-range',
+            },
+            {
+              id: '7070000901',
+              label: '选择某时间至某时间',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-pick-time-range',
+            },
+          ],
+        },
+        {
+          id: '200000006',
+          label: '快捷选择日期数据',
+          targetType: 'extension',
+          children: [
+            {
+              id: '70700008912',
+              label: '快捷选择时间点',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-time',
+            },
+            {
+              id: '70700009012',
+              label: '快捷选择时间段',
+              link: 'components-date-picker-index-tab-design-zh-cn-demo-preset-range',
+            },
+          ],
+        },
+        {
+          id: '200000007',
+          label: '查看日期附属信息',
+          targetType: 'extension',
+          link: 'components-date-picker-index-tab-design-zh-cn-demo-date-extra-info',
+        },
+      ],
+    }}
+  />
+);
+
+export default BehaviorPattern;
diff --git a/components/date-picker/design/demo/date-extra-info.tsx b/components/date-picker/design/demo/date-extra-info.tsx
new file mode 100644
index 0000000000..e19d77a0ee
--- /dev/null
+++ b/components/date-picker/design/demo/date-extra-info.tsx
@@ -0,0 +1,120 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+import type { Dayjs } from 'dayjs';
+import { createStyles, css } from 'antd-style';
+import classNames from 'classnames';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const useStyle = createStyles(({ token }) => ({
+  weekendCell: css`
+    color: #ff4d4f40;
+    .ant-picker-cell-in-view & {
+      color: #ff4d4f;
+    }
+  `,
+  detailedCell: css`
+    width: 40px;
+    height: 40px !important;
+  `,
+  detailedPicker: css`
+    .ant-picker-date-panel {
+      width: auto;
+      .ant-picker-content {
+        width: auto;
+      }
+    }
+  `,
+  extraInfo: css`
+    font-size: 12px;
+    line-height: 12px;
+    transform: scale(${10 / 12});
+    color: ${token.colorTextQuaternary};
+    .ant-picker-cell-in-view & {
+      color: ${token.colorTextSecondary};
+    }
+    .ant-picker-cell-selected & {
+      color: #fff;
+    }
+  `,
+  add: css`
+    color: #ff4d4f80;
+    .ant-picker-cell-in-view & {
+      color: #ff4d4f;
+    }
+    .ant-picker-cell-selected & {
+      color: #fff;
+    }
+  `,
+  minus: css`
+    color: #52C41A80;
+    .ant-picker-cell-in-view & {
+      color: #52C41A;
+    }
+    .ant-picker-cell-selected & {
+      color: #fff;
+    }
+  `,
+}));
+
+const seeds = Array(30)
+  .fill(1)
+  .map(() => Math.random());
+
+const getSales = (date: Dayjs) => Math.floor(seeds[date.date() % 30] * 10000);
+
+const getData = (date: Dayjs) => (Math.floor(seeds[date.date() % 30] * 10000) - 5000) / 5000;
+
+const Demo: FC = () => {
+  const { styles } = useStyle();
+  const dateRender = (current: Dayjs) => (
+    <div
+      className={classNames(
+        'ant-picker-cell-inner',
+        [6, 0].includes(current.day()) && styles.weekendCell,
+      )}
+    >
+      {current.date()}
+    </div>
+  );
+
+  const saleDateRender = (current: Dayjs) => (
+    <div className={classNames('ant-picker-cell-inner', styles.detailedCell)}>
+      {current.date()}
+      <div className={styles.extraInfo}>{getSales(current)}</div>
+    </div>
+  );
+
+  const dataDateRender = (current: Dayjs) => {
+    const data = getData(current);
+
+    return (
+      <div className={classNames('ant-picker-cell-inner', styles.detailedCell)}>
+        {current.date()}
+        <div className={classNames(styles.extraInfo, data > 0 ? styles.add : styles.minus)}>
+          {data.toFixed(2)}%
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div style={{ width: '100%' }}>
+      <div style={{ color: 'rgba(0,0,0,0.45)', marginBottom: 32 }}>办公场景：预览节假日信息</div>
+      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
+        <PureDatePicker dateRender={dateRender} popupClassName={styles.detailedPicker} />
+      </div>
+      <div style={{ color: 'rgba(0,0,0,0.45)', marginBottom: 32 }}>电商场景：预览销售额信息</div>
+      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
+        <PureDatePicker dateRender={saleDateRender} popupClassName={styles.detailedPicker} />
+      </div>
+      <div style={{ color: 'rgba(0,0,0,0.45)', marginBottom: 32 }}>大数据场景：预览数据波动</div>
+      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 40 }}>
+        <PureDatePicker dateRender={dataDateRender} popupClassName={styles.detailedPicker} />
+      </div>
+    </div>
+  );
+};
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-date-range.tsx b/components/date-picker/design/demo/pick-date-range.tsx
new file mode 100644
index 0000000000..0cffcd51bc
--- /dev/null
+++ b/components/date-picker/design/demo/pick-date-range.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const Demo: FC = () => <PureRangePicker />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-date.tsx b/components/date-picker/design/demo/pick-date.tsx
new file mode 100644
index 0000000000..d90cc05d72
--- /dev/null
+++ b/components/date-picker/design/demo/pick-date.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const Demo: FC = () => <PureDatePicker />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-month-range.tsx b/components/date-picker/design/demo/pick-month-range.tsx
new file mode 100644
index 0000000000..8b11f1364f
--- /dev/null
+++ b/components/date-picker/design/demo/pick-month-range.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const Demo: FC = () => <PureRangePicker picker="month" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-month.tsx b/components/date-picker/design/demo/pick-month.tsx
new file mode 100644
index 0000000000..8ebc115dbd
--- /dev/null
+++ b/components/date-picker/design/demo/pick-month.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const Demo: FC = () => <PureDatePicker picker="month" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-quarter-range.tsx b/components/date-picker/design/demo/pick-quarter-range.tsx
new file mode 100644
index 0000000000..75942d0188
--- /dev/null
+++ b/components/date-picker/design/demo/pick-quarter-range.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const Demo: FC = () => <PureRangePicker picker="quarter" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-quarter.tsx b/components/date-picker/design/demo/pick-quarter.tsx
new file mode 100644
index 0000000000..7519f130d0
--- /dev/null
+++ b/components/date-picker/design/demo/pick-quarter.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const Demo: FC = () => <PureDatePicker picker="quarter" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-time-range.tsx b/components/date-picker/design/demo/pick-time-range.tsx
new file mode 100644
index 0000000000..fe5e86fdac
--- /dev/null
+++ b/components/date-picker/design/demo/pick-time-range.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const Demo: FC = () => <PureRangePicker showTime />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-time.tsx b/components/date-picker/design/demo/pick-time.tsx
new file mode 100644
index 0000000000..d73e759e8a
--- /dev/null
+++ b/components/date-picker/design/demo/pick-time.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const Demo: FC = () => <PureDatePicker showTime />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-week-range.tsx b/components/date-picker/design/demo/pick-week-range.tsx
new file mode 100644
index 0000000000..4cd7ba647c
--- /dev/null
+++ b/components/date-picker/design/demo/pick-week-range.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const Demo: FC = () => <PureRangePicker picker="week" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-week.tsx b/components/date-picker/design/demo/pick-week.tsx
new file mode 100644
index 0000000000..f619fbf114
--- /dev/null
+++ b/components/date-picker/design/demo/pick-week.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const Demo: FC = () => <PureDatePicker picker="week" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-year-range.tsx b/components/date-picker/design/demo/pick-year-range.tsx
new file mode 100644
index 0000000000..8521494c47
--- /dev/null
+++ b/components/date-picker/design/demo/pick-year-range.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const Demo: FC = () => <PureRangePicker picker="year" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/pick-year.tsx b/components/date-picker/design/demo/pick-year.tsx
new file mode 100644
index 0000000000..01ae1001e2
--- /dev/null
+++ b/components/date-picker/design/demo/pick-year.tsx
@@ -0,0 +1,9 @@
+import type { FC } from 'react';
+import React from 'react';
+import { DatePicker } from 'antd';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const Demo: FC = () => <PureDatePicker picker="year" />;
+
+export default Demo;
diff --git a/components/date-picker/design/demo/preset-range.tsx b/components/date-picker/design/demo/preset-range.tsx
new file mode 100644
index 0000000000..1af93420be
--- /dev/null
+++ b/components/date-picker/design/demo/preset-range.tsx
@@ -0,0 +1,18 @@
+import React from 'react';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+
+const { _InternalRangePanelDoNotUseOrYouWillBeFired: PureRangePicker } = DatePicker;
+
+const App: React.FC = () => (
+  <PureRangePicker
+    presets={[
+      { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
+      { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
+      { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
+      { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
+    ]}
+  />
+);
+
+export default App;
diff --git a/components/date-picker/design/demo/preset-time.tsx b/components/date-picker/design/demo/preset-time.tsx
new file mode 100644
index 0000000000..ae9d9917e7
--- /dev/null
+++ b/components/date-picker/design/demo/preset-time.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { DatePicker } from 'antd';
+import dayjs from 'dayjs';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: PureDatePicker } = DatePicker;
+
+const App: React.FC = () => (
+  <PureDatePicker
+    presets={[
+      { label: 'Yesterday', value: dayjs().add(-1, 'd') },
+      { label: 'Last Week', value: dayjs().add(-7, 'd') },
+      { label: 'Last Month', value: dayjs().add(-1, 'month') },
+    ]}
+  />
+);
+
+export default App;
diff --git a/components/date-picker/index.$tab-design.zh-CN.md b/components/date-picker/index.$tab-design.zh-CN.md
new file mode 100644
index 0000000000..c889c2e479
--- /dev/null
+++ b/components/date-picker/index.$tab-design.zh-CN.md
@@ -0,0 +1,39 @@
+## 组件定义
+
+DatePicker 的本质是选择（输入）日期型数据。
+
+<code src="./design/behavior-pattern.tsx" inline></code>
+
+## 基础使用
+
+<code src="./design/demo/pick-date.tsx" description="用于具体日期的选择。用户仅需要输入非常具体的日期信息时使用。">选择某天</code>
+
+<code src="./design/demo/pick-week.tsx" description="用于周的选择。用户仅需输入年份 + 周信息时使用。">选择某周</code>
+
+<code src="./design/demo/pick-month.tsx" description="用于月份的选择。用户仅需输入年份 + 月份信息时使用。">选择某月</code>
+
+<code src="./design/demo/pick-quarter.tsx" description="用于季度的选择。用户仅需输入年份 + 季度信息时使用。">选择某季度</code>
+
+<code src="./design/demo/pick-year.tsx" description="用于年的选择。用户仅需输入年份时使用。">选择某年</code>
+
+<code src="./design/demo/pick-time.tsx" description="用于具体时刻的选择。用户需输入年份+月份+日期+时间信息时使用。">选择某时刻</code>
+
+<code src="./design/demo/pick-date-range.tsx" description="用于具体日期范围的选择。">选择某天至某天</code>
+
+<code src="./design/demo/pick-week-range.tsx" description="用于周范围的选择。">选择某周至某周</code>
+
+<code src="./design/demo/pick-month-range.tsx" description="用于月范围的选择。">选择某月至某月</code>
+
+<code src="./design/demo/pick-quarter-range.tsx" description="用于季度范围的选择。">选择某季度至某季度</code>
+
+<code src="./design/demo/pick-year-range.tsx" description="用于年范围的选择。">选择某年至某年</code>
+
+<code src="./design/demo/pick-time-range.tsx" description="用于具体时刻范围的选择。">选择某时刻至某时刻</code>
+
+## 交互变体
+
+<code src="./design/demo/preset-time.tsx" description="通过面板左侧区域提供的预置项，帮助用户快速完成时间点的选择。" tip="根据希克定律，建议快捷选项的个数不超过8个。">快捷选择时间点</code>
+
+<code src="./design/demo/preset-range.tsx" description="通过面板左侧区域提供的预置项，帮助用户快速完成时间段的选择。" tip="根据希克定律，建议快捷选项的个数不超过8个。">快捷选择时间段</code>
+
+<code src="./design/demo/date-extra-info.tsx" description="通过定义日期单元格内容及样式，为用户展示更多业务场景相关信息作为选择参考。">查看日期附属信息</code>
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 9af70a4b88..7e75cffcb8 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -2,14 +2,13 @@
 category: Components
 group: Data Entry
 title: DatePicker
+description: To select or input a date.
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xXA9TJ8BTioAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-To select or input a date.
-
 ## When To Use
 
 By clicking the input box, you can select a date from a popup calendar.
diff --git a/components/date-picker/index.ts b/components/date-picker/index.ts
index 4d04384491..0a6d473afc 100755
--- a/components/date-picker/index.ts
+++ b/components/date-picker/index.ts
@@ -19,7 +19,10 @@ const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
 /* istanbul ignore next */
 const PurePanel = genPurePanel(DatePicker, 'picker');
 (DatePicker as any)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker');
+(DatePicker as any)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel;
 
 export default DatePicker as typeof DatePicker & {
   _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+  _InternalRangePanelDoNotUseOrYouWillBeFired: typeof PureRangePanel;
 };
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index a797c1143c..eeae9a5f26 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -3,14 +3,13 @@ category: Components
 group: 数据录入
 title: DatePicker
 subtitle: 日期选择框
+description: 输入或选择日期的控件。
 cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xXA9TJ8BTioAAAAAAAAAAAAADrJ8AQ/original
 coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3OpRQKcygo8AAAAAAAAAAAAADrJ8AQ/original
 demo:
   cols: 2
 ---
 
-输入或选择日期的控件。
-
 ## 何时使用
 
 当用户需要输入一个日期，可以点击标准输入框，弹出日期面板进行选择。
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
index f2d841d307..ac401e8a65 100644
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@@ -2,6 +2,7 @@
 category: Components
 group: General
 title: Icon
+description: Semantic vector graphics.
 toc: 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
@@ -9,7 +10,9 @@ demo:
   cols: 2
 ---
 
-Semantic vector graphics. Before use icons, you need to install `@ant-design/icons` package:
+## How to use
+
+Before use icons, you need to install `@ant-design/icons` package:
 
 ```bash
 npm install --save @ant-design/icons
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index 05927b9c17..aa016628c6 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -1,6 +1,7 @@
 ---
 category: Components
 subtitle: 图标
+description: 语义化的矢量图形。
 group: 通用
 title: Icon
 toc: false
@@ -10,7 +11,9 @@ demo:
   cols: 2
 ---
 
-语义化的矢量图形。使用图标组件，你需要安装 `@ant-design/icons` 图标组件包：
+## 使用方法
+
+使用图标组件，你需要安装 `@ant-design/icons` 图标组件包：
 
 ```bash
 npm install --save @ant-design/icons
diff --git a/package.json b/package.json
index f19ec8b8e8..75d19a63eb 100644
--- a/package.json
+++ b/package.json
@@ -157,6 +157,7 @@
   },
   "devDependencies": {
     "@ant-design/tools": "^17.0.0",
+    "@antv/g6": "^4.8.5",
     "@babel/eslint-plugin": "^7.19.1",
     "@dnd-kit/core": "^6.0.7",
     "@dnd-kit/sortable": "^7.0.2",
@@ -195,6 +196,7 @@
     "@typescript-eslint/eslint-plugin": "^5.40.0",
     "@typescript-eslint/parser": "^5.40.0",
     "antd-img-crop": "^4.2.8",
+    "antd-style": "^2.0.2",
     "antd-token-previewer": "^1.1.0-21",
     "chalk": "^4.0.0",
     "cheerio": "1.0.0-rc.12",
@@ -220,6 +222,7 @@
     "fs-extra": "^11.0.0",
     "gh-pages": "^5.0.0",
     "glob": "^8.0.1",
+    "html2sketch": "^1.0.0",
     "http-server": "^14.0.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",