feat: add d2-source component

src/assets/style/color.scss

@@ -0,0 +1,24 @@
+// 主色
+$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: #F0F2F5;
+$color-bg-dark: #051428;

src/assets/style/public.scss

@@ -1,3 +1,5 @@
+@import './color.scss';
+
 html, body {
   height: 100%;
   margin: 0;

src/components/d2-container/com.vue

@@ -1,16 +1,36 @@
 <style lang="scss">
 .d2-container {
+  $space: 20px;
+  $border: 1px solid $color-border-4;
   background-color: #FFF;
-  margin: 30px auto;
-  padding: 20px;
+  margin: $space * 2 auto;
   max-width: 1000px;
   border-radius: 2px;
+  .d2-container--header {
+    padding: $space * 0.75 $space;
+    border-bottom: $border;
+  }
+  .d2-container--footer {
+    padding: $space * 0.75 $space;
+    border-top: $border;
+  }
+  .d2-container--body {
+    padding: $space;
+  }
 }
 </style>
 
 <template>
   <div class="d2-container">
-    <slot/>
+    <div v-if="$slots.header" class="d2-container--header">
+      <slot name="header"/>
+    </div>
+    <div class="d2-container--body">
+      <slot/>
+    </div>
+    <div v-if="$slots.footer" class="d2-container--footer">
+      <slot name="footer"/>
+    </div>
   </div>
 </template>
 

src/components/d2-source/com.vue

@@ -0,0 +1,35 @@
+<style lang="scss">
+.d2-source {}
+</style>
+
+<template>
+  <a :href="href" target="_blank" class="d2-source">
+    <slot/>
+  </a>
+</template>
+
+<script>
+import { get, last } from 'lodash'
+
+export default {
+  name: 'd2-source',
+  data () {
+    return {
+      source: ''
+    }
+  },
+  watch: {
+    $route: {
+      handler (to) {
+        this.source = get(last(to.matched), 'components.default.__source')
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    href () {
+      return `${process.env.VUE_APP_REPOSITORY.replace(/\.git$/, '')}/blob/master/${this.source}`
+    }
+  }
+}
+</script>

src/layouts/default.vue

@@ -3,20 +3,20 @@
   height: 100%;
   .layout-main--side {
     width: 260px;
-    background-color: #051428;
+    background-color: $color-bg-dark;
     user-select: none;
     cursor: pointer;
     .el-menu {
       border-right: none;
       .el-menu-item {
         &.is-active {
-          background-color: #458DF8 !important;
+          background-color: $color-primary !important;
         }
       }
     }
   }
   .layout-main--body {
-    background-color: #F0F2F5;
+    background-color: $color-bg;
   }
   .overlay {
     height: 100%;
@@ -30,13 +30,22 @@ import { menus } from '@/router'
 export default {
   name: 'layout-main',
   render () {
-    const createMenu = menu => menu.children ? createGroup(menu) : createItem(menu)
-    const createItem = menu => <el-menu-item index={ menu.path }>{ menu.title }</el-menu-item>
-    const createGroup = menu =>
-      <el-submenu index={ menu.path }>
-        <template slot="title">{ menu.title }</template>
+    function createMenu (menu) {
+      return menu.children ? createGroup(menu) : createItem(menu)
+    }
+    function createItem (menu) {
+      return <el-menu-item index={ menu.path }>
+        { menu.title }
+      </el-menu-item>
+    }
+    function createGroup (menu) {
+      return <el-submenu index={ menu.path }>
+        <template slot="title">
+          { menu.title }
+        </template>
         { menu.children.map(child => createMenu(child)) }
       </el-submenu>
+    }
     const node =
       <div class="layout-main" flex="dir:left">
         <div class="layout-main--side" flex-box="0">

src/pages/demo1/1.vue

@@ -6,6 +6,20 @@
 
 <template>
   <d2-container>
-    In the Demo1 folder, this page belongs to the subview of the Demo1 page and will automatically generate a cascading menu
+    <el-alert
+      slot="header"
+      :title="`$route.name: ${$route.name}`"
+      :closable="false">
+    </el-alert>
+    In the Demo1 folder,
+    this page belongs to the subview of the Demo1 page
+    and will automatically generate a cascading menu.
+    <div slot="footer" flex="main:center">
+      <d2-source>
+        <el-button type="text" size="mini" icon="el-icon-link">
+          Source code of this page
+        </el-button>
+      </d2-source>
+    </div>
   </d2-container>
 </template>

src/pages/demo2/1.vue

@@ -6,6 +6,19 @@
 
 <template>
   <d2-container>
-    In the demo2 folder, but this page does not generate a cascading menu
+    <el-alert
+      slot="header"
+      :title="`$route.name: ${$route.name}`"
+      :closable="false">
+    </el-alert>
+    In the demo2 folder,
+    but this page does not generate a cascading menu.
+    <div slot="footer" flex="main:center">
+      <d2-source>
+        <el-button type="text" size="mini" icon="el-icon-link">
+          Source code of this page
+        </el-button>
+      </d2-source>
+    </div>
   </d2-container>
 </template>