From 4e59b306669944fb46f37fd032c1eaf18789b17f Mon Sep 17 00:00:00 2001
From: liyang <1711467488@qq.com>
Date: Mon, 3 Dec 2018 11:35:37 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E6=AF=8F=E4=B8=AA=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E7=9A=84=E9=A6=96=E9=A1=B5=E6=98=BE=E7=A4=BA=E9=93=BE=E6=8E=A5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../index.vue                                 |   0
 .../d2-module-index-menu/components/group.vue | 100 ++++++++++++++++++
 .../d2-module-index-menu/components/item.vue  |  30 ++++++
 src/components/d2-module-index-menu/index.vue |  43 ++++++++
 src/components/index.js                       |   3 +-
 src/pages/demo/business/index/index.vue       |   5 +-
 src/pages/demo/charts/index/index.vue         |   5 +-
 src/pages/demo/components/index/index.vue     |   5 +-
 src/pages/demo/d2-crud/index/index.vue        |   5 +-
 src/pages/demo/element/index/index.vue        |   5 +-
 src/pages/demo/frame/index/index.vue          |   5 +-
 src/pages/demo/playground/index/index.vue     |   5 +-
 src/pages/demo/plugins/index/index.vue        |   5 +-
 13 files changed, 207 insertions(+), 9 deletions(-)
 rename src/components/{d2-module-banner => d2-module-index-banner}/index.vue (100%)
 create mode 100644 src/components/d2-module-index-menu/components/group.vue
 create mode 100644 src/components/d2-module-index-menu/components/item.vue
 create mode 100644 src/components/d2-module-index-menu/index.vue

diff --git a/src/components/d2-module-banner/index.vue b/src/components/d2-module-index-banner/index.vue
similarity index 100%
rename from src/components/d2-module-banner/index.vue
rename to src/components/d2-module-index-banner/index.vue
diff --git a/src/components/d2-module-index-menu/components/group.vue b/src/components/d2-module-index-menu/components/group.vue
new file mode 100644
index 00000000..22cd4af3
--- /dev/null
+++ b/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>
diff --git a/src/components/d2-module-index-menu/components/item.vue b/src/components/d2-module-index-menu/components/item.vue
new file mode 100644
index 00000000..2331066d
--- /dev/null
+++ b/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>
diff --git a/src/components/d2-module-index-menu/index.vue b/src/components/d2-module-index-menu/index.vue
new file mode 100644
index 00000000..0c36e6ce
--- /dev/null
+++ b/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>
diff --git a/src/components/index.js b/src/components/index.js
index e738d7de..76a5b68a 100644
--- a/src/components/index.js
+++ b/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'))
diff --git a/src/pages/demo/business/index/index.vue b/src/pages/demo/business/index/index.vue
index bc962084..cdf1541e 100644
--- a/src/pages/demo/business/index/index.vue
+++ b/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: '提供借鉴和参考的页面'
diff --git a/src/pages/demo/charts/index/index.vue b/src/pages/demo/charts/index/index.vue
index fd2df087..19522ec9 100644
--- a/src/pages/demo/charts/index/index.vue
+++ b/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: '图表示例'
diff --git a/src/pages/demo/components/index/index.vue b/src/pages/demo/components/index/index.vue
index afd7f701..b96bcfed 100644
--- a/src/pages/demo/components/index/index.vue
+++ b/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 为你提供了一些上手即用的组件'
diff --git a/src/pages/demo/d2-crud/index/index.vue b/src/pages/demo/d2-crud/index/index.vue
index a9b03e64..92c4cfb5 100644
--- a/src/pages/demo/d2-crud/index/index.vue
+++ b/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 的表格组件，封装了常用的表格操作。',
diff --git a/src/pages/demo/element/index/index.vue b/src/pages/demo/element/index/index.vue
index b2190ab0..9c4b2390 100644
--- a/src/pages/demo/element/index/index.vue
+++ b/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',
diff --git a/src/pages/demo/frame/index/index.vue b/src/pages/demo/frame/index/index.vue
index 0053b976..3957e27a 100644
--- a/src/pages/demo/frame/index/index.vue
+++ b/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 中嵌入其它页面'
diff --git a/src/pages/demo/playground/index/index.vue b/src/pages/demo/playground/index/index.vue
index a6e27fe9..4b7d0060 100644
--- a/src/pages/demo/playground/index/index.vue
+++ b/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 的系统功能'
diff --git a/src/pages/demo/plugins/index/index.vue b/src/pages/demo/plugins/index/index.vue
index 917337d6..d3997fb4 100644
--- a/src/pages/demo/plugins/index/index.vue
+++ b/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 集成了许多实用插件'