diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 0000000..43de7ba
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Launch Chrome against localhost",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/dist"
+    }
+  ]
+}
diff --git a/package.json b/package.json
index 122c894..c518d1b 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,9 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "start": "cd packages/demo && npm run start"
+    "start": "npm run build:props && npm run build:catalog && cd packages/demo && npm run start",
+    "build:props": "node ./scripts/build_props.mjs",
+    "build:catalog": "node ./scripts/build_catalog.mjs"
   },
   "workspaces": [
     "packages/*"
@@ -12,10 +14,15 @@
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "eslint-config-psfe": "1.0.5",
-    "husky": "^8.0.2"
+    "husky": "^8.0.2",
+    "@babel/core": "^7.19.1",
+    "@babel/helper-plugin-utils": "^7.20.2",
+    "@babel/parser": "^7.21.2",
+    "babel-plugin-jsx": "^1.2.0",
+    "es-dirname": "^0.1.0"
   },
   "dependencies": {
     "core-js": "^3.25.1",
     "gsap": "^3.12.2"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/demo/index.scss b/packages/demo/index.scss
index f866dbd..5796069 100644
--- a/packages/demo/index.scss
+++ b/packages/demo/index.scss
@@ -22,5 +22,29 @@ html,
   height: 0;
 }
 
+.pivot-props-table {
+  border-collapse: collapse;
+  width: 100%;
+  font-family: Arial, sans-serif;
+  font-size: 18px;
+  th,
+  td {
+    padding: 18px 0;
+    text-align: center;
+  }
+  th {
+    background-color: var(--semi-color-bg-0);
+    font-weight: bold;
+    width: auto;
+    border: 2px solid var(--semi-color-border);
+  }
 
+  td {
+    width: auto;
+    border: 2px solid var(--semi-color-border);
+  }
 
+  tr {
+    background-color: var(--semi-color-bg-0);
+  }
+}
diff --git a/packages/demo/loaders/index.js b/packages/demo/loaders/index.js
index b691249..bc351f7 100644
--- a/packages/demo/loaders/index.js
+++ b/packages/demo/loaders/index.js
@@ -38,7 +38,7 @@ module.exports = function loader(source) {
   const CodeBlockReg = /<CodeBlock(.*)>([\n\r\s\S]*?)<\/CodeBlock>/g;
   const H1Reg = /# (\w+)/;
   // eslint-disable-next-line prefer-destructuring
-  const component = H1Reg.exec(sourceCode)[1];
+  const component = H1Reg.exec(sourceCode) && H1Reg.exec(sourceCode)[1];
   let m;
   let importComponentsList = '';
   while ((m = CodeBlockReg.exec(newSource))) {
diff --git a/packages/demo/src/components/Button/.catalog.ts b/packages/demo/src/components/Button/.catalog.ts
new file mode 100644
index 0000000..87f83aa
--- /dev/null
+++ b/packages/demo/src/components/Button/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"普通样式","h3":[]},{"h2":"可禁用样式","h3":[]},{"h2":"按钮尺寸大小","h3":[]},{"h2":"自定义","h3":[]},{"h2":"点击事件","h3":[]},{"h2":"loading加载中和节流、防抖","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Button/index.mdx b/packages/demo/src/components/Button/index.mdx
index d909f7d..b52077d 100644
--- a/packages/demo/src/components/Button/index.mdx
+++ b/packages/demo/src/components/Button/index.mdx
@@ -1,6 +1,8 @@
+import Props from './props.mdx';
+
 # Button
 
-<div className="title">普通样式</div>
+## 普通样式
 
 <CodeBlock line={'5-7'}>
   <Button type="primary">按钮</Button>
@@ -8,7 +10,7 @@
   <Button type="text">按钮</Button>
 </CodeBlock>
 
-<div className="title">按钮禁用</div>
+## 可禁用样式
 
 <CodeBlock line={'5-7'}>
   <Button type="primary" disabled>
@@ -20,14 +22,15 @@
   </Button>
 </CodeBlock>
 
-<div className="title">按钮尺寸</div>
+## 按钮尺寸大小
+
 <CodeBlock line={'5-7'}>
   <Button size="small">small</Button>
   <Button size="middle">middle</Button>
   <Button size="large">large</Button>
 </CodeBlock>
 
-<div className="title">自定义颜色</div>
+## 自定义 css 颜色（token）
 
 <CodeBlock line={'5-7'}>
   <Button
@@ -39,12 +42,16 @@
   </Button>
 </CodeBlock>
 
-<div className="title">自定义点击事件</div>
+## 点击事件
+
 <CodeBlock line={'5-7'}>
   <OnClick />
 </CodeBlock>
 
-<div className="title">加载中和节流防抖</div>
+## loading加载中和节流、防抖
+
 <CodeBlock line={'5-1009'}>
   <Loading />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Button/props.mdx b/packages/demo/src/components/Button/props.mdx
new file mode 100644
index 0000000..5d0fcec
--- /dev/null
+++ b/packages/demo/src/components/Button/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"按钮默认插槽","default":"undefined"},{"key":"style","value":": React.CSSProperties & ButtonCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"onClick","value":": React.MouseEventHandler<HTMLButtonElement>","optional":true,"version":"1.0.0","description":"点击事件","default":"undefined"},{"key":"type","value":": 'primary' | 'default' | 'text' | 'link'","optional":true,"version":"1.0.0","description":"按钮类型","default":"'default'"},{"key":"size","value":": 'small' | 'middle' | 'large'","optional":true,"version":"1.0.0","description":"按钮是否禁用","default":"'middle'"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"按钮尺寸","default":"false"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"按钮是否正在加载状态","default":"false"},{"key":"debounce","value":": number | {\n  delay: number;\n  immediate: boolean;\n}","optional":true,"version":"1.0.0","description":"按钮是否防抖，可选择是否立即执行","default":"0"},{"key":"delay","value":": number"},{"key":"immediate","value":": boolean"},{"key":"throttle","value":": number | {\n  delay: number;\n  immediate: boolean;\n}","optional":true,"version":"1.0.0","description":"按钮是否节流","default":"false"},{"key":"delay","value":": number"},{"key":"immediate","value":": boolean"}]
+
## API 列表
+
<Table name='button' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Card/.catalog.ts b/packages/demo/src/components/Card/.catalog.ts
new file mode 100644
index 0000000..e14cd9a
--- /dev/null
+++ b/packages/demo/src/components/Card/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"默认样式","h3":[]},{"h2":"带头像","h3":[]},{"h2":"栅格","h3":[]},{"h2":"收起与展开长度","h3":[]},{"h2":"自定义背景色和宽度","h3":[]},{"h2":"加载中","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Card/index.mdx b/packages/demo/src/components/Card/index.mdx
index df78168..75d0b3d 100644
--- a/packages/demo/src/components/Card/index.mdx
+++ b/packages/demo/src/components/Card/index.mdx
@@ -1,9 +1,11 @@
 import Actions from './svg/index.tsx';
 import More from './svg/tab.tsx';
+import Props from './props.mdx';
 
 # Card
 
-<div className="title">默认样式</div>
+## 默认样式
+
 <CodeBlock line={'5-7'}>
   <Card title={<div>测试</div>} time="19:20 2020-09-15" extra={<More />} actions={<Actions></Actions>}>
     <div>
@@ -11,7 +13,7 @@ import More from './svg/tab.tsx';
     </div>
   </Card>
 </CodeBlock>
-<div className="title">带头像</div>
+## 带头像
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -30,7 +32,8 @@ import More from './svg/tab.tsx';
   </Card>
 </CodeBlock>
 
-<div className="title">栅格</div>
+## 栅格
+
 <CodeBlock line={'5-7'}>
   <Card
     avatar={<img src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" width="35" height="35" />}
@@ -48,7 +51,7 @@ import More from './svg/tab.tsx';
     <div>足球</div>
   </Card>
 </CodeBlock>
-<div className="title">收起与展开长度</div>
+## 收起与展开长度
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -83,7 +86,7 @@ import More from './svg/tab.tsx';
     梁老师可不可以资助我一点钱钱呢啊？不多不多的，球球了！ 我好想买Airpods但是没有钱，梁老师可
   </Card>
 </CodeBlock>
-<div className="title">自定义背景色和宽度</div>
+## 自定义背景色和宽度
 <CodeBlock line={'5-7'}>
   <Card
     title={<div>多余文本</div>}
@@ -101,7 +104,10 @@ import More from './svg/tab.tsx';
   </Card>
 </CodeBlock>
 
-<div className="title">加载中</div>
+## 加载中
+
 <CodeBlock line={'5-7'}>
   <Loading />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Card/props.mdx b/packages/demo/src/components/Card/props.mdx
new file mode 100644
index 0000000..fb995bf
--- /dev/null
+++ b/packages/demo/src/components/Card/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties & CardCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"size","value":": 'small' | 'normal'","optional":true,"version":"1.0.0","description":"自定义大小","default":"undefined"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"卡片内容是否加载","default":"normal"},{"key":"title","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片标题","default":"undefined"},{"key":"actions","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片底部的操作组","default":"undefined"},{"key":"bordered","value":": boolean","optional":true,"version":"1.0.0","description":"是否有边框","default":"true"},{"key":"extra","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片右上角标签","default":"undefined"},{"key":"time","value":": string","optional":true,"version":"1.0.0","description":"时间标签","default":"undefined"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"内容","default":"undefined"},{"key":"cover","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"封面","default":"undefined"},{"key":"boradius","value":": boolean","optional":true,"version":"1.0.0","description":"边框角","default":"true"},{"key":"Grid","value":": boolean","optional":true,"version":"1.0.0","description":"栅格","default":"false"},{"key":"avatar","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"头像","default":"true"}]
+
## API 列表
+
<Table name='card' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Draggable/.catalog.ts b/packages/demo/src/components/Draggable/.catalog.ts
new file mode 100644
index 0000000..a176f42
--- /dev/null
+++ b/packages/demo/src/components/Draggable/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"基本示例","h3":[]},{"h2":"拖拽过程中的元素","h3":[]},{"h2":"设置可拖拽区域","h3":[]},{"h2":"拖放案例","h3":[]},{"h2":"拖拽排序","h3":["垂直方向拖拽","水平方向拖拽","网格拖拽","多容器拖拽（垂直）"]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Draggable/index.mdx b/packages/demo/src/components/Draggable/index.mdx
index 1192e45..25c75b3 100644
--- a/packages/demo/src/components/Draggable/index.mdx
+++ b/packages/demo/src/components/Draggable/index.mdx
@@ -1,3 +1,5 @@
+import Props from './props.mdx';
+
 # Draggable 拖拽
 
 一个轻量级，高性能的用于 React 的可扩展拖放组件。
@@ -42,7 +44,7 @@
   <Droppable />
 </CodeBlock>
 
-## 🌟 拖拽排序
+## 拖拽排序
 
 拖拽排序（Drag-and-drop sorting）是一种广泛实用的交互设计手法。支持用户进行垂直、水平以及网格布局的拖拽排序。
 
@@ -71,3 +73,5 @@
 <CodeBlock style={{ flexWrap: 'nowrap' }}>
   <MultipleContainer />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Draggable/props.mdx b/packages/demo/src/components/Draggable/props.mdx
new file mode 100644
index 0000000..cd634ef
--- /dev/null
+++ b/packages/demo/src/components/Draggable/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"列表子项默认插槽","default":"undefined"},{"key":"index","value":": number","optional":true,"version":"1.0.0","description":"列表子项索引值","default":"undefined"},{"key":"top","value":": number","optional":true,"version":"1.0.0","description":"拖动元素相对定位的top偏移值","default":"undefined"},{"key":"left","value":": number","optional":true,"version":"1.0.0","description":"拖动元素相对定位的left偏移值","default":"undefined"}]
+
## API 列表
+
<Table name='draggable' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Icon/.catalog.ts b/packages/demo/src/components/Icon/.catalog.ts
new file mode 100644
index 0000000..756afe3
--- /dev/null
+++ b/packages/demo/src/components/Icon/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"主题样式","h3":[]},{"h2":"定义颜色和透明度","h3":[]},{"h2":"尺寸","h3":[]},{"h2":"自定义样式与旋转","h3":[]},{"h2":"CDN引入","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Icon/index.mdx b/packages/demo/src/components/Icon/index.mdx
index 3fa4d06..a6d447e 100644
--- a/packages/demo/src/components/Icon/index.mdx
+++ b/packages/demo/src/components/Icon/index.mdx
@@ -1,31 +1,35 @@
+import Props from './props.mdx';
+
 # Icon
 
-<div className="title">基本用法</div>
+## 基本用法
 <CodeBlock line={'5-7'}>
-  <IconList/>
+  <IconList />
 </CodeBlock>
 
-<div className="title">主题样式</div>
+## 主题样式
 <CodeBlock line={'5-7'}>
-  <Theme/>
+  <Theme />
 </CodeBlock>
 
-<div className="title">定义颜色和透明度</div>
+## 定义颜色和透明度
 <CodeBlock line={'5-7'}>
-  <Color/>
+  <Color />
 </CodeBlock>
 
-<div className="title">尺寸</div>
+## 尺寸
 <CodeBlock line={'5-7'}>
-  <Size/>
+  <Size />
 </CodeBlock>
 
-<div className="title">自定义样式与旋转</div>
+## 自定义样式与旋转
 <CodeBlock line={'5-7'}>
-  <Style/>
+  <Style />
 </CodeBlock>
 
-<div className="title">CDN引入</div>
+## CDN引入
 <CodeBlock line={'5-7'}>
-  <CDN/>
-</CodeBlock>
\ No newline at end of file
+  <CDN />
+</CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Icon/props.mdx b/packages/demo/src/components/Icon/props.mdx
new file mode 100644
index 0000000..2c224a9
--- /dev/null
+++ b/packages/demo/src/components/Icon/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"theme","value":": 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger'","optional":true,"version":"1.0.0","description":"图标类型","default":"'primary'"},{"key":"size","value":": string","optional":true,"version":"1.0.0","description":"图标尺寸","default":"'16'"},{"key":"color","value":": string","optional":true,"version":"1.0.0","description":"图标颜色","default":"'#212529'"},{"key":"icon","value":": string","optional":true,"version":"1.0.0","description":"图标来源","default":"undefined"},{"key":"ossIcon","value":": string","optional":true,"version":"1.0.0","description":"Pivot","default":"undefined"},{"key":"url","value":": string","optional":true,"version":"1.0.0","description":"自定义导入的icon链接","default":"undefined"},{"key":"rotate","value":": boolean","optional":true,"version":"1.0.0","description":"是否旋转","default":"false"}]
+
## API 列表
+
<Table name='icon' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Input/.catalog.ts b/packages/demo/src/components/Input/.catalog.ts
new file mode 100644
index 0000000..9ef28cd
--- /dev/null
+++ b/packages/demo/src/components/Input/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"输入框尺寸","h3":[]},{"h2":"固定前缀和后缀","h3":[]},{"h2":"密码框","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Input/index.mdx b/packages/demo/src/components/Input/index.mdx
index 151e6d7..f36349e 100644
--- a/packages/demo/src/components/Input/index.mdx
+++ b/packages/demo/src/components/Input/index.mdx
@@ -1,21 +1,25 @@
+import Props from './props.mdx';
+
 # Input
 
-<div className="title">基本用法</div>
+## 基本用法
 <CodeBlock line={'5-7'}>
-  <Base/>
+  <Base />
 </CodeBlock>
 
-<div className="title">输入框尺寸</div>
+## 输入框尺寸
 <CodeBlock line={'5-7'}>
-  <Size/>
+  <Size />
 </CodeBlock>
 
-<div className="title">固定前缀和后缀</div>
+## 固定前缀和后缀
 <CodeBlock line={'5-7'}>
-  <Prepend/>
+  <Prepend />
 </CodeBlock>
 
-<div className="title">密码框</div>
+## 密码框
 <CodeBlock line={'5-7'}>
-  <Password/>
+  <Password />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Input/props.mdx b/packages/demo/src/components/Input/props.mdx
new file mode 100644
index 0000000..e3e0490
--- /dev/null
+++ b/packages/demo/src/components/Input/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"是否禁用","default":"false"},{"key":"size","value":": InputSize","optional":true,"version":"1.0.0","description":"图标尺寸","default":"'16'"},{"key":"onChange","value":": (e: ChangeEvent<HTMLInputElement>) => void","optional":true,"version":"1.0.0","description":"input内容修改时的回调","default":"undefined"},{"key":"icon","value":": string | React.ReactNode","optional":true,"version":"1.0.0","description":"右侧悬浮图标","default":"undefined"},{"key":"prepend","value":": string","optional":true,"version":"1.0.0","description":"固定前缀","default":"undefined"},{"key":"append","value":": string","optional":true,"version":"1.0.0","description":"固定后缀","default":"undefined"},{"key":"onClick","value":": any","optional":true,"version":"1.0.0","description":"点击输入框的回调","default":"undefined"},{"key":"iconOnClick","value":": any","optional":true,"version":"1.0.0","description":"点击图标的回调","default":"undefined"},{"key":"value","value":": string","optional":true,"version":"1.0.0","description":"输入框的值，单向绑定","default":"undefined"}]
+
## API 列表
+
<Table name='input' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Popover/.catalog.ts b/packages/demo/src/components/Popover/.catalog.ts
new file mode 100644
index 0000000..09fa0c7
--- /dev/null
+++ b/packages/demo/src/components/Popover/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"设置触发popover的条件","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Popover/index.mdx b/packages/demo/src/components/Popover/index.mdx
index 925fdd2..b261bc1 100644
--- a/packages/demo/src/components/Popover/index.mdx
+++ b/packages/demo/src/components/Popover/index.mdx
@@ -1,10 +1,14 @@
+import Props from './props.mdx';
+
 # Popover
 
-<div className="title">基本用法</div>
+## 基本用法
 <CodeBlock line={'5-7'}>
-  <Base/>
+  <Base />
 </CodeBlock>
-<div className="title">设置触发popover的条件</div>
+## 设置触发popover的条件
 <CodeBlock line={'5-7'}>
-  <Trigger/>
+  <Trigger />
 </CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Popover/props.mdx b/packages/demo/src/components/Popover/props.mdx
new file mode 100644
index 0000000..b668a85
--- /dev/null
+++ b/packages/demo/src/components/Popover/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"children","value":": React.ReactElement","version":"1.0.0","description":"触发popover的内容","default":"undefined"},{"key":"content","value":": string | React.ReactNode","optional":true,"version":"1.0.0","description":"popover的内容","default":"undefined"},{"key":"placement","value":": PlaceType","optional":true,"version":"1.0.0","description":"设置popover的位置","default":"undefined"},{"key":"popoverClass","value":": string","optional":true,"version":"1.0.0","description":"为popover添加类名","default":"undefined"},{"key":"disabled","value":": boolean","optional":true,"version":"1.0.0","description":"popover是否可用","default":"false"},{"key":"arrowShow","value":": boolean","optional":true,"version":"1.0.0","description":"是否显示箭头","default":"true"},{"key":"triggerType","value":": 'hover' | 'click'","optional":true,"version":"1.0.0","description":"触发popover的方式","default":"'hover'"}]
+
## API 列表
+
<Table name='popover' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Skeleton/.catalog.ts b/packages/demo/src/components/Skeleton/.catalog.ts
new file mode 100644
index 0000000..0337be6
--- /dev/null
+++ b/packages/demo/src/components/Skeleton/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"普通样式","h3":[]},{"h2":"带标题","h3":[]},{"h2":"带头像","h3":[]},{"h2":"块状","h3":[]},{"h2":"静态","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Skeleton/index.mdx b/packages/demo/src/components/Skeleton/index.mdx
index bc0b6fe..eea062b 100644
--- a/packages/demo/src/components/Skeleton/index.mdx
+++ b/packages/demo/src/components/Skeleton/index.mdx
@@ -1,22 +1,26 @@
+import Props from './props.mdx';
+
 # skeleton
 
-<div className="title">普通样式</div>
+## 普通样式
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px"}}></Skeleton>
+  <Skeleton style={{ width: '380px' }}></Skeleton>
 </CodeBlock>
-<div className="title">带标题</div>
+## 带标题
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px"}} title={true}></Skeleton>
+  <Skeleton style={{ width: '380px' }} title={true}></Skeleton>
 </CodeBlock>
-<div className="title">带头像</div>
+## 带头像
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px"}} avatar={true}></Skeleton>
+  <Skeleton style={{ width: '380px' }} avatar={true}></Skeleton>
 </CodeBlock>
-<div className="title">块状</div>
+## 块状
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px",height:"90px"}} brick={true}></Skeleton>
+  <Skeleton style={{ width: '380px', height: '90px' }} brick={true}></Skeleton>
 </CodeBlock>
-<div className="title">静态</div>
+## 静态
 <CodeBlock line={'5-7'}>
-<Skeleton style={{width:"380px",'--skeleton-active':'false'}}></Skeleton>
-</CodeBlock>
\ No newline at end of file
+  <Skeleton style={{ width: '380px', '--skeleton-active': 'false' }}></Skeleton>
+</CodeBlock>
+
+<Props />
diff --git a/packages/demo/src/components/Skeleton/props.mdx b/packages/demo/src/components/Skeleton/props.mdx
new file mode 100644
index 0000000..590805b
--- /dev/null
+++ b/packages/demo/src/components/Skeleton/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties & CardCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"active","value":": boolean","optional":true,"version":"1.0.0","description":"是否展示动画效果","default":"false"},{"key":"avatar","value":": boolean","optional":true,"version":"1.0.0","description":"头像占位","default":"false"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"是否加载","default":"undefined"},{"key":"row","value":": number","optional":true,"version":"1.0.0","description":"自定义条数","default":"4"},{"key":"title","value":": boolean","optional":true,"version":"1.0.0","description":"标题","default":"false"},{"key":"brick","value":": boolean","optional":true,"version":"1.0.0","description":"块状","default":"false"}]
+
## API 列表
+
<Table name='skeleton' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Switch/.catalog.ts b/packages/demo/src/components/Switch/.catalog.ts
new file mode 100644
index 0000000..c1989f5
--- /dev/null
+++ b/packages/demo/src/components/Switch/.catalog.ts
@@ -0,0 +1 @@
+export const list = [{"h2":"基本用法","h3":[]},{"h2":"受控组件","h3":[]}]
\ No newline at end of file
diff --git a/packages/demo/src/components/Switch/demo/Base.tsx b/packages/demo/src/components/Switch/demo/Base.tsx
new file mode 100644
index 0000000..f917c63
--- /dev/null
+++ b/packages/demo/src/components/Switch/demo/Base.tsx
@@ -0,0 +1,12 @@
+import { Switch } from 'pivot-design';
+import React from 'react';
+
+const App: React.FC = () => {
+  return (
+    <>
+      <Switch />
+      <Switch defaultValue={true} />
+    </>
+  );
+};
+export default App;
diff --git a/packages/demo/src/components/Switch/demo/Controlled.tsx b/packages/demo/src/components/Switch/demo/Controlled.tsx
new file mode 100644
index 0000000..998e8c9
--- /dev/null
+++ b/packages/demo/src/components/Switch/demo/Controlled.tsx
@@ -0,0 +1,12 @@
+import { Switch } from 'pivot-design';
+import React, { useState } from 'react';
+
+const App: React.FC = () => {
+  const [value, setValue] = useState(true);
+  return (
+    <>
+      <Switch value={value} onChange={(checked) => setValue(checked)} />
+    </>
+  );
+};
+export default App;
diff --git a/packages/demo/src/components/Switch/index.mdx b/packages/demo/src/components/Switch/index.mdx
new file mode 100644
index 0000000..4fc37a7
--- /dev/null
+++ b/packages/demo/src/components/Switch/index.mdx
@@ -0,0 +1,21 @@
+import Props from './props.mdx';
+
+# Switch
+
+Switch 开关是用于切换两种互斥状态的常见控件。
+
+## 基本用法
+
+你可以直接通过`<Switch />`来渲染一个开关，此时该组件是一个非受控组件，你可以通过`defaultValue`来给开关控制它的初始值。
+
+<CodeBlock>
+  <Base />
+</CodeBlock>
+
+## 受控组件
+
+你可以传入`value`、`onChange`属性来让开关变成受控组件。
+
+<CodeBlock>
+  <Controlled />
+</CodeBlock>
diff --git a/packages/demo/src/components/Switch/props.mdx b/packages/demo/src/components/Switch/props.mdx
new file mode 100644
index 0000000..fb995bf
--- /dev/null
+++ b/packages/demo/src/components/Switch/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = [{"key":"className","value":": string","optional":true,"version":"1.0.0","description":"自定义类名"},{"key":"style","value":": React.CSSProperties","optional":true,"version":"1.0.0","description":"自定义样式"},{"key":"style","value":": React.CSSProperties & CardCssTokens","optional":true,"version":"1.0.0","description":"自定义样式","default":"undefined"},{"key":"size","value":": 'small' | 'normal'","optional":true,"version":"1.0.0","description":"自定义大小","default":"undefined"},{"key":"loading","value":": boolean","optional":true,"version":"1.0.0","description":"卡片内容是否加载","default":"normal"},{"key":"title","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片标题","default":"undefined"},{"key":"actions","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片底部的操作组","default":"undefined"},{"key":"bordered","value":": boolean","optional":true,"version":"1.0.0","description":"是否有边框","default":"true"},{"key":"extra","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"卡片右上角标签","default":"undefined"},{"key":"time","value":": string","optional":true,"version":"1.0.0","description":"时间标签","default":"undefined"},{"key":"children","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"内容","default":"undefined"},{"key":"cover","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"封面","default":"undefined"},{"key":"boradius","value":": boolean","optional":true,"version":"1.0.0","description":"边框角","default":"true"},{"key":"Grid","value":": boolean","optional":true,"version":"1.0.0","description":"栅格","default":"false"},{"key":"avatar","value":": React.ReactNode","optional":true,"version":"1.0.0","description":"头像","default":"true"}]
+
## API 列表
+
<Table name='card' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/Transition/.catalog.ts b/packages/demo/src/components/Transition/.catalog.ts
new file mode 100644
index 0000000..a63628d
--- /dev/null
+++ b/packages/demo/src/components/Transition/.catalog.ts
@@ -0,0 +1 @@
+export const list = []
\ No newline at end of file
diff --git a/packages/demo/src/components/Transition/props.mdx b/packages/demo/src/components/Transition/props.mdx
new file mode 100644
index 0000000..8b889a3
--- /dev/null
+++ b/packages/demo/src/components/Transition/props.mdx
@@ -0,0 +1,4 @@
+import Table from '../table.tsx'
+
export const params = []
+
## API 列表
+
<Table name='transition' params={params}/>
\ No newline at end of file
diff --git a/packages/demo/src/components/_CodeBlock/index.scss b/packages/demo/src/components/_CodeBlock/index.scss
index 56a4a9e..e93ba3c 100644
--- a/packages/demo/src/components/_CodeBlock/index.scss
+++ b/packages/demo/src/components/_CodeBlock/index.scss
@@ -1,9 +1,10 @@
 .pivot-code-box {
+  max-width: 900px;
   position: relative;
   margin: 30px 0;
   overflow: hidden;
   border: 1px solid rgba(243, 242, 242, 0.1);
-  border-radius: 6px;
+  border-radius: 12px;
   &-actions {
     display: flex;
     flex-direction: row-reverse;
@@ -16,11 +17,10 @@
   &-demo {
     padding: 60px 30px;
     display: flex;
-    border: 1px solid rgba(243, 242, 242, 0.1);
     flex-wrap: wrap;
     justify-content: center;
     align-items: center;
-    background-color: #ffffff;
+    background-color: var(--semi-color-fill-0);
     > :not(.PIVOT-draggable-item) {
       margin: 0 24px;
     }
diff --git a/packages/demo/src/components/table.tsx b/packages/demo/src/components/table.tsx
new file mode 100644
index 0000000..9b15675
--- /dev/null
+++ b/packages/demo/src/components/table.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+interface ITableProps {
+  params: any[];
+  name: string;
+}
+const Table: React.FC<ITableProps> = (props) => {
+  const { params, name } = props;
+  return (
+    <table className="pivot-props-table">
+      <thead>
+        <tr>
+          <th>参数名称</th>
+          <th>参数类型</th>
+          <th>是否必选</th>
+          <th>默认值</th>
+          <th>备注</th>
+          <th>版本支持</th>
+        </tr>
+      </thead>
+      <tbody>
+        {params.map((param) => {
+          return (
+            <tr>
+              <td>{param.key}</td>
+              <td>{param.value}</td>
+              <td>{param.optional ? '❌' : '✅'}</td>
+              <td>{param.default}</td>
+              <td>{param.description}</td>
+              <td>{param.version}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default Table;
diff --git a/packages/demo/src/examples/Draggable/Draggable.tsx b/packages/demo/src/examples/Draggable/Draggable.tsx
deleted file mode 100644
index 1c626be..0000000
--- a/packages/demo/src/examples/Draggable/Draggable.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import DraggableMdx from '../../components/Draggable/index.mdx';
-import { DraggableItem, Droppable, arrayMove, DndContext } from 'pivot-design';
-import CodeBlock from '@/components/_CodeBlock/codeBlock';
-import { useState } from 'react';
-
-const Draggable = () => {
-  const DraggableBlock = () => (
-    <DraggableItem className="demo-draggable-item" id={'A'}>
-      draggable
-    </DraggableItem>
-  );
-  const [parent, setParent] = useState('');
-  const [items, setItems] = useState([1, 2, 3, 4, 5]);
-  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
-  const onDragEnd = ({ delta, activeNode }: { delta: { x: number, y: number }, event: Event }) => {
-    setCoordinates(({ x, y }) => {
-      return {
-        x: x + delta.x,
-        y: y + delta.y,
-      };
-    });
-  };
-  const onDragEnd2 = ({ id, isDrop }: { id: string, isDrop: boolean }) => {
-    setParent(isDrop ? id : '');
-  };
-  const reorderItems = (oldIndex: number, newIndex: number) =>
-    setItems((items) => arrayMove(items, oldIndex, newIndex));
-
-  return (
-    <DraggableMdx
-      reorderItems={reorderItems}
-      items={items}
-      coordinates={coordinates}
-      onDragEnd={onDragEnd}
-      parent={parent}
-      onDragEnd2={onDragEnd2}
-      components={{
-        DndContext,
-        Droppable,
-        DraggableItem,
-        CodeBlock,
-        DraggableBlock,
-      }}
-    />
-  );
-};
-
-export default Draggable;
diff --git a/packages/demo/src/examples/Draggable/index.scss b/packages/demo/src/examples/Draggable/index.scss
deleted file mode 100644
index 00ab3c3..0000000
--- a/packages/demo/src/examples/Draggable/index.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.demo-draggable-item {
-  color: #fff;
-  background-color: #3685f5;
-  padding: 8px 18px;
-  border-radius: 4px;
-}
-.demo-sortable-horizen {
-  padding: 8px 88px;
-}
-.demo-sortable-grid {
-  padding: 32px 40px;
-  margin: 24px;
-}
diff --git a/packages/demo/src/pages/component/index.scss b/packages/demo/src/pages/component/index.scss
index d66b689..2b6a240 100644
--- a/packages/demo/src/pages/component/index.scss
+++ b/packages/demo/src/pages/component/index.scss
@@ -9,14 +9,24 @@
       font-size: 30px;
     }
   }
+
+  @media only screen and (min-width: 1900px) {
+    &-content {
+      justify-content: center;
+      padding: 60px 12vw;
+    }
+  }
+  @media only screen and (max-width: 1900px) {
+    &-content {
+      padding: 60px 0;
+    }
+  }
   &-content {
     display: flex;
     flex-direction: row;
-    padding: 60px 0;
-
     .demo-container {
+      min-width: 240px;
       background: var(--semi-color-bg-1);
-      width: 220px;
       padding: 8px 0.6rem;
       font-size: 14px;
       .demo-item {
@@ -33,40 +43,55 @@
       }
     }
     .demo-component {
-      margin: 0;
-      padding: 48px 20px 0 48px;
+      flex: 1;
+      padding: 48px 200px 0 68px;
       background-color: var(--semi-color-bg-0);
       border-top-left-radius: 10px;
       border-top-right-radius: 10px;
       box-shadow: 0 8px 24px #0000000d;
-      flex: 1;
+      margin: 0;
     }
     .demo-component-catalogue {
-      background-color: var(--semi-color-bg-0);
+      .catalog_content {
+        position: fixed;
+        top: 14vh;
+        right: 24px;
+        max-width: 120px;
+        color: var(--semi-color-text-1);
+        .catalog_h2 {
+          font-size: 13px;
+          padding: 6px 0;
+        }
+        .catalog_h3 {
+          font-size: 12px;
+          text-indent: 1em;
+          padding: 6px 0;
+        }
+      }
     }
   }
 }
 
-#nice {
+#nice.demo-component {
   color: var(--semi-color-text-2);
 
   word-break: break-all;
 }
-#nice p {
+#nice.demo-component p {
   font-size: 16px;
   line-height: 1.8;
 }
 /* 一级标题 */
-#nice h1 {
+#nice.demo-component h1 {
   color: var(--semi-color-text-0);
   padding-bottom: 60px;
 }
 /* 一级标题修饰 请参考有实例的主题 */
-#nice h1:after {
+#nice.demo-component h1:after {
 }
 /* 二级标题 */
 
-#nice h2 {
+#nice.demo-component h2 {
   position: relative;
   margin: 40px 0;
   padding: 0 16px;
@@ -84,7 +109,7 @@
   }
 }
 
-#nice h3 {
+#nice.demo-component h3 {
   position: relative;
   margin: 32px 0;
   margin-left: 0.8em;
@@ -103,74 +128,74 @@
 /* 无序列表整体样式
  * list-style-type: square|circle|disc;
  */
-#nice ul {
+#nice.demo-component ul {
   margin: 20px 1rem;
 }
-#nice ul li::marker {
+#nice.demo-component ul li::marker {
   color: var(--semi-color-primary);
 }
-#nice ul li {
+#nice.demo-component ul li {
   text-indent: 0.5rem;
   line-height: 2;
 }
 /* 有序列表整体样式
  * list-style-type: upper-roman|lower-greek|lower-alpha;
  */
-#nice ol {
+#nice.demo-component ol {
 }
 /* 列表内容，不要设置li
  */
-#nice li section {
+#nice.demo-component li section {
 }
 /* 引用
  * 左边缘颜色 border-left-color: black;
  * 背景色 background: gray;
  */
-#nice .multiquote-1 {
+#nice.demo-component .multiquote-1 {
   border-left-color: var(--semi-brand-4);
   background: #fff9f9;
 }
 /* 引用文字 */
-#nice .multiquote-1 p {
+#nice.demo-component .multiquote-1 p {
 }
 /* 链接 
  * border-bottom: 1px solid #009688;
  */
-#nice a {
+#nice.demo-component a {
   color: var(--semi-brand-4);
   border-bottom: 1px solid var(--semi-brand-4);
 }
 /* 加粗 */
-#nice strong {
+#nice.demo-component strong {
 }
 /* 斜体 */
-#nice em {
+#nice.demo-component em {
 }
 /* 加粗斜体 */
-#nice em strong {
+#nice.demo-component em strong {
 }
 /* 删除线 */
-#nice del {
+#nice.demo-component del {
 }
 /* 分隔线
  * 粗细、样式和颜色
  * border-top: 1px solid #3e3e3e;
  */
-#nice hr {
+#nice.demo-component hr {
 }
 /* 图片
  * 宽度 width: 80%;
  * 居中 margin: 0 auto;
  * 居左 margin: 0 0;
  */
-#nice img {
+#nice.demo-component img {
 }
 /* 图片描述文字 */
-#nice figcaption {
+#nice.demo-component figcaption {
 }
 /* 行内代码 */
-#nice p code,
-#nice li code {
+#nice.demo-component p code,
+#nice.demo-component li code {
   padding: 1px 2px;
   background: var(--semi-color-fill-1);
   color: var(--semi-color-secondary);
@@ -179,7 +204,7 @@
  * 代码块不换行 display: -webkit-box !important;
  * 代码块换行 display: block;
  */
-#nice pre code {
+#nice.demo-component pre code {
 }
 /*
  * 表格内的单元格
@@ -187,34 +212,34 @@
  * 边框 border: 1px solid #ccc;
  * 内边距 padding: 5px 10px;
  */
-#nice table tr th,
-#nice table tr td {
+#nice.demo-component table tr th,
+#nice.demo-component table tr td {
 }
 /* 脚注文字 */
 /* 脚注上标 */
-#nice .footnote-ref {
+#nice.demo-component .footnote-ref {
   color: var(--semi-brand-4);
 }
 /* "参考资料"四个字 
  * 内容 content: "参考资料";
  */
-#nice .footnotes-sep:before {
+#nice.demo-component .footnotes-sep:before {
 }
 /* 参考资料编号 */
-#nice .footnote-num {
+#nice.demo-component .footnote-num {
 }
 /* 参考资料文字 */
-#nice .footnote-item p {
+#nice.demo-component .footnote-item p {
 }
 /* 参考资料解释 */
-#nice .footnote-item p em {
+#nice.demo-component .footnote-item p em {
 }
 /* 行间公式
  * 最大宽度 max-width: 300% !important;
  */
-#nice .block-equation svg {
+#nice.demo-component .block-equation svg {
 }
 /* 行内公式
  */
-#nice .inline-equation svg {
+#nice.demo-component .inline-equation svg {
 }
diff --git a/packages/demo/src/pages/component/index.tsx b/packages/demo/src/pages/component/index.tsx
index 833984c..9884e8f 100644
--- a/packages/demo/src/pages/component/index.tsx
+++ b/packages/demo/src/pages/component/index.tsx
@@ -8,59 +8,101 @@ import CardMdx from '../../components/Card/index.mdx';
 import SkeletonMdx from '../../components/Skeleton/index.mdx';
 import PopoverMdx from '../../components/Popover/index.mdx';
 import TransitionMdx from '../../components/Transition/index.mdx';
-
-import './index.scss';
-
-import Draggable from '@/examples/Draggable/Draggable';
+import DraggableMdx from '../../components/Draggable/index.mdx';
+import SwitchMdx from '../../components/Switch/index.mdx';
 import CodeBlock from '@/components/_CodeBlock/codeBlock';
+import { list as DraggableList } from '../../components/Draggable/.catalog';
+import { list as ButtonList } from '../../components/Button/.catalog';
+import { list as InputList } from '../../components/Input/.catalog';
+import { list as PopoverList } from '../../components/Popover/.catalog';
+import { list as SkeletonList } from '../../components/Skeleton/.catalog';
+import { list as IconList } from '../../components/Icon/.catalog';
+import { list as CardList } from '../../components/Card/.catalog';
+import { list as TransitionList } from '../../components/Transition/.catalog';
+import './index.scss';
 
 function Index() {
-  const [select, setSelect] = useState('Transition');
+  const [select, setSelect] = useState('Switch');
   const demoSelect = () => {
     return (
       <div className="demo-container">
         <div className={`demo-item ${select === 'Button' ? 'active' : ''}`} onClick={() => setSelect('Button')}>
-          按钮
+          Button 按钮
+        </div>
+        <div className={`demo-item ${select === 'Switch' ? 'active' : ''}`} onClick={() => setSelect('Switch')}>
+          Switch 开关
         </div>
         <div className={`demo-item ${select === 'Card' ? 'active' : ''}`} onClick={() => setSelect('Card')}>
-          卡片
+          Card 卡片
         </div>
         <div className={`demo-item ${select === 'Draggable' ? 'active' : ''}`} onClick={() => setSelect('Draggable')}>
-          拖拽列表
+          Draggable 拖拽列表
         </div>
         <div className={`demo-item ${select === 'Skeleton' ? 'active' : ''}`} onClick={() => setSelect('Skeleton')}>
-          骨架屏
+          Skeleton 骨架屏
         </div>
         <div className={`demo-item ${select === 'Icon' ? 'active' : ''}`} onClick={() => setSelect('Icon')}>
-          图标
+          Icon 图标
         </div>
         <div className={`demo-item ${select === 'Input' ? 'active' : ''}`} onClick={() => setSelect('Input')}>
-          输入框
+          Input 输入框
         </div>
         <div className={`demo-item ${select === 'Popover' ? 'active' : ''}`} onClick={() => setSelect('Popover')}>
-          气泡
+          Popover 气泡
         </div>
         <div className={`demo-item ${select === 'Transition' ? 'active' : ''}`} onClick={() => setSelect('Transition')}>
-          元素动画
+          Transition 元素动画
         </div>
       </div>
     );
   };
+  const renderCatalog = (list) => {
+    return (
+      <div className="catalog_content">
+        {list.map((item) => {
+          return (
+            <>
+              <div className="catalog_h2">{item.h2}</div>
+              {item.h3.map((i) => {
+                return <div className="catalog_h3">{i}</div>;
+              })}
+            </>
+          );
+        })}
+      </div>
+    );
+  };
 
   return (
     <div className="pivot-design-docs-content">
       {demoSelect()}
       <div className="demo-component" id="nice">
         {select === 'Button' ? <ButtonMdx components={{ Button, CodeBlock }} /> : null}
+        {select === 'Switch' ? <SwitchMdx components={{ CodeBlock }} /> : null}
         {select === 'Icon' ? <IconMdx components={{ Icon, CodeBlock }} /> : null}
         {select === 'Input' ? <InputMdx components={{ Input, CodeBlock }} /> : null}
         {select === 'Card' ? <CardMdx components={{ Card, CodeBlock }} /> : null}
         {select === 'Popover' ? <PopoverMdx components={{ Popover, CodeBlock }} /> : null}
+        {select === 'Draggable' ? (
+          <DraggableMdx
+            components={{
+              CodeBlock,
+            }}
+          />
+        ) : null}
         {select === 'Transition' ? <TransitionMdx components={{ Transition, CodeBlock }} /> : null}
-        {select === 'Draggable' ? <Draggable /> : null}
         {select === 'Skeleton' ? <SkeletonMdx components={{ Skeleton, CodeBlock }} /> : null}
       </div>
-      <div className="demo-component-catalogue" style={{ width: '200px' }}></div>
+      <div className="demo-component-catalogue">
+        {select === 'Draggable' && renderCatalog(DraggableList)}
+        {select === 'Button' && renderCatalog(ButtonList)}
+        {select === 'Card' && renderCatalog(CardList)}
+        {select === 'Skeleton' && renderCatalog(SkeletonList)}
+        {select === 'Popover' && renderCatalog(PopoverList)}
+        {select === 'Input' && renderCatalog(InputList)}
+        {select === 'Icon' && renderCatalog(IconList)}
+        {select === 'Transition' && renderCatalog(TransitionList)}
+      </div>
     </div>
   );
 }
diff --git a/packages/demo/src/pages/home/index.scss b/packages/demo/src/pages/home/index.scss
index 287a9c2..9636562 100644
--- a/packages/demo/src/pages/home/index.scss
+++ b/packages/demo/src/pages/home/index.scss
@@ -21,6 +21,7 @@
     }
     .navigation-wrapper {
       display: flex;
+      align-items: center;
       .navigator {
         margin: 0 20px;
         padding: 4px 24px;
diff --git a/packages/demo/src/pages/home/index.tsx b/packages/demo/src/pages/home/index.tsx
index ffc371a..aa2afff 100644
--- a/packages/demo/src/pages/home/index.tsx
+++ b/packages/demo/src/pages/home/index.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import './index.scss';
 import Logo from '../../images/logo';
 import { Link, Outlet } from 'react-router-dom';
+import { Switch } from 'pivot-design';
 
 const navigatorList = [
   {
@@ -19,11 +20,17 @@ const navigatorList = [
 ];
 
 const Home: React.FC = () => {
+  const [isLight, setIsLight] = useState(false);
+  const onThemeChange = (isLight: boolean) => {
+    document.body.setAttribute('pivot-theme', isLight ? 'light' : 'dark');
+    setIsLight(isLight);
+  };
   return (
     <div className="pivot-design-home">
       <div className="pivot-design-home-title">
         <div className="title">Pivot Design</div>
         <div className="navigation-wrapper">
+          <Switch value={isLight} onChange={onThemeChange} />
           {navigatorList.map((nav) => (
             <Link to={nav.path} className="navigator" key={nav.text}>
               {nav.text}
diff --git a/packages/demo/webpack.config.js b/packages/demo/webpack.config.js
index 2c63483..3b94046 100644
--- a/packages/demo/webpack.config.js
+++ b/packages/demo/webpack.config.js
@@ -21,20 +21,12 @@ module.exports = {
   },
   module: {
     rules: [
-      // {
-      //   test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
-      //   use: 'babel-loader',
-      // },
       {
         test: /.(ts|tsx)$/, // 匹配.ts, tsx文件
         oneOf: [
           {
             resourceQuery: /code/, // code后缀，导入为字符串处理
-            use: [
-              {
-                loader: 'raw-loader',
-              },
-            ],
+            type: 'asset/source',
           },
           {
             use: 'babel-loader', // 导入为正常ts，tsx文件
diff --git a/packages/design-props/components/draggable.ts b/packages/design-props/components/draggable.ts
index f14dc8f..8024325 100644
--- a/packages/design-props/components/draggable.ts
+++ b/packages/design-props/components/draggable.ts
@@ -33,3 +33,30 @@ export interface DraggableItemProps extends PivotDesignProps {
    */
   left?: number;
 }
+// test
+export interface DraggableProps extends PivotDesignProps {
+  /**
+   * @version 1.0.0
+   * @description 列表子项默认插槽
+   * @default undefined
+   */
+  children?: React.ReactNode;
+  /**
+   * @version 1.0.0
+   * @description 列表子项索引值
+   * @default undefined
+   */
+  index?: number;
+  /**
+   * @version 1.0.0
+   * @description 拖动元素相对定位的top偏移值
+   * @default undefined
+   */
+  top?: number;
+  /**
+   * @version 1.0.0
+   * @description 拖动元素相对定位的left偏移值
+   * @default undefined
+   */
+  left?: number;
+}
diff --git a/packages/design-props/components/transtion.ts b/packages/design-props/components/transition.ts
similarity index 100%
rename from packages/design-props/components/transtion.ts
rename to packages/design-props/components/transition.ts
diff --git a/packages/design-props/index.ts b/packages/design-props/index.ts
index 80e1a51..c8983fe 100644
--- a/packages/design-props/index.ts
+++ b/packages/design-props/index.ts
@@ -5,4 +5,4 @@ export * from './components/input';
 export * from './components/card';
 export * from './components/skeleton';
 export * from './components/popover';
-export * from './components/transtion';
+export * from './components/transition';
diff --git a/packages/design/components/Switch/index.scss b/packages/design/components/Switch/index.scss
new file mode 100644
index 0000000..a3be391
--- /dev/null
+++ b/packages/design/components/Switch/index.scss
@@ -0,0 +1,38 @@
+@import '../constants.scss';
+
+.#{$prefix}-switch {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 12px;
+  background-color: var(--semi-color-fill-2);
+  transition: background 200ms ease-in;
+
+  &.checked {
+    background-color: var(--semi-color-success);
+    .#{$prefix}-switch-pole {
+      transform: translateX(20px);
+    }
+  }
+
+  &-pole {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    transform: translateX(2px);
+    background-color: var(--semi-color-white);
+    transition: transform 200ms ease-in;
+  }
+  &-input {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    opacity: 0;
+    z-index: 1;
+  }
+}
diff --git a/packages/design/components/Switch/index.tsx b/packages/design/components/Switch/index.tsx
new file mode 100644
index 0000000..0a777ec
--- /dev/null
+++ b/packages/design/components/Switch/index.tsx
@@ -0,0 +1,31 @@
+import classnames from 'classnames';
+import { prefix } from '../constants';
+import './index.scss';
+import useControlled from '../hooks/useControlled';
+
+interface SwitchProps {
+  value?: boolean;
+  defaultValue?: boolean;
+  onChange?: (e: boolean) => void;
+}
+
+function Switch(props: SwitchProps) {
+  const [value, setValue] = useControlled(props);
+
+  return (
+    <div
+      className={classnames(`${prefix}-switch`, {
+        checked: value,
+      })}
+    >
+      <div className={classnames(`${prefix}-switch-pole`)} />
+      <input
+        type="checkbox"
+        className={classnames(`${prefix}-switch-input`)}
+        defaultChecked={value}
+        onChange={(e) => setValue(e.target.checked)}
+      />
+    </div>
+  );
+}
+export default Switch;
diff --git a/packages/design/components/Transition/initTimeouts.ts b/packages/design/components/Transition/initTimeouts.ts
index 4b94358..0dc57c8 100644
--- a/packages/design/components/Transition/initTimeouts.ts
+++ b/packages/design/components/Transition/initTimeouts.ts
@@ -1,14 +1,15 @@
+import { isNumber } from '../utils/type-guards/isNumber';
 import { timeoutType } from 'pivot-design-props';
 
 /** 统一转化timeout格式 */
-export function getFormateTimeouts(timeout: timeoutType | null) {
-  let exit, enter, appear;
-  exit = enter = appear = timeout;
-
-  if (timeout != null && typeof timeout !== 'number') {
-    exit = timeout?.exit;
-    enter = timeout?.enter;
-    appear = timeout?.appear !== undefined ? timeout?.appear : enter;
+export function getFormateTimeouts(timeout?: timeoutType) {
+  if (isNumber(timeout)) {
+    return {
+      exit: timeout,
+      enter: timeout,
+      appear: timeout,
+    };
+  } else {
+    return { exit: timeout?.exit, enter: timeout?.enter, appear: timeout?.appear ?? timeout?.enter };
   }
-  return { exit, enter, appear } as { enter: number; exit: number; appear: number };
 }
diff --git a/packages/design/components/hooks/useControlled.ts b/packages/design/components/hooks/useControlled.ts
new file mode 100644
index 0000000..cf6dc23
--- /dev/null
+++ b/packages/design/components/hooks/useControlled.ts
@@ -0,0 +1,51 @@
+/* eslint-disable no-redeclare */
+import { useCallback, useState, SetStateAction } from 'react';
+
+export interface Options<T> {
+  defaultValue?: T;
+  defaultValuePropName?: string;
+  valuePropName?: string;
+  changeName?: string;
+}
+
+export interface StandardProps<T> {
+  value?: T;
+  defaultValue?: T;
+  onChange?: (val: T) => void;
+}
+
+type Props = Record<string, any>;
+
+function useControlled<T = any>(props: StandardProps<T>): [T, (v: SetStateAction<T>) => void];
+function useControlled<T = any>(
+  props?: StandardProps<T>,
+  options?: Options<T>
+): [T, (v: SetStateAction<T>, ...args: any[]) => void];
+
+function useControlled<T = any>(props: Props = {}, options: Options<T> = {}) {
+  const {
+    defaultValue: defaultOptionsValue,
+    defaultValuePropName = 'defaultValue',
+    valuePropName = 'value',
+    changeName = 'onChange',
+  } = options;
+
+  // 获取外部传入的value，判断是否受控
+  const value = props[valuePropName] as T;
+  const defaultPropsValue = props[defaultValuePropName] ?? defaultOptionsValue;
+  const propsOnChange = props[changeName];
+  const isControlled = Object.hasOwn(props, valuePropName);
+
+  const [state, setState] = useState(isControlled ? value : defaultPropsValue);
+
+  const setValue = useCallback((v: T, ...args: any[]) => {
+    if (isControlled) {
+      propsOnChange(v, args);
+    }
+    setState(v);
+  }, []);
+
+  return [state, setValue];
+}
+
+export default useControlled;
diff --git a/packages/design/components/utils/type-guards/isNumber.ts b/packages/design/components/utils/type-guards/isNumber.ts
new file mode 100644
index 0000000..1760e77
--- /dev/null
+++ b/packages/design/components/utils/type-guards/isNumber.ts
@@ -0,0 +1,9 @@
+/**
+ * 判断是否是数字类型，排除NaN、Infinity
+ * @param number
+ * @returns `boolean` number is Number
+ */
+export const isNumber = (number: unknown): number is Number => {
+  const isNumber = typeof number === 'number';
+  return isNumber && number === number && Number.isFinite(number);
+};
diff --git a/packages/design/index.ts b/packages/design/index.ts
index 8d7ac5f..22fec53 100644
--- a/packages/design/index.ts
+++ b/packages/design/index.ts
@@ -17,8 +17,9 @@ import Skeleton from './components/Skeleton';
 import Popover from './components/Popover/';
 import Transition from './components/Transition';
 import CSSTransiton from './components/Transition/CSSTransiton';
+import Switch from './components/Switch';
 
-export { Button, Icon, Input, Card, Skeleton, Popover, Transition, CSSTransiton };
+export { Button, Icon, Input, Card, Skeleton, Popover, Transition, CSSTransiton, Switch };
 
 export const arrayMove = (array: any[], from: number, to: number) => {
   const resArray = array.slice();
diff --git a/packages/design/theme/global.scss b/packages/design/theme/global.scss
index f19f4cf..05474cd 100644
--- a/packages/design/theme/global.scss
+++ b/packages/design/theme/global.scss
@@ -26,6 +26,8 @@ body .semi-always-light {
   --semi-color-info-hover: rgba(var(--semi-blue-6), 1);
   --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
   --semi-color-primary: rgba(var(--semi-brand-5), 1);
+  --semi-color-primary-dark: rgba(var(--semi-brand-0), 1);
+
   --semi-color-success: rgba(var(--semi-green-5), 1);
   --semi-color-warning: rgba(var(--semi-orange-5), 1);
   --semi-color-info-active: rgba(var(--semi-blue-7), 1);
@@ -123,6 +125,7 @@ body .semi-always-dark {
   --semi-color-link-hover: rgba(var(--semi-blue-6), 1);
   --semi-color-primary: rgba(var(--semi-brand-5), 1);
   --semi-color-success: rgba(var(--semi-green-5), 1);
+  --semi-color-primary-dark: rgba(var(--semi-brand-0), 1);
   --semi-color-warning: rgba(var(--semi-orange-5), 1);
   --semi-color-info-active: rgba(var(--semi-blue-7), 1);
   --semi-color-link-active: rgba(var(--semi-blue-7), 1);
diff --git a/packages/design/tsconfig.json b/packages/design/tsconfig.json
index 41a518a..93c0f1f 100644
--- a/packages/design/tsconfig.json
+++ b/packages/design/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["."],
-  "exclude": ["lib"],
+  "exclude": ["lib",".*"],
   "compilerOptions": {
     "baseUrl": ".",
     "outDir": "lib"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0034a62..849a8b0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -4,9 +4,14 @@ importers:
 
   .:
     specifiers:
+      '@babel/core': ^7.19.1
+      '@babel/helper-plugin-utils': ^7.20.2
+      '@babel/parser': ^7.21.2
       '@commitlint/cli': ^17.3.0
       '@commitlint/config-conventional': ^17.3.0
+      babel-plugin-jsx: ^1.2.0
       core-js: ^3.25.1
+      es-dirname: ^0.1.0
       eslint-config-psfe: 1.0.5
       gsap: ^3.12.2
       husky: ^8.0.2
@@ -14,8 +19,13 @@ importers:
       core-js: 3.25.5
       gsap: 3.12.2
     devDependencies:
+      '@babel/core': 7.19.3
+      '@babel/helper-plugin-utils': 7.22.5
+      '@babel/parser': 7.22.7
       '@commitlint/cli': 17.3.0
       '@commitlint/config-conventional': 17.3.0
+      babel-plugin-jsx: 1.2.0
+      es-dirname: 0.1.0
       eslint-config-psfe: 1.0.5_un26p26khajv6r2p2m4qierg4a
       husky: 8.0.2
 
@@ -281,7 +291,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       debug: 4.3.4
       lodash.debounce: 4.0.8
       resolve: 1.22.1
@@ -359,6 +369,11 @@ packages:
     engines: {node: '>=6.9.0'}
     dev: true
 
+  /@babel/helper-plugin-utils/7.22.5:
+    resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==}
+    engines: {node: '>=6.9.0'}
+    dev: true
+
   /@babel/helper-remap-async-to-generator/7.18.9_@babel+core@7.19.3:
     resolution: {integrity: sha512-dI7q50YKd8BAv3VEfgg7PS7yD3Rtbi2J1XMXaalXO0W0164hYLnh8zpjRS0mte9MfVp/tltvr/cfdXPvJr1opA==}
     engines: {node: '>=6.9.0'}
@@ -463,6 +478,14 @@ packages:
       '@babel/types': 7.19.4
     dev: true
 
+  /@babel/parser/7.22.7:
+    resolution: {integrity: sha512-7NF8pOkHP5o2vpmGgNGcfAeCvOYhGLyA3Z4eBQkT1RJlWu47n63bCs93QfJ2hIAFCil7L5P2IWhs1oToVgrL0Q==}
+    engines: {node: '>=6.0.0'}
+    hasBin: true
+    dependencies:
+      '@babel/types': 7.19.4
+    dev: true
+
   /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/7.18.6_@babel+core@7.19.3:
     resolution: {integrity: sha512-Dgxsyg54Fx1d4Nge8UnvTrED63vrwOdPmyvPzlNN/boaliRP54pm3pGzZD1SJUwrBA+Cs/xdG8kXX6Mn/RfISQ==}
     engines: {node: '>=6.9.0'}
@@ -470,7 +493,7 @@ packages:
       '@babel/core': ^7.0.0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/7.18.9_@babel+core@7.19.3:
@@ -480,7 +503,7 @@ packages:
       '@babel/core': ^7.13.0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
       '@babel/plugin-proposal-optional-chaining': 7.18.9_@babel+core@7.19.3
     dev: true
@@ -493,7 +516,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-environment-visitor': 7.18.9
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.19.3
       '@babel/plugin-syntax-async-generators': 7.8.4_@babel+core@7.19.3
     transitivePeerDependencies:
@@ -508,7 +531,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -521,7 +544,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-class-static-block': 7.14.5_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -534,7 +557,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-dynamic-import': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -545,7 +568,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-export-namespace-from': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -556,7 +579,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-json-strings': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -567,7 +590,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-logical-assignment-operators': 7.10.4_@babel+core@7.19.3
     dev: true
 
@@ -578,7 +601,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -589,7 +612,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-numeric-separator': 7.10.4_@babel+core@7.19.3
     dev: true
 
@@ -602,7 +625,7 @@ packages:
       '@babel/compat-data': 7.19.4
       '@babel/core': 7.19.3
       '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-object-rest-spread': 7.8.3_@babel+core@7.19.3
       '@babel/plugin-transform-parameters': 7.18.8_@babel+core@7.19.3
     dev: true
@@ -614,7 +637,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-optional-catch-binding': 7.8.3_@babel+core@7.19.3
     dev: true
 
@@ -625,7 +648,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
       '@babel/plugin-syntax-optional-chaining': 7.8.3_@babel+core@7.19.3
     dev: true
@@ -638,7 +661,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -652,7 +675,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-private-property-in-object': 7.14.5_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -666,7 +689,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-async-generators/7.8.4_@babel+core@7.19.3:
@@ -675,7 +698,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-class-properties/7.12.13_@babel+core@7.19.3:
@@ -684,7 +707,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-class-static-block/7.14.5_@babel+core@7.19.3:
@@ -694,7 +717,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-dynamic-import/7.8.3_@babel+core@7.19.3:
@@ -703,7 +726,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-export-namespace-from/7.8.3_@babel+core@7.19.3:
@@ -712,7 +735,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-import-assertions/7.18.6_@babel+core@7.19.3:
@@ -722,7 +745,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-json-strings/7.8.3_@babel+core@7.19.3:
@@ -731,7 +754,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-jsx/7.18.6_@babel+core@7.19.3:
@@ -741,7 +764,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.19.3:
@@ -750,7 +773,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-nullish-coalescing-operator/7.8.3_@babel+core@7.19.3:
@@ -759,7 +782,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-numeric-separator/7.10.4_@babel+core@7.19.3:
@@ -768,7 +791,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-object-rest-spread/7.8.3_@babel+core@7.19.3:
@@ -777,7 +800,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-optional-catch-binding/7.8.3_@babel+core@7.19.3:
@@ -786,7 +809,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-optional-chaining/7.8.3_@babel+core@7.19.3:
@@ -795,7 +818,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-private-property-in-object/7.14.5_@babel+core@7.19.3:
@@ -805,7 +828,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-top-level-await/7.14.5_@babel+core@7.19.3:
@@ -815,7 +838,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-syntax-typescript/7.18.6_@babel+core@7.19.3:
@@ -825,7 +848,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-arrow-functions/7.18.6_@babel+core@7.19.3:
@@ -835,7 +858,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-async-to-generator/7.18.6_@babel+core@7.19.3:
@@ -846,7 +869,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-remap-async-to-generator': 7.18.9_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -859,7 +882,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-block-scoping/7.19.4_@babel+core@7.19.3:
@@ -869,7 +892,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-classes/7.19.0_@babel+core@7.19.3:
@@ -884,7 +907,7 @@ packages:
       '@babel/helper-environment-visitor': 7.18.9
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-replace-supers': 7.19.1
       '@babel/helper-split-export-declaration': 7.18.6
       globals: 11.12.0
@@ -899,7 +922,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-destructuring/7.19.4_@babel+core@7.19.3:
@@ -909,7 +932,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-dotall-regex/7.18.6_@babel+core@7.19.3:
@@ -920,7 +943,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-duplicate-keys/7.18.9_@babel+core@7.19.3:
@@ -930,7 +953,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-exponentiation-operator/7.18.6_@babel+core@7.19.3:
@@ -941,7 +964,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-builder-binary-assignment-operator-visitor': 7.18.9
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-for-of/7.18.8_@babel+core@7.19.3:
@@ -951,7 +974,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-function-name/7.18.9_@babel+core@7.19.3:
@@ -963,7 +986,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-compilation-targets': 7.19.3_@babel+core@7.19.3
       '@babel/helper-function-name': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-literals/7.18.9_@babel+core@7.19.3:
@@ -973,7 +996,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-member-expression-literals/7.18.6_@babel+core@7.19.3:
@@ -983,7 +1006,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-modules-amd/7.18.6_@babel+core@7.19.3:
@@ -994,7 +1017,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
       - supports-color
@@ -1008,7 +1031,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-simple-access': 7.19.4
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
@@ -1024,7 +1047,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-validator-identifier': 7.19.1
       babel-plugin-dynamic-import-node: 2.3.3
     transitivePeerDependencies:
@@ -1039,7 +1062,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-module-transforms': 7.19.0
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -1052,7 +1075,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-new-target/7.18.6_@babel+core@7.19.3:
@@ -1062,7 +1085,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-object-super/7.18.6_@babel+core@7.19.3:
@@ -1072,7 +1095,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-replace-supers': 7.19.1
     transitivePeerDependencies:
       - supports-color
@@ -1085,7 +1108,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-property-literals/7.18.6_@babel+core@7.19.3:
@@ -1095,7 +1118,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-react-display-name/7.18.6_@babel+core@7.19.3:
@@ -1105,7 +1128,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-react-jsx-development/7.18.6_@babel+core@7.19.3:
@@ -1127,7 +1150,7 @@ packages:
       '@babel/core': 7.19.3
       '@babel/helper-annotate-as-pure': 7.18.6
       '@babel/helper-module-imports': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.19.3
       '@babel/types': 7.19.4
     dev: true
@@ -1140,7 +1163,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-regenerator/7.18.6_@babel+core@7.19.3:
@@ -1150,7 +1173,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       regenerator-transform: 0.15.0
     dev: true
 
@@ -1161,7 +1184,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-shorthand-properties/7.18.6_@babel+core@7.19.3:
@@ -1171,7 +1194,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-spread/7.19.0_@babel+core@7.19.3:
@@ -1181,7 +1204,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/helper-skip-transparent-expression-wrappers': 7.18.9
     dev: true
 
@@ -1192,7 +1215,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-template-literals/7.18.9_@babel+core@7.19.3:
@@ -1202,7 +1225,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-typeof-symbol/7.18.9_@babel+core@7.19.3:
@@ -1212,7 +1235,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-typescript/7.19.3_@babel+core@7.19.3:
@@ -1223,7 +1246,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-class-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-syntax-typescript': 7.18.6_@babel+core@7.19.3
     transitivePeerDependencies:
       - supports-color
@@ -1236,7 +1259,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/plugin-transform-unicode-regex/7.18.6_@babel+core@7.19.3:
@@ -1247,7 +1270,7 @@ packages:
     dependencies:
       '@babel/core': 7.19.3
       '@babel/helper-create-regexp-features-plugin': 7.19.0_@babel+core@7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
     dev: true
 
   /@babel/preset-env/7.19.4_@babel+core@7.19.3:
@@ -1342,7 +1365,7 @@ packages:
       '@babel/core': ^7.0.0-0
     dependencies:
       '@babel/core': 7.19.3
-      '@babel/helper-plugin-utils': 7.19.0
+      '@babel/helper-plugin-utils': 7.22.5
       '@babel/plugin-proposal-unicode-property-regex': 7.18.6_@babel+core@7.19.3
       '@babel/plugin-transform-dotall-regex': 7.18.6_@babel+core@7.19.3
       '@babel/types': 7.19.4
@@ -1396,7 +1419,7 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/code-frame': 7.18.6
-      '@babel/parser': 7.19.4
+      '@babel/parser': 7.22.7
       '@babel/types': 7.19.4
     dev: true
 
@@ -1410,7 +1433,7 @@ packages:
       '@babel/helper-function-name': 7.19.0
       '@babel/helper-hoist-variables': 7.18.6
       '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/parser': 7.19.4
+      '@babel/parser': 7.22.7
       '@babel/types': 7.19.4
       debug: 4.3.4
       globals: 11.12.0
@@ -2437,6 +2460,12 @@ packages:
       object.assign: 4.1.4
     dev: true
 
+  /babel-plugin-jsx/1.2.0:
+    resolution: {integrity: sha512-eYeaFsGl0BecHxx5dowVCeGZPXJJZNTyFwyNgf9RFU9Ya3WkpRPZow+kOzWZ++RerDiKpcUGfYFp6ovWCWzXcg==}
+    dependencies:
+      esutils: 2.0.3
+    dev: true
+
   /babel-plugin-polyfill-corejs2/0.3.3_@babel+core@7.19.3:
     resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==}
     peerDependencies:
@@ -3161,6 +3190,10 @@ packages:
       unbox-primitive: 1.0.2
     dev: true
 
+  /es-dirname/0.1.0:
+    resolution: {integrity: sha512-tcTj4pVFXe5EdiHCybjynDTlvkwuNN6JCg9+5BVB+n9qQoMyWOtxpREoL7rGO3sCIAX55Y6CYZi4s1c30uxvPg==}
+    dev: true
+
   /es-module-lexer/0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
 
diff --git a/scripts/build_catalog.mjs b/scripts/build_catalog.mjs
new file mode 100644
index 0000000..6e6525b
--- /dev/null
+++ b/scripts/build_catalog.mjs
@@ -0,0 +1,45 @@
+import { readFileSync, readdirSync, writeFileSync } from 'fs'
+import { resolve, extname } from 'path'
+import { ConpopnentDocsPath, __dirname } from './env.mjs';
+
+const isH2 = (text) => text.startsWith('##')
+const isH3 = (text) => text.startsWith('###')
+
+const isValidComponentDir = (dir) => {
+  if (typeof dir !== 'string') return false
+  return dir.charAt(0) >= 'A' && dir.charAt(0) <= 'Z'
+}
+
+const components = readdirSync(ConpopnentDocsPath).filter((dir) => !extname(dir) && isValidComponentDir(dir));
+
+for (let component of components) {
+  const componentPath = resolve(ConpopnentDocsPath, component);
+
+  const text = readFileSync(resolve(componentPath, './index.mdx'), {
+    encoding: 'utf-8'
+  });
+
+  // {h2:string,h3:[]}[]
+  const list = []
+  const titleReg = /#{2,3}\s(\S+)/g
+
+  let m;
+
+  while ((m = titleReg.exec(text))) {
+    const isInner = isH3(m[0])
+    const content = m[1];
+
+    if (!isInner) {
+      list.push({ h2: content, h3: [] })
+    } else {
+      list.at(-1).h3.push(content)
+    }
+  }
+  const CatalogPath = resolve(componentPath, `./.catalog.ts`)
+  writeFileSync(CatalogPath, `export const list = ${JSON.stringify(list)}`)
+}
+
+
+
+
+
diff --git a/scripts/build_props.mjs b/scripts/build_props.mjs
new file mode 100644
index 0000000..6ad5779
--- /dev/null
+++ b/scripts/build_props.mjs
@@ -0,0 +1,127 @@
+import { readdirSync, readFileSync, writeFileSync } from "fs";
+import { resolve, extname } from "path";
+import { transformFromAstSync } from "@babel/core";
+import { declare } from "@babel/helper-plugin-utils";
+import { parse } from "@babel/parser";
+import { ComponentsPath, ConpopnentDocsPath } from "./env.mjs";
+
+
+
+const firstUpper = ([letter, ...rest]) => letter.toUpperCase() + rest.join("");
+const COMMENT_REG = /\@(\w+)\s+([\S^\\]+)/g;
+const inherit = [];
+
+function parseComment(comment) {
+  if (!comment) return {}
+  const r = {};
+  let m;
+  while ((m = COMMENT_REG.exec(comment))) {
+    r[m[1]] = m[2];
+  }
+  return r;
+}
+
+function h(componentMdxPath, component) {
+  const sourceCode = readFileSync(componentMdxPath, { encoding: "utf-8" });
+  const ast = parse(sourceCode, {
+    sourceType: "unambiguous",
+    plugins: ["typescript"],
+  });
+  const { code } = transformFromAstSync(ast, sourceCode, {
+    plugins: [[generatorPropsPlugin, { name: component }]],
+  });
+  return code;
+}
+/**
+ * @param {*} name 
+ * @param {*} docs 
+ */
+function generatePropsMd(name, docs) {
+  const DocsPath = resolve(ConpopnentDocsPath, `./${firstUpper(name)}/props.mdx`)
+  let table = `import Table from '../table.tsx'\n\rexport const params = ${JSON.stringify(docs)}\n\r## API 列表\n\r<Table name='${name}' params={params}/>`
+  // let table = `|参数名称|参数类型|是否可选|默认值|备注|版本支持|\n\r|:---|:---:|:---:|:---:|:---:|---:|\n\r`
+  // for (let doc of docs) {
+  //   const { key, value, optional, version, description, default: defaultVal } = doc;
+  //   table += `|${key}|${value}|${optional ? '可选' : '必选'}|${defaultVal}| ${description}| ${version}|\n\r`
+  // }
+  writeFileSync(DocsPath, table)
+}
+const generatorPropsPlugin = declare((api, options, dirname) => {
+  api.assertVersion(7);
+  return {
+    pre: (file) => {
+      // 用于存储props对象Array<{...}>
+      file.docs = [];
+    },
+    visitor: {
+      TSInterfaceDeclaration: (path, scope) => {
+        if (options.name === "index") {
+          path.traverse({
+            TSPropertySignature: (p) => {
+              // console.log(p.get('typeAnnotation').toString(),p.get('optional').node);
+              const key = p.get("key").toString();
+              const value = p.get("typeAnnotation").toString();
+              const optional = p.get("optional").node;
+              const commentStr = p.get("leadingComments")[0].node.value;
+              const comments = parseComment(commentStr);
+              inherit.push({ key, value, optional, ...comments });
+            },
+          });
+          return;
+        }
+        // ComponentProps
+        if (path.get("id").toString() === `${firstUpper(options.name)}Props`) {
+          // 匹配是否继承
+          for (let extend of path.get("extends")) {
+            if (extend.toString() === "PivotDesignProps") {
+              /**
+               * ```json
+    * {
+    *   key: 'className',
+    *   value: ': string',
+    *   optional: true,
+    *   comment: [version: '1.0.0', description: '自定义类名']
+               * },
+               * ```
+               */
+              scope.file.docs.push(...inherit);
+              break;
+            }
+          }
+          // 解析自己的props
+          // console.log(options.name, scope.file.docs);
+          path.traverse({
+            TSPropertySignature: (p) => {
+              // console.log(p.get('typeAnnotation').toString(),p.get('optional').node);
+              const key = p.get("key").toString();
+              const value = p.get("typeAnnotation").toString();
+              const optional = p.get("optional").node;
+              const commentStr = p.get("leadingComments").length > 0 && p.get("leadingComments")[0].node.value;
+              const comments = parseComment(commentStr);
+              scope.file.docs.push({ key, value, optional, ...comments });
+            },
+          });
+        }
+      },
+    },
+    post(file) {
+      if (options.name === 'index') return
+      console.log(file.docs);
+      // todo:create md table 使用自己的自定义组件吧
+      generatePropsMd(options.name, file.docs)
+    },
+  };
+});
+
+
+
+const components = readdirSync(ComponentsPath).filter((dir) => extname(dir));
+h(resolve(ComponentsPath, `./index.ts`), "index");
+
+for (let componentPath of components) {
+  if (componentPath === "index.ts") continue;
+  const componentMdxPath = resolve(ComponentsPath, `./${componentPath}`);
+  const component = componentPath.split(".")[0];
+  // if (component === "index") continue;
+  h(componentMdxPath, component);
+}
diff --git a/scripts/env.mjs b/scripts/env.mjs
new file mode 100644
index 0000000..fc9be4f
--- /dev/null
+++ b/scripts/env.mjs
@@ -0,0 +1,15 @@
+import dirname from "es-dirname";
+import { resolve } from 'path'
+export const __dirname = dirname();
+
+export const ComponentsPath = resolve(
+  __dirname,
+  "../packages/design-props/components"
+);
+export const ConpopnentDocsPath = resolve(
+  __dirname,
+  "../packages/demo/src/components"
+);
+
+
+