From 7374c2b97bd6c821da3f9a87b5c6b8c0809d1cdb Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Wed, 26 Aug 2020 18:47:52 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E8=8F=9C=E5=8D=95=E5=93=8D?=
 =?UTF-8?q?=E5=BA=94=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/Navbar/component/Breadcrumb.vue |   2 +-
 .../component/Navbar/component/RootMenu.vue   | 227 ++++++++++++++++--
 vue/src/layout/component/Navbar/index.vue     |   2 +-
 vue/src/layout/component/Sidebar/index.vue    |   6 +-
 ...pOnSelectMenu.js => actionOnSelectMenu.js} |   2 +-
 5 files changed, 209 insertions(+), 30 deletions(-)
 rename vue/src/layout/mixin/{jumpOnSelectMenu.js => actionOnSelectMenu.js} (91%)

diff --git a/vue/src/layout/component/Navbar/component/Breadcrumb.vue b/vue/src/layout/component/Navbar/component/Breadcrumb.vue
index 8477a61..e5f1fb8 100644
--- a/vue/src/layout/component/Navbar/component/Breadcrumb.vue
+++ b/vue/src/layout/component/Navbar/component/Breadcrumb.vue
@@ -36,7 +36,7 @@ export default {
 @import "~@/asset/style/variables.scss";
 
 .app-breadcrumb {
-    margin-left: 8px;
+    margin: 0 8px;
     line-height: $nav-height;
 
     .no-redirect {
diff --git a/vue/src/layout/component/Navbar/component/RootMenu.vue b/vue/src/layout/component/Navbar/component/RootMenu.vue
index 6c20d78..e850f8a 100644
--- a/vue/src/layout/component/Navbar/component/RootMenu.vue
+++ b/vue/src/layout/component/Navbar/component/RootMenu.vue
@@ -1,10 +1,16 @@
 <script type="text/jsx">
-import jumpOnSelectMenuMixin from "@/layout/mixin/jumpOnSelectMenu"
+/**
+ * 简易顶部菜单，参考了ant design的响应式设计
+ */
+import ClickOutside from 'element-ui/lib/utils/clickoutside'
+import actionOnSelectMenuMixin from "@/layout/mixin/actionOnSelectMenu"
 
 export default {
     name: "RootMenu",
 
-    mixins: [jumpOnSelectMenuMixin],
+    mixins: [actionOnSelectMenuMixin],
+
+    directives: {ClickOutside},
 
     props: {
         //当前激活菜单的路径
@@ -15,31 +21,165 @@ export default {
         alwaysShow: Boolean
     },
 
+    data() {
+        return {
+            //最后一个不被隐藏的顶部菜单的数组下标
+            //为undefined时，说明不需要隐藏菜单
+            //为-1时，说明需要隐藏全部菜单
+            lastVisibleIndex: undefined,
+
+            //是否显示menu-popover
+            showPopover: false
+        }
+    },
+
     methods: {
-        onSelect(menu) {
+        onSelect(menu, e) {
+            e.stopPropagation()
             const path = menu.fullPath
             if (path === this.activeMenu) return
-            this.jumpOnSelectMenu(path, false)
+            this.showPopover = false
+            this.actionOnSelectMenu(path, false)
+        },
+
+        //获取初始菜单的总宽度，只在mounted时调用一次
+        setChildrenWidth() {
+            const ul = this.$el
+            if (!ul) return
+            const menuItemNodes = ul.children
+            if (!menuItemNodes || menuItemNodes.length === 0) return
+            //'更多'菜单的宽度，由于不考虑自定义，所以直接写死
+            this.overflowedIndicatorWidth = 57
+            this.menuItemSizes = Array.from(menuItemNodes).map(i => i.getBoundingClientRect().width)
+            this.originalTotalWidth = this.menuItemSizes.reduce((acc, cur) => acc + cur, 0)
+        },
+
+        resize() {
+            const width = this.$el.getBoundingClientRect().width
+
+            let lastVisibleIndex = undefined
+
+            //如果初始菜单的总宽度超出容器宽度
+            if (this.originalTotalWidth > width) {
+                lastVisibleIndex = -1
+
+                //得到满足总宽度不超出容器宽度的最大菜单下标
+                let currentSumWidth = 0
+                for (const liWidth of this.menuItemSizes) {
+                    currentSumWidth += liWidth
+                    if (currentSumWidth + this.overflowedIndicatorWidth > width) {
+                        break
+                    }
+                    lastVisibleIndex += 1
+                }
+            }
+
+            this.lastVisibleIndex = lastVisibleIndex
+        },
+
+        renderItemContent(h, menu) {
+            const {title, icon} = menu.meta
+            const arr = []
+            icon && arr.push(<v-icon icon={icon}/>)
+            arr.push(title)
+            return arr
+        },
+
+        renderOverflowedIndicator(h, hideAll) {
+            return (
+                <div class="root-menu-item-title">
+                    {hideAll ? <i class="el-icon-menu"/> : '...'}
+                </div>
+            )
+        },
+
+        renderVisibleMenus(h, visibleMenus) {
+            if (visibleMenus.length <= 0) return
+            const activeMenu = this.activeMenu
+            return visibleMenus.map(i => {
+                const key = i.fullPath + i.meta.title
+                const className = {'root-menu-item': true, 'active': i.fullPath === activeMenu}
+                return (
+                    <li key={key} class={className} on-click={e => this.onSelect(i, e)}>
+                        <div class="root-menu-item-title">
+                            {this.renderItemContent(h, i)}
+                        </div>
+                    </li>
+                )
+            })
+        },
+
+        renderHideMenus(h, hideMenus) {
+            if (hideMenus.length <= 0) return
+            const activeMenu = this.activeMenu
+            let hasActiveChild = false
+            const children = hideMenus.map(i => {
+                const className = {'root-sub-menu-item': true, 'active': i.fullPath === activeMenu}
+                if (className.active) hasActiveChild = true
+                return (
+                    <li class={className} on-click={e => this.onSelect(i, e)}>
+                        {this.renderItemContent(h, i)}
+                    </li>
+                )
+            })
+            const className = {
+                'root-menu-item': true,
+                'root-sub-menu': true,
+                'active': this.showPopover || hasActiveChild
+            }
+            return (
+                <li
+                    v-click-outside={() => this.showPopover = false}
+                    key="overflowed-indicator"
+                    class={className}
+                    on-click={() => this.showPopover = true}
+                >
+                    {this.renderOverflowedIndicator(h, hideMenus.length === this.menu.length)}
+                    <transition name="el-zoom-in-top">
+                        <ul v-show={this.showPopover} class="menu-popover">
+                            {children}
+                        </ul>
+                    </transition>
+                </li>
+            )
         }
     },
 
-    render() {
-        //菜单点击时触发select事件，payload为菜单对象
-        const {activeMenu, menu, alwaysShow} = this
-        if (!Array.isArray(menu) || menu.length <= 1 && !alwaysShow) return
+    mounted() {
+        this.setChildrenWidth()
+
+        this.resizeObserver = new ResizeObserver(() => this.resize())
+        this.resizeObserver.observe(this.$el)
+
+        this.$once('hook:beforeDestroy', () => {
+            this.resizeObserver && this.resizeObserver.disconnect()
+        })
+    },
+
+    render(h) {
+        const {lastVisibleIndex, menu, alwaysShow} = this
+        if (!Array.isArray(menu) || menu.length <= 1 && !alwaysShow) {
+            return
+        }
+
+        let visibleMenus = menu, hideMenus = []
+        if (lastVisibleIndex !== undefined) {
+            //不需要隐藏菜单
+            if (lastVisibleIndex === -1) {
+                visibleMenus = []
+                hideMenus = menu
+            }
+            //需要隐藏全部菜单
+            else if (lastVisibleIndex !== menu.length - 1) {
+                visibleMenus = menu.slice(0, lastVisibleIndex + 1)
+                hideMenus = menu.slice(lastVisibleIndex + 1)
+            }
+        }
+
         return (
             <ul class="root-menu">
-                {menu.map(i => {
-                    const key = i.fullPath + i.meta.title
-                    const className = {'root-menu-item': true, 'active': i.fullPath === activeMenu}
-                    const icon = i.meta.icon
-                    return (
-                        <li key={key} class={className} on-click={() => this.onSelect(i)}>
-                            {icon && <v-icon icon={icon}/>}
-                            {i.meta.title}
-                        </li>
-                    )
-                })}
+                {this.renderVisibleMenus(h, visibleMenus)}
+                {this.renderHideMenus(h, hideMenus)}
             </ul>
         )
     }
@@ -50,6 +190,8 @@ export default {
 @import "~@/asset/style/variables.scss";
 
 .root-menu {
+    width: 100%;
+    flex: 1;
     height: $nav-height;
     line-height: $nav-height;
     list-style: none;
@@ -66,15 +208,52 @@ export default {
         cursor: pointer;
         transition: all .2s ease-in-out;
 
+        &:hover, &.active {
+            border-bottom: 2px solid $--color-primary;
+
+            > .root-menu-item-title {
+                color: $--color-primary;
+            }
+        }
+    }
+
+    .root-sub-menu {
+        position: relative;
+
+        > .menu-popover {
+            position: absolute;
+            left: -20px;
+            background-color: #fff;
+            margin: 5px 0;
+            padding: 5px 0;
+            min-width: 100px;
+            text-align: left;
+            border-radius: 4px;
+            box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
+            z-index: 10;
+        }
+
+        &-item {
+            margin: 0;
+            line-height: normal;
+            padding: 7px 16px;
+            color: #515a6e;
+            white-space: nowrap;
+            list-style: none;
+            cursor: pointer;
+
+            &.active, &:hover {
+                color: $--color-primary;
+            }
+        }
+    }
+
+    .root-menu-item-title, .root-sub-menu-item {
         > .icon {
+            font-size: 14px;
             margin-right: 6px;
             vertical-align: -0.125em;
         }
-
-        &:hover, &.active {
-            color: $--color-primary;
-            border-bottom: 2px solid $--color-primary;
-        }
     }
 }
 </style>
diff --git a/vue/src/layout/component/Navbar/index.vue b/vue/src/layout/component/Navbar/index.vue
index d9b5d29..7382360 100644
--- a/vue/src/layout/component/Navbar/index.vue
+++ b/vue/src/layout/component/Navbar/index.vue
@@ -1,6 +1,6 @@
 <template>
     <nav class="navbar">
-        <div>
+        <div style="width: 30%">
             <hamburger class="navbar-item" :active="!sidebarCollapse" @click="sidebarCtrl"/>
 
             <breadcrumb v-if="showBreadcrumb"/>
diff --git a/vue/src/layout/component/Sidebar/index.vue b/vue/src/layout/component/Sidebar/index.vue
index 91c76a5..97c52b1 100644
--- a/vue/src/layout/component/Sidebar/index.vue
+++ b/vue/src/layout/component/Sidebar/index.vue
@@ -1,13 +1,13 @@
 <script type="text/jsx">
 import {mapState} from 'vuex'
-import jumpOnSelectMenuMixin from "@/layout/mixin/jumpOnSelectMenu"
+import actionOnSelectMenuMixin from "@/layout/mixin/actionOnSelectMenu"
 import Logo from './component/Logo'
 import SidebarItem from './component/SidebarItem'
 
 export default {
     name: 'sidebar',
 
-    mixins: [jumpOnSelectMenuMixin],
+    mixins: [actionOnSelectMenuMixin],
 
     components: {SidebarItem, Logo},
 
@@ -122,7 +122,7 @@ export default {
             //mobile时激活隐藏侧边栏
             this.device === 'mobile' && this.$store.commit('setting/sidebarCollapse', true)
 
-            jump && this.jumpOnSelectMenu(index)
+            jump && this.actionOnSelectMenu(index)
         }
     },
 
diff --git a/vue/src/layout/mixin/jumpOnSelectMenu.js b/vue/src/layout/mixin/actionOnSelectMenu.js
similarity index 91%
rename from vue/src/layout/mixin/jumpOnSelectMenu.js
rename to vue/src/layout/mixin/actionOnSelectMenu.js
index 66d1613..6f7953b 100644
--- a/vue/src/layout/mixin/jumpOnSelectMenu.js
+++ b/vue/src/layout/mixin/actionOnSelectMenu.js
@@ -2,7 +2,7 @@ import {isExternal} from "@/util/validate"
 
 export default {
     methods: {
-        jumpOnSelectMenu(fullPath, refreshWhenSame = true) {
+        actionOnSelectMenu(fullPath, refreshWhenSame = true) {
             //外部链接时打开新窗口
             if (isExternal(fullPath)) {
                 return window.open(fullPath)