DevCloudFE · kagol · Apr 9, 2022 · Apr 9, 2022 · Apr 9, 2022 · Apr 9, 2022
diff --git a/packages/devui-vue/docs/components/accordion/index.md b/packages/devui-vue/docs/components/accordion/index.md
@@ -2,7 +2,7 @@
 
 为页面提供导航的组件。
 
-### 何时使用
+#### 何时使用
 
 需要通过分组组织菜单的时候使用。
 

diff --git a/packages/devui-vue/docs/components/alert/index.md b/packages/devui-vue/docs/components/alert/index.md
@@ -2,7 +2,7 @@
 
 显示警告信息，需要用户关注的信息的组件。
 
-### 何时使用
+#### 何时使用
 
 当页面需要向用户发出警告信息时。
 

diff --git a/packages/devui-vue/docs/components/anchor/index.md b/packages/devui-vue/docs/components/anchor/index.md
@@ -2,7 +2,7 @@
 
 跳转到页面指定位置的组件。
 
-### 何时使用
+#### 何时使用
 
 需要在页面的各个部分之间实现快速跳转时。
 

diff --git a/packages/devui-vue/docs/components/auto-complete/index.md b/packages/devui-vue/docs/components/auto-complete/index.md
@@ -2,7 +2,7 @@
 
 联想用户可能需要的输入结果。
 
-### 何时使用
+#### 何时使用
 
 当需要根据用户输入的部分字符推断出他可能想要输入的内容时。
 

diff --git a/packages/devui-vue/docs/components/avatar/index.md b/packages/devui-vue/docs/components/avatar/index.md
@@ -2,7 +2,7 @@
 
 显示用户头像的组件。
 
-### 何时使用
+#### 何时使用
 
 当需要显示用户头像时。
 

diff --git a/packages/devui-vue/docs/components/back-top/index.md b/packages/devui-vue/docs/components/back-top/index.md
@@ -2,7 +2,7 @@
 
 返回页面顶部的操作按钮。
 
-### 何时使用
+#### 何时使用
 
 当页面内容区域比较长时；当用户需要频繁返回顶部查看相关内容时。
 

diff --git a/packages/devui-vue/docs/components/breadcrumb/index.md b/packages/devui-vue/docs/components/breadcrumb/index.md
@@ -2,7 +2,7 @@
 
 显示当前页面层级的组件。
 
-### 何时使用
+#### 何时使用
 
 1. 用户需要了解当前出于什么层级时；
 2. 用户需要快速返回之前的层级时；

diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md
@@ -139,33 +139,31 @@ export default {
 
 ### Button 参数
 
-| 参数     | 类型                              | 默认        | 说明                  | 跳转 Demo                 |
-| -------- | --------------------------------- | ----------- | --------------------- | ------------------------- |
-| variant  | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态        | [形态](#形态)     |
+| 参数名   | 类型                              | 默认        | 说明                  | 跳转 Demo                 |
+| :------- | :-------------------------------- | :---------- | :-------------------- | :------------------------ |
+| variant  | [IButtonVariant](#ibuttonvariant) | 'outline'   | 可选，按钮形态        | [形态](#形态)             |
 | color    | [IButtonColor](#ibuttoncolor)     | 'secondary' | 可选，按钮主题        | [主题色](#主题色)         |
-| size     | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸        | [尺寸](#尺寸)     |
-| icon     | `string`                          | --          | 可选，自定义按钮图标  | [图标按钮](#图标按钮)             |
+| size     | [IButtonSize](#ibuttonsize)       | 'md'        | 可选，按钮尺寸        | [尺寸](#尺寸)             |
+| icon     | `string`                          | --          | 可选，自定义按钮图标  | [图标按钮](#图标按钮)     |
 | disabled | `boolean`                         | false       | 可选，是否禁用 button | [禁用状态](#禁用状态)     |
 | loading  | `boolean`                         | false       | 可选，设置加载中状态  | [加载中状态](#加载中状态) |
 
 ### 类型
 
-<br>
-
 #### IButtonVariant
 
-```typescript
+```ts
 type IButtonVariant = 'solid' | 'outline' | 'text';
 ```
 
 #### IButtonSize
 
-```typescript
+```ts
 type IButtonSize = 'lg' | 'md' | 'sm' | 'xs';
 ```
 
 #### IButtonColor
 
-```typescript
-type IButtonColor = 'secondary' | 'primary' | 'danger';
+```ts
+type IButtonColor = 'primary' | 'secondary' | 'danger';
 ```
diff --git a/packages/devui-vue/docs/components/card/index.md b/packages/devui-vue/docs/components/card/index.md
@@ -2,7 +2,7 @@
 
 通用卡片容器。
 
-### 何时使用
+#### 何时使用
 
 基础卡片容器，其中可包含文字，列表，图片，段落，用于概览展示时。
 

diff --git a/packages/devui-vue/docs/components/carousel/index.md b/packages/devui-vue/docs/components/carousel/index.md
@@ -2,7 +2,7 @@
 
 一组轮播的区域。
 
-### 何时使用
+#### 何时使用
 
 1. 用于展示图片或者卡片。
 

diff --git a/packages/devui-vue/docs/components/cascader/index.md b/packages/devui-vue/docs/components/cascader/index.md
@@ -2,7 +2,7 @@
 
 下拉级联菜单。
 
-### 何时使用
+#### 何时使用
 
 1. 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
 2. 从一个较大的数据集合中进行选择时，用多级分类进行分隔，方便选择。

diff --git a/packages/devui-vue/docs/components/checkbox/index.md b/packages/devui-vue/docs/components/checkbox/index.md
@@ -2,7 +2,7 @@
 
 多选框。
 
-### 何时使用
+#### 何时使用
 
 1. 在一组选项中进行多项选择；
 2. 单独使用可以表示在两个状态之间切换，可以和提交操作结合。

diff --git a/packages/devui-vue/docs/components/color-picker/index.md b/packages/devui-vue/docs/components/color-picker/index.md
@@ -1,6 +1,6 @@
 # ColorPicker 颜色选择器
 
-### 何时使用
+#### 何时使用
 
 允许用户使用各种交互方法来选择颜色
 

diff --git a/packages/devui-vue/docs/components/comment/index.md b/packages/devui-vue/docs/components/comment/index.md
@@ -2,7 +2,7 @@
 
 对网站内容的反馈、评价和讨论。
 
-### 何时使用
+#### 何时使用
 
 评论组件可用于对事物的讨论，例如页面、博客文章、问题等等。
 

diff --git a/packages/devui-vue/docs/components/countdown/index.md b/packages/devui-vue/docs/components/countdown/index.md
@@ -2,7 +2,7 @@
 
 倒计时
 
-### 何时使用
+#### 何时使用
 
 当倒计时时使用
 

diff --git a/packages/devui-vue/docs/components/date-picker/index.md b/packages/devui-vue/docs/components/date-picker/index.md
@@ -2,7 +2,7 @@
 
 输入或选择日期的组件。
 
-### 何时使用
+#### 何时使用
 
 当用户需要输入一个日期时；需要点击标准输入框，弹出日期面板进行选择时。
 

diff --git a/packages/devui-vue/docs/components/dragdrop/index.md b/packages/devui-vue/docs/components/dragdrop/index.md
@@ -2,7 +2,7 @@
 
 拖拽组件。
 
-### 何时使用
+#### 何时使用
 
 当需要使用数个操作步骤，且步骤的顺序需要灵活调整时。
 

diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md
@@ -2,7 +2,7 @@
 
 具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
 
-### 何时使用
+#### 何时使用
 
 需要进行数据收集、数据校验、数据提交功能时。
 

diff --git a/packages/devui-vue/docs/components/fullscreen/index.md b/packages/devui-vue/docs/components/fullscreen/index.md
@@ -110,15 +110,15 @@ export default {
 
 ### Fullscreen 参数
 
-|  参数   |          类型           |   默认   | 说明               | 跳转 Demo                 |
-| :----- | :--------------------- | :------ | :----------------- | :------------------------- |
-| v-model |        `boolean`        |  false   | 可选，是否启动全屏 | [基本用法](#基本用法) |
-|  mode   | `'normal' \| 'immersive'`  | 'normal' | 可选，设置全屏模式 | [全屏模式](#全屏模式) |
-| z-index |        `number`         |    10    | 可选，设置全屏层级 | [基本用法](#基本用法) |
+| 参数名  | 类型                      | 默认     | 说明               | 跳转 Demo             |
+| :------ | :------------------------ | :------- | :----------------- | :-------------------- |
+| v-model | `boolean`                 | false    | 可选，是否启动全屏 | [基本用法](#基本用法) |
+| mode    | `'normal' \| 'immersive'` | 'normal' | 可选，设置全屏模式 | [全屏模式](#全屏模式) |
+| z-index | `number`                  | 10       | 可选，设置全屏层级 | [基本用法](#基本用法) |
 
 ### Fullscreen 插槽
 
-| 插槽名  | 说明                     | 参数                |
-| :------ | :----------------------- | :------------------ |
-| default | 默认插槽，全屏容器   | -- |
+| 插槽名  | 说明               | 参数 |
+| :------ | :----------------- | :--- |
+| default | 默认插槽，全屏容器 | --   |
 
diff --git a/packages/devui-vue/docs/components/gantt/index.md b/packages/devui-vue/docs/components/gantt/index.md
@@ -2,7 +2,7 @@
 
 甘特图。
 
-### 何时使用
+#### 何时使用
 
 当用户需要通过条状图来显示项目，进度和其他时间相关的系统进展的内在关系随着时间进展的情况时。
 

diff --git a/packages/devui-vue/docs/components/grid/index.md b/packages/devui-vue/docs/components/grid/index.md
@@ -1,7 +1,7 @@
 # Grid 栅格
 
 24栅格系统。
-### 何时使用
+#### 何时使用
 
 需要使用弹性布局时，并且需要适配不同的屏幕时，使用grid组件。
 

diff --git a/packages/devui-vue/docs/components/icon/index.md b/packages/devui-vue/docs/components/icon/index.md
@@ -2,43 +2,53 @@
 
 用于显示图标。
 
-### 何时使用
+#### 何时使用
 
 需要显示图标时。
 
-所有内置的图标可在DevUI官网进行查看：
-
-[https://devui.design/icon/ruleResource](https://devui.design/icon/ruleResource)
+所有内置的图标可在 DevUI 官网进行查看：[https://devui.design/icon/ruleResource](https://devui.design/icon/ruleResource)
 
 ### 基本用法
 
-:::demo 通过`name`属性，指定需要显示的图标。
+:::demo 通过`name`属性，指定需要显示的图标，支持 DevUI 图标库图标和 URL 形式的图标。
 
 ```vue
-<d-icon name="like"></d-icon>
-<d-icon name="https://devui.design/components/assets/logo.svg" size="16px"></d-icon>
+<template>
+  <div class="demo-spacing">
+    <d-icon name="like"></d-icon>
+    <d-icon name="https://devui.design/components/assets/logo.svg" size="16px"></d-icon>
+  </div>
+</template>
 ```
 
 :::
 
-### 图标颜色
+### 颜色
 
 :::demo 通过`color`属性指定图标的颜色。
 
 ```vue
-<d-icon name="right-o" color="#50d4ab"></d-icon>
-<d-icon name="error-o" color="#f95f5b"></d-icon>
+<template>
+  <div class="demo-spacing">
+    <d-icon name="right-o" color="#3DCCA6"></d-icon>
+    <d-icon name="error-o" color="#F66F6A"></d-icon>
+  </div>
+</template>
 ```
 
 :::
 
-### 图标大小
+### 尺寸
 
-:::demo 通过`size`属性，设置图标大小。
+:::demo 通过`size`属性，设置图标尺寸。
 
 ```vue
-<d-icon name="experice-new" size="32px"></d-icon>
-<d-icon name="experice-new" size="48px"></d-icon>
+<template>
+  <div class="demo-spacing">
+    <d-icon name="insert-image"></d-icon>
+    <d-icon name="insert-image" size="32px"></d-icon>
+  </div>
+</template>
 ```
 
 :::
@@ -49,42 +59,36 @@ Icon 组件默认引用 DevUI 图标库的图标，如果需要在现有 Icon
 
 ```css
 @font-face {
-  font-family: "my-icon";
-  src: url("./my-icon.ttf") format("truetype");
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
 }
 
 .my-icon {
-  font-family: "my-icon";
+  font-family: 'my-icon';
 }
 
 .my-icon-right::before {
-  content: "\E03F";
+  content: '\E03F';
 }
 ```
 
 引入字体图标的 css
 
 ```css
-@import "my-icon.css";
-```
-
-or
-
-```js
-import "my-icon.css";
+@import 'my-icon.css';
 ```
 
 使用
 
 ```html
-<d-icon class-prefix="my-icon" name="right" />
+<d-icon class-prefix="my-icon" name="right"></d-icon>
 ```
 
-### API
+### Icon 参数
 
-|    参数     |   类型   |   默认    | 说明                     | 跳转 Demo                         |
-| :---------: | :------: | :-------: | :----------------------- | --------------------------------- |
-|    name     | `String` |    --     | 必选，Icon 名称          | [基本用法](#基本用法)             |
-|    size     | `String` |  '16px'   | 可选，图标大小           | [基本用法](#基本用法)             |
-|    color    | `String` | '#252b3a' | 可选，图标颜色           | [基本用法](#基本用法)             |
+|    参数名     |   类型   |   默认    | 说明                     | 跳转 Demo                         |
+| :--------- | :------ | :------- | :----------------------- | :--------------------------------- |
+|    name     | `String` |    --     | 必选，图标名称          | [基本用法](#基本用法)             |
+|    size     | `String` |  '16px'   | 可选，图标尺寸           | [尺寸](#尺寸)             |
+|    color    | `String` | '#252b3a' | 可选，图标颜色           | [颜色](#颜色)             |
 | class-prefix | `String` |  'icon'   | 可选，自定义字体图标前缀 | [自定义字体图标](#自定义字体图标) |
diff --git a/packages/devui-vue/docs/components/image-preview/index.md b/packages/devui-vue/docs/components/image-preview/index.md
@@ -2,7 +2,7 @@
 
 预览一张或多张图片的组件。
 
-### 何时使用
+#### 何时使用
 
 需要根据用户传入进行图片预览展示或对容器内图片进行预览时。
 

diff --git a/packages/devui-vue/docs/components/input-icon/index.md b/packages/devui-vue/docs/components/input-icon/index.md
@@ -2,7 +2,7 @@
 
 文本输入框。
 
-### 何时使用
+#### 何时使用
 
 需要手动输入文字使用。
 

diff --git a/packages/devui-vue/docs/components/input-number/index.md b/packages/devui-vue/docs/components/input-number/index.md
@@ -2,7 +2,7 @@
 
 数字输入框组件。
 
-### 何时使用
+#### 何时使用
 
 当需要获取标准数值时。
 

diff --git a/packages/devui-vue/docs/components/input/index.md b/packages/devui-vue/docs/components/input/index.md
@@ -2,7 +2,7 @@
 
 文本输入框。
 
-### 何时使用
+#### 何时使用
 
 需要手动输入文字使用。