diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
index 44c21ea9..b1fe7c87 100755
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@@ -57,7 +57,7 @@ module.exports = {
         loader: 'svg-sprite-loader',
         include: [resolve('src/assets/icons/svg')],
         options: {
-          symbolId: 'dd-[name]'
+          symbolId: 'd2-[name]'
         }
       },
       {
diff --git a/docs/zh/components/container.md b/docs/zh/components/container.md
index 7bd91393..e5dabe9a 100644
--- a/docs/zh/components/container.md
+++ b/docs/zh/components/container.md
@@ -19,12 +19,12 @@
 
 ``` vue
 <template>
-  <Container>
+  <d2-container>
     <template slot="header">
       可选的 header 内容 ...
     </template>
     主体内容 ...
-  </Container>
+  </d2-container>
 </template>
 
 <script>
@@ -44,18 +44,18 @@ export default {
 高度根据内容适应
 
 ``` vue
-<Container>
+<d2-container>
   主体内容
-</Container>
+</d2-container>
 ```
 
 使用 `slot`
 
 ``` vue
-<Container>
+<d2-container>
   <template slot="header">我是插入到 header 中的内容</template>
   主体内容
-</Container>
+</d2-container>
 ```
 
 ## 自适应填充页面容器
@@ -66,7 +66,7 @@ export default {
 
 ``` vue
 <template>
-  <Container type="full">
+  <d2-container type="full">
     <template slot="header">
       可选的 header 内容 ...
     </template>
@@ -74,7 +74,7 @@ export default {
     <template slot="footer">
       可选的 footer 内容 ...
     </template>
-  </Container>
+  </d2-container>
 </template>
 ```
 
@@ -83,7 +83,7 @@ export default {
 不显示任何背景色和边框
 
 ``` vue
-<Container type="ghost">
+<d2-container type="ghost">
   主体内容
-</Container>
+</d2-container>
 ```
\ No newline at end of file
diff --git a/docs/zh/components/count-up.md b/docs/zh/components/count-up.md
index 2f7172b2..a8f1844b 100644
--- a/docs/zh/components/count-up.md
+++ b/docs/zh/components/count-up.md
@@ -15,13 +15,13 @@
 
 ``` vue
 // 基本使用方法
-<CountUp :end="100"></CountUp>
+<d2-count-up :end="100"/>
 
 // 设置始末值
-<CountUp :start="14" :end="100"></CountUp>
+<d2-count-up :start="14" :end="100"/>
 
 // 设置动画时间
-<CountUp :end="100" :decimals="2"></CountUp>
+<d2-count-up :end="100" :decimals="2"/>
 ```
 
 组件会在页面上渲染 `<span>` 标签
diff --git a/docs/zh/components/highlight.md b/docs/zh/components/highlight.md
index e152650d..275f0bca 100644
--- a/docs/zh/components/highlight.md
+++ b/docs/zh/components/highlight.md
@@ -9,7 +9,7 @@
 ## 示例
 
 ``` vue
-<Highlight code="alert('Hello')"></Highlight>
+<d2-highlight code="alert('Hello')"/>
 ```
 
 ::: tip
diff --git a/docs/zh/components/icon-svg.md b/docs/zh/components/icon-svg.md
index f7e1e78c..a9616141 100644
--- a/docs/zh/components/icon-svg.md
+++ b/docs/zh/components/icon-svg.md
@@ -13,7 +13,7 @@
 然后使用组件
 
 ``` vue
-<IconSvg name="刚才的svg文件名"></IconSvg>
+<d2-icon-svg name="刚才的svg文件名"/>
 ```
 
 ## 获取已经注册的所有图标
diff --git a/docs/zh/components/icon.md b/docs/zh/components/icon.md
index 73636754..aae2eab4 100644
--- a/docs/zh/components/icon.md
+++ b/docs/zh/components/icon.md
@@ -12,22 +12,22 @@
 
 ``` vue
 // 这样用没有毛病 但是也没什么用
-<Icon></Icon>
+<d2-icon/>
 
 // 指定图标名称
-<Icon name="github"></Icon>
+<d2-icon name="github"/>
 
 // 设置行内样式
-<Icon name="github" style="font-size: 100px;"></Icon>
+<d2-icon name="github" style="font-size: 100px;"/>
 
 // 设置 class
-<Icon name="github" class="icon-class-demo"></Icon>
+<d2-icon name="github" class="icon-class-demo"/>
 ```
 
 这个组件只是简化了写法而已
 
 ``` vue
-<Icon name="github"></Icon>
+<d2-icon name="github"/>
 // 等同于
 <i class="fa fa-github" aria-hidden="true"></i>
 ```
diff --git a/docs/zh/components/markdown.md b/docs/zh/components/markdown.md
index eb2cdb86..ce9132ef 100644
--- a/docs/zh/components/markdown.md
+++ b/docs/zh/components/markdown.md
@@ -14,7 +14,7 @@
 加载一个.md文件
 
 ``` vue
-<markdown url="/static/md/xxxx.md"></markdown>
+<d2-markdown url="/static/md/xxxx.md"/>
 ```
 
 加载资源
@@ -26,7 +26,7 @@ const md = `# Header
 
 text`
 
-<markdown :md="md"></markdown>
+<d2-markdown :md="md"/>
 ```
 
 ## 百度网盘分享链接优化
diff --git a/docs/zh/guide/change-log.md b/docs/zh/guide/change-log.md
index a47b5d70..8af971e0 100644
--- a/docs/zh/guide/change-log.md
+++ b/docs/zh/guide/change-log.md
@@ -8,6 +8,9 @@
 
 * [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 `数据` + `递归组件` 实现无限制多级菜单
 * [ 修改 ] 路由注册回归最简单的写法
+* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
+* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
+* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
 
 ## v1.0.0
 
diff --git a/src/assets/style/fixed/base.scss b/src/assets/style/fixed/base.scss
index 398b7a17..f16eb47d 100644
--- a/src/assets/style/fixed/base.scss
+++ b/src/assets/style/fixed/base.scss
@@ -10,10 +10,6 @@ html, body {
     bottom: 0px;
     left: 0px;
     right: 0px;
-    pre {
-      margin: 0px;
-      border-radius: 4px;
-    }
     a {
       text-decoration: none;
     }
diff --git a/src/assets/style/public.scss b/src/assets/style/public.scss
index 3ea57924..2fb6ad62 100644
--- a/src/assets/style/public.scss
+++ b/src/assets/style/public.scss
@@ -2,7 +2,7 @@
 @import '~@/assets/style/unit/_size.scss';
 
 // 工具类名统一前缀
-$prefix: dd;
+$prefix: d2;
 
 // 禁止用户选中 鼠标变为手形
 %unable-select {
diff --git a/src/assets/style/theme/star/index.scss b/src/assets/style/theme/star/index.scss
index b8c4c0df..ade5965a 100644
--- a/src/assets/style/theme/star/index.scss
+++ b/src/assets/style/theme/star/index.scss
@@ -28,12 +28,12 @@ $theme-container-full-border-color: #d8dfea;
   .el-menu--horizontal .el-menu .el-submenu__title:hover {
     @include theme-menu-hover-style;
   }
-  // [组件] dd-container-full
-  .dd-container-full {
-    .dd-container-full__header {
+  // [组件] d2-container-full
+  .d2-container-full {
+    .d2-container-full__header {
       border-bottom: 1px solid $theme-container-full-border-color;
     }
-    .dd-container-full__footer {
+    .d2-container-full__footer {
       border-top: 1px solid $theme-container-full-border-color;
     }
   }
@@ -80,13 +80,11 @@ $theme-container-full-border-color: #d8dfea;
       }
     }
     // 顶栏右侧
-    .dd-header-right {
+    .d2-header-right {
       .btn-text {
         color: #FFF;
-      }
-      .el-dropdown {
-        .el-dropdown-link {
-          color: #FFF;
+        &:hover {
+          background-color: rgba(#FFF, .1);
         }
       }
     }
diff --git a/src/assets/style/theme/theme.scss b/src/assets/style/theme/theme.scss
index aa74877c..3f1af9ed 100644
--- a/src/assets/style/theme/theme.scss
+++ b/src/assets/style/theme/theme.scss
@@ -46,11 +46,17 @@
       }
     }
     // 顶栏右侧的按钮
-    .dd-header-right {
+    .d2-header-right {
       float: right;
       height: 60px;
       display: flex;
       align-items: center;
+      .btn-text {
+        padding: 14px 12px;
+        border-radius: 4px;
+        margin: 0px !important;
+        margin-left: 10px !important;
+      }
       .el-dropdown {
         user-select: none;
         cursor: pointer;
@@ -64,7 +70,7 @@
       transition: width .3s;
       overflow: inherit;
       // 空菜单
-      .dd-side-menu-empty {
+      .d2-side-menu-empty {
         background-color: rgba(#000, .03);
         margin: $margin;
         margin-top: 0px;
@@ -109,8 +115,8 @@
       overflow: hidden;
     }
   }
-  // [组件] dd-container-full
-  .dd-container-full {
+  // [组件] d2-container-full
+  .d2-container-full {
     position: absolute;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px;
@@ -120,7 +126,7 @@
     &:hover {
       box-shadow: none;
     }
-    .dd-container-full__header {
+    .d2-container-full__header {
       position: absolute;
       top: 0px;
       left: 0px;
@@ -128,7 +134,7 @@
       padding: 18px 20px;
       box-sizing: border-box;
     }
-    .dd-container-full__body {
+    .d2-container-full__body {
       position: absolute;
       padding: 20px;
       left: 0px;
@@ -136,7 +142,7 @@
       bottom: 0px;
       overflow: auto;
     }
-    .dd-container-full__footer {
+    .d2-container-full__footer {
       position: absolute;
       bottom: 0px;
       left: 0px;
diff --git a/src/components/charts/G2/components/Pie/base.vue b/src/components/charts/G2/components/Pie/base.vue
index 992bbc42..312a8a40 100644
--- a/src/components/charts/G2/components/Pie/base.vue
+++ b/src/components/charts/G2/components/Pie/base.vue
@@ -13,7 +13,7 @@ export default {
   props: {
     padding: {
       required: false,
-      default: () => [30, 30, 30, 30]
+      default: () => [40, 40, 40, 40]
     }
   },
   data () {
diff --git a/src/components/charts/G2/mixins/props/chart.js b/src/components/charts/G2/mixins/props/chart.js
index 3b72e8bd..0e3ad868 100644
--- a/src/components/charts/G2/mixins/props/chart.js
+++ b/src/components/charts/G2/mixins/props/chart.js
@@ -14,7 +14,7 @@ export default {
   // 设置图表的内边距 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_padding
   padding: {
     required: false,
-    default: () => [30, 40, 45, 50]
+    default: () => [30, 40, 40, 50]
   },
   // 设置图表整体的边框和背景样式 http://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_background
   background: {
diff --git a/src/components/charts/register.js b/src/components/charts/register.js
index 0b703f3f..076be273 100644
--- a/src/components/charts/register.js
+++ b/src/components/charts/register.js
@@ -1,16 +1,16 @@
 import Vue from 'vue'
 
-Vue.component('G2AreaBase', resolve => { require(['@/components/charts/G2/components/Area/base.vue'], resolve) })
+Vue.component('d2-chart-area-base', () => import('@/components/charts/G2/components/Area/base.vue'))
 
-Vue.component('G2BarBase', resolve => { require(['@/components/charts/G2/components/Bar/base.vue'], resolve) })
+Vue.component('d2-chart-bar-base', () => import('@/components/charts/G2/components/Bar/base.vue'))
 
-Vue.component('G2ColumnBase', resolve => { require(['@/components/charts/G2/components/Column/base.vue'], resolve) })
+Vue.component('d2-chart-column-base', () => import('@/components/charts/G2/components/Column/base.vue'))
 
-Vue.component('G2LineBase', resolve => { require(['@/components/charts/G2/components/Line/base.vue'], resolve) })
-Vue.component('G2LineStep', resolve => { require(['@/components/charts/G2/components/Line/step.vue'], resolve) })
+Vue.component('d2-chart-line-base', () => import('@/components/charts/G2/components/Line/base.vue'))
+Vue.component('d2-chart-line-step', () => import('@/components/charts/G2/components/Line/step.vue'))
 
-Vue.component('G2NightingaleRoseBase', resolve => { require(['@/components/charts/G2/components/NightingaleRose/base.vue'], resolve) })
+Vue.component('d2-chart-nightingale-rose-base', () => import('@/components/charts/G2/components/NightingaleRose/base.vue'))
 
-Vue.component('G2PieBase', resolve => { require(['@/components/charts/G2/components/Pie/base.vue'], resolve) })
+Vue.component('d2-chart-pie-base', () => import('@/components/charts/G2/components/Pie/base.vue'))
 
-Vue.component('G2RadarBase', resolve => { require(['@/components/charts/G2/components/Radar/base.vue'], resolve) })
+Vue.component('d2-chart-radar-base', () => import('@/components/charts/G2/components/Radar/base.vue'))
diff --git a/src/components/core/MainLayout/components/HeaderMenu/index.vue b/src/components/core/MainLayout/components/HeaderMenu/index.vue
deleted file mode 100644
index ee54407b..00000000
--- a/src/components/core/MainLayout/components/HeaderMenu/index.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <el-menu
-    mode="horizontal"
-    :router="true">
-    <template v-for="(menu, menuIndex) in menus">
-      <d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-      <d2-submenu v-else :menu="menu" :key="menuIndex"/>
-    </template>
-  </el-menu>
-</template>
-
-<script>
-import menus from '@/menu/index.js'
-export default {
-  name: 'HeaderMenu',
-  components: {
-    D2MenuItem: () => import('../D2MenuItem/index.vue'),
-    D2Submenu: () => import('../D2Submenu/index.vue')
-  },
-  data () {
-    return {
-      menus
-    }
-  }
-}
-</script>
diff --git a/src/components/core/MainLayout/components/HeaderRight/index.vue b/src/components/core/MainLayout/components/HeaderRight/index.vue
deleted file mode 100644
index 25ee55e4..00000000
--- a/src/components/core/MainLayout/components/HeaderRight/index.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="dd-header-right">
-    <FullScreen></FullScreen>
-    <UserDropdown></UserDropdown>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HeaderRight',
-  components: {
-    FullScreen: () => import('./components/FullScreen.vue'),
-    UserDropdown: () => import('./components/UserDropdown.vue')
-  }
-}
-</script>
diff --git a/src/components/core/SimpleMDE/backup.vue b/src/components/core/SimpleMDE/backup.vue
deleted file mode 100644
index 4ced691c..00000000
--- a/src/components/core/SimpleMDE/backup.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-<template>
-  <div class="markdown-editor">
-    <textarea></textarea>
-  </div>
-</template>
-
-<script>
-import SimpleMDE from 'simplemde'
-import marked from 'marked'
-
-export default {
-  name: 'markdown-editor',
-  props: {
-    value: String,
-    previewClass: String,
-    autoinit: {
-      type: Boolean,
-      default () {
-        return true
-      }
-    },
-    highlight: {
-      type: Boolean,
-      default () {
-        return false
-      }
-    },
-    sanitize: {
-      type: Boolean,
-      default () {
-        return false
-      }
-    },
-    configs: {
-      type: Object,
-      default () {
-        return {}
-      }
-    }
-  },
-  mounted () {
-    if (this.autoinit) this.initialize()
-  },
-  activated () {
-    const editor = this.simplemde
-    if (!editor) return
-    const isActive = editor.isSideBySideActive() || editor.isPreviewActive()
-    if (isActive) editor.toggleFullScreen()
-  },
-  methods: {
-    initialize () {
-      const configs = {
-        element: this.$el.firstElementChild,
-        initialValue: this.value,
-        renderingConfig: {}
-      }
-      Object.assign(configs, this.configs)
-
-      // 判断是否开启代码高亮
-      if (this.highlight) {
-        configs.renderingConfig.codeSyntaxHighlighting = true
-      }
-
-      // 设置是否渲染输入的html
-      marked.setOptions({ sanitize: this.sanitize })
-
-      // 实例化编辑器
-      this.simplemde = new SimpleMDE(configs)
-
-      // 添加自定义 previewClass
-      const className = this.previewClass || ''
-      this.addPreviewClass(className)
-
-      // 绑定事件
-      this.bindingEvents()
-    },
-    bindingEvents () {
-      this.simplemde.codemirror.on('change', () => {
-        this.$emit('input', this.simplemde.value())
-      })
-    },
-    addPreviewClass (className) {
-      const wrapper = this.simplemde.codemirror.getWrapperElement()
-      const preview = document.createElement('div')
-      wrapper.nextSibling.className += ` ${className}`
-      preview.className = `editor-preview ${className}`
-      wrapper.appendChild(preview)
-    }
-  },
-  destroyed () {
-    this.simplemde = null
-  },
-  watch: {
-    value (val) {
-      if (val === this.simplemde.value()) return
-      this.simplemde.value(val)
-    }
-  }
-}
-</script>
-
-<style>
-.markdown-editor .markdown-body {
-  padding: 0.5em
-}
-
-.markdown-editor .editor-preview-active, .markdown-editor .editor-preview-active-side {
-  display: block
-}
-</style>
diff --git a/src/components/core/ContainerFull/index.vue b/src/components/core/d2-container-full/index.vue
similarity index 76%
rename from src/components/core/ContainerFull/index.vue
rename to src/components/core/d2-container-full/index.vue
index 3b114a70..7432efcc 100644
--- a/src/components/core/ContainerFull/index.vue
+++ b/src/components/core/d2-container-full/index.vue
@@ -1,19 +1,20 @@
 <template>
-  <div class="dd-container-full" :style="cardStyle">
-    <div v-if="$slots.header" class="dd-container-full__header" ref="header">
-      <slot name="header"></slot>
+  <div class="d2-container-full" :style="cardStyle">
+    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
+      <slot name="header"/>
     </div>
-    <div class="dd-container-full__body" :style="bodyStyle">
-      <slot></slot>
+    <div class="d2-container-full__body" :style="bodyStyle">
+      <slot/>
     </div>
-    <div v-if="$slots.footer" class="dd-container-full__footer" ref="footer">
-      <slot name="footer"></slot>
+    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
+      <slot name="footer"/>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'd2-container-full',
   props: {
     // 定位 上 右 下 左
     top: {
diff --git a/src/components/core/Container/index.vue b/src/components/core/d2-container/index.vue
similarity index 68%
rename from src/components/core/Container/index.vue
rename to src/components/core/d2-container/index.vue
index 39e5a90a..71bb2f08 100644
--- a/src/components/core/Container/index.vue
+++ b/src/components/core/d2-container/index.vue
@@ -1,26 +1,27 @@
 <template>
   <div class="container-component" :class="{responsive}">
     <!-- [card] 卡片容器 -->
-    <el-card v-if="type === 'card'" class="dd-mr dd-mb">
-      <slot v-if="$slots.header" name="header" slot="header"></slot>
-      <slot></slot>
+    <el-card v-if="type === 'card'" class="d2-mr d2-mb">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
     </el-card>
     <!-- [ghost] 隐形的容器 -->
-    <div v-if="type === 'ghost'" class="dd-mr dd-mb">
-      <slot name="header"></slot>
-      <slot></slot>
+    <div v-if="type === 'ghost'" class="d2-mr d2-mb">
+      <slot name="header"/>
+      <slot/>
     </div>
     <!-- [container-full] 撑满 -->
-    <container-full v-if="type === 'full'" :right="20" :bottom="0">
-      <slot v-if="$slots.header" name="header" slot="header"></slot>
-      <slot></slot>
-      <slot v-if="$slots.footer" name="footer" slot="footer"></slot>
-    </container-full>
+    <d2-container-full v-if="type === 'full'" :right="20" :bottom="0">
+      <slot v-if="$slots.header" name="header" slot="header"/>
+      <slot/>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
+    </d2-container-full>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'd2-container',
   props: {
     // 容器样式
     type: {
@@ -36,7 +37,7 @@ export default {
     }
   },
   components: {
-    containerFull: () => import('../ContainerFull/index.vue')
+    'd2-container-full': () => import('../d2-container-full/index.vue')
   }
 }
 </script>
diff --git a/src/components/core/CountUp/index.vue b/src/components/core/d2-count-up/index.vue
similarity index 98%
rename from src/components/core/CountUp/index.vue
rename to src/components/core/d2-count-up/index.vue
index 3e312d2f..7a9dc184 100644
--- a/src/components/core/CountUp/index.vue
+++ b/src/components/core/d2-count-up/index.vue
@@ -5,6 +5,7 @@
 <script>
 import CountUp from 'countup.js'
 export default {
+  name: 'd2-count-up',
   props: {
     start: {
       type: Number,
diff --git a/src/components/core/Highlight/index.vue b/src/components/core/d2-highlight/index.vue
similarity index 77%
rename from src/components/core/Highlight/index.vue
rename to src/components/core/d2-highlight/index.vue
index 444abb0e..6eec67a9 100644
--- a/src/components/core/Highlight/index.vue
+++ b/src/components/core/d2-highlight/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <pre v-html="highlightHTML"></pre>
+  <pre class="d2-highlight" v-html="highlightHTML"></pre>
 </template>
 
 <script>
@@ -7,6 +7,7 @@
 // http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
 import highlight from 'highlight.js'
 export default {
+  name: 'd2-highlight',
   props: {
     code: {
       type: String,
@@ -34,3 +35,10 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.d2-highlight {
+  margin: 0px;
+  border-radius: 4px;
+}
+</style>
diff --git a/src/components/core/IconSelect/index.vue b/src/components/core/d2-icon-select/index.vue
similarity index 97%
rename from src/components/core/IconSelect/index.vue
rename to src/components/core/d2-icon-select/index.vue
index b7595eba..c3c57eae 100644
--- a/src/components/core/IconSelect/index.vue
+++ b/src/components/core/d2-icon-select/index.vue
@@ -6,8 +6,8 @@
       :placement="placement"
       width="300"
       trigger="click">
-      <div class="header dd-clearfix dd-mb-10" v-if="clearable">
-        <el-button type="danger" icon="el-icon-delete" size="mini" class="dd-fr" @click="selectIcon()">清空</el-button>
+      <div class="header d2-clearfix d2-mb-10" v-if="clearable">
+        <el-button type="danger" icon="el-icon-delete" size="mini" class="d2-fr" @click="selectIcon()">清空</el-button>
       </div>
       <el-input
         v-model="searchText"
@@ -61,6 +61,7 @@
 <script>
 import icon from '@/assets/library/font-awesome-4.7.0-icon/icon.js'
 export default {
+  name: 'd2-icon-select',
   props: {
     // 值
     value: {
diff --git a/src/components/core/IconSvg/index.vue b/src/components/core/d2-icon-svg/index.vue
similarity index 81%
rename from src/components/core/IconSvg/index.vue
rename to src/components/core/d2-icon-svg/index.vue
index c37955c7..86fa8a8b 100644
--- a/src/components/core/IconSvg/index.vue
+++ b/src/components/core/d2-icon-svg/index.vue
@@ -6,6 +6,7 @@
 
 <script>
 export default {
+  name: 'd2-icon-svg',
   props: {
     name: {
       type: String,
@@ -14,7 +15,7 @@ export default {
   },
   computed: {
     icon () {
-      return `#dd-${this.name}`
+      return `#d2-${this.name}`
     }
   }
 }
diff --git a/src/components/core/Icon/index.vue b/src/components/core/d2-icon/index.vue
similarity index 92%
rename from src/components/core/Icon/index.vue
rename to src/components/core/d2-icon/index.vue
index 130e662f..0fb026e0 100644
--- a/src/components/core/Icon/index.vue
+++ b/src/components/core/d2-icon/index.vue
@@ -4,6 +4,7 @@
 
 <script>
 export default {
+  name: 'd2-icon',
   props: {
     name: {
       type: String,
diff --git a/src/components/core/d2-layout-main/components/-header-menu/index.vue b/src/components/core/d2-layout-main/components/-header-menu/index.vue
new file mode 100644
index 00000000..0e735455
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-header-menu/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-menu
+    mode="horizontal"
+    :router="true">
+    <template v-for="(menu, menuIndex) in menus">
+      <d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+      <d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
+    </template>
+  </el-menu>
+</template>
+
+<script>
+import menus from '@/menu/index.js'
+export default {
+  name: 'd2-layout-main-menu-header',
+  components: {
+    'd2-layout-main-menu-item': () => import('../d2-layout-main-menu-item/index.vue'),
+    'd2-layout-main-menu-sub': () => import('../d2-layout-main-menu-sub/index.vue')
+  },
+  data () {
+    return {
+      menus
+    }
+  }
+}
+</script>
diff --git a/src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue b/src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue
similarity index 70%
rename from src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue
rename to src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue
index f4c7c278..587073e1 100644
--- a/src/components/core/MainLayout/components/HeaderRight/components/FullScreen.vue
+++ b/src/components/core/d2-layout-main/components/-header-right/components/-full-screen.vue
@@ -1,12 +1,11 @@
 <template>
   <el-tooltip
-    class="item"
     effect="dark"
     :content="isFullScreen ? '退出全屏' : '全屏'"
     placement="bottom">
-    <el-button class="dd-mr btn-text" type="text" @click="toggleFullScreen">
-      <Icon v-if="isFullScreen" name="compress"></Icon>
-      <Icon v-else name="arrows-alt"></Icon>
+    <el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
+      <d2-icon v-if="isFullScreen" name="compress"/>
+      <d2-icon v-else name="arrows-alt"/>
     </el-button>
   </el-tooltip>
 </template>
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
new file mode 100644
index 00000000..b838edb6
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-header-right/components/-theme.vue
@@ -0,0 +1,59 @@
+<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">
+        <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>
+  </div>
+</template>
+
+<script>
+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'
+        }
+      ]
+    }
+  }
+}
+</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/MainLayout/components/HeaderRight/components/UserDropdown.vue b/src/components/core/d2-layout-main/components/-header-right/components/-user.vue
similarity index 68%
rename from src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue
rename to src/components/core/d2-layout-main/components/-header-right/components/-user.vue
index 095805f8..b937e9c7 100644
--- a/src/components/core/MainLayout/components/HeaderRight/components/UserDropdown.vue
+++ b/src/components/core/d2-layout-main/components/-header-right/components/-user.vue
@@ -1,9 +1,9 @@
 <template>
-  <el-dropdown class="dd-mr">
-    <span class="el-dropdown-link">你好</span>
+  <el-dropdown class="d2-mr">
+    <span class="btn-text">你好</span>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item @click.native="logOff"><Icon name="power-off"></Icon> 注销</el-dropdown-item>
-      <el-dropdown-item><Icon name="user-circle-o"></Icon> 个人中心</el-dropdown-item>
+      <el-dropdown-item @click.native="logOff"><d2-icon name="power-off"/> 注销</el-dropdown-item>
+      <el-dropdown-item><d2-icon name="user-circle-o"/> 个人中心</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
diff --git a/src/components/core/d2-layout-main/components/-header-right/index.vue b/src/components/core/d2-layout-main/components/-header-right/index.vue
new file mode 100644
index 00000000..f62d5b54
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-header-right/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="d2-header-right">
+    <d2-layout-main-header-right-full-screen/>
+    <d2-layout-main-header-right-theme/>
+    <d2-layout-main-header-right-user/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-layout-main-header-right',
+  components: {
+    'd2-layout-main-header-right-full-screen': () => import('./components/-full-screen.vue'),
+    'd2-layout-main-header-right-theme': () => import('./components/-theme.vue'),
+    'd2-layout-main-header-right-user': () => import('./components/-user.vue')
+  }
+}
+</script>
diff --git a/src/components/core/d2-layout-main/components/-menu-header/index.vue b/src/components/core/d2-layout-main/components/-menu-header/index.vue
new file mode 100644
index 00000000..899a70f5
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-menu-header/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <el-menu
+    mode="horizontal"
+    :router="true">
+    <template v-for="(menu, menuIndex) in menus">
+      <d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+      <d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
+    </template>
+  </el-menu>
+</template>
+
+<script>
+import menus from '@/menu/index.js'
+export default {
+  name: 'd2-layout-main-menu-header',
+  components: {
+    'd2-layout-main-menu-item': () => import('../-menu-item/index.vue'),
+    'd2-layout-main-menu-sub': () => import('../-menu-sub/index.vue')
+  },
+  data () {
+    return {
+      menus
+    }
+  }
+}
+</script>
diff --git a/src/components/core/MainLayout/components/D2MenuItem/index.vue b/src/components/core/d2-layout-main/components/-menu-item/index.vue
similarity index 89%
rename from src/components/core/MainLayout/components/D2MenuItem/index.vue
rename to src/components/core/d2-layout-main/components/-menu-item/index.vue
index 899e90fb..5ad45134 100644
--- a/src/components/core/MainLayout/components/D2MenuItem/index.vue
+++ b/src/components/core/d2-layout-main/components/-menu-item/index.vue
@@ -7,7 +7,7 @@
 
 <script>
 export default {
-  name: 'D2MenuItem',
+  name: 'd2-layout-main-menu-item',
   props: {
     menu: {
       type: Object,
diff --git a/src/components/core/MainLayout/components/SideMenu/index.vue b/src/components/core/d2-layout-main/components/-menu-side/index.vue
similarity index 65%
rename from src/components/core/MainLayout/components/SideMenu/index.vue
rename to src/components/core/d2-layout-main/components/-menu-side/index.vue
index b4f00e3e..dec1a632 100644
--- a/src/components/core/MainLayout/components/SideMenu/index.vue
+++ b/src/components/core/d2-layout-main/components/-menu-side/index.vue
@@ -5,11 +5,11 @@
       :unique-opened="true"
       :router="true">
       <template v-for="(menu, menuIndex) in menus">
-        <d2-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-        <d2-submenu v-else :menu="menu" :key="menuIndex"/>
+        <d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+        <d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
       </template>
     </el-menu>
-    <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="dd-side-menu-empty">
+    <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
       没有菜单
     </div> -->
   </div>
@@ -18,6 +18,7 @@
 <script>
 import { side } from '@/menu/index.js'
 export default {
+  name: 'd2-layout-main-menu-side',
   props: {
     collapse: {
       type: Boolean,
@@ -26,8 +27,8 @@ export default {
     }
   },
   components: {
-    D2MenuItem: () => import('../D2MenuItem/index.vue'),
-    D2Submenu: () => import('../D2Submenu/index.vue')
+    'd2-layout-main-menu-item': () => import('../-menu-item/index.vue'),
+    'd2-layout-main-menu-sub': () => import('../-menu-sub/index.vue')
   },
   data () {
     return {
diff --git a/src/components/core/MainLayout/components/D2Submenu/index.vue b/src/components/core/d2-layout-main/components/-menu-sub/index.vue
similarity index 62%
rename from src/components/core/MainLayout/components/D2Submenu/index.vue
rename to src/components/core/d2-layout-main/components/-menu-sub/index.vue
index 3285ce6c..099bc744 100644
--- a/src/components/core/MainLayout/components/D2Submenu/index.vue
+++ b/src/components/core/d2-layout-main/components/-menu-sub/index.vue
@@ -5,15 +5,15 @@
       <span slot="title">{{menu.title}}</span>
     </template>
     <template v-for="(child, childIndex) in menu.children">
-      <d2-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
-      <d2-submenu v-else :menu="child" :key="childIndex"/>
+      <d2-layout-main-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
+      <d2-layout-main-menu-sub v-else :menu="child" :key="childIndex"/>
     </template>
   </el-submenu>
 </template>
 
 <script>
 export default {
-  name: 'D2Submenu',
+  name: 'd2-layout-main-menu-sub',
   props: {
     menu: {
       type: Object,
@@ -22,7 +22,7 @@ export default {
     }
   },
   components: {
-    D2MenuItem: () => import('../D2MenuItem/index.vue')
+    'd2-layout-main-menu-item': () => import('../-menu-item/index.vue')
   }
 }
 </script>
diff --git a/src/components/core/d2-layout-main/components/-side-menu/index.vue b/src/components/core/d2-layout-main/components/-side-menu/index.vue
new file mode 100644
index 00000000..9eab34b6
--- /dev/null
+++ b/src/components/core/d2-layout-main/components/-side-menu/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <el-menu
+      :collapse="collapse"
+      :unique-opened="true"
+      :router="true">
+      <template v-for="(menu, menuIndex) in menus">
+        <d2-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
+        <d2-layout-main-menu-sub v-else :menu="menu" :key="menuIndex"/>
+      </template>
+    </el-menu>
+    <!-- <div v-if="sideMenu.filter(e => e.title).length === 0 && !collapse" class="d2-menu-side-empty">
+      没有菜单
+    </div> -->
+  </div>
+</template>
+
+<script>
+import { side } from '@/menu/index.js'
+export default {
+  name: 'd2-layout-main-menu-side',
+  props: {
+    collapse: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  components: {
+    'd2-layout-main-menu-item': () => import('../d2-layout-main-menu-item/index.vue'),
+    'd2-layout-main-menu-sub': () => import('../d2-layout-main-menu-sub/index.vue')
+  },
+  data () {
+    return {
+      menus: []
+    }
+  },
+  watch: {
+    '$route.matched': {
+      handler (val) {
+        const path = val[0].path
+        this.menus = side.filter(menu => menu.path === path)
+      },
+      immediate: true
+    }
+  }
+}
+</script>
diff --git a/src/components/core/MainLayout/index.vue b/src/components/core/d2-layout-main/index.vue
similarity index 73%
rename from src/components/core/MainLayout/index.vue
rename to src/components/core/d2-layout-main/index.vue
index 466826d0..c4b081ab 100644
--- a/src/components/core/MainLayout/index.vue
+++ b/src/components/core/d2-layout-main/index.vue
@@ -7,16 +7,16 @@
         <img v-else src="@/assets/image/logo/header.png">
       </div>
       <div class="toggle-aside-btn" @click="collapse = !collapse">
-        <Icon name="bars"/>
+        <d2-icon name="bars"/>
       </div>
-      <HeaderMenu/>
-      <HeaderRight/>
+      <d2-layout-main-menu-header/>
+      <d2-layout-main-header-right/>
     </el-header>
     <!-- 下面 主体 -->
     <el-container>
       <!-- 主体 侧边栏 -->
       <el-aside :style="{width: collapse ? asideWidthCollapse : asideWidth}">
-        <SideMenu :collapse="collapse"/>
+        <d2-layout-main-menu-side :collapse="collapse"/>
       </el-aside>
       <!-- 主体 -->
       <el-main>
@@ -30,10 +30,11 @@
 
 <script>
 export default {
+  name: 'd2-layout-main',
   components: {
-    SideMenu: () => import('./components/SideMenu'),
-    HeaderMenu: () => import('./components/HeaderMenu'),
-    HeaderRight: () => import('./components/HeaderRight')
+    'd2-layout-main-menu-side': () => import('./components/-menu-side'),
+    'd2-layout-main-menu-header': () => import('./components/-menu-header'),
+    'd2-layout-main-header-right': () => import('./components/-header-right')
   },
   data () {
     return {
diff --git a/src/components/core/Markdown/index.vue b/src/components/core/d2-markdown/index.vue
similarity index 99%
rename from src/components/core/Markdown/index.vue
rename to src/components/core/d2-markdown/index.vue
index 1e76aa43..512f3acd 100644
--- a/src/components/core/Markdown/index.vue
+++ b/src/components/core/d2-markdown/index.vue
@@ -12,6 +12,7 @@ import marked from 'marked'
 import highlight from 'highlight.js'
 import bandupan from './plugin/baidupan'
 export default {
+  name: 'd2-markdown',
   props: {
     url: {
       type: String,
diff --git a/src/components/core/Markdown/plugin/baidupan.js b/src/components/core/d2-markdown/plugin/baidupan.js
similarity index 100%
rename from src/components/core/Markdown/plugin/baidupan.js
rename to src/components/core/d2-markdown/plugin/baidupan.js
diff --git a/src/components/core/SimpleMDE/index.vue b/src/components/core/d2-mde/index.vue
similarity index 98%
rename from src/components/core/SimpleMDE/index.vue
rename to src/components/core/d2-mde/index.vue
index 3a3b3129..c96e7e93 100644
--- a/src/components/core/SimpleMDE/index.vue
+++ b/src/components/core/d2-mde/index.vue
@@ -5,6 +5,7 @@
 <script>
 import SimpleMDE from 'simplemde'
 export default {
+  name: 'd2-mde',
   props: {
     // 值
     value: {
diff --git a/src/components/core/QuillEditor/index.vue b/src/components/core/d2-quill/index.vue
similarity index 98%
rename from src/components/core/QuillEditor/index.vue
rename to src/components/core/d2-quill/index.vue
index cc0fff13..bb371a01 100644
--- a/src/components/core/QuillEditor/index.vue
+++ b/src/components/core/d2-quill/index.vue
@@ -8,7 +8,7 @@ import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
 import 'quill/dist/quill.bubble.css'
 export default {
-  name: 'QuillEditor',
+  name: 'd2-quill',
   props: {
     value: {
       type: String,
diff --git a/src/components/core/register.js b/src/components/core/register.js
index a6a10f95..b3f19794 100644
--- a/src/components/core/register.js
+++ b/src/components/core/register.js
@@ -1,11 +1,18 @@
 import Vue from 'vue'
 
-Vue.component('Container', resolve => { require(['@/components/core/Container'], resolve) })
-Vue.component('CountUp', resolve => { require(['@/components/core/CountUp'], resolve) })
-Vue.component('Highlight', resolve => { require(['@/components/core/Highlight'], resolve) })
-Vue.component('Icon', resolve => { require(['@/components/core/Icon'], resolve) })
-Vue.component('IconSelect', resolve => { require(['@/components/core/IconSelect/index.vue'], resolve) })
-Vue.component('IconSvg', resolve => { require(['@/components/core/IconSvg/index.vue'], resolve) })
-Vue.component('Markdown', resolve => { require(['@/components/core/Markdown'], resolve) })
-Vue.component('QuillEditor', resolve => { require(['@/components/core/QuillEditor'], resolve) })
-Vue.component('SimpleMDE', resolve => { require(['@/components/core/SimpleMDE'], resolve) })
+import { GridLayout, GridItem } from 'vue-grid-layout'
+import SplitPane from 'vue-splitpane'
+
+Vue.component('d2-grid-layout', GridLayout)
+Vue.component('d2-grid-item', GridItem)
+Vue.component('SplitPane', SplitPane)
+
+Vue.component('d2-container', () => import('@/components/core/d2-container'))
+Vue.component('d2-count-up', () => import('@/components/core/d2-count-up'))
+Vue.component('d2-highlight', () => import('@/components/core/d2-highlight'))
+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'))
diff --git a/src/components/demo/GithubLink/index.vue b/src/components/demo/GithubLink/index.vue
deleted file mode 100644
index ad2d71d4..00000000
--- a/src/components/demo/GithubLink/index.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<i18n src="./lang.json"></i18n>
-
-<template>
-  <el-tooltip :content="url" :placement="tooltipPlacement">
-    <a :href="url" target="_blank" class="link">
-      {{$t('label')}}
-      <i class="fa fa-github"></i>
-    </a>
-  </el-tooltip>
-</template>
-
-<script>
-export default {
-  props: {
-    url: {
-      type: String,
-      required: false,
-      default: 'https://github.com/FairyEver'
-    },
-    tooltipPlacement: {
-      type: String,
-      required: false,
-      default: 'top-end'
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/assets/style/unit/_color.scss';
-.link {
-  color: $color-primary;
-}
-</style>
-
diff --git a/src/components/demo/GithubLink/lang.json b/src/components/demo/GithubLink/lang.json
deleted file mode 100644
index b8ca977e..00000000
--- a/src/components/demo/GithubLink/lang.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "cn": {
-    "label": "在 Github 查看"
-  },
-  "en": {
-    "label": "View in Github"
-  },
-  "ja": {
-    "label": "調べでGithub"
-  }
-}
\ No newline at end of file
diff --git a/src/components/demo/GithubLinkButton/index.vue b/src/components/demo/GithubLinkButton/index.vue
deleted file mode 100644
index 1c31179b..00000000
--- a/src/components/demo/GithubLinkButton/index.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<template>
-  <div>
-    <el-popover
-      ref="pop"
-      placement="top"
-      width="160"
-      v-model="popover.visible">
-      <p class="dd-mt-0 dd-mb-10">
-        <i class="fa fa-github"></i>
-        github
-      </p>
-      <p class="dd-mt-0 dd-mb-10" style="font-size: 10px;">{{name}}</p>
-      <div style="text-align: right; margin: 0">
-        <el-button size="mini" type="text" @click="popover.visible = false">
-          取消
-        </el-button>
-        <el-button type="primary" size="mini" @click="jump">
-          确定
-        </el-button>
-      </div>
-    </el-popover>
-    <el-button
-      v-popover:pop
-      v-bind="$attrs">
-      <i class="fa fa-github"></i>
-      {{name}}
-    </el-button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    name: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    url: {
-      type: String,
-      required: false,
-      default: 'https://github.com/FairyEver'
-    }
-  },
-  data () {
-    return {
-      popover: {
-        visible: false
-      }
-    }
-  },
-  methods: {
-    jump () {
-      window.open(this.url)
-    }
-  }
-}
-</script>
diff --git a/src/components/demo/PageHeader/index.vue b/src/components/demo/PageHeader/index.vue
deleted file mode 100644
index faf0cf2b..00000000
--- a/src/components/demo/PageHeader/index.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div class="dd-clearfix">
-    <span v-if="title" class="dd-fl">{{title}}</span>
-    <span class="dd-fr">
-      <GithubLink v-if="url" :url="url"></GithubLink>
-    </span>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    url: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    title: {
-      type: String,
-      required: false,
-      default: ''
-    }
-  }
-}
-</script>
diff --git a/src/components/demo/PageIndexArticle/index.vue b/src/components/demo/d2-demo-page-cover/index.vue
similarity index 94%
rename from src/components/demo/PageIndexArticle/index.vue
rename to src/components/demo/d2-demo-page-cover/index.vue
index 5d78c58a..2b9c66d6 100644
--- a/src/components/demo/PageIndexArticle/index.vue
+++ b/src/components/demo/d2-demo-page-cover/index.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="page-index-article-body">
     <div class="page-index-article-body__logo">
-      <slot></slot>
+      <slot/>
     </div>
     <p class="page-index-article-body__title">{{title}}</p>
-    <p class="page-index-article-body__sub-title dd-mt-0">{{subTitle}}</p>
+    <p class="page-index-article-body__sub-title d2-mt-0">{{subTitle}}</p>
     <a target="blank" href="https://github.com/FairyEver/d2admin-vue-element">
       <img
         style="position: absolute; top: 0; right: 0; border: 0;"
diff --git a/src/components/demo/d2-demo-page-header/index.vue b/src/components/demo/d2-demo-page-header/index.vue
new file mode 100644
index 00000000..5dae952d
--- /dev/null
+++ b/src/components/demo/d2-demo-page-header/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="d2-clearfix">
+    <span v-if="title" class="d2-fl">{{title}}</span>
+    <span class="d2-fr"></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'd2-demo-page-header',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  }
+}
+</script>
diff --git a/src/components/demo/register.js b/src/components/demo/register.js
index 8c375632..6e102fec 100644
--- a/src/components/demo/register.js
+++ b/src/components/demo/register.js
@@ -1,11 +1,4 @@
 import Vue from 'vue'
-import {GridLayout, GridItem} from 'vue-grid-layout'
-import SplitPane from 'vue-splitpane'
 
-Vue.component('GridLayout', GridLayout)
-Vue.component('GridItem', GridItem)
-Vue.component('SplitPane', SplitPane)
-Vue.component('GithubLink', resolve => { require(['@/components/demo/GithubLink'], resolve) })
-Vue.component('GithubLinkButton', resolve => { require(['@/components/demo/GithubLinkButton'], resolve) })
-Vue.component('PageHeader', resolve => { require(['@/components/demo/PageHeader'], resolve) })
-Vue.component('PageIndexArticle', resolve => { require(['@/components/demo/PageIndexArticle'], resolve) })
+Vue.component('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
+Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))
diff --git a/src/pages/core/index/index.vue b/src/pages/core/index/index.vue
index 1ff41795..84832231 100644
--- a/src/pages/core/index/index.vue
+++ b/src/pages/core/index/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
-    <PageIndexArticle
+  <d2-container type="full">
+    <d2-demo-page-cover
       title="I AM D2ADMIN"
       sub-title="追求简约美感 & 上手即用的后台管理系统模板">
       <img src="@/assets/image/logo/w500.png">
-    </PageIndexArticle>
-  </Container>
+    </d2-demo-page-cover>
+  </d2-container>
 </template>
diff --git a/src/pages/demo/business/index/index.vue b/src/pages/demo/business/index/index.vue
index c8bbc4e1..a9927cb4 100644
--- a/src/pages/demo/business/index/index.vue
+++ b/src/pages/demo/business/index/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
-    <PageIndexArticle
+  <d2-container type="full">
+    <d2-demo-page-cover
       title="示例业务页面"
       sub-title="如果用不到 建议删除相关代码">
       <img src="@/assets/image/logo/w500-business.png">
-    </PageIndexArticle>
-  </Container>
+    </d2-demo-page-cover>
+  </d2-container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/business/user-center/home/index.vue b/src/pages/demo/business/user-center/home/index.vue
index 4e64bf09..2ae077a6 100644
--- a/src/pages/demo/business/user-center/home/index.vue
+++ b/src/pages/demo/business/user-center/home/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
     <template slot="header">
       用户中心
     </template>
     doing...
-  </Container>
+  </d2-container>
 </template>
diff --git a/src/pages/demo/chart/all/components/ChartCardHeader.vue b/src/pages/demo/chart/all/components/ChartCardHeader.vue
index b6f4ada9..194460da 100644
--- a/src/pages/demo/chart/all/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/all/components/ChartCardHeader.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     {{title}}
-    <span class="dd-fr">
-      <Icon
+    <span class="d2-fr">
+      <d2-icon
         class="chart-card-header-icon"
         :class="{active}"
         name="refresh"
         @click.native="handleRefresh">
-      </Icon>
+      </d2-icon>
     </span>
   </div>
 </template>
diff --git a/src/pages/demo/chart/all/index.vue b/src/pages/demo/chart/all/index.vue
index 6812e4a4..91126a32 100644
--- a/src/pages/demo/chart/all/index.vue
+++ b/src/pages/demo/chart/all/index.vue
@@ -1,56 +1,56 @@
 <template>
-  <Container type="ghost" :responsive="true" class="demo-chart-index">
+  <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="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></ChartCardHeader>
+          <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="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></ChartCardHeader>
+          <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="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></ChartCardHeader>
+          <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="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></ChartCardHeader>
+          <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="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></ChartCardHeader>
+          <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="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></ChartCardHeader>
+          <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="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></ChartCardHeader>
+          <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="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></ChartCardHeader>
+          <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
       </el-col>
     </el-row>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
@@ -63,49 +63,49 @@ export default {
       chart: [
         {
           api: {url: '/api/chart/G2Line', data: {type: 'base'}},
-          refName: 'G2LineBase',
+          refName: 'd2-chart-line-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
-          refName: 'G2LineStep',
+          refName: 'd2-chart-line-step',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Column', data: {type: 'base'}},
-          refName: 'G2ColumnBase',
+          refName: 'd2-chart-column-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
-          refName: 'G2BarBase',
+          refName: 'd2-chart-bar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
-          refName: 'G2PieBase',
+          refName: 'd2-chart-pie-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
-          refName: 'G2NightingaleRoseBase',
+          refName: 'd2-chart-nightingale-rose-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
-          refName: 'G2RadarBase',
+          refName: 'd2-chart-radar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Area', data: {type: 'base'}},
-          refName: 'G2AreaBase',
+          refName: 'd2-chart-area-base',
           ready: false,
           data: []
         }
diff --git a/src/pages/demo/chart/all/style.scss b/src/pages/demo/chart/all/style.scss
index 59f93df3..2ee0cadd 100644
--- a/src/pages/demo/chart/all/style.scss
+++ b/src/pages/demo/chart/all/style.scss
@@ -1,7 +1,7 @@
 @import '~@/assets/style/public.scss';
 .demo-chart-index {
   .col {
-    height: 300px;
+    height: 340px;
     margin-bottom: 20px;
     .el-card {
       @extend %unable-select;
diff --git a/src/pages/demo/chart/demo/PieBase.vue b/src/pages/demo/chart/demo/PieBase.vue
index 182d2965..73e67aab 100644
--- a/src/pages/demo/chart/demo/PieBase.vue
+++ b/src/pages/demo/chart/demo/PieBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2PieBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2PieBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/areaBase.vue b/src/pages/demo/chart/demo/areaBase.vue
index 8050a195..e13c2606 100644
--- a/src/pages/demo/chart/demo/areaBase.vue
+++ b/src/pages/demo/chart/demo/areaBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2AreaBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2AreaBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/barBase.vue b/src/pages/demo/chart/demo/barBase.vue
index 888571c7..a257df0d 100644
--- a/src/pages/demo/chart/demo/barBase.vue
+++ b/src/pages/demo/chart/demo/barBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2BarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2BarBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/columnBase.vue b/src/pages/demo/chart/demo/columnBase.vue
index 85f0d64e..c6da31a0 100644
--- a/src/pages/demo/chart/demo/columnBase.vue
+++ b/src/pages/demo/chart/demo/columnBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2ColumnBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2ColumnBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/components/ChartDemoCard.vue b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
index 9ee80690..e9b26f5d 100644
--- a/src/pages/demo/chart/demo/components/ChartDemoCard.vue
+++ b/src/pages/demo/chart/demo/components/ChartDemoCard.vue
@@ -2,7 +2,7 @@
   <el-card>
     <div slot="header">
       <el-button type="primary" size="mini" @click="syncData">
-        <Icon name="refresh"></Icon>
+        <d2-icon name="refresh"/>
         加载数据
       </el-button>
       <el-radio-group v-model="height" size="mini">
@@ -10,7 +10,7 @@
       </el-radio-group>
     </div>
     <div :style="style">
-      <slot :data="data"></slot>
+      <slot :data="data"/>
     </div>
   </el-card>
 </template>
diff --git a/src/pages/demo/chart/demo/lineBase.vue b/src/pages/demo/chart/demo/lineBase.vue
index 61e53064..b01286e3 100644
--- a/src/pages/demo/chart/demo/lineBase.vue
+++ b/src/pages/demo/chart/demo/lineBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2LineBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/lineStep.vue b/src/pages/demo/chart/demo/lineStep.vue
index 36b4ae4d..802fcbc9 100644
--- a/src/pages/demo/chart/demo/lineStep.vue
+++ b/src/pages/demo/chart/demo/lineStep.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2LineStep slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineStep>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/nightingaleRoseBase.vue b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
index 5ccdca01..e7e4f1f6 100644
--- a/src/pages/demo/chart/demo/nightingaleRoseBase.vue
+++ b/src/pages/demo/chart/demo/nightingaleRoseBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2NightingaleRoseBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2NightingaleRoseBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/demo/radarBase.vue b/src/pages/demo/chart/demo/radarBase.vue
index 1d8ee456..6451b317 100644
--- a/src/pages/demo/chart/demo/radarBase.vue
+++ b/src/pages/demo/chart/demo/radarBase.vue
@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2RadarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2RadarBase>
+  <d2-container type="ghost" :responsive="true">
+    <ChartDemoCard class="d2-mb" 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>
-      <Markdown url="/static/md/组件 - 图表.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图表.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue b/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
index b6f4ada9..194460da 100644
--- a/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
+++ b/src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue
@@ -1,13 +1,13 @@
 <template>
   <div>
     {{title}}
-    <span class="dd-fr">
-      <Icon
+    <span class="d2-fr">
+      <d2-icon
         class="chart-card-header-icon"
         :class="{active}"
         name="refresh"
         @click.native="handleRefresh">
-      </Icon>
+      </d2-icon>
     </span>
   </div>
 </template>
diff --git a/src/pages/demo/chart/dynamicSize/index.vue b/src/pages/demo/chart/dynamicSize/index.vue
index 88b11974..29ba5b13 100644
--- a/src/pages/demo/chart/dynamicSize/index.vue
+++ b/src/pages/demo/chart/dynamicSize/index.vue
@@ -1,64 +1,64 @@
 <template>
-  <Container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
+  <d2-container type="ghost" :responsive="true" class="demo-chart-index">
+    <d2-grid-layout v-bind="layout" @layout-updated="layoutUpdatedHandler">
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[0]" @resized="handleResized(chart[0].refName)">
+      <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="G2LineBase"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></ChartCardHeader>
+          <d2-chart-line-base :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></d2-chart-line-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[1]" @resized="handleResized(chart[1].refName)">
+      <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="G2LineStep"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></ChartCardHeader>
+          <d2-chart-line-step :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></d2-chart-line-step>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[2]" @resized="handleResized(chart[2].refName)">
+      <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="G2ColumnBase"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></ChartCardHeader>
+          <d2-chart-column-base :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></d2-chart-column-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[3]" @resized="handleResized(chart[3].refName)">
+      <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="G2BarBase"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></ChartCardHeader>
+          <d2-chart-bar-base :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></d2-chart-bar-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[4]" @resized="handleResized(chart[4].refName)">
+      <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="G2PieBase"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></ChartCardHeader>
+          <d2-chart-pie-base :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></d2-chart-pie-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[5]" @resized="handleResized(chart[5].refName)">
+      <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="G2NightingaleRoseBase"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></ChartCardHeader>
+          <d2-chart-nightingale-rose-base :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></d2-chart-nightingale-rose-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[6]" @resized="handleResized(chart[6].refName)">
+      <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="G2RadarBase"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></ChartCardHeader>
+          <d2-chart-radar-base :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></d2-chart-radar-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
       <!-- 卡片 -->
-      <GridItem v-bind="layout.layout[7]" @resized="handleResized(chart[7].refName)">
+      <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="G2AreaBase"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></ChartCardHeader>
+          <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
-      </GridItem>
-    </GridLayout>
-  </Container>
+      </d2-grid-item>
+    </d2-grid-layout>
+  </d2-container>
 </template>
 
 <script>
@@ -71,49 +71,49 @@ export default {
       chart: [
         {
           api: {url: '/api/chart/G2Line', data: {type: 'base'}},
-          refName: 'G2LineBase',
+          refName: 'd2-chart-line-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Line', data: {type: 'step'}},
-          refName: 'G2LineStep',
+          refName: 'd2-chart-line-step',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Column', data: {type: 'base'}},
-          refName: 'G2ColumnBase',
+          refName: 'd2-chart-column-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Bar', data: {type: 'base'}},
-          refName: 'G2BarBase',
+          refName: 'd2-chart-bar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Pie', data: {type: 'base'}},
-          refName: 'G2PieBase',
+          refName: 'd2-chart-pie-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2NightingaleRose', data: {type: 'base'}},
-          refName: 'G2NightingaleRoseBase',
+          refName: 'd2-chart-nightingale-rose-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Radar', data: {type: 'base'}},
-          refName: 'G2RadarBase',
+          refName: 'd2-chart-radar-base',
           ready: false,
           data: []
         },
         {
           api: {url: '/api/chart/G2Area', data: {type: 'base'}},
-          refName: 'G2AreaBase',
+          refName: 'd2-chart-area-base',
           ready: false,
           data: []
         }
diff --git a/src/pages/demo/chart/index/index.vue b/src/pages/demo/chart/index/index.vue
index f4b49f7c..d880c51f 100644
--- a/src/pages/demo/chart/index/index.vue
+++ b/src/pages/demo/chart/index/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
-    <PageIndexArticle
+  <d2-container type="full">
+    <d2-demo-page-cover
       title="内置 G2 图表库"
       sub-title="如果用不到 建议删除相关代码和依赖">
       <img src="@/assets/image/logo/w500-chart.png">
-    </PageIndexArticle>
-  </Container>
+    </d2-demo-page-cover>
+  </d2-container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/components/container/full.vue b/src/pages/demo/components/container/full.vue
index e8aeeda0..9d31cbb9 100644
--- a/src/pages/demo/components/container/full.vue
+++ b/src/pages/demo/components/container/full.vue
@@ -1,11 +1,11 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
     <template slot="header">
       我是插入到 header 中的内容
     </template>
-    <Markdown url="/static/md/组件 - 页面容器 - 撑满.md"></Markdown>
+    <d2-markdown url="/static/md/组件 - 页面容器 - 撑满.md"/>
     <template slot="footer">
       我是插入到 footer 中的内容
     </template>
-  </Container>
+  </d2-container>
 </template>
diff --git a/src/pages/demo/components/container/ghost.vue b/src/pages/demo/components/container/ghost.vue
index 224416ff..788779e6 100644
--- a/src/pages/demo/components/container/ghost.vue
+++ b/src/pages/demo/components/container/ghost.vue
@@ -1,7 +1,7 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
     <el-card style="width: 50%;">
-      <Markdown url="/static/md/组件 - 页面容器 - 隐形.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 页面容器 - 隐形.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
diff --git a/src/pages/demo/components/container/normal.vue b/src/pages/demo/components/container/normal.vue
index 8abe52b1..2bea1196 100644
--- a/src/pages/demo/components/container/normal.vue
+++ b/src/pages/demo/components/container/normal.vue
@@ -1,6 +1,6 @@
 <template>
-  <Container>
+  <d2-container>
     <template slot="header">我是插入到 header 中的内容</template>
-    <Markdown url="/static/md/组件 - 页面容器 - 基础.md"></Markdown>
-  </Container>
+    <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 a83408b3..ef6a6f8b 100644
--- a/src/pages/demo/components/countup/index.vue
+++ b/src/pages/demo/components/countup/index.vue
@@ -1,17 +1,14 @@
 <template>
-  <Container type="ghost" class="page">
+  <d2-container type="ghost" class="page">
     <el-card>
-      <PageHeader
-        title="数字动画组件"
-        url="https://github.com/inorganik/countUp.js">
-      </PageHeader>
+      <d2-demo-page-header title="数字动画组件"/>
     </el-card>
     <el-row :gutter="20">
       <el-col :span="6">
         <el-card>
           <p slot="title">只设置目标数字</p>
           <div class="group">
-            <CountUp :end="100"></CountUp>  
+            <d2-count-up :end="100"/>  
           </div>
         </el-card>
       </el-col>
@@ -19,7 +16,7 @@
         <el-card>
           <p slot="title">设置起止数值</p>
           <div class="group">
-            <CountUp :start="14" :end="100"></CountUp>
+            <d2-count-up :start="14" :end="100"/>
           </div>
         </el-card>
       </el-col>
@@ -27,7 +24,7 @@
         <el-card>
           <p slot="title">小数位数</p>
           <div class="group">
-            <CountUp :end="100" :decimals="2"></CountUp>
+            <d2-count-up :end="100" :decimals="2"/>
           </div>
         </el-card>
       </el-col>
@@ -35,7 +32,7 @@
         <el-card>
           <p slot="title">动画时长</p>
           <div class="group">
-            <CountUp :end="100" :duration="6"></CountUp>
+            <d2-count-up :end="100" :duration="6"/>
           </div>
         </el-card>
       </el-col>
@@ -43,7 +40,7 @@
         <el-card>
           <p slot="title">回调函数</p>
           <div class="group">
-            <CountUp :end="100" :callback="() => {className = 'end'}" :class="className"></CountUp>
+            <d2-count-up :end="100" :callback="() => {className = 'end'}" :class="className"/>
           </div>
         </el-card>
       </el-col>
@@ -51,15 +48,15 @@
         <el-card>
           <p slot="title">结束一秒后更新数值</p>
           <div class="group">
-            <CountUp :end="end" :callback="update"></CountUp>
+            <d2-count-up :end="end" :callback="update"/>
           </div>
         </el-card>
       </el-col>
     </el-row>
     <el-card>
-      <Markdown url="/static/md/组件 - 数字动画.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 数字动画.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/editor-quill/index.vue b/src/pages/demo/components/editor-quill/index.vue
index 7e409259..5ab2a667 100644
--- a/src/pages/demo/components/editor-quill/index.vue
+++ b/src/pages/demo/components/editor-quill/index.vue
@@ -1,24 +1,19 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="基本示例"
-        url="https://github.com/quilljs/quill">
-      </PageHeader>
-      <QuillEditor
+  <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">
-      </QuillEditor>
+        @editor-change="editorChangeHandler"/>
     </el-card>
     <el-card>
       <template slot="header">输出</template>
-      <Highlight :code="formated"></Highlight>
+      <d2-highlight :code="formated"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/editor-simpleMDE/index.vue b/src/pages/demo/components/editor-simpleMDE/index.vue
index d3e10589..e2d02fe8 100644
--- a/src/pages/demo/components/editor-simpleMDE/index.vue
+++ b/src/pages/demo/components/editor-simpleMDE/index.vue
@@ -1,21 +1,16 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="基本示例"
-        url="https://github.com/sparksuite/simplemde-markdown-editor">
-      </PageHeader>
-      <SimpleMDE
+  <d2-container type="ghost">
+    <el-card class="d2-mb">
+      <d2-demo-page-header slot="header" title="基本示例"/>
+      <d2-mde
         v-model="text"
-        class="mde">
-      </SimpleMDE>
+        class="mde"/>
     </el-card>
     <el-card>
       <template slot="header">输出</template>
       <pre>{{text}}</pre>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/highlight/index.vue b/src/pages/demo/components/highlight/index.vue
index 267f6aaf..302d2778 100644
--- a/src/pages/demo/components/highlight/index.vue
+++ b/src/pages/demo/components/highlight/index.vue
@@ -1,39 +1,36 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        title="代码高亮组件"
-        url="https://github.com/isagalaev/highlight.js">
-      </PageHeader>
+  <d2-container type="ghost">
+    <el-card class="d2-mb">
+      <d2-demo-page-header title="代码高亮组件"/>
     </el-card>
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
       <p slot="title">javascript</p>
-      <Highlight :code="codeJavascript"></Highlight>
+      <d2-highlight :code="codeJavascript"/>
     </el-card>
     <el-row :gutter="20">
       <el-col :span="8">
-        <el-card class="dd-mb">
+        <el-card class="d2-mb">
           <p slot="title">css</p>
-          <Highlight :code="codeCSS"></Highlight>
+          <d2-highlight :code="codeCSS"/>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card class="dd-mb">
+        <el-card class="d2-mb">
           <p slot="title">scss</p>
-          <Highlight :code="codeSCSS"></Highlight>
+          <d2-highlight :code="codeSCSS"/>
         </el-card>
       </el-col>
       <el-col :span="8">
-        <el-card class="dd-mb">
+        <el-card class="d2-mb">
           <p slot="title">html</p>
-          <Highlight :code="codeHTML"></Highlight>
+          <d2-highlight :code="codeHTML"/>
         </el-card>
       </el-col>
     </el-row>
     <el-card>
-      <Markdown url="/static/md/组件 - 代码高亮.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 代码高亮.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/icon/components/IconCell.vue b/src/pages/demo/components/icon/components/IconCell.vue
index 1aa9bca2..48f1c8e4 100644
--- a/src/pages/demo/components/icon/components/IconCell.vue
+++ b/src/pages/demo/components/icon/components/IconCell.vue
@@ -54,7 +54,7 @@ export default {
       return `<i class="fa fa-${this.icon}" aria-hidden="true"></i>`
     },
     iconComponent () {
-      return `<Icon name="${this.icon}"></Icon>`
+      return `<d2-icon name="${this.icon}"/>`
     }
   },
   methods: {
diff --git a/src/pages/demo/components/icon/icon.vue b/src/pages/demo/components/icon/icon.vue
index b31e0403..e1ed030e 100644
--- a/src/pages/demo/components/icon/icon.vue
+++ b/src/pages/demo/components/icon/icon.vue
@@ -1,20 +1,16 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="图标组件"
-        url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Icon/index.vue">
-      </PageHeader>
-      <Icon></Icon>
-      <Icon name="github"></Icon>
-      <Icon name="github" style="font-size: 100px;"></Icon>
-      <Icon name="github" class="icon-class-demo"></Icon>
+  <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>
-      <Markdown url="/static/md/组件 - 图标组件.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图标组件.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <style lang="scss">
diff --git a/src/pages/demo/components/icon/list.vue b/src/pages/demo/components/icon/list.vue
index a7aa55ab..e691999c 100644
--- a/src/pages/demo/components/icon/list.vue
+++ b/src/pages/demo/components/icon/list.vue
@@ -1,5 +1,5 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
     <el-card>
       <template slot="header">
         <el-radio-group v-model="showIndex" size="mini">
@@ -15,15 +15,15 @@
         <el-alert
           title="点击图标复制代码"
           type="info"
-          class="dd-m-10"
+          class="d2-m-10"
           style="width: auto;">
         </el-alert>
-        <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="dd-p-10">
-          <IconCell :icon="iconItem"></IconCell>
+        <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>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/icon/select.vue b/src/pages/demo/components/icon/select.vue
index 40acf983..2ad209e8 100644
--- a/src/pages/demo/components/icon/select.vue
+++ b/src/pages/demo/components/icon/select.vue
@@ -1,11 +1,7 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="图标选择器"
-        url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/IconSelect/index.vue">
-      </PageHeader>
+  <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">
@@ -16,7 +12,7 @@
           <template v-else>未选择</template>
         </p>
       </div>
-      <IconSelect v-model="icon"></IconSelect>
+      <d2-icon-select v-model="icon"/>
       <div class="title-group">
         <p class="title">用户可以输入</p>
         <p class="sub-title">
@@ -27,12 +23,12 @@
           <template v-else>未选择</template>
         </p>
       </div>
-      <IconSelect v-model="icon2" :user-input="true"></IconSelect>
+      <d2-icon-select v-model="icon2" :user-input="true"/>
     </el-card>
     <el-card>
-      <Markdown url="/static/md/组件 - 图标选择器.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图标选择器.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/svg.vue
index 882f5a70..280186e5 100644
--- a/src/pages/demo/components/icon/svg.vue
+++ b/src/pages/demo/components/icon/svg.vue
@@ -1,13 +1,10 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="SVG图标组件">
-      </PageHeader>
+  <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">
-          <IconSvg class="icon" :name="icon"></IconSvg>
+          <d2-icon-svg class="icon" :name="icon"/>
           <div class="icon-title">
             <span>{{icon}}</span>
           </div>
@@ -15,9 +12,9 @@
       </el-row>
     </el-card>
     <el-card>
-      <Markdown url="/static/md/组件 - 图标组件 - svg.md"></Markdown>
+      <d2-markdown url="/static/md/组件 - 图标组件 - svg.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/demo/components/index/index.vue b/src/pages/demo/components/index/index.vue
index 0962999b..4193223b 100644
--- a/src/pages/demo/components/index/index.vue
+++ b/src/pages/demo/components/index/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
-    <PageIndexArticle
+  <d2-container type="full">
+    <d2-demo-page-cover
       title="内置组件"
       sub-title="D2Admin 为你提供了一些上手即用的组件">
       <img src="@/assets/image/logo/w500-component.png">
-    </PageIndexArticle>
-  </Container>
+    </d2-demo-page-cover>
+  </d2-container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/components/layout/grid.vue b/src/pages/demo/components/layout/grid.vue
index edf4c3f5..f9905920 100644
--- a/src/pages/demo/components/layout/grid.vue
+++ b/src/pages/demo/components/layout/grid.vue
@@ -1,9 +1,9 @@
 <template>
-  <Container type="ghost" class="demo-plugins-vue-grid-layout-demo">
-    <GridLayout
+  <d2-container type="ghost" class="demo-plugins-vue-grid-layout-demo">
+    <d2-grid-layout
       v-bind="layout"
       @layout-updated="layoutUpdatedHandler">
-      <GridItem
+      <d2-grid-item
         v-for="(item, index) in layout.layout"
         :key="index"
         v-bind="item"
@@ -14,19 +14,14 @@
         <el-card>
           <el-tag size="mini" type="info" slot="header">Card {{item.i}}</el-tag>
           <template v-if="item.i === '0'">
-            <div class="dd-mb">拖拽卡片调整位置</div>
-            <div class="dd-mb">拖拽卡片右下角的手柄调整卡片大小</div>
-            <div class="dd-mb">在控制台打印出数据变化</div>
-            <GithubLinkButton
-              name="vue-grid-layout"
-              url="https://github.com/jbaysolutions/vue-grid-layout"
-              type="success">
-            </GithubLinkButton>
+            <div class="d2-mb">拖拽卡片调整位置</div>
+            <div class="d2-mb">拖拽卡片右下角的手柄调整卡片大小</div>
+            <div class="d2-mb">在控制台打印出数据变化</div>
           </template>
         </el-card>
-      </GridItem>
-    </GridLayout>
-  </Container>
+      </d2-grid-item>
+    </d2-grid-layout>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/layout/splitpane.vue b/src/pages/demo/components/layout/splitpane.vue
index c8cb9293..c05f4288 100644
--- a/src/pages/demo/components/layout/splitpane.vue
+++ b/src/pages/demo/components/layout/splitpane.vue
@@ -1,10 +1,6 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="基本示例"
-      url="https://github.com/PanJiaChen/vue-split-pane">
-    </PageHeader>
+  <d2-container>
+    <d2-demo-page-header slot="header" title="基本示例"/>
     <div style="height: 400px; margin: -16px;">
       <SplitPane :min-percent='20' :default-percent='30' split="vertical">
         <template slot="paneL"><div style="margin: 10px;">左</div></template>
@@ -16,7 +12,7 @@
         </template>
       </SplitPane>
     </div>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/components/markdown/index.vue b/src/pages/demo/components/markdown/index.vue
index e0c7684f..68d785fd 100644
--- a/src/pages/demo/components/markdown/index.vue
+++ b/src/pages/demo/components/markdown/index.vue
@@ -1,10 +1,6 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="效果演示"
-      url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Markdown/index.vue">
-    </PageHeader>
-    <markdown url="/static/md/组件 - markdown - 演示.md"></markdown>
-  </Container>
+  <d2-container>
+    <d2-demo-page-header slot="header" title="效果演示"/>
+    <d2-markdown url="/static/md/组件 - markdown - 演示.md"/>
+  </d2-container>
 </template>
\ 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 deb1c3ff..90f3fb16 100644
--- a/src/pages/demo/plugins/build/index.vue
+++ b/src/pages/demo/plugins/build/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
     <template slot="header">
       多环境发布
     </template>
     <p>当前是{{$env ? '开发' : '生产'}}环境</p>
-  </Container>
+  </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 ade3866a..d63e0f6e 100644
--- a/src/pages/demo/plugins/clipboard-polyfill/index.vue
+++ b/src/pages/demo/plugins/clipboard-polyfill/index.vue
@@ -1,13 +1,9 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="基本示例"
-      url="https://github.com/lgarron/clipboard-polyfill">
-    </PageHeader>
+  <d2-container>
+    <d2-demo-page-header slot="header" title="基本示例"/>
     <el-row :gutter="10">
       <el-col :span="12">
-        <div class="dd-mb">
+        <div class="d2-mb">
           <el-input v-model="text" style="width: 200px;"></el-input>
           <el-button @click="copyText()">将左侧输入框内的文字复制进剪贴板</el-button>
         </div>
@@ -15,12 +11,12 @@
       </el-col>
       <el-col :span="12">
         <el-alert
-          class="dd-mb"
+          class="d2-mb"
           title="只有在 IE 浏览器下你才可以通过下面这两个按钮获取剪贴板数据"
           type="warning"
           show-icon>
         </el-alert>
-        <div class="dd-mb">
+        <div class="d2-mb">
           <el-tooltip content="需要 IE 浏览器" placement="top">
             <el-button @click="readText">readText( )</el-button>
           </el-tooltip>
@@ -31,7 +27,7 @@
         <el-input type="textarea" placeholder="在这里检验你的剪贴板 ( text/plain 数据 )"></el-input>
       </el-col>
     </el-row>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/export/table.vue b/src/pages/demo/plugins/export/table.vue
index 1400cb68..900c05dc 100644
--- a/src/pages/demo/plugins/export/table.vue
+++ b/src/pages/demo/plugins/export/table.vue
@@ -1,20 +1,17 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="导出表格">
-    </PageHeader>
-    <div class="dd-mb">
+  <d2-container>
+    <d2-demo-page-header slot="header" title="导出表格"/>
+    <div class="d2-mb">
       <el-button type="primary" @click="exportCsv">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"/>
         导出 CSV
       </el-button>
       <el-button type="primary" @click="exportExcel">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"/>
         导出 Excel
       </el-button>
     </div>
-    <el-table v-bind="table" style="width: 100%" class="dd-mb">
+    <el-table v-bind="table" style="width: 100%" class="d2-mb">
       <el-table-column
         v-for="(item, index) in table.columns"
         :key="index"
@@ -22,8 +19,8 @@
         :label="item.label">
       </el-table-column>
     </el-table>
-    <Markdown url="/static/md/插件 - 导出.md"></Markdown>
-  </Container>
+    <d2-markdown url="/static/md/插件 - 导出.md"/>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/export/txt.vue b/src/pages/demo/plugins/export/txt.vue
index bc787676..978104fc 100644
--- a/src/pages/demo/plugins/export/txt.vue
+++ b/src/pages/demo/plugins/export/txt.vue
@@ -1,23 +1,20 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="导出文本">
-    </PageHeader>
+  <d2-container>
+    <d2-demo-page-header slot="header" title="导出文本"/>
     <el-input
       type="textarea"
       :autosize="{minRows: 2, maxRows: 4}"
       placeholder="请输入内容 然后点击保存按钮导出文本文档"
       v-model="text">
     </el-input>
-    <div class="dd-mt dd-mb">
+    <div class="d2-mt d2-mb">
       <el-button type="primary" @click="exportTxt">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"/>
         保存为 txt
       </el-button>
     </div>
-    <Markdown url="/static/md/插件 - 导出.md"></Markdown>
-  </Container>
+    <d2-markdown url="/static/md/插件 - 导出.md"/>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/i18n/components/DemoI18nControl.vue b/src/pages/demo/plugins/i18n/components/DemoI18nControl.vue
index b9ce9eab..407a64a5 100644
--- a/src/pages/demo/plugins/i18n/components/DemoI18nControl.vue
+++ b/src/pages/demo/plugins/i18n/components/DemoI18nControl.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dd-mb">
+  <div class="d2-mb">
     <el-radio-group v-model="lang" @change="handleChange">
       <el-radio-button label="cn">中文</el-radio-button>
       <el-radio-button label="ja">日本語</el-radio-button>
diff --git a/src/pages/demo/plugins/i18n/demo1.vue b/src/pages/demo/plugins/i18n/demo1.vue
index d5c471b7..411c3b1a 100644
--- a/src/pages/demo/plugins/i18n/demo1.vue
+++ b/src/pages/demo/plugins/i18n/demo1.vue
@@ -1,13 +1,9 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      :title="`${$t('pub.pageHeader.demo')} 1`"
-      url="http://kazupon.github.io/vue-i18n/en/">
-    </PageHeader>
+  <d2-container>
+    <d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 1`"/>
     <DemoI18nControl></DemoI18nControl>
     <DemoI18n></DemoI18n>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/i18n/demo2.vue b/src/pages/demo/plugins/i18n/demo2.vue
index 26f8e8a3..80187f29 100644
--- a/src/pages/demo/plugins/i18n/demo2.vue
+++ b/src/pages/demo/plugins/i18n/demo2.vue
@@ -1,13 +1,9 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      :title="`${$t('pub.pageHeader.demo')} 2`"
-      url="http://kazupon.github.io/vue-i18n/en/">
-    </PageHeader>
+  <d2-container>
+    <d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 2`"/>
     <DemoI18nControl></DemoI18nControl>
     <DemoI18n></DemoI18n>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/import/csv.vue b/src/pages/demo/plugins/import/csv.vue
index f3e9877a..73eea01b 100644
--- a/src/pages/demo/plugins/import/csv.vue
+++ b/src/pages/demo/plugins/import/csv.vue
@@ -1,25 +1,21 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="导入 csv"
-      url="https://github.com/mholt/PapaParse">
-    </PageHeader>
-    <div class="dd-mb">
+  <d2-container>
+    <d2-demo-page-header slot="header" title="导入 csv"/>
+    <div class="d2-mb">
       <el-button @click="download">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"/>
         下载演示 .csv 表格
       </el-button>
     </div>
-    <div class="dd-mb">
+    <div class="d2-mb">
       <el-upload :before-upload="handleUpload" action="default">
         <el-button type="success">
-          <Icon name="file-o"></Icon>
+          <d2-icon name="file-o"/>
           选择要导入的 .csv 表格
         </el-button>
       </el-upload>
     </div>
-    <el-table v-bind="table" class="dd-mb">
+    <el-table v-bind="table" class="d2-mb">
       <el-table-column
         v-for="(item, index) in table.columns"
         :key="index"
@@ -27,8 +23,8 @@
         :label="item.label">
       </el-table-column>
     </el-table>
-    <Markdown url="/static/md/插件 - 导入.md"></Markdown>
-  </Container>
+    <d2-markdown url="/static/md/插件 - 导入.md"/>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/import/xlsx.vue b/src/pages/demo/plugins/import/xlsx.vue
index a327554b..bfb18bda 100644
--- a/src/pages/demo/plugins/import/xlsx.vue
+++ b/src/pages/demo/plugins/import/xlsx.vue
@@ -1,25 +1,21 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="导入 xlsx"
-      url="https://github.com/SheetJS/js-xlsx">
-    </PageHeader>
-    <div class="dd-mb">
+  <d2-container>
+    <d2-demo-page-header slot="header" title="导入 xlsx"/>
+    <div class="d2-mb">
       <el-button @click="download">
-        <Icon name="download"></Icon>
+        <d2-icon name="download"/>
         下载演示 .xlsx 表格
       </el-button>
     </div>
-    <div class="dd-mb">
+    <div class="d2-mb">
       <el-upload :before-upload="handleUpload" action="default">
         <el-button type="success">
-          <Icon name="file-o"></Icon>
+          <d2-icon name="file-o"/>
           选择要导入的 .xlsx 表格
         </el-button>
       </el-upload>
     </div>
-    <el-table v-bind="table" class="dd-mb">
+    <el-table v-bind="table" class="d2-mb">
       <el-table-column
         v-for="(item, index) in table.columns"
         :key="index"
@@ -27,8 +23,8 @@
         :label="item.label">
       </el-table-column>
     </el-table>
-    <Markdown url="/static/md/插件 - 导入.md"></Markdown>
-  </Container>
+    <d2-markdown url="/static/md/插件 - 导入.md"/>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/index/index.vue b/src/pages/demo/plugins/index/index.vue
index 76757b45..703f4694 100644
--- a/src/pages/demo/plugins/index/index.vue
+++ b/src/pages/demo/plugins/index/index.vue
@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
-    <PageIndexArticle
+  <d2-container type="full">
+    <d2-demo-page-cover
       title="插件演示"
       sub-title="D2Admin 集成了许多实用插件">
       <img src="@/assets/image/logo/w500-plugin.png">
-    </PageIndexArticle>
-  </Container>
+    </d2-demo-page-cover>
+  </d2-container>
 </template>
\ No newline at end of file
diff --git a/src/pages/demo/plugins/js-cookie/index.vue b/src/pages/demo/plugins/js-cookie/index.vue
index dc578974..840f969d 100644
--- a/src/pages/demo/plugins/js-cookie/index.vue
+++ b/src/pages/demo/plugins/js-cookie/index.vue
@@ -1,12 +1,8 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="基本示例"
-        url="https://github.com/js-cookie/js-cookie">
-      </PageHeader>
-      <p class="dd-mt-0">基本读写删</p>
+  <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>
@@ -17,7 +13,7 @@
       <p>获取所有可以获得的数据</p>
       <el-button type="info" @click="getAll">getAll</el-button>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/mock/ajax.vue b/src/pages/demo/plugins/mock/ajax.vue
index 22396a25..c1837864 100644
--- a/src/pages/demo/plugins/mock/ajax.vue
+++ b/src/pages/demo/plugins/mock/ajax.vue
@@ -1,10 +1,10 @@
 <template>
-  <Container type="ghost">
+  <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="dd-mb">
+      <el-table v-bind="table" style="width: 100%" class="d2-mb">
         <el-table-column
           v-for="(item, index) in table.columns"
           :key="index"
@@ -12,9 +12,9 @@
           :label="item.label">
         </el-table-column>
       </el-table>
-      <Markdown url="/static/md/插件 - mock拦截ajax.md"></Markdown>
+      <d2-markdown url="/static/md/插件 - mock拦截ajax.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/mock/components/MockDemoCard.vue b/src/pages/demo/plugins/mock/components/MockDemoCard.vue
index fc15dc36..585df91c 100644
--- a/src/pages/demo/plugins/mock/components/MockDemoCard.vue
+++ b/src/pages/demo/plugins/mock/components/MockDemoCard.vue
@@ -1,20 +1,20 @@
 <template>
-  <el-card class="dd-mb">
-    <div slot="header" class="dd-clearfix">
+  <el-card 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">
-        <el-button type="primary" size="mini" @click="$emit('reload')" class="dd-fr">刷新</el-button>
+        <el-button type="primary" size="mini" @click="$emit('reload')" class="d2-fr">刷新</el-button>
       </el-tooltip>
     </div>
     <el-row :gutter="10">
       <el-col :span="12">
         <div class="col col-l">
-          <Highlight :code="code"></Highlight>
+          <d2-highlight :code="code"/>
         </div>
       </el-col>
       <el-col :span="12">
         <div class="col col-r">
-          <Highlight :code="mock"></Highlight>
+          <d2-highlight :code="mock"/>
         </div>
       </el-col>
     </el-row>
diff --git a/src/pages/demo/plugins/mock/dpd.vue b/src/pages/demo/plugins/mock/dpd.vue
index 13625bbc..85a110f7 100644
--- a/src/pages/demo/plugins/mock/dpd.vue
+++ b/src/pages/demo/plugins/mock/dpd.vue
@@ -1,12 +1,8 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="数据占位符"
-        url="https://github.com/nuysoft/Mock">
-      </PageHeader>
-      <Markdown url="/static/md/插件 - mock演示页面介绍.md"></Markdown>
+  <d2-container type="ghost">
+    <el-card class="d2-mb">
+      <d2-demo-page-header slot="header" title="数据占位符"/>
+      <d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
     </el-card>
     <MockDemoCard
       v-for="(item, index) in settingDPD"
@@ -16,7 +12,7 @@
       :mock="mockResult[index]"
       @reload="doMock(index)">
     </MockDemoCard>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/mock/dtd.vue b/src/pages/demo/plugins/mock/dtd.vue
index e12b1598..79e7a8f8 100644
--- a/src/pages/demo/plugins/mock/dtd.vue
+++ b/src/pages/demo/plugins/mock/dtd.vue
@@ -1,12 +1,8 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        slot="header"
-        title="数据模板"
-        url="https://github.com/nuysoft/Mock">
-      </PageHeader>
-      <Markdown url="/static/md/插件 - mock演示页面介绍.md"></Markdown>
+  <d2-container type="ghost">
+    <el-card class="d2-mb">
+      <d2-demo-page-header slot="header" title="数据模板"/>
+      <d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
     </el-card>
     <MockDemoCard
       v-for="(item, index) in settingDTD"
@@ -28,7 +24,7 @@
       :mock="regexp.mocked"
       @reload="regexpMock()">
     </MockDemoCard>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/pages/demo/plugins/timeago/index.vue b/src/pages/demo/plugins/timeago/index.vue
index 3499f369..cad12708 100644
--- a/src/pages/demo/plugins/timeago/index.vue
+++ b/src/pages/demo/plugins/timeago/index.vue
@@ -1,19 +1,16 @@
 <template>
-  <Container type="ghost">
-    <el-card class="dd-mb">
-      <PageHeader
-        title="基本示例"
-        url="https://github.com/hustcc/timeago.js">
-      </PageHeader>
+  <d2-container type="ghost">
+    <el-card class="d2-mb">
+      <d2-demo-page-header title="基本示例"/>
     </el-card>
-    <el-card class="dd-mb">
-      <div class="dd-text-center">
+    <el-card 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="dd-mb">
-      <div class="dd-text-center">
+    <el-card class="d2-mb">
+      <div class="d2-text-center">
         <h1 style="font-size: 30px;">{{dateTimeRangeAgo}}</h1>
         <el-date-picker
           v-model="dateTimeRange"
@@ -25,9 +22,9 @@
       </div>
     </el-card>
     <el-card>
-      <Markdown url="/static/md/插件 - timeago.md"></Markdown>
+      <d2-markdown url="/static/md/插件 - timeago.md"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>
diff --git a/src/router/index.js b/src/router/index.js
index 5c309787..2b581011 100755
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,7 +9,7 @@ const routes = [
   {
     path: '/',
     redirect: { name: 'index' },
-    component: () => import('@/components/core/MainLayout/index.vue'),
+    component: () => import('@/components/core/d2-layout-main/index.vue'),
     children: [
       {
         path: 'index',
@@ -24,7 +24,7 @@ const routes = [
     name: 'demo-components',
     meta: { requiresAuth: true },
     redirect: { name: 'demo-components-index' },
-    component: () => import('@/components/core/MainLayout/index.vue'),
+    component: () => import('@/components/core/d2-layout-main/index.vue'),
     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') },
@@ -48,7 +48,7 @@ const routes = [
     name: 'demo-plugins',
     meta: { requiresAuth: true },
     redirect: { name: 'demo-plugins-index' },
-    component: () => import('@/components/core/MainLayout/index.vue'),
+    component: () => import('@/components/core/d2-layout-main/index.vue'),
     children: (pre => [
       { path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue') },
       { path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue') },
@@ -71,7 +71,7 @@ const routes = [
     name: 'demo-chart',
     meta: { requiresAuth: true },
     redirect: { name: 'demo-chart-index' },
-    component: () => import('@/components/core/MainLayout/index.vue'),
+    component: () => import('@/components/core/d2-layout-main/index.vue'),
     children: (pre => [
       { path: 'all', name: `${pre}all`, component: () => import('@/pages/demo/chart/all/index.vue') },
       { path: 'demo/areaBase', name: `${pre}demo-areaBase`, component: () => import('@/pages/demo/chart/demo/areaBase.vue') },
@@ -91,7 +91,7 @@ const routes = [
     name: 'demo-business',
     meta: { requiresAuth: true },
     redirect: { name: 'demo-business-index' },
-    component: () => import('@/components/core/MainLayout/index.vue'),
+    component: () => import('@/components/core/d2-layout-main/index.vue'),
     children: (pre => [
       { path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/business/index/index.vue') }
     ])('demo-business-')
diff --git a/src/router/invisible/index.js b/src/router/invisible/index.js
deleted file mode 100644
index 5025949a..00000000
--- a/src/router/invisible/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-export default [
-  // 首页
-  {
-    path: '/',
-    component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-    redirect: {
-      name: 'index'
-    },
-    children: [
-      {
-        path: 'index',
-        name: 'index',
-        meta: {
-          requiresAuth: true
-        },
-        component: resolve => { require(['@/pages/core/index/index.vue'], resolve) }
-      }
-    ]
-  },
-  // 登陆
-  {
-    path: '/login',
-    name: 'login',
-    component: resolve => { require(['@/pages/core/login/index.vue'], resolve) }
-  }
-]
diff --git a/src/router/menu/_business.js b/src/router/menu/_business.js
deleted file mode 100644
index dc68c9fa..00000000
--- a/src/router/menu/_business.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// [业务演示] 菜单
-export const menu = {
-  title: '示例界面',
-  path: '/demo/business',
-  name: 'demo-business',
-  meta: {
-    requiresAuth: true
-  },
-  component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-  redirect: {
-    name: 'demo-business-index'
-  },
-  children: [
-    // 首页
-    {
-      path: 'index',
-      name: 'demo-business-index',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/business/index/index.vue'], resolve) }
-    },
-    // 用户中心
-    {
-      title: '用户中心',
-      icon: 'user',
-      children: [
-        {
-          title: '个人中心首页',
-          icon: 'file-o',
-          path: 'user-center/home',
-          name: 'demo-business-user-center-home',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/business/user-center/home/index.vue'], resolve) }
-        }
-      ]
-    }
-  ]
-}
-
-// [业务演示] 路由设置
-export const router = {
-  ...menu,
-  children: [].concat(...menu.children.map(e => e.children || e))
-}
diff --git a/src/router/menu/_chart.js b/src/router/menu/_chart.js
deleted file mode 100644
index b4569f74..00000000
--- a/src/router/menu/_chart.js
+++ /dev/null
@@ -1,81 +0,0 @@
-// 工具 图表演示页面 路由生成
-const maker = (title, name) => {
-  return {
-    title: title,
-    icon: 'file-o',
-    path: `demo/${name}`,
-    name: `demo-chart-demo-${name}`,
-    meta: {
-      requiresAuth: true
-    },
-    component: resolve => { require([`@/pages/demo/chart/demo/${name}.vue`], resolve) }
-  }
-}
-
-// [图表] 菜单
-export const menu = {
-  title: '图表',
-  path: '/demo/chart',
-  name: 'demo-chart',
-  meta: {
-    requiresAuth: true
-  },
-  component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-  redirect: {
-    name: 'demo-chart-index'
-  },
-  children: [
-    // 首页
-    {
-      path: 'index',
-      name: 'demo-chart-index',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/chart/index/index.vue'], resolve) }
-    },
-    // 所有
-    {
-      title: '所有',
-      icon: 'th',
-      path: 'all',
-      name: 'demo-chart-all',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/chart/all/index.vue'], resolve) }
-    },
-    // 动态尺寸
-    {
-      title: '动态尺寸',
-      icon: 'refresh',
-      path: 'dynamicSize',
-      name: 'demo-chart-dynamicSize',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/chart/dynamicSize/index.vue'], resolve) }
-    },
-    // 单独演示
-    {
-      title: '单独演示',
-      icon: 'bar-chart',
-      children: [
-        maker('面积图', 'areaBase'),
-        maker('条形图', 'barBase'),
-        maker('柱形图', 'columnBase'),
-        maker('折线图', 'lineBase'),
-        maker('阶梯折线图', 'lineStep'),
-        maker('南丁格尔玫瑰图', 'nightingaleRoseBase'),
-        maker('饼图', 'pieBase'),
-        maker('雷达图', 'radarBase')
-      ]
-    }
-  ]
-}
-
-// [图表] 路由设置
-export const router = {
-  ...menu,
-  children: [].concat(...menu.children.map(e => e.children || e))
-}
diff --git a/src/router/menu/_components.js b/src/router/menu/_components.js
deleted file mode 100644
index 650ef860..00000000
--- a/src/router/menu/_components.js
+++ /dev/null
@@ -1,212 +0,0 @@
-// [组件] 菜单
-export const menu = {
-  title: '组件',
-  path: '/demo/components',
-  name: 'demo-components',
-  meta: {
-    requiresAuth: true
-  },
-  component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-  redirect: {
-    name: 'demo-components-index'
-  },
-  children: [
-    // 首页
-    {
-      path: 'index',
-      name: 'demo-components-index',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/components/index/index.vue'], resolve) }
-    },
-    // 页面容器
-    {
-      title: '页面容器',
-      icon: 'window-restore',
-      children: [
-        {
-          title: '文档',
-          icon: 'file-o',
-          path: 'container',
-          name: 'demo-components-container',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/container/index.vue'], resolve) }
-        },
-        {
-          title: '卡片',
-          icon: 'file-o',
-          path: 'container/normal',
-          name: 'demo-components-container-normal',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/container/normal.vue'], resolve) }
-        },
-        {
-          title: '隐形',
-          icon: 'file-o',
-          path: 'container/ghost',
-          name: 'demo-components-container-ghost',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/container/ghost.vue'], resolve) }
-        },
-        {
-          title: '撑满',
-          icon: 'file-o',
-          path: 'container/full',
-          name: 'demo-components-container-full',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/container/full.vue'], resolve) }
-        }
-      ]
-    },
-    // 编辑器
-    {
-      title: '编辑器',
-      icon: 'font',
-      children: [
-        {
-          title: '富文本',
-          icon: 'file-o',
-          path: 'editor/quill',
-          name: 'demo-components-editor-quill',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/editor/quill/demo.vue'], resolve) }
-        },
-        {
-          title: 'markdown',
-          icon: 'file-o',
-          path: 'editor/simpleMDE',
-          name: 'demo-components-editor-simpleMDE',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/editor/simpleMDE/demo.vue'], resolve) }
-        }
-      ]
-    },
-    // 图标
-    {
-      title: '图标',
-      icon: 'font-awesome',
-      children: [
-        {
-          title: 'FontAwesome',
-          icon: 'file-o',
-          path: 'icon/list',
-          name: 'demo-components-icon-list',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/icon/list.vue'], resolve) }
-        },
-        {
-          title: '图标组件',
-          icon: 'file-o',
-          path: 'icon/icon',
-          name: 'demo-components-icon-icon',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/icon/icon.vue'], resolve) }
-        },
-        {
-          title: '图标组件 SVG',
-          icon: 'file-o',
-          path: 'icon/svg',
-          name: 'demo-components-icon-svg',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/icon/svg.vue'], resolve) }
-        },
-        {
-          title: '图标选择器',
-          icon: 'file-o',
-          path: 'icon/select',
-          name: 'demo-components-icon-select',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/icon/select.vue'], resolve) }
-        }
-      ]
-    },
-    // markdown 解析库
-    {
-      title: 'markdown解析',
-      icon: 'font',
-      children: [
-        {
-          title: '效果演示',
-          icon: 'file-o',
-          path: 'marked/demo',
-          name: 'demo-components-markdown-demo',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/markdown/demo.vue'], resolve) }
-        },
-        {
-          title: '文档',
-          icon: 'file-o',
-          path: 'marked/doc',
-          name: 'demo-components-markdown-doc',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/markdown/doc.vue'], resolve) }
-        }
-      ]
-    },
-    // 数字动画
-    {
-      title: '数字动画',
-      icon: 'magic',
-      children: [
-        {
-          title: '基本示例',
-          icon: 'file-o',
-          path: 'countup/demo',
-          name: 'demo-components-countup-demo',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/countup/demo.vue'], resolve) }
-        }
-      ]
-    },
-    // highlight
-    {
-      title: '代码高亮',
-      icon: 'code',
-      children: [
-        {
-          title: '基本示例',
-          icon: 'file-o',
-          path: 'highlight/demo',
-          name: 'demo-plugins-highlight-demo',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/components/highlight/demo.vue'], resolve) }
-        }
-      ]
-    }
-  ]
-}
-
-// [组件] 路由设置
-export const router = {
-  ...menu,
-  children: [].concat(...menu.children.map(e => e.children || e))
-}
diff --git a/src/router/menu/_plugin.js b/src/router/menu/_plugin.js
deleted file mode 100644
index 55001f06..00000000
--- a/src/router/menu/_plugin.js
+++ /dev/null
@@ -1,246 +0,0 @@
-// [插件] 菜单
-export const menu = {
-  title: '插件',
-  path: '/demo/plugins',
-  name: 'demo-plugins',
-  meta: {
-    requiresAuth: true
-  },
-  component: resolve => { require(['@/components/core/MainLayout/index.vue'], resolve) },
-  redirect: {
-    name: 'demo-plugins-index'
-  },
-  children: [
-    // 首页
-    {
-      path: 'index',
-      name: 'demo-plugins-index',
-      meta: {
-        requiresAuth: true
-      },
-      component: resolve => { require(['@/pages/demo/plugins/index/index.vue'], resolve) }
-    },
-    // mock
-    {
-      title: '模拟数据',
-      icon: 'globe',
-      children: [
-        {
-          title: '数据模板',
-          icon: 'file-o',
-          path: 'mock/demoDTD',
-          name: 'demo-plugins-mock-demoDTD',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/mock/demoDTD.vue'], resolve) }
-        },
-        {
-          title: '数据占位符',
-          icon: 'file-o',
-          path: 'mock/demoDPD',
-          name: 'demo-plugins-mock-demoDPD',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/mock/demoDPD.vue'], resolve) }
-        },
-        {
-          title: '拦截Ajax请求',
-          icon: 'file-o',
-          path: 'mock/ajax',
-          name: 'demo-plugins-mock-ajax',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/mock/ajax.vue'], resolve) }
-        }
-      ]
-    },
-    // 布局
-    {
-      title: '布局',
-      icon: 'object-ungroup',
-      children: [
-        {
-          title: '可拖动网格布局',
-          icon: 'file-o',
-          path: 'layout/grid',
-          name: 'demo-plugins-layout-grid',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/layout/grid.vue'], resolve) }
-        },
-        {
-          title: '可调布局',
-          icon: 'file-o',
-          path: 'layout/splitpane',
-          name: 'demo-plugins-layout-splitpane',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/layout/splitpane.vue'], resolve) }
-        }
-      ]
-    },
-    // 多国语
-    {
-      title: '多国语',
-      icon: 'book',
-      children: [
-        {
-          title: '演示页面 1',
-          icon: 'file-o',
-          path: 'vue-i18n/demo-1',
-          name: 'demo-plugins-vue-i18n-demo-1',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/vue-i18n/demo-1.vue'], resolve) }
-        },
-        {
-          title: '演示页面 2',
-          icon: 'file-o',
-          path: 'vue-i18n/demo-2',
-          name: 'demo-plugins-vue-i18n-demo-2',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/vue-i18n/demo-2.vue'], resolve) }
-        },
-        {
-          title: '使用方法',
-          icon: 'file-o',
-          path: 'vue-i18n/doc',
-          name: 'demo-plugins-vue-i18n-doc',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/vue-i18n/doc.vue'], resolve) }
-        }
-      ]
-    },
-    // 导入和导出
-    {
-      title: '导入和导出',
-      icon: 'download',
-      children: [
-        {
-          title: '导入csv文件',
-          icon: 'download',
-          path: 'import/csv',
-          name: 'demo-plugins-import-csv',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/import/csv.vue'], resolve) }
-        },
-        {
-          title: '导入xlsx文件',
-          icon: 'download',
-          path: 'import/xlsx',
-          name: 'demo-plugins-import-xlsx',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/import/xlsx.vue'], resolve) }
-        },
-        {
-          title: '导出表格',
-          icon: 'cloud-download',
-          path: 'export/table',
-          name: 'demo-plugins-export-table',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/export/table.vue'], resolve) }
-        },
-        {
-          title: '导出文本',
-          icon: 'cloud-download',
-          path: 'export/txt',
-          name: 'demo-plugins-export-txt',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/export/txt.vue'], resolve) }
-        }
-      ]
-    },
-    // clipboard-polyfill
-    {
-      title: '剪贴板',
-      icon: 'clipboard',
-      children: [
-        {
-          title: '基本示例',
-          icon: 'file-o',
-          path: 'clipboard-polyfill/demo',
-          name: 'demo-plugins-clipboard-polyfill-demo',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/clipboard-polyfill/demo.vue'], resolve) }
-        }
-      ]
-    },
-    // js-cookie
-    {
-      title: 'Cookie',
-      icon: 'hdd-o',
-      children: [
-        {
-          title: '基本示例',
-          icon: 'file-o',
-          path: 'js-cookie/demo',
-          name: 'demo-plugins-js-cookie-demo',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/js-cookie/demo.vue'], resolve) }
-        }
-      ]
-    },
-    // 时间计算
-    {
-      title: '时间计算',
-      icon: 'clock-o',
-      children: [
-        {
-          title: '基本示例',
-          icon: 'file-o',
-          path: 'timeago/demo',
-          name: 'demo-plugins-timeago-demo',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/timeago/demo.vue'], resolve) }
-        }
-      ]
-    },
-    // 多环境发布
-    {
-      title: '多环境发布',
-      icon: 'paper-plane',
-      children: [
-        {
-          title: '检验环境',
-          icon: 'file-o',
-          path: 'build',
-          name: 'demo-plugins-build',
-          meta: {
-            requiresAuth: true
-          },
-          component: resolve => { require(['@/pages/demo/plugins/build/index.vue'], resolve) }
-        }
-      ]
-    }
-  ]
-}
-
-// [插件] 路由设置
-export const router = {
-  ...menu,
-  children: [].concat(...menu.children.map(e => e.children || e))
-}
diff --git a/src/router/menu/index.js b/src/router/menu/index.js
deleted file mode 100644
index e29ecf5e..00000000
--- a/src/router/menu/index.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as business from './_business'
-import * as chart from './_chart'
-import * as plugin from './_plugin'
-import * as components from './_components'
-
-// 菜单 这里的顺序决定了在顶栏显示的顺序
-export const menu = [
-  plugin.menu,
-  components.menu,
-  chart.menu,
-  business.menu
-]
-
-// 路由
-export const router = [
-  business.router,
-  chart.router,
-  plugin.router,
-  components.router
-]
diff --git a/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id b/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id
new file mode 100644
index 00000000..03df04ce
--- /dev/null
+++ b/static/image/theme-preview/d2admin@2x.png.REMOVED.git-id
@@ -0,0 +1 @@
+74d02da8079b497b2c221e237eda7a63594b3d85
\ No newline at end of file
diff --git a/static/image/theme-preview/star@2x.png.REMOVED.git-id b/static/image/theme-preview/star@2x.png.REMOVED.git-id
new file mode 100644
index 00000000..e6110816
--- /dev/null
+++ b/static/image/theme-preview/star@2x.png.REMOVED.git-id
@@ -0,0 +1 @@
+a2ed3f2203f8040f54c623f3b0d07ee16277d514
\ No newline at end of file
diff --git a/static/md/组件 - markdown - 文档.md b/static/md/组件 - markdown - 文档.md
index 5f0439e3..31a9a711 100644
--- a/static/md/组件 - markdown - 文档.md	
+++ b/static/md/组件 - markdown - 文档.md	
@@ -12,7 +12,7 @@
 加载一个.md文件
 
 ```
-<markdown url="/static/md/xxxx.md"></markdown>
+<d2-markdown url="/static/md/xxxx.md"/>
 ```
 
 加载资源
@@ -24,7 +24,7 @@ const md = `# Header
 
 text`
 
-<markdown :md="md"></markdown>
+<d2-markdown :md="md"/>
 ```
 
 ## 百度网盘分享链接优化
diff --git a/static/md/组件 - 代码高亮.md b/static/md/组件 - 代码高亮.md
index ac4b0a23..2ababbb3 100644
--- a/static/md/组件 - 代码高亮.md	
+++ b/static/md/组件 - 代码高亮.md	
@@ -7,7 +7,7 @@
 ## 示例
 
 ```
-<Highlight code="alert('Hello')"></Highlight>
+<d2-highlight code="alert('Hello')"/>
 ```
 
 > 本框架只是提供代码高亮的简单实现，如需实现更高级的设置请修改组件代码
\ No newline at end of file
diff --git a/static/md/组件 - 图标组件 - svg.md b/static/md/组件 - 图标组件 - svg.md
index 2c6acab6..e9dd1a34 100644
--- a/static/md/组件 - 图标组件 - svg.md	
+++ b/static/md/组件 - 图标组件 - svg.md	
@@ -11,7 +11,7 @@
 然后使用组件
 
 ```
-<IconSvg name="刚才的svg文件名"></IconSvg>
+<d2-icon-svg name="刚才的svg文件名"/>
 ```
 
 ## 获取已经注册的所有图标
diff --git a/static/md/组件 - 图标组件.md b/static/md/组件 - 图标组件.md
index 48574e10..122c6418 100644
--- a/static/md/组件 - 图标组件.md	
+++ b/static/md/组件 - 图标组件.md	
@@ -10,22 +10,22 @@
 
 ```
 // 这样用没有毛病 但是也没什么用
-<Icon></Icon>
+<d2-icon/>
 
 // 指定图标名称
-<Icon name="github"></Icon>
+<d2-icon name="github"/>
 
 // 设置行内样式
-<Icon name="github" style="font-size: 100px;"></Icon>
+<d2-icon name="github" style="font-size: 100px;"/>
 
 // 设置 class
-<Icon name="github" class="icon-class-demo"></Icon>
+<d2-icon name="github" class="icon-class-demo"/>
 ```
 
 这个组件只是简化了写法而已
 
 ```
-<Icon name="github"></Icon>
+<d2-icon name="github"/>
 // 等同于
 <i class="fa fa-github" aria-hidden="true"></i>
 ```
diff --git a/static/md/组件 - 数字动画.md b/static/md/组件 - 数字动画.md
index 43ac1c9b..44c1797b 100644
--- a/static/md/组件 - 数字动画.md	
+++ b/static/md/组件 - 数字动画.md	
@@ -13,13 +13,13 @@
 
 ```
 // 基本使用方法
-<CountUp :end="100"></CountUp>
+<d2-count-up :end="100"/>
 
 // 设置始末值
-<CountUp :start="14" :end="100"></CountUp>
+<d2-count-up :start="14" :end="100"/>
 
 // 设置动画时间
-<CountUp :end="100" :decimals="2"></CountUp>
+<d2-count-up :end="100" :decimals="2"/>
 ```
 
 组件会在页面上渲染 `<span>` 标签
diff --git a/static/md/组件 - 页面容器 - 基础.md b/static/md/组件 - 页面容器 - 基础.md
index 487b666b..9cd9c4c8 100644
--- a/static/md/组件 - 页面容器 - 基础.md	
+++ b/static/md/组件 - 页面容器 - 基础.md	
@@ -3,16 +3,16 @@
 高度根据内容适应
 
 ```
-<Container>
+<d2-container>
   主体内容
-</Container>
+</d2-container>
 ```
 
 使用 `slot`
 
 ```
-<Container>
+<d2-container>
   <template slot="header">我是插入到 header 中的内容</template>
   主体内容
-</Container>
+</d2-container>
 ```
\ No newline at end of file
diff --git a/static/md/组件 - 页面容器 - 撑满.md b/static/md/组件 - 页面容器 - 撑满.md
index 8d183f44..df8b36f4 100644
--- a/static/md/组件 - 页面容器 - 撑满.md	
+++ b/static/md/组件 - 页面容器 - 撑满.md	
@@ -6,7 +6,7 @@
 
 ```
 <template>
-  <Container type="card-full">
+  <d2-container type="card-full">
     <template slot="header">
       可选的 header 内容 ...
     </template>
@@ -14,7 +14,7 @@
     <template slot="footer">
       可选的 footer 内容 ...
     </template>
-  </Container>
+  </d2-container>
 </template>
 ```
 
diff --git a/static/md/组件 - 页面容器 - 隐形.md b/static/md/组件 - 页面容器 - 隐形.md
index b35618ac..9a5ab565 100644
--- a/static/md/组件 - 页面容器 - 隐形.md	
+++ b/static/md/组件 - 页面容器 - 隐形.md	
@@ -3,7 +3,7 @@
 不显示任何背景色和边框
 
 ```
-<Container type="ghost">
+<d2-container type="ghost">
   主体内容
-</Container>
+</d2-container>
 ```
\ No newline at end of file
diff --git a/static/md/组件 - 页面容器.md b/static/md/组件 - 页面容器.md
index e4c009b5..b3a6b5e8 100644
--- a/static/md/组件 - 页面容器.md	
+++ b/static/md/组件 - 页面容器.md	
@@ -15,12 +15,12 @@
 
 ```
 <template>
-  <Container>
+  <d2-container>
     <template slot="header">
       可选的 header 内容 ...
     </template>
     主体内容 ...
-  </Container>
+  </d2-container>
 </template>
 
 <script>