Merge branch 'hotfix/模块首页优化'

Former-commit-id: d44eb2322a77e277e7b207e270ba105b175e1411 [formerly acd4d69e70969268b4d01736275e754cef250d0e] [formerly d44eb2322a77e277e7b207e270ba105b175e1411 [formerly acd4d69e70969268b4d01736275e754cef250d0e] [formerly d44eb2322a77e277e7b207e270ba105b175e1411 [formerly acd4d69e70969268b4d01736275e754cef250d0e] [formerly acd4d69e70969268b4d01736275e754cef250d0e [formerly 949b9993d3a15549bdde4929ebb1459dc2c9ca95 [formerly 58293760d71d4cba9e939a2b499d3749fb3f5b15]]]]]
Former-commit-id: e928c12862dd7d62e651f3e0ffe12f547826f8b9
Former-commit-id: f1792ae75e9cbc7d18e1a95f64e180ada2ab037d
Former-commit-id: fad0c7c7c343975f457922043b061cbfb035674b [formerly 0346a76cce69e1cb08dc3ad5df4c746ec04d0a54]
Former-commit-id: 646f987fb1814b4fb1d46986bb151532adebcae6
Former-commit-id: 4c1abf97a90560fe281480f228320ef3e7a6880c
Former-commit-id: 0688efeb710b2b40aa2bb2d35f663de51222fefe
Former-commit-id: 9093ceb90221c73019427e0535df2d643955141c
Former-commit-id: 7d728af0fc5dfa4463c50c2819c315e629962f78

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/d2-module-index/index.vue

@@ -1,24 +0,0 @@
-<template>
-  <div>
-    <d2-module-index-banner v-bind="banner"/>
-  </div>
-</template>
-
-<script>
-import d2ModuleIndexBanner from './components/banner'
-export default {
-  components: {
-    d2ModuleIndexBanner
-  },
-  props: {
-    banner: {
-      type: Object,
-      default: () => ({
-        title: '',
-        subTitle: '',
-        link: ''
-      })
-    }
-  }
-}
-</script>

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-index', () => import('./d2-module-index'))
+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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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="card">
-    <d2-module-index :banner="banner"/>
+  <d2-container :filename="filename" type="ghost">
+    <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 集成了许多实用插件'