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

Former-commit-id: 780e53a98d0a5bfc9cf679f76114ae4b9041afef [formerly 780e53a98d0a5bfc9cf679f76114ae4b9041afef [formerly 780e53a98d0a5bfc9cf679f76114ae4b9041afef [formerly 780e53a98d0a5bfc9cf679f76114ae4b9041afef [formerly 9a5371a06f04aa9946e6de3bd6c3efe2c71e7392 [formerly 44e7b946805355d595b83ffe32a028f7c3705930]]]]]
Former-commit-id: 2b2aec25712f225c0b8557b929be977cd9bf5427
Former-commit-id: 4cba1ea1fe912fa3d7b91c6f3c9862a04adf3b6d
Former-commit-id: bf23d3ad70043e00ed5d8080a7ebdf71f7342797 [formerly 164b51dd80b07b0d1386e06ec7a3bfe6e38abd94]
Former-commit-id: 07f4356585c63b53dac55bfd082c45db1d79bec6
Former-commit-id: 3d13f1de8313c00781e54605e0fa17c2b401b283
Former-commit-id: 2a3efa70f407f219db41532ef5ee4a36bceed3d9
Former-commit-id: de005ac828ab5aff0b111c17b4065618006ce33a
Former-commit-id: 37c6b11cc919a73f77247c2e534ec4fdbb67216c

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 集成了许多实用插件'