路由主布局代码优化

vue/src/layout/component/Navbar/component/Bell.vue

@@ -1,6 +1,6 @@
 <template>
-    <el-badge :hidden="hidden" class="bell-badge" is-dot @click.native="jump">
+    <el-badge :hidden="hidden" class="bell-badge" is-dot title="消息提醒" @click.native="jump">
-        <i class="el-icon-bell navbar-icon" title="消息提醒"/>
+        <i class="el-icon-bell navbar-icon"/>
     </el-badge>
 </template>
 

vue/src/layout/component/Navbar/component/Hamburger.vue

@@ -8,9 +8,9 @@ export default {
 
     render(h, context) {
         const {active} = context.props
-        const className = {'navbar-icon': true, 'el-icon-s-unfold': true, 'hamburger': true, 'is-active': active}
+        const className = `navbar-icon el-icon-s-unfold hamburger ${active ? 'is-active' : ''}`
         return (
-            <div {...context.data}>
+            <div {...context.data} title={`${active ? '折叠' : '展开'}侧边栏`}>
                 <i class={className}/>
             </div>
         )

vue/src/layout/component/Navbar/index.vue

@@ -3,37 +3,38 @@
         <div>
             <hamburger class="navbar-item" :active="!sidebarCollapse" @click="sidebarCtrl"/>
 
-            <div class="navbar-item" @click="refresh">
-                <i class="el-icon-refresh-right navbar-icon" title="刷新"/>
-            </div>
-
             <breadcrumb v-if="showBreadcrumb"/>
         </div>
 
         <div>
             <bell class="navbar-item"/>
 
-            <div class="setting-btn navbar-item hidden-xs" @click="settingDrawer=true">
+            <div class="navbar-item" title="刷新" @click="refresh">
-                <i class="el-icon-s-operation navbar-icon" title="个性设置"/>
+                <i class="el-icon-refresh-right navbar-icon"/>
+            </div>
+
+            <div class="setting-btn navbar-item hidden-xs" title="个性设置" @click="settingDrawer = true">
+                <i class="el-icon-s-operation navbar-icon"/>
             </div>
 
             <el-dropdown
                 class="navbar-item"
                 trigger="click"
-                @visible-change="$emit('menu-show',$event)"
+                @command="command"
+                @visible-change="e => $emit('menu-show',e)"
             >
                 <div class="avatar-wrapper">
                     <el-avatar :size="30" :src="avatar" icon="el-icon-user-solid"/>
                     <span class="hidden-xs">{{ name }}</span>
                 </div>
                 <el-dropdown-menu class="user-dropdown" slot="dropdown">
-                    <router-link to="/user">
+                    <el-dropdown-item icon="el-icon-user" command="user">
-                        <el-dropdown-item icon="el-icon-user">个人中心</el-dropdown-item>
+                        个人中心
-                    </router-link>
+                    </el-dropdown-item>
-                    <el-dropdown-item class="hidden-xs" icon="el-icon-guide" @click.native="()=>$guide(0,guideSteps)">
+                    <el-dropdown-item class="hidden-xs" icon="el-icon-guide" command="guide">
                         新手指引
                     </el-dropdown-item>
-                    <el-dropdown-item divided icon="el-icon-switch-button" @click.native="logout">
+                    <el-dropdown-item divided icon="el-icon-switch-button" command="logout">
                         退出登录
                     </el-dropdown-item>
                 </el-dropdown-menu>
@@ -61,11 +62,7 @@ export default {
 
     components: {Hamburger, Breadcrumb, Bell, SettingDrawer},
 
-    data() {
+    data: () => ({settingDrawer: false}),
-        return {
-            settingDrawer: false
-        }
-    },
 
     computed: {
         ...mapState('user', ['avatar', 'name', 'prepareLogout']),
@@ -77,15 +74,23 @@ export default {
         sidebarCtrl() {
             this.$store.commit('setting/sidebarCollapse', !this.sidebarCollapse)
         },
-
         refresh() {
             this.$router.replace({path: `/redirect${this.$route.fullPath}`})
         },
 
-        logout() {
+        command(command) {
+            switch (command) {
+                case 'user':
+                    this.$router.push('/user')
+                    break
+                case 'guide':
+                    this.$guide(0, this.guideSteps)
+                    break
+                case 'logout':
                     if (this.prepareLogout) return
-            elConfirm('确认退出?')
+                    elConfirm('确认退出?').then(() => this.$store.dispatch('user/logout'))
-                .then(() => this.$store.dispatch('user/logout'))
+                    break
+            }
         }
     }
 }

vue/src/layout/component/Sidebar/component/SidebarItem.vue

@@ -1,72 +1,83 @@
 <script type="text/jsx">
 import SidebarItemContent from './SidebarItemContent'
 
-function getOnlyChild(item) {
+//获取不需要嵌套展示的菜单
-    const {children = [], meta: {alwaysShow} = {}} = item
+function getOnlyChild(menu) {
+    const {children = [], meta: {alwaysShow} = {}} = menu
 
-    if (children.length === 1) return alwaysShow ? null : children[0]
+    if (!children.length) return {...menu, children: undefined}
 
-    if (!children.length) return {...item, path: undefined, children: undefined}
+    if (children.length === 1) return alwaysShow ? null : getOnlyChild(children[0])
 
     return null
 }
 
-function renderNode(h, {item, showParent, collapse}) {
+function renderSingleMenu(h, {index, icon, title}) {
-    let onlyOneChild = getOnlyChild(item)
+    return (
+        <el-menu-item index={index}>
+            <SidebarItemContent icon={icon} title={title}/>
+        </el-menu-item>
+    )
+}
+
+function renderSubMenu(h, {index, icon, title, children}) {
+    return (
+        <el-submenu index={index} popper-append-to-body>
+            <SidebarItemContent slot="title" icon={icon} title={title}/>
+            {children}
+        </el-submenu>
+    )
+}
+
+function renderChildrenWithParentMenu(h, {icon, title, children}) {
+    return [
+        <div class="popover-menu__title el-menu-item">
+            <SidebarItemContent icon={icon} title={title}/>
+        </div>,
+        <div class="el-menu el-menu--inline">{children}</div>
+    ]
+}
+
+function renderMenu(h, {menu, showParent, collapse}) {
+    const onlyOneChild = getOnlyChild(menu)
 
     const showSingle = onlyOneChild && !onlyOneChild.children
 
     if (showSingle) {
         const {icon, title} = onlyOneChild.meta
-
+        return renderSingleMenu(h, {index: onlyOneChild.fullPath, icon, title})
-        return (
-            <el-menu-item index={onlyOneChild.fullPath}>
-                <SidebarItemContent icon={icon} title={title}/>
-            </el-menu-item>
-        )
     }
-    else {
-        const {icon, title} = item.meta
 
-        let children = item.children.map(child => renderNode(h, {
+    const {icon, title} = menu.meta
-            item: child,
+
+    let children = menu.children.map(child => renderMenu(h, {
+        menu: child,
         showParent,
         collapse
     }))
 
-        //弹出菜单如果包裹滚动条，则在触发mouseleave时，不会触发父菜单的mouseleave事件
+    //这里弹出菜单如果包裹了<el-scrollbar>，则在触发mouseleave时，不会触发父菜单的mouseleave事件
     if (collapse) {
         //弹出菜单显示父级信息
         if (showParent) {
-                children = [
+            children = renderChildrenWithParentMenu(h, {icon, title, children})
-                    <div class="popover-menu__title el-menu-item">
-                        <SidebarItemContent icon={icon} title={title}/>
-                    </div>,
-                    <div class="el-menu el-menu--inline">{children}</div>
-                ]
         }
     }
 
-        return (
+    return renderSubMenu(h, {index: menu.fullPath, icon, title, children})
-            <el-submenu index={item.fullPath} popper-append-to-body>
-                <SidebarItemContent slot="title" icon={icon} title={title}/>
-                {children}
-            </el-submenu>
-        )
-    }
 }
 
 export default {
     functional: true,
 
     props: {
-        item: Object,
+        menu: Object,
         showParent: Boolean,
         collapse: Boolean
     },
 
     render(h, context) {
-        return renderNode(h, context.props)
+        return renderMenu(h, context.props)
     }
 }
 </script>

vue/src/layout/component/Sidebar/index.vue

@@ -9,11 +9,7 @@ export default {
 
     components: {SidebarItem, Logo},
 
-    data() {
+    data: () => ({mouseOutside: true, activeMenu: ''}),
-        return {
-            mouseOutside: true
-        }
-    },
 
     computed: {
         ...mapState('app', ['device']),
@@ -22,20 +18,14 @@ export default {
 
         ...mapState('setting', ['showLogo', 'sidebarCollapse', 'sidebarUniqueOpen', 'sidebarShowParent', 'sidebarAutoHidden']),
 
-        activeMenu() {
-            const route = this.$route
-            const {meta, path} = route
-            if (path.startsWith('/redirect')) {
-                return path.replace('/redirect', '')
-            }
-            return meta.activeMenu || path
-        },
-
         //仅在pc端可折叠
         collapse() {
             return this.sidebarCollapse && this.device === 'pc'
         },
 
+        //是否隐藏侧边栏
+        //①设置了侧边栏自动隐藏且鼠标不再侧边栏内
+        //②侧边栏处于折叠状态且是移动设备
         hideSidebar() {
             return this.sidebarAutoHidden && this.mouseOutside
                 || this.sidebarCollapse && this.device === 'mobile'
@@ -53,19 +43,33 @@ export default {
 
     watch: {
         //由于elMenu的initOpenedMenu()不会触发select事件，所以手动实现菜单收起
-        '$route.path'(nv, ov) {
+        '$route.path': {
-            //如果是redirect刷新，则跳过
+            immediate: true,
-            if (nv === `/redirect${ov}`) return
+            handler(v) {
+                //如果是redirect跳转，则跳过
+                if (v.startsWith('/redirect')) return
+
+                this.setActiveMenu()
+
                 const menu = this.$refs.menu
                 if (!menu) return
                 const item = menu.items[this.activeMenu]
-            if (!item) menu.openedMenus = []
+
-            else this.select(item.index, item.indexPath, item, false)
+                //如果侧边栏中没有对应的激活菜单，则收起全部
+                if (!item) return menu.openedMenus = []
+
+                this.select(item.index, item.indexPath, item, false)
+            }
         },
 
-        hideSidebar(v) {
+        //设置了侧边栏自动隐藏后，根据状态添加或移除鼠标移动事件
-            if (v) document.addEventListener('mousemove', this.moveEvent)
+        hideSidebar: {
-            else document.removeEventListener('mousemove', this.moveEvent)
+            immediate: true,
+            handler(v) {
+                if (!this.sidebarAutoHidden) return
+                const key = `${v ? 'add' : 'remove'}EventListener`
+                document[key]('mousemove', this.moveEvent)
+            }
         }
     },
 
@@ -74,6 +78,13 @@ export default {
             if (e.clientX <= 15) this.mouseOutside = false
         },
 
+        //根据路由地址设置当前激活的菜单路径
+        setActiveMenu() {
+            const {meta, path} = this.$route
+            this.activeMenu = meta.activeMenu || path
+        },
+
+        //模拟选中菜单
         select(index, indexPath, item, jump = true) {
             //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
             if (this.sidebarUniqueOpen && indexPath.length === 1) {
@@ -100,14 +111,8 @@ export default {
         }
     },
 
-    mounted() {
+    beforeDestroy() {
-        if (this.sidebarAutoHidden) {
-            document.addEventListener('mousemove', this.moveEvent)
-        }
-
-        this.$once('hook:beforeDestroy', () => {
         document.removeEventListener('mousemove', this.moveEvent)
-        })
     },
 
     render() {
@@ -126,7 +131,7 @@ export default {
                         key={menu.path}
                         show-parent={this.sidebarShowParent}
                         collapse={this.sidebarCollapse}
-                        item={menu}
+                        menu={menu}
                     />
                 ))}
             </el-menu>

vue/src/layout/component/TagsView/ScrollPane.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-scrollbar ref="scrollContainer" native @wheel.native.prevent="handleScroll">
+    <el-scrollbar ref="scrollContainer" native noresize @wheel.native.prevent="handleScroll">
         <slot/>
     </el-scrollbar>
 </template>
@@ -10,8 +10,6 @@ const tagAndTagSpacing = 4
 export default {
     name: 'ScrollPane',
 
-    data: () => ({rAF: null}),
-
     methods: {
         getWrapper() {
             return this.$refs.scrollContainer.$refs.wrap

vue/src/layout/component/TagsView/index.vue

@@ -8,8 +8,8 @@
                 :class="{'tags-view-item': true, active: isActive(tag)}"
                 :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
                 tag="div"
-                @contextmenu.prevent.native="e => openMenu(tag, e)"
+                @contextmenu.prevent.stop.native="e => openMenu(tag, e)"
-                @dblclick.prevent.native="() => closeSelectedTag(tag)"
+                @dblclick.prevent.stop.native="() => closeSelectedTag(tag)"
             >
                 {{ tag.title }}
                 <i v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="() => closeSelectedTag(tag)"/>
@@ -27,15 +27,15 @@
     </nav>
 </template>
 
-<script>
+<script type="text/jsx">
-import ScrollPane from './ScrollPane'
+import shortcutMixin from './mixin/shortcut'
+import decideRouterTransitionMixin from './mixin/decideRouterTransition'
 import ContextMenu from "@/component/ContextMenu"
 import ContextMenuItem from "@/component/ContextMenu/item"
-import shortcuts from './mixin/shortcuts'
+import ScrollPane from './ScrollPane'
-import decideRouterTransition from './mixin/decideRouterTransition'
 
 export default {
-    mixins: [shortcuts, decideRouterTransition],
+    mixins: [shortcutMixin, decideRouterTransitionMixin],
 
     components: {ContextMenu, ContextMenuItem, ScrollPane},