From 180dbb5cc0c1fa8aa49361ef732bd743c0c5624d Mon Sep 17 00:00:00 2001
From: olivewind <olive@olivewind.com>
Date: Fri, 21 Sep 2018 15:44:36 +0800
Subject: [PATCH] docs(*): unified code style

---
 Readme.md                                     |  2 +-
 examples/plugins/codemirror/index.js          |  1 +
 examples/plugins/i18n/en.js                   |  7 +-
 examples/plugins/i18n/zh.js                   |  9 ++-
 examples/view/components/code-block/index.vue |  5 +-
 .../view/components/docs-section/index.vue    |  1 +
 examples/view/components/docs-table/index.vue | 39 ++++++-----
 examples/view/demos/button/demo-1.vue         | 10 +--
 examples/view/demos/button/demo-2.vue         |  2 +-
 examples/view/demos/button/demo-3.vue         |  2 +-
 examples/view/demos/button/demo-4.vue         |  2 +-
 examples/view/demos/button/demo-5.vue         |  2 +-
 examples/view/demos/button/demo-6.vue         |  2 +-
 examples/view/demos/checkbox/demo-1.vue       | 54 ++++++---------
 examples/view/demos/checkbox/demo-2.vue       | 53 ++++++---------
 examples/view/demos/color/demo-1.vue          |  4 +-
 examples/view/demos/editable-list/demo-1.vue  |  9 ++-
 examples/view/demos/numeric-badge/demo-1.vue  |  2 +-
 examples/view/demos/numeric-badge/demo-2.vue  |  2 +-
 examples/view/demos/progress/demo-1.vue       |  2 +-
 examples/view/demos/progress/demo-2.vue       |  3 +-
 examples/view/demos/progress/demo-3.vue       |  3 +-
 examples/view/demos/setting-layout/demo-1.vue | 66 +++++++++---------
 examples/view/demos/setting-layout/demo-2.vue | 40 ++++++-----
 examples/view/demos/svg/demo-1.vue            |  3 +-
 examples/view/demos/switch/demo-1.vue         |  2 +-
 examples/view/demos/switch/demo-3.vue         |  2 +-
 examples/view/demos/switch/demo-5.vue         |  2 +-
 examples/view/demos/table/demo-1.vue          |  2 +-
 examples/view/demos/table/demo-2.vue          |  3 +-
 examples/view/demos/table/demo-3.vue          |  2 +-
 examples/view/page/components/color/index.vue | 36 ++--------
 .../page/components/editable-list/index.vue   | 12 ++--
 examples/view/page/components/index.vue       | 19 ++++--
 .../page/components/numeric-badge/index.vue   |  2 +-
 .../page/components/setting-layout/index.vue  |  2 +-
 .../view/page/components/switch/index.vue     |  2 +-
 examples/view/page/components/tab/index.vue   |  2 +-
 .../view/page/components/tooltip/index.vue    |  3 +-
 examples/view/page/index/index.vue            | 13 +++-
 examples/view/page/installation/index.vue     |  6 +-
 examples/view/router.js                       | 67 +++++++++----------
 42 files changed, 238 insertions(+), 264 deletions(-)

diff --git a/Readme.md b/Readme.md
index 7bd1b62a4..69481fa7b 100644
--- a/Readme.md
+++ b/Readme.md
@@ -29,7 +29,7 @@ Using npm:
 npm install dao-style --save
 ```
 
-Using a script tag for global use:
+Using html tag:
 
 ```html
 <script type="text/javascript" src="dao-style.min.js"></script>
diff --git a/examples/plugins/codemirror/index.js b/examples/plugins/codemirror/index.js
index f013ba2bd..591e49074 100644
--- a/examples/plugins/codemirror/index.js
+++ b/examples/plugins/codemirror/index.js
@@ -3,6 +3,7 @@ import VueCodemirror from 'vue-codemirror';
 /* eslint-disable */
 import 'codemirror/mode/vue/vue';
 import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/monokai.css';
 
diff --git a/examples/plugins/i18n/en.js b/examples/plugins/i18n/en.js
index 8953a1ef4..d3762e6eb 100644
--- a/examples/plugins/i18n/en.js
+++ b/examples/plugins/i18n/en.js
@@ -47,11 +47,16 @@ export default {
   method_name: 'Method Name',
   event_name: 'Event Name',
   slot_name: 'Slot Name',
-  show_more: 'Show More',
+  show_more: 'Load More...',
   index: {
     desc: 'A high quality UI Toolkit built on Vue.js.',
     cr: 'Build and Maintained Open‑Source by {company}',
   },
+  installationPage: {
+    use_npm: 'Using npm',
+    use_html: 'Using HTML tag',
+    usage: 'Usage',
+  },
   status: {
     component: 'Component',
     available: 'Available',
diff --git a/examples/plugins/i18n/zh.js b/examples/plugins/i18n/zh.js
index 3d15b00b6..ab38ab213 100644
--- a/examples/plugins/i18n/zh.js
+++ b/examples/plugins/i18n/zh.js
@@ -27,7 +27,7 @@ export default {
   steps: 'Steps 步骤条',
   svg: 'Svg 图标',
   'editable-list': 'Editable List 可编辑列表',
-  switch: 'Switch 开光',
+  switch: 'Switch 开关',
   tab: 'Tab 标签页',
   table: 'Table 表格',
   tooltip: 'Tooltip 提示',
@@ -47,11 +47,16 @@ export default {
   method_name: '方法名',
   event_name: '事件名',
   slot_name: '插槽名',
-  show_more: '查看更多',
+  show_more: '加载更多...',
   index: {
     desc: '基于 Vue.js 构建的高质量 UI 工具包',
     cr: '由 {company} 打造和维护',
   },
+  installationPage: {
+    use_npm: '使用 npm 安装',
+    use_html: '使用 HTML 标签引入',
+    usage: '使用',
+  },
   status: {
     component: '组件',
     available: '可用',
diff --git a/examples/view/components/code-block/index.vue b/examples/view/components/code-block/index.vue
index 438adc5fc..d6f5322d5 100644
--- a/examples/view/components/code-block/index.vue
+++ b/examples/view/components/code-block/index.vue
@@ -44,6 +44,9 @@ export default {
         case 'javascript':
           o.mode = 'text/javascript';
           break;
+        case 'scss':
+          o.mode = 'text/css';
+          break;
         default:
           o.mode = 'text/x-vue';
           break;
@@ -66,7 +69,7 @@ export default {
 .code-block{
   .CodeMirror{
     height: auto;
-    padding: 10px 20px;
+    padding: 6px 20px;
   }
   .CodeMirror-line {
     font-family: SF Mono,Monaco,Inconsolata,Fira Mono,Droid Sans Mono,Source Code Pro,monospace !important;
diff --git a/examples/view/components/docs-section/index.vue b/examples/view/components/docs-section/index.vue
index 1311e8974..7fb1b36a9 100644
--- a/examples/view/components/docs-section/index.vue
+++ b/examples/view/components/docs-section/index.vue
@@ -28,6 +28,7 @@ export default {
   }
   &>.content{
     padding: 20px 0;
+    overflow: auto;
   }
 }
 </style>
diff --git a/examples/view/components/docs-table/index.vue b/examples/view/components/docs-table/index.vue
index 90588f055..f77e50672 100644
--- a/examples/view/components/docs-table/index.vue
+++ b/examples/view/components/docs-table/index.vue
@@ -14,26 +14,26 @@
     <tbody >
       <tr v-for="(row, index) in rows" :key="index">
         <td>
-          <span class="name">
+          <div class="name">
             {{row.name}}
-          </span>
+          </div>
         </td>
         <td v-if="showType">
-          <span class="type">
+          <div class="type">
             {{getTypes(row.type)}}
-          </span>
+          </div>
         </td>
         <td v-if="showOptions">
-          <span v-if="row.options">
-            {{row.options.join('、')}}
-          </span>
-          <span v-else>-</span>
+          <div v-dao-tooltip.ellipsis="row.options.join('、')" v-if="row.options" class="option"><!-- 
+         -->{{row.options.join('、')}}<!-- 
+      --></div>
+          <div v-else>-</div>
         </td>
         <td v-if="showDefault">
-          <span v-if="row.options">
+          <div v-if="row.options">
             {{row.default}}
-          </span>
-          <span v-else>-</span>
+          </div>
+          <div v-else>-</div>
         </td>
         <td v-if="showParameter">
           {{row.parameter}}
@@ -42,11 +42,13 @@
           {{row.return}}
         </td>
         <td>
-          <span v-if="row.desc">
-            <md-reader :source="row.desc">
-            </md-reader>
-          </span>
-          <span v-else>-</span>
+          <div class="desc">
+            <template v-if="row.desc">
+              <md-reader :source="row.desc">
+              </md-reader>
+            </template>
+            <template v-else>-</template>
+          </div>
         </td>
       </tr>
     </tbody>
@@ -137,5 +139,10 @@ export default {
   .type{
     color: $blue;
   }
+  .option{
+    width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 }
 </style>
diff --git a/examples/view/demos/button/demo-1.vue b/examples/view/demos/button/demo-1.vue
index 33a0ab9de..464ba5f25 100644
--- a/examples/view/demos/button/demo-1.vue
+++ b/examples/view/demos/button/demo-1.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
-    <button class="dao-btn">default</button>
-    <button class="dao-btn blue" @click="handleClick">blue</button>
+    <button class="dao-btn" @click="onClick">default</button>
+    <button class="dao-btn blue">blue</button>
     <button class="dao-btn red">red</button>
     <button class="dao-btn ghost">ghost</button>
     <button class="dao-btn btn-sm blue">small</button>
@@ -13,9 +13,9 @@
 <script>
   export default {
     methods: {
-      handleClick() {
-        alert(1);
+      onClick() {
+        this.$daoAlert('hi', 'daostyle').show();
       },
     },
   };
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/view/demos/button/demo-2.vue b/examples/view/demos/button/demo-2.vue
index 89108c020..f1ad78afe 100644
--- a/examples/view/demos/button/demo-2.vue
+++ b/examples/view/demos/button/demo-2.vue
@@ -7,4 +7,4 @@
     <button class="dao-btn mini grey" :disabled="true">disabled</button>
     <button class="dao-btn mini blue" :disabled="true">disabled</button>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/button/demo-3.vue b/examples/view/demos/button/demo-3.vue
index 58685a064..3a1eeecba 100644
--- a/examples/view/demos/button/demo-3.vue
+++ b/examples/view/demos/button/demo-3.vue
@@ -7,4 +7,4 @@
     <button class="dao-btn btn-sm mini grey">mini-grey</button>
     <button class="dao-btn btn-sm mini blue">mini-blue</button>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/button/demo-4.vue b/examples/view/demos/button/demo-4.vue
index 4310e4056..26f9339fb 100644
--- a/examples/view/demos/button/demo-4.vue
+++ b/examples/view/demos/button/demo-4.vue
@@ -7,4 +7,4 @@
     <button class="dao-btn btn-sm mini grey" :disabled="true">disabled</button>
     <button class="dao-btn btn-sm mini grey" :disabled="true">disabled</button>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/button/demo-5.vue b/examples/view/demos/button/demo-5.vue
index 19384f6c9..cb00c3721 100644
--- a/examples/view/demos/button/demo-5.vue
+++ b/examples/view/demos/button/demo-5.vue
@@ -21,4 +21,4 @@
       <svg class="icon"><use xlink:href="#icon_caret-down"></use></svg>
     </button>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/button/demo-6.vue b/examples/view/demos/button/demo-6.vue
index 5a89c49e6..e0c920a84 100644
--- a/examples/view/demos/button/demo-6.vue
+++ b/examples/view/demos/button/demo-6.vue
@@ -31,4 +31,4 @@
       </button>
     </span>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/checkbox/demo-1.vue b/examples/view/demos/checkbox/demo-1.vue
index b8ddcd872..36152f066 100644
--- a/examples/view/demos/checkbox/demo-1.vue
+++ b/examples/view/demos/checkbox/demo-1.vue
@@ -1,36 +1,24 @@
 <template>
-  <div>
-    <div class="dao-checkbox-group">
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox" checked>
-          option 1
-        </label>
-      </div>
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox">
-          option 2
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" checked disabled>
-          disable option
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" disabled>
-          disable option
-        </label>
-      </div>
+  <div class="dao-checkbox-group">
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox" checked>option 1
+      </label>
+    </div>
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox">option 2
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" checked disabled>disable option
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" disabled>disable option
+      </label>
     </div>
   </div>
-</template>
-
-<script>
-export default {
-  name: 'Demo1',
-}
-</script>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/checkbox/demo-2.vue b/examples/view/demos/checkbox/demo-2.vue
index 16176f3e6..606cbe94b 100644
--- a/examples/view/demos/checkbox/demo-2.vue
+++ b/examples/view/demos/checkbox/demo-2.vue
@@ -1,35 +1,24 @@
 <template>
-  <div>
-    <div class="dao-checkbox-group checkbox-inline">
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox" checked>
-          option 1
-        </label>
-      </div>
-      <div class="dao-checkbox">
-        <label>
-          <input type="checkbox">
-          option 2
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" checked disabled>
-          disable option
-        </label>
-      </div>
-      <div class="dao-checkbox disabled">
-        <label>
-          <input type="checkbox" disabled>
-          disable option
-        </label>
-      </div>
+  <div class="dao-checkbox-group checkbox-inline">
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox" checked>option 1
+      </label>
+    </div>
+    <div class="dao-checkbox">
+      <label>
+        <input type="checkbox">option 2
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" checked disabled>disable option
+      </label>
+    </div>
+    <div class="dao-checkbox disabled">
+      <label>
+        <input type="checkbox" disabled> disable option
+      </label>
     </div>
   </div>
-</template>
-<script>
-export default {
-  name: 'Demo2',
-};
-</script>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/color/demo-1.vue b/examples/view/demos/color/demo-1.vue
index fbc35e28a..e52062b0c 100644
--- a/examples/view/demos/color/demo-1.vue
+++ b/examples/view/demos/color/demo-1.vue
@@ -10,7 +10,6 @@
 
 <style lang="scss" scoped>
 @import 'daoColor';
-
 .color-demo {
   width: 15px;
   height: 15px;
@@ -31,5 +30,4 @@
 .generate-green-level-3 {
   background-color: generate-color($green, -3);
 }
-</style>
-
+</style>
\ No newline at end of file
diff --git a/examples/view/demos/editable-list/demo-1.vue b/examples/view/demos/editable-list/demo-1.vue
index 6f0e00aa5..9eea3edc4 100644
--- a/examples/view/demos/editable-list/demo-1.vue
+++ b/examples/view/demos/editable-list/demo-1.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <dao-editable-list @add="onAdd" @remove="onRemove">
-      <li slot="list" v-for="(d, i) in data" @click="onClick(i)" :class="{active: index === i}">
+      <li
+        slot="list"
+        v-for="(d, i) in data"
+        @click="onClick(i)"
+        :class="{active: index === i}"
+        :key="i">
         {{d.key}}
       </li>
       <div slot="content">
@@ -46,4 +51,4 @@
       },
     },
   };
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/view/demos/numeric-badge/demo-1.vue b/examples/view/demos/numeric-badge/demo-1.vue
index fb783d77f..96176a580 100644
--- a/examples/view/demos/numeric-badge/demo-1.vue
+++ b/examples/view/demos/numeric-badge/demo-1.vue
@@ -5,4 +5,4 @@
     <dao-numeric-badge>1</dao-numeric-badge>
     <dao-numeric-badge>123</dao-numeric-badge>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/numeric-badge/demo-2.vue b/examples/view/demos/numeric-badge/demo-2.vue
index e331bc896..ccb65fe8c 100644
--- a/examples/view/demos/numeric-badge/demo-2.vue
+++ b/examples/view/demos/numeric-badge/demo-2.vue
@@ -15,4 +15,4 @@
       };
     },
   };
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/view/demos/progress/demo-1.vue b/examples/view/demos/progress/demo-1.vue
index 557488bd7..5ef42754f 100644
--- a/examples/view/demos/progress/demo-1.vue
+++ b/examples/view/demos/progress/demo-1.vue
@@ -13,4 +13,4 @@
     <span>错误</span>
     <dao-progress type="error"></dao-progress>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/progress/demo-2.vue b/examples/view/demos/progress/demo-2.vue
index 66200bcb7..67244b700 100644
--- a/examples/view/demos/progress/demo-2.vue
+++ b/examples/view/demos/progress/demo-2.vue
@@ -18,7 +18,6 @@
 </template>
 
 <script>
-
   export default {
     data() {
       return {
@@ -31,4 +30,4 @@
       }, 1000);
     },
   };
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/view/demos/progress/demo-3.vue b/examples/view/demos/progress/demo-3.vue
index 982d39086..cb06bc28a 100644
--- a/examples/view/demos/progress/demo-3.vue
+++ b/examples/view/demos/progress/demo-3.vue
@@ -12,7 +12,6 @@
 </template>
 
 <script>
-
   export default {
     data() {
       return {
@@ -25,4 +24,4 @@
       }, 1000);
     },
   };
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/view/demos/setting-layout/demo-1.vue b/examples/view/demos/setting-layout/demo-1.vue
index 8d3d86e53..7d0c97926 100644
--- a/examples/view/demos/setting-layout/demo-1.vue
+++ b/examples/view/demos/setting-layout/demo-1.vue
@@ -1,37 +1,35 @@
 <template>
-  <div>
-    <dao-setting-layout class="test-class">
-      <template slot="layout-title">大标题</template>
-      <template slot="layout-title-helper">大标题一定要有，表单必有头</template>
-      <dao-setting-section>
-        <template slot="section-title">块内容标题</template>
-        <template slot="section-title-helper">一般情况下不需要块内容标题，需要显示表格时才可能要用到</template>
-        <template slot="label">左侧小标题</template>
+  <dao-setting-layout>
+    <template slot="layout-title">大标题</template>
+    <template slot="layout-title-helper">大标题一定要有，表单必有头</template>
+    <dao-setting-section>
+      <template slot="section-title">块内容标题</template>
+      <template slot="section-title-helper">一般情况下不需要块内容标题，需要显示表格时才可能要用到</template>
+      <template slot="label">左侧小标题</template>
+      <template slot="content">
+        <div>右侧内容</div>
+        <div>需要换行显示的内容一定要用 &lt;div&gt; 包裹</div>
+      </template>
+      <template slot="content-helper">&lt;dao-setting-section&gt; 之间是有分割线的</template>
+    </dao-setting-section>
+    <dao-setting-section>
+      <dao-setting-item>
+        <template slot="label">dao-setting-item-label</template>
         <template slot="content">
-          <div>右侧内容</div>
-          <div>需要换行显示的内容一定要用 &lt;div&gt; 包裹</div>
+          <div>注意这两个 dao-setting-item 中间没有分割线</div>
         </template>
-        <template slot="content-helper">&lt;dao-setting-section&gt; 之间是有分割线的</template>
-      </dao-setting-section>
-      <dao-setting-section>
-        <dao-setting-item>
-          <template slot="label">dao-setting-item-label</template>
-          <template slot="content">
-            <div>注意这两个 dao-setting-item 中间没有分割线</div>
-          </template>
-          <template slot="content-helper">中间不要有分割线的情况很少见，当遇到该需求时可以使用该 &lt;dao-setting-item&gt; 组件</template>
-        </dao-setting-item>
-        <dao-setting-item>
-          <template slot="label">dao-setting-item-label</template>
-          <template slot="content">
-            <div>注意这两个 dao-setting-item 中间没有分割线</div>
-          </template>
-          <template slot="content-helper">中间不要有分割线的情况很少见，当遇到该需求时可以使用该 &lt;dao-setting-item&gt; 组件</template>
-        </dao-setting-item>
-      </dao-setting-section>
-      <template slot="footer">
-        <div class="dao-btn blue">保存</div>
-      </template>
-    </dao-setting-layout>
-  </div>
-</template>
+        <template slot="content-helper">中间不要有分割线的情况很少见，当遇到该需求时可以使用该 &lt;dao-setting-item&gt; 组件</template>
+      </dao-setting-item>
+      <dao-setting-item>
+        <template slot="label">dao-setting-item-label</template>
+        <template slot="content">
+          <div>注意这两个 dao-setting-item 中间没有分割线</div>
+        </template>
+        <template slot="content-helper">中间不要有分割线的情况很少见，当遇到该需求时可以使用该 &lt;dao-setting-item&gt; 组件</template>
+      </dao-setting-item>
+    </dao-setting-section>
+    <template slot="footer">
+      <div class="dao-btn blue">保存</div>
+    </template>
+  </dao-setting-layout>
+</template>
\ No newline at end of file
diff --git a/examples/view/demos/setting-layout/demo-2.vue b/examples/view/demos/setting-layout/demo-2.vue
index e7fc26788..58508054f 100644
--- a/examples/view/demos/setting-layout/demo-2.vue
+++ b/examples/view/demos/setting-layout/demo-2.vue
@@ -1,28 +1,26 @@
 <template>
-  <div>
-    <div class="dao-setting-layout">
-      <div class="dao-setting-layout-title">
-        <div class="dao-setting-title">
-          [大标题]
-          <div class="helper-text">[大标题说明文字]</div>
-        </div>
+  <div class="dao-setting-layout">
+    <div class="dao-setting-layout-title">
+      <div class="dao-setting-title">
+        [大标题]
+        <div class="helper-text">[大标题说明文字]</div>
       </div>
-      <div class="dao-setting-section">
-        <div class="dao-setting-title">
-          [块内容标题]
-          <div class="helper-text">[块内容标题说明文字]</div>
-        </div>
-        <div class="dao-setting-item">
-          <div class="dao-setting-label">[左侧小标题]</div>
-          <div class="dao-setting-content">
-            <div>[右侧内容块]</div>
-            <div class="helper-text">[说明文字]</div>
-          </div>
-        </div>
+    </div>
+    <div class="dao-setting-section">
+      <div class="dao-setting-title">
+        [块内容标题]
+        <div class="helper-text">[块内容标题说明文字]</div>
       </div>
-      <div class="dao-setting-layout-footer">
-        [footer]
+      <div class="dao-setting-item">
+        <div class="dao-setting-label">[左侧小标题]</div>
+        <div class="dao-setting-content">
+          <div>[右侧内容块]</div>
+          <div class="helper-text">[说明文字]</div>
+        </div>
       </div>
     </div>
+    <div class="dao-setting-layout-footer">
+      [footer]
+    </div>
   </div>
 </template>
diff --git a/examples/view/demos/svg/demo-1.vue b/examples/view/demos/svg/demo-1.vue
index bb29505f2..24e866491 100644
--- a/examples/view/demos/svg/demo-1.vue
+++ b/examples/view/demos/svg/demo-1.vue
@@ -28,5 +28,4 @@ export default {
 .icon{
   margin: 4px;
 }
-</style>
-
+</style>
\ No newline at end of file
diff --git a/examples/view/demos/switch/demo-1.vue b/examples/view/demos/switch/demo-1.vue
index bdc8085b1..e073ad224 100644
--- a/examples/view/demos/switch/demo-1.vue
+++ b/examples/view/demos/switch/demo-1.vue
@@ -23,4 +23,4 @@ export default {
 .demo1 p {
   margin-top: 20px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/examples/view/demos/switch/demo-3.vue b/examples/view/demos/switch/demo-3.vue
index 1289dd097..a27d38198 100644
--- a/examples/view/demos/switch/demo-3.vue
+++ b/examples/view/demos/switch/demo-3.vue
@@ -24,4 +24,4 @@ export default {
 .demo3 p {
   margin-top: 20px;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/examples/view/demos/switch/demo-5.vue b/examples/view/demos/switch/demo-5.vue
index bae0e611d..34a3c560e 100644
--- a/examples/view/demos/switch/demo-5.vue
+++ b/examples/view/demos/switch/demo-5.vue
@@ -19,7 +19,7 @@ export default {
   },
   methods: {
     onChange(data) {
-      alert(data);
+      this.$daoAlert('daostyle', `changed:${data}`).show();
     },
   },
 };
diff --git a/examples/view/demos/table/demo-1.vue b/examples/view/demos/table/demo-1.vue
index 9544d8eac..f132b07e0 100644
--- a/examples/view/demos/table/demo-1.vue
+++ b/examples/view/demos/table/demo-1.vue
@@ -106,4 +106,4 @@ export default {
     margin-left: 0px !important;
   }
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/examples/view/demos/table/demo-2.vue b/examples/view/demos/table/demo-2.vue
index 242d458df..fcb179580 100644
--- a/examples/view/demos/table/demo-2.vue
+++ b/examples/view/demos/table/demo-2.vue
@@ -47,5 +47,4 @@ export default {
     };
   },
 };
-</script>
-
+</script>
\ No newline at end of file
diff --git a/examples/view/demos/table/demo-3.vue b/examples/view/demos/table/demo-3.vue
index 19d903c88..d2efa5391 100644
--- a/examples/view/demos/table/demo-3.vue
+++ b/examples/view/demos/table/demo-3.vue
@@ -47,4 +47,4 @@ export default {
     };
   },
 };
-</script>
+</script>
\ No newline at end of file
diff --git a/examples/view/page/components/color/index.vue b/examples/view/page/components/color/index.vue
index 88c57b834..b356a37c2 100644
--- a/examples/view/page/components/color/index.vue
+++ b/examples/view/page/components/color/index.vue
@@ -41,7 +41,7 @@
           </div>
           <h1 class="color-category">Grey</h1>
           <div class="clearfix">
-            <div class="color-demo-block" v-for="color in greys">
+            <div class="color-demo-block" v-for="color in greys" :key="color">
               <span class="color-block" :class="color"></span>
               <div class="info-block">
                 <p class="color-info">
@@ -59,8 +59,8 @@
           <h1>Color Palette</h1>
           <div class="color-category-desc">点击颜色块可以直接复制代码</div>
           <table class="color-palette">
-            <tr class="color-block" :class="color" v-for="color in colors">
-              <td v-for="num in [-3, -2, -1, 0, 1, 2, 3]">
+            <tr class="color-block" :class="color" v-for="color in colors" :key="color">
+              <td v-for="num in [-3, -2, -1, 0, 1, 2, 3]" :key="num">
                 <div class="color-palette-clipboard"
                   is="dao-clipboard"
                   v-dao-select-all
@@ -74,24 +74,6 @@
               <td colspan="7"></td>
             </tr>
           </table>
-          <pre class="scss">
-          @function generate-color($base-color, $level) {
-            @if $level == -3 {
-              @return desaturate(lighten($base-color, 36), 15);
-            } @else if $level == -2 {
-              @return desaturate(lighten($base-color, 25), 25);
-            } @else if $level == -1 {
-              @return lighten($base-color, 4);
-            } @else if $level == 1 {
-              @return desaturate(darken($base-color, 7), 11);
-            } @else if $level == 2 {
-              @return desaturate(darken($base-color, 13), 7);
-            } @else if $level == 3 {
-              @return desaturate(darken($base-color, 19), 9);
-            } @else {
-              @return $base-color;
-            }
-          }</pre>
         </div>
       </template>
     </docs-section>
@@ -194,7 +176,7 @@ $greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light
 .color-demo-block {
   margin-bottom: 30px;
   float: left;
-  width: 180px;
+  width: 150px;
   .color-block {
     display: block;
     width: 60px;
@@ -309,16 +291,6 @@ $greys: ( 'black-dark': $black-dark, 'black-darker': $black-darker, 'black-light
     }
   }
 }
-
-pre.scss {
-  font-size: 14px;
-  line-height: 2;
-  padding: 30px;
-  color: $black-dark;
-  border: 1px solid $grey-light;
-  background-color: $white-light;
-}
-
 </style>
 
 
diff --git a/examples/view/page/components/editable-list/index.vue b/examples/view/page/components/editable-list/index.vue
index 34a184f2e..6d26795dc 100644
--- a/examples/view/page/components/editable-list/index.vue
+++ b/examples/view/page/components/editable-list/index.vue
@@ -8,25 +8,25 @@
           <demo1 slot="demo"></demo1>
           <code-reader slot="code" file="editable-list/demo-1.vue"></code-reader>
           <md-reader slot="desc">
-            ``dao-editable-list`` 是个几乎只有纯样式的组件。
+            `dao-editable-list` 是个几乎只有纯样式的组件。
           </md-reader>
         </demo-code>
       </template>
     </docs-section>
     <docs-section>
       <template slot="title">
-        <docs-title name="<dao-editable-list/> Slot" size="sm"></docs-title>
+        <docs-title name="<dao-editable-list/> 事件" size="sm"></docs-title>
       </template>
       <template slot="content">
-        <docs-table :rows="editableListSlots" type="slot"></docs-table>
+        <docs-table :rows="editableListEvents" type="event"></docs-table>
       </template>
     </docs-section>
-    <docs-section>
+     <docs-section>
       <template slot="title">
-        <docs-title name="<dao-editable-list/> 事件" size="sm"></docs-title>
+        <docs-title name="<dao-editable-list/> 插槽" size="sm"></docs-title>
       </template>
       <template slot="content">
-        <docs-table :rows="editableListEvents" type="event"></docs-table>
+        <docs-table :rows="editableListSlots" type="slot"></docs-table>
       </template>
     </docs-section>
   </div>
diff --git a/examples/view/page/components/index.vue b/examples/view/page/components/index.vue
index 5d92e3853..ab45c61fb 100644
--- a/examples/view/page/components/index.vue
+++ b/examples/view/page/components/index.vue
@@ -24,7 +24,7 @@
         </ul>
       </div>
       <div class="docs-view">
-        <div class="view-wrap">
+        <div class="view-wrap" :class="{ 'not-component': $route.meta.notComponent }">
           <router-view></router-view>
         </div>
       </div>
@@ -36,6 +36,9 @@
 
 export default {
   name: 'Components',
+  created() {
+    console.log(this.$route);
+  },
 };
 
 </script>
@@ -94,20 +97,22 @@ export default {
       height: 100%;
       overflow: auto;
       width: 100%;
-      padding: 40px 10px;
+      padding: 20px 10px;
       .view-wrap{
         @media (max-width: 768px) {
           padding: 10px;
         }
         @media (min-width: 768px) {
-         padding: 0px 30px;
-        }
-        @media (min-width: 900px) {
-         padding: 0px 50px;
+         padding: 0px 40px;
         }
+        
         @media (min-width: 1100px) {
-         padding: 0px 80px;
+          &.not-component{
+            width: 800px;
+            margin: 0 auto;
+          }
         }
+         
         margin: 0 auto;
         color: #5e6d82;
       }
diff --git a/examples/view/page/components/numeric-badge/index.vue b/examples/view/page/components/numeric-badge/index.vue
index 01d8bb488..7472ab3d2 100644
--- a/examples/view/page/components/numeric-badge/index.vue
+++ b/examples/view/page/components/numeric-badge/index.vue
@@ -35,7 +35,7 @@
     </docs-section>
     <docs-section>
       <template slot="title">
-        <docs-title name="<numeric-badge/> Slot" size="sm"></docs-title>
+        <docs-title name="<numeric-badge/> 插槽" size="sm"></docs-title>
       </template>
       <template slot="content">
         <docs-table :rows="numericBadgeSlot" type="slot"></docs-table>
diff --git a/examples/view/page/components/setting-layout/index.vue b/examples/view/page/components/setting-layout/index.vue
index d636dcc59..2882e41b1 100644
--- a/examples/view/page/components/setting-layout/index.vue
+++ b/examples/view/page/components/setting-layout/index.vue
@@ -27,7 +27,7 @@
     </docs-section>
     <docs-section>
       <template slot="title">
-        <docs-title name="<dao-setting-layout/> Slot" size="sm"></docs-title>
+        <docs-title name="<dao-setting-layout/> 插槽" size="sm"></docs-title>
       </template>
       <template slot="content">
         <docs-table :rows="settingLayoutSlots" type="slot"></docs-table>
diff --git a/examples/view/page/components/switch/index.vue b/examples/view/page/components/switch/index.vue
index ba9fe4bff..d635610ea 100644
--- a/examples/view/page/components/switch/index.vue
+++ b/examples/view/page/components/switch/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <docs-title :name="$t('Switch')" desc="dao-switch 是用于表示开关的组件"></docs-title>
+    <docs-title :name="$t('switch')" desc="dao-switch 是用于表示开关的组件"></docs-title>
     <docs-section>
       <template slot="title">基本用法</template>
       <template slot="content">
diff --git a/examples/view/page/components/tab/index.vue b/examples/view/page/components/tab/index.vue
index 734e0a77c..42929ab79 100644
--- a/examples/view/page/components/tab/index.vue
+++ b/examples/view/page/components/tab/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <docs-title :name="$t('tab')" desc="方便您通过选项卡方便的切换视图。"></docs-title>
+    <docs-title :name="$t('tab')" desc="方便您通过选项卡方便的切换视图"></docs-title>
     <docs-section>
       <template slot="title">基本用法</template>
       <template slot="content">
diff --git a/examples/view/page/components/tooltip/index.vue b/examples/view/page/components/tooltip/index.vue
index 075a57013..0a4815b82 100644
--- a/examples/view/page/components/tooltip/index.vue
+++ b/examples/view/page/components/tooltip/index.vue
@@ -35,7 +35,7 @@
     </docs-section>
     <docs-section>
       <template slot="title">
-        <docs-title name="<dao-tooltip/> Slot" size="sm"></docs-title>
+        <docs-title name="<dao-tooltip/> 插槽" size="sm"></docs-title>
       </template>
       <template slot="content">
         <docs-table :rows="tooltipSlot" type="attr"></docs-table>
@@ -104,4 +104,3 @@
     },
   };
 </script>
-<style lang="scss" scoped></style>
diff --git a/examples/view/page/index/index.vue b/examples/view/page/index/index.vue
index d01725479..3986c6a1d 100644
--- a/examples/view/page/index/index.vue
+++ b/examples/view/page/index/index.vue
@@ -165,10 +165,17 @@ export default {
       margin-bottom: 25px;
     }
     .name {
-      font-size: 18px;
+      font-size: 22px;
       svg {
-        height: 26px;
-        width: 26px;
+        height: 32px;
+        width: 32px;
+      }
+      @media (max-width: 768px) {
+        font-size: 32px;
+        svg {
+          height: 45px;
+          width: 45px;
+        }
       }
     }
     .desc {
diff --git a/examples/view/page/installation/index.vue b/examples/view/page/installation/index.vue
index d0875a113..31b7273a2 100644
--- a/examples/view/page/installation/index.vue
+++ b/examples/view/page/installation/index.vue
@@ -2,7 +2,7 @@
   <div class="installation">
     <docs-title :name="$t('installation')" size="lg"></docs-title>
     <docs-section>
-      <template slot="title">1.使用 npm 安装</template>
+      <template slot="title">1. {{$t('installationPage.use_npm')}}</template>
       <template slot="content">
         <code-reader readOnly file="installation/demo-1.sh"></code-reader>
         <br>
@@ -10,14 +10,14 @@
       </template>
     </docs-section>
      <docs-section>
-      <template slot="title">2.使用 script 标签引入</template>
+      <template slot="title">2. {{$t('installationPage.use_html')}}</template>
       <template slot="content">
         <code-reader readOnly file="installation/demo-2.html"></code-reader>
       </template>
     </docs-section>
      <docs-section>
       <template slot="title">
-        <docs-title name="使用" size="sm"></docs-title>
+        <docs-title :name="$t('installationPage.usage')" size="sm"></docs-title>
       </template>
       <template slot="content">
         <code-reader readOnly file="installation/demo-3.vue"></code-reader>
diff --git a/examples/view/router.js b/examples/view/router.js
index 698a5288f..716cc5191 100644
--- a/examples/view/router.js
+++ b/examples/view/router.js
@@ -15,24 +15,28 @@ const components = [
     meta: {
       notComponent: true,
     },
-  },
-  {
+  }, {
     path: 'installation',
     name: 'Installation',
     component: Installation,
     meta: {
       notComponent: true,
     },
-  },
-  {
+  }, {
     path: 'change-logs',
     name: 'ChangeLogs',
     component: ChangeLogs,
     meta: {
       notComponent: true,
     },
-  },
-  {
+  }, {
+    path: 'alert',
+    meta: {
+      available: true,
+      docs: false,
+      test: false,
+    },
+  }, {
     path: 'autocomplete',
     meta: {
       available: true,
@@ -110,11 +114,11 @@ const components = [
       test: false,
     },
   }, {
-    path: 'input',
+    path: 'editable-list',
     meta: {
       available: true,
       docs: false,
-      test: true,
+      test: false,
     },
   }, {
     path: 'info-card',
@@ -123,6 +127,13 @@ const components = [
       docs: false,
       test: false,
     },
+  }, {
+    path: 'input',
+    meta: {
+      available: true,
+      docs: false,
+      test: true,
+    },
   },
   // {
   //   path: 'input-with-label',
@@ -149,13 +160,6 @@ const components = [
       docs: false,
       test: false,
     },
-  }, {
-    path: 'alert',
-    meta: {
-      available: true,
-      docs: false,
-      test: false,
-    },
   }, {
     path: 'numeric-badge',
     meta: {
@@ -229,20 +233,6 @@ const components = [
       docs: false,
       test: false,
     },
-  }, {
-    path: 'svg',
-    meta: {
-      available: true,
-      docs: false,
-      test: false,
-    },
-  }, {
-    path: 'editable-list',
-    meta: {
-      available: true,
-      docs: false,
-      test: false,
-    },
   }, {
     path: 'switch',
     meta: {
@@ -281,6 +271,13 @@ const components = [
   //   },
   // },
   {
+    path: 'svg',
+    meta: {
+      available: true,
+      docs: false,
+      test: false,
+    },
+  }, {
     path: 'color',
     meta: {
       available: true,
@@ -315,12 +312,12 @@ const router = new VueRouter({
   components,
 });
 
-// router.afterEach(() => {
-  // const view = document.querySelector('.docs-view');
-  // if (view) {
-  //   view.scrollTop = 0;
-  // }
-// });
+router.afterEach(() => {
+  const view = document.querySelector('.docs-view');
+  if (view) {
+    view.scrollTop = 0;
+  }
+});
 
 function install(Vue) {
   Vue.use(VueRouter);