完善左侧菜单，支持仅一级菜单

src/libs/util.js

@@ -52,7 +52,9 @@ export const getMenuByRouter = (list, access) => {
  * @returns {Array}
  */
 export const getBreadCrumbList = (routeMetched) => {
-  let res = routeMetched.map(item => {
+  let res = routeMetched.filter(item => {
+    return item.meta === undefined || !item.meta.hide
+  }).map(item => {
     let obj = {
       icon: (item.meta && item.meta.icon) || '',
       name: item.name,

src/router/routers.js

@@ -13,7 +13,7 @@ export default [
   },
   {
     path: '/',
-    name: 'index',
+    name: 'home',
     redirect: '/home',
     component: Main,
     meta: {
@@ -108,6 +108,25 @@ export default [
       }
     ]
   },
+  {
+    path: '/directive',
+    name: 'directive',
+    meta: {
+      hide: true
+    },
+    component: Main,
+    children: [
+      {
+        path: '/directive_page',
+        name: 'directive_page',
+        meta: {
+          icon: 'ios-navigate',
+          title: '指令1'
+        },
+        component: () => import('@/view/directive/directive.vue')
+      }
+    ]
+  },
   {
     path: '/multilevel',
     name: 'multilevel',

src/view/directive/directive.vue

@@ -0,0 +1,13 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+export default {
+  name: 'directive_page'
+}
+</script>
+
+<style>
+
+</style>

src/view/main/components/side-menu/mixin.js

@@ -8,7 +8,7 @@ export default {
       return this.$config.useI18n ? this.$t(item.name) : ((item.meta && item.meta.title) || item.name)
     },
     showChildren (item) {
-      return item.children && item.children.length !== 0
+      return item.children && item.children.length > 1
     }
   }
 }

src/view/main/components/side-menu/side-menu-item.vue

@@ -5,11 +5,14 @@
       <span>{{ showTitle(parentItem) }}</span>
     </template>
     <template v-for="item in children">
-      <side-menu-item v-if="item.children && item.children.length !== 0" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
-      <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`">
-        <common-icon :type="item.icon || ''"/>
-        <span>{{ showTitle(item) }}</span>
-      </menu-item>
+      <template v-if="item.children && item.children.length === 1">
+        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
+        <menu-item v-else :name="`${item.children[0].name}`" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
+      </template>
+      <template v-else>
+        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
+        <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
+      </template>
     </template>
   </Submenu>
 </template>

src/view/main/components/side-menu/side-menu.less

@@ -7,19 +7,28 @@
   user-select: none;
   .menu-collapsed{
     padding-top: 10px;
-    a.drop-menu-a{
-      display: inline-block;
-      padding: 6px 15px;
-      width: 100%;
-      text-align: center;
-      color: #495060;
-    }
+
     .ivu-dropdown{
       width: 100%;
-      .ivu-dropdown-rel button{
+      .ivu-dropdown-rel a{
         width: 100%;
       }
     }
+    .ivu-tooltip{
+      width: 100%;
+      .ivu-tooltip-rel{
+        width: 100%;
+      }
+      .ivu-tooltip-popper .ivu-tooltip-content{
+        .ivu-tooltip-arrow{
+          border-right-color: #fff;
+        }
+        .ivu-tooltip-inner{
+          background: #fff;
+          color: #495060;
+        }
+      }
+    }
     .menu-title{
       margin-left: 6px;
     }
@@ -28,4 +37,11 @@
       margin-left: 4px;
     }
   }
+  a.drop-menu-a{
+    display: inline-block;
+    padding: 6px 15px;
+    width: 100%;
+    text-align: center;
+    color: #495060;
+  }
 }

src/view/main/components/side-menu/side-menu.vue

@@ -3,12 +3,23 @@
     <slot></slot>
     <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
       <template v-for="item in menuList">
-        <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
-        <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
+        <template v-if="item.children && item.children.length === 1">
+          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
+          <menu-item v-else :name="`${item.children[0].name}`" :key="`menu-${item.children[0].name}`"><common-icon :type="item.children[0].icon || ''"/><span>{{ showTitle(item.children[0]) }}</span></menu-item>
+        </template>
+        <template v-else>
+          <side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
+          <menu-item v-else :name="`${item.name}`" :key="`menu-${item.name}`"><common-icon :type="item.icon || ''"/><span>{{ showTitle(item) }}</span></menu-item>
+        </template>
       </template>
     </Menu>
     <div class="menu-collapsed" v-show="collapsed" :list="menuList">
-      <collapsed-menu @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" v-for="item in menuList" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
+      <template v-for="item in menuList">
+        <collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
+        <Tooltip v-else :content="item.children[0].meta.title" placement="right" :key="`drop-menu-${item.children[0].name}`">
+          <a @click="handleSelect(item.children[0].name)" class="drop-menu-a" :style="{textAlign: 'center'}"><Icon :size="rootIconSize" :color="textColor" :type="item.children[0].icon"/></a>
+        </Tooltip>
+      </template>
     </div>
   </div>
 </template>
@@ -69,6 +80,11 @@ export default {
       return this.$route.matched.map(item => item.name).filter(item => item !== name)
     }
   },
+  computed: {
+    textColor () {
+      return this.theme === 'dark' ? '#fff' : '#495060'
+    }
+  },
   watch: {
     activeName (name) {
       if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)

src/view/main/main.less

@@ -23,3 +23,9 @@
     padding: 24px;
   }
 }
+.ivu-menu-item > i{
+  margin-right: 12px !important;
+}
+.ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
+  margin-right: 8px !important;
+}