diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index b1fe7c87..0a43f3a4 100755
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -81,6 +81,10 @@ module.exports = {
         test: /\.scss$/,
         loaders: ["style", "css", "sass"]
       },
+      {
+        test: /\.md$/,
+        loaders: ["text-loader"]
+      },
       {
         test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
         loader: 'url-loader',
diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md
index 8af971e0..e5571582 100644
--- a/docs/zh/guide/change-log.md
+++ b/docs/zh/guide/change-log.md
@@ -11,6 +11,7 @@
 * [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
 * [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
 * [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
+* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
 
 ## v1.0.0
 
diff --git a/package.json b/package.json
index 84dbbf7b..9d756c5d 100755
--- a/package.json
+++ b/package.json
@@ -80,6 +80,7 @@
     "semver": "^5.3.0",
     "shelljs": "^0.7.6",
     "svg-sprite-loader": "^3.6.2",
+    "text-loader": "0.0.1",
     "uglifyjs-webpack-plugin": "^1.1.1",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.3.0",
diff --git a/src/assets/style/fixed/element.scss b/src/assets/style/fixed/element.scss
index be34caca..ce0144a0 100644
--- a/src/assets/style/fixed/element.scss
+++ b/src/assets/style/fixed/element.scss
@@ -1,10 +1,13 @@
 // element 样式补丁
 
 .el-card {
-  box-shadow: none;
-  &:hover {
-    // box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
-    box-shadow: none;
+  &.is-always-shadow {
+    box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+  }
+  &.is-hover-shadow {
+    &:hover {
+      box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+    }
   }
 }
 
diff --git a/src/assets/style/theme/d2/index.scss b/src/assets/style/theme/d2/index.scss
new file mode 100644
index 00000000..cad7dab9
--- /dev/null
+++ b/src/assets/style/theme/d2/index.scss
@@ -0,0 +1,156 @@
+@import '../theme.scss';
+@import './setting.scss';
+
+.theme-#{$theme-name} {
+
+  .layout-main {
+    background-color: $theme-bg-color;
+    // background-image: url($theme-bg-image);
+  }
+  // 菜单项目
+  @mixin theme-menu-hover-style {
+    color: $theme-menu-item-color-hover;
+    i {
+      color: $theme-menu-item-color-hover;
+    }
+    background-color: $theme-menu-item-background-color-hover;
+  }
+  .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu-item:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+
+  // [组件] d2-container-full
+  .d2-container-full {
+    border: $theme-container-border;
+    border-bottom: none;
+    .d2-container-full__header {
+      border-bottom: $theme-container-border;
+    }
+    .d2-container-full__footer {
+      border-top: $theme-container-border;
+    }
+  }
+  // [组件] d2-container-card
+  .d2-container-card {
+    border: $theme-container-border;
+    .el-card__header {
+      border-bottom: $theme-container-border;
+    }
+  }
+  // 顶栏
+  .el-header {
+    // 切换按钮
+    .toggle-aside-btn {
+      i {
+        color: $theme-header-item-color;
+        background-color: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+        }
+      }
+    }
+    // 顶栏菜单
+    .el-menu {
+      .el-menu-item {
+        transition: border-top-color 0s;
+        color: $theme-header-item-color;
+        background-color: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+          background-color: $theme-header-item-background-color-hover;
+        }
+        &:focus {
+          color: $theme-header-item-color-focus;
+          background-color: $theme-header-item-background-color-focus;
+        }
+        &.is-active {
+          color: $theme-header-item-color-active;
+          background-color: $theme-header-item-background-color-active;
+        }
+      }
+      .el-submenu {
+        .el-submenu__title {
+          transition: border-top-color 0s;
+          color: $theme-header-item-color;
+          background-color: $theme-header-item-background-color;
+          .el-submenu__icon-arrow {
+            color: $theme-header-item-color;
+          }
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background-color: $theme-header-item-background-color-hover;
+          }
+          &:focus {
+            color: $theme-header-item-color-focus;
+            background-color: $theme-header-item-background-color-focus;
+          }
+        }
+      }
+    }
+    // 顶栏右侧
+    .d2-header-right {
+      .btn-text {
+        color: $theme-header-item-color;
+        &.can-hover {
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background-color: $theme-header-item-background-color-hover;
+          }
+        }
+      }
+    }
+  }
+  // [布局] 顶栏下面
+  .el-container {
+    // 侧边栏
+    .el-aside {
+      // [菜单] 正常状态
+      .el-menu {
+        .el-menu-item {
+          color: $theme-aside-item-color;
+          background-color: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background-color: $theme-aside-item-background-color-hover;
+          }
+          &:focus {
+            color: $theme-aside-item-color-focus;
+            background-color: $theme-aside-item-background-color-focus;
+          }
+          &.is-active {
+            color: $theme-aside-item-color-active;
+            background-color: $theme-aside-item-background-color-active;
+          }
+        }
+      }
+      .el-submenu {
+        .el-submenu__title {
+          color: $theme-aside-item-color;
+          background-color: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          .el-submenu__icon-arrow {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background-color: $theme-aside-item-background-color-hover;
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/style/theme/d2/setting.scss b/src/assets/style/theme/d2/setting.scss
new file mode 100644
index 00000000..e9ce12b8
--- /dev/null
+++ b/src/assets/style/theme/d2/setting.scss
@@ -0,0 +1,38 @@
+// 主题名称
+$theme-name: 'd2';
+// 主题背景颜色
+$theme-bg-color: $color-bg;
+// 主题背景图片
+// $theme-bg-image: '/static/image/bg/xxx.jpg';
+// container组件的边框
+$theme-container-border: 1px solid $color-border-1;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: $color-text-normal;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: $color-text-main;
+$theme-header-item-background-color-hover: rgba(#000, .02);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: $color-text-main;
+$theme-header-item-background-color-focus: rgba(#000, .02);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: $color-text-main;
+$theme-header-item-background-color-active: rgba(#000, .03);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: $color-text-normal;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: $color-text-main;
+$theme-aside-item-background-color-hover: rgba(#000, .02);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: $color-text-main;
+$theme-aside-item-background-color-focus: rgba(#000, .02);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: $color-text-main;
+$theme-aside-item-background-color-active: rgba(#000, .03);
\ No newline at end of file
diff --git a/src/assets/style/theme/star/index.scss b/src/assets/style/theme/star/index.scss
index ade5965a..e2221d38 100644
--- a/src/assets/style/theme/star/index.scss
+++ b/src/assets/style/theme/star/index.scss
@@ -1,20 +1,19 @@
 @import '../theme.scss';
-
-$theme-name: 'star';
-$theme-bg-color: #EFF4F8;
-$theme-bg-image: '/static/image/bg/star.jpg';
-$theme-container-full-border-color: #d8dfea;
+@import './setting.scss';
 
 .theme-#{$theme-name} {
-  .theme {
+
+  .layout-main {
     background-color: $theme-bg-color;
     background-image: url($theme-bg-image);
-    background-size: cover;
-    background-position: center;
   }
   // 菜单项目
   @mixin theme-menu-hover-style {
-    background-color: #eff4f8;
+    color: $theme-menu-item-color-hover;
+    i {
+      color: $theme-menu-item-color-hover;
+    }
+    background-color: $theme-menu-item-background-color-hover;
   }
   .el-submenu__title:hover {
     @include theme-menu-hover-style;
@@ -28,13 +27,21 @@ $theme-container-full-border-color: #d8dfea;
   .el-menu--horizontal .el-menu .el-submenu__title:hover {
     @include theme-menu-hover-style;
   }
+
   // [组件] d2-container-full
   .d2-container-full {
     .d2-container-full__header {
-      border-bottom: 1px solid $theme-container-full-border-color;
+      border-bottom: $theme-container-border;
     }
     .d2-container-full__footer {
-      border-top: 1px solid $theme-container-full-border-color;
+      border-top: $theme-container-border;
+    }
+  }
+  // [组件] d2-container-card
+  .d2-container-card {
+    border: $theme-container-border;
+    .el-card__header {
+      border-bottom: $theme-container-border;
     }
   }
   // 顶栏
@@ -42,9 +49,10 @@ $theme-container-full-border-color: #d8dfea;
     // 切换按钮
     .toggle-aside-btn {
       i {
-        color: #FFF;
+        color: $theme-header-item-color;
+        background-color: $theme-header-item-background-color;
         &:hover {
-          color: #FFF;
+          color: $theme-header-item-color-hover;
         }
       }
     }
@@ -52,29 +60,36 @@ $theme-container-full-border-color: #d8dfea;
     .el-menu {
       .el-menu-item {
         transition: border-top-color 0s;
-        color: #FFF;
+        color: $theme-header-item-color;
+        background-color: $theme-header-item-background-color;
         &:hover {
-          background-color: rgba(#FFF, .3);
+          color: $theme-header-item-color-hover;
+          background-color: $theme-header-item-background-color-hover;
         }
         &:focus {
-          background-color: rgba(#FFF, .3);
+          color: $theme-header-item-color-focus;
+          background-color: $theme-header-item-background-color-focus;
         }
         &.is-active {
-          background-color: rgba(#000, .3);
+          color: $theme-header-item-color-active;
+          background-color: $theme-header-item-background-color-active;
         }
       }
       .el-submenu {
         .el-submenu__title {
           transition: border-top-color 0s;
-          color: #FFF;
+          color: $theme-header-item-color;
+          background-color: $theme-header-item-background-color;
+          .el-submenu__icon-arrow {
+            color: $theme-header-item-color;
+          }
           &:hover {
-            background-color: rgba(#FFF, .3);
+            color: $theme-header-item-color-hover;
+            background-color: $theme-header-item-background-color-hover;
           }
           &:focus {
-            background-color: rgba(#FFF, .3);
-          }
-          .el-submenu__icon-arrow {
-            color: #FFF;
+            color: $theme-header-item-color-focus;
+            background-color: $theme-header-item-background-color-focus;
           }
         }
       }
@@ -82,9 +97,12 @@ $theme-container-full-border-color: #d8dfea;
     // 顶栏右侧
     .d2-header-right {
       .btn-text {
-        color: #FFF;
-        &:hover {
-          background-color: rgba(#FFF, .1);
+        color: $theme-header-item-color;
+        &.can-hover {
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background-color: $theme-header-item-background-color-hover;
+          }
         }
       }
     }
@@ -96,32 +114,38 @@ $theme-container-full-border-color: #d8dfea;
       // [菜单] 正常状态
       .el-menu {
         .el-menu-item {
-          color: #FFF;
+          color: $theme-aside-item-color;
+          background-color: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
           &:hover {
-            background-color: rgba(#FFF, .3);
+            color: $theme-aside-item-color-hover;
+            background-color: $theme-aside-item-background-color-hover;
           }
           &:focus {
-            background-color: rgba(#FFF, .3);
-          }
-          i {
-            color: #FFF;
+            color: $theme-aside-item-color-focus;
+            background-color: $theme-aside-item-background-color-focus;
           }
           &.is-active {
-            background-color: rgba(#000, .3);
+            color: $theme-aside-item-color-active;
+            background-color: $theme-aside-item-background-color-active;
           }
         }
       }
       .el-submenu {
         .el-submenu__title {
-          color: #FFF;
-          &:hover {
-            background-color: rgba(#FFF, .3);
-          }
+          color: $theme-aside-item-color;
+          background-color: $theme-aside-item-background-color;
           i {
-            color: #FFF;
+            color: $theme-aside-item-color;
           }
           .el-submenu__icon-arrow {
-            color: #FFF;
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background-color: $theme-aside-item-background-color-hover;
           }
         }
       }
diff --git a/src/assets/style/theme/star/setting.scss b/src/assets/style/theme/star/setting.scss
new file mode 100644
index 00000000..11c9cb77
--- /dev/null
+++ b/src/assets/style/theme/star/setting.scss
@@ -0,0 +1,38 @@
+// 主题名称
+$theme-name: 'star';
+// 主题背景颜色
+$theme-bg-color: #EFF4F8;
+// 主题背景图片
+$theme-bg-image: '/static/image/bg/star.jpg';
+// container组件的边框
+$theme-container-border: 1px solid #d8dfea;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: rgba(#000, .2);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: rgba(#000, .2);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: rgba(#000, .3);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: rgba(#000, .2);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: rgba(#000, .2);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: rgba(#000, .3);
\ No newline at end of file
diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss
index 3f1af9ed..70187876 100644
--- a/src/assets/style/theme/theme.scss
+++ b/src/assets/style/theme/theme.scss
@@ -1,9 +1,11 @@
 @import '~@/assets/style/public.scss';
 
 // 主题公用
-.theme {
+.layout-main {
   height: 100vh;
   width: 100vw;
+  background-size: cover;
+  background-position: center;
   // [布局] 顶栏
   .el-header {
     padding: 0px;
diff --git a/src/components/core/d2-container/index.vue b/src/components/core/d2-container/index.vue
index 71bb2f08..84d2eb84 100644
--- a/src/components/core/d2-container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="container-component" :class="{responsive}">
     <!-- [card] 卡片容器 -->
-    <el-card v-if="type === 'card'" class="d2-mr d2-mb">
+    <el-card v-if="type === 'card'" shadow="never" class="d2-container-card d2-mr d2-mb">
       <slot v-if="$slots.header" name="header" slot="header"/>
       <slot/>
     </el-card>
diff --git a/src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue b/src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue
index 587073e1..7f877d71 100644
--- a/src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue
+++ b/src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue
@@ -3,7 +3,7 @@
     effect="dark"
     :content="isFullScreen ? '退出全屏' : '全屏'"
     placement="bottom">
-    <el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
+    <el-button class="d2-mr btn-text can-hover" type="text" @click="toggleFullScreen">
       <d2-icon v-if="isFullScreen" name="compress"/>
       <d2-icon v-else name="arrows-alt"/>
     </el-button>
diff --git a/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
index b838edb6..f01b7671 100644
--- a/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
+++ b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
@@ -1,28 +1,12 @@
 <template>
   <div>
     <el-tooltip effect="dark" content="theme" placement="bottom">
-      <el-button class="d2-ml-0 d2-mr btn-text" type="text" @click="dialogVisible = true">
+      <el-button class="d2-ml-0 d2-mr btn-text can-hover" type="text" @click="dialogVisible = true">
         <d2-icon name="diamond"/>
       </el-button>
     </el-tooltip>
-    <el-dialog title="主题" :visible.sync="dialogVisible">
-      <el-table :data="tableData">
-        <el-table-column prop="name" label="主题名称" width="100"></el-table-column>
-        <el-table-column
-          label="预览"
-          width="220">
-          <template slot-scope="scope">
-            <div
-              class="theme-preview"
-              :style="{'backgroundImage': `url(${ scope.row.preview })`}">
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="address"
-          label="地址">
-        </el-table-column>
-      </el-table>
+    <el-dialog title="主题" width="600px" :visible.sync="dialogVisible">
+      <d2-theme-list/>
     </el-dialog>
   </div>
 </template>
@@ -31,29 +15,8 @@
 export default {
   data () {
     return {
-      dialogVisible: false,
-      tableData: [
-        {
-          name: 'd2admin',
-          preview: '/static/image/theme-preview/d2admin@2x.png'
-        },
-        {
-          name: 'star',
-          preview: '/static/image/theme-preview/star@2x.png'
-        }
-      ]
+      dialogVisible: false
     }
   }
 }
 </script>
-
-<style lang="scss" scoped>
-@import '~@/assets/style/public.scss';
-.theme-preview {
-  height: 100px;
-  width: 200px;
-  border-radius: 4px;
-  background-size: cover;
-  border: 1px solid $color-border-1;
-}
-</style>
diff --git a/src/components/core/d2-layout-main/index.vue b/src/components/core/d2-layout-main/index.vue
index c4b081ab..6493b856 100644
--- a/src/components/core/d2-layout-main/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-container class="layout-main theme">
+  <el-container class="layout-main">
     <!-- 顶栏 -->
     <el-header>
       <div class="logo-group" :style="{width: collapse ? asideWidthCollapse : asideWidth}">
@@ -29,6 +29,7 @@
 </template>
 
 <script>
+import { mapMutations } from 'vuex'
 export default {
   name: 'd2-layout-main',
   components: {
@@ -44,11 +45,21 @@ export default {
       // [侧边栏宽度] 折叠状态
       asideWidthCollapse: '65px'
     }
+  },
+  mounted () {
+    // 加载主题
+    this.loadTheme()
+  },
+  methods: {
+    ...mapMutations([
+      'loadTheme'
+    ])
   }
 }
 </script>
 
 <style lang="scss">
 // 主题
+@import '~@/assets/style/theme/d2/index.scss';
 @import '~@/assets/style/theme/star/index.scss';
 </style>
diff --git a/src/components/core/d2-theme-list/index.vue b/src/components/core/d2-theme-list/index.vue
new file mode 100644
index 00000000..5abf11cd
--- /dev/null
+++ b/src/components/core/d2-theme-list/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <el-table :data="themeList" v-bind="table">
+    <el-table-column prop="name" align="center" width="160"/>
+    <el-table-column label="预览" width="220">
+      <div slot-scope="scope" class="theme-preview" :style="{'backgroundImage': `url(${ scope.row.preview })`}"></div>
+    </el-table-column>
+    <el-table-column prop="address" align="center">
+      <template slot-scope="scope">
+        <el-button type="primary" @click="handleSelectTheme(scope.row.value)">使用</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex'
+export default {
+  name: 'd2-theme-list',
+  data () {
+    return {
+      table: {
+        showHeader: false,
+        border: true
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      themeList: state => state.theme.list,
+      themeName: state => state.theme.name
+    })
+  },
+  methods: {
+    ...mapMutations([
+      'setTheme'
+    ]),
+    handleSelectTheme (themeName) {
+      this.setTheme(themeName)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '~@/assets/style/public.scss';
+.theme-preview {
+  height: 100px;
+  width: 200px;
+  border-radius: 4px;
+  background-size: cover;
+  border: 1px solid $color-border-1;
+}
+</style>
diff --git a/src/components/core/register.js b/src/components/core/register.js
index b3f19794..d5c9854b 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -14,5 +14,6 @@ Vue.component('d2-icon', () => import('@/components/core/d2-icon'))
 Vue.component('d2-icon-select', () => import('@/components/core/d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('@/components/core/d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('@/components/core/d2-markdown'))
-Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
 Vue.component('d2-mde', () => import('@/components/core/d2-mde'))
+Vue.component('d2-quill', () => import('@/components/core/d2-quill'))
+Vue.component('d2-theme-list', () => import('@/components/core/d2-theme-list'))
diff --git a/src/main.js b/src/main.js
index 2b862006..0135ca41 100755
--- a/src/main.js
+++ b/src/main.js
@@ -57,8 +57,5 @@ new Vue({
   i18n,
   router,
   template: '<App/>',
-  components: { App },
-  mounted () {
-    document.body.className = 'theme-star'
-  }
+  components: { App }
 })
diff --git a/src/menu/index.js b/src/menu/index.js
index 9de0d79f..b2c53a76 100644
--- a/src/menu/index.js
+++ b/src/menu/index.js
@@ -10,8 +10,8 @@ const demoPlugins = {
       title: '模拟数据',
       children: [
         { path: `${pre}mock/ajax`, title: '拦截异步请求' },
-        { path: `${pre}mock/dpd`, title: 'DPD规则' },
-        { path: `${pre}mock/dtd`, title: 'DTD规则' }
+        { path: `${pre}mock/dpd`, title: 'DPD 规则' },
+        { path: `${pre}mock/dtd`, title: 'DTD 规则' }
       ]
     },
     {
@@ -40,8 +40,8 @@ const demoPlugins = {
     },
     { path: `${pre}build`, title: '环境区分' },
     { path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
-    { path: `${pre}js-cookie`, title: 'cookie读写' },
-    { path: `${pre}timeago`, title: '计算已经过去的时间' }
+    { path: `${pre}js-cookie`, title: 'Cookie 读写' },
+    { path: `${pre}timeago`, title: '时间差计算' }
   ])('/demo/plugins/')
 }
 
@@ -58,7 +58,7 @@ const demoComponents = {
       children: [
         { path: `${pre}container/full`, title: '填满' },
         { path: `${pre}container/ghost`, title: '隐形' },
-        { path: `${pre}container/normal`, title: '一般' }
+        { path: `${pre}container/card`, title: '卡片' }
       ]
     },
     {
diff --git a/src/pages/demo/chart/all/components/ChartCardHeader.vue b/src/pages/demo/chart/all/components/d2-demo-chart-card-header.vue
similarity index 95%
rename from src/pages/demo/chart/all/components/ChartCardHeader.vue
rename to src/pages/demo/chart/all/components/d2-demo-chart-card-header.vue
index 194460da..18d4c20f 100644
--- a/src/pages/demo/chart/all/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/all/components/d2-demo-chart-card-header.vue
@@ -14,6 +14,7 @@
 
 <script>
 export default {
+  name: 'd2-demo-chart-card-header',
   props: {
     title: {
       type: String,
diff --git a/src/pages/demo/chart/all/index.vue b/src/pages/demo/chart/all/index.vue
index 91126a32..0837f774 100644
--- a/src/pages/demo/chart/all/index.vue
+++ b/src/pages/demo/chart/all/index.vue
@@ -2,50 +2,50 @@
   <d2-container type="ghost" :responsive="true" class="demo-chart-index">
     <el-row :gutter="20">
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></d2-demo-chart-card-header>
           <d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></d2-demo-chart-card-header>
           <d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></d2-demo-chart-card-header>
           <d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></d2-demo-chart-card-header>
           <d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></d2-demo-chart-card-header>
           <d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></d2-demo-chart-card-header>
           <d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></d2-demo-chart-card-header>
           <d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
         </el-card>
       </el-col>
       <el-col class="col" :span="8">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></d2-demo-chart-card-header>
           <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
       </el-col>
@@ -56,7 +56,7 @@
 <script>
 export default {
   components: {
-    ChartCardHeader: () => import('./components/ChartCardHeader')
+    'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
   },
   data () {
     return {
diff --git a/src/pages/demo/chart/demo/PieBase.vue b/src/pages/demo/chart/demo/PieBase.vue
index 73e67aab..d347ba64 100644
--- a/src/pages/demo/chart/demo/PieBase.vue
+++ b/src/pages/demo/chart/demo/PieBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-pie-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-pie-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index e13c2606..eb324ca8 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-area-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-area-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/barBase.vue b/src/pages/demo/chart/demo/barBase.vue
index a257df0d..f31fcc5a 100644
--- a/src/pages/demo/chart/demo/barBase.vue
+++ b/src/pages/demo/chart/demo/barBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-bar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-bar-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/columnBase.vue b/src/pages/demo/chart/demo/columnBase.vue
index c6da31a0..eab38ea2 100644
--- a/src/pages/demo/chart/demo/columnBase.vue
+++ b/src/pages/demo/chart/demo/columnBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-column-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-column-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/d2-demo-chart-card.vue
similarity index 100%
rename from src/pages/demo/chart/demo/components/ChartDemoCard.vue
rename to src/pages/demo/chart/demo/components/d2-demo-chart-card.vue
diff --git a/src/pages/demo/chart/demo/lineBase.vue b/src/pages/demo/chart/demo/lineBase.vue
index b01286e3..434fa57e 100644
--- a/src/pages/demo/chart/demo/lineBase.vue
+++ b/src/pages/demo/chart/demo/lineBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-line-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/lineStep.vue b/src/pages/demo/chart/demo/lineStep.vue
index 802fcbc9..fd559668 100644
--- a/src/pages/demo/chart/demo/lineStep.vue
+++ b/src/pages/demo/chart/demo/lineStep.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-line-step slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-line-step>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/mixins/public.js b/src/pages/demo/chart/demo/mixins/public.js
index 17c839b4..7a0b5698 100644
--- a/src/pages/demo/chart/demo/mixins/public.js
+++ b/src/pages/demo/chart/demo/mixins/public.js
@@ -1,5 +1,5 @@
 export default {
   components: {
-    ChartDemoCard: () => import('../components/ChartDemoCard.vue')
+    'd2-demo-chart-card': () => import('../components/d2-demo-chart-card.vue')
   }
 }
diff --git a/src/pages/demo/chart/demo/nightingaleRoseBase.vue b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
index e7e4f1f6..0e52ce20 100644
--- a/src/pages/demo/chart/demo/nightingaleRoseBase.vue
+++ b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-nightingale-rose-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-nightingale-rose-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/demo/radarBase.vue b/src/pages/demo/chart/demo/radarBase.vue
index 6451b317..e319081b 100644
--- a/src/pages/demo/chart/demo/radarBase.vue
+++ b/src/pages/demo/chart/demo/radarBase.vue
@@ -1,11 +1,8 @@
 <template>
   <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <d2-demo-chart-card v-bind="card" @resize="$refs.chart.resize()">
       <d2-chart-radar-base slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></d2-chart-radar-base>
-    </ChartDemoCard>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图表.md"/>
-    </el-card>
+    </d2-demo-chart-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue b/src/pages/demo/chart/dynamicSize/components/d2-demo-chart-card-header.vue
similarity index 95%
rename from src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
rename to src/pages/demo/chart/dynamicSize/components/d2-demo-chart-card-header.vue
index 194460da..18d4c20f 100644
--- a/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/dynamicSize/components/d2-demo-chart-card-header.vue
@@ -14,6 +14,7 @@
 
 <script>
 export default {
+  name: 'd2-demo-chart-card-header',
   props: {
     title: {
       type: String,
diff --git a/src/pages/demo/chart/dynamicSize/index.vue b/src/pages/demo/chart/dynamicSize/index.vue
index 29ba5b13..c3bbd56b 100644
--- a/src/pages/demo/chart/dynamicSize/index.vue
+++ b/src/pages/demo/chart/dynamicSize/index.vue
@@ -3,57 +3,57 @@
     <d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></d2-demo-chart-card-header>
           <d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></d2-demo-chart-card-header>
           <d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></d2-demo-chart-card-header>
           <d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></d2-demo-chart-card-header>
           <d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></d2-demo-chart-card-header>
           <d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></d2-demo-chart-card-header>
           <d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></d2-demo-chart-card-header>
           <d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
         </el-card>
       </d2-grid-item>
       <!-- 卡片 -->
       <d2-grid-item v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
-        <el-card class="header-in">
-          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></ChartCardHeader>
+        <el-card shadow="never" class="header-in">
+          <d2-demo-chart-card-header slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></d2-demo-chart-card-header>
           <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
       </d2-grid-item>
@@ -64,7 +64,7 @@
 <script>
 export default {
   components: {
-    ChartCardHeader: () => import('./components/ChartCardHeader')
+    'd2-demo-chart-card-header': () => import('./components/d2-demo-chart-card-header')
   },
   data () {
     return {
diff --git a/src/pages/demo/components/container/card.vue b/src/pages/demo/components/container/card.vue
new file mode 100644
index 00000000..49ccca78
--- /dev/null
+++ b/src/pages/demo/components/container/card.vue
@@ -0,0 +1,17 @@
+<template>
+  <d2-container>
+    <template slot="header">我是插入到 header 中的内容</template>
+    <d2-markdown :md="doc"/>
+  </d2-container>
+</template>
+
+<script>
+import doc from './md/doc-card.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/components/container/full.vue b/src/pages/demo/components/container/full.vue
index 9d31cbb9..0783ea0e 100644
--- a/src/pages/demo/components/container/full.vue
+++ b/src/pages/demo/components/container/full.vue
@@ -3,9 +3,20 @@
     <template slot="header">
       我是插入到 header 中的内容
     </template>
-    <d2-markdown url="/static/md/组件 - 页面容器 - 撑满.md"/>
+    <d2-markdown :md="doc"/>
     <template slot="footer">
       我是插入到 footer 中的内容
     </template>
   </d2-container>
 </template>
+
+<script>
+import doc from './md/doc-full.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
index 788779e6..6250aea8 100644
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -1,7 +1,18 @@
 <template>
   <d2-container type="ghost">
-    <el-card style="width: 50%;">
-      <d2-markdown url="/static/md/组件 - 页面容器 - 隐形.md"/>
+    <el-card shadow="never" style="width: 50%;">
+      <d2-markdown :md="doc"/>
     </el-card>
   </d2-container>
 </template>
+
+<script>
+import doc from './md/doc-ghost.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>
diff --git a/static/md/组件 - 页面容器 - 基础.md b/src/pages/demo/components/container/md/doc-card.md
similarity index 100%
rename from static/md/组件 - 页面容器 - 基础.md
rename to src/pages/demo/components/container/md/doc-card.md
diff --git a/static/md/组件 - 页面容器 - 撑满.md b/src/pages/demo/components/container/md/doc-full.md
similarity index 98%
rename from static/md/组件 - 页面容器 - 撑满.md
rename to src/pages/demo/components/container/md/doc-full.md
index df8b36f4..a254fc10 100644
--- a/static/md/组件 - 页面容器 - 撑满.md	
+++ b/src/pages/demo/components/container/md/doc-full.md
@@ -72,4 +72,4 @@ Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 
 
 - 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
 
-- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
+- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
\ No newline at end of file
diff --git a/static/md/组件 - 页面容器 - 隐形.md b/src/pages/demo/components/container/md/doc-ghost.md
similarity index 100%
rename from static/md/组件 - 页面容器 - 隐形.md
rename to src/pages/demo/components/container/md/doc-ghost.md
diff --git a/src/pages/demo/components/container/normal.vue b/src/pages/demo/components/container/normal.vue
deleted file mode 100644
index 2bea1196..00000000
--- a/src/pages/demo/components/container/normal.vue
+++ /dev/null
@@ -1,6 +0,0 @@
-<template>
-  <d2-container>
-    <template slot="header">我是插入到 header 中的内容</template>
-    <d2-markdown url="/static/md/组件 - 页面容器 - 基础.md"/>
-  </d2-container>
-</template>
diff --git a/src/pages/demo/components/countup/index.vue b/src/pages/demo/components/countup/index.vue
index ef6a6f8b..e5e59243 100644
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -1,11 +1,9 @@
 <template>
-  <d2-container type="ghost" class="page">
-    <el-card>
-      <d2-demo-page-header title="数字动画组件"/>
-    </el-card>
+  <d2-container class="page">
+    <template slot="header">数字动画组件</template>
     <el-row :gutter="20">
       <el-col :span="6">
-        <el-card>
+        <el-card shadow="never" class="d2-mb">
           <p slot="title">只设置目标数字</p>
           <div class="group">
             <d2-count-up :end="100"/>  
@@ -13,7 +11,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card shadow="never" class="d2-mb">
           <p slot="title">设置起止数值</p>
           <div class="group">
             <d2-count-up :start="14" :end="100"/>
@@ -21,7 +19,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card shadow="never" class="d2-mb">
           <p slot="title">小数位数</p>
           <div class="group">
             <d2-count-up :end="100" :decimals="2"/>
@@ -29,7 +27,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card shadow="never" class="d2-mb">
           <p slot="title">动画时长</p>
           <div class="group">
             <d2-count-up :end="100" :duration="6"/>
@@ -37,7 +35,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card shadow="never">
           <p slot="title">回调函数</p>
           <div class="group">
             <d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
@@ -45,7 +43,7 @@
         </el-card>
       </el-col>
       <el-col :span="6">
-        <el-card>
+        <el-card shadow="never" class="d2-mb-0">
           <p slot="title">结束一秒后更新数值</p>
           <div class="group">
             <d2-count-up :end="end" :callback="update"/>
@@ -53,9 +51,6 @@
         </el-card>
       </el-col>
     </el-row>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 数字动画.md"/>
-    </el-card>
   </d2-container>
 </template>
 
@@ -85,7 +80,6 @@ export default {
 .page {
   .el-card {
     @extend %unable-select;
-    margin-bottom: $margin;
     .group {
       display: flex;
       justify-content: center;
diff --git a/src/pages/demo/components/editor-quill/index.vue b/src/pages/demo/components/editor-quill/index.vue
index 5ab2a667..fee97be8 100644
--- a/src/pages/demo/components/editor-quill/index.vue
+++ b/src/pages/demo/components/editor-quill/index.vue
@@ -1,16 +1,13 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header slot="header" title="基本示例"/>
-      <d2-quill
-        style="min-height: 200px;"
-        v-model="value"
-        @text-change="textChangeHandler"
-        @selection-change="selectionChangeHandler"
-        @editor-change="editorChangeHandler"/>
-    </el-card>
-    <el-card>
-      <template slot="header">输出</template>
+  <d2-container>
+    <d2-demo-page-header slot="header" title="基本示例"/>
+    <d2-quill
+      style="min-height: 200px;"
+      v-model="value"
+      @text-change="textChangeHandler"
+      @selection-change="selectionChangeHandler"
+      @editor-change="editorChangeHandler"/>
+    <el-card shadow="never" class="d2-mt">
       <d2-highlight :code="formated"/>
     </el-card>
   </d2-container>
diff --git a/src/pages/demo/components/editor-simpleMDE/index.vue b/src/pages/demo/components/editor-simpleMDE/index.vue
index e2d02fe8..b0f399fc 100644
--- a/src/pages/demo/components/editor-simpleMDE/index.vue
+++ b/src/pages/demo/components/editor-simpleMDE/index.vue
@@ -1,13 +1,10 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header slot="header" title="基本示例"/>
-      <d2-mde
-        v-model="text"
-        class="mde"/>
-    </el-card>
-    <el-card>
-      <template slot="header">输出</template>
+  <d2-container>
+    <d2-demo-page-header slot="header" title="基本示例"/>
+    <d2-mde
+      v-model="text"
+      class="mde"/>
+    <el-card shadow="never">
       <pre>{{text}}</pre>
     </el-card>
   </d2-container>
diff --git a/src/pages/demo/components/highlight/index.vue b/src/pages/demo/components/highlight/index.vue
index 302d2778..737b17cd 100644
--- a/src/pages/demo/components/highlight/index.vue
+++ b/src/pages/demo/components/highlight/index.vue
@@ -1,35 +1,30 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header title="代码高亮组件"/>
-    </el-card>
-    <el-card class="d2-mb">
+  <d2-container>
+    <template slot="header">代码高亮组件</template>
+    <el-card shadow="never" class="d2-mb">
       <p slot="title">javascript</p>
       <d2-highlight :code="codeJavascript"/>
     </el-card>
     <el-row :gutter="20">
       <el-col :span="8">
-        <el-card class="d2-mb">
+        <el-card shadow="never">
           <p slot="title">css</p>
           <d2-highlight :code="codeCSS"/>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card class="d2-mb">
+        <el-card shadow="never">
           <p slot="title">scss</p>
           <d2-highlight :code="codeSCSS"/>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card class="d2-mb">
+        <el-card shadow="never">
           <p slot="title">html</p>
           <d2-highlight :code="codeHTML"/>
         </el-card>
       </el-col>
     </el-row>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 代码高亮.md"/>
-    </el-card>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/components/icon/components/IconCell.vue b/src/pages/demo/components/icon/components/d2-icon-cell.vue
similarity index 100%
rename from src/pages/demo/components/icon/components/IconCell.vue
rename to src/pages/demo/components/icon/components/d2-icon-cell.vue
diff --git a/src/pages/demo/components/icon/icon.vue b/src/pages/demo/components/icon/icon.vue
index e1ed030e..0ce31ce0 100644
--- a/src/pages/demo/components/icon/icon.vue
+++ b/src/pages/demo/components/icon/icon.vue
@@ -1,15 +1,10 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header slot="header" title="图标组件"/>
-      <d2-icon/>
-      <d2-icon name="github"/>
-      <d2-icon name="github" style="font-size: 100px;"/>
-      <d2-icon name="github" class="icon-class-demo"/>
-    </el-card>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图标组件.md"/>
-    </el-card>
+  <d2-container>
+    <template slot="header">图标组件</template>
+    <d2-icon/>
+    <d2-icon name="github"/>
+    <d2-icon name="github" style="font-size: 100px;"/>
+    <d2-icon name="github" class="icon-class-demo"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/components/icon/list.vue b/src/pages/demo/components/icon/list.vue
index e691999c..e0ffcbaa 100644
--- a/src/pages/demo/components/icon/list.vue
+++ b/src/pages/demo/components/icon/list.vue
@@ -1,28 +1,21 @@
 <template>
-  <d2-container type="ghost">
-    <el-card>
-      <template slot="header">
-        <el-radio-group v-model="showIndex" size="mini">
-          <el-radio-button
-            v-for="(item, index) in radioOptions"
-            :key="index"
-            :label="item.value">
-            {{item.label}}
-          </el-radio-button>
-        </el-radio-group>
-      </template>
-      <el-row style="margin: -10px;">
-        <el-alert
-          title="点击图标复制代码"
-          type="info"
-          class="d2-m-10"
-          style="width: auto;">
-        </el-alert>
-        <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
-          <d2-iconCell :icon="iconItem"></d2-iconCell>
-        </el-col>
-      </el-row>
-    </el-card>
+  <d2-container>
+    <template slot="header">
+      <el-radio-group v-model="showIndex" size="mini">
+        <el-radio-button
+          v-for="(item, index) in radioOptions"
+          :key="index"
+          :label="item.value">
+          {{item.label}}
+        </el-radio-button>
+      </el-radio-group>
+    </template>
+    <el-row style="margin: -10px;">
+      <el-alert title="点击图标复制代码" type="info" class="d2-m-10" style="width: auto;"/>
+      <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
+        <d2-icon-cell :icon="iconItem"/>
+      </el-col>
+    </el-row>
   </d2-container>
 </template>
 
@@ -30,7 +23,7 @@
 import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
 export default {
   components: {
-    IconCell: () => import('./components/IconCell')
+    'd2-icon-cell': () => import('./components/d2-icon-cell')
   },
   data () {
     return {
diff --git a/src/pages/demo/components/icon/select.vue b/src/pages/demo/components/icon/select.vue
index 2ad209e8..9e5c2721 100644
--- a/src/pages/demo/components/icon/select.vue
+++ b/src/pages/demo/components/icon/select.vue
@@ -1,33 +1,28 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header slot="header" title="图标选择器"/>
-      <div class="title-group">
-        <p class="title">一般用法</p>
-        <p class="sub-title">
-          <template v-if="icon">
-            选择的图标 {{icon}}
-            <i :class="'fa fa-' + icon"></i>
-          </template>
-          <template v-else>未选择</template>
-        </p>
-      </div>
-      <d2-icon-select v-model="icon"/>
-      <div class="title-group">
-        <p class="title">用户可以输入</p>
-        <p class="sub-title">
-          <template v-if="icon2">
-            选择的图标 {{icon2}}
-            <i :class="'fa fa-' + icon2"></i>
-          </template>
-          <template v-else>未选择</template>
-        </p>
-      </div>
-      <d2-icon-select v-model="icon2" :user-input="true"/>
-    </el-card>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图标选择器.md"/>
-    </el-card>
+  <d2-container>
+    <template slot="header">图标选择器</template>
+    <div class="title-group">
+      <p class="title">一般用法</p>
+      <p class="sub-title">
+        <template v-if="icon">
+          选择的图标 {{icon}}
+          <i :class="'fa fa-' + icon"></i>
+        </template>
+        <template v-else>未选择</template>
+      </p>
+    </div>
+    <d2-icon-select v-model="icon"/>
+    <div class="title-group">
+      <p class="title">用户可以输入</p>
+      <p class="sub-title">
+        <template v-if="icon2">
+          选择的图标 {{icon2}}
+          <i :class="'fa fa-' + icon2"></i>
+        </template>
+        <template v-else>未选择</template>
+      </p>
+    </div>
+    <d2-icon-select v-model="icon2" :user-input="true"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/svg.vue
index 280186e5..321741fa 100644
--- a/src/pages/demo/components/icon/svg.vue
+++ b/src/pages/demo/components/icon/svg.vue
@@ -1,19 +1,14 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header slot="header" title="SVG图标组件"/>
-      <el-row>
-        <el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
-          <d2-icon-svg class="icon" :name="icon"/>
-          <div class="icon-title">
-            <span>{{icon}}</span>
-          </div>
-        </el-col>
-      </el-row>
-    </el-card>
-    <el-card>
-      <d2-markdown url="/static/md/组件 - 图标组件 - svg.md"/>
-    </el-card>
+  <d2-container>
+    <template slot="header">SVG图标组件</template>
+    <el-row>
+      <el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
+        <d2-icon-svg class="icon" :name="icon"/>
+        <div class="icon-title">
+          <span>{{icon}}</span>
+        </div>
+      </el-col>
+    </el-row>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/components/layout/grid.vue b/src/pages/demo/components/layout/grid.vue
index f9905920..2cd5d60a 100644
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -1,5 +1,5 @@
 <template>
-  <d2-container type="ghost" class="demo-plugins-vue-grid-layout-demo">
+  <d2-container type="ghost" class="demo-layout-grid">
     <d2-grid-layout
       v-bind="layout"
       @layout-updated="layoutUpdatedHandler">
@@ -11,7 +11,7 @@
         @move="moveHandler"
         @resized="resizedHandler"
         @moved="movedHandler">
-        <el-card>
+        <el-card shadow="never">
           <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
           <template v-if="item.i === '0'">
             <div class="d2-mb">拖拽卡片调整位置</div>
@@ -88,7 +88,7 @@ export default {
 
 <style lang="scss">
 @import '~@/assets/style/public.scss';
-.demo-plugins-vue-grid-layout-demo {
+.demo-layout-grid {
   .vue-grid-layout {
     margin: -10px;
     .el-card {
diff --git a/src/pages/demo/components/layout/splitpane.vue b/src/pages/demo/components/layout/splitpane.vue
index c05f4288..d229f501 100644
--- a/src/pages/demo/components/layout/splitpane.vue
+++ b/src/pages/demo/components/layout/splitpane.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="基本示例"/>
+    <template slot="header">基本示例</template>
     <div style="height: 400px; margin: -16px;">
       <SplitPane :min-percent='20' :default-percent='30' split="vertical">
         <template slot="paneL"><div style="margin: 10px;">左</div></template>
diff --git a/src/pages/demo/components/markdown/index.vue b/src/pages/demo/components/markdown/index.vue
index 68d785fd..e38e9ab4 100644
--- a/src/pages/demo/components/markdown/index.vue
+++ b/src/pages/demo/components/markdown/index.vue
@@ -1,6 +1,17 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="效果演示"/>
-    <d2-markdown url="/static/md/组件 - markdown - 演示.md"/>
+    <template slot="header">效果演示</template>
+    <d2-markdown :md="doc"/>
   </d2-container>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import doc from './md/doc.md'
+export default {
+  data () {
+    return {
+      doc
+    }
+  }
+}
+</script>
diff --git a/static/md/组件 - markdown - 演示.md b/src/pages/demo/components/markdown/md/doc.md
similarity index 86%
rename from static/md/组件 - markdown - 演示.md
rename to src/pages/demo/components/markdown/md/doc.md
index 3e1d0c1b..301b283d 100644
--- a/static/md/组件 - markdown - 演示.md	
+++ b/src/pages/demo/components/markdown/md/doc.md
@@ -20,6 +20,4 @@ alert('Hello World')
 
 > 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
 
-[https://github.com/FairyEver](https://github.com/FairyEver)
-
-
+[https://github.com/FairyEver](https://github.com/FairyEver)
\ No newline at end of file
diff --git a/src/pages/demo/plugins/build/index.vue b/src/pages/demo/plugins/build/index.vue
index 90f3fb16..08f640cf 100644
--- a/src/pages/demo/plugins/build/index.vue
+++ b/src/pages/demo/plugins/build/index.vue
@@ -1,8 +1,6 @@
 <template>
-  <d2-container type="full">
-    <template slot="header">
-      多环境发布
-    </template>
+  <d2-container>
+    <template slot="header">多环境发布</template>
     <p>当前是{{$env ? '开发' : '生产'}}环境</p>
   </d2-container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/clipboard-polyfill/index.vue b/src/pages/demo/plugins/clipboard-polyfill/index.vue
index d63e0f6e..c838df39 100644
--- a/src/pages/demo/plugins/clipboard-polyfill/index.vue
+++ b/src/pages/demo/plugins/clipboard-polyfill/index.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="基本示例"/>
+    <template slot="header">剪贴板访问</template>
     <el-row :gutter="10">
       <el-col :span="12">
         <div class="d2-mb">
@@ -12,7 +12,7 @@
       <el-col :span="12">
         <el-alert
           class="d2-mb"
-          title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
+          title="在 IE 浏览器或者高版本 Chrome 下你才可以通过下面这两个按钮获取剪贴板数据"
           type="warning"
           show-icon>
         </el-alert>
diff --git a/src/pages/demo/plugins/export/table.vue b/src/pages/demo/plugins/export/table.vue
index 900c05dc..af0f69f3 100644
--- a/src/pages/demo/plugins/export/table.vue
+++ b/src/pages/demo/plugins/export/table.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="导出表格"/>
+    <template slot="header">导出表格</template>
     <div class="d2-mb">
       <el-button type="primary" @click="exportCsv">
         <d2-icon name="download"/>
@@ -11,7 +11,7 @@
         导出 Excel
       </el-button>
     </div>
-    <el-table v-bind="table" style="width: 100%" class="d2-mb">
+    <el-table v-bind="table" style="width: 100%">
       <el-table-column
         v-for="(item, index) in table.columns"
         :key="index"
@@ -19,7 +19,6 @@
         :label="item.label">
       </el-table-column>
     </el-table>
-    <d2-markdown url="/static/md/插件 - 导出.md"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/export/txt.vue b/src/pages/demo/plugins/export/txt.vue
index 978104fc..685f57ed 100644
--- a/src/pages/demo/plugins/export/txt.vue
+++ b/src/pages/demo/plugins/export/txt.vue
@@ -1,19 +1,18 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="导出文本"/>
+    <template slot="header">导出文本</template>
     <el-input
       type="textarea"
       :autosize="{minRows: 2, maxRows: 4}"
       placeholder="请输入内容 然后点击保存按钮导出文本文档"
       v-model="text">
     </el-input>
-    <div class="d2-mt d2-mb">
+    <div class="d2-mt">
       <el-button type="primary" @click="exportTxt">
         <d2-icon name="download"/>
         保存为 txt
       </el-button>
     </div>
-    <d2-markdown url="/static/md/插件 - 导出.md"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/i18n/demo1.vue b/src/pages/demo/plugins/i18n/demo1.vue
index 411c3b1a..ef7204ef 100644
--- a/src/pages/demo/plugins/i18n/demo1.vue
+++ b/src/pages/demo/plugins/i18n/demo1.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 1`"/>
+    <template slot="header">{{`${$t('pub.pageHeader.demo')} 1`}}</template>
     <DemoI18nControl></DemoI18nControl>
     <DemoI18n></DemoI18n>
   </d2-container>
diff --git a/src/pages/demo/plugins/i18n/demo2.vue b/src/pages/demo/plugins/i18n/demo2.vue
index 80187f29..154ef2de 100644
--- a/src/pages/demo/plugins/i18n/demo2.vue
+++ b/src/pages/demo/plugins/i18n/demo2.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 2`"/>
+    <template slot="header">{{`${$t('pub.pageHeader.demo')} 2`}}</template>
     <DemoI18nControl></DemoI18nControl>
     <DemoI18n></DemoI18n>
   </d2-container>
diff --git a/src/pages/demo/plugins/import/csv.vue b/src/pages/demo/plugins/import/csv.vue
index 73eea01b..aa18de82 100644
--- a/src/pages/demo/plugins/import/csv.vue
+++ b/src/pages/demo/plugins/import/csv.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="导入 csv"/>
+    <template slot="header">导入 csv</template>
     <div class="d2-mb">
       <el-button @click="download">
         <d2-icon name="download"/>
@@ -23,7 +23,6 @@
         :label="item.label">
       </el-table-column>
     </el-table>
-    <d2-markdown url="/static/md/插件 - 导入.md"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/import/xlsx.vue b/src/pages/demo/plugins/import/xlsx.vue
index bfb18bda..487b5553 100644
--- a/src/pages/demo/plugins/import/xlsx.vue
+++ b/src/pages/demo/plugins/import/xlsx.vue
@@ -1,6 +1,6 @@
 <template>
   <d2-container>
-    <d2-demo-page-header slot="header" title="导入 xlsx"/>
+    <template slot="header">导入 xlsx</template>
     <div class="d2-mb">
       <el-button @click="download">
         <d2-icon name="download"/>
@@ -23,7 +23,6 @@
         :label="item.label">
       </el-table-column>
     </el-table>
-    <d2-markdown url="/static/md/插件 - 导入.md"/>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/js-cookie/index.vue b/src/pages/demo/plugins/js-cookie/index.vue
index 840f969d..2e004854 100644
--- a/src/pages/demo/plugins/js-cookie/index.vue
+++ b/src/pages/demo/plugins/js-cookie/index.vue
@@ -1,18 +1,16 @@
 <template>
-  <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header slot="header" title="基本示例"/>
-      <p class="d2-mt-0">基本读写删</p>
-      <el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
-      <el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
-      <el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
-      <p>设置有效期</p>
-      <el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
-      <el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
-      <el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
-      <p>获取所有可以获得的数据</p>
-      <el-button type="info" @click="getAll">getAll</el-button>
-    </el-card>
+  <d2-container>
+    <template slot="header">Cookie 读写</template>
+    <p class="d2-mt-0">基本读写删</p>
+    <el-button type="primary" @click="set('test-user-name', 'test-user')">set('test-user-name', 'normalValue')</el-button>
+    <el-button type="info" @click="get('test-user-name')">get('test-user-name')</el-button>
+    <el-button type="error" @click="remove('test-user-name')">remove('test-user-name')</el-button>
+    <p>设置有效期</p>
+    <el-button type="primary" @click="setExpires('test-user-pwd', '123456789', 1)">设置 'test-user-pwd' 有效期为一天</el-button>
+    <el-button type="info" @click="get('test-user-pwd')">get('test-user-pwd')</el-button>
+    <el-button type="error" @click="remove('test-user-pwd')">remove('test-user-pwd')</el-button>
+    <p>获取所有可以获得的数据</p>
+    <el-button type="info" @click="getAll">getAll</el-button>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/mock/ajax.vue b/src/pages/demo/plugins/mock/ajax.vue
index c1837864..ee0f035a 100644
--- a/src/pages/demo/plugins/mock/ajax.vue
+++ b/src/pages/demo/plugins/mock/ajax.vue
@@ -1,19 +1,16 @@
 <template>
-  <d2-container type="ghost">
-    <el-card>
-      <div slot="header">
-        <el-button @click="ajax">发送请求</el-button>
-      </div>
-      <el-table v-bind="table" style="width: 100%" class="d2-mb">
-        <el-table-column
-          v-for="(item, index) in table.columns"
-          :key="index"
-          :prop="item.prop"
-          :label="item.label">
-        </el-table-column>
-      </el-table>
-      <d2-markdown url="/static/md/插件 - mock拦截ajax.md"/>
-    </el-card>
+  <d2-container>
+    <div slot="header">
+      <el-button @click="ajax">发送请求</el-button>
+    </div>
+    <el-table v-bind="table" style="width: 100%">
+      <el-table-column
+        v-for="(item, index) in table.columns"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
   </d2-container>
 </template>
 
diff --git a/src/pages/demo/plugins/mock/components/MockDemoCard.vue b/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
similarity index 95%
rename from src/pages/demo/plugins/mock/components/MockDemoCard.vue
rename to src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
index 585df91c..04491ceb 100644
--- a/src/pages/demo/plugins/mock/components/MockDemoCard.vue
+++ b/src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card class="d2-mb">
+  <el-card shadow="never" class="d2-mb">
     <div slot="header" class="d2-clearfix">
       <el-button type="text" size="mini">{{title}}</el-button>
       <el-tooltip content="重新 mock 数据" placement="top-end">
@@ -23,6 +23,7 @@
 
 <script>
 export default {
+  name: 'd2-demo-mock-card',
   props: {
     title: {
       type: String,
diff --git a/src/pages/demo/plugins/mock/dpd.vue b/src/pages/demo/plugins/mock/dpd.vue
index 85a110f7..c51f9585 100644
--- a/src/pages/demo/plugins/mock/dpd.vue
+++ b/src/pages/demo/plugins/mock/dpd.vue
@@ -1,17 +1,17 @@
 <template>
   <d2-container type="ghost">
-    <el-card class="d2-mb">
+    <el-card shadow="never" class="d2-mb">
       <d2-demo-page-header slot="header" title="数据占位符"/>
-      <d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
+      <d2-markdown :md="doc"/>
     </el-card>
-    <MockDemoCard
+    <d2-demo-mock-card
       v-for="(item, index) in settingDPD"
       :key="index"
       :title="item.title"
       :code="JSON.stringify(item.json, null, 2)"
       :mock="mockResult[index]"
       @reload="doMock(index)">
-    </MockDemoCard>
+    </d2-demo-mock-card>
   </d2-container>
 </template>
 
@@ -20,15 +20,17 @@ import Vue from 'vue'
 import clone from '@/utils/clone.js'
 import Mock from 'mockjs'
 import settingDPD from './data/settingDPD'
+import doc from './md/doc.md'
 export default {
   components: {
-    MockDemoCard: () => import('./components/MockDemoCard')
+    'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
   },
   data () {
     return {
       mockResult: [],
       settingDPD,
-      settingDPDClone: clone(settingDPD)
+      settingDPDClone: clone(settingDPD),
+      doc
     }
   },
   mounted () {
diff --git a/src/pages/demo/plugins/mock/dtd.vue b/src/pages/demo/plugins/mock/dtd.vue
index 79e7a8f8..5ff55ec3 100644
--- a/src/pages/demo/plugins/mock/dtd.vue
+++ b/src/pages/demo/plugins/mock/dtd.vue
@@ -1,29 +1,29 @@
 <template>
   <d2-container type="ghost">
-    <el-card class="d2-mb">
+    <el-card shadow="never" class="d2-mb">
       <d2-demo-page-header slot="header" title="数据模板"/>
-      <d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
+      <d2-markdown :md="doc"/>
     </el-card>
-    <MockDemoCard
+    <d2-demo-mock-card
       v-for="(item, index) in settingDTD"
       :key="index"
       :title="item.title"
       :code="JSON.stringify(item.json, null, 2)"
       :mock="mockResult[index]"
       @reload="doMock(index)">
-    </MockDemoCard>
-    <MockDemoCard
+    </d2-demo-mock-card>
+    <d2-demo-mock-card
       :title="fn.title"
       :code="fn.code"
       :mock="fn.mocked"
       @reload="fnMock()">
-    </MockDemoCard>
-    <MockDemoCard
+    </d2-demo-mock-card>
+    <d2-demo-mock-card
       :title="regexp.title"
       :code="regexp.code"
       :mock="regexp.mocked"
       @reload="regexpMock()">
-    </MockDemoCard>
+    </d2-demo-mock-card>
   </d2-container>
 </template>
 
@@ -34,19 +34,21 @@ import Mock from 'mockjs'
 import settingDTD from './data/settingDTD'
 import regexp from './mixins/regexp'
 import fn from './mixins/function'
+import doc from './md/doc.md'
 export default {
   mixins: [
     regexp,
     fn
   ],
   components: {
-    MockDemoCard: () => import('./components/MockDemoCard')
+    'd2-demo-mock-card': () => import('./components/d2-demo-mock-card')
   },
   data () {
     return {
       mockResult: [],
       settingDTD,
-      settingDTDClone: clone(settingDTD)
+      settingDTDClone: clone(settingDTD),
+      doc
     }
   },
   mounted () {
diff --git a/static/md/插件 - mock演示页面介绍.md b/src/pages/demo/plugins/mock/md/doc.md
similarity index 100%
rename from static/md/插件 - mock演示页面介绍.md
rename to src/pages/demo/plugins/mock/md/doc.md
diff --git a/src/pages/demo/plugins/timeago/index.vue b/src/pages/demo/plugins/timeago/index.vue
index cad12708..2aa51096 100644
--- a/src/pages/demo/plugins/timeago/index.vue
+++ b/src/pages/demo/plugins/timeago/index.vue
@@ -1,15 +1,12 @@
 <template>
   <d2-container type="ghost">
-    <el-card class="d2-mb">
-      <d2-demo-page-header title="基本示例"/>
-    </el-card>
-    <el-card class="d2-mb">
+    <el-card shadow="never" class="d2-mb">
       <div class="d2-text-center">
         <h1 style="font-size: 30px;">您在{{openPageDateAgo}}打开的此页面</h1>
         <p style="font-size: 10px;">请稍等一下 10秒后会开始自动刷新</p>
       </div>
     </el-card>
-    <el-card class="d2-mb">
+    <el-card shadow="never">
       <div class="d2-text-center">
         <h1 style="font-size: 30px;">{{dateTimeRangeAgo}}</h1>
         <el-date-picker
@@ -21,9 +18,6 @@
         </el-date-picker>
       </div>
     </el-card>
-    <el-card>
-      <d2-markdown url="/static/md/插件 - timeago.md"/>
-    </el-card>
   </d2-container>
 </template>
 
diff --git a/src/router/index.js b/src/router/index.js
index 2b581011..8b7f2599 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -28,7 +28,7 @@ const routes = [
     children: (pre => [
       { path: 'container/full', name: `${pre}container-full`, component: () => import('@/pages/demo/components/container/full.vue') },
       { path: 'container/ghost', name: `${pre}container-ghost`, component: () => import('@/pages/demo/components/container/ghost.vue') },
-      { path: 'container/normal', name: `${pre}container-normal`, component: () => import('@/pages/demo/components/container/normal.vue') },
+      { path: 'container/normal', name: `${pre}container-card`, component: () => import('@/pages/demo/components/container/card.vue') },
       { path: 'countup', name: `${pre}countup`, component: () => import('@/pages/demo/components/countup/index.vue') },
       { path: 'editor-quill', name: `${pre}editor-quill`, component: () => import('@/pages/demo/components/editor-quill/index.vue') },
       { path: 'editor-simpleMDE', name: `${pre}editor-simpleMDE`, component: () => import('@/pages/demo/components/editor-simpleMDE/index.vue') },
diff --git a/src/store/modules/theme.js b/src/store/modules/theme.js
index 7da93b18..5eae0945 100644
--- a/src/store/modules/theme.js
+++ b/src/store/modules/theme.js
@@ -1,11 +1,47 @@
+import Cookies from 'js-cookie'
+
 export default {
   state: {
-    themeName: 'star'
+    list: [
+      {
+        name: 'd2admin 经典',
+        value: 'd2',
+        preview: '/static/image/theme-preview/d2@2x.png'
+      },
+      {
+        name: '流星',
+        value: 'star',
+        preview: '/static/image/theme-preview/star@2x.png'
+      }
+    ],
+    name: ''
   },
   mutations: {
-    // 设置主题
-    setTheme (state, themeName) {
-      state.themeName = themeName
+    // 从 cookie 加载主题
+    loadTheme (state) {
+      const name = Cookies.get('themeName')
+      if (name) {
+        // 设置 store
+        state.name = name
+        // 激活主题
+        this.commit('activeTheme')
+      } else {
+        // 设置新的主题为列表第一项
+        this.commit('setTheme', state.list[0].value)
+      }
+    },
+    // 设置新的主题
+    setTheme (state, name) {
+      // 设置 store
+      state.name = name
+      // 设置 Cookie
+      Cookies.set('themeName', name)
+      // 激活主题
+      this.commit('activeTheme')
+    },
+    // 激活当前主题
+    activeTheme (state) {
+      document.body.className = `theme-${state.name}`
     }
   }
 }
diff --git a/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id b/static/image/theme-preview/d2@2x.png.REMOVED.git-id
similarity index 100%
rename from static/image/theme-preview/d2admin@2x.png.REMOVED.git-id
rename to static/image/theme-preview/d2@2x.png.REMOVED.git-id
diff --git a/static/md/插件 - mock拦截ajax.md b/static/md/插件 - mock拦截ajax.md
deleted file mode 100644
index 3f2f9d9f..00000000
--- a/static/md/插件 - mock拦截ajax.md	
+++ /dev/null
@@ -1,35 +0,0 @@
-在 `src/mock/demo/001.js` 配置拦截返回的数据
-
-```
-import Mock from 'mockjs'
-
-Mock.mock('/api/demo/001', {
-  'list|4-10': [{
-    'id|+1': 1,
-    'name': '@CNAME',
-    'star|1-5': '★',
-    'delFlag|1': [0, 1],
-    'creatDate': '@DATE',
-    'address': '@CITY',
-    'zip': '@ZIP'
-  }]
-})
-```
-
-请求数据
-
-```
-ajax () {
-  this.$axios.get('/api/demo/001')
-  .then(res => {
-    this.table.columns = Object.keys(res.data.list[0]).map(e => ({
-      label: e,
-      prop: e
-    }))
-    this.table.data = res.data.list
-  })
-}
-```
-
-
-
diff --git a/static/md/插件 - mock语法规范.md b/static/md/插件 - mock语法规范.md
deleted file mode 100644
index 22ac0160..00000000
--- a/static/md/插件 - mock语法规范.md	
+++ /dev/null
@@ -1,181 +0,0 @@
-# 语法规范
-
-Mock.js 的语法规范包括两部分：
-
-1. 数据模板定义规范（Data Template Definition，DTD）
-2. 数据占位符定义规范（Data Placeholder Definition，DPD）
-
-## 数据模板定义规范 DTD
-
-**数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：**
-
-```js
-// 属性名   name
-// 生成规则 rule
-// 属性值   value
-'name|rule': value
-```
-
-**注意：**
-
-* _属性名_ 和 _生成规则_ 之间用竖线 `|` 分隔。
-* _生成规则_ 是可选的。
-* _生成规则_ 有 7 种格式：
-    1. `'name|min-max': value`
-    1. `'name|count': value`
-    1. `'name|min-max.dmin-dmax': value`
-    1. `'name|min-max.dcount': value`
-    1. `'name|count.dmin-dmax': value`
-    1. `'name|count.dcount': value`
-    1. `'name|+step': value`
-* **_生成规则_ 的 含义 需要依赖 _属性值的类型_ 才能确定。**
-* _属性值_ 中可以含有 `@占位符`。
-* _属性值_ 还指定了最终值的初始值和类型。
-
-<!-- 感谢 @麦少 同学对 Mock.js 语法的整理和分析，才有了这版相对清晰的语法文档。 -->
-
-**生成规则和示例：**
-
-### 1. 属性值是字符串 **String**
-
-1. `'name|min-max': string` 
-
-    通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。
-
-2. `'name|count': string` 
-
-    通过重复 `string` 生成一个字符串，重复次数等于 `count`。
-
-### 2. 属性值是数字 **Number**
-
-1. `'name|+1': number` 
-
-    属性值自动加 1，初始值为 `number`。
-
-2. `'name|min-max': number` 
-
-    生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。
-
-3. `'name|min-max.dmin-dmax': number` 
-
-    生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
-
-```js
-Mock.mock({
-    'number1|1-100.1-10': 1,
-    'number2|123.1-10': 1,
-    'number3|123.3': 1,
-    'number4|123.10': 1.123
-})
-// =>
-{
-    "number1": 12.92,
-    "number2": 123.51,
-    "number3": 123.777,
-    "number4": 123.1231091814
-}
-```
-
-### 3. 属性值是布尔型 **Boolean**
-
-1. `'name|1': boolean` 
-
-    随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。
-
-2. `'name|min-max': value` 
-
-    随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
-
-### 4. 属性值是对象 **Object**
-
-1. `'name|count': object`
-
-    从属性值 `object` 中随机选取 `count` 个属性。
-
-2. `'name|min-max': object`
-
-    从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
-
-### 5. 属性值是数组 **Array**
-
-1. `'name|1': array` 
-
-    从属性值 `array` 中随机选取 1 个元素，作为最终值。
-
-2. `'name|+1': array` 
-
-    从属性值 `array` 中顺序选取 1 个元素，作为最终值。
-
-3. `'name|min-max': array` 
-
-    通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。
-
-4. `'name|count': array` 
-
-    通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
-
-### 6. 属性值是函数 **Function**
-
-1. `'name': function` 
-
-    执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
-
-### 7. 属性值是正则表达式 **RegExp**
-
-1. `'name': regexp` 
-
-    根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。
-
-    ```js
-    Mock.mock({
-        'regexp1': /[a-z][A-Z][0-9]/,
-        'regexp2': /\w\W\s\S\d\D/,
-        'regexp3': /\d{5,10}/
-    })
-    // =>
-    {
-        "regexp1": "pJ7",
-        "regexp2": "F)\fp1G",
-        "regexp3": "561659409"
-    }
-    ```
-
-## 数据占位符定义规范 DPD
-
-_占位符_ 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
-
-_占位符_ 的格式为：
-
-```
-@占位符
-@占位符(参数 [, 参数])
-```
-
-**注意：**
-
-1. 用 `@` 来标识其后的字符串是 _占位符_。
-2. _占位符_ 引用的是 `Mock.Random` 中的方法。
-3. 通过 `Mock.Random.extend()` 来扩展自定义占位符。
-4. _占位符_ 也可以引用 _数据模板_ 中的属性。
-5. _占位符_ 会优先引用 _数据模板_ 中的属性。
-6. _占位符_ 支持 _相对路径_ 和 _绝对路径_。
-
-```js
-Mock.mock({
-    name: {
-        first: '@FIRST',
-        middle: '@FIRST',
-        last: '@LAST',
-        full: '@first @middle @last'
-    }
-})
-// =>
-{
-    "name": {
-        "first": "Charles",
-        "middle": "Brenda",
-        "last": "Lopez",
-        "full": "Charles Brenda Lopez"
-    }
-}
-```
\ No newline at end of file
diff --git a/static/md/插件 - timeago.md b/static/md/插件 - timeago.md
deleted file mode 100644
index f0bbd90f..00000000
--- a/static/md/插件 - timeago.md	
+++ /dev/null
@@ -1,47 +0,0 @@
-```
-import timeago from 'timeago.js'
-export default {
-  data () {
-    return {
-      // 打开页面时间
-      openPageDate: new Date(),
-      // 打开页面已经过去的时间
-      openPageDateAgo: '',
-      // 打开页面时间计时器
-      dateTimeRangeTimer: null,
-      // 起止时间
-      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
-      // 上面起止时间的计算结果
-      dateTimeRangeAgo: ''
-    }
-  },
-  mounted () {
-    // 刷新打开页面过去的时间
-    this.refreshOpenPageDateAgo()
-    this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
-    // 刷新起止时间的计算结果
-    this.refreshDateTimeRangeAgo()
-  },
-  beforeDestroy () {
-    // 清空计时器
-    clearInterval(this.dateTimeRangeTimer)
-  },
-  watch: {
-    dateTimeRange () {
-      // 刷新起止时间的计算结果
-      this.refreshDateTimeRangeAgo()
-    }
-  },
-  methods: {
-    // 计算打开页面过了多久
-    refreshOpenPageDateAgo () {
-      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
-    },
-    // 计算起止时间间隔
-    refreshDateTimeRangeAgo () {
-      const timeagoInstance = timeago(this.dateTimeRange[1])
-      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
-    }
-  }
-}
-```
\ No newline at end of file
diff --git a/static/md/插件 - 多国语.md b/static/md/插件 - 多国语.md
deleted file mode 100644
index 0e67ce29..00000000
--- a/static/md/插件 - 多国语.md	
+++ /dev/null
@@ -1,122 +0,0 @@
-# vue-i18n
-
-多国语插件
-
-> 此文档仅限于演示如何在 `D2Admin` 中使用多国语言设置
-
-公用的语言设置建议放在 `src/i18n` 下
-
-i18n 文件夹结构如下所示
-
-```
-|__index.js // 主文件
-|__lang // 语言配置文件夹
-| |__cn // 中文
-| | |__index.js // 中文 公用配置
-| |__ja // 日语
-| | |__index.js // 日语 公用配置
-| |__en // 英语
-| | |__index.js // 英语 公用配置
-```
-
-在 `src/i18n/index.js` 中导入同级lang文件夹内的语言设置，并导出一个新的 `VueI18n` 实例供 `main.js` 使用
-
-```
-import i18n from './i18n'
-new Vue({
-  el: '#app',
-  store,
-  i18n, // 使用 i18n
-  router,
-  template: '<App/>',
-  components: { App }
-})
-```
-
-## 基本使用方法
-
-使用 `$t('路径')`
-
-```
-<PageHeader
-  slot="header"
-  :title="`${$t('pub.pageHeader.demo')} 1`"
-  url="http://kazupon.github.io/vue-i18n/en/">
-</PageHeader>
-```
-
-## 在组件中单独配置
-
-有时候我们只希望在某个文件中配置这个组件的多国语言，如果所有的语言设置都放在 `d2admin-vue-element/src/i18n` 中会造成混乱，不易维护
-
-`D2Admin` 已经替你安装好了 `vue-i18n-loader`，可以方便地在单文件组件中使用
-
-示例
-
-```
-<i18n src="./lang.json"></i18n>
-
-<template>
-  <div>
-    <el-tag>{{$t('hello')}}</el-tag>
-    <p>{{$t('check.title')}}</p>
-    <el-checkbox-group v-model="check">
-      <el-checkbox label="a">{{$t('check.label.Beijing')}}</el-checkbox>
-      <el-checkbox label="b">{{$t('check.label.Tokyo')}}</el-checkbox>
-      <el-checkbox label="c">{{$t('check.label.NewYork')}}</el-checkbox>
-    </el-checkbox-group>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      check: ['a', 'b']
-    }
-  }
-}
-</script>
-```
-
-在同一文件夹下的 `lang.json`
-
-```
-{
-  "cn": {
-    "hello": "你好",
-    "check": {
-      "title": "请选择",
-      "label": {
-        "Beijing": "北京",
-        "Tokyo": "东京",
-        "NewYork": "纽约"
-      }
-    }
-  },
-  "en": {
-    "hello": "hello",
-    "check": {
-      "title": "Please choose",
-      "label": {
-        "Beijing": "Beijing",
-        "Tokyo": "Tokyo",
-        "NewYork": "NewYork"
-      }
-    }
-  },
-  "ja": {
-    "hello": "こんにちは",
-    "check": {
-      "title": "選択してください",
-      "label": {
-        "Beijing": "北京",
-        "Tokyo": "東京",
-        "NewYork": "ニューヨーク"
-      }
-    }
-  }
-}
-```
-
-详细教程请查看官方文档，见此页右上角的链接
diff --git a/static/md/插件 - 导入.md b/static/md/插件 - 导入.md
deleted file mode 100644
index 3f25b777..00000000
--- a/static/md/插件 - 导入.md	
+++ /dev/null
@@ -1,62 +0,0 @@
-# Vue.$import
-
-本框架集成了数据导入功能，并包装成插件
-
-## 注册插件
-
-> 默认已经注册，可以直接使用
-
-```
-import pluginImport from '@/plugin/import'
-Vue.use(pluginImport)
-```
-
-之后就可以在组件中使用 `this.$import` 来调用导出功能
-
-## Vue.$import.csv()
-
-导入csv文件，并且返回一个 `Promise` 对象
-
-```
-// 在选择文件后调用
-handleUpload (file) {
-  this.$import.csv(file)
-    .then(res => {
-      this.table.columns = Object.keys(res.data[0]).map(e => ({
-        label: e,
-        prop: e
-      }))
-      this.table.data = res.data
-    })
-  // 阻止默认的上传
-  return false
-}
-```
-
-## Vue.$import.xlsx()
-
-导入xlsx文件，并且返回一个 `Promise` 对象
-
-**注意 导入的表格文件第一行应为表头**
-
-参考下述示例使用
-
-```
-// 在选择文件后调用
-handleUpload (file) {
-  this.$import.xlsx(file)
-    .then(({header, results}) => {
-      // header 为表头
-      // results 为内容
-      this.table.columns = header.map(e => {
-        return {
-          label: e,
-          prop: e
-        }
-      })
-      this.table.data = results
-    })
-  // 阻止默认的上传
-  return false
-}
-```
\ No newline at end of file
diff --git a/static/md/插件 - 导出.md b/static/md/插件 - 导出.md
deleted file mode 100644
index 148d698e..00000000
--- a/static/md/插件 - 导出.md	
+++ /dev/null
@@ -1,146 +0,0 @@
-# Vue.$export
-
-本框架集成了数据导出功能，并包装成插件
-
-## 注册插件
-
-> 默认已经注册，可以直接使用
-
-```
-import pluginExport from '@/plugin/export'
-Vue.use(pluginExport)
-```
-
-之后就可以在组件中使用 `this.$export` 来调用导出功能
-
-## Vue.$export.csv()
-
-此方法将数据以 `CSV` 格式导出，并且返回一个 `Promise` 对象
-
-使用
-
-```
-this.$export.csv({
-  columns,
-  data
-})
-  .then(() => {
-    // ...可选回调
-  })
-```
-
-参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| columns | 列 | 非 | Array |  | 空数组 |
-| data | 行数据 | 非 | Array |  | 空数组 |
-| table | 文件名 | 非 | String |  | table |
-| noHeader | 不导出表头 | 非 | Boolean |  | false |
-| separator | 数据分隔符 | 非 | String |  | , |
-| quoted | 每项数据是否加引号 | 非 | Boolean |  | false |
-
-示例
-
-```
-const columns = [
-  {
-    label: '姓名',
-    prop: 'name'
-  },
-  {
-    label: '年龄',
-    prop: 'age'
-  }
-]
-const data = [
-  {
-    name: 'lucy',
-    age: 24
-  },
-  {
-    name: 'bob',
-    age: 26
-  }
-]
-this.$export.csv({
-  columns,
-  data
-})
-```
-
-## Vue.$export.excel()
-
-此方法将数据以 `xlsx` 格式导出，并且返回一个 `Promise` 对象
-
-使用
-
-```
-this.$export.excel({
-  columns,
-  data
-})
-  .then(() => {
-    // ...可选回调
-  })
-```
-
-参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| columns | 列 | 非 | Array |  | 空数组 |
-| data | 行数据 | 非 | Array |  | 空数组 |
-| table | 文件名 | 非 | String |  | table |
-
-示例
-
-```
-const columns = [
-  {
-    label: '姓名',
-    prop: 'name'
-  },
-  {
-    label: '年龄',
-    prop: 'age'
-  }
-]
-const data = [
-  {
-    name: 'lucy',
-    age: 24
-  },
-  {
-    name: 'bob',
-    age: 26
-  }
-]
-this.$export.excel({
-  columns,
-  data
-})
-```
-
-## Vue.$export.txt()
-
-此方法将数据以 `txt` 格式导出，并且返回一个 `Promise` 对象
-
-使用
-
-```
-this.$export.txt({
-  text: '文本内容',
-  title: '文件名'
-})
-  .then(() => {
-    // ...可选回调
-  })
-```
-
-参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| text | 文件内容 | 非 | String |  | 空 |
-| title | 文件名 | 非 | String |  | 文本 |
diff --git a/static/md/组件 - markdown - 文档.md b/static/md/组件 - markdown - 文档.md
deleted file mode 100644
index 31a9a711..00000000
--- a/static/md/组件 - markdown - 文档.md	
+++ /dev/null
@@ -1,54 +0,0 @@
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| url | markdown文件地址 | 非 | String |  | 无 |
-| md | markdown内容 | 非 | String |  | 无 |
-| highlight | 代码高亮 | 非 | Boolean |  | false |
-| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean |  | true |
-
-## 使用方法
-
-加载一个.md文件
-
-```
-<d2-markdown url="/static/md/xxxx.md"/>
-```
-
-加载资源
-
-```
-const md = `# Header
-
-## title
-
-text`
-
-<d2-markdown :md="md"/>
-```
-
-## 百度网盘分享链接优化
-
-当书写类似下面的分享链接时
-
-> 需要 `baidupan = true`
-
-```
-普通分享链接
-
-> https://pan.baidu.com/s/1kW6uUwB
-
-私密分享链接
-
-> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
-```
-
-markdown 中引用部分的文本由于被识别为百度云的分享链接，所以不会被当做 `blockquote` 渲染（非百度云链接的引用行不会改变），会以一种特别的块来显示
-
-就像这样
-
-> https://pan.baidu.com/s/1kW6uUwB
-
-上面的块会嵌套在你的 markdown 渲染结果中
-
-> 了解 D2Admin 是如何在 markdown 中匹配百度云链接的？ [查看源码](https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Markdown/plugin/baidupan.js)
\ No newline at end of file
diff --git a/static/md/组件 - 代码高亮.md b/static/md/组件 - 代码高亮.md
deleted file mode 100644
index 2ababbb3..00000000
--- a/static/md/组件 - 代码高亮.md	
+++ /dev/null
@@ -1,13 +0,0 @@
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| code | 代码字符串 | 非 | String |  | console.log('you lost code prop') |
-
-## 示例
-
-```
-<d2-highlight code="alert('Hello')"/>
-```
-
-> 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
\ No newline at end of file
diff --git a/static/md/组件 - 图标组件 - svg.md b/static/md/组件 - 图标组件 - svg.md
deleted file mode 100644
index e9dd1a34..00000000
--- a/static/md/组件 - 图标组件 - svg.md	
+++ /dev/null
@@ -1,33 +0,0 @@
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| name | 图标名称 | 非 | String | 放在 src/assets/icons/svg 中的 .svg 文件名 | 空 |
-
-## 使用方法
-
-首先将下载的 .svg 图标放入 `src/assets/icons/svg` 文件夹下
-
-然后使用组件
-
-```
-<d2-icon-svg name="刚才的svg文件名"/>
-```
-
-## 获取已经注册的所有图标
-
-你已经发现了，只需要将图标文件放入项目中就会自动注册
-
-这是因为已经对 `webpack` 和 `svg-sprite-loader` 进行了相关设置，`src/assets/icons/svg` 文件夹中的图标会自动注册到项目中，文件全部打包成 svg-sprite，名称注册到 `Vue.$IconSvg` 属性中
-
-所以如果你需要检查项目中已经注册的所有图标，可以通过如下方式
-
-```
-// 在 vue 单文件组件中
-console.log(this.$IconSvg)
-```
-
-## 参考
-
-演示图标来源 [iconfont.cn @龙正昆《常用的50个4px双色图标库》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=4878)
-
diff --git a/static/md/组件 - 图标组件.md b/static/md/组件 - 图标组件.md
deleted file mode 100644
index 122c6418..00000000
--- a/static/md/组件 - 图标组件.md	
+++ /dev/null
@@ -1,39 +0,0 @@
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
-
-## 使用方法
-
-基本
-
-```
-// 这样用没有毛病 但是也没什么用
-<d2-icon/>
-
-// 指定图标名称
-<d2-icon name="github"/>
-
-// 设置行内样式
-<d2-icon name="github" style="font-size: 100px;"/>
-
-// 设置 class
-<d2-icon name="github" class="icon-class-demo"/>
-```
-
-这个组件只是简化了写法而已
-
-```
-<d2-icon name="github"/>
-// 等同于
-<i class="fa fa-github" aria-hidden="true"></i>
-```
-
-## 参考
-
-图标索引
-
-[Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
-
-[fontawesome.com](https://fontawesome.com/icons?d=gallery)
\ No newline at end of file
diff --git a/static/md/组件 - 图标选择器.md b/static/md/组件 - 图标选择器.md
deleted file mode 100644
index 61459cc6..00000000
--- a/static/md/组件 - 图标选择器.md	
+++ /dev/null
@@ -1,13 +0,0 @@
-# 图标选择器
-
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| value | 绑定的值，可以使用 v-model | 非 | String |  |  |
-| placeholder | 占位符，显示在未选择之前的按钮和输入框中 | 非 | String |  | 请选择 |
-| placement | 界面探出方向 | 非 | String | 同 Popover 组件 placement 参数 | right |
-| clearable | 是否允许清空 | 非 | Boolean |  | true |
-| userInput | 是否允许用户自由输入 | 非 | Boolean |  | false |
-| autoClose | 是否在选择后自动关闭 | 非 | Boolean |  | true |
-
diff --git a/static/md/组件 - 图表.md b/static/md/组件 - 图表.md
deleted file mode 100644
index 84ccd1bd..00000000
--- a/static/md/组件 - 图表.md	
+++ /dev/null
@@ -1,68 +0,0 @@
-## 介绍
-
-D2Admin 集成了由蚂蚁金服出品的 **G2** 图表库
-
-## 实现方式
-
-`src/components/charts/register.js` 为注册图表组件的文件
-
-`src/components/charts/G2` 为图表组件存放位置
-
-`src/components/charts/G2/mixins/G2.js` 是图表最主要的文件，这是一个所有的图表组件都会使用的 mixin，这个 mixin 主要有以下用途
-
- - 将 G2 和 DataSet 绑定到 data 上，方便组件使用，省去重复 `import G2 from '@antv/g2'` 等
- - 将 [G2 Chart类](http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_Chart) 的属性全部暴露为 Vue 组件参数，这些参数会在初始化图表时用到
- - 提供了额外的设置参数，比如自动高度，自动初始化，初始化延时
- - 关闭 G2 的体验改进计划打点请求
- - data 上的 chart 对象
- - 自动初始化(或者不初始化)图表
- - `creatChart` 方法，根据参数设置生成 data 上的 chart 对象
- - `resize` 方法
-
-在图表组件中使用这个 mixin 示例
-
-```
-<template>
-  <!-- 如果需要开启自动高度功能 需要在这里设置 style="height: 100%;" -->
-  <div ref="chart" style="height: 100%;"></div>
-</template>
-
-<script>
-// 引入公用 mixin
-import G2 from '@/components/charts/G2/mixins/G2.js'
-export default {
-  mixins: [
-    G2
-  ],
-  methods: {
-    // 初始化图表
-    init () {
-      // mixin 中提供 creatChart 方法，这部分每个图表都一样
-      this.creatChart()
-      // 本组件的特殊设置 这部分每个图表不一样 你只需要改这部分内容
-      this.chart.source(this.data)
-      this.chart.coord().transpose()
-      this.chart.interval().position('x*y')
-      // 最后一步 渲染图表 这部分每个图表都一样
-      this.chart.render()
-    },
-    // 数据源改变 重新渲染新的数据
-    changeData () {
-      this.chart.changeData(this.data)
-    }
-  }
-}
-</script>
-```
-
-上面的代码段展示了如何使用 mixin 快速制作一个图表组件，只需根据某个图表的个性化需要，在组件中重新定义 `init` 和 `changeData` 方法即可
-
-你可以修改这个 mixin 去实现更多的功能，同时影响所有的图表组件
-
-> 这只仅仅是作者个人对于图表封装的一个实现思路
-
-## 为什么没有选择其他产品
-
-G2 完全可以胜任一般的后台界面报表图表需求，而且官网文档清晰友好
-
-如果你需要更酷炫的图表，也完全可以剔除集成的库，换用 百度的[echarts](http://echarts.baidu.com/) 或者超级强大的 [d3.js](https://d3js.org/)
diff --git a/static/md/组件 - 数字动画.md b/static/md/组件 - 数字动画.md
deleted file mode 100644
index 44c1797b..00000000
--- a/static/md/组件 - 数字动画.md	
+++ /dev/null
@@ -1,27 +0,0 @@
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| start | 起始值 | 非 | Number |  | 0 |
-| end | 结束值 | 是 | Number |  | 0 |
-| decimals | 小数位数 | 非 | Number |  | 0 |
-| duration | 持续时间 | 非 | Number |  | 2 |
-| options | 设置项 | 非 | Object |  | 空对象 |
-| callback | 回调函数 | 非 | Function |  | 空函数 |
-
-## 示例
-
-```
-// 基本使用方法
-<d2-count-up :end="100"/>
-
-// 设置始末值
-<d2-count-up :start="14" :end="100"/>
-
-// 设置动画时间
-<d2-count-up :end="100" :decimals="2"/>
-```
-
-组件会在页面上渲染 `<span>` 标签
-
-组件根据 [countUp.js](https://github.com/inorganik/countUp.js) 封装，`options` 参数详见原始插件文档
diff --git a/static/md/组件 - 页面容器.md b/static/md/组件 - 页面容器.md
deleted file mode 100644
index b3a6b5e8..00000000
--- a/static/md/组件 - 页面容器.md	
+++ /dev/null
@@ -1,36 +0,0 @@
-页面容器组件是每个页面的基础，为了在整个项目中统一效果，它应该是 `<template>` 组件的直接子组件
-
-## 参数
-
-| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
-| --- | --- | --- | --- | --- | --- |
-| type | 容器类型 | 非 | String | card ghost card-full | card |
-| responsive | 响应式宽度 | 非 | Boolean |  | false |
-
-> `responsive` 参数设置只在 `type` 等于 `card` 或 `ghost` 时生效
-
-## 使用方法
-
-一个基础单文件页面组件的示例
-
-```
-<template>
-  <d2-container>
-    <template slot="header">
-      可选的 header 内容 ...
-    </template>
-    主体内容 ...
-  </d2-container>
-</template>
-
-<script>
-export default {
-  name: 'your-component-name'
-}
-</script>
-
-<style lang="scss">
-// 需要的话引入
-@import '~@/assets/style/public.scss';
-</style>
-```
\ No newline at end of file