D2Admin 1.7

Former-commit-id: 3010ce31114fdc121006451c72f9e18306239fd2
2019-05-07 09:26:18 +08:00
parent 46bc6ca451
commit d07d15ed8c
952 changed files with 171232 additions and 0 deletions
@@ -0,0 +1,15 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app'
+}
+</script>
+
+<style lang="scss">
+@import '~@/assets/style/public-class.scss';
+</style>
@@ -0,0 +1,9 @@
+import request from '@/plugin/axios'
+
+export function ComponentsMarkdownBase (url) {
+  return request({
+    baseURL: process.env.BASE_URL,
+    url,
+    method: 'get'
+  })
+}
@@ -0,0 +1,18 @@
+import request from '@/plugin/axios'
+
+export function fetch () {
+  return request({
+    url: '/demo/business/issues/142/fetch',
+    method: 'get'
+  })
+}
+
+export function detail (id) {
+  return request({
+    url: '/demo/business/issues/142/detail',
+    method: 'get',
+    params: {
+      id
+    }
+  })
+}
@@ -0,0 +1,9 @@
+import request from '@/plugin/axios'
+
+export function BusinessTable1List (params) {
+  return request({
+    url: '/demo/business/table/1/fetch',
+    method: 'get',
+    params
+  })
+}
@@ -0,0 +1,8 @@
+import request from '@/plugin/axios'
+
+export function getInvalidUrl () {
+  return request({
+    url: '/invalid-url',
+    method: 'get'
+  })
+}
@@ -0,0 +1,8 @@
+import request from '@/plugin/axios'
+
+export function PluginMocksAjax () {
+  return request({
+    url: '/demo/plugins/mock/ajax',
+    method: 'get'
+  })
+}
@@ -0,0 +1,9 @@
+import request from '@/plugin/axios'
+
+export function AccountLogin (data) {
+  return request({
+    url: '/login',
+    method: 'post',
+    data
+  })
+}
@@ -0,0 +1,27 @@
+// 过渡动画 横向渐变
+.fade-transverse-leave-active,
+.fade-transverse-enter-active {
+  transition: all .5s;
+}
+.fade-transverse-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+.fade-transverse-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+// 过渡动画 缩放渐变
+.fade-scale-leave-active,
+.fade-scale-enter-active {
+  transition: all .5s;
+}
+.fade-scale-enter {
+  opacity: 0;
+  transform: scale(1.2);
+}
+.fade-scale-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
@@ -0,0 +1,12 @@
+// 优化显示
+html, body {
+  margin: 0px;
+  height: 100%;
+  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+  #app {
+    @extend %full;
+    a {
+      text-decoration: none;
+    }
+  }
+}
@@ -0,0 +1,19 @@
+// element 样式补丁
+.el-card {
+  &.is-always-shadow {
+    box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+  }
+  &.is-hover-shadow {
+    &:hover {
+      box-shadow: 0 0 8px 0 rgba(232,237,250,.6), 0 2px 4px 0 rgba(232,237,250,.5);
+    }
+  }
+}
+
+.el-menu--horizontal {
+  border-bottom: none !important;
+}
+
+.el-tabs__item:focus.is-active.is-focus:not(:active) {
+  box-shadow: none !important;
+}
@@ -0,0 +1,9 @@
+// markdown 样式补丁
+.markdown-body {
+  ul {
+    list-style: disc;
+  }
+  h1, h2 {
+    border-bottom: none;
+  }
+}
@@ -0,0 +1,8 @@
+#nprogress {
+  .bar {
+    background: $color-primary !important;
+  }
+  .peg {
+    box-shadow: 0 0 10px $color-primary, 0 0 5px $color-primary !important;
+  }
+}
@@ -0,0 +1,5 @@
+.tree-view-wrapper.tree-view-small {
+  .tree-view-item {
+    font-size: 10px;
+  }
+}
@@ -0,0 +1,9 @@
+// vue-splitpane 样式补丁
+.vue-grid-item {
+  &.vue-grid-placeholder {
+    border: 1px solid $color-border-1;
+    background-color: rgba(#FFF, .3);
+    opacity: 1;
+    border-radius: 4px;
+  }
+}
@@ -0,0 +1,5 @@
+// vue-splitpane 样式补丁
+.splitter-pane-resizer {
+  background-color: $color-border-1 !important;
+  opacity: 1 !important;
+}
@@ -0,0 +1,67 @@
+@import 'public';
+
+// 补丁 base
+@import '~@/assets/style/fixed/base.scss';
+// 补丁 element
+@import '~@/assets/style/fixed/element.scss';
+// 补丁 markdown
+@import '~@/assets/style/fixed/markdown.scss';
+// 补丁 n-progress
+@import '~@/assets/style/fixed/n-progress.scss';
+// 补丁 vue-splitpane
+@import '~@/assets/style/fixed/vue-splitpane.scss';
+// 补丁 vue-grid-layout
+@import '~@/assets/style/fixed/vue-grid-layout.scss';
+// 补丁 tree-view
+@import '~@/assets/style/fixed/tree-view.scss';
+
+// 动画
+@import '~@/assets/style/animate/vue-transition.scss';
+
+// 在这里写公用的class
+// 注意 这个文件里只写class
+// mixin等内容请在 public.scss 里书写
+
+// 文字相关
+.#{$prefix}-text-center {
+  text-align: center;
+}
+
+// 浮动相关
+.#{$prefix}-fl {
+  float: left;
+}
+.#{$prefix}-fr {
+  float: right;
+}
+
+// 边距相关
+$sizes: (0, 5, 10, 15, 20);
+
+@for $index from 1 to 6 {
+  .#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px !important; }
+
+  .#{$prefix}-p-#{nth($sizes, $index)} { padding: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pt-#{nth($sizes, $index)} { padding-top: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pr-#{nth($sizes, $index)} { padding-right: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pb-#{nth($sizes, $index)} { padding-bottom: #{nth($sizes, $index)}px !important; }
+  .#{$prefix}-pl-#{nth($sizes, $index)} { padding-left: #{nth($sizes, $index)}px !important; }
+}
+
+// 快速使用
+
+.#{$prefix}-m { margin: 20px !important; }
+.#{$prefix}-mt { margin-top: 20px !important; }
+.#{$prefix}-mr { margin-right: 20px !important; }
+.#{$prefix}-mb { margin-bottom: 20px !important; }
+.#{$prefix}-ml { margin-left: 20px !important; }
+
+.#{$prefix}-p { padding: 20px !important; }
+.#{$prefix}-pt { padding-top: 20px !important; }
+.#{$prefix}-pr { padding-right: 20px !important; }
+.#{$prefix}-pb { padding-bottom: 20px !important; }
+.#{$prefix}-pl { padding-left: 20px !important; }
@@ -0,0 +1,44 @@
+@import '~@/assets/style/unit/color.scss';
+
+// 工具类名统一前缀
+$prefix: d2;
+
+// 禁止用户选中 鼠标变为手形
+%unable-select {
+  user-select: none;
+  cursor: pointer;
+}
+
+// 填满父元素
+// 组要父元素 position: relative | absolute;
+%full {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+}
+
+// flex 垂直水平居中
+%flex-center-row {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+%flex-center-col {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+// 将元素模拟成卡片外观
+%card {
+  border: 1px solid #dddee1;
+  border-color: #e9eaec;
+  background: #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  position: relative;
+}
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
@@ -0,0 +1,59 @@
+// 主题名称
+$theme-name: 'd2';
+// 主题背景颜色
+$theme-bg-color: #ebf1f6;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid #cfd7e5;
+$theme-container-border-outer: 1px solid #cfd7e5;
+
+$theme-multiple-page-control-color: $color-text-normal;
+$theme-multiple-page-control-color-active: #2f74ff;
+$theme-multiple-page-control-nav-prev-color: #cfd7e5;
+$theme-multiple-page-control-nav-next-color: #cfd7e5;
+$theme-multiple-page-control-border-color: #cfd7e5;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#000, .03);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: $color-text-normal;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #2f74ff;
+$theme-header-item-background-color-hover: rgba(#FFF, .5);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #2f74ff;
+$theme-header-item-background-color-focus: rgba(#FFF, .5);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #2f74ff;
+$theme-header-item-background-color-active: rgba(#FFF, .5);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: $color-text-normal;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #2f74ff;
+$theme-aside-item-background-color-hover: rgba(#FFF, .5);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #2f74ff;
+$theme-aside-item-background-color-focus: rgba(#FFF, .5);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #2f74ff;
+$theme-aside-item-background-color-active: rgba(#FFF, .5);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: $color-text-normal;
+$theme-aside-menu-empty-text-color: $color-text-normal;
+$theme-aside-menu-empty-background-color: rgba(#000, .03);
+$theme-aside-menu-empty-icon-color-hover: $color-text-main;
+$theme-aside-menu-empty-text-color-hover: $color-text-main;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
@@ -0,0 +1,59 @@
+// 主题名称
+$theme-name: 'line';
+// 主题背景颜色
+$theme-bg-color: #f8f8f9;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// container组件
+$theme-container-background-color: rgba(#FFF, .8);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-2;
+$theme-container-border-outer: 1px solid #cfd7e5;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #cfd7e5;
+$theme-multiple-page-control-nav-next-color: #cfd7e5;
+$theme-multiple-page-control-border-color: #cfd7e5;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: #cfd7e5;
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #EFEFEF;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: $color-text-normal;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: $color-text-main;
+$theme-header-item-background-color-hover: rgba(#000, .02);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: $color-text-main;
+$theme-header-item-background-color-focus: rgba(#000, .02);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: $color-text-main;
+$theme-header-item-background-color-active: rgba(#000, .03);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: $color-text-normal;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: $color-text-main;
+$theme-aside-item-background-color-hover: rgba(#000, .02);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: $color-text-main;
+$theme-aside-item-background-color-focus: rgba(#000, .02);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: $color-text-main;
+$theme-aside-item-background-color-active: rgba(#000, .03);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: $color-text-normal;
+$theme-aside-menu-empty-text-color: $color-text-normal;
+$theme-aside-menu-empty-background-color: rgba(#000, .03);
+$theme-aside-menu-empty-icon-color-hover: $color-text-main;
+$theme-aside-menu-empty-text-color-hover: $color-text-main;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .05);
@@ -0,0 +1,7 @@
+@import '~@/assets/style/theme/theme-base.scss';
+
+@import '~@/assets/style/theme/d2/index.scss';
+@import '~@/assets/style/theme/line/index.scss';
+@import '~@/assets/style/theme/star/index.scss';
+@import '~@/assets/style/theme/tomorrow-night-blue/index.scss';
+@import '~@/assets/style/theme/violet/index.scss';
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
@@ -0,0 +1,59 @@
+// 主题名称
+$theme-name: 'star';
+// 主题背景颜色
+$theme-bg-color: #EFF4F8;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, .3);
+
+// container组件
+$theme-container-background-color: rgba(#FFF, .9);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-1;
+$theme-container-border-outer: 1px solid #114450;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #114450;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .5);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: rgba(#000, .2);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: rgba(#000, .2);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: rgba(#000, .3);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: rgba(#000, .2);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: rgba(#000, .2);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: rgba(#000, .3);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #FFF;
+$theme-aside-menu-empty-text-color: #FFF;
+$theme-aside-menu-empty-background-color: rgba(#FFF, .2);
+$theme-aside-menu-empty-icon-color-hover: #FFF;
+$theme-aside-menu-empty-text-color-hover: #FFF;
+$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .3);
@@ -0,0 +1,447 @@
+// 减小弹出菜单的项目高度
+.el-menu--popup {
+  .el-menu-item {
+    height: 36px;
+    line-height: 36px;
+  }
+  .el-submenu__title {
+    height: 36px;
+    line-height: 36px;
+  }
+}
+
+// 整体框架结构
+.d2-layout-header-aside-group {
+  height: 100%;
+  width: 100%;
+  min-width: 900px;
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  position: relative;
+  // 背景上面的半透明遮罩
+  .d2-layout-header-aside-mask {
+    @extend %full;
+  }
+  // 内容层
+  .d2-layout-header-aside-content {
+    @extend %full;
+    .d2-theme-header {
+      height: 60px;
+      .d2-theme-header-menu {
+        overflow: hidden;
+        &.is-scrollable {
+          position: relative;
+          padding: 0 20px;
+          .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+          }
+        }
+        .d2-theme-header-menu__content {
+          overflow: hidden;
+          .d2-theme-header-menu__scroll {
+            white-space: nowrap;
+            position: relative;
+            -webkit-transition: -webkit-transform .3s;
+            transition: -webkit-transform .3s;
+            transition: transform .3s;
+            transition: transform .3s, -webkit-transform .3s;
+            transition: transform .3s,-webkit-transform .3s;
+            float: left;
+          }
+        }
+        .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
+          height: 60px;
+          position: absolute;
+          top: 0;
+          font-size: 20px;
+          cursor: pointer;
+          display: none;
+        }
+        .d2-theme-header-menu__prev {
+          left: 0;
+          border-top-left-radius: 2px;
+          border-bottom-left-radius: 2px;
+        }
+        .d2-theme-header-menu__next {
+          right: 0;
+          border-top-right-radius: 2px;
+          border-bottom-right-radius: 2px;
+        }
+      }
+    }
+    .d2-theme-container {
+      .d2-theme-container-aside {
+        transition: width .3s;
+        position: relative;
+        .d2-layout-header-aside-menu-side {
+          @extend %full;
+          overflow: hidden;
+        }
+      }
+      .d2-theme-container-main {
+        padding: 0px;
+        position: relative;
+        overflow: hidden;
+        .d2-theme-container-main-layer {
+          position: absolute;
+          top: 0px;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+        }
+        .d2-theme-container-main-body {
+          position: relative;
+        }
+      }
+    }
+  }
+}
+
+// 主题公用
+.d2-layout-header-aside-group {
+  &.grayMode {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    filter: grayscale(100%);
+    filter: gray;
+  }
+  // 主体
+  .d2-layout-header-aside-content {
+    // [布局] 顶栏
+    .d2-theme-header {
+      // logo区域
+      .logo-group {
+        transition: width .3s;
+        float: left;
+        text-align: center;
+        img {
+          height: 60px;
+        }
+      }
+      // 折叠侧边栏切换按钮
+      .toggle-aside-btn {
+        float: left;
+        height: 60px;
+        width: 60px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        @extend %unable-select;
+        i {
+          font-size: 20px;
+          margin-top: 4px;
+        }
+      }
+      // [菜单] 顶栏
+      .el-menu {
+        float: left;
+        border-bottom: none;
+        background-color: transparent;
+        %header-menu-item {
+          @extend %unable-select;
+          i.fa {
+            font-size: 16px;
+            margin-right: 4px;
+          }
+        }
+        .el-menu-item {
+          @extend %header-menu-item;
+          border-bottom: none;
+        }
+        .el-submenu {
+          @extend %header-menu-item;
+          .el-submenu__title {
+            border-bottom: none;
+          }
+        }
+      }
+      // 顶栏右侧的按钮
+      .d2-header-right {
+        float: right;
+        height: 60px;
+        display: flex;
+        align-items: center;
+        .btn-text {
+          padding: 14px 12px;
+          border-radius: 4px;
+          margin: 0px !important;
+        }
+        .el-dropdown {
+          @extend %unable-select;
+        }
+      }
+    }
+    // [布局] 顶栏下面
+    .d2-theme-container {
+      // 侧边栏
+      .d2-theme-container-aside {
+        %d2-theme-container-aside-menu-icon {
+          width: 20px;
+          text-align: center;
+          font-size: 16px;
+        }
+        // [菜单] 正常状态
+        .el-menu {
+          @extend %unable-select;
+          background-color: transparent;
+          border-right: none;
+          .el-menu-item {
+            i {
+              @extend %d2-theme-container-aside-menu-icon;
+            }
+          }
+        }
+        .el-submenu {
+          @extend %unable-select;
+          .el-submenu__title {
+            i {
+              @extend %d2-theme-container-aside-menu-icon;
+            }
+            .el-submenu__icon-arrow {
+              margin-top: -10px;
+            }
+          }
+        }
+        // 菜单为空的时候显示的信息
+        .d2-layout-header-aside-menu-empty {
+          height: 160px;
+          margin: 10px;
+          margin-top: 0px;
+          border-radius: 4px;
+          @extend %unable-select;
+          i {
+            font-size: 30px;
+            margin-bottom: 10px;
+          }
+          span {
+            font-size: 14px;
+          }
+        }
+        // [菜单] 折叠状态
+        .el-menu--collapse {
+          background-color: transparent;
+          .el-submenu__title {
+            text-align: center;
+          }
+        }
+      }
+      // 右下 主体
+      .d2-theme-container-main {
+        // 主体部分分为多页面控制器 和主体
+        .d2-theme-container-main-header {
+          height: 41px;
+          // 多页面控制器
+          .d2-multiple-page-control-group {
+            padding-right: 20px;
+            .d2-multiple-page-control-content {
+              overflow: auto;
+              position: relative;
+              .d2-multiple-page-control-content-inner {
+                .d2-multiple-page-control {
+                  .el-tabs__header.is-top {
+                    margin: 0px;
+                  }
+                  .el-tabs__nav {
+                    overflow: hidden;
+                  }
+                }
+              }
+            }
+            .d2-multiple-page-control-btn {
+              position: relative;
+              bottom: -1px;
+              .el-dropdown {
+                .el-button-group {
+                  .el-button:first-child {
+                    border-bottom-left-radius: 0px;
+                  }
+                  .el-button:last-child {
+                    border-bottom-right-radius: 0px;
+                  }
+                }
+              }
+            }
+          }
+        }
+        // 主体
+        .d2-theme-container-main-body {
+          // 布局组件
+          .container-component {
+            @extend %full;
+            overflow: hidden;
+            // 填充式布局组件
+            .d2-container-full {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-full__header {
+                padding: 20px;
+              }
+              .d2-container-full__body {
+                flex-grow: 1;
+                height: 100%;
+                padding: 20px 20px;
+                overflow: auto;
+                position: relative;
+              }
+              .d2-container-full__footer {
+                padding: 20px;
+              }
+            }
+            // 填充式布局组件 - 滚动优化
+            .d2-container-full-bs {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-full-bs__header {
+                padding: 20px;
+              }
+              .d2-container-full-bs__body {
+                flex-grow: 1;
+                overflow: hidden;
+                position: relative;
+                .d2-container-full-bs__body-wrapper-inner {
+                  padding: 20px;
+                  position: relative;
+                }
+              }
+              .d2-container-full-bs__footer {
+                padding: 20px;
+              }
+            }
+            // 隐形布局组件
+            .d2-container-ghost {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-ghost__header {
+                padding: 20px;
+                border-bottom-left-radius: 4px;
+                border-bottom-right-radius: 4px;
+              }
+              .d2-container-ghost__body {
+                flex-grow: 1;
+                overflow: auto;
+                position: relative;
+              }
+              .d2-container-ghost__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+            // 隐形布局组件 - 滚动优化
+            .d2-container-ghost-bs {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-ghost-bs__header {
+                padding: 20px;
+                border-bottom-left-radius: 4px;
+                border-bottom-right-radius: 4px;
+              }
+              .d2-container-ghost-bs__body {
+                flex-grow: 1;
+                overflow: hidden;
+                position: relative;
+              }
+              .d2-container-ghost-bs__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+            // 卡片式布局组件
+            .d2-container-card {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-card__header {
+                padding: 20px;
+              }
+              .d2-container-card__body {
+                flex-grow: 1;
+                overflow: auto;
+                .d2-container-card__body-card {
+                  position: relative;
+                  margin-bottom: 20px;
+                  padding: 20px;
+                  border-bottom-left-radius: 4px;
+                  border-bottom-right-radius: 4px;
+                }
+              }
+              .d2-container-card__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+            // 卡片式布局组件 - 滚动优化
+            .d2-container-card-bs {
+              position: absolute;
+              top: 0px;
+              right: 20px;
+              bottom: 0px;
+              left: 0px;
+              display: flex;
+              flex-direction: column;
+              overflow: hidden;
+              .d2-container-card-bs__header {
+                padding: 20px;
+              }
+              .d2-container-card-bs__body {
+                position: relative;
+                flex-grow: 1;
+                overflow: hidden;
+                .d2-container-card-bs__body-wrapper-inner {
+                  padding-bottom: 20px;
+                }
+                .d2-container-card-bs__body-card {
+                  position: relative;
+                  padding: 20px;
+                  border-bottom-left-radius: 4px;
+                  border-bottom-right-radius: 4px;
+                }
+              }
+              .d2-container-card-bs__footer {
+                padding: 20px;
+                border-top-left-radius: 4px;
+                border-top-right-radius: 4px;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,416 @@
+// 每个主题特有的设置
+.theme-#{$theme-name} {
+
+  .el-card {
+    &.d2-card {
+      border: $theme-container-border-outer;
+      .el-card__header {
+        border-bottom: $theme-container-border-outer;
+      }
+    }
+  }
+
+  // 背景图片和遮罩
+  .d2-layout-header-aside-group {
+    background-color: $theme-bg-color;
+    .d2-layout-header-aside-mask {
+      background: $theme-bg-mask;
+    }
+  }
+
+  // 菜单项目
+  @mixin theme-menu-hover-style {
+    color: $theme-menu-item-color-hover;
+    i.fa {
+      color: $theme-menu-item-color-hover;
+    }
+    background: $theme-menu-item-background-color-hover;
+  }
+  %el-menu-icon {
+    i {
+      display: inline-block;
+      width: 14px;
+      text-align: center;
+      margin-right: 5px;
+    }
+    svg {
+      margin: 0px;
+      height: 14px;
+      width: 14px;
+      margin-right: 5px;
+    }
+  }
+  .el-submenu__title {
+    @extend %unable-select;
+    @extend %el-menu-icon;
+  }
+  .el-menu-item {
+    @extend %unable-select;
+    @extend %el-menu-icon;
+  }
+  .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu-item:hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
+    @include theme-menu-hover-style;
+  }
+  .el-menu--horizontal .el-menu .el-submenu__title:hover {
+    @include theme-menu-hover-style;
+  }
+  
+  // 顶栏
+  .d2-theme-header {
+    // 顶栏菜单空间不足时显示的滚动控件
+    .d2-theme-header-menu {
+      .d2-theme-header-menu__prev, .d2-theme-header-menu__next {
+        color: $theme-header-item-color;
+        background: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+          background: $theme-header-item-background-color-hover;
+        }
+      }
+    }
+    // 切换按钮
+    .toggle-aside-btn {
+      i {
+        color: $theme-header-item-color;
+        background: $theme-header-item-background-color;
+        &:hover {
+          color: $theme-header-item-color-hover;
+        }
+      }
+    }
+    // 顶栏菜单
+    .el-menu {
+      .el-menu-item {
+        transition: border-top-color 0s;
+        color: $theme-header-item-color;
+        background: $theme-header-item-background-color;
+        i.fa { color: inherit; }
+        &:hover {
+          color: $theme-header-item-color-hover;
+          background: $theme-header-item-background-color-hover;
+          i.fa { color: inherit; }
+        }
+        &:focus {
+          color: $theme-header-item-color-focus;
+          background: $theme-header-item-background-color-focus;
+          i.fa { color: inherit; }
+        }
+        &.is-active {
+          color: $theme-header-item-color-active;
+          background: $theme-header-item-background-color-active;
+          i.fa { color: inherit; }
+        }
+      }
+      .el-submenu {
+        &.is-active {
+          .el-submenu__title {
+            color: $theme-header-item-color-active;
+            background: $theme-header-item-background-color-active;
+            i.fa { color: inherit; }
+          }
+        }
+        .el-submenu__title {
+          transition: border-top-color 0s;
+          color: $theme-header-item-color;
+          background: $theme-header-item-background-color;
+          i.fa { color: inherit; }
+          .el-submenu__icon-arrow {
+            color: $theme-header-item-color;
+          }
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background: $theme-header-item-background-color-hover;
+            i.fa { color: inherit; }
+            .el-submenu__icon-arrow {
+              color: $theme-header-item-color-hover;
+            }
+          }
+          &:focus {
+            color: $theme-header-item-color-focus;
+            background: $theme-header-item-background-color-focus;
+            i.fa { color: inherit; }
+            .el-submenu__icon-arrow {
+              color: $theme-header-item-color-focus;
+            }
+          }
+        }
+      }
+    }
+    // 顶栏右侧
+    .d2-header-right {
+      .btn-text {
+        color: $theme-header-item-color;
+        &.can-hover {
+          &:hover {
+            color: $theme-header-item-color-hover;
+            background: $theme-header-item-background-color-hover;
+          }
+        }
+      }
+    }
+  }
+  // [布局] 顶栏下面
+  .d2-theme-container {
+    // 侧边栏
+    .d2-theme-container-aside {
+      // 菜单为空的时候显示的信息
+      .d2-layout-header-aside-menu-empty {
+        background: $theme-aside-menu-empty-background-color;
+        i {
+          color: $theme-aside-menu-empty-icon-color;
+        }
+        span {
+          color: $theme-aside-menu-empty-text-color;
+        }
+        &:hover {
+          background: $theme-aside-menu-empty-background-color-hover;
+          i {
+            color: $theme-aside-menu-empty-icon-color-hover;
+          }
+          span {
+            color: $theme-aside-menu-empty-text-color-hover;
+          }
+        }
+      }
+      // [菜单] 正常状态
+      .el-menu {
+        .el-menu-item {
+          color: $theme-aside-item-color;
+          background: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            fill: $theme-aside-item-color-hover;
+            background: $theme-aside-item-background-color-hover;
+            i {
+              color: $theme-aside-item-color-hover;
+            }
+          }
+          &:focus {
+            color: $theme-aside-item-color-focus;
+            fill: $theme-aside-item-color-focus;
+            background: $theme-aside-item-background-color-focus;
+            i {
+              color: $theme-aside-item-color-focus;
+            }
+          }
+          &.is-active {
+            color: $theme-aside-item-color-active;
+            fill: $theme-aside-item-color-active;
+            background: $theme-aside-item-background-color-active;
+            i {
+              color: $theme-aside-item-color-active;
+            }
+          }
+        }
+      }
+      .el-submenu {
+        .el-submenu__title {
+          color: $theme-aside-item-color;
+          background: $theme-aside-item-background-color;
+          i {
+            color: $theme-aside-item-color;
+          }
+          .el-submenu__icon-arrow {
+            color: $theme-aside-item-color;
+          }
+          &:hover {
+            color: $theme-aside-item-color-hover;
+            background: $theme-aside-item-background-color-hover;
+            i {
+              color: $theme-aside-item-color-hover;
+            }
+            .el-submenu__icon-arrow {
+              color: $theme-aside-item-color-hover;
+            }
+          }
+        }
+      }
+    }
+    .d2-theme-container-main {
+      // 主体部分分为多页面控制器 和主体
+      .d2-theme-container-main-header {
+        // 多页面控制器
+        .d2-multiple-page-control {
+          .el-tabs__header.is-top {
+            border-bottom-color: $theme-multiple-page-control-border-color;
+          }
+          .el-tabs__nav {
+            border-color: $theme-multiple-page-control-border-color;
+            .el-tabs__item {
+              @extend %unable-select;
+              color: $theme-multiple-page-control-color;
+              background-color: $theme-multiple-page-control-background-color;
+              border-left-color: $theme-multiple-page-control-border-color;
+              &:first-child {
+                border-left: none;
+                &:hover {
+                  padding: 0px 20px;
+                }
+                .el-icon-close {
+                  display: none;
+                }
+              }
+            }
+            .el-tabs__item.is-active {
+              color: $theme-multiple-page-control-color-active;
+              background-color: $theme-multiple-page-control-background-color-active;
+              border-bottom-color: $theme-multiple-page-control-border-color-active;
+            }
+          }
+          %el-tabs__nav {
+            font-size: 20px;
+          }
+          .el-tabs__nav-prev {
+            @extend %el-tabs__nav;
+            color: $theme-multiple-page-control-nav-prev-color;
+          }
+          .el-tabs__nav-next {
+            @extend %el-tabs__nav;
+            color: $theme-multiple-page-control-nav-next-color;
+          }
+        }
+        // 多页控制器的关闭控制
+        .d2-multiple-page-control-btn {
+          .el-dropdown {
+            .el-button-group {
+              .el-button {
+                border-color: $theme-multiple-page-control-border-color;
+              }
+            }
+          }
+        }
+      }
+      // 主体
+      .d2-theme-container-main-body {
+        // 布局组件
+        .container-component {
+          // [组件]
+          // d2-container-full 填充型
+          .d2-container-full {
+            border: $theme-container-border-outer;
+            border-top: none;
+            border-bottom: none;
+            .d2-container-full__header {
+              border-bottom: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-full__body {
+              background: $theme-container-background-color;
+            }
+            .d2-container-full__footer {
+              border-top: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-full-bs 填充型 滚动优化
+          .d2-container-full-bs {
+            border: $theme-container-border-outer;
+            border-top: none;
+            border-bottom: none;
+            .d2-container-full-bs__header {
+              border-bottom: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-full-bs__body {
+              background: $theme-container-background-color;
+            }
+            .d2-container-full-bs__footer {
+              border-top: $theme-container-border-inner;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-ghost 隐形布局组件
+          .d2-container-ghost {
+            .d2-container-ghost__header {
+              border-bottom: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-ghost__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-ghost-bs 隐形布局组件 滚动优化
+          .d2-container-ghost-bs {
+            .d2-container-ghost-bs__header {
+              border-bottom: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-ghost-bs__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-card 卡片型
+          .d2-container-card {
+            .d2-container-card__header {
+              border-bottom: $theme-container-border-inner;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-card__body {
+              .d2-container-card__body-card {
+                background: $theme-container-background-color;
+                border-left: $theme-container-border-outer;
+                border-right: $theme-container-border-outer;
+                border-bottom: $theme-container-border-outer;
+              }
+            }
+            .d2-container-card__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+          // [组件]
+          // d2-container-card-bs 卡片型 滚动优化
+          .d2-container-card-bs {
+            .d2-container-card-bs__header {
+              border-bottom: $theme-container-border-inner;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+            .d2-container-card-bs__body {
+              .d2-container-card-bs__body-card {
+                background: $theme-container-background-color;
+                border-left: $theme-container-border-outer;
+                border-right: $theme-container-border-outer;
+                border-bottom: $theme-container-border-outer;
+              }
+            }
+            .d2-container-card-bs__footer {
+              border-top: $theme-container-border-outer;
+              border-left: $theme-container-border-outer;
+              border-right: $theme-container-border-outer;
+              background: $theme-container-header-footer-background-color;
+            }
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,2 @@
+@import './setting.scss';
+@import '../theme.scss';
@@ -0,0 +1,59 @@
+// 主题名称
+$theme-name: 'tomorrow-night-blue';
+// 主题背景颜色
+$theme-bg-color: #002253;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// container组件
+$theme-container-background-color: rgba(#FFF, 1);
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-1;
+$theme-container-border-outer: 1px solid #002253;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #002253;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .2);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FF929A;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFEBA4;
+$theme-header-item-background-color-hover: rgba(#FFF, .05);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFB870;
+$theme-header-item-background-color-focus: rgba(#FFF, .05);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFB870;
+$theme-header-item-background-color-active: rgba(#FFF, .05);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FF929A;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFEBA4;
+$theme-aside-item-background-color-hover: rgba(#FFF, .05);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFB870;
+$theme-aside-item-background-color-focus: rgba(#FFF, .05);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFB870;
+$theme-aside-item-background-color-active: rgba(#FFF, .05);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #FFB870;
+$theme-aside-menu-empty-text-color: #FFB870;
+$theme-aside-menu-empty-background-color: rgba(#FFF, .1);
+$theme-aside-menu-empty-icon-color-hover: #FFEBA4;
+$theme-aside-menu-empty-text-color-hover: #FFEBA4;
+$theme-aside-menu-empty-background-color-hover: rgba(#FFF, .2);
@@ -0,0 +1,9 @@
+@import './setting.scss';
+@import '../theme.scss';
+
+.theme-#{$theme-name} {
+  .d2-layout-header-aside-group {
+    background: #bc00e3;
+    background: linear-gradient(120deg, #bc00e3 0%, #4EFFFB 100%);
+  }
+}
@@ -0,0 +1,59 @@
+// 主题名称
+$theme-name: 'violet';
+// 主题背景颜色
+$theme-bg-color: #000;
+// 主题背景图片遮罩
+$theme-bg-mask: rgba(#000, 0);
+
+// container组件
+$theme-container-background-color: #FFF;
+$theme-container-header-footer-background-color: #FFF;
+$theme-container-border-inner: 1px solid $color-border-2;
+$theme-container-border-outer: 1px solid #8C40E2;
+
+$theme-multiple-page-control-color: #FFF;
+$theme-multiple-page-control-color-active: $color-text-normal;
+$theme-multiple-page-control-nav-prev-color: #FFF;
+$theme-multiple-page-control-nav-next-color: #FFF;
+$theme-multiple-page-control-border-color: #8C40E2;
+$theme-multiple-page-control-border-color-active: #FFF;
+$theme-multiple-page-control-background-color: rgba(#FFF, .3);
+$theme-multiple-page-control-background-color-active: #FFF;
+
+// 顶栏和侧边栏中展开的菜单 hover 状态下
+$theme-menu-item-color-hover: #293849;
+$theme-menu-item-background-color-hover: #ecf5ff;
+
+// 顶栏上的文字颜色
+$theme-header-item-color: #FFF;
+$theme-header-item-background-color: transparent;
+// 顶栏上的项目在 hover 时
+$theme-header-item-color-hover: #FFF;
+$theme-header-item-background-color-hover: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+// 顶栏上的项目在 focus 时
+$theme-header-item-color-focus: #FFF;
+$theme-header-item-background-color-focus: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+// 顶栏上的项目在 active 时
+$theme-header-item-color-active: #FFF;
+$theme-header-item-background-color-active: linear-gradient(-180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.12) 100%);
+
+// 侧边栏上的文字颜色
+$theme-aside-item-color: #FFF;
+$theme-aside-item-background-color: transparent;
+// 侧边栏上的项目在 hover 时
+$theme-aside-item-color-hover: #FFF;
+$theme-aside-item-background-color-hover: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+// 侧边栏上的项目在 focus 时
+$theme-aside-item-color-focus: #FFF;
+$theme-aside-item-background-color-focus: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+// 侧边栏上的项目在 active 时
+$theme-aside-item-color-active: #FFF;
+$theme-aside-item-background-color-active: linear-gradient(90deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.00) 100%);
+
+// 侧边栏菜单为空的时候显示的元素
+$theme-aside-menu-empty-icon-color: #FFF;
+$theme-aside-menu-empty-text-color: #FFF;
+$theme-aside-menu-empty-background-color: rgba(#000, .1);
+$theme-aside-menu-empty-icon-color-hover: #FFF;
+$theme-aside-menu-empty-text-color-hover: #FFF;
+$theme-aside-menu-empty-background-color-hover: rgba(#000, .15);
@@ -0,0 +1,23 @@
+// 主色
+$color-primary: #409EFF;
+
+// 辅助色
+$color-info: #909399;
+$color-success: #67C23A;
+$color-warning: #E6A23C;
+$color-danger: #F56C6C;
+
+// 文字
+$color-text-main: #303133;
+$color-text-normal: #606266;
+$color-text-sub: #909399;
+$color-text-placehoder: #C0C4CC;
+
+// 边框
+$color-border-1: #DCDFE6;
+$color-border-2: #E4E7ED;
+$color-border-3: #EBEEF5;
+$color-border-4: #F2F6FC;
+
+// 背景
+$color-bg: #f8f8f9;
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M682.7 554.7H341.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h341.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#5F6379" /><path d="M512 725.3c-23.6 0-42.7-19.1-42.7-42.7V341.3c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v341.3c0 23.6-19.1 42.7-42.7 42.7z" fill="#5F6379" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 896c-223.5 0-405.3-181.8-405.3-405.3S288.5 85.3 512 85.3s405.3 181.8 405.3 405.3S735.5 896 512 896z m0-725.3c-176.4 0-320 143.5-320 320s143.6 320 320 320 320-143.5 320-320-143.6-320-320-320z" fill="#3688FF" /><path d="M922.6 249.6c-13.7 0-27.1-6.6-35.4-18.8-15.3-22.6-32.8-43.9-52.1-63.2-19.3-19.3-40.6-36.9-63.2-52.1-19.5-13.2-24.6-39.7-11.5-59.2 13.2-19.5 39.7-24.6 59.2-11.5 27.1 18.3 52.6 39.4 75.7 62.5s44.2 48.6 62.5 75.7c13.2 19.5 8.1 46.1-11.5 59.2-7.2 5-15.5 7.4-23.7 7.4zM101.4 249.6c-8.2 0-16.5-2.4-23.8-7.3-19.5-13.2-24.7-39.7-11.5-59.2 18.3-27.1 39.4-52.6 62.5-75.7s48.6-44.1 75.7-62.5c19.5-13.2 46.1-8 59.3 11.5 13.2 19.5 8.1 46-11.5 59.2-22.6 15.3-43.9 32.8-63.2 52.1-19.3 19.3-36.8 40.5-52.1 63.2-8.2 12.1-21.7 18.7-35.4 18.7zM138.6 970.7c-8.6 0-17.3-2.6-24.8-7.9-19.2-13.7-23.6-40.4-9.9-59.5l53.3-74.7c13.7-19.2 40.3-23.6 59.5-9.9 19.2 13.7 23.6 40.4 9.9 59.5l-53.3 74.7c-8.2 11.6-21.4 17.8-34.7 17.8zM885.4 970.7c-13.3 0-26.4-6.2-34.8-17.9l-53.3-74.7c-13.7-19.2-9.3-45.8 9.9-59.5 19.2-13.7 45.8-9.2 59.5 9.9l53.3 74.7c13.7 19.2 9.3 45.8-9.9 59.5-7.5 5.4-16.2 8-24.7 8zM512 554.7c-7.2 0-14.5-1.8-21-5.5-13.4-7.6-21.6-21.8-21.6-37.1V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v52.6l42.1-25.2c20.2-12.1 46.4-5.6 58.5 14.6 12.1 20.2 5.6 46.4-14.6 58.5l-106.7 64c-6.9 4.1-14.5 6.2-22.1 6.2z" fill="#5F6379" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M899.9 938.7H124.1C55.7 938.7 0 883 0 814.6V273.4C0 205 55.7 149.3 124.1 149.3h68.7l85.3-106.7h467.7l85.3 106.7h68.7c68.4 0 124.1 55.7 124.1 124.1v541.1c0.1 68.5-55.6 124.2-124 124.2z m-775.8-704c-21.4 0-38.8 17.4-38.8 38.8v541.1c0 21.4 17.4 38.8 38.8 38.8h775.8c21.4 0 38.8-17.4 38.8-38.8V273.4c0-21.4-17.4-38.8-38.8-38.8H790.2L704.8 128H319.2l-85.3 106.7H124.1z" fill="#3688FF" /><path d="M512 768c-117.6 0-213.3-95.7-213.3-213.3S394.4 341.3 512 341.3 725.3 437 725.3 554.7 629.6 768 512 768z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M810.7 341.3m-42.7 0a42.7 42.7 0 1 0 85.4 0 42.7 42.7 0 1 0-85.4 0Z" fill="#5F6379" /></svg>
@@ -0,0 +1,13 @@
+
+<svg viewBox="0 0 60 54" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <desc>D2Admin</desc>
+    <defs></defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="logo-no-shadow" transform="translate(-3.000000, -3.000000)">
+            <path d="M44.2833805,33.4299717 L6.05798302,56.3652102 C4.16366196,57.5018028 1.70662094,56.8875426 0.570028297,54.9932215 C0.197031333,54.3715599 8.87839274e-17,53.6602143 0,52.9352385 L-4.4408921e-16,7.06476152 C-7.1463071e-16,4.85562252 1.790861,3.06476152 4,3.06476152 C4.72497578,3.06476152 5.43632142,3.26179285 6.05798302,3.63478981 L44.2833805,26.5700283 C46.1777016,27.7066209 46.7919618,30.163662 45.6553692,32.057983 C45.3175701,32.6209814 44.8463789,33.0921727 44.2833805,33.4299717 Z" id="Triangle-Copy" fill="#35495E" transform="translate(25.000000, 30.000000) rotate(-180.000000) translate(-25.000000, -30.000000) "></path>
+            <path d="M60.2833805,33.4299717 L22.057983,56.3652102 C20.163662,57.5018028 17.7066209,56.8875426 16.5700283,54.9932215 C16.1970313,54.3715599 16,53.6602143 16,52.9352385 L16,7.06476152 C16,4.85562252 17.790861,3.06476152 20,3.06476152 C20.7249758,3.06476152 21.4363214,3.26179285 22.057983,3.63478981 L60.2833805,26.5700283 C62.1777016,27.7066209 62.7919618,30.163662 61.6553692,32.057983 C61.3175701,32.6209814 60.8463789,33.0921727 60.2833805,33.4299717 Z" id="Triangle" fill="#409EFF"></path>
+            <path d="M42.4688663,31.7973091 L24.0289915,42.8612339 C23.081831,43.4295303 21.8533105,43.1224001 21.2850141,42.1752396 C21.0985157,41.8644088 21,41.508736 21,41.1462481 L21,19.0183984 C21,17.9138289 21.8954305,17.0183984 23,17.0183984 C23.3624879,17.0183984 23.7181607,17.116914 24.0289915,17.3034125 L42.4688663,28.3673374 C43.4160268,28.9356337 43.7231569,30.1641542 43.1548606,31.1113147 C42.9859611,31.3928139 42.7503655,31.6284096 42.4688663,31.7973091 Z" id="Triangle-Copy" fill="#FFFFFF" transform="translate(31.000000, 30.082670) rotate(-180.000000) translate(-31.000000, -30.082670) "></path>
+            <path d="M37.5708451,30.8574929 L30.5144958,35.0913025 C30.0409155,35.3754507 29.4266552,35.2218856 29.1425071,34.7483054 C29.0492578,34.59289 29,34.4150536 29,34.2338096 L29,25.7661904 C29,25.2139056 29.4477153,24.7661904 30,24.7661904 C30.1812439,24.7661904 30.3590804,24.8154482 30.5144958,24.9086975 L37.5708451,29.1425071 C38.0444254,29.4266552 38.1979905,30.0409155 37.9138423,30.5144958 C37.8293925,30.6552454 37.7115947,30.7730432 37.5708451,30.8574929 Z" id="Triangle" fill="#409EFF"></path>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1,26 @@
+
+<svg viewBox="0 0 256 236" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 49.3 (51167) - http://www.bohemiancoding.com/sketch -->
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="logo" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon/500/crud" transform="translate(-122.000000, -132.000000)" fill-rule="nonzero">
+            <g id="table-(1)" transform="translate(122.000000, 132.000000)">
+                <path d="M192,132.24 L192,166.906667 C192,169.115806 190.209139,170.906667 188,170.906667 L153.333333,170.906667 C151.124194,170.906667 149.333333,169.115806 149.333333,166.906667 L149.333333,132.24 C149.333333,130.030861 151.124194,128.24 153.333333,128.24 L188,128.24 C190.209139,128.24 192,130.030861 192,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M128,132.24 L128,166.906667 C128,169.115806 126.209139,170.906667 124,170.906667 L89.3333333,170.906667 C87.1241943,170.906667 85.3333333,169.115806 85.3333333,166.906667 L85.3333333,132.24 C85.3333333,130.030861 87.1241943,128.24 89.3333333,128.24 L124,128.24 C126.209139,128.24 128,130.030861 128,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,132.24 L64,166.906667 C64,169.115806 62.209139,170.906667 60,170.906667 L4,170.906667 C1.790861,170.906667 2.705415e-16,169.115806 0,166.906667 L0,132.24 C-2.705415e-16,130.030861 1.790861,128.24 4,128.24 L60,128.24 C62.209139,128.24 64,130.030861 64,132.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M128,69.0933333 L128,103.76 C128,105.969139 126.209139,107.76 124,107.76 L89.3333333,107.76 C87.1241943,107.76 85.3333333,105.969139 85.3333333,103.76 L85.3333333,69.0933333 C85.3333333,66.8841943 87.1241943,65.0933333 89.3333333,65.0933333 L124,65.0933333 C126.209139,65.0933333 128,66.8841943 128,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,4.24 L64,38.9066667 C64,41.1158057 62.209139,42.9066667 60,42.9066667 L4,42.9066667 C1.790861,42.9066667 2.705415e-16,41.1158057 0,38.9066667 L0,4.24 C-2.705415e-16,2.030861 1.790861,0.24 4,0.24 L60,0.24 C62.209139,0.24 64,2.030861 64,4.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M192,69.0933333 L192,103.76 C192,105.969139 190.209139,107.76 188,107.76 L153.333333,107.76 C151.124194,107.76 149.333333,105.969139 149.333333,103.76 L149.333333,69.0933333 C149.333333,66.8841943 151.124194,65.0933333 153.333333,65.0933333 L188,65.0933333 C190.209139,65.0933333 192,66.8841943 192,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,69.0933333 L64,103.76 C64,105.969139 62.209139,107.76 60,107.76 L4,107.76 C1.790861,107.76 2.705415e-16,105.969139 0,103.76 L0,69.0933333 C-2.705415e-16,66.8841943 1.790861,65.0933333 4,65.0933333 L60,65.0933333 C62.209139,65.0933333 64,66.8841943 64,69.0933333 Z" id="Shape" fill="#35495E"></path>
+                <path d="M256,132.24 L256,166.906667 C256,169.115806 254.209139,170.906667 252,170.906667 L217.333333,170.906667 C215.124194,170.906667 213.333333,169.115806 213.333333,166.906667 L213.333333,132.24 C213.333333,130.030861 215.124194,128.24 217.333333,128.24 L252,128.24 C254.209139,128.24 256,130.030861 256,132.24 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M256,69.0933333 L256,103.76 C256,105.969139 254.209139,107.76 252,107.76 L217.333333,107.76 C215.124194,107.76 213.333333,105.969139 213.333333,103.76 L213.333333,69.0933333 C213.333333,66.8841943 215.124194,65.0933333 217.333333,65.0933333 L252,65.0933333 C254.209139,65.0933333 256,66.8841943 256,69.0933333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M256,4.24 L256,38.9066667 C256,41.1158057 254.209139,42.9066667 252,42.9066667 L89.3333333,42.9066667 C87.1241943,42.9066667 85.3333333,41.1158057 85.3333333,38.9066667 L85.3333333,4.24 C85.3333333,2.030861 87.1241943,0.24 89.3333333,0.24 L252,0.24 C254.209139,0.24 256,2.030861 256,4.24 Z" id="Shape" fill="#35495E"></path>
+                <path d="M128,197.093333 L128,231.76 C128,233.969139 126.209139,235.76 124,235.76 L89.3333333,235.76 C87.1241943,235.76 85.3333333,233.969139 85.3333333,231.76 L85.3333333,197.093333 C85.3333333,194.884194 87.1241943,193.093333 89.3333333,193.093333 L124,193.093333 C126.209139,193.093333 128,194.884194 128,197.093333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M64,197.093333 L64,231.76 C64,233.969139 62.209139,235.76 60,235.76 L4,235.76 C1.790861,235.76 2.705415e-16,233.969139 0,231.76 L0,197.093333 C-2.705415e-16,194.884194 1.790861,193.093333 4,193.093333 L60,193.093333 C62.209139,193.093333 64,194.884194 64,197.093333 Z" id="Shape" fill="#35495E"></path>
+                <path d="M256,197.093333 L256,231.76 C256,233.969139 254.209139,235.76 252,235.76 L217.333333,235.76 C215.124194,235.76 213.333333,233.969139 213.333333,231.76 L213.333333,197.093333 C213.333333,194.884194 215.124194,193.093333 217.333333,193.093333 L252,193.093333 C254.209139,193.093333 256,194.884194 256,197.093333 Z" id="Shape" fill="#409EFF"></path>
+                <path d="M192,197.093333 L192,231.76 C192,233.969139 190.209139,235.76 188,235.76 L153.333333,235.76 C151.124194,235.76 149.333333,233.969139 149.333333,231.76 L149.333333,197.093333 C149.333333,194.884194 151.124194,193.093333 153.333333,193.093333 L188,193.093333 C190.209139,193.093333 192,194.884194 192,197.093333 Z" id="Shape" fill="#409EFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M640 682.7c-9.6 0-19.3-3.2-27.3-9.9l-128-106.7c-9.7-8.1-15.4-20.1-15.4-32.8V384c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v129.4l112.6 93.9c18.1 15.1 20.5 42 5.5 60.1-8.5 10-20.6 15.3-32.8 15.3z" fill="#5F6379" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M192 938.7H87.9c-48.4 0-87.9-39.5-87.9-88V386.6c0-48.5 39.5-87.9 87.9-87.9h125.4c11.6 0 22.7 4.7 30.8 13.1 8 8.4 12.3 19.6 11.9 31.2l-21.3 554.7c-0.9 22.8-19.8 41-42.7 41zM87.9 384c-1.4 0-2.6 1.2-2.6 2.6v464.1c0 1.4 1.2 2.6 2.6 2.6h63L169 384H87.9z" fill="#5F6379" /><path d="M810.4 938.7H275.7l24.6-640H418l72-201.8C510.7 38.9 566 0 627.5 0c42.4 0 82.6 18.4 110.3 50.4S778 124.8 772 166.7l-18.9 132h142.6c70.7 0 128.2 57.5 128.2 128.2l-1 9.3-84.4 379.4c-2.6 68.3-59.1 123.1-128.1 123.1z m-446.1-85.4h446.1c23.6 0 42.9-19.2 42.9-42.9l1-9.3L938.5 423c-2-21.8-20.4-39-42.7-39h-241l32.8-229.4c2.5-17.7-2.5-34.8-14.2-48.3s-28-20.9-45.9-20.9c-25.6 0-48.5 16.2-57.1 40.3L478.1 384h-95.7l-18.1 469.3z" fill="#3688FF" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M512.8 977.4c-26.1 0-50.1-7.3-71.5-21.7C323.5 897 0 675.3 0 400.5 0 212 153.4 58.6 341.9 58.6c60.5 0 119 15.8 170.9 45.9 51.9-30.1 110.5-45.9 170.9-45.9 188.5 0 341.9 153.4 341.9 341.9 0 274.8-323.5 496.6-441.3 555.2-21.4 14.4-45.4 21.7-71.5 21.7zM341.9 144.1c-141.4 0-256.4 115-256.4 256.4 0 117.2 80.6 225.2 148.2 295.1 86.1 89 187.5 155.2 248.1 184.8l6.1 3.7c15.1 10.8 34.6 10.8 49.7 0l6.1-3.7C604.4 850.7 705.8 784.6 791.8 695.6c67.6-69.9 148.2-177.8 148.2-295.1 0-141.4-115-256.4-256.4-256.4-52.6 0-103.2 16-146.5 46.1L512.8 207.3l-24.5-17.1c-43.2-30.2-93.9-46.1-146.4-46.1z"  /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M277.3 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M344.7 978.2c-5.2 0-10.4-0.8-15.5-2.5-13.8-4.5-24.8-14.8-30.4-28.1l-39.3-94.2H128.3C57.5 853.3 0 795.8 0 725.1V213.6C0 142.9 57.5 85.3 128.3 85.3h767.5c70.7 0 128.3 57.5 128.3 128.3v511.5c0 70.7-57.5 128.3-128.3 128.3H566.5L370.2 971.1c-7.7 4.7-16.6 7.1-25.5 7.1z m-18.3-80.3s-0.1 0 0 0zM128.3 170.7c-23.7 0-42.9 19.3-42.9 42.9v511.5c0 23.7 19.3 42.9 42.9 42.9h188.2l45.3 108.7L542.9 768h352.9c23.7 0 42.9-19.3 42.9-42.9V213.6c0-23.7-19.3-42.9-42.9-42.9H128.3z" fill="#3688FF" /><path d="M512 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /><path d="M746.7 469.3m-64 0a64 64 0 1 0 128 0 64 64 0 1 0-128 0Z" fill="#5F6379" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 128c-23.6 0-42.7-19.1-42.7-42.7V42.7C469.3 19.1 488.4 0 512 0s42.7 19.1 42.7 42.7v42.7c0 23.5-19.1 42.6-42.7 42.6zM512 1024c-61.8 0-122.3-10.5-179.9-31.1-22.2-7.9-33.7-32.4-25.8-54.6 8-22.2 32.3-33.8 54.6-25.8 98.4 35.3 209.2 34.6 307.1-1.8 22.1-8.2 46.6 3 54.9 25.1 8.2 22.1-3 46.6-25.1 54.9-59.5 22.1-121.9 33.3-185.8 33.3z" fill="#5F6379" /><path d="M845 874.7H179c-75.2 0-136.4-61.2-136.4-136.4v-4.6c0-57.1 34.7-106 85.3-126.1V426.7c0-211.7 172.3-384 384-384s384 172.3 384 384v180.9c50.6 20.1 85.3 69 85.3 126.1v4.6c0.1 75.2-61 136.4-136.2 136.4zM512 128c-164.7 0-298.7 134-298.7 298.7v253.2l-38.9 3.5c-26.5 2.4-46.5 24-46.5 50.3v4.6c0 28.1 22.9 51 51 51h666c28.1 0 51-22.9 51-51v-4.6c0-26.3-20-48-46.5-50.3l-38.9-3.5V426.7C810.7 262 676.7 128 512 128z" fill="#3688FF" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M492.5 917.7c-247 0-447.9-200.9-447.9-447.9s200.9-448 447.9-448 447.9 200.9 447.9 447.9-200.9 448-447.9 448z m0-810.6c-200 0-362.6 162.7-362.6 362.6s162.7 362.6 362.6 362.6 362.6-162.7 362.6-362.6-162.6-362.6-362.6-362.6z" fill="#3688FF" /><path d="M951.1 971c-10.9 0-21.8-4.2-30.2-12.5l-96-96c-16.7-16.7-16.7-43.7 0-60.3 16.6-16.7 43.7-16.7 60.3 0l96 96c16.7 16.7 16.7 43.7 0 60.3-8.2 8.4-19.2 12.5-30.1 12.5z" fill="#5F6379" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M811.3 938.7H217.5c-71.5 0-129.8-58.2-129.8-129.8V215.1c0-71.6 58.2-129.8 129.8-129.8h296.9c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.7 42.7H217.5c-24.5 0-44.4 19.9-44.4 44.4v593.8c0 24.5 19.9 44.4 44.4 44.4h593.8c24.5 0 44.4-19.9 44.4-44.4V512c0-23.6 19.1-42.7 42.7-42.7S941 488.4 941 512v296.9c0 71.6-58.2 129.8-129.7 129.8z" fill="#3688FF" /><path d="M898.4 405.3c-23.6 0-42.7-19.1-42.7-42.7V212.9c0-23.3-19-42.3-42.3-42.3H663.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h149.7c70.4 0 127.6 57.2 127.6 127.6v149.7c0 23.7-19.1 42.8-42.6 42.8z" fill="#5F6379" /><path d="M373.6 712.6c-10.9 0-21.8-4.2-30.2-12.5-16.7-16.7-16.7-43.7 0-60.3L851.2 132c16.7-16.7 43.7-16.7 60.3 0 16.7 16.7 16.7 43.7 0 60.3L403.8 700.1c-8.4 8.3-19.3 12.5-30.2 12.5z" fill="#5F6379" /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#333333" d="M761.2 942.8c-8.9 0-17.9-1.8-26.5-5.4l-220.7-93-220.7 93c-22.1 9.3-46.8 6.4-66.2-7.6-19.4-14.1-29.8-36.7-27.7-60.6l20.2-238.7L62.9 449.2c-15.7-18.1-20.6-42.5-13.2-65.3 7.4-22.8 25.7-39.6 49.1-45.1L332 284.3l123.9-205c12.4-20.5 34.1-32.7 58-32.7 24 0 45.7 12.2 58.1 32.7l123.9 205 233.2 54.5c23.3 5.5 41.7 22.3 49.1 45.1 7.4 22.8 2.5 47.2-13.2 65.3L808.4 630.4l20.2 238.7c2 23.9-8.3 46.5-27.7 60.6-11.8 8.6-25.7 13-39.7 13.1zM146.4 415.3L289 580.2c11.9 13.7 17.8 32 16.3 50.1l-18.4 217.2 200.8-84.6c16.8-7 35.9-7 52.6 0l200.9 84.6-18.4-217.2c-1.5-18.1 4.4-36.4 16.3-50.1l142.5-164.9-212.2-49.6c-17.7-4.1-33.2-15.4-42.6-31L514 148.3 401.2 334.8c-9.4 15.6-24.9 26.8-42.6 31l-212.2 49.5z m553.3-124.7h0.2-0.2z"  /></svg>
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 661.3c-117.6 0-213.3-95.7-213.3-213.3S394.4 234.7 512 234.7 725.3 330.4 725.3 448 629.6 661.3 512 661.3z m0-341.3c-70.6 0-128 57.4-128 128s57.4 128 128 128 128-57.4 128-128-57.4-128-128-128z" fill="#5F6379" /><path d="M837 862.9c-15.7 0-30.8-8.7-38.2-23.7C744.3 729.5 634.4 661.3 512 661.3s-232.3 68.1-286.8 177.9c-10.5 21.1-36.1 29.7-57.2 19.2s-29.7-36.1-19.2-57.2C217.8 662.3 357 576 512 576s294.2 86.3 363.2 225.2c10.5 21.1 1.9 46.7-19.2 57.2-6.1 3-12.6 4.5-19 4.5z" fill="#5F6379" /><path d="M512 1002.7c-270.6 0-490.7-220.1-490.7-490.7S241.4 21.3 512 21.3s490.7 220.1 490.7 490.7-220.1 490.7-490.7 490.7z m0-896c-223.5 0-405.3 181.8-405.3 405.3S288.5 917.3 512 917.3 917.3 735.5 917.3 512 735.5 106.7 512 106.7z" fill="#3688FF" /></svg>
@@ -0,0 +1,7 @@
+import Vue from 'vue'
+
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./icons', false, /\.svg$/)
+const iconMap = requireAll(req)
+
+Vue.prototype.$IconSvg = iconMap.map(e => e.default.id.slice(3))
@@ -0,0 +1,31 @@
+<template>
+  <d2-container v-bind="$attrs">
+    <iframe
+      class="d2-container-frame"
+      :src="src"
+      frameborder="0"/>
+  </d2-container>
+</template>
+
+<script>
+export default {
+  name: 'd2-container-frame',
+  props: {
+    src: {
+      type: String,
+      required: false,
+      default: 'https://doc.d2admin.fairyever.com/zh/'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-container-frame {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  width: 100%;
+}
+</style>
@@ -0,0 +1,27 @@
+<template>
+  <div class="d2-container-card-bs">
+    <div v-if="$slots.header" class="d2-container-card-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-card-bs__body" ref="wrapper">
+      <div class="d2-container-card-bs__body-wrapper-inner">
+        <div class="d2-container-card-bs__body-card">
+          <slot/>
+        </div>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-card-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import bs from './mixins/bs'
+export default {
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
+}
+</script>
@@ -0,0 +1,33 @@
+<template>
+  <div class="d2-container-card">
+    <div v-if="$slots.header" class="d2-container-card__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-card__body" ref="body">
+      <div class="d2-container-card__body-card">
+        <slot/>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-card__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import scroll from './mixins/normal'
+export default {
+  name: 'd2-container-card',
+  mixins: [
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
+}
+</script>
@@ -0,0 +1,25 @@
+<template>
+  <div class="d2-container-full-bs">
+    <div v-if="$slots.header" class="d2-container-full-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-full-bs__body" ref="wrapper">
+      <div class="d2-container-full-bs__body-wrapper-inner">
+        <slot/>
+      </div>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-full-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import bs from './mixins/bs'
+export default {
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
+}
+</script>
@@ -0,0 +1,31 @@
+<template>
+  <div class="d2-container-full">
+    <div v-if="$slots.header" class="d2-container-full__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-full__body" ref="body">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-full__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import scroll from './mixins/normal'
+export default {
+  name: 'd2-container-full',
+  mixins: [
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
+}
+</script>
@@ -0,0 +1,23 @@
+<template>
+  <div class="d2-container-ghost-bs">
+    <div v-if="$slots.header" class="d2-container-ghost-bs__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-ghost-bs__body" ref="wrapper">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-ghost-bs__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import bs from './mixins/bs'
+export default {
+  name: 'd2-container-card-bs',
+  mixins: [
+    bs
+  ]
+}
+</script>
@@ -0,0 +1,31 @@
+<template>
+  <div class="d2-container-ghost">
+    <div v-if="$slots.header" class="d2-container-ghost__header" ref="header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container-ghost__body" ref="body">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container-ghost__footer" ref="footer">
+      <slot name="footer"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import scroll from './mixins/normal'
+export default {
+  name: 'd2-container-ghost',
+  mixins: [
+    scroll
+  ],
+  mounted () {
+    // 增加滚动事件监听
+    this.addScrollListener()
+  },
+  beforeDestroy () {
+    // 移除滚动事件监听
+    this.removeScrollListener()
+  }
+}
+</script>
@@ -0,0 +1,79 @@
+<template>
+  <div
+    v-if="show"
+    class="d2-source"
+    :class="{ 'd2-source--active': isActive }"
+    @click="handleClick">
+    <d2-icon name="code"/> 本页源码
+  </div>
+</template>
+
+<script>
+import { last, get } from 'lodash'
+export default {
+  data () {
+    return {
+      isActive: false,
+      path: ''
+    }
+  },
+  computed: {
+    show () {
+      return process.env.VUE_APP_BUILD_MODE === 'TRAVIS' || process.env.NODE_ENV === 'development'
+    }
+  },
+  watch: {
+    $route: {
+      handler (to) {
+        this.path = get(last(to.matched), 'components.default.__source')
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    // 一秒后显示按钮
+    setTimeout(() => {
+      this.isActive = true
+    }, 500)
+  },
+  methods: {
+    // 点击按钮的时候跳转到源代码
+    handleClick () {
+      this.$open(`${process.env.VUE_APP_REPO}/blob/master/${this.path}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-source {
+  $borderRadius: 4px;
+  $paddingLR: 15px;
+  $paddingTB: 7px;
+  $fontSize: 12px;
+  $rightOuter: $paddingLR / 2;
+  opacity: 0;
+  position: fixed;
+  z-index: 9999;
+  right: - $borderRadius - $rightOuter;
+  bottom: 20px;
+  font-size: $fontSize;
+  line-height: $fontSize;
+  font-weight: bold;
+  border-radius: $borderRadius;
+  padding: $paddingTB $paddingLR;
+  padding-right: $borderRadius + $paddingLR;
+  background-color: rgba(#000, .7);
+  border: 1px solid #000;
+  color: #FFF;
+  transition: all .3s;
+  @extend %unable-select;
+  &.d2-source--active {
+    opacity: 1;
+  }
+  &:hover {
+    right: - $borderRadius;
+    background-color: rgba(#000, .9);
+  }
+}
+</style>
@@ -0,0 +1,62 @@
+import BScroll from 'better-scroll'
+export default {
+  props: {
+    // 滚动优化的选项
+    betterScrollOptions: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      BS: null
+    }
+  },
+  mounted () {
+    this.scrollInit()
+  },
+  beforeDestroy () {
+    this.scrollDestroy()
+  },
+  methods: {
+    scrollInit () {
+      // 初始化 bs
+      this.BS = new BScroll(this.$refs.wrapper, Object.assign({
+        mouseWheel: true,
+        click: true,
+        scrollbar: {
+          fade: true,
+          interactive: false
+        }
+      }, this.betterScrollOptions))
+      // 滚动时发出事件 并且统一返回的数据格式
+      this.BS.on('scroll', ({ x, y }) => this.$emit('scroll', {
+        x: -x,
+        y: -y
+      }))
+    },
+    scrollDestroy () {
+      // https://github.com/d2-projects/d2-admin/issues/75
+      try {
+        this.BS.destroy()
+      } catch (e) {
+        delete this.BS
+        this.BS = null
+      }
+    },
+    // 外部调用的方法 返回顶部
+    scrollToTop () {
+      if (this.BS) this.BS.scrollTo(0, 0, 300)
+    },
+    // 手动发出滚动事件
+    scroll () {
+      if (this.BS) {
+        this.$emit('scroll', {
+          x: -this.BS.x,
+          y: -this.BS.y
+        })
+      }
+    }
+  }
+}
@@ -0,0 +1,67 @@
+// 提供滚动方面的功能
+// 非滚动优化模式通用
+
+import { throttle } from 'lodash'
+
+// 生成滚动事件的 handler
+function handleMaker (wait) {
+  return throttle(e => {
+    this.$emit('scroll', {
+      x: e.target.scrollLeft,
+      y: e.target.scrollTop
+    })
+  }, wait)
+}
+
+export default {
+  props: {
+    // 滚动事件节流间隔
+    scrollDelay: {
+      type: Number,
+      required: false,
+      default: 10
+    }
+  },
+  data () {
+    return {
+      handleScroll: null
+    }
+  },
+  watch: {
+    scrollDelay (val) {
+      // 移除旧的监听
+      this.removeScrollListener()
+      // 生成新的 handle 方法
+      this.handleScroll = handleMaker.call(this, val)
+      // 添加新的监听
+      this.addScrollListener()
+    }
+  },
+  methods: {
+    // 增加滚动事件监听
+    addScrollListener () {
+      if (typeof this.handleScroll !== 'function') {
+        // mounted 生命周期内调用这个方法的时候会进入这里的判断
+        this.handleScroll = handleMaker.call(this, this.scrollDelay)
+      }
+      // 添加监听
+      this.$refs.body.addEventListener('scroll', this.handleScroll)
+    },
+    // 移除滚动事件监听
+    removeScrollListener () {
+      this.$refs.body.removeEventListener('scroll', this.handleScroll)
+    },
+    // 外部调用的方法 返回顶部
+    scrollToTop () {
+      const smoothscroll = () => {
+        const body = this.$refs.body
+        const currentScroll = body.scrollTop
+        if (currentScroll > 0) {
+          window.requestAnimationFrame(smoothscroll)
+          body.scrollTo(0, currentScroll - (currentScroll / 5))
+        }
+      }
+      smoothscroll()
+    }
+  }
+}
@@ -0,0 +1,106 @@
+// 组件
+import d2ContainerFull from './components/d2-container-full.vue'
+import d2ContainerFullBs from './components/d2-container-full-bs.vue'
+import d2ContainerGhost from './components/d2-container-ghost.vue'
+import d2ContainerGhostBs from './components/d2-container-ghost-bs.vue'
+import d2ContainerCard from './components/d2-container-card.vue'
+import d2ContainerCardBs from './components/d2-container-card-bs.vue'
+import d2Source from './components/d2-source.vue'
+
+export default {
+  name: 'd2-container',
+  props: {
+    // 容器样式
+    type: {
+      type: String,
+      required: false,
+      default: 'full'
+    },
+    // 滚动优化
+    betterScroll: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  computed: {
+    // 始终返回渲染组件
+    component () {
+      if (this.type === 'card' && !this.betterScroll) return d2ContainerCard
+      if (this.type === 'card' && this.betterScroll) return d2ContainerCardBs
+      if (this.type === 'ghost' && !this.betterScroll) return d2ContainerGhost
+      if (this.type === 'ghost' && this.betterScroll) return d2ContainerGhostBs
+      if (this.type === 'full' && !this.betterScroll) return d2ContainerFull
+      if (this.type === 'full' && this.betterScroll) return d2ContainerFullBs
+      else {
+        return 'div'
+      }
+    }
+  },
+  render (h) {
+    const slots = [ this.$slots.default ]
+    if (this.$slots.header) slots.push(h('template', { slot: 'header' }, [ this.$slots.header ]))
+    if (this.$slots.footer) slots.push(h('template', { slot: 'footer' }, [ this.$slots.footer ]))
+    return h('div', {
+      ref: 'container',
+      class: 'container-component'
+    }, [
+      h(this.component, {
+        ref: 'component',
+        props: this.$attrs,
+        on: {
+          scroll: e => this.$emit('scroll', e)
+        }
+      }, slots),
+      h(d2Source)
+    ])
+  },
+  methods: {
+    // 返回顶部
+    scrollToTop () {
+      this.$refs.component.scrollToTop()
+      // 如果开启了 better scroll 还需要手动触发一遍 scroll 事件
+      const bs = this.$refs.component.BS
+      if (bs) this.$refs.component.scroll()
+    },
+    // 用法同原生方法 scrollBy
+    scrollBy (x = 0, y = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollBy(-x, -y, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollBy(x, y)
+      }
+    },
+    // 用法同原生方法 scrollTo
+    scrollTo (x = 0, y = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollTo(-x, -y, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollTo(x, y)
+      }
+    },
+    // 用法同原生方法 scrollTop
+    scrollTop (top = 0, time = 300) {
+      if (this.betterScroll) {
+        const bs = this.$refs.component.BS
+        if (bs) {
+          bs.scrollTo(bs.x, -top, time)
+          // 手动触发一遍 scroll 事件
+          this.$refs.component.scroll()
+        }
+      } else {
+        this.$refs.component.$refs.body.scrollTop = top
+      }
+    }
+  }
+}
@@ -0,0 +1,103 @@
+<template>
+  <span></span>
+</template>
+
+<script>
+import CountUp from 'countup.js'
+export default {
+  name: 'd2-count-up',
+  props: {
+    start: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    decimals: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    duration: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    options: {
+      type: Object,
+      required: false,
+      default () {
+        return {}
+      }
+    },
+    callback: {
+      type: Function,
+      required: false,
+      default: () => {}
+    }
+  },
+  data () {
+    return {
+      c: null
+    }
+  },
+  watch: {
+    end (value) {
+      if (this.c && this.c.update) {
+        this.c.update(value)
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      if (!this.c) {
+        this.c = new CountUp(
+          this.$el,
+          this.start,
+          this.end,
+          this.decimals,
+          this.duration,
+          this.options
+        )
+        this.c.start(() => {
+          this.callback(this.c)
+        })
+      }
+    },
+    destroy () {
+      this.c = null
+    }
+  },
+  beforeDestroy () {
+    this.destroy()
+  },
+  start (callback) {
+    if (this.c && this.c.start) {
+      this.c.start(() => {
+        callback && callback(this.c)
+      })
+    }
+  },
+  pauseResume () {
+    if (this.c && this.c.pauseResume) {
+      this.c.pauseResume()
+    }
+  },
+  reset () {
+    if (this.c && this.c.reset) {
+      this.c.reset()
+    }
+  },
+  update (newEndVal) {
+    if (this.c && this.c.update) {
+      this.c.update(newEndVal)
+    }
+  }
+}
+</script>
@@ -0,0 +1,66 @@
+<template>
+  <pre class="d2-highlight hljs" v-html="highlightHTML"></pre>
+</template>
+
+<script>
+// 相关文档
+// https://highlightjs.org/usage/
+// http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
+import highlight from 'highlight.js'
+import '../highlight-styles/github-gist.css'
+import htmlFormat from './libs/htmlFormat'
+export default {
+  name: 'd2-highlight',
+  props: {
+    code: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    formatHtml: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    lang: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      highlightHTML: ''
+    }
+  },
+  mounted () {
+    this.highlight()
+  },
+  watch: {
+    code () {
+      this.highlight()
+    }
+  },
+  methods: {
+    highlight () {
+      const code = this.formatHtml ? htmlFormat(this.code) : this.code
+      this.highlightHTML = highlight.highlightAuto(code, [
+        this.lang,
+        'html',
+        'javascript',
+        'json',
+        'css',
+        'scss',
+        'less'
+      ]).value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-highlight {
+  margin: 0px;
+  border-radius: 4px;
+}
+</style>
@@ -0,0 +1,365 @@
+/* eslint-disable */
+
+// 功能
+// 将HTML字符串格式化
+
+const format = (function() {
+  function style_html(html_source, indent_size, indent_character, max_char) {
+    var Parser, multi_parser;
+    function Parser() {
+      this.pos = 0;
+      this.token = '';
+      this.current_mode = 'CONTENT';
+      this.tags = {
+        parent: 'parent1',
+        parentcount: 1,
+        parent1: ''
+      };
+      this.tag_type = '';
+      this.token_text = this.last_token = this.last_text = this.token_type = '';
+      this.Utils = {
+        whitespace: "\n\r\t ".split(''),
+        single_token: 'br,input,link,meta,!doctype,basefont,base,area,hr,wbr,param,img,isindex,?xml,embed'.split(','),
+        extra_liners: 'head,body,/html'.split(','),
+        in_array: function(what, arr) {
+          for (var i = 0; i < arr.length; i++) {
+            if (what === arr[i]) {
+              return true;
+            }
+          }
+          return false;
+        }
+      }
+      this.get_content = function() {
+        var char = '';
+        var content = [];
+        var space = false;
+        while (this.input.charAt(this.pos) !== '<') {
+          if (this.pos >= this.input.length) {
+            return content.length ? content.join('') : ['', 'TK_EOF'];
+          }
+          char = this.input.charAt(this.pos);
+          this.pos++;
+          this.line_char_count++;
+          if (this.Utils.in_array(char, this.Utils.whitespace)) {
+            if (content.length) {
+              space = true;
+            }
+            this.line_char_count--;
+            continue;
+          } else if (space) {
+            if (this.line_char_count >= this.max_char) {
+              content.push('\n');
+              for (var i = 0; i < this.indent_level; i++) {
+                content.push(this.indent_string);
+              }
+              this.line_char_count = 0;
+            } else {
+              content.push(' ');
+              this.line_char_count++;
+            }
+            space = false;
+          }
+          content.push(char);
+        }
+        return content.length ? content.join('') : '';
+      }
+      this.get_script = function() {
+        var char = '';
+        var content = [];
+        var reg_match = new RegExp('\<\/script' + '\>', 'igm');
+        reg_match.lastIndex = this.pos;
+        var reg_array = reg_match.exec(this.input);
+        var end_script = reg_array ? reg_array.index: this.input.length;
+        while (this.pos < end_script) {
+          if (this.pos >= this.input.length) {
+            return content.length ? content.join('') : ['', 'TK_EOF'];
+          }
+          char = this.input.charAt(this.pos);
+          this.pos++;
+          content.push(char);
+        }
+        return content.length ? content.join('') : '';
+      }
+      this.record_tag = function(tag) {
+        if (this.tags[tag + 'count']) {
+          this.tags[tag + 'count']++;
+          this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
+        } else {
+          this.tags[tag + 'count'] = 1;
+          this.tags[tag + this.tags[tag + 'count']] = this.indent_level;
+        }
+        this.tags[tag + this.tags[tag + 'count'] + 'parent'] = this.tags.parent;
+        this.tags.parent = tag + this.tags[tag + 'count'];
+      }
+      this.retrieve_tag = function(tag) {
+        if (this.tags[tag + 'count']) {
+          var temp_parent = this.tags.parent;
+          while (temp_parent) {
+            if (tag + this.tags[tag + 'count'] === temp_parent) {
+              break;
+            }
+            temp_parent = this.tags[temp_parent + 'parent'];
+          }
+          if (temp_parent) {
+            this.indent_level = this.tags[tag + this.tags[tag + 'count']];
+            this.tags.parent = this.tags[temp_parent + 'parent'];
+          }
+          delete this.tags[tag + this.tags[tag + 'count'] + 'parent'];
+          delete this.tags[tag + this.tags[tag + 'count']];
+          if (this.tags[tag + 'count'] == 1) {
+            delete this.tags[tag + 'count'];
+          } else {
+            this.tags[tag + 'count']--;
+          }
+        }
+      }
+      this.get_tag = function() {
+        var char = '';
+        var content = [];
+        var space = false;
+        do {
+          if (this.pos >= this.input.length) {
+            return content.length ? content.join('') : ['', 'TK_EOF'];
+          }
+          char = this.input.charAt(this.pos);
+          this.pos++;
+          this.line_char_count++;
+          if (this.Utils.in_array(char, this.Utils.whitespace)) {
+            space = true;
+            this.line_char_count--;
+            continue;
+          }
+          if (char === "'" || char === '"') {
+            if (!content[1] || content[1] !== '!') {
+              char += this.get_unformatted(char);
+              space = true;
+            }
+          }
+          if (char === '=') {
+            space = false;
+          }
+          if (content.length && content[content.length - 1] !== '=' && char !== '>' && space) {
+            if (this.line_char_count >= this.max_char) {
+              this.print_newline(false, content);
+              this.line_char_count = 0;
+            } else {
+              content.push(' ');
+              this.line_char_count++;
+            }
+            space = false;
+          }
+          content.push(char);
+        } while ( char !== '>');
+        var tag_complete = content.join('');
+        var tag_index;
+        if (tag_complete.indexOf(' ') != -1) {
+          tag_index = tag_complete.indexOf(' ');
+        } else {
+          tag_index = tag_complete.indexOf('>');
+        }
+        var tag_check = tag_complete.substring(1, tag_index).toLowerCase();
+        if (tag_complete.charAt(tag_complete.length - 2) === '/' || this.Utils.in_array(tag_check, this.Utils.single_token)) {
+          this.tag_type = 'SINGLE';
+        } else if (tag_check === 'script') {
+          this.record_tag(tag_check);
+          this.tag_type = 'SCRIPT';
+        } else if (tag_check === 'style') {
+          this.record_tag(tag_check);
+          this.tag_type = 'STYLE';
+        } else if (tag_check.charAt(0) === '!') {
+          if (tag_check.indexOf('[if') != -1) {
+            if (tag_complete.indexOf('!IE') != -1) {
+              var comment = this.get_unformatted('-->', tag_complete);
+              content.push(comment);
+            }
+            this.tag_type = 'START';
+          } else if (tag_check.indexOf('[endif') != -1) {
+            this.tag_type = 'END';
+            this.unindent();
+          } else if (tag_check.indexOf('[cdata[') != -1) {
+            var comment = this.get_unformatted(']]>', tag_complete);
+            content.push(comment);
+            this.tag_type = 'SINGLE';
+          } else {
+            var comment = this.get_unformatted('-->', tag_complete);
+            content.push(comment);
+            this.tag_type = 'SINGLE';
+          }
+        } else {
+          if (tag_check.charAt(0) === '/') {
+            this.retrieve_tag(tag_check.substring(1));
+            this.tag_type = 'END';
+          } else {
+            this.record_tag(tag_check);
+            this.tag_type = 'START';
+          }
+          if (this.Utils.in_array(tag_check, this.Utils.extra_liners)) {
+            this.print_newline(true, this.output);
+          }
+        }
+        return content.join('');
+      }
+      this.get_unformatted = function(delimiter, orig_tag) {
+        if (orig_tag && orig_tag.indexOf(delimiter) != -1) {
+          return '';
+        }
+        var char = '';
+        var content = '';
+        var space = true;
+        do {
+          char = this.input.charAt(this.pos);
+          this.pos++
+          if (this.Utils.in_array(char, this.Utils.whitespace)) {
+            if (!space) {
+              this.line_char_count--;
+              continue;
+            }
+            if (char === '\n' || char === '\r') {
+              content += '\n';
+              for (var i = 0; i < this.indent_level; i++) {
+                content += this.indent_string;
+              }
+              space = false;
+              this.line_char_count = 0;
+              continue;
+            }
+          }
+          content += char;
+          this.line_char_count++;
+          space = true;
+
+        } while ( content . indexOf ( delimiter ) == -1);
+        return content;
+      }
+      this.get_token = function() {
+        var token;
+        if (this.last_token === 'TK_TAG_SCRIPT') {
+          var temp_token = this.get_script();
+          if (typeof temp_token !== 'string') {
+            return temp_token;
+          }
+          //token = js_beautify(temp_token, this.indent_size, this.indent_character, this.indent_level);
+          //return [token, 'TK_CONTENT'];
+          return [temp_token, 'TK_CONTENT'];
+        }
+        if (this.current_mode === 'CONTENT') {
+          token = this.get_content();
+          if (typeof token !== 'string') {
+            return token;
+          } else {
+            return [token, 'TK_CONTENT'];
+          }
+        }
+        if (this.current_mode === 'TAG') {
+          token = this.get_tag();
+          if (typeof token !== 'string') {
+            return token;
+          } else {
+            var tag_name_type = 'TK_TAG_' + this.tag_type;
+            return [token, tag_name_type];
+          }
+        }
+      }
+      this.printer = function(js_source, indent_character, indent_size, max_char) {
+        this.input = js_source || '';
+        this.output = [];
+        this.indent_character = indent_character || ' ';
+        this.indent_string = '';
+        this.indent_size = indent_size || 2;
+        this.indent_level = 0;
+        this.max_char = max_char || 70;
+        this.line_char_count = 0;
+        for (var i = 0; i < this.indent_size; i++) {
+          this.indent_string += this.indent_character;
+        }
+        this.print_newline = function(ignore, arr) {
+          this.line_char_count = 0;
+          if (!arr || !arr.length) {
+            return;
+          }
+          if (!ignore) {
+            while (this.Utils.in_array(arr[arr.length - 1], this.Utils.whitespace)) {
+              arr.pop();
+            }
+          }
+          arr.push('\n');
+          for (var i = 0; i < this.indent_level; i++) {
+            arr.push(this.indent_string);
+          }
+        }
+        this.print_token = function(text) {
+          this.output.push(text);
+        }
+        this.indent = function() {
+          this.indent_level++;
+        }
+        this.unindent = function() {
+          if (this.indent_level > 0) {
+            this.indent_level--;
+          }
+        }
+      }
+      return this;
+    }
+    multi_parser = new Parser();
+    multi_parser.printer(html_source, indent_character, indent_size);
+    while (true) {
+      var t = multi_parser.get_token();
+      multi_parser.token_text = t[0];
+      multi_parser.token_type = t[1];
+      if (multi_parser.token_type === 'TK_EOF') {
+        break;
+      }
+      switch (multi_parser.token_type) {
+      case 'TK_TAG_START':
+      case 'TK_TAG_SCRIPT':
+      case 'TK_TAG_STYLE':
+        multi_parser.print_newline(false, multi_parser.output);
+        multi_parser.print_token(multi_parser.token_text);
+        multi_parser.indent();
+        multi_parser.current_mode = 'CONTENT';
+        break;
+      case 'TK_TAG_END':
+        multi_parser.print_newline(true, multi_parser.output);
+        multi_parser.print_token(multi_parser.token_text);
+        multi_parser.current_mode = 'CONTENT';
+        break;
+      case 'TK_TAG_SINGLE':
+        multi_parser.print_newline(false, multi_parser.output);
+        multi_parser.print_token(multi_parser.token_text);
+        multi_parser.current_mode = 'CONTENT';
+        break;
+      case 'TK_CONTENT':
+        if (multi_parser.token_text !== '') {
+          multi_parser.print_newline(false, multi_parser.output);
+          multi_parser.print_token(multi_parser.token_text);
+        }
+        multi_parser.current_mode = 'TAG';
+        break;
+      }
+      multi_parser.last_token = multi_parser.token_type;
+      multi_parser.last_text = multi_parser.token_text;
+    }
+    return multi_parser.output.join('');
+  }
+  return function(data) {
+    var dataHolder = ['__dataHolder_', [Math.random(), Math.random(), Math.random(), Math.random()].join('_').replace(/[^0-9]/g, '_'), '_'].join('_');
+    var dataHolders = {};
+    var index = 0;
+    data = data.replace(/(\")(data:[^\"]*)(\")/g,
+    function($0, $1, $2, $3) {
+      var name = dataHolder + index++;
+      dataHolders[name] = $2;
+      return $1 + name + $3;
+    })
+    data = style_html(data, 2, ' ', 0x10000000);
+    data = data.replace(new RegExp(dataHolder + '[0-9]+', 'g'),
+    function($0) {
+      return dataHolders[$0];
+    });
+    return data;
+  }
+})();
+
+export default format
@@ -0,0 +1,196 @@
+<template>
+  <span>
+    <el-popover
+      ref="pop"
+      v-model="pop"
+      :placement="placement"
+      width="300"
+      trigger="click">
+      <el-row type="flex" justify="end" class="d2-mb-10" v-if="clearable">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          class="d2-fr"
+          @click="selectIcon()">
+          清空
+        </el-button>
+      </el-row>
+      <el-input
+        v-model="searchText"
+        :clearable="true"
+        placeholder="搜索 比如 'plus'"
+        prefix-icon="el-icon-search">
+      </el-input>
+      <el-collapse v-if="!searchMode" class="d2-icon-select--group" v-model="collapseActive">
+        <el-collapse-item v-for="(item, index) in icon" :key="index" :title="item.title" :name="index" class="d2-icon-select--class">
+          <el-row class="d2-icon-select--class-row">
+            <el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
+              <i :class="'fa fa-' + iconName"></i>
+            </el-col>
+          </el-row>
+        </el-collapse-item>
+      </el-collapse>
+      <div v-if="searchMode" class="d2-icon-select--group">
+        <div class="d2-icon-select--class" v-for="(item, index) in iconFilted" :key="index">
+          <div class="d2-icon-select--class-title">{{item.title}}</div>
+          <el-row class="d2-icon-select--class-row">
+            <el-col class="d2-icon-select--class-col" v-for="(iconName, iconIndex) in item.icon" :key="iconIndex" :span="4" @click.native="selectIcon(iconName)">
+              <i :class="'fa fa-' + iconName"></i>
+            </el-col>
+          </el-row>
+        </div>
+      </div>
+    </el-popover>
+    <!-- 允许用户输入 -->
+    <el-input
+      v-if="userInput"
+      v-model="currentValue"
+      v-bind="bind"
+      style="max-width: 240px;">
+      <template v-if="value" slot="prepend">
+        <i :class="'fa fa-' + value"></i>
+      </template>
+      <el-button v-popover:pop slot="append">
+        <i class="fa fa-list"></i>
+      </el-button>
+    </el-input>
+    <!-- 不允许用户输入 -->
+    <el-button v-popover:pop v-if="!userInput">
+      <template v-if="value">
+        <i :class="'fa fa-' + value"></i>
+      </template>
+      {{value ? value : placeholder}}
+    </el-button>
+  </span>
+</template>
+
+<script>
+import icon from './data/index'
+export default {
+  name: 'd2-icon-select',
+  props: {
+    // 值
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      required: false,
+      default: '请选择'
+    },
+    // 弹出界面的方向
+    placement: {
+      type: String,
+      required: false,
+      default: 'right'
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 是否允许用户输入
+    userInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否在选择后自动关闭
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      // 绑定弹出框
+      pop: false,
+      // 所有图标
+      icon,
+      // 组件内输入框的值
+      currentValue: '',
+      // 搜索的文字
+      searchText: '',
+      // 不是搜索的时候显示的折叠面板绑定的展开数据
+      collapseActive: []
+      // collapseActive: [...Array(icon.length)].map((e, i) => i)
+    }
+  },
+  computed: {
+    // 输入框上绑定的设置
+    bind () {
+      return {
+        placeholder: this.placeholder,
+        clearable: this.clearable,
+        ...this.$attrs
+      }
+    },
+    // 是否在搜索
+    searchMode () {
+      return !!this.searchText
+    },
+    // 过滤后的图标
+    iconFilted () {
+      return this.icon.map(iconClass => ({
+        title: iconClass.title,
+        icon: iconClass.icon.filter(icon => icon.indexOf(this.searchText) >= 0)
+      })).filter(iconClass => iconClass.icon.length > 0)
+    }
+  },
+  watch: {
+    value (value) {
+      this.currentValue = value
+    }
+  },
+  created () {
+    this.currentValue = this.value
+  },
+  methods: {
+    selectIcon (iconName = '') {
+      this.$emit('input', iconName)
+      if (iconName && this.autoClose) {
+        this.pop = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-icon-select--group {
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  border-top: none;
+  border-bottom: none;
+  .d2-icon-select--class {
+    .d2-icon-select--class-title {
+      line-height: 30px;
+      text-align: center;
+      background-color: $color-bg;
+      border-radius: 4px;
+      margin: 10px 0px;
+    }
+    .d2-icon-select--class-row {
+      .d2-icon-select--class-col {
+        line-height: 40px;
+        text-align: center;
+        color: $color-text-sub;
+        &:hover {
+          color: $color-text-main;
+          background-color: $color-bg;
+          border-radius: 4px;
+          font-size: 26px;
+          box-shadow: inset 0px 0px 0px 1px $color-border-1;
+        }
+      }
+    }
+  }
+}
+</style>
@@ -0,0 +1,179 @@
+<template>
+  <span>
+    <el-popover
+      ref="pop"
+      v-model="pop"
+      :placement="placement"
+      width="300"
+      trigger="click">
+      <el-row type="flex" justify="end" class="d2-mb-10" v-if="clearable">
+        <el-button
+          type="danger"
+          icon="el-icon-delete"
+          size="mini"
+          class="d2-fr"
+          @click="selectIcon()">
+          清空
+        </el-button>
+      </el-row>
+      <el-input
+        v-model="searchText"
+        :clearable="true"
+        placeholder="搜索 比如 'plus'"
+        prefix-icon="el-icon-search">
+      </el-input>
+      <el-row class="d2-icon-svg-select--group">
+        <el-col
+          v-for="(item, index) in iconFilted"
+          :key="index"
+          class="d2-icon-svg-select--item"
+          :span="4"
+          @click.native="selectIcon(item)">
+          <d2-icon-svg :name="item"/>
+        </el-col>
+      </el-row>
+    </el-popover>
+    <!-- 允许用户输入 -->
+    <el-input
+      v-if="userInput"
+      v-model="currentValue"
+      v-bind="bind"
+      style="max-width: 240px;">
+      <template v-if="value" slot="prepend">
+        <d2-icon-svg
+          class="d2-icon-svg-select--input-preview"
+          :name="value"/>
+      </template>
+      <el-button v-popover:pop slot="append">
+        <i class="fa fa-list"></i>
+      </el-button>
+    </el-input>
+    <!-- 不允许用户输入 -->
+    <el-button v-popover:pop v-if="!userInput">
+      <span flex="dir:left main:center cross:center">
+        <d2-icon-svg
+          v-if="value"
+          class="d2-icon-svg-select--input-preview d2-mr-10"
+          :name="value"/>
+        <span>{{value ? value : placeholder}}</span>
+      </span>
+    </el-button>
+  </span>
+</template>
+
+<script>
+export default {
+  name: 'd2-icon-svg-select',
+  props: {
+    // 值
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 占位符
+    placeholder: {
+      type: String,
+      required: false,
+      default: '请选择'
+    },
+    // 弹出界面的方向
+    placement: {
+      type: String,
+      required: false,
+      default: 'right'
+    },
+    // 是否可清空
+    clearable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    // 是否允许用户输入
+    userInput: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否在选择后自动关闭
+    autoClose: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      // 绑定弹出框
+      pop: false,
+      // 组件内输入框的值
+      currentValue: '',
+      // 搜索的文字
+      searchText: ''
+    }
+  },
+  computed: {
+    // 输入框上绑定的设置
+    bind () {
+      return {
+        placeholder: this.placeholder,
+        clearable: this.clearable,
+        ...this.$attrs
+      }
+    },
+    // 是否在搜索
+    searchMode () {
+      return !!this.searchText
+    },
+    // 过滤后的图标
+    iconFilted () {
+      return this.$IconSvg.filter(icon => icon.indexOf(this.searchText) >= 0)
+    }
+  },
+  watch: {
+    value (value) {
+      this.currentValue = value
+    }
+  },
+  created () {
+    this.currentValue = this.value
+  },
+  methods: {
+    selectIcon (iconName = '') {
+      this.$emit('input', iconName)
+      if (iconName && this.autoClose) {
+        this.pop = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.d2-icon-svg-select--input-preview {
+  height: 14px;
+  width: 14px;
+  display: block;
+}
+.d2-icon-svg-select--group {
+  max-height: 400px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  margin-top: 10px;
+}
+.d2-icon-svg-select--item {
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  svg {
+    height: 20px;
+    width: 20px;
+  }
+  &:hover {
+    background-color: $color-bg;
+    border-radius: 4px;
+    box-shadow: inset 0px 0px 0px 1px $color-border-1;
+  }
+}
+</style>
@@ -0,0 +1,22 @@
+<template>
+  <svg aria-hidden="true">
+    <use :xlink:href="icon"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'd2-icon-svg',
+  props: {
+    name: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    icon () {
+      return `#d2-${this.name}`
+    }
+  }
+}
+</script>
@@ -0,0 +1,17 @@
+<template>
+  <i class="fa" :class="`fa-${name}`" aria-hidden="true"></i>
+</template>
+
+<script>
+import './font-awesome-4.7.0/css/font-awesome.min.css'
+export default {
+  name: 'd2-icon',
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: 'font-awesome'
+    }
+  }
+}
+</script>
@@ -0,0 +1,32 @@
+<template>
+  <el-button-group>
+    <el-button v-if="title" size="mini" @click="$open(link)">{{title}}</el-button>
+    <el-button size="mini" @click="$open(link)">
+      <d2-icon :name="icon"/>
+      {{link}}
+    </el-button>
+  </el-button-group>
+</template>
+
+<script>
+export default {
+  name: 'd2-link-btn',
+  props: {
+    title: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    icon: {
+      type: String,
+      required: false,
+      default: 'link'
+    },
+    link: {
+      type: String,
+      required: false,
+      default: 'https://github.com/d2-projects'
+    }
+  }
+}
+</script>
@@ -0,0 +1,146 @@
+<template>
+  <div class="component-markdown">
+    <div class="spin-group" v-if="!markedHTML">
+      <div>正在加载</div>
+    </div>
+    <div class="markdown-body" v-html="markedHTML"></div>
+  </div>
+</template>
+
+<script>
+import marked from 'marked'
+import highlight from 'highlight.js'
+import '../highlight-styles/github-gist.css'
+import bandupan from './plugin/baidupan'
+import 'github-markdown-css'
+import { ComponentsMarkdownBase } from '@api/components.markdown'
+export default {
+  name: 'd2-markdown',
+  props: {
+    url: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    source: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    highlight: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 百度网盘分享链接特殊样式
+    baidupan: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  data () {
+    return {
+      getReadmePublicPath: '',
+      markedHTML: ''
+    }
+  },
+  mounted () {
+    if (this.url) {
+      this.initWithUrl()
+    } else if (this.source) {
+      this.initWithMd()
+    } else {
+      console.log('not mounted init')
+    }
+  },
+  methods: {
+    // 使用 md 初始化
+    initWithMd () {
+      this.markedHTML = this.marked(this.source)
+    },
+    // 使用 url 初始化
+    async initWithUrl () {
+      this.markedHTML = await this.getReadme(this.url)
+    },
+    // 从 url 加载原始数据
+    async getReadme (url) {
+      const data = await ComponentsMarkdownBase(url)
+      return this.marked(data)
+    },
+    marked (data) {
+      const renderer = new marked.Renderer()
+      renderer.blockquote = (quote) => {
+        // 百度网盘
+        return (this.baidupan && bandupan(quote, this.$baseUrl)) || `<blockquote>${quote}</blockquote>`
+      }
+      return marked(data, {
+        ...this.highlight ? { highlight: (code) => highlight.highlightAuto(code).value } : {},
+        renderer
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.component-markdown {
+  .spin-group {
+    height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    color: $color-primary;
+  }
+}
+// 百度云
+$baidupanHeight: 30px;
+$baidupanPadding: 10px;
+.baidupan {
+  overflow: hidden;
+  margin-bottom: 16px;
+  .container {
+    height: $baidupanHeight + 2 * $baidupanPadding;
+    border-radius: 4px;
+    border: 1px solid #dfe2e5;
+    padding: $baidupanPadding;
+    float: left;
+    cursor: pointer;
+    &:hover {
+      border: 1px solid $color-primary;
+      .line {
+        background-color: $color-primary;
+      }
+    }
+    .icon {
+      float: left;
+      height: $baidupanHeight;
+      text-align: center;
+      width: 40px;
+      margin-right: $baidupanPadding;
+      img {
+        width: 40px;
+      }
+    }
+    .url {
+      float: left;
+      height: $baidupanHeight;
+      line-height: $baidupanHeight;
+      color: $color-text-main;
+    }
+    .line {
+      float: left;
+      height: $baidupanHeight + 2 * $baidupanPadding;
+      width: 1px;
+      margin: -$baidupanPadding $baidupanPadding;
+      background-color: #dfe2e5;
+    }
+    .pwd {
+      float: left;
+      height: $baidupanHeight;
+      line-height: $baidupanHeight;
+    }
+  }
+}
+</style>
@@ -0,0 +1,35 @@
+export default (quote, assetsPublicPath) => {
+  const _quote = quote.replace(/<[^<>]+>/g, '').trim()
+  const bdPanUrl = /^https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+$/i
+  const bdPanUrlPwd = /^链接: https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+ 密码: [a-z0-9]{4}$/i
+  if (bdPanUrl.test(_quote)) {
+    return `<div class="baidupan">
+      <a href="${_quote}" class="container">
+        <div class="icon">
+          <img src="${assetsPublicPath}image/baidu-pan-logo.png" style="background-color: transparent;">
+        </div>
+        <div class="url">${_quote}</div>
+      </a>
+    </div>`
+  } else if (bdPanUrlPwd.test(_quote)) {
+    const url = _quote.match(/https:\/\/pan\.baidu\.com\/s\/[a-z0-9]+/i)
+    const pwd = _quote.match(/[a-z0-9]{4}$/i)
+    return `<div class="baidupan">
+      <div class="container">
+        <a href="${url[0]}">
+          <div class="icon">
+            <img src="${assetsPublicPath}image/baidu-pan-logo.png" style="background-color: transparent;">
+          </div>
+          <div class="url">${url[0]}</div>
+        </a>
+        <div class="line"></div>
+        <div class="pwd">
+          密码
+          <span>${pwd[0]}</span>
+        </div>
+      </div>
+    </div>`
+  } else {
+    return false
+  }
+}
@@ -0,0 +1,62 @@
+<template>
+  <textarea ref="mde"></textarea>
+</template>
+
+<script>
+import SimpleMDE from 'simplemde'
+import 'simplemde/dist/simplemde.min.css'
+export default {
+  name: 'd2-mde',
+  props: {
+    // 值
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    // 配置参数
+    config: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      // 编辑器实例
+      mde: null,
+      // 编辑器默认参数
+      // 详见 https://github.com/sparksuite/simplemde-markdown-editor#configuration
+      defaultConfig: {
+        autoDownloadFontAwesome: false
+      }
+    }
+  },
+  mounted () {
+    // 初始化
+    this.init()
+  },
+  destroyed () {
+    // 在组件销毁后销毁实例
+    this.mde = null
+  },
+  methods: {
+    // 初始化
+    init () {
+      // 合并参数
+      const config = Object.assign({}, this.defaultConfig, this.config)
+      // 初始化
+      this.mde = new SimpleMDE({
+        ...config,
+        // 初始值
+        initialValue: this.value,
+        // 挂载元素
+        element: this.$refs.mde
+      })
+      this.mde.codemirror.on('change', () => {
+        this.$emit('input', this.mde.value())
+      })
+    }
+  }
+}
+</script>
@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="banner"
+    :class="{
+      'with-link': link
+    }"
+    flex="dir:top main:center cross:top">
+    <p class="banner--title">{{title}}</p>
+    <p class="banner--sub-title">{{subTitle}}</p>
+    <p v-if="link" class="banner--link" @click="handleLinkClick">
+      <span class="banner--link-button">
+        <d2-icon name="link"/>
+        {{link}}
+      </span>
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    subTitle: {
+      type: String,
+      default: ''
+    },
+    link: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleLinkClick () {
+      this.$open(this.link)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.banner {
+  .banner--title {
+    margin: 0px;
+    padding: 0px;
+    margin-left: -8px;
+    font-size: 120px;
+    line-height: 120px;
+    font-weight: bold;
+    color: #FFF;
+  }
+  .banner--sub-title {
+    margin: 0px;
+    padding: 0px;
+    font-size: 16px;
+    color: #FFF;
+  }
+  .banner--link {
+    margin: 0px;
+    padding: 0px;
+    margin-top: 10px;
+    .banner--link-button {
+      font-size: 12px;
+      color: #FFF;
+      padding: 4px 6px;
+      border-radius: 2px;
+      background-color: rgba(#000, .5);
+      transition: all .3s;
+      &:hover {
+        background-color: rgba(#000, 1);
+      }
+    }
+  }
+  &.with-link {
+    height: 220px;
+  }
+  @extend %unable-select;
+  height: 180px;
+  padding-left: 20px;
+  border: 1px solid #0054b5;
+  border-radius: 2px;
+  background-color: #0077ff;
+  background-size: 60px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23cef0ff' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+</style>
@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="d2-module-index-menu-group"
+    :class="groupClassName"
+    v-if="!isTitle">
+    <!-- 有子菜单 -->
+    <template v-if="menu.children">
+      <p
+        class="d2-module-index-menu-group--title"
+        :class="titleClassName">
+        {{menu.title}}
+      </p>
+      <template v-for="(item, index) in menu.children">
+        <d2-module-index-menu-group
+          v-if="item.children"
+          :key="`group-${index}`"
+          :menu="item"
+          :level="level + 1"/>
+        <d2-module-index-menu-item
+          v-else
+          :key="`button-${index}`"
+          :menu="item"/>
+      </template>
+    </template>
+    <!-- 没有子菜单 -->
+    <template v-else>
+      <p
+        class="d2-module-index-menu-group--title"
+        :class="titleClassName">
+        {{menu.title}}
+      </p>
+      <d2-module-index-menu-item :menu="menu"/>
+    </template>
+  </div>
+</template>
+
+<script>
+import d2ModuleIndexMenuItem from './item'
+export default {
+  name: 'd2-module-index-menu-group',
+  components: {
+    d2ModuleIndexMenuItem
+  },
+  props: {
+    menu: {
+      default: () => ({})
+    },
+    level: {
+      default: 1
+    }
+  },
+  computed: {
+    groupClassName () {
+      return `d2-module-index-menu-group--${this.level}`
+    },
+    titleClassName () {
+      return `d2-module-index-menu-group--title-${this.level}`
+    },
+    isTitle () {
+      // 标题中含有 首页 文字
+      if ((this.menu.title || '').indexOf('首页') > 0) {
+        return true
+      }
+      // 图标为 home
+      if (this.menu.icon === 'home') {
+        return true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu-group {
+  margin-bottom: 10px;
+  padding-left: 10px;
+  margin-left: 10px;
+  border-left: 2px solid #0077ff;
+  &.d2-module-index-menu-group--1 {
+    padding-left: 0px;
+    margin-left: 0px;
+    border-left: none;
+    margin-bottom: 10px;
+  }
+  p {
+    margin: 0px;
+    padding: 0px;
+  }
+  .d2-module-index-menu-group--title {
+    font-size: 14px;
+    line-height: 14px;
+    margin-bottom: 10px;
+    &.d2-module-index-menu-group--title-1 {
+      font-size: 18px;
+      line-height: 18px;
+      font-weight: bold;
+    }
+  }
+}
+</style>
@@ -0,0 +1,27 @@
+<template>
+  <el-button
+    class="d2-module-index-menu-item"
+    @click="handleMenuSelect(menu.path)">
+    {{menu.title}}
+  </el-button>
+</template>
+
+<script>
+import mixinMenu from '@/layout/header-aside/components/mixin/menu'
+export default {
+  mixins: [
+    mixinMenu
+  ],
+  props: {
+    menu: {
+      default: () => ({})
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu-item {
+  margin-bottom: 10px;
+}
+</style>
@@ -0,0 +1,43 @@
+<template>
+  <transition name="fade-transverse">
+    <div v-if="show" class="d2-module-index-menu">
+      <d2-module-index-menu-group
+        v-for="(item, index) in menu.children"
+        :key="index"
+        :menu="item"/>
+    </div>
+  </transition>
+</template>
+
+<script>
+import d2ModuleIndexMenuGroup from './components/group'
+export default {
+  components: {
+    d2ModuleIndexMenuGroup
+  },
+  props: {
+    menu: {
+      default: () => ({
+        children: []
+      })
+    }
+  },
+  data () {
+    return {
+      show: false
+    }
+  },
+  mounted () {
+    setTimeout(() => {
+      this.show = true
+    }, 300)
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu {
+  @extend %unable-select;
+  margin-top: 20px;
+}
+</style>
@@ -0,0 +1,50 @@
+<template>
+  <div class="d2-page-cover">
+    <div class="d2-page-cover__logo">
+      <slot/>
+    </div>
+    <p class="d2-page-cover__title">D2 Admin {{$version}}</p>
+    <p class="d2-page-cover__sub-title">优雅的中后台集成方案</p>
+    <p class="d2-page-cover__build-time">FINAL BUILD TIME {{$buildTime}}</p>
+    <slot name="footer"/>
+    <a target="blank" href="https://github.com/d2-projects/d2-admin">
+      <img
+        style="position: absolute; top: 0; right: 0; border: 0; width: 150px;"
+        src="./image/darkblue@2x.png"
+        alt="Fork me on GitHub">
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.d2-page-cover {
+  @extend %full;
+  @extend %unable-select;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
+  align-items: center;
+  .d2-page-cover__logo {
+    img {
+      width: 200px;
+    }
+  }
+  .d2-page-cover__title {
+    margin: 0px;
+    margin-bottom: 20px;
+    font-weight: bold;
+    color: $color-text-main;
+  }
+  .d2-page-cover__sub-title {
+    margin: 0px;
+    margin-bottom: 5px;
+    color: $color-text-normal;
+  }
+  .d2-page-cover__build-time {
+    margin: 0px;
+    margin-bottom: 10px;
+    font-size: 12px;
+    color: $color-text-placehoder;
+  }
+}
+</style>
@@ -0,0 +1,99 @@
+<template>
+  <div ref="editor"></div>
+</template>
+
+<script>
+import Quill from 'quill'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+export default {
+  name: 'd2-quill',
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      Quill: undefined,
+      currentValue: '',
+      options: {
+        theme: 'snow',
+        bounds: document.body,
+        debug: 'warn',
+        modules: {
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block'],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            // [{ 'script': 'sub' }, { 'script': 'super' }],
+            // [{ 'indent': '-1' }, { 'indent': '+1' }],
+            // [{ 'direction': 'rtl' }],
+            [{ 'size': ['small', false, 'large', 'huge'] }],
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            [{ 'color': [] }, { 'background': [] }],
+            // [{ 'font': [] }],
+            [{ 'align': [] }],
+            ['clean'],
+            ['link', 'image']
+          ]
+        },
+        placeholder: '书写你的内容',
+        readOnly: false
+      }
+    }
+  },
+  watch: {
+    value: {
+      handler (val) {
+        // 确认是新的值
+        if (val !== this.currentValue) {
+          this.currentValue = val
+          // 尝试更新
+          if (this.Quill) {
+            this.Quill.pasteHTML(this.value)
+          }
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      const editor = this.$refs.editor
+      // 初始化编辑器
+      this.Quill = new Quill(editor, this.options)
+      // 默认值
+      this.Quill.pasteHTML(this.currentValue)
+      // 绑定事件
+      this.Quill.on('text-change', (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML
+        const text = this.Quill.getText()
+        const quill = this.Quill
+        // 更新内部的值
+        this.currentValue = html
+        // 发出事件 v-model
+        this.$emit('input', html)
+        // 发出事件
+        this.$emit('change', { html, text, quill })
+      })
+      // 将一些 quill 自带的事件传递出去
+      this.Quill.on('text-change', (delta, oldDelta, source) => {
+        this.$emit('text-change', delta, oldDelta, source)
+      })
+      this.Quill.on('selection-change', (range, oldRange, source) => {
+        this.$emit('selection-change', range, oldRange, source)
+      })
+      this.Quill.on('editor-change', (eventName, ...args) => {
+        this.$emit('editor-change', eventName, ...args)
+      })
+    }
+  }
+}
+</script>
@@ -0,0 +1,8 @@
+export default {
+  name: 'd2admin',
+  icon: './lib/UEditor/button-icon/d2admin.png',
+  tip: 'D2Admin',
+  handler: (editor, name) => {
+    editor.execCommand('inserthtml', `<p><span style="border: 1px solid rgb(0, 0, 0); font-family: impact, chicago; color: rgb(127, 127, 127);">https://github.com/d2-projects/</span><span style="border: 1px solid rgb(0, 0, 0); font-family: impact, chicago; background-color: rgb(23, 54, 93); color: rgb(255, 255, 255);">d2-admin</span></p>`)
+  }
+}
@@ -0,0 +1,50 @@
+<template>
+  <vue-ueditor-wrap
+    ref="ueditor"
+    v-model="currentValue"
+    :config="config"
+    :destroy="true"
+    :init="init"/>
+</template>
+
+<script>
+// 参考 https://github.com/HaoChuan9421/vue-ueditor-wrap
+import config from './ueditor.config'
+import buttonD2admin from './button/d2admin'
+
+export default {
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      config,
+      currentValue: ''
+    }
+  },
+  watch: {
+    // 对外提供 v-model
+    value: {
+      handler (val) {
+        if (this.currentValue !== val) {
+          this.currentValue = val
+        }
+      },
+      immediate: true
+    },
+    // 对外提供 v-model
+    currentValue (val) {
+      this.$emit('input', val)
+    }
+  },
+  methods: {
+    init () {
+      // 注册一个测试按钮
+      this.$refs.ueditor.registerButton(buttonD2admin)
+    }
+  }
+}
+</script>
@@ -0,0 +1,11 @@
+export default {
+  UEDITOR_HOME_URL: '/lib/UEditor/',
+  // 编辑器不自动被内容撑高
+  autoHeightEnabled: false,
+  // 初始容器高度
+  initialFrameHeight: 240,
+  // 初始容器宽度
+  initialFrameWidth: '100%',
+  // 关闭自动保存
+  enableAutoSave: false
+}
@@ -0,0 +1,108 @@
+/*!
+ * Agate by Taufik Nurrohman <https://github.com/tovic>
+ * ----------------------------------------------------
+ *
+ * #ade5fc
+ * #a2fca2
+ * #c6b4f0
+ * #d36363
+ * #fcc28c
+ * #fc9b9b
+ * #ffa
+ * #fff
+ * #333
+ * #62c8f3
+ * #888
+ *
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #333;
+  color: white;
+}
+
+.hljs-name,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-code,
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-tag {
+  color: #62c8f3;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ade5fc;
+}
+
+.hljs-string,
+.hljs-bullet {
+  color: #a2fca2;
+}
+
+.hljs-type,
+.hljs-title,
+.hljs-section,
+.hljs-attribute,
+.hljs-quote,
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #ffa;
+}
+
+.hljs-number,
+.hljs-symbol,
+.hljs-bullet {
+  color: #d36363;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-literal {
+  color: #fcc28c;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-code {
+  color: #888;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #c6b4f0;
+}
+
+.hljs-meta {
+  color: #fc9b9b;
+}
+
+.hljs-deletion {
+  background-color: #fc9b9b;
+  color: #333;
+}
+
+.hljs-addition {
+  background-color: #a2fca2;
+  color: #333;
+}
+
+.hljs a {
+  color: inherit;
+}
+
+.hljs a:focus,
+.hljs a:hover {
+  color: inherit;
+  text-decoration: underline;
+}
@@ -0,0 +1,66 @@
+/*
+Date: 24 Fev 2015
+Author: Pedro Oliveira <kanytu@gmail . com>
+*/
+
+.hljs {
+  color: #a9b7c6;
+  background: #282b2e;
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet {
+  color: #6897BB;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-deletion {
+  color: #cc7832;
+}
+
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link {
+  color: #629755;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #808080;
+}
+
+.hljs-meta {
+  color: #bbb529;
+}
+
+.hljs-string,
+.hljs-attribute,
+.hljs-addition {
+  color: #6A8759;
+}
+
+.hljs-section,
+.hljs-title,
+.hljs-type {
+  color: #ffc66d;
+}
+
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #e8bf6a;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,88 @@
+/*
+
+Arduino® Light Theme - Stefania Mellai <s.mellai@arduino.cc>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #FFFFFF;
+}
+
+.hljs,
+.hljs-subst {
+  color: #434f54;
+}
+
+.hljs-keyword,
+.hljs-attribute,
+.hljs-selector-tag,
+.hljs-doctag,
+.hljs-name {
+  color: #00979D;
+}
+
+.hljs-built_in,
+.hljs-literal,
+.hljs-bullet,
+.hljs-code,
+.hljs-addition {
+  color: #D35400;
+}
+
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #00979D;
+}
+
+.hljs-type,
+.hljs-string,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-deletion {
+  color: #005C5F;
+}
+
+.hljs-title,
+.hljs-section {
+  color: #880000;
+  font-weight: bold;
+}
+
+.hljs-comment {
+  color: rgba(149,165,166,.8);
+}
+
+.hljs-meta-keyword {
+  color: #728E00;
+}
+
+.hljs-meta {
+  color: #728E00;
+  color: #434f54;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-function {
+  color: #728E00;
+}
+
+.hljs-number {
+  color: #8A7B52;  
+}
@@ -0,0 +1,73 @@
+/*
+Date: 17.V.2011
+Author: pumbur <pumbur@pumbur.net>
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #222;
+}
+
+.hljs,
+.hljs-subst {
+  color: #aaa;
+}
+
+.hljs-section {
+  color: #fff;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta {
+  color: #444;
+}
+
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-regexp {
+  color: #ffcc33;
+}
+
+.hljs-number,
+.hljs-addition {
+  color: #00cc66;
+}
+
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-link {
+  color: #32aaee;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #6644aa;
+}
+
+.hljs-title,
+.hljs-variable,
+.hljs-deletion,
+.hljs-template-tag {
+  color: #bb1166;
+}
+
+.hljs-section,
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
@@ -0,0 +1,45 @@
+/*
+
+Original style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Org>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: white;
+  color: black;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-section,
+.hljs-addition,
+.hljs-attribute,
+.hljs-link {
+  color: #888;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-meta,
+.hljs-deletion {
+  color: #ccc;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-section,
+.hljs-name,
+.hljs-type,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
@@ -0,0 +1,83 @@
+/* Base16 Atelier Cave Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Cave Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7e7887;
+}
+
+/* Atelier-Cave Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-regexp,
+.hljs-link,
+.hljs-tag,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #be4678;
+}
+
+/* Atelier-Cave Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #aa573c;
+}
+
+/* Atelier-Cave Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #2a9292;
+}
+
+/* Atelier-Cave Blue */
+.hljs-title,
+.hljs-section {
+  color: #576ddb;
+}
+
+/* Atelier-Cave Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #955ae7;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #19171c;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #be4678;
+}
+
+.hljs-addition {
+  background-color: #2a9292;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #19171c;
+  color: #8b8792;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,85 @@
+/* Base16 Atelier Cave Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/cave) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Cave Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #655f6d;
+}
+
+/* Atelier-Cave Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #be4678;
+}
+
+/* Atelier-Cave Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #aa573c;
+}
+
+/* Atelier-Cave Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #2a9292;
+}
+
+/* Atelier-Cave Blue */
+.hljs-title,
+.hljs-section {
+  color: #576ddb;
+}
+
+/* Atelier-Cave Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #955ae7;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #19171c;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #be4678;
+}
+
+.hljs-addition {
+  background-color: #2a9292;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #efecf4;
+  color: #585260;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,69 @@
+/* Base16 Atelier Dune Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Dune Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #999580;
+}
+
+/* Atelier-Dune Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d73737;
+}
+
+/* Atelier-Dune Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b65611;
+}
+
+/* Atelier-Dune Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #60ac39;
+}
+
+/* Atelier-Dune Blue */
+.hljs-title,
+.hljs-section {
+  color: #6684e1;
+}
+
+/* Atelier-Dune Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b854d4;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #20201d;
+  color: #a6a28c;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,69 @@
+/* Base16 Atelier Dune Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/dune) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Dune Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #7d7a68;
+}
+
+/* Atelier-Dune Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #d73737;
+}
+
+/* Atelier-Dune Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #b65611;
+}
+
+/* Atelier-Dune Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #60ac39;
+}
+
+/* Atelier-Dune Blue */
+.hljs-title,
+.hljs-section {
+  color: #6684e1;
+}
+
+/* Atelier-Dune Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #b854d4;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #fefbec;
+  color: #6e6b5e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,84 @@
+/* Base16 Atelier Estuary Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Estuary Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #878573;
+}
+
+/* Atelier-Estuary Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ba6236;
+}
+
+/* Atelier-Estuary Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #ae7313;
+}
+
+/* Atelier-Estuary Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7d9726;
+}
+
+/* Atelier-Estuary Blue */
+.hljs-title,
+.hljs-section {
+  color: #36a166;
+}
+
+/* Atelier-Estuary Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #5f9182;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #22221b;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #ba6236;
+}
+
+.hljs-addition {
+  background-color: #7d9726;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #22221b;
+  color: #929181;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,84 @@
+/* Base16 Atelier Estuary Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/estuary) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Estuary Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #6c6b5a;
+}
+
+/* Atelier-Estuary Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #ba6236;
+}
+
+/* Atelier-Estuary Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #ae7313;
+}
+
+/* Atelier-Estuary Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7d9726;
+}
+
+/* Atelier-Estuary Blue */
+.hljs-title,
+.hljs-section {
+  color: #36a166;
+}
+
+/* Atelier-Estuary Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #5f9182;
+}
+
+.hljs-deletion,
+.hljs-addition {
+  color: #22221b;
+  display: inline-block;
+  width: 100%;
+}
+
+.hljs-deletion {
+  background-color: #ba6236;
+}
+
+.hljs-addition {
+  background-color: #7d9726;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f4f3ec;
+  color: #5f5e4e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,69 @@
+/* Base16 Atelier Forest Dark - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Forest Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #9c9491;
+}
+
+/* Atelier-Forest Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #f22c40;
+}
+
+/* Atelier-Forest Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #df5320;
+}
+
+/* Atelier-Forest Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7b9726;
+}
+
+/* Atelier-Forest Blue */
+.hljs-title,
+.hljs-section {
+  color: #407ee7;
+}
+
+/* Atelier-Forest Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6666ea;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #1b1918;
+  color: #a8a19f;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
@@ -0,0 +1,69 @@
+/* Base16 Atelier Forest Light - Theme */
+/* by Bram de Haan (http://atelierbram.github.io/syntax-highlighting/atelier-schemes/forest) */
+/* Original Base16 color scheme by Chris Kempson (https://github.com/chriskempson/base16) */
+
+/* Atelier-Forest Comment */
+.hljs-comment,
+.hljs-quote {
+  color: #766e6b;
+}
+
+/* Atelier-Forest Red */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute,
+.hljs-tag,
+.hljs-name,
+.hljs-regexp,
+.hljs-link,
+.hljs-name,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #f22c40;
+}
+
+/* Atelier-Forest Orange */
+.hljs-number,
+.hljs-meta,
+.hljs-built_in,
+.hljs-builtin-name,
+.hljs-literal,
+.hljs-type,
+.hljs-params {
+  color: #df5320;
+}
+
+/* Atelier-Forest Green */
+.hljs-string,
+.hljs-symbol,
+.hljs-bullet {
+  color: #7b9726;
+}
+
+/* Atelier-Forest Blue */
+.hljs-title,
+.hljs-section {
+  color: #407ee7;
+}
+
+/* Atelier-Forest Purple */
+.hljs-keyword,
+.hljs-selector-tag {
+  color: #6666ea;
+}
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  background: #f1efee;
+  color: #68615e;
+  padding: 0.5em;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-938.7C276.7 85.3 85.3 276.7 85.3 512S276.7 938.7 512 938.7 938.7 747.3 938.7 512 747.3 85.3 512 85.3z" fill="#3688FF" /><path d="M682.7 554.7H341.3c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h341.3c23.6 0 42.7 19.1 42.7 42.7s-19.1 42.7-42.6 42.7z" fill="#5F6379" /><path d="M512 725.3c-23.6 0-42.7-19.1-42.7-42.7V341.3c0-23.6 19.1-42.7 42.7-42.7s42.7 19.1 42.7 42.7v341.3c0 23.6-19.1 42.7-42.7 42.7z" fill="#5F6379" /></svg>