在每个模块的首页显示链接列表

Former-commit-id: 6cab63bfcc9fbbb16740f86c293fec3996061006 [formerly 6cab63bfcc9fbbb16740f86c293fec3996061006 [formerly 6cab63bfcc9fbbb16740f86c293fec3996061006 [formerly 6cab63bfcc9fbbb16740f86c293fec3996061006 [formerly beab075483c86b86dcf8088652d47d10d17e791b [formerly aa0a4c06e6e6c365614a38137e570322db6356f5]]]]]
Former-commit-id: e27ebca4c2bb81ef3930d2a2744b569e3ba0c47e
Former-commit-id: 05ab8b935658496dbb83ebd1726fd7abdb85b4a5
Former-commit-id: 9fe99c61fd2c812e7ac86a65ef7a96fb77e2555a [formerly 8448054abcfec1aeb5d29b6b3ab9bb7994a0e5d3]
Former-commit-id: c40b050f64112493e7ea738e8cac1b3ec32839d6
Former-commit-id: cdb02c46bc4ec0dd38a15c7682acbe4da3f4ffe2
Former-commit-id: 6e620c8a7bf1f4feae914af55a3d4e48f2527adc
Former-commit-id: 46e4a65d456e1159c9bb5d4c34d4c171ea38c145
Former-commit-id: 90f1ebb055ffc14de13d90d00dc7bb14545c34c8

src/components/d2-module-index-menu/components/group.vue

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

src/components/d2-module-index-menu/components/item.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-button
+    class="d2-module-index-menu-item"
+    @click="handleClick">
+    {{menu.title}}
+  </el-button>
+</template>
+
+<script>
+export default {
+  props: {
+    menu: {
+      default: () => ({})
+    }
+  },
+  methods: {
+    handleClick () {
+      if (this.menu.path) {
+        this.$router.push(this.menu.path)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.d2-module-index-menu-item {
+  margin-bottom: 10px;
+}
+</style>

src/components/d2-module-index-menu/index.vue

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

src/components/index.js

@@ -16,6 +16,7 @@ Vue.component('d2-icon-select', () => import('./d2-icon-select/index.vue'))
 Vue.component('d2-icon-svg', () => import('./d2-icon-svg/index.vue'))
 Vue.component('d2-markdown', () => import('./d2-markdown'))
 Vue.component('d2-mde', () => import('./d2-mde'))
-Vue.component('d2-module-banner', () => import('./d2-module-banner'))
+Vue.component('d2-module-index-banner', () => import('./d2-module-index-banner'))
+Vue.component('d2-module-index-menu', () => import('./d2-module-index-menu'))
 Vue.component('d2-quill', () => import('./d2-quill'))
 Vue.component('d2-ueditor', () => import('./d2-ueditor'))

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

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-business'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'DEMOS',
         subTitle: '提供借鉴和参考的页面'

src/pages/demo/charts/index/index.vue

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-charts'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'CHARTS',
         subTitle: '图表示例'

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

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-components'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'COMPONENTS',
         subTitle: 'D2Admin 为你提供了一些上手即用的组件'

src/pages/demo/d2-crud/index/index.vue

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-d2-crud'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'D2 CRUD',
         subTitle: 'D2 Crud 是一个基于 Vue.js 和 Element UI 的表格组件，封装了常用的表格操作。',

src/pages/demo/element/index/index.vue

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-element'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'ElementUI',
         subTitle: 'D2Admin 集成由饿了么出品的 ElementUI',

src/pages/demo/frame/index/index.vue

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-frame'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'FRAME',
         subTitle: '在 D2Admin 中嵌入其它页面'

src/pages/demo/playground/index/index.vue

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-playground'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'PLAYGROUND',
         subTitle: '在这里可以测试一些 D2Admin 的系统功能'

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

@@ -1,14 +1,17 @@
 <template>
   <d2-container :filename="filename" type="ghost">
-    <d2-module-banner slot="header" v-bind="banner"/>
+    <d2-module-index-banner slot="header" v-bind="banner"/>
+    <d2-module-index-menu :menu="menu"/>
   </d2-container>
 </template>
 
 <script>
+import menu from '@/menu/modules/demo-plugins'
 export default {
   data () {
     return {
       filename: __filename,
+      menu,
       banner: {
         title: 'PLUGIN',
         subTitle: 'D2Admin 集成了许多实用插件'