From e04c2d69aeb70febcbb7e458c1bd7e225508d335 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 25 Nov 2022 14:23:11 +0800
Subject: [PATCH] docs: collect token API from tsdoc (#38964)

* chore: token doc

* docs: token meta

* chore: code clean

* chore: code clean

* chore: json

* chore: rename

* chore: style
---
 .dumi/theme/builtins/TokenTable/index.tsx | 114 ++++++
 .gitignore                                |   3 +-
 components/menu/index.en-US.md            |   1 +
 components/theme/interface.ts             | 412 ++++++++++++++++++++--
 docs/react/customize-theme.en-US.md       | 215 +----------
 docs/react/customize-theme.zh-CN.md       | 215 +----------
 package.json                              |  10 +-
 scripts/collect-token-statistic.js        |   7 +-
 scripts/generate-token-meta.js            |  71 ++++
 9 files changed, 594 insertions(+), 454 deletions(-)
 create mode 100644 .dumi/theme/builtins/TokenTable/index.tsx
 create mode 100644 scripts/generate-token-meta.js

diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx
new file mode 100644
index 0000000000..57ae744066
--- /dev/null
+++ b/.dumi/theme/builtins/TokenTable/index.tsx
@@ -0,0 +1,114 @@
+import React, { FC, useMemo } from 'react';
+import tokenMeta from 'antd/es/version/token-meta.json';
+import { getDesignToken } from 'antd-token-previewer';
+import { Table, TableProps, Tag } from 'antd';
+import useLocale from '../../../hooks/useLocale';
+import useSiteToken from '../../../hooks/useSiteToken';
+import { css } from '@emotion/react';
+
+type TokenTableProps = {
+  type: 'seed' | 'map' | 'alias';
+  lang: 'zh' | 'en';
+};
+
+type TokenData = {
+  name: string;
+  desc: string;
+  type: string;
+  value: any;
+};
+
+const defaultToken = getDesignToken();
+
+const locales = {
+  cn: {
+    token: 'Token 名称',
+    description: '描述',
+    type: '类型',
+    value: '默认值',
+  },
+  en: {
+    token: 'Token Name',
+    description: 'Description',
+    type: 'Type',
+    value: 'Default Value',
+  },
+};
+
+const useStyle = () => {
+  const { token } = useSiteToken();
+
+  return {
+    codeSpan: css`
+      margin: 0 1px;
+      padding: 0.2em 0.4em;
+      font-size: 0.9em;
+      background: ${token.siteMarkdownCodeBg};
+      border: 1px solid ${token.colorSplit};
+      border-radius: 3px;
+      font-family: monospace;
+    `,
+  };
+};
+
+const TokenTable: FC<TokenTableProps> = ({ type }) => {
+  const styles = useStyle();
+  const [locale, lang] = useLocale(locales);
+  const columns: Exclude<TableProps<TokenData>['columns'], undefined> = [
+    {
+      title: locale.token,
+      key: 'name',
+      dataIndex: 'name',
+    },
+    {
+      title: locale.description,
+      key: 'desc',
+      dataIndex: 'desc',
+      width: 300,
+    },
+    {
+      title: locale.type,
+      key: 'type',
+      dataIndex: 'type',
+      render: (_, record) => <span css={styles.codeSpan}>{record.type}</span>,
+    },
+    {
+      title: locale.value,
+      key: 'value',
+      render: (_, record) => (
+        <span style={{ display: 'inline-flex', alignItems: 'center' }}>
+          {typeof record.value === 'string' &&
+            (record.value.startsWith('#') || record.value.startsWith('rgb')) && (
+              <span
+                style={{
+                  background: record.value,
+                  display: 'inline-block',
+                  width: 6,
+                  height: 6,
+                  borderRadius: '50%',
+                  boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.06)',
+                  marginRight: 4,
+                }}
+              ></span>
+            )}
+          {typeof record.value !== 'string' ? JSON.stringify(record.value) : record.value}
+        </span>
+      ),
+    },
+  ];
+
+  const data = useMemo<TokenData[]>(() => {
+    return tokenMeta[type].map((token) => {
+      return {
+        name: token.name,
+        desc: lang === 'cn' ? token.desc : token.descEn,
+        type: token.type,
+        value: (defaultToken as any)[token.name],
+      };
+    });
+  }, [type, lang]);
+
+  return <Table dataSource={data} columns={columns} pagination={false} bordered />;
+};
+
+export default TokenTable;
diff --git a/.gitignore b/.gitignore
index 56055aa70a..1cbe6e171f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -48,7 +48,8 @@ server/
 # Docs templates
 scripts/previewEditor/index.html
 components/version/version.tsx
-components/version/token.tsx
+components/version/token.json
+components/version/token-meta.json
 .dumi/tmp
 .dumi/tmp-test
 .dumi/tmp-production
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index 2e9db56079..864a7c5e19 100644
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@@ -129,6 +129,7 @@ The legacy demo code for version `<4.20.0` could be found at [https://github.com
 
 #### SubMenuType
 
+<!-- prettier-ignore -->
 | Property | Description | Type | Default value | Version |
 | --- | --- | --- | --- | --- |
 | children | Sub-menus or sub-menu items | [ItemType\[\]](#ItemType) | - |  |
diff --git a/components/theme/interface.ts b/components/theme/interface.ts
index 300e042ca3..444973f59d 100644
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@@ -149,151 +149,505 @@ export type GlobalToken = AliasToken & ComponentTokenMap;
 // ======================================================================
 // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
 export interface SeedToken extends PresetColorType {
-  // Color
+  /**
+   * @desc 品牌主色
+   */
   colorPrimary: string;
+
+  /**
+   * @desc 成功色
+   */
   colorSuccess: string;
+
+  /**
+   * @desc 警戒色
+   */
   colorWarning: string;
+
+  /**
+   * @desc 错误色
+   */
   colorError: string;
+
+  /**
+   * @desc 信息色
+   */
   colorInfo: string;
+
+  /**
+   * @desc 基础文本色
+   */
   colorTextBase: string;
-  /** Base component background color. Will derivative container background color with this */
+
+  /**
+   * Base component background color. Will derivative container background color with this
+   * @desc 基础背景色
+   */
   colorBgBase: string;
 
   // Font
+  /**
+   * @desc 字体
+   */
   fontFamily: string;
+
+  /**
+   * @desc 基础字号
+   */
   fontSize: number;
 
-  // Line
-  /** Border width of base components */
+  /**
+   * Border width of base components
+   * @desc 基础线宽
+   */
   lineWidth: number;
+
+  /**
+   * @desc 线条样式
+   */
   lineType: string;
 
-  // Motion
+  /**
+   * @desc 动画时长变化单位
+   */
   motionUnit: number;
+
+  /**
+   * @desc 动画基础时长
+   */
   motionBase: number;
+
+  /**
+   * @desc
+   */
   motionEaseOutCirc: string;
+
+  /**
+   * @desc
+   */
   motionEaseInOutCirc: string;
+
+  /**
+   * @desc
+   */
   motionEaseInOut: string;
+
+  /**
+   * @desc
+   */
   motionEaseOutBack: string;
+
+  /**
+   * @desc
+   */
   motionEaseInBack: string;
+
+  /**
+   * @desc
+   */
   motionEaseInQuint: string;
+
+  /**
+   * @desc
+   */
   motionEaseOutQuint: string;
+
+  /**
+   * @desc
+   */
   motionEaseOut: string;
 
   // Radius
+  /**
+   * @desc 基础圆角
+   * @descEn Base border radius
+   */
   borderRadius: number;
 
-  // Size
+  /**
+   * @desc 尺寸变化单位
+   */
   sizeUnit: number;
+
+  /**
+   * @desc 尺寸基础大小
+   */
   sizeStep: number;
+
+  /**
+   * @desc 组件箭头尺寸
+   */
   sizePopupArrow: number;
 
   // Control Base
+
+  /**
+   * @desc
+   */
   controlHeight: number;
 
-  // zIndex
-  /** Base zIndex of component like BackTop, Affix which can be cover by large popup */
+  /**
+   * @desc 基础 zIndex
+   * @descEn Base popup component zIndex
+   */
   zIndexBase: number;
-  /** Base popup component zIndex */
+  /**  */
+
+  /**
+   * @desc 浮层基础 zIndex
+   * @descEn Base zIndex of component like FloatButton, Affix which can be cover by large popup
+   */
   zIndexPopupBase: number;
 
-  // Image
-  /** Define default Image opacity. Useful when in dark-like theme */
+  /**
+   * @desc 成功色
+   * @descEn Define default Image opacity. Useful when in dark-like theme
+   */
   opacityImage: number;
 
-  // Wireframe
+  /**
+   * @desc 线框化
+   */
   wireframe: boolean;
 }
 
 export interface NeutralColorMapToken {
-  // Base
+  /**
+   * @internal
+   */
   colorTextBase: string;
+
+  /**
+   * @internal
+   */
   colorBgBase: string;
 
-  // Text
+  /**
+   * @desc 一级文本色
+   */
   colorText: string;
+
+  /**
+   * @desc 二级文本色
+   */
   colorTextSecondary: string;
+
+  /**
+   * @desc 三级文本色
+   */
   colorTextTertiary: string;
+
+  /**
+   * @desc 四级文本色
+   */
   colorTextQuaternary: string;
 
-  // Fill
+  /**
+   * @desc 一级填充色
+   */
   colorFill: string;
+
+  /**
+   * @desc 二级填充色
+   */
   colorFillSecondary: string;
+
+  /**
+   * @desc 三级填充色
+   */
   colorFillTertiary: string;
+
+  /**
+   * @desc 四级填充色
+   */
   colorFillQuaternary: string;
 
-  // Background
+  /**
+   * @desc 组件容器背景色
+   */
   colorBgContainer: string;
+
+  /**
+   * @desc 浮层容器背景色
+   */
   colorBgElevated: string;
+
+  /**
+   * @desc 布局背景色
+   */
   colorBgLayout: string;
+
+  /**
+   * @desc
+   */
   colorBgSpotlight: string;
 
-  // Border
+  /**
+   * @desc 一级边框色
+   */
   colorBorder: string;
+
+  /**
+   * @desc 二级边框色
+   */
   colorBorderSecondary: string;
 }
 
 export interface ColorMapToken extends NeutralColorMapToken {
   // Primary
+  /**
+   * @desc 主色的浅色背景颜色
+   */
   colorPrimaryBg: string; // 1
+
+  /**
+   * @desc 主色的浅色背景色悬浮态
+   */
   colorPrimaryBgHover: string; // 2
+
+  /**
+   * @desc 主色的描边色
+   */
   colorPrimaryBorder: string; // 3
+
+  /**
+   * @desc 主色的描边色悬浮态
+   */
   colorPrimaryBorderHover: string; // 4
+
+  /**
+   * @desc 主色的深色悬浮态
+   */
   colorPrimaryHover: string; // 5
+
+  /**
+   * @desc 品牌主色
+   */
   colorPrimary: string; // 6
+
+  /**
+   * @desc 主色的深色激活态
+   */
   colorPrimaryActive: string; // 7
+
+  /**
+   * @desc 主色的文本悬浮态
+   */
   colorPrimaryTextHover: string; // 8
+
+  /**
+   * @desc 主色的文本默认态
+   */
   colorPrimaryText: string; // 9
+
+  /**
+   * @desc 主色的文本激活态
+   */
   colorPrimaryTextActive: string; // 10
 
-  // Success
+  /**
+   * @desc 成功色的浅色背景颜色
+   */
   colorSuccessBg: string; // 1
+
+  /**
+   * @desc 成功色的浅色背景色悬浮态
+   */
   colorSuccessBgHover: string; // 2
+
+  /**
+   * @desc 成功色的描边色
+   */
   colorSuccessBorder: string; // 3
+
+  /**
+   * @desc 成功色的描边色悬浮态
+   */
   colorSuccessBorderHover: string; // 4
+
+  /**
+   * @desc 成功色的深色悬浮态
+   */
   colorSuccessHover: string; // 5
+
+  /**
+   * @desc 成功色
+   */
   colorSuccess: string; // 6
+
+  /**
+   * @desc 成功色的深色激活态
+   */
   colorSuccessActive: string; // 7
+
+  /**
+   * @desc 成功色的文本悬浮态
+   */
   colorSuccessTextHover: string; // 8
+
+  /**
+   * @desc 成功色的文本默认态
+   */
   colorSuccessText: string; // 9
+
+  /**
+   * @desc 成功色的文本激活态
+   */
   colorSuccessTextActive: string; // 10
 
-  // Warning
+  /**
+   * @desc 警戒色的浅色背景颜色
+   */
   colorWarningBg: string; // 1
+
+  /**
+   * @desc 警戒色的浅色背景色悬浮态
+   */
   colorWarningBgHover: string; // 2
+
+  /**
+   * @desc 警戒色的描边色
+   */
   colorWarningBorder: string; // 3
+
+  /**
+   * @desc 警戒色的描边色悬浮态
+   */
   colorWarningBorderHover: string; // 4
+
+  /**
+   * @desc 警戒色的深色悬浮态
+   */
   colorWarningHover: string; // 5
+
+  /**
+   * @desc 警戒色
+   */
   colorWarning: string; // 6
+
+  /**
+   * @desc 警戒色的深色激活态
+   */
   colorWarningActive: string; // 7
+
+  /**
+   * @desc 警戒色的文本悬浮态
+   */
   colorWarningTextHover: string; // 8
+
+  /**
+   * @desc 警戒色的文本默认态
+   */
   colorWarningText: string; // 9
+
+  /**
+   * @desc 警戒色的文本激活态
+   */
   colorWarningTextActive: string; // 10
 
-  // Error
+  /**
+   * @desc 错误色的浅色背景颜色
+   */
   colorErrorBg: string; // 1
+
+  /**
+   * @desc 错误色的浅色背景色悬浮态
+   */
   colorErrorBgHover: string; // 2
+
+  /**
+   * @desc 错误色的描边色
+   */
   colorErrorBorder: string; // 3
+
+  /**
+   * @desc 错误色的描边色悬浮态
+   */
   colorErrorBorderHover: string; // 4
+
+  /**
+   * @desc 错误色的深色悬浮态
+   */
   colorErrorHover: string; // 5
+
+  /**
+   * @desc 错误色
+   */
   colorError: string; // 6
+
+  /**
+   * @desc 错误色的深色激活态
+   */
   colorErrorActive: string; // 7
+
+  /**
+   * @desc 错误色的文本悬浮态
+   */
   colorErrorTextHover: string; // 8
+
+  /**
+   * @desc 错误色的文本默认态
+   */
   colorErrorText: string; // 9
+
+  /**
+   * @desc 错误色的文本激活态
+   */
   colorErrorTextActive: string; // 10
 
-  // Info
+  /**
+   * @desc 信息色的浅色背景颜色
+   */
   colorInfoBg: string; // 1
+
+  /**
+   * @desc 信息色的浅色背景色悬浮态
+   */
   colorInfoBgHover: string; // 2
+
+  /**
+   * @desc 信息色的描边色
+   */
   colorInfoBorder: string; // 3
+
+  /**
+   * @desc 信息色的描边色悬浮态
+   */
   colorInfoBorderHover: string; // 4
+
+  /**
+   * @desc 信息色的深色悬浮态
+   */
   colorInfoHover: string; // 5
+
+  /**
+   * @desc 信息色
+   */
   colorInfo: string; // 6
+
+  /**
+   * @desc 信息色的深色激活态
+   */
   colorInfoActive: string; // 7
+
+  /**
+   * @desc 信息色的文本悬浮态
+   */
   colorInfoTextHover: string; // 8
+
+  /**
+   * @desc 信息色的文本默认态
+   */
   colorInfoText: string; // 9
+
+  /**
+   * @desc 信息色的文本激活态
+   */
   colorInfoTextActive: string; // 10
 
+  /**
+   * @desc 浮层的背景蒙层颜色
+   */
   colorBgMask: string;
   colorWhite: string;
 }
@@ -322,7 +676,13 @@ export interface HeightMapToken {
 
 export interface CommonMapToken {
   // Font
+  /**
+   * @internal
+   */
   fontSizes: number[];
+  /**
+   * @internal
+   */
   lineHeights: number[];
 
   // Line
@@ -492,14 +852,24 @@ export interface AliasToken extends MapToken {
   controlTmpOutline: string;
 
   // FIXME: component box-shadow, should be removed
+  /** @internal */
   boxShadowPopoverArrow: string;
+  /** @internal */
   boxShadowCard: string;
+  /** @internal */
   boxShadowDrawerRight: string;
+  /** @internal */
   boxShadowDrawerLeft: string;
+  /** @internal */
   boxShadowDrawerUp: string;
+  /** @internal */
   boxShadowDrawerDown: string;
+  /** @internal */
   boxShadowTabsOverflowLeft: string;
+  /** @internal */
   boxShadowTabsOverflowRight: string;
+  /** @internal */
   boxShadowTabsOverflowTop: string;
+  /** @internal */
   boxShadowTabsOverflowBottom: string;
 }
diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md
index af679df45a..84859600b3 100644
--- a/docs/react/customize-theme.en-US.md
+++ b/docs/react/customize-theme.en-US.md
@@ -318,228 +318,19 @@ export default () => {
 
 ### SeedToken
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| colorPrimary | 品牌主色 | `string` | `#1677ff` |
-| colorSuccess | 成功色 | `string` | `#52c41a` |
-| colorWarning | 警戒色 | `string` | `#faad14` |
-| colorError | 错误色 | `string` | `#ff4d4f` |
-| colorInfo | 信息色 | `string` | `#1677ff` |
-| colorTextBase | 基础文本色 | `string` | `#000` |
-| colorTextLightSolid | 亮色文本色 | `string` | `#fff` |
-| colorBgBase | 基础背景色 | `string` | `#fff` |
-| fontFamily | 字体 | `string` | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'` |
-| fontSize | 基础字号 | `number` | `14` |
-| lineWidth | 基础线宽 | `number` | `1` |
-| lineType | 线条样式 | `string` | `solid` |
-| motionUnit | 动画时长变化单位 | `number` | `0.1` |
-| motionBase | 动画基础时长 | `number` | `0` |
-| motionEaseOutCirc | - | `string` | `cubic-bezier(0.08, 0.82, 0.17, 1)` |
-| motionEaseInOutCirc | - | `string` | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` |
-| motionEaseOut | - | `string` | `cubic-bezier(0.215, 0.61, 0.355, 1)` |
-| motionEaseInOut | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
-| motionEaseOutBack | - | `string` | `cubic-bezier(0.12, 0.4, 0.29, 1.46)` |
-| motionEaseInQuint | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
-| motionEaseOutQuint | - | `string` | `cubic-bezier(0.23, 1, 0.32, 1)` |
-| borderRadius | 基础圆角 | `number` | `6` |
-| sizeUnit | 尺寸变化单位 | `number` | `4` |
-| sizeStep | 尺寸基础大小 | `number` | `4` |
-| sizePopupArrow | 组件箭头尺寸 | `number` | `16` |
-| controlHeight | - | `number` | `32` |
-| zIndexBase | 基础 `z-index` | `number` | `0` |
-| zIndexPopupBase | 浮层基础 `z-index` | `number` | `1000` |
-| opacityImage | - | `number` | `1` |
-| wireframe | 线框化 | `boolean` | `false` |
+<TokenTable type="seed"></TokenTable>
 
 ### MapToken
 
 > 继承所有 SeedToken 的 Property
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| colorText | 一级文本色 | `string` | `rgba(0, 0, 0, 0.88)` |
-| colorTextSecondary | 二级文本色 | `string` | `rgba(0, 0, 0, 0.65)` |
-| colorTextTertiary | 三级文本色 | `string` | `rgba(0, 0, 0, 0.45)` |
-| colorTextQuaternary | 四级文本色 | `string` | `rgba(0, 0, 0, 0.25)` |
-| colorFill | 一级填充色 | `string` | `rgba(0, 0, 0, 0.15)` |
-| colorFillSecondary | 二级填充色 | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorFillTertiary | 三级填充色 | `string` | `rgba(0, 0, 0, 0.04)` |
-| colorFillQuaternary | 四级填充色 | `string` | `rgba(0, 0, 0, 0.02)` |
-| colorBgContainer | 组件容器背景色 | `string` | `#ffffff` |
-| colorBgElevated | 浮层容器背景色 | `string` | `#ffffff` |
-| colorBgLayout | 布局背景色 | `string` | `#f5f5f5` |
-| colorBgSpotlight | - | `string` | `rgba(0, 0, 0, 0.85)` |
-| colorBorder | 一级边框色 | `string` | `#d9d9d9` |
-| colorBorderSecondary | 二级边框色 | `string` | `#f0f0f0` |
-| colorSplit | 分割线颜色 | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorPrimaryBg | 主色的浅色背景颜色 | `string` | `#e6f4ff` |
-| colorPrimaryBgHover | 主色的浅色背景色悬浮态 | `string` | `#bae0ff` |
-| colorPrimaryBorder | 主色的描边色 | `string` | `#91caff` |
-| colorPrimaryBorderHover | 主色的描边色悬浮态 | `string` | `#69b1ff` |
-| colorPrimaryHover | 主色的深色悬浮态 | `string` | `#4096ff` |
-| colorPrimary | 品牌主色 | `string` | `#1677ff` |
-| colorPrimaryActive | 主色的深色激活态 | `string` | `#0958d9` |
-| colorPrimaryTextHover | 主色的文本悬浮态 | `string` | `#4096ff` |
-| colorPrimaryText | 主色的文本默认态 | `string` | `#1677ff` |
-| colorPrimaryTextActive | 主色的文本激活态 | `string` | `#0958d9` |
-| colorSuccessBg | 成功色的浅色背景颜色 | `string` | `#f6ffed` |
-| colorSuccessBgHover | 成功色的浅色背景色悬浮态 | `string` | `#d9f7be` |
-| colorSuccessBorder | 成功色的描边色 | `string` | `#b7eb8f` |
-| colorSuccessBorderHover | 成功色的描边色悬浮态 | `string` | `#95de64` |
-| colorSuccessHover | 成功色的深色悬浮态 | `string` | `#95de64` |
-| colorSuccess | 成功色 | `string` | `#52c41a` |
-| colorSuccessActive | 成功色的深色激活态 | `string` | `#389e0d` |
-| colorSuccessTextHover | 成功色的文本悬浮态 | `string` | `#73d13d` |
-| colorSuccessText | 成功色的文本默认态 | `string` | `#52c41a` |
-| colorSuccessTextActive | 成功色的文本激活态 | `string` | `#389e0d` |
-| colorWarningBg | 警戒色的浅色背景颜色 | `string` | `#fffbe6` |
-| colorWarningBgHover | 警戒色的浅色背景色悬浮态 | `string` | `#fff1b8` |
-| colorWarningBorder | 警戒色的描边色 | `string` | `#ffe58f` |
-| colorWarningBorderHover | 警戒色的描边色悬浮态 | `string` | `#ffd666` |
-| colorWarningHover | 警戒色的深色悬浮态 | `string` | `#ffd666` |
-| colorWarning | 警戒色 | `string` | `#faad14` |
-| colorWarningActive | 警戒色的深色激活态 | `string` | `#d48806` |
-| colorWarningTextHover | 警戒色的文本悬浮态 | `string` | `#ffc53d` |
-| colorWarningText | 警戒色的文本默认态 | `string` | `#faad14` |
-| colorWarningTextActive | 警戒色的文本激活态 | `string` | `#d48806` |
-| colorErrorBg | 错误色的浅色背景颜色 | `string` | `#fff1f0` |
-| colorErrorBgHover | 错误色的浅色背景色悬浮态 | `string` | `#ffccc7` |
-| colorErrorBorder | 错误色的描边色 | `string` | `#ffa39e` |
-| colorErrorBorderHover | 错误色的描边色悬浮态 | `string` | `#ff7875` |
-| colorErrorHover | 错误色的深色悬浮态 | `string` | `#ff7875` |
-| colorError | 错误色 | `string` | `#ff4d4f` |
-| colorErrorActive | 错误色的深色激活态 | `string` | `#cf1322` |
-| colorErrorTextHover | 错误色的文本悬浮态 | `string` | `#ff4d4f` |
-| colorErrorText | 错误色的文本默认态 | `string` | `#f5222d` |
-| colorErrorTextActive | 错误色的文本激活态 | `string` | `#cf1322` |
-| colorInfoBg | 信息色的浅色背景颜色 | `string` | `#e6f4ff` |
-| colorInfoBgHover | 信息色的浅色背景色悬浮态 | `string` | `#bae0ff` |
-| colorInfoBorder | 信息色的描边色 | `string` | `#91caff` |
-| colorInfoBorderHover | 信息色的描边色悬浮态 | `string` | `#69b1ff` |
-| colorInfoHover | 信息色的深色悬浮态 | `string` | `#69b1ff` |
-| colorInfo | 信息色 | `string` | `#e6f4ff` |
-| colorInfoActive | 信息色的深色激活态 | `string` | `#0958d9` |
-| colorInfoTextHover | 信息色的文本悬浮态 | `string` | `#4096ff` |
-| colorInfoText | 信息色的文本默认态 | `string` | `#1677ff` |
-| colorInfoTextActive | 信息色的文本激活态 | `string` | `#0958d9` |
-| colorBgMask | 浮层的背景蒙层颜色 | `string` | `rgba(0, 0, 0, 0.45)` |
-| sizeXXL | - | `number` | `48` |
-| sizeXL | - | `number` | `32` |
-| sizeLG | - | `number` | `24` |
-| sizeMD | - | `number` | `20` |
-| sizeMS | - | `number` | `16` |
-| size | - | `number` | `16` |
-| sizeSM | - | `number` | `12` |
-| sizeXS | - | `number` | `8` |
-| sizeXXS | - | `number` | `4` |
-| lineWidthBold | 较粗的线宽 | `number` | `2` |
-| motionDurationFast | 动画速度快 | `string` | `0.1s` |
-| motionDurationMid | 动画速度中等 | `string` | `0.2s` |
-| motionDurationSlow | 动画速度慢 | `string` | `0.3s` |
-| borderRadiusXS | 更小的圆角 | `number` | `2` |
-| borderRadiusSM | 较小的圆角 | `number` | `4` |
-| borderRadiusLG | 较大的圆角 | `number` | `8` |
-| borderRadiusOuter | 向外的圆角（常用于箭头与其他元素相接处） | `number` | `4` |
-| controlHeightXS | - | `number` | `24` |
-| controlHeightSM | - | `number` | `16` |
-| controlHeightLG | - | `number` | `40` |
+<TokenTable type="map"></TokenTable>
 
 ### AliasToken
 
 > 继承所有 SeedToken 和 MapToken 的 Property
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| colorFillContent | - | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorFillContentHover | - | `string` | `rgba(0, 0, 0, 0.12)` |
-| colorFillAlter | - | `string` | `rgba(0, 0, 0, 0.02)` |
-| colorBgContainerDisabled | - | `string` | `rgba(0, 0, 0, 0.04)` |
-| colorBorderBg | - | `string` | `#ffffff` |
-| colorSplit | - | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorTextPlaceholder | - | `string` | `rgba(0, 0, 0, 0.25)` |
-| colorTextDisabled | - | `string` | `rgba(0, 0, 0, 0.25)` |
-| colorTextHeading | - | `string` | `rgba(0, 0, 0, 0.85)` |
-| colorTextLabel | - | `string` | `rgba(0, 0, 0, 0.65)` |
-| colorTextDescription | - | `string` | `rgba(0, 0, 0, 0.45)` |
-| colorBgTextHover | - | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorBgTextActive | - | `string` | `rgba(0, 0, 0, 0.15)` |
-| colorIcon | - | `string` | `rgba(0, 0, 0, 0.45)` |
-| colorIconHover | - | `string` | `rgba(0, 0, 0, 0.88)` |
-| colorLink | - | `string` | `#1677ff` |
-| colorLinkHover | - | `string` | `#69b1ff` |
-| colorLinkActive | - | `string` | `#0958d9` |
-| colorHighlight | - | `string` | `#ff4d4f` |
-| controlOutline | - | `string` | `rgba(5, 145, 255, 0.1)` |
-| colorWarningOutline | - | `string` | `rgba(255, 215, 5, 0.1)` |
-| colorErrorOutline | - | `string` | `rgba(255, 22, 5, 0.06)` |
-| fontSizeSM | - | `number` | `12` |
-| fontSize | - | `number` | `14` |
-| fontSizeLG | - | `number` | `16` |
-| fontSizeXL | - | `number` | `20` |
-| fontSizeIcon | - | `number` | `12` |
-| fontSizeHeading1 | - | `number` | `38` |
-| fontSizeHeading2 | - | `number` | `30` |
-| fontSizeHeading3 | - | `number` | `24` |
-| fontSizeHeading4 | - | `number` | `20` |
-| fontSizeHeading5 | - | `number` | `16` |
-| fontWeightStrong | - | `number` | `600` |
-| lineHeight | - | `number` | `1.5714` |
-| lineHeightLG | - | `number` | `1.5` |
-| lineHeightSM | - | `number` | `1.6667` |
-| lineHeightHeading1 | - | `number` | `1.2105` |
-| lineHeightHeading2 | - | `number` | `1.2667` |
-| lineHeightHeading3 | - | `number` | `1.3333` |
-| lineHeightHeading4 | - | `number` | `1.4` |
-| lineHeightHeading5 | - | `number` | `1.5` |
-| controlLineWidth | - | `number` | `1` |
-| controlLineType | - | `string` | `solid` |
-| controlOutlineWidth | - | `number` | `8` |
-| controlItemBgHover | - | `string` | `rgba(0, 0, 0, 0.04)` |
-| controlItemBgActive | - | `string` | `#e6f4ff` |
-| controlItemBgActiveHover | - | `string` | `#bae0ff` |
-| controlInteractiveSize | - | `number` | `16` |
-| controlItemBgActiveDisabled | - | `string` | `rgba(0, 0, 0, 0.15)` |
-| controlTmpOutline | - | `string` | `rgba(0, 0, 0, 0.02)` |
-| opacityLoading | - | `number` | `0.65` |
-| padding | - | `number` | `16` |
-| paddingSM | - | `number` | `12` |
-| paddingXS | - | `number` | `8` |
-| paddingXXS | - | `number` | `4` |
-| paddingLG | - | `number` | `24` |
-| paddingXL | - | `number` | `32` |
-| paddingTmp | - | `number` | `20` |
-| margin | - | `number` | `16` |
-| marginSM | - | `number` | `12` |
-| marginXS | - | `number` | `8` |
-| marginXXS | - | `number` | `4` |
-| marginLG | - | `number` | `24` |
-| marginXL | - | `number` | `32` |
-| marginXXL | - | `number` | `48` |
-| boxShadow | - | `string` | `0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)` |
-| boxShadowSecondary | - | `string` | `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` |
-| linkDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
-| linkHoverDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
-| linkFocusDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
-| controlPaddingHorizontal | - | `number` | `12` |
-| controlPaddingHorizontalSM | - | `number` | `8` |
-| screenXS | - | `number` | `480` |
-| screenXSMin | - | `number` | `480` |
-| screenXSMax | - | `number` | `479` |
-| screenSM | - | `number` | `576` |
-| screenSMMin | - | `number` | `576` |
-| screenSMMax | - | `number` | `575` |
-| screenMD | - | `number` | `768` |
-| screenMDMin | - | `number` | `768` |
-| screenMDMax | - | `number` | `767` |
-| screenLG | - | `number` | `992` |
-| screenLGMin | - | `number` | `992` |
-| screenLGMax | - | `number` | `991` |
-| screenXL | - | `number` | `1200` |
-| screenXLMin | - | `number` | `1200` |
-| screenXLMax | - | `number` | `1199` |
-| screenXXL | - | `number` | `1600` |
-| screenXXLMin | - | `number` | `1599` |
-| screenXXLMax | - | `number` | `1600` |
+<TokenTable type="alias"></TokenTable>
 
 ## How to Debug your Theme
 
diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md
index c9c64d26f1..9bee74cb56 100644
--- a/docs/react/customize-theme.zh-CN.md
+++ b/docs/react/customize-theme.zh-CN.md
@@ -318,228 +318,19 @@ export default () => {
 
 ### SeedToken
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| colorPrimary | 品牌主色 | `string` | `#1677ff` |
-| colorSuccess | 成功色 | `string` | `#52c41a` |
-| colorWarning | 警戒色 | `string` | `#faad14` |
-| colorError | 错误色 | `string` | `#ff4d4f` |
-| colorInfo | 信息色 | `string` | `#1677ff` |
-| colorTextBase | 基础文本色 | `string` | `#000` |
-| colorTextLightSolid | 亮色文本色 | `string` | `#fff` |
-| colorBgBase | 基础背景色 | `string` | `#fff` |
-| fontFamily | 字体 | `string` | `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'` |
-| fontSize | 基础字号 | `number` | `14` |
-| lineWidth | 基础线宽 | `number` | `1` |
-| lineType | 线条样式 | `string` | `solid` |
-| motionUnit | 动画时长变化单位 | `number` | `0.1` |
-| motionBase | 动画基础时长 | `number` | `0` |
-| motionEaseOutCirc | - | `string` | `cubic-bezier(0.08, 0.82, 0.17, 1)` |
-| motionEaseInOutCirc | - | `string` | `cubic-bezier(0.78, 0.14, 0.15, 0.86)` |
-| motionEaseOut | - | `string` | `cubic-bezier(0.215, 0.61, 0.355, 1)` |
-| motionEaseInOut | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
-| motionEaseOutBack | - | `string` | `cubic-bezier(0.12, 0.4, 0.29, 1.46)` |
-| motionEaseInQuint | - | `string` | `cubic-bezier(0.645, 0.045, 0.355, 1)` |
-| motionEaseOutQuint | - | `string` | `cubic-bezier(0.23, 1, 0.32, 1)` |
-| borderRadius | 基础圆角 | `number` | `6` |
-| sizeUnit | 尺寸变化单位 | `number` | `4` |
-| sizeStep | 尺寸基础大小 | `number` | `4` |
-| sizePopupArrow | 组件箭头尺寸 | `number` | `16` |
-| controlHeight | - | `number` | `32` |
-| zIndexBase | 基础 `z-index` | `number` | `0` |
-| zIndexPopupBase | 浮层基础 `z-index` | `number` | `1000` |
-| opacityImage | - | `number` | `1` |
-| wireframe | 线框化 | `boolean` | `false` |
+<TokenTable type="seed"></TokenTable>
 
 ### MapToken
 
 > 继承所有 SeedToken 的属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| colorText | 一级文本色 | `string` | `rgba(0, 0, 0, 0.88)` |
-| colorTextSecondary | 二级文本色 | `string` | `rgba(0, 0, 0, 0.65)` |
-| colorTextTertiary | 三级文本色 | `string` | `rgba(0, 0, 0, 0.45)` |
-| colorTextQuaternary | 四级文本色 | `string` | `rgba(0, 0, 0, 0.25)` |
-| colorFill | 一级填充色 | `string` | `rgba(0, 0, 0, 0.15)` |
-| colorFillSecondary | 二级填充色 | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorFillTertiary | 三级填充色 | `string` | `rgba(0, 0, 0, 0.04)` |
-| colorFillQuaternary | 四级填充色 | `string` | `rgba(0, 0, 0, 0.02)` |
-| colorBgContainer | 组件容器背景色 | `string` | `#ffffff` |
-| colorBgElevated | 浮层容器背景色 | `string` | `#ffffff` |
-| colorBgLayout | 布局背景色 | `string` | `#f5f5f5` |
-| colorBgSpotlight | - | `string` | `rgba(0, 0, 0, 0.85)` |
-| colorBorder | 一级边框色 | `string` | `#d9d9d9` |
-| colorBorderSecondary | 二级边框色 | `string` | `#f0f0f0` |
-| colorSplit | 分割线颜色 | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorPrimaryBg | 主色的浅色背景颜色 | `string` | `#e6f4ff` |
-| colorPrimaryBgHover | 主色的浅色背景色悬浮态 | `string` | `#bae0ff` |
-| colorPrimaryBorder | 主色的描边色 | `string` | `#91caff` |
-| colorPrimaryBorderHover | 主色的描边色悬浮态 | `string` | `#69b1ff` |
-| colorPrimaryHover | 主色的深色悬浮态 | `string` | `#4096ff` |
-| colorPrimary | 品牌主色 | `string` | `#1677ff` |
-| colorPrimaryActive | 主色的深色激活态 | `string` | `#0958d9` |
-| colorPrimaryTextHover | 主色的文本悬浮态 | `string` | `#4096ff` |
-| colorPrimaryText | 主色的文本默认态 | `string` | `#1677ff` |
-| colorPrimaryTextActive | 主色的文本激活态 | `string` | `#0958d9` |
-| colorSuccessBg | 成功色的浅色背景颜色 | `string` | `#f6ffed` |
-| colorSuccessBgHover | 成功色的浅色背景色悬浮态 | `string` | `#d9f7be` |
-| colorSuccessBorder | 成功色的描边色 | `string` | `#b7eb8f` |
-| colorSuccessBorderHover | 成功色的描边色悬浮态 | `string` | `#95de64` |
-| colorSuccessHover | 成功色的深色悬浮态 | `string` | `#95de64` |
-| colorSuccess | 成功色 | `string` | `#52c41a` |
-| colorSuccessActive | 成功色的深色激活态 | `string` | `#389e0d` |
-| colorSuccessTextHover | 成功色的文本悬浮态 | `string` | `#73d13d` |
-| colorSuccessText | 成功色的文本默认态 | `string` | `#52c41a` |
-| colorSuccessTextActive | 成功色的文本激活态 | `string` | `#389e0d` |
-| colorWarningBg | 警戒色的浅色背景颜色 | `string` | `#fffbe6` |
-| colorWarningBgHover | 警戒色的浅色背景色悬浮态 | `string` | `#fff1b8` |
-| colorWarningBorder | 警戒色的描边色 | `string` | `#ffe58f` |
-| colorWarningBorderHover | 警戒色的描边色悬浮态 | `string` | `#ffd666` |
-| colorWarningHover | 警戒色的深色悬浮态 | `string` | `#ffd666` |
-| colorWarning | 警戒色 | `string` | `#faad14` |
-| colorWarningActive | 警戒色的深色激活态 | `string` | `#d48806` |
-| colorWarningTextHover | 警戒色的文本悬浮态 | `string` | `#ffc53d` |
-| colorWarningText | 警戒色的文本默认态 | `string` | `#faad14` |
-| colorWarningTextActive | 警戒色的文本激活态 | `string` | `#d48806` |
-| colorErrorBg | 错误色的浅色背景颜色 | `string` | `#fff1f0` |
-| colorErrorBgHover | 错误色的浅色背景色悬浮态 | `string` | `#ffccc7` |
-| colorErrorBorder | 错误色的描边色 | `string` | `#ffa39e` |
-| colorErrorBorderHover | 错误色的描边色悬浮态 | `string` | `#ff7875` |
-| colorErrorHover | 错误色的深色悬浮态 | `string` | `#ff7875` |
-| colorError | 错误色 | `string` | `#ff4d4f` |
-| colorErrorActive | 错误色的深色激活态 | `string` | `#cf1322` |
-| colorErrorTextHover | 错误色的文本悬浮态 | `string` | `#ff4d4f` |
-| colorErrorText | 错误色的文本默认态 | `string` | `#f5222d` |
-| colorErrorTextActive | 错误色的文本激活态 | `string` | `#cf1322` |
-| colorInfoBg | 信息色的浅色背景颜色 | `string` | `#e6f4ff` |
-| colorInfoBgHover | 信息色的浅色背景色悬浮态 | `string` | `#bae0ff` |
-| colorInfoBorder | 信息色的描边色 | `string` | `#91caff` |
-| colorInfoBorderHover | 信息色的描边色悬浮态 | `string` | `#69b1ff` |
-| colorInfoHover | 信息色的深色悬浮态 | `string` | `#69b1ff` |
-| colorInfo | 信息色 | `string` | `#e6f4ff` |
-| colorInfoActive | 信息色的深色激活态 | `string` | `#0958d9` |
-| colorInfoTextHover | 信息色的文本悬浮态 | `string` | `#4096ff` |
-| colorInfoText | 信息色的文本默认态 | `string` | `#1677ff` |
-| colorInfoTextActive | 信息色的文本激活态 | `string` | `#0958d9` |
-| colorBgMask | 浮层的背景蒙层颜色 | `string` | `rgba(0, 0, 0, 0.45)` |
-| sizeXXL | - | `number` | `48` |
-| sizeXL | - | `number` | `32` |
-| sizeLG | - | `number` | `24` |
-| sizeMD | - | `number` | `20` |
-| sizeMS | - | `number` | `16` |
-| size | - | `number` | `16` |
-| sizeSM | - | `number` | `12` |
-| sizeXS | - | `number` | `8` |
-| sizeXXS | - | `number` | `4` |
-| lineWidthBold | 较粗的线宽 | `number` | `2` |
-| motionDurationFast | 动画速度快 | `string` | `0.1s` |
-| motionDurationMid | 动画速度中等 | `string` | `0.2s` |
-| motionDurationSlow | 动画速度慢 | `string` | `0.3s` |
-| borderRadiusXS | 更小的圆角 | `number` | `2` |
-| borderRadiusSM | 较小的圆角 | `number` | `4` |
-| borderRadiusLG | 较大的圆角 | `number` | `8` |
-| borderRadiusOuter | 向外的圆角（常用于箭头与其他元素相接处） | `number` | `4` |
-| controlHeightXS | - | `number` | `24` |
-| controlHeightSM | - | `number` | `16` |
-| controlHeightLG | - | `number` | `40` |
+<TokenTable type="map"></TokenTable>
 
 ### AliasToken
 
 > 继承所有 SeedToken 和 MapToken 的属性
 
-| 属性 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| colorFillContent | - | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorFillContentHover | - | `string` | `rgba(0, 0, 0, 0.12)` |
-| colorFillAlter | - | `string` | `rgba(0, 0, 0, 0.02)` |
-| colorBgContainerDisabled | - | `string` | `rgba(0, 0, 0, 0.04)` |
-| colorBorderBg | - | `string` | `#ffffff` |
-| colorSplit | - | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorTextPlaceholder | - | `string` | `rgba(0, 0, 0, 0.25)` |
-| colorTextDisabled | - | `string` | `rgba(0, 0, 0, 0.25)` |
-| colorTextHeading | - | `string` | `rgba(0, 0, 0, 0.85)` |
-| colorTextLabel | - | `string` | `rgba(0, 0, 0, 0.65)` |
-| colorTextDescription | - | `string` | `rgba(0, 0, 0, 0.45)` |
-| colorBgTextHover | - | `string` | `rgba(0, 0, 0, 0.06)` |
-| colorBgTextActive | - | `string` | `rgba(0, 0, 0, 0.15)` |
-| colorIcon | - | `string` | `rgba(0, 0, 0, 0.45)` |
-| colorIconHover | - | `string` | `rgba(0, 0, 0, 0.88)` |
-| colorLink | - | `string` | `#1677ff` |
-| colorLinkHover | - | `string` | `#69b1ff` |
-| colorLinkActive | - | `string` | `#0958d9` |
-| colorHighlight | - | `string` | `#ff4d4f` |
-| controlOutline | - | `string` | `rgba(5, 145, 255, 0.1)` |
-| colorWarningOutline | - | `string` | `rgba(255, 215, 5, 0.1)` |
-| colorErrorOutline | - | `string` | `rgba(255, 22, 5, 0.06)` |
-| fontSizeSM | - | `number` | `12` |
-| fontSize | - | `number` | `14` |
-| fontSizeLG | - | `number` | `16` |
-| fontSizeXL | - | `number` | `20` |
-| fontSizeIcon | - | `number` | `12` |
-| fontSizeHeading1 | - | `number` | `38` |
-| fontSizeHeading2 | - | `number` | `30` |
-| fontSizeHeading3 | - | `number` | `24` |
-| fontSizeHeading4 | - | `number` | `20` |
-| fontSizeHeading5 | - | `number` | `16` |
-| fontWeightStrong | - | `number` | `600` |
-| lineHeight | - | `number` | `1.5714` |
-| lineHeightLG | - | `number` | `1.5` |
-| lineHeightSM | - | `number` | `1.6667` |
-| lineHeightHeading1 | - | `number` | `1.2105` |
-| lineHeightHeading2 | - | `number` | `1.2667` |
-| lineHeightHeading3 | - | `number` | `1.3333` |
-| lineHeightHeading4 | - | `number` | `1.4` |
-| lineHeightHeading5 | - | `number` | `1.5` |
-| controlLineWidth | - | `number` | `1` |
-| controlLineType | - | `string` | `solid` |
-| controlOutlineWidth | - | `number` | `8` |
-| controlItemBgHover | - | `string` | `rgba(0, 0, 0, 0.04)` |
-| controlItemBgActive | - | `string` | `#e6f4ff` |
-| controlItemBgActiveHover | - | `string` | `#bae0ff` |
-| controlInteractiveSize | - | `number` | `16` |
-| controlItemBgActiveDisabled | - | `string` | `rgba(0, 0, 0, 0.15)` |
-| controlTmpOutline | - | `string` | `rgba(0, 0, 0, 0.02)` |
-| opacityLoading | - | `number` | `0.65` |
-| padding | - | `number` | `16` |
-| paddingSM | - | `number` | `12` |
-| paddingXS | - | `number` | `8` |
-| paddingXXS | - | `number` | `4` |
-| paddingLG | - | `number` | `24` |
-| paddingXL | - | `number` | `32` |
-| paddingTmp | - | `number` | `20` |
-| margin | - | `number` | `16` |
-| marginSM | - | `number` | `12` |
-| marginXS | - | `number` | `8` |
-| marginXXS | - | `number` | `4` |
-| marginLG | - | `number` | `24` |
-| marginXL | - | `number` | `32` |
-| marginXXL | - | `number` | `48` |
-| boxShadow | - | `string` | `0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)` |
-| boxShadowSecondary | - | `string` | `0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05)` |
-| linkDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
-| linkHoverDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
-| linkFocusDecoration | - | `React.CSSProperties['textDecoration']` | `none` |
-| controlPaddingHorizontal | - | `number` | `12` |
-| controlPaddingHorizontalSM | - | `number` | `8` |
-| screenXS | - | `number` | `480` |
-| screenXSMin | - | `number` | `480` |
-| screenXSMax | - | `number` | `479` |
-| screenSM | - | `number` | `576` |
-| screenSMMin | - | `number` | `576` |
-| screenSMMax | - | `number` | `575` |
-| screenMD | - | `number` | `768` |
-| screenMDMin | - | `number` | `768` |
-| screenMDMax | - | `number` | `767` |
-| screenLG | - | `number` | `992` |
-| screenLGMin | - | `number` | `992` |
-| screenLGMax | - | `number` | `991` |
-| screenXL | - | `number` | `1200` |
-| screenXLMin | - | `number` | `1200` |
-| screenXLMax | - | `number` | `1199` |
-| screenXXL | - | `number` | `1600` |
-| screenXXLMin | - | `number` | `1599` |
-| screenXXLMax | - | `number` | `1600` |
+<TokenTable type="alias"></TokenTable>
 
 ## 调试主题
 
diff --git a/package.json b/package.json
index 56f8f0ab8a..76f5d5fa03 100644
--- a/package.json
+++ b/package.json
@@ -55,11 +55,12 @@
     "clean": "antd-tools run clean && rm -rf es lib coverage dist report.html",
     "clean-lockfiles": "rm -rf package-lock.json yarn.lock",
     "collect-token-statistic": "ts-node --project tsconfig.node.json scripts/collect-token-statistic.js",
-    "prestart": "npm run version && npm run collect-token-statistic",
-    "precompile": "npm run version && npm run collect-token-statistic",
+    "token-meta": "node scripts/generate-token-meta.js",
+    "prestart": "npm run version & npm run collect-token-statistic & npm run token-meta",
+    "precompile": "npm run version & npm run collect-token-statistic & npm run token-meta",
     "pretest": "npm run version",
     "predist": "npm run version",
-    "presite": "npm run version && npm run collect-token-statistic",
+    "presite": "npm run version & npm run collect-token-statistic & npm run token-meta",
     "compile": "npm run clean && antd-tools run compile",
     "changelog": "node ./scripts/print-changelog",
     "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test",
@@ -78,7 +79,7 @@
     "lint:script": "eslint . --ext .js,.jsx,.ts,.tsx",
     "pre-publish": "npm run test-all -- --skip-build",
     "prettier": "prettier -c --write **/*",
-    "pub": "npm run version && npm run collect-token-statistic && antd-tools run pub",
+    "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",
     "postpublish": "node ./scripts/post-script.js",
@@ -299,6 +300,7 @@
     "sylvanas": "^0.6.1",
     "theme-switcher": "^1.0.2",
     "ts-node": "^10.8.2",
+    "typedoc": "^0.23.21",
     "typescript": "~4.9.3",
     "webpack-bundle-analyzer": "^4.1.0",
     "xhr-mock": "^2.4.1",
diff --git a/scripts/collect-token-statistic.js b/scripts/collect-token-statistic.js
index c76dc962d3..0628beb382 100644
--- a/scripts/collect-token-statistic.js
+++ b/scripts/collect-token-statistic.js
@@ -58,10 +58,9 @@ styleFiles.forEach((file) => {
   );
 });
 
-(async () => {
-  const tokenPath = `${process.cwd()}/components/version/token.tsx`;
-  const content = `export default ${JSON.stringify(statistic, null, 2)}`;
-  await fs.writeFile(tokenPath, content, 'utf8');
+(() => {
+  const tokenPath = `${process.cwd()}/components/version/token.json`;
+  fs.writeJsonSync(tokenPath, statistic, 'utf8');
 
   console.log(chalk.green(`✅  Collected token statistics successfully, check it in`), tokenPath);
 })();
diff --git a/scripts/generate-token-meta.js b/scripts/generate-token-meta.js
new file mode 100644
index 0000000000..cf3eb2cd17
--- /dev/null
+++ b/scripts/generate-token-meta.js
@@ -0,0 +1,71 @@
+const TypeDoc = require('typedoc');
+const fs = require('fs-extra');
+
+const getTokenList = (list, source) =>
+  list
+    .filter((item) => !item.comment?.blockTags.some((tag) => tag.tag === '@internal'))
+    .map((item) => ({
+      source,
+      name: item.name,
+      type: item.type.toString(),
+      desc: item.comment?.blockTags?.find((tag) => tag.tag === '@desc')?.content[0]?.text || '-',
+      descEn:
+        item.comment?.blockTags?.find((tag) => tag.tag === '@descEn')?.content[0]?.text || '-',
+    }));
+
+function main() {
+  const app = new TypeDoc.Application();
+
+  // If you want TypeDoc to load tsconfig.json / typedoc.json files
+  app.options.addReader(new TypeDoc.TSConfigReader());
+  app.options.addReader(new TypeDoc.TypeDocReader());
+
+  app.bootstrap({
+    // typedoc options here
+    entryPoints: ['components/theme/interface.ts'],
+  });
+
+  const project = app.convert();
+
+  if (project) {
+    // Project may not have converted correctly
+    const output = 'components/version/token-meta.json';
+    const tokenMeta = {};
+    let presetColors = [];
+    project.children.forEach((type) => {
+      if (type.name === 'SeedToken') {
+        tokenMeta.seed = getTokenList(type.children, 'seed');
+      } else if (type.name === 'MapToken') {
+        tokenMeta.map = getTokenList(type.children, 'map');
+      } else if (type.name === 'AliasToken') {
+        tokenMeta.alias = getTokenList(type.children, 'alias');
+      } else if (type.name === 'PresetColors') {
+        presetColors = type.type.target.elements.map((item) => item.value);
+      }
+    });
+
+    // Exclude preset colors
+    tokenMeta.seed = tokenMeta.seed.filter(
+      (item) => !presetColors.some((color) => item.name.startsWith(color)),
+    );
+    tokenMeta.map = tokenMeta.map.filter(
+      (item) => !presetColors.some((color) => item.name.startsWith(color)),
+    );
+    tokenMeta.alias = tokenMeta.alias.filter(
+      (item) => !presetColors.some((color) => item.name.startsWith(color)),
+    );
+
+    tokenMeta.alias = tokenMeta.alias.filter(
+      (item) => !tokenMeta.map.some((mapItem) => mapItem.name === item.name),
+    );
+    tokenMeta.map = tokenMeta.map.filter(
+      (item) => !tokenMeta.seed.some((seedItem) => seedItem.name === item.name),
+    );
+
+    fs.writeJsonSync(output, tokenMeta, 'utf8');
+    // eslint-disable-next-line no-console
+    console.log(`✅  Token Meta has been written to ${output}`);
+  }
+}
+
+main();