From e20022b868466d053889769d5f03bb939f8c5fb2 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Thu, 30 Mar 2017 21:22:14 +0800
Subject: [PATCH] code review

---
 docs/assets/docs.css               |  10 +--
 docs/components/demo-block.vue     |   4 +-
 docs/examples-docs/badge.md        |  74 +++++++++++++---
 docs/examples-docs/card.md         |  36 +++++++-
 docs/examples-docs/cell.md         |  16 +++-
 docs/examples-docs/layout.md       |  50 +++++++++--
 docs/examples-docs/loading.md      |  98 ++++++++++++++-------
 docs/examples-docs/panel.md        |  38 ++++++++-
 docs/examples-docs/progress.md     |  50 +++++++++--
 docs/examples-docs/steps.md        |  43 +++++++++-
 docs/examples-docs/tag.md          |  50 +++++++++--
 packages/badge/src/badge-group.vue |   6 ++
 packages/badge/src/badge.vue       |  29 ++++---
 packages/card/src/card.vue         |   2 +-
 packages/progress/src/progress.vue |  22 ++---
 packages/steps/src/steps.vue       |  28 +++---
 packages/zanui-css/src/badge.css   | 132 +++++++++++++++--------------
 packages/zanui-css/src/card.css    |   4 +-
 packages/zanui-css/src/steps.css   |  13 ++-
 packages/zanui-css/src/tag.css     |   3 +
 20 files changed, 522 insertions(+), 186 deletions(-)

diff --git a/docs/assets/docs.css b/docs/assets/docs.css
index a5a1c852a..f50fa2246 100644
--- a/docs/assets/docs.css
+++ b/docs/assets/docs.css
@@ -41,13 +41,13 @@ ul, ol {
   list-style: none;
 }
 
-.hljs {
-  line-height: 1.8;
+code.hljs {
+  line-height: 1.5;
   font-family: Menlo, Monaco, Consolas, Courier, monospace;
   font-size: 12px;
-  padding: 18px 24px;
-  background-color: #f9fafc;
-  border: solid 1px #eaeefb;
+  padding: 20px;
+  background-color: #f8f8f8;
+  border: solid 1px #E5E5E5;
   margin-bottom: 25px;
   border-radius: 4px;
   -webkit-font-smoothing: auto;
diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue
index d9e9dc495..50dfb211e 100644
--- a/docs/components/demo-block.vue
+++ b/docs/components/demo-block.vue
@@ -30,8 +30,8 @@ export default {
     .examples {
       width: 320px;
       box-sizing: border-box;
-      padding: 10px 0 0;
-      min-height: 200px;
+      padding: 10px 0;
+      min-height: 60px;
       max-height: 500px;
       overflow: auto;
       background-color: #F8F8F8;
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
index 9b572b20d..c0035bc63 100644
--- a/docs/examples-docs/badge.md
+++ b/docs/examples-docs/badge.md
@@ -1,7 +1,3 @@
-## Badge 徽章
-
-### 基础用法
-
 <script>
   export default {
     data() {
@@ -17,13 +13,68 @@
   };
 </script>
 
+## Badge 徽章
+
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Badge`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Badge`组件了：
+
+```js
+import Vue from 'vue';
+import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/badge.css';
+
+Vue.component(Badge.name, Badge);
+Vue.component(BadgeGroup.name, BadgeGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Badge`组件，这样只能在你注册的组件中使用`Badge`：
+
+```js
+import { Badge, BadgeGroup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-badge': Badge,
+    'zan-badge-group': BadgeGroup
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况下激活第一个`badge`。
+
 :::demo 基础用法
 ```html
-<zan-badge-group :active-key="activeKey">
-  <zan-badge mark="0" title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
-  <zan-badge mark="1" title="花式寿司" info="99" @click="onItemClick"></zan-badge>
-  <zan-badge mark="2" title="火炽寿司" @click="onItemClick"></zan-badge>
-  <zan-badge mark="3" title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+<zan-badge-group>
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
+</zan-badge-group>
+```
+:::
+
+#### 选中某个badge
+
+如果想默认选中某个`badge`，你可以在`zan-badge-group`上设置`activeKey`属性，属性值为对应的`badge`索引。
+
+:::demo 选中某个badge
+```html
+<zan-badge-group :active-key="2">
+  <zan-badge title="热销榜" info="8" url="http://baidu.com" @click="onItemClick"></zan-badge>
+  <zan-badge title="花式寿司" info="99" @click="onItemClick"></zan-badge>
+  <zan-badge title="火炽寿司" @click="onItemClick"></zan-badge>
+  <zan-badge title="手握寿司" info="199" @click="onItemClick"></zan-badge>
 </zan-badge-group>
 ```
 :::
@@ -38,7 +89,6 @@
 ### z-badge API
 | 参数       | 说明      | 类型       | 默认值       | 必须       |
 |-----------|-----------|-----------|-------------|-------------|
-| mark | badge的唯一key值 | `string`  | `''`          | `required`         |
 | title | badge的文案标题 | `string`  | `''`          | `required`          |
-| info | 当前badge的提示消息数量 | `string`  | `''`         |           |
-| url | 跳转链接 | `string`  | 全连接直接跳转或者hash          |           |
+| info | 当前badge的提示消息 | `string`  | `''`         |           |
+| url | 跳转链接 | `string`  | 链接直接跳转或者hash          |           |
diff --git a/docs/examples-docs/card.md b/docs/examples-docs/card.md
index 09cdb975f..624341f95 100644
--- a/docs/examples-docs/card.md
+++ b/docs/examples-docs/card.md
@@ -1,6 +1,38 @@
 ## Card 图文组件
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Card`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Card`组件了：
+
+```js
+import Vue from 'vue';
+import { Card } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/card.css';
+
+Vue.component(Card.name, Card);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Card`组件，这样只能在你注册的组件中使用`Card`：
+
+```js
+import { Card } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-card': Card
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 当没有底部按钮时，右侧内容会居中显示。
 
@@ -14,7 +46,7 @@
 ```
 :::
 
-### 高级用法
+#### 高级用法
 
 可以使用具名`slot`重写标题等信息，其中包含`title`、`desc`、`footer`和`tag`四个`slot`。
 
diff --git a/docs/examples-docs/cell.md b/docs/examples-docs/cell.md
index d9a7450a6..7256d2327 100644
--- a/docs/examples-docs/cell.md
+++ b/docs/examples-docs/cell.md
@@ -1,8 +1,16 @@
 <style>
-.official-img {
-  width: 31px;
-  vertical-align: middle;
-  border: 0;
+@component-namespace demo {
+  @b card {
+    .official-img {
+      width: 31px;
+      vertical-align: middle;
+      border: 0;
+    }
+
+    .examples {
+      background-color: #fff;
+    }
+  }
 }
 </style>
 
diff --git a/docs/examples-docs/layout.md b/docs/examples-docs/layout.md
index f9a7af23a..6d980b0ef 100644
--- a/docs/examples-docs/layout.md
+++ b/docs/examples-docs/layout.md
@@ -21,12 +21,49 @@
 </style>
 
 ## Layout 布局
-主要提供了 zan-row 和 zan-col 两个组件来进行行列布局
 
-### 常规用法
-Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比（span / 24）；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+主要提供了`zan-row`和`zan-col`两个组件来进行行列布局。
 
-:::demo
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Row`和`Col`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Row`和`Col`组件了：
+
+```js
+import Vue from 'vue';
+import { Row, Col } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/col.css';
+import '@youzan/zanui-vue/lib/zanui-css/row.css';
+
+Vue.component(Row.name, Row);
+Vue.component(Col.name, Col);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Row`和`Col`组件，这样只能在你注册的组件中使用`Row`和`Col`：
+
+```js
+import { Row, Col } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-row': Row,
+    'zan-col': Col
+  }
+};
+```
+
+### 代码演示
+
+#### 常规用法
+
+Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设置列所占的宽度百分比`(span / 24)`；此外，添加`offset`属性可以设置列的偏移宽度，计算方式与span相同。
+
+:::demo 常规用法
 ```html
 <zan-row>
   <zan-col span="8">
@@ -47,10 +84,11 @@ Layout组件提供了`24列栅格`，通过在`zan-col`上添加`span`属性设
 ```
 :::
 
-### 在列元素之间增加间距
+#### 在列元素之间增加间距
+
 列元素之间默认间距为0，如果希望在列元素增加相同的间距，可以在`zan-row`上添加`gutter`属性来设置列元素之间的间距。
 
-:::demo
+:::demo 在列元素之间增加间距
 ```html
 <zan-row gutter="10">
   <zan-col span="8">
diff --git a/docs/examples-docs/loading.md b/docs/examples-docs/loading.md
index 5691d8fb8..cfdca181b 100644
--- a/docs/examples-docs/loading.md
+++ b/docs/examples-docs/loading.md
@@ -1,49 +1,83 @@
 <style>
-.demo-loading__example{
-  width: 30px;
-  height: 30px;
-  padding: 20px;
-  margin: auto;
-  border-radius: 5px;
-  border: 1px solid transparent;
-}
+@component-namespace demo {
+  @b loading {
+    .zan-loading {
+      margin: 0 auto;
+    }
 
-.demo-loading__example--with-bg {
-  background-color: rgba(0, 0, 0, 0.5);
-}
+    .circle-loading {
+      margin: 20px auto;
+    }
 
-.demo-loading {
-  padding: 0 20px;
+    .demo-loading__example--with-bg {
+      background-color: rgba(0, 0, 0, 0.5);
+      margin-bottom: 10px;
+    }
+  }
 }
 </style>
 
 ## Loading 加载
 
-### 基础用法
+### 使用指南
 
-:::demo 基础用法
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Loading`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Loading`组件了：
+
+```js
+import Vue from 'vue';
+import { Loading } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/loading.css';
+
+Vue.component(Loading.name, Loading);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Loading`组件，这样只能在你注册的组件中使用`Loading`：
+
+```js
+import { Loading } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-loading': Loading
+  }
+};
+```
+
+### 代码演示
+
+#### 渐变深色spinner
+
+:::demo 渐变深色spinner
 ```html
-<div class="demo-loading">
-  <h2 class="demo-sub-title">渐变深色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">渐变浅色spinner</h2>
-  <div class="demo-loading__example demo-loading__example--with-bg">
-    <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'white'"></zan-loading>
-  </div>
-  <h2 class="demo-sub-title">单色spinner</h2>
-  <div class="demo-loading__example">
-    <zan-loading class="some-customized-class" :type="'circle'" :color="'black'"></zan-loading>
-  </div>
+<zan-loading class="some-customized-class"></zan-loading>
+```
+:::
+
+#### 渐变浅色spinner
+
+:::demo
+```html
+<div class="demo-loading__example demo-loading__example--with-bg">
+  <zan-loading class="some-customized-class" :color="'white'"></zan-loading>
 </div>
 ```
 :::
 
+#### 单色spinner
+
+:::demo
+```html
+<zan-loading class="circle-loading" :type="'circle'" :color="'white'"></zan-loading>
+<zan-loading class="circle-loading" :type="'circle'" :color="'black'"></zan-loading>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
diff --git a/docs/examples-docs/panel.md b/docs/examples-docs/panel.md
index e551e43e8..12bae1f50 100644
--- a/docs/examples-docs/panel.md
+++ b/docs/examples-docs/panel.md
@@ -31,9 +31,41 @@
 
 ## Panel 面板
 
-面板只是一个容器，里面可以放入自定义的内容。
+### 使用指南
 
-### 基础用法
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Panel`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Panel`组件了：
+
+```js
+import Vue from 'vue';
+import { Panel } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/panel.css';
+
+Vue.component(Panel.name, Panel);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Panel`组件，这样只能在你注册的组件中使用`Panel`：
+
+```js
+import { Panel } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-panel': Panel
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+面板只是一个容器，里面可以放入自定义的内容。
 
 :::demo 基础用法
 ```html
@@ -45,7 +77,7 @@
 ```
 :::
 
-### 高级用法
+#### 高级用法
 
 使用具名`slot`自定义内容。
 
diff --git a/docs/examples-docs/progress.md b/docs/examples-docs/progress.md
index b132611df..6dbd829e8 100644
--- a/docs/examples-docs/progress.md
+++ b/docs/examples-docs/progress.md
@@ -12,7 +12,41 @@
 
 ## Progress 进度条
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Progress`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Progress`组件了：
+
+```js
+import Vue from 'vue';
+import { Progress } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/progress.css';
+
+Vue.component(Progress.name, Progress);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Progress`组件，这样只能在你注册的组件中使用`Progress`：
+
+```js
+import { Progress } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-progress': Progress
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+默认情况进度条为蓝色，使用`percentage`属性来设置当前进度。
 
 :::demo 基础用法
 ```html
@@ -29,7 +63,10 @@
 :::
 
 
-### Inactive
+#### Inactive
+
+是否置灰进度条，一般用于进度条被取消时。
+
 :::demo Inactive
 ```html
 <div class="demo-progress__wrapper">
@@ -45,8 +82,11 @@
 :::
 
 
-### 自定义颜色和文字
-:::demo 自定义颜色
+#### 自定义颜色和文字
+
+可以使用`pivot-text`属性自定义文字，`color`属性自定义进度条颜色
+
+:::demo 自定义颜色和文字
 ```html
 <div class="demo-progress__wrapper">
   <zan-progress class="demo-progress__demo1" pivot-text="红色" color="#ed5050" :percentage="26"></zan-progress>
@@ -64,7 +104,7 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| inactive | 是否只会 | `boolean`  | `false`          | `true`, `false`    |
+| inactive | 是否置灰 | `boolean`  | `false`          | `true`, `false`    |
 | percentage | 进度百分比 | `number`  | `false`          | `0-100`    |
 | pivotText | 文字显示 | `string`  | 百分比文字          | -   |
 | color | 进度条颜色 | `string`  | `#38f`    | hexvalue   |
diff --git a/docs/examples-docs/steps.md b/docs/examples-docs/steps.md
index b5beffa8e..de9eb5699 100644
--- a/docs/examples-docs/steps.md
+++ b/docs/examples-docs/steps.md
@@ -30,11 +30,45 @@ export default {
 
 ## Steps 步骤条
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Steps`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Steps`组件了：
+
+```js
+import Vue from 'vue';
+import { Steps, Step } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/steps.css';
+
+Vue.component(Steps.name, Steps);
+Vue.component(Step.name, Step);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Steps`组件，这样只能在你注册的组件中使用`Steps`：
+
+```js
+import { Steps, Step } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-steps': Steps,
+    'zan-step': Step
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
-<zan-steps :active="active" icon="certificate" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
+<zan-steps :active="active" icon="logistics" icon-class="steps-success" title="等待商家发货" description="等待商家发货等待商家发货等待商家发货等待商家发货等待商家发货">
   <zan-step>买家下单</zan-step>
   <zan-step>商家接单</zan-step>
   <zan-step>买家提货</zan-step>
@@ -61,7 +95,9 @@ export default {
 ```
 :::
 
-### 只显示步骤条
+#### 只显示步骤条
+
+当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
 
 :::demo 只显示步骤条
 ```html
@@ -89,5 +125,6 @@ export default {
 
 | 名称       | 说明      |
 |-----------|-----------|
+| icon | 自定义icon区域 |
 | message-extra | 状态栏添加额外的元素 |
 
diff --git a/docs/examples-docs/tag.md b/docs/examples-docs/tag.md
index a1a2b89c8..d7f1af015 100644
--- a/docs/examples-docs/tag.md
+++ b/docs/examples-docs/tag.md
@@ -10,13 +10,47 @@
 
 ## Tag 标记
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Tag`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Tag`组件了：
+
+```js
+import Vue from 'vue';
+import { Tag } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/tag.css';
+
+Vue.component(Tag.name, Tag);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Tag`组件，这样只能在你注册的组件中使用`Tag`：
+
+```js
+import { Tag } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-tag': Tag
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
+
+`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
 
 :::demo 基础用法
 ```html
 <div class="tags-container">
   <zan-tag>返现</zan-tag>
-  <zan-tag :plain="true">返现</zan-tag>
+  <zan-tag plain>返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
@@ -26,24 +60,26 @@
 ```
 :::
 
-### 高级用法
+#### 高级用法
+
+设置`plain`为`true`时表示空心的`tag`，还可以设置`mark`为`true`，表示是否为标记。
 
 :::demo 高级用法
 ```html
 <div class="tags-container">
   <zan-tag type="danger">返现</zan-tag>
-  <zan-tag :plain="true" type="danger">返现</zan-tag>
+  <zan-tag plain type="danger">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="primary">返现</zan-tag>
-  <zan-tag :plain="true" type="primary">返现</zan-tag>
+  <zan-tag plain type="primary">返现</zan-tag>
 </div>
 <div class="tags-container">
   <zan-tag type="success">返现</zan-tag>
-  <zan-tag :plain="true" type="success">返现</zan-tag>
+  <zan-tag plain type="success">返现</zan-tag>
 </div>
 <div class="tags-container">
-  <zan-tag type="danger" :mark="true">返现</zan-tag>
+  <zan-tag type="danger" mark>返现</zan-tag>
 </div>
 ```
 :::
diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue
index 7e98f52fb..c9f5695b0 100644
--- a/packages/badge/src/badge-group.vue
+++ b/packages/badge/src/badge-group.vue
@@ -14,6 +14,12 @@
         type: [Number, String],
         default: 0
       }
+    },
+
+    data() {
+      return {
+        badges: []
+      };
     }
   };
 </script>
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
index 43f827f21..749f48819 100644
--- a/packages/badge/src/badge.vue
+++ b/packages/badge/src/badge.vue
@@ -1,5 +1,7 @@
 <template>
-    <a class="zan-badge" :class="classNames" :href="url" @click="handleClick">
+    <a class="zan-badge" :href="url" @click="handleClick" :class="{
+      'zan-badge--select': isSelect
+    }">
       <div class="zan-badge__active"></div>
       <div v-if="info" class="zan-badge__info">{{info}}</div>
       {{title}}
@@ -9,11 +11,8 @@
 <script>
 export default {
   name: 'zan-badge',
+
   props: {
-    mark: {
-      type: [Number, String],
-      required: true
-    },
     title: {
       type: String,
       required: true
@@ -26,22 +25,26 @@ export default {
       type: String
     }
   },
+
+  beforeCreate() {
+    this.$parent.badges.push(this);
+  },
+
+  computed: {
+    isSelect() {
+      const parent = this.$parent;
+      return parent.badges.indexOf(this) === parent.activeKey;
+    }
+  },
+
   methods: {
     handleClick(e) {
       this.$emit('click', e, {
-        mark: this.mark,
         title: this.title,
         url: this.url,
         info: this.info
       });
     }
-  },
-  computed: {
-    classNames() {
-      return {
-        'is-select': this.mark === this.$parent.activeKey
-      };
-    }
   }
 };
 </script>
diff --git a/packages/card/src/card.vue b/packages/card/src/card.vue
index 4725242e1..d42f10a6a 100644
--- a/packages/card/src/card.vue
+++ b/packages/card/src/card.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="zan-card">
     <img :src="thumb" alt="" class="zan-card__img">
-    <div class="zan-card__content" :class="{'is-center': !this.$slots.footer}">
+    <div class="zan-card__content" :class="{'zan-card__content--center': !this.$slots.footer}">
       <div class="zan-card__info">
         <slot name="title">
           <h4 v-text="title" class="zan-card__title"></h4>
diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 7ad45059b..0222f480c 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -2,7 +2,7 @@
   <div class="zan-progress">
     <div class="zan-progress__bar">
       <span class="zan-progress__bar__finished-portion" :style="{backgroundColor: componentColor, width: percentage + '%'}"></span>
-      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{currentPivotText}}</span>
+      <span class="zan-progress__bar__pivot" :style="pivotStyle">{{ pivotText }}</span>
     </div>
   </div>
 </template>
@@ -21,6 +21,11 @@
  * @example
  * <zan-switch checked="true" disabled="false"></zan-switch>
  */
+
+const DEFAULT_COLOR = '#38f';
+const DEFAULT_TEXT_COLOR = '#fff';
+const INACTIVE_COLOR = '#cacaca';
+
 export default {
   name: 'zan-progress',
 
@@ -32,32 +37,29 @@ export default {
         return value <= 100 && value >= 0;
       }
     },
-    inactive: {
-      type: Boolean,
-      default: false
-    },
+    inactive: Boolean,
     pivotText: {
       type: String,
       default: function() {
-        return this.percentage.toString() + '%';
+        return this.percentage + '%';
       }
     },
     color: {
       type: String,
-      default: '#38f'
+      default: DEFAULT_COLOR
     },
     textColor: {
       type: String,
-      default: '#fff'
+      default: DEFAULT_TEXT_COLOR
     }
   },
 
   computed: {
     currentPivotText() {
-      return this.pivotText ? this.pivotText : this.this.percentage.toString() + '%';
+      return this.pivotText ? this.pivotText : this.percentage + '%';
     },
     componentColor() {
-      return this.inactive ? '#cacaca' : this.color;
+      return this.inactive ? INACTIVE_COLOR : this.color;
     },
     pivotStyle() {
       const pivotStyle = {
diff --git a/packages/steps/src/steps.vue b/packages/steps/src/steps.vue
index 336f91c9f..50607528a 100644
--- a/packages/steps/src/steps.vue
+++ b/packages/steps/src/steps.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="zan-steps" :class="`zan-steps--${steps.length}`">
-    <div class="zan-steps__status" v-if="icon">
-      <i class="zan-icon zan-steps__icon" :class="computedIconClass"></i>
+    <div class="zan-steps__status" v-if="title || description">
+      <div class="zan-steps__icon" v-if="icon || $slot.icon">
+        <slot name="icon">
+          <zan-icon :name="icon" :class="iconClass"></zan-icon>
+        </slot>
+      </div>
       <div class="zan-steps__message">
         <div class="zan-steps__message-wrapper">
           <h4 class="zan-steps__title" v-text="title"></h4>
@@ -11,16 +15,24 @@
       <slot name="message-extra">
       </slot>
     </div>
-    <div class="zan-steps__items">
+    <div class="zan-steps__items" :class="{
+      'zan-steps__items--alone': !title && !description
+    }">
       <slot></slot>
     </div>
   </div>
 </template>
 
 <script>
+import Icon from 'packages/icon';
+
 export default {
   name: 'zan-steps',
 
+  components: {
+    'zan-icon': Icon
+  },
+
   props: {
     active: Number,
     icon: String,
@@ -32,16 +44,6 @@ export default {
     description: String
   },
 
-  computed: {
-    computedIconClass() {
-      const iconName = `zan-icon-${this.icon}`;
-      const result = this.iconClass.split(' ');
-      result.push(iconName);
-
-      return result;
-    }
-  },
-
   data() {
     return {
       steps: []
diff --git a/packages/zanui-css/src/badge.css b/packages/zanui-css/src/badge.css
index 6c88ba3e3..e31774330 100644
--- a/packages/zanui-css/src/badge.css
+++ b/packages/zanui-css/src/badge.css
@@ -2,70 +2,76 @@
 @import './mixins/border_retina.css';
 
 @component-namespace zan {
-    @b badge-group {
-        position: relative;
-        width: 85px;
-        &::after {
-          @mixin border-retina (top);
-        }
+  @b badge-group {
+    position: relative;
+    width: 85px;
+    &::after {
+      @mixin border-retina (top);
     }
-    @b badge {
+  }
+
+  @b badge {
+    display: block;
+    overflow: hidden;
+    position: relative;
+    padding: 20px 12px;
+    box-sizing: border-box;
+    line-height: 1.4;
+    background-color: $c-background;
+    color: $c-gray-darker;
+    font-size: 14px;
+    text-decoration: none;
+    word-break: break-all;
+
+    @m select {
+      font-weight: bold;
+      color: $c-black;
+      background-color: $c-white;
+      .zan-badge__active {
         display: block;
-        overflow: hidden;
-        position: relative;
-        padding: 20px 12px;
-        box-sizing: border-box;
-        line-height: 1.4;
-        background-color: $c-background;
-        color: $c-gray-darker;
-        font-size: 14px;
-        text-decoration: none;
-        word-break: break-all;
-        @e active {
-            display: none;
-            position: absolute;
-            left: 0;
-            top: 0;
-            width: 3px;
-            height: 100%;
-            background-color: #FF4444;
-        }
-        @e info {
-            position: absolute;
-            top: 2px;
-            right: 2px;
-            font-size: 10px;
-            transform:scale(0.8);
-            text-align: center;
-            box-sizing: border-box;
-            padding: 0 6px;
-            min-width: 18px;
-            height: 18px;
-            line-height: 18px;
-            border-radius: 9px;
-            background-color: #FF4444;
-            color: $c-white;
-        }
-        @when select {
-            font-weight: bold;
-            color: $c-black;
-            background-color: $c-white;
-            .zan-badge__active {
-                display: block;
-            }
-            &::after {
-                @mixin border-retina (top);
-                @mixin border-retina (right);
-                @mixin border-retina (left);
-            }
-        }
-        &::after {
-          @mixin border-retina (bottom);
-        }
-        &:last-child {
-          &::after {
-            border-bottom: 0;
-          }
-        }
+      }
+      &::after {
+        @mixin border-retina (top);
+        @mixin border-retina (right);
+        @mixin border-retina (left);
+      }
     }
+
+    @e active {
+      display: none;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 3px;
+      height: 100%;
+      background-color: #FF4444;
+    }
+
+    @e info {
+      position: absolute;
+      top: 2px;
+      right: 2px;
+      font-size: 10px;
+      transform:scale(0.8);
+      text-align: center;
+      box-sizing: border-box;
+      padding: 0 6px;
+      min-width: 18px;
+      height: 18px;
+      line-height: 18px;
+      border-radius: 9px;
+      background-color: #FF4444;
+      color: $c-white;
+    }
+
+    &::after {
+      @mixin border-retina (bottom);
+    }
+
+    &:last-child {
+      &::after {
+        border-bottom: 0;
+      }
+    }
+  }
 }
diff --git a/packages/zanui-css/src/card.css b/packages/zanui-css/src/card.css
index 95d722c9d..9939d734a 100644
--- a/packages/zanui-css/src/card.css
+++ b/packages/zanui-css/src/card.css
@@ -15,7 +15,7 @@
 
     @e img {
       width: 90px;
-      height: 90px;
+      height: auto;
       border: 0;
       position: absolute;
       top: 5px;
@@ -26,7 +26,7 @@
       display: table;
       width: 100%;
 
-      @when center {
+      @m center {
         display: table;
         height: 90px;
 
diff --git a/packages/zanui-css/src/steps.css b/packages/zanui-css/src/steps.css
index 684a1a25d..0a509d67c 100644
--- a/packages/zanui-css/src/steps.css
+++ b/packages/zanui-css/src/steps.css
@@ -20,12 +20,15 @@
     }
 
     @e icon {
-      font-size: 40px;
-      line-height: 1;
       float: left;
       margin-right: 10px;
     }
 
+    .zan-icon {
+      font-size: 40px;
+      line-height: 1;
+    }
+
     @e message {
       display: table;
       height: 40px;
@@ -53,8 +56,12 @@
     @e items {
       margin: 0 0 10px;
       overflow: hidden;
-      padding-bottom: 20px;
       position: relative;
+      padding-bottom: 20px;
+
+      @m alone {
+        padding-top: 10px;
+      }
     }
   }
 
diff --git a/packages/zanui-css/src/tag.css b/packages/zanui-css/src/tag.css
index e3d656ebc..45ad0277f 100644
--- a/packages/zanui-css/src/tag.css
+++ b/packages/zanui-css/src/tag.css
@@ -23,6 +23,7 @@
       &::after {
         border-color: $c-green;
       }
+
       @when plain {
         color: $c-green;
       }
@@ -34,6 +35,7 @@
       &::after {
         border-color: $button-danger-background-color;
       }
+
       @when plain {
         color: $button-danger-background-color;
       }
@@ -45,6 +47,7 @@
       &::after {
         border-color: $c-blue;
       }
+
       @when plain {
         color: $c-blue;
       }