Merge pull request #8 from FairyEver/dev

components rename

Former-commit-id: d86bb9deb519d458cf53cf6db02129bd150d3f9f
Former-commit-id: 81705560572d3ee80e6092cbd617d7b6353d56e0
Former-commit-id: 4c6cc9cae9ea7ffa30f2dbfc77b35733424d9cee

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]'
         }
       },
       {

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>
 ```

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>` 标签

docs/zh/components/highlight.md

@@ -9,7 +9,7 @@
 ## 示例
 
 ``` vue
-<Highlight code="alert('Hello')"></Highlight>
+<d2-highlight code="alert('Hello')"/>
 ```
 
 ::: tip

docs/zh/components/icon-svg.md

@@ -13,7 +13,7 @@
 然后使用组件
 
 ``` vue
-<IconSvg name="刚才的svg文件名"></IconSvg>
+<d2-icon-svg name="刚才的svg文件名"/>
 ```
 
 ## 获取已经注册的所有图标

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>
 ```

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"/>
 ```
 
 ## 百度网盘分享链接优化

docs/zh/guide/change-log.md

@@ -8,6 +8,9 @@
 
 * [ 修改 ] 顶栏和侧边栏菜单新的结构生成方式，新的方案使用 `数据` + `递归组件` 实现无限制多级菜单
 * [ 修改 ] 路由注册回归最简单的写法
+* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
+* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
+* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
 
 ## v1.0.0
 

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;
     }

src/assets/style/public.scss

@@ -2,7 +2,7 @@
 @import '~@/assets/style/unit/_size.scss';
 
 // 工具类名统一前缀
-$prefix: dd;
+$prefix: d2;
 
 // 禁止用户选中 鼠标变为手形
 %unable-select {

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
+  // [组件] d2-container-full
-  .dd-container-full {
+  .d2-container-full {
-    .dd-container-full__header {
+    .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;
-      }
+        &:hover {
-      .el-dropdown {
+          background-color: rgba(#FFF, .1);
-        .el-dropdown-link {
-          color: #FFF;
         }
       }
     }

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
+  // [组件] d2-container-full
-  .dd-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;

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 () {

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: {

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('d2-chart-line-base', () => import('@/components/charts/G2/components/Line/base.vue'))
-Vue.component('G2LineStep', resolve => { require(['@/components/charts/G2/components/Line/step.vue'], resolve) })
+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'))

src/components/core/MainLayout/components/HeaderMenu/index.vue

@@ -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>

src/components/core/MainLayout/components/HeaderRight/index.vue

@@ -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>

src/components/core/SimpleMDE/backup.vue

@@ -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>

src/components/core/d2-container-full/index.vue

@@ -1,19 +1,20 @@
 <template>
-  <div class="dd-container-full" :style="cardStyle">
+  <div class="d2-container-full" :style="cardStyle">
-    <div v-if="$slots.header" class="dd-container-full__header" ref="header">
+    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
-      <slot name="header"></slot>
+      <slot name="header"/>
     </div>
-    <div class="dd-container-full__body" :style="bodyStyle">
+    <div class="d2-container-full__body" :style="bodyStyle">
-      <slot></slot>
+      <slot/>
     </div>
-    <div v-if="$slots.footer" class="dd-container-full__footer" ref="footer">
+    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
-      <slot name="footer"></slot>
+      <slot name="footer"/>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  name: 'd2-container-full',
   props: {
     // 定位 上 右 下 左
     top: {

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">
+    <el-card v-if="type === 'card'" class="d2-mr d2-mb">
-      <slot v-if="$slots.header" name="header" slot="header"></slot>
+      <slot v-if="$slots.header" name="header" slot="header"/>
-      <slot></slot>
+      <slot/>
     </el-card>
     <!-- [ghost] 隐形的容器 -->
-    <div v-if="type === 'ghost'" class="dd-mr dd-mb">
+    <div v-if="type === 'ghost'" class="d2-mr d2-mb">
-      <slot name="header"></slot>
+      <slot name="header"/>
-      <slot></slot>
+      <slot/>
     </div>
     <!-- [container-full] 撑满 -->
-    <container-full v-if="type === 'full'" :right="20" :bottom="0">
+    <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.header" name="header" slot="header"/>
-      <slot></slot>
+      <slot/>
-      <slot v-if="$slots.footer" name="footer" slot="footer"></slot>
+      <slot v-if="$slots.footer" name="footer" slot="footer"/>
-    </container-full>
+    </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>

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,

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>

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">
+      <div class="header d2-clearfix d2-mb-10" v-if="clearable">
-        <el-button type="danger" icon="el-icon-delete" size="mini" class="dd-fr" @click="selectIcon()">清空</el-button>
+        <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: {

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}`
     }
   }
 }

src/components/core/d2-icon/index.vue

@@ -4,6 +4,7 @@
 
 <script>
 export default {
+  name: 'd2-icon',
   props: {
     name: {
       type: String,

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>

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">
+    <el-button class="d2-mr btn-text" type="text" @click="toggleFullScreen">
-      <Icon v-if="isFullScreen" name="compress"></Icon>
+      <d2-icon v-if="isFullScreen" name="compress"/>
-      <Icon v-else name="arrows-alt"></Icon>
+      <d2-icon v-else name="arrows-alt"/>
     </el-button>
   </el-tooltip>
 </template>

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>

src/components/core/d2-layout-main/components/-header-right/components/-user.vue

@@ -1,9 +1,9 @@
 <template>
-  <el-dropdown class="dd-mr">
+  <el-dropdown class="d2-mr">
-    <span class="el-dropdown-link">你好</span>
+    <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 @click.native="logOff"><d2-icon name="power-off"/> 注销</el-dropdown-item>
-      <el-dropdown-item><Icon name="user-circle-o"></Icon> 个人中心</el-dropdown-item>
+      <el-dropdown-item><d2-icon name="user-circle-o"/> 个人中心</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>

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>

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>

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,

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-layout-main-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-        <d2-submenu v-else :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'),
+    'd2-layout-main-menu-item': () => import('../-menu-item/index.vue'),
-    D2Submenu: () => import('../D2Submenu/index.vue')
+    'd2-layout-main-menu-sub': () => import('../-menu-sub/index.vue')
   },
   data () {
     return {

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-layout-main-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
-      <d2-submenu v-else :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>

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>

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/>
+      <d2-layout-main-menu-header/>
-      <HeaderRight/>
+      <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'),
+    'd2-layout-main-menu-side': () => import('./components/-menu-side'),
-    HeaderMenu: () => import('./components/HeaderMenu'),
+    'd2-layout-main-menu-header': () => import('./components/-menu-header'),
-    HeaderRight: () => import('./components/HeaderRight')
+    'd2-layout-main-header-right': () => import('./components/-header-right')
   },
   data () {
     return {

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,

src/components/core/d2-mde/index.vue

@@ -5,6 +5,7 @@
 <script>
 import SimpleMDE from 'simplemde'
 export default {
+  name: 'd2-mde',
   props: {
     // 值
     value: {

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,

src/components/core/register.js

@@ -1,11 +1,18 @@
 import Vue from 'vue'
 
-Vue.component('Container', resolve => { require(['@/components/core/Container'], resolve) })
+import { GridLayout, GridItem } from 'vue-grid-layout'
-Vue.component('CountUp', resolve => { require(['@/components/core/CountUp'], resolve) })
+import SplitPane from 'vue-splitpane'
-Vue.component('Highlight', resolve => { require(['@/components/core/Highlight'], resolve) })
+
-Vue.component('Icon', resolve => { require(['@/components/core/Icon'], resolve) })
+Vue.component('d2-grid-layout', GridLayout)
-Vue.component('IconSelect', resolve => { require(['@/components/core/IconSelect/index.vue'], resolve) })
+Vue.component('d2-grid-item', GridItem)
-Vue.component('IconSvg', resolve => { require(['@/components/core/IconSvg/index.vue'], resolve) })
+Vue.component('SplitPane', SplitPane)
-Vue.component('Markdown', resolve => { require(['@/components/core/Markdown'], resolve) })
+
-Vue.component('QuillEditor', resolve => { require(['@/components/core/QuillEditor'], resolve) })
+Vue.component('d2-container', () => import('@/components/core/d2-container'))
-Vue.component('SimpleMDE', resolve => { require(['@/components/core/SimpleMDE'], resolve) })
+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'))

src/components/demo/GithubLink/index.vue

@@ -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>
-

src/components/demo/GithubLink/lang.json

@@ -1,11 +0,0 @@
-{
-  "cn": {
-    "label": "在 Github 查看"
-  },
-  "en": {
-    "label": "View in Github"
-  },
-  "ja": {
-    "label": "調べでGithub"
-  }
-}

src/components/demo/GithubLinkButton/index.vue

@@ -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>

src/components/demo/PageHeader/index.vue

@@ -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>

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;"

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>

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('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
-Vue.component('GridItem', GridItem)
+Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))
-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) })

src/pages/core/index/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
-    <PageIndexArticle
+    <d2-demo-page-cover
       title="I AM D2ADMIN"
       sub-title="追求简约美感 & 上手即用的后台管理系统模板">
       <img src="@/assets/image/logo/w500.png">
-    </PageIndexArticle>
+    </d2-demo-page-cover>
-  </Container>
+  </d2-container>
 </template>

src/pages/demo/business/index/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
-    <PageIndexArticle
+    <d2-demo-page-cover
       title="示例业务页面"
       sub-title="如果用不到 建议删除相关代码">
       <img src="@/assets/image/logo/w500-business.png">
-    </PageIndexArticle>
+    </d2-demo-page-cover>
-  </Container>
+  </d2-container>
 </template>

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>

src/pages/demo/chart/all/components/ChartCardHeader.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     {{title}}
-    <span class="dd-fr">
+    <span class="d2-fr">
-      <Icon
+      <d2-icon
         class="chart-card-header-icon"
         :class="{active}"
         name="refresh"
         @click.native="handleRefresh">
-      </Icon>
+      </d2-icon>
     </span>
   </div>
 </template>

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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="<d2-chart-line-base/>"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="<d2-chart-line-step/>"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="<d2-chart-column-base/>"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="<d2-chart-bar-base/>"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="<d2-chart-pie-base/>"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="<d2-chart-nightingale-rose-base/>"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="<d2-chart-radar-base/>"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="<d2-chart-area-base/>"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+          <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: []
         }

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;

src/pages/demo/chart/demo/PieBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2PieBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2PieBase>
+      <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>

src/pages/demo/chart/demo/areaBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2AreaBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2AreaBase>
+      <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>

src/pages/demo/chart/demo/barBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2BarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2BarBase>
+      <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>

src/pages/demo/chart/demo/columnBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2ColumnBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2ColumnBase>
+      <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>

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>

src/pages/demo/chart/demo/lineBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2LineBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineBase>
+      <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>

src/pages/demo/chart/demo/lineStep.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2LineStep slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2LineStep>
+      <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>

src/pages/demo/chart/demo/nightingaleRoseBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2NightingaleRoseBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2NightingaleRoseBase>
+      <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>

src/pages/demo/chart/demo/radarBase.vue

@@ -1,12 +1,12 @@
 <template>
-  <Container type="ghost" :responsive="true">
+  <d2-container type="ghost" :responsive="true">
-    <ChartDemoCard class="dd-mb" v-bind="card" @resize="$refs.chart.resize()">
+    <ChartDemoCard class="d2-mb" v-bind="card" @resize="$refs.chart.resize()">
-      <G2RadarBase slot-scope="{data}" ref="chart" :data="data" v-bind="chart"></G2RadarBase>
+      <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>

src/pages/demo/chart/dynamicSize/components/ChartCardHeader.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
     {{title}}
-    <span class="dd-fr">
+    <span class="d2-fr">
-      <Icon
+      <d2-icon
         class="chart-card-header-icon"
         :class="{active}"
         name="refresh"
         @click.native="handleRefresh">
-      </Icon>
+      </d2-icon>
     </span>
   </div>
 </template>

src/pages/demo/chart/dynamicSize/index.vue

@@ -1,64 +1,64 @@
 <template>
-  <Container type="ghost" :responsive="true" class="demo-chart-index">
+  <d2-container type="ghost" :responsive="true" class="demo-chart-index">
-    <GridLayout v-bind="layout" @layout-updated="layoutUpdatedHandler">
+    <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(0)" title="d2-chart-line-base"></ChartCardHeader>
-          <G2LineBase :ref="chart[0].refName" v-bind="chart[0]" @ready="isReady(0)"></G2LineBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(1)" title="d2-chart-line-step"></ChartCardHeader>
-          <G2LineStep :ref="chart[1].refName" v-bind="chart[1]" @ready="isReady(1)"></G2LineStep>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(2)" title="d2-chart-column-base"></ChartCardHeader>
-          <G2ColumnBase :ref="chart[2].refName" v-bind="chart[2]" @ready="isReady(2)"></G2ColumnBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(3)" title="d2-chart-bar-base"></ChartCardHeader>
-          <G2BarBase :ref="chart[3].refName" v-bind="chart[3]" @ready="isReady(3)"></G2BarBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(4)" title="d2-chart-pie-base"></ChartCardHeader>
-          <G2PieBase :ref="chart[4].refName" v-bind="chart[4]" @ready="isReady(4)"></G2PieBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(5)" title="d2-chart-nightingale-rose-base"></ChartCardHeader>
-          <G2NightingaleRoseBase :ref="chart[5].refName" v-bind="chart[5]" @ready="isReady(5)"></G2NightingaleRoseBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(6)" title="d2-chart-radar-base"></ChartCardHeader>
-          <G2RadarBase :ref="chart[6].refName" v-bind="chart[6]" @ready="isReady(6)"></G2RadarBase>
+          <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>
+          <ChartCardHeader slot="header" @refresh="handleRefreshData(7)" title="d2-chart-area-base"></ChartCardHeader>
-          <G2AreaBase :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></G2AreaBase>
+          <d2-chart-area-base :ref="chart[7].refName" v-bind="chart[7]" @ready="isReady(7)"></d2-chart-area-base>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
-    </GridLayout>
+    </d2-grid-layout>
-  </Container>
+  </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: []
         }

src/pages/demo/chart/index/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
-    <PageIndexArticle
+    <d2-demo-page-cover
       title="内置 G2 图表库"
       sub-title="如果用不到 建议删除相关代码和依赖">
       <img src="@/assets/image/logo/w500-chart.png">
-    </PageIndexArticle>
+    </d2-demo-page-cover>
-  </Container>
+  </d2-container>
 </template>

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>

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>

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>
+    <d2-markdown url="/static/md/组件 - 页面容器 - 基础.md"/>
-  </Container>
+  </d2-container>
 </template>

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
+      <d2-demo-page-header title="数字动画组件"/>
-        title="数字动画组件"
-        url="https://github.com/inorganik/countUp.js">
-      </PageHeader>
     </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>

src/pages/demo/components/editor-quill/index.vue

@@ -1,24 +1,19 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="基本示例"/>
-        slot="header"
+      <d2-quill
-        title="基本示例"
-        url="https://github.com/quilljs/quill">
-      </PageHeader>
-      <QuillEditor
         style="min-height: 200px;"
         v-model="value"
         @text-change="textChangeHandler"
         @selection-change="selectionChangeHandler"
-        @editor-change="editorChangeHandler">
+        @editor-change="editorChangeHandler"/>
-      </QuillEditor>
     </el-card>
     <el-card>
       <template slot="header">输出</template>
-      <Highlight :code="formated"></Highlight>
+      <d2-highlight :code="formated"/>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/components/editor-simpleMDE/index.vue

@@ -1,21 +1,16 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="基本示例"/>
-        slot="header"
+      <d2-mde
-        title="基本示例"
-        url="https://github.com/sparksuite/simplemde-markdown-editor">
-      </PageHeader>
-      <SimpleMDE
         v-model="text"
-        class="mde">
+        class="mde"/>
-      </SimpleMDE>
     </el-card>
     <el-card>
       <template slot="header">输出</template>
       <pre>{{text}}</pre>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/components/highlight/index.vue

@@ -1,39 +1,36 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header title="代码高亮组件"/>
-        title="代码高亮组件"
-        url="https://github.com/isagalaev/highlight.js">
-      </PageHeader>
     </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>

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: {

src/pages/demo/components/icon/icon.vue

@@ -1,20 +1,16 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="图标组件"/>
-        slot="header"
+      <d2-icon/>
-        title="图标组件"
+      <d2-icon name="github"/>
-        url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/Icon/index.vue">
+      <d2-icon name="github" style="font-size: 100px;"/>
-      </PageHeader>
+      <d2-icon name="github" class="icon-class-demo"/>
-      <Icon></Icon>
-      <Icon name="github"></Icon>
-      <Icon name="github" style="font-size: 100px;"></Icon>
-      <Icon name="github" class="icon-class-demo"></Icon>
     </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">

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">
+        <el-col v-for="(iconItem, iconIndex) in iconShow.icon" :key="iconIndex" :span="6" class="d2-p-10">
-          <IconCell :icon="iconItem"></IconCell>
+          <d2-iconCell :icon="iconItem"></d2-iconCell>
         </el-col>
       </el-row>
     </el-card>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/components/icon/select.vue

@@ -1,11 +1,7 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="图标选择器"/>
-        slot="header"
-        title="图标选择器"
-        url="https://github.com/FairyEver/d2admin-vue-element/blob/master/src/components/core/IconSelect/index.vue">
-      </PageHeader>
       <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>

src/pages/demo/components/icon/svg.vue

@@ -1,13 +1,10 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="SVG图标组件"/>
-        slot="header"
-        title="SVG图标组件">
-      </PageHeader>
       <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>

src/pages/demo/components/index/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
-    <PageIndexArticle
+    <d2-demo-page-cover
       title="内置组件"
       sub-title="D2Admin 为你提供了一些上手即用的组件">
       <img src="@/assets/image/logo/w500-component.png">
-    </PageIndexArticle>
+    </d2-demo-page-cover>
-  </Container>
+  </d2-container>
 </template>

src/pages/demo/components/layout/grid.vue

@@ -1,9 +1,9 @@
 <template>
-  <Container type="ghost" class="demo-plugins-vue-grid-layout-demo">
+  <d2-container type="ghost" class="demo-plugins-vue-grid-layout-demo">
-    <GridLayout
+    <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="d2-mb">拖拽卡片调整位置</div>
-            <div class="dd-mb">拖拽卡片右下角的手柄调整卡片大小</div>
+            <div class="d2-mb">拖拽卡片右下角的手柄调整卡片大小</div>
-            <div class="dd-mb">在控制台打印出数据变化</div>
+            <div class="d2-mb">在控制台打印出数据变化</div>
-            <GithubLinkButton
-              name="vue-grid-layout"
-              url="https://github.com/jbaysolutions/vue-grid-layout"
-              type="success">
-            </GithubLinkButton>
           </template>
         </el-card>
-      </GridItem>
+      </d2-grid-item>
-    </GridLayout>
+    </d2-grid-layout>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/components/layout/splitpane.vue

@@ -1,10 +1,6 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="基本示例"/>
-      slot="header"
-      title="基本示例"
-      url="https://github.com/PanJiaChen/vue-split-pane">
-    </PageHeader>
     <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>

src/pages/demo/components/markdown/index.vue

@@ -1,10 +1,6 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="效果演示"/>
-      slot="header"
+    <d2-markdown url="/static/md/组件 - markdown - 演示.md"/>
-      title="效果演示"
+  </d2-container>
-      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>
 </template>

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>

src/pages/demo/plugins/clipboard-polyfill/index.vue

@@ -1,13 +1,9 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="基本示例"/>
-      slot="header"
-      title="基本示例"
-      url="https://github.com/lgarron/clipboard-polyfill">
-    </PageHeader>
     <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>

src/pages/demo/plugins/export/table.vue

@@ -1,20 +1,17 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="导出表格"/>
-      slot="header"
+    <div class="d2-mb">
-      title="导出表格">
-    </PageHeader>
-    <div class="dd-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>
+    <d2-markdown url="/static/md/插件 - 导出.md"/>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/plugins/export/txt.vue

@@ -1,23 +1,20 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="导出文本"/>
-      slot="header"
-      title="导出文本">
-    </PageHeader>
     <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>
+    <d2-markdown url="/static/md/插件 - 导出.md"/>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

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>

src/pages/demo/plugins/i18n/demo1.vue

@@ -1,13 +1,9 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 1`"/>
-      slot="header"
-      :title="`${$t('pub.pageHeader.demo')} 1`"
-      url="http://kazupon.github.io/vue-i18n/en/">
-    </PageHeader>
     <DemoI18nControl></DemoI18nControl>
     <DemoI18n></DemoI18n>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/plugins/i18n/demo2.vue

@@ -1,13 +1,9 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" :title="`${$t('pub.pageHeader.demo')} 2`"/>
-      slot="header"
-      :title="`${$t('pub.pageHeader.demo')} 2`"
-      url="http://kazupon.github.io/vue-i18n/en/">
-    </PageHeader>
     <DemoI18nControl></DemoI18nControl>
     <DemoI18n></DemoI18n>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/plugins/import/csv.vue

@@ -1,25 +1,21 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="导入 csv"/>
-      slot="header"
+    <div class="d2-mb">
-      title="导入 csv"
-      url="https://github.com/mholt/PapaParse">
-    </PageHeader>
-    <div class="dd-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>
+    <d2-markdown url="/static/md/插件 - 导入.md"/>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/plugins/import/xlsx.vue

@@ -1,25 +1,21 @@
 <template>
-  <Container>
+  <d2-container>
-    <PageHeader
+    <d2-demo-page-header slot="header" title="导入 xlsx"/>
-      slot="header"
+    <div class="d2-mb">
-      title="导入 xlsx"
-      url="https://github.com/SheetJS/js-xlsx">
-    </PageHeader>
-    <div class="dd-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>
+    <d2-markdown url="/static/md/插件 - 导入.md"/>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/plugins/index/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <Container type="full">
+  <d2-container type="full">
-    <PageIndexArticle
+    <d2-demo-page-cover
       title="插件演示"
       sub-title="D2Admin 集成了许多实用插件">
       <img src="@/assets/image/logo/w500-plugin.png">
-    </PageIndexArticle>
+    </d2-demo-page-cover>
-  </Container>
+  </d2-container>
 </template>

src/pages/demo/plugins/js-cookie/index.vue

@@ -1,12 +1,8 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="基本示例"/>
-        slot="header"
+      <p class="d2-mt-0">基本读写删</p>
-        title="基本示例"
-        url="https://github.com/js-cookie/js-cookie">
-      </PageHeader>
-      <p class="dd-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>

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>

src/pages/demo/plugins/mock/components/MockDemoCard.vue

@@ -1,20 +1,20 @@
 <template>
-  <el-card class="dd-mb">
+  <el-card class="d2-mb">
-    <div slot="header" class="dd-clearfix">
+    <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>

src/pages/demo/plugins/mock/dpd.vue

@@ -1,12 +1,8 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="数据占位符"/>
-        slot="header"
+      <d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
-        title="数据占位符"
-        url="https://github.com/nuysoft/Mock">
-      </PageHeader>
-      <Markdown url="/static/md/插件 - mock演示页面介绍.md"></Markdown>
     </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>

src/pages/demo/plugins/mock/dtd.vue

@@ -1,12 +1,8 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header slot="header" title="数据模板"/>
-        slot="header"
+      <d2-markdown url="/static/md/插件 - mock演示页面介绍.md"/>
-        title="数据模板"
-        url="https://github.com/nuysoft/Mock">
-      </PageHeader>
-      <Markdown url="/static/md/插件 - mock演示页面介绍.md"></Markdown>
     </el-card>
     <MockDemoCard
       v-for="(item, index) in settingDTD"
@@ -28,7 +24,7 @@
       :mock="regexp.mocked"
       @reload="regexpMock()">
     </MockDemoCard>
-  </Container>
+  </d2-container>
 </template>
 
 <script>

src/pages/demo/plugins/timeago/index.vue

@@ -1,19 +1,16 @@
 <template>
-  <Container type="ghost">
+  <d2-container type="ghost">
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <PageHeader
+      <d2-demo-page-header title="基本示例"/>
-        title="基本示例"
-        url="https://github.com/hustcc/timeago.js">
-      </PageHeader>
     </el-card>
-    <el-card class="dd-mb">
+    <el-card class="d2-mb">
-      <div class="dd-text-center">
+      <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">
+    <el-card class="d2-mb">
-      <div class="dd-text-center">
+      <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>

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-')

src/router/invisible/index.js

@@ -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) }
-  }
-]