diff --git a/packages/components/badge/docs/index.zh.md b/packages/components/badge/docs/index.zh.md
index b778a3b6d..b25c9daa7 100644
--- a/packages/components/badge/docs/index.zh.md
+++ b/packages/components/badge/docs/index.zh.md
@@ -20,17 +20,19 @@ cover:
 
 ### `ix-badge`
 
-| 属性            | 说明                                                           | 类型            | 全局配置 |
-| --------------- | -------------------------------------------------------------- | --------------- | -------- |
-| `dot`           | 圆点徽标                                                       | `boolean`       | `false`  |
-| `count`         | 数值徽标的值                                                   | `number/string` | `-`      |
-| `overflowCount` | 最大数值徽标的值，超出以`${overflowCount}+`显示                | `number/string` | `99`     |
-| `showZero`      | 数值为 0 时是否显示                                            | `boolean`       | `false`  |
-| `color`         | 徽标的颜色，数值徽标和圆点徽标为设置背景色，组件徽标为字体颜色 | `hex/rgb?a`     | `-`      |
-
-### `slots`
-
-| 方法      | 说明               | 参数 |
-| --------- | ------------------ | ---- |
-| `defalut` | 需要添加徽标的内容 |
-| `count`   | 自定义徽标         |
+#### Props
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `dot` | 圆点徽标 | `boolean` | `false`  | ✅ | - |
+| `count` | 数值徽标的值 | `number\|string` | `0` | - | - |
+| `overflowCount` | 最大数值徽标的值 | `number\|string` | `99` | ✅ | 超出以`${overflowCount}+`显示 |
+| `showZero`| 数值为 0 时是否显示 | `boolean` | `false` | ✅ | - |
+| `color` | 徽标的颜色 | `string` | - | - | 数值徽标和圆点徽标为设置背景色，组件徽标为字体颜色 |
+
+### Slots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `defalut` | 需要添加徽标的内容 | - | - |
+| `count`   | 自定义徽标 | - | - |
diff --git a/packages/components/badge/src/Badge.vue b/packages/components/badge/src/Badge.vue
index 1f49ca61b..78b069ba9 100644
--- a/packages/components/badge/src/Badge.vue
+++ b/packages/components/badge/src/Badge.vue
@@ -8,13 +8,13 @@
   </span>
 </template>
 <script lang="ts">
+import type { ComputedRef } from 'vue'
+import type { BadgeProps, SlotsExist } from './types'
+
 import { computed, defineComponent, onUpdated, reactive } from 'vue'
 import { isNumeric, PropTypes } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/core/config'
 
-import type { ComputedRef } from 'vue'
-import type { BadgeProps, SlotsExist } from './types'
-
 export default defineComponent({
   name: 'IxBadge',
   props: {
diff --git a/packages/components/button/docs/index.zh.md b/packages/components/button/docs/index.zh.md
index 9ec263b4e..68b21dab6 100644
--- a/packages/components/button/docs/index.zh.md
+++ b/packages/components/button/docs/index.zh.md
@@ -31,24 +31,28 @@ cover:
 
 ### `ix-button`
 
+#### Props
+
 > 当 `mode` 不为 `link` 时，除以下表格之外还支持原生 `button` 元素的[所有属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button)。
 > 当 `mode` 为 `link` 时，除以下表格之外还支持原生 `a` 元素的[所有属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a)。
 
-| 属性 | 说明 | 类型  | 全局配置| 默认值| 备注 |
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `mode` | 设置按钮种类 | `primary\|default\|dashed\|text\|link` | `default` | - |- |
+| `mode` | 设置按钮种类 | `primary\|default\|dashed\|text\|link` | `default` | ✅ |- |
 | `danger` | 设置危险状态 | `boolean` | - | - |- |
 | `ghost` | 设置幽灵状态 | `boolean` | - | - |- |
 | `disabled` | 设置禁用状态 | `boolean` | - | - |- |
 | `loading` | 设置加载中状态 | `boolean` |  - | - |- |
-| `size` | 设置按钮大小 | `large\|medium\|small` | `medium` | - |- |
+| `size` | 设置按钮大小 | `large\|medium\|small` | `medium` | ✅ |- |
 | `shape` | 设置按钮形状 | `circle\|round` | - | - |- |
 | `block` | 将按钮宽度调整为自适应其父元素的宽度 | `boolean` | - | - |- |
 | `icon` | 设置图标类型 | `string` | - | - | `loading` 为 `true` 时无效 |
 
 ### `ix-button-group`
 
-| 属性 | 说明 | 类型  | 全局配置| 默认值| 备注 |
+#### GroupProps
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
 | `mode` | 设置组内按钮种类 | `primary\|default\|dashed\|text\|link` | - | - |- |
 | `size` | 设置组内按钮大小 | `large\|medium\|small` | - | - |- |
diff --git a/packages/components/button/src/Button.vue b/packages/components/button/src/Button.vue
index 1fed97f64..365bf5529 100644
--- a/packages/components/button/src/Button.vue
+++ b/packages/components/button/src/Button.vue
@@ -7,17 +7,17 @@
 </template>
 
 <script lang="ts">
+import type { ComputedRef, Ref } from 'vue'
+import type { ButtonConfig } from '@idux/components/core/config'
+import type { ButtonMode } from '@idux/components/core/types'
+import type { ButtonGroupProps, ButtonProps } from './types'
+
 import { computed, defineComponent, inject, onUpdated, ref } from 'vue'
 import { PropTypes } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/core/config'
 import { IxIcon } from '@idux/components/icon'
 import { buttonGroupInjectionKey } from './button'
 
-import type { ComputedRef, Ref } from 'vue'
-import type { ButtonConfig } from '@idux/components/core/config'
-import type { ButtonMode } from '@idux/components/core/types'
-import type { ButtonGroupProps, ButtonProps } from './types'
-
 export default defineComponent({
   name: 'IxButton',
   components: { IxIcon },
diff --git a/packages/components/divider/docs/index.zh.md b/packages/components/divider/docs/index.zh.md
index 8fa110bdf..596633dbc 100644
--- a/packages/components/divider/docs/index.zh.md
+++ b/packages/components/divider/docs/index.zh.md
@@ -17,10 +17,12 @@ cover:
 
 ### `ix-divider`
 
-| 属性 | 说明 | 类型 | 全局配置 | 默认值 | 备注 |
-| --- | :-- | --- | :-- | --- | --- |
-| `dashed` | 是否虚线 | boolean | false | - | - |
-| `plain` | 文字是否显示为普通正文样式 | boolean |false| - | - |
-| `position` | 文字显示位置 | `left`|`center`|`right` |`center`| - |-|
-| `type` | 水平分割线还是垂直分割线 | `horizontal`|`vertical` | - |`horizontal`|
-| `text` | 分割线显示文字 | `slot` |-| - | - |
+#### Props
+
+| 名称 | 说明 | 类型 | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `dashed` | 是否虚线 | `boolean` | `false` | ✅ | - |
+| `plain` | 文字是否显示为普通正文样式 | `boolean` | `false` | ✅ | - |
+| `position` | 文字显示位置 | `left\|center\|right` | `center`| ✅ | - |
+| `type` | 水平分割线还是垂直分割线 | `horizontal\|vertical` | `horizontal` | ✅ | - |
+| `text` | 分割线显示文字 | `slot` | - | - | - |
diff --git a/packages/components/icon/docs/index.zh.md b/packages/components/icon/docs/index.zh.md
index f65e76550..0669e2f34 100644
--- a/packages/components/icon/docs/index.zh.md
+++ b/packages/components/icon/docs/index.zh.md
@@ -14,17 +14,19 @@ cover:
 
 ### ix-icon
 
+#### Props
+
 > 当存在 @click 的时候，会被渲染为一个 `button` 元素，其他情况为 `i` 元素
 
-| 参数 | 说明 | 类型 | 全局配置 |
-| --- | --- | --- | --- |
-| `name`| 图标名称 | `string` |
-| `rotate` | 图标旋转角度, 为 `true` 时会循环旋转 | `boolean|number|string` | - |
-| `iconfont` | 图标是否来自 `iconfont` | `boolean` | - |
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `name`| 图标名称 | `string` | - | - | - |
+| `rotate` | 图标旋转角度, 为 `true` 时会循环旋转 | `boolean|number|string` | - | - | - |
+| `iconfont` | 图标是否来自 `iconfont` | `boolean` | - | - | - |
 
-### [helper]
+### 工具函数
 
-| 方法 | 说明 | 参数 |
-| --- | --- | --- |
-| `addIconDefinitions()` | 用于静态引入图标 | `IconDefinition[]` |
-| `fetchFromIconfont()` | 用于从 [`iconfont`](https://www.iconfont.cn) 获取图标资源文件 | `string|string[]` |
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `addIconDefinitions()` | 用于静态引入图标 | `IconDefinition[]` | - |
+| `fetchFromIconfont()` | 用于从 [`iconfont`](https://www.iconfont.cn) 获取图标资源文件 | `string|string[]` | - |
diff --git a/packages/components/icon/src/Icon.vue b/packages/components/icon/src/Icon.vue
index fc26baec5..68e6f9037 100644
--- a/packages/components/icon/src/Icon.vue
+++ b/packages/components/icon/src/Icon.vue
@@ -4,15 +4,15 @@
   </component>
 </template>
 <script lang="ts">
+import type { Ref, SetupContext } from 'vue'
+import type { IconConfig } from '@idux/components/core/config'
+import type { IconProps } from './types'
+
 import { computed, defineComponent, onMounted, onUpdated, ref, watch } from 'vue'
 import { isNumeric, PropTypes, withUndefined } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/core/config'
 import { clearSVGElement, loadIconFontSvgElement, loadSVGElement } from './utils'
 
-import type { Ref, SetupContext } from 'vue'
-import type { IconConfig } from '@idux/components/core/config'
-import type { IconProps } from './types'
-
 export default defineComponent({
   name: 'IxIcon',
   props: {
diff --git a/packages/components/image/docs/index.zh.md b/packages/components/image/docs/index.zh.md
index ae2d71f5e..63228a0cd 100644
--- a/packages/components/image/docs/index.zh.md
+++ b/packages/components/image/docs/index.zh.md
@@ -15,18 +15,20 @@ cover: 可预览的图片
 
 ## API
 
-| 属性 | 说明 | 类型  | 全局配置 |
+### `ix-image`
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| `src` | 图片地址 | `string` | - | - | - |
+| `width` | 图像宽度 | `string \| number` | - | ✅ | - |
+| `height` | 图像高度 | `string \| number` | - | ✅ | - |
+| `fallback` | 加载失败容错地址 | `string` | - | ✅ | - |
+| `preview` | 预览参数，为 `false` 时禁用 | `boolean` | - | - | - |
+| `alt` | 图像描述 | `string` | - | - | - |
+| `objectFit` | 确定图片如何适应容器框 | `string` | - | - | 同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)  |
+
+### Emits
+
+| 名称 | 说明 | 参数类型 | 备注 |
 | --- | --- | --- | --- |
-| alt | 图像描述| string | - |
-| fallback | 加载失败容错地址| string | - |
-|height|图像高度|string \| number|-|
-|preview|预览参数，为`false` 时禁用|boolean|-|
-|src|图片地址|string|-|
-|width|图像宽度|string \| number|-|
-|objectFit|确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)|string|-|
-
-### Events
-
-| 事件名称 | 说明 | 参数类型 |
-| --- | --- | --- |
-| statusChange | 图片加载状态改变时触发 | `loading\|loaded\|failed` |
+| `statusChange` | 图片加载状态改变时触发 | `loading\|loaded\|failed` | - |
diff --git a/packages/components/image/src/Image.vue b/packages/components/image/src/Image.vue
index 5df906de2..318989495 100644
--- a/packages/components/image/src/Image.vue
+++ b/packages/components/image/src/Image.vue
@@ -26,12 +26,12 @@
   </div>
 </template>
 <script lang="ts">
+import type { ImageProps, ImageStatus } from './types'
+
 import { defineComponent, computed, ref, watchEffect, watch } from 'vue'
-import { ImageProps, ImageStatus } from './types'
-import ImgPreview from './ImgPreview.vue'
+import { PropTypes, toCssPixel, withUndefined } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/core/config'
-import { toCssPixel } from '@idux/cdk/utils/convert'
-import { PropTypes, withUndefined } from '@idux/cdk/utils'
+import ImgPreview from './ImgPreview.vue'
 
 export default defineComponent({
   name: 'IxImage',
diff --git a/packages/components/image/src/ImgPreview.vue b/packages/components/image/src/ImgPreview.vue
index 0b87fb251..a7d400b31 100644
--- a/packages/components/image/src/ImgPreview.vue
+++ b/packages/components/image/src/ImgPreview.vue
@@ -31,10 +31,12 @@
 </template>
 
 <script lang="ts">
+import type { ImagePreviewProps } from './types'
+
 import { defineComponent, ref, computed } from 'vue'
-import { ImagePreviewProps } from './types'
-import { IxIcon } from '@idux/components/icon'
 import { PropTypes } from '@idux/cdk/utils'
+import { IxIcon } from '@idux/components/icon'
+
 const minScale = 0.2
 const initScale = 1.0
 const scaleStep = 0.1
diff --git a/scripts/gen/index.ts b/scripts/gen/index.ts
index c74ad4e70..a3276c3f5 100644
--- a/scripts/gen/index.ts
+++ b/scripts/gen/index.ts
@@ -81,7 +81,7 @@ if (moduleName === 'components') {
   writeFileSync(`${componentDirname}/__tests__/${camelCaseComponentName}.spec.ts`, testTemplate)
 }
 
-const docsZhTemplate = getDocsZhTemplate(upperFirstComponentName, moduleName)
+const docsZhTemplate = getDocsZhTemplate(compName, moduleName, upperFirstComponentName)
 writeFileSync(`${componentDirname}/docs/index.zh.md`, docsZhTemplate)
 
 const domeTemplate = getDomeTemplate(compName)
diff --git a/scripts/gen/template.ts b/scripts/gen/template.ts
index 9ca2ff941..9b187fa6f 100644
--- a/scripts/gen/template.ts
+++ b/scripts/gen/template.ts
@@ -97,11 +97,11 @@ describe('use${compName}.ts', () => {
 `
 }
 
-export function getDocsZhTemplate(compName: string, moduleName: string): string {
+export function getDocsZhTemplate(compName: string, moduleName: string, upperFirstName: string): string {
   return `---
 category: ${moduleName}
 type:
-title: ${compName}
+title: ${upperFirstName}
 subtitle:
 cover:
 ---
@@ -114,9 +114,13 @@ cover:
 
 ## API
 
-| 属性 | 说明 | 类型 | 默认值 |  | 全局配置 |
-| --- | --- | --- | --- | --- |
-| - | - | - | - | - |
+### ix-${compName}
+
+#### Props
+
+| 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
+| --- | --- | --- | --- | --- | --- |
+| - | - | - | - | ✅ | - |
 
 `
 }