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] 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",