增加了切换汉堡包位置的功能

vue/src/asset/style/element-ui.scss

@@ -94,7 +94,6 @@
 }
 
 .el-menu {
-    height: 100%;
     width: 100%;
     border: none !important;
     overflow: hidden;

vue/src/asset/style/variables.scss

@@ -47,6 +47,11 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     }
 }
 
+//亮色边框的颜色，使用的element-ui原定义
+$border-color-light: #dcdfe6;
+//暗色边框的颜色
+$border-color-dark: #101117;
+
 //菜单中icon的大小
 $menu-icon-size: 14px;
 //菜单中icon和文字的距离

vue/src/component/TreeSelect/index.vue

@@ -199,6 +199,8 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~@/asset/style/variables.scss";
+
 .tree-select-container {
     padding: 8px;
 
@@ -208,7 +210,7 @@ export default {
 
     .el-tree-node__label.is-disabled {
         background-color: #edf2fc;
-        border-color: #dcdfe6;
+        border-color: $border-color-light;
         cursor: not-allowed;
     }
 }

vue/src/component/menu/NavMenu/theme-dark.scss

@@ -29,7 +29,7 @@
             //设置了显示弹出菜单的父级
             &.el-menu--popup .popover-menu__title {
                 color: $menu-text-dark-hover-color;
-                border-bottom-color: #101117;
+                border-bottom-color: $border-color-dark;
             }
         }
     }

vue/src/component/menu/NavMenu/theme-light.scss

@@ -16,7 +16,7 @@
             //弹出菜单的父级
             &.el-menu--popup .popover-menu__title {
                 color: $menu-text-hover-light-color;
-                border-bottom-color: #dcdfe6;
+                border-bottom-color: $border-color-light;
             }
         }
     }

vue/src/layout/component/Aside/component/OnePartRoot.vue

@@ -1,8 +1,10 @@
 <script type="text/jsx">
+import hamburgerMixin from '@/layout/mixin/hamburger'
 import menuMixin from "@/layout/mixin/menu"
 import {getters as appGetters} from "@/layout/store/app"
 import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
 import {getters as pageGetters} from "@/layout/store/page"
+import Hamburger from '@/layout/component/Hamburger'
 import Logo from '@/layout/component/Logo'
 import NavMenu from '@/component/menu/NavMenu'
 import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util"
@@ -11,9 +13,9 @@ import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
 export default {
     name: "Sidebar",
 
-    mixins: [menuMixin],
+    mixins: [hamburgerMixin, menuMixin],
 
-    components: {Logo, NavMenu},
+    components: {Hamburger, Logo, NavMenu},
 
     data() {
         return {
@@ -197,6 +199,7 @@ export default {
                     switch-transition-name="sidebar"
                     on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}}
                 />
+                {this.renderHamburger && <hamburger class="el-menu-item"/>}
             </div>
         )
 

vue/src/layout/component/Aside/style.scss

@@ -31,6 +31,17 @@
             }
         }
     }
+
+    //垂直菜单占满剩余空间
+    .el-menu--vertical {
+        flex: 1;
+    }
+
+    //底部汉堡包
+    .hamburger {
+        border-top-width: 1px;
+        border-top-style: solid;
+    }
 }
 
 //页面为上下结构时，侧边栏的抽屉模式需要扣除导航栏的高度

vue/src/layout/component/Aside/theme-dark.scss

@@ -1,7 +1,5 @@
-.dark {
-    &.aside {
+.aside.dark {
     background-color: $menu-dark-background;
-    }
 
     .root-sidebar,
     .root-sidebar > .el-menu--vertical.el-menu {
@@ -9,10 +7,18 @@
     }
 
     .root-sidebar {
-        border-right-color: #101117;
+        border-right-color: $border-color-dark;
     }
 
     .sub-sidebar-title {
         color: #ffffff;
     }
+
+    .hamburger {
+        border-top-color: $border-color-dark;
+
+        i {
+            color: $menu-text-dark-color;
+        }
+    }
 }

vue/src/layout/component/Aside/theme-light.scss

@@ -1,6 +1,14 @@
-.light {
+.aside.light {
     .root-sidebar {
         background-color: #ffffff;
-        border-right-color: #dcdfe6;
+        border-right-color: $border-color-light;
+    }
+
+    .hamburger {
+        border-top-color: $border-color-light;
+
+        i {
+            color: $menu-text-light-color;
+        }
     }
 }

vue/src/layout/component/Hamburger.vue

@@ -0,0 +1,30 @@
+<script type="text/jsx">
+import {getters as appGetters} from "@/layout/store/app"
+import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
+
+export default {
+    name: 'Hamburger',
+
+    render() {
+        //考虑侧边栏可能是抽屉的情况
+        const collapsed = appGetters.isMobile ? asideGetters.show : !asideGetters.collapse
+        const className = `hamburger ${collapsed ? 'collapsed' : ''}`
+
+        return (
+            <div
+                class={className}
+                title={`${collapsed ? '折叠' : '展开'}侧边栏`}
+                on-click={asideMutations.switch}
+            >
+                <i class="el-icon-s-unfold"/>
+            </div>
+        )
+    }
+}
+</script>
+
+<style>
+.hamburger.collapsed > i {
+    transform: rotate(180deg);
+}
+</style>

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

@@ -1,29 +0,0 @@
-<script type="text/jsx">
-export default {
-    name: 'Hamburger',
-
-    functional: true,
-
-    props: {active: Boolean},
-
-    render(h, context) {
-        const {active} = context.props
-        const className = `navbar-icon el-icon-s-unfold hamburger ${active ? 'is-active' : ''}`
-        return (
-            <div {...context.data} title={`${active ? '折叠' : '展开'}侧边栏`}>
-                <i class={className}/>
-            </div>
-        )
-    }
-}
-</script>
-
-<style>
-.hamburger {
-    font-size: 20px;
-}
-
-.hamburger.is-active {
-    transform: rotate(180deg);
-}
-</style>

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

@@ -1,22 +1,21 @@
 <script type="jsx">
 import {mapState} from 'vuex'
-import GuideMixin from '@/mixin/guide'
+import guideMixin from '@/mixin/guide'
+import hamburgerMixin from '@/layout/mixin/hamburger'
 import Bell from "./component/Bell"
-import Hamburger from './component/Hamburger'
+import Hamburger from '@/layout/component/Hamburger'
 import HeadMenu from "./component/HeadMenu"
 import Logo from "@/layout/component/Logo"
 import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
-import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
 import {getters as navbarGetters} from "@/layout/store/navbar"
 import {getters as pageGetters} from "@/layout/store/page"
-import {getSidebarMenus} from "@/layout/util"
 import {elConfirm} from "@/util/message"
 import {refreshPage} from "@/util/route"
 
 export default {
     name: 'navbar',
 
-    mixins: [GuideMixin.navbar],
+    mixins: [guideMixin.navbar, hamburgerMixin],
 
     components: {Bell, Hamburger, HeadMenu, Logo},
 
@@ -33,25 +32,6 @@ export default {
                 && (appGetters.navMode === 'head' || pageGetters.position === 'top-bottom')
         },
 
-        //渲染折叠按钮的条件
-        //①侧边栏有菜单
-        //②移动端
-        //③桌面端是双层侧边栏导航
-        //④桌面端且是侧边栏导航或混合导航时，未设置侧边栏自动隐藏
-        renderHamburger() {
-            const hasSidebarMenus = getSidebarMenus().length > 0,
-                isMobile = appGetters.isMobile,
-                correctMode =
-                    ['aside', 'mix'].includes(appGetters.navMode) && !asideGetters.autoHide
-                    || appGetters.navMode === 'aside-two-part'
-
-            return hasSidebarMenus && (isMobile || correctMode)
-        },
-        //判断汉堡包是否激活，需要考虑抽屉模式时的侧边栏
-        isHamburgerActive() {
-            return appGetters.isMobile ? asideGetters.show : !asideGetters.collapse
-        },
-
         //渲染顶部导航菜单的条件
         //①桌面端
         //②导航模式为顶部导航或混合导航
@@ -94,16 +74,9 @@ export default {
             <nav class={this.className}>
                 {this.renderLogo && <logo show-title/>}
 
-                <div style="flex: 1">
-                    {
-                        this.renderHamburger &&
-                        <hamburger
-                            class="navbar-item"
-                            active={this.isHamburgerActive}
-                            on-click={asideMutations.switch}
-                        />
-                    }
+                {this.renderHamburger && <hamburger class="navbar-item navbar-icon"/>}
 
+                <div style="flex: 1">
                     {this.renderHeadMenu && <head-menu always-show theme={navbarGetters.theme}/>}
                 </div>
 

vue/src/layout/component/Page/component/TagsView/style.scss

@@ -24,7 +24,7 @@
             color: #909399;
             background-color: #ffffff;
             border-radius: 3px;
-            border: $border-width solid #dcdfe6;
+            border: $border-width solid $border-color-light;
             padding: 0 12px;
             font-size: 12px;
             margin: $margin;

vue/src/layout/component/SettingDrawer.vue

@@ -82,6 +82,18 @@
                 <span>自动隐藏</span>
                 <el-switch :value="asideGetters.autoHide" @input="changeAsideAutoHide"/>
             </div>
+            <div class="drawer-item">
+                <span>汉堡包位置</span>
+                <el-select
+                    :value="asideGetters.hamburgerPosition"
+                    size="mini"
+                    style="width: 90px"
+                    @input="changeAsideHamburgerPosition"
+                >
+                    <el-option value="aside" label="侧边栏"/>
+                    <el-option value="head" label="导航栏"/>
+                </el-select>
+            </div>
 
             <el-divider>导航栏设置</el-divider>
             <div class="drawer-item">
@@ -179,7 +191,8 @@ export default {
                     uniqueOpen: true,
                     collapse: false,
                     showParentOnCollapse: false,
-                    autoHide: false
+                    autoHide: false,
+                    hamburgerPosition: 'aside'
                 },
                 navbar: {
                     theme: 'light'
@@ -256,6 +269,9 @@ export default {
         changeAsideAutoHide(v) {
             asideMutations.autoHide(v)
         },
+        changeAsideHamburgerPosition(v) {
+            asideMutations.hamburgerPosition(v)
+        },
 
         changeNavbarTheme(v) {
             navbarMutations.theme(v)

vue/src/layout/mixin/hamburger.js

@@ -0,0 +1,30 @@
+import {getters as appGetters} from "@/layout/store/app"
+import {getters as asideGetters} from "@/layout/store/aside"
+import {getSidebarMenus} from "@/layout/util"
+
+/**
+ * 汉堡包的渲染条件混入
+ */
+
+export default {
+    computed: {
+        //渲染汉堡包的条件
+        //①侧边栏有菜单
+        //②移动端 或
+        //③桌面端且汉堡包位置正确（侧边栏引入则需要是aside，反之需要是head）
+        //④桌面端且是双层侧边栏导航
+        //⑤桌面端且是侧边栏导航或混合导航时，未设置侧边栏自动隐藏
+        renderHamburger() {
+            if (getSidebarMenus().length <= 0) return false
+
+            const isMobile = appGetters.isMobile,
+                correctPosition =
+                    asideGetters.hamburgerPosition === (this.$options.name === 'navbar' ? 'head' : 'aside'),
+                correctMode =
+                    ['aside', 'mix'].includes(appGetters.navMode) && !asideGetters.autoHide
+                    || appGetters.navMode === 'aside-two-part'
+
+            return isMobile || correctPosition && correctMode
+        }
+    }
+}

vue/src/layout/store/aside.js

@@ -23,7 +23,10 @@ const state = {
     showParentOnCollapse: false,
 
     //自动隐藏
-    autoHide: false
+    autoHide: false,
+
+    //汉堡包的位置，aside 或 head
+    hamburgerPosition: 'aside'
 }
 
 const store = Vue.observable(state)

vue/src/view/app/common/DetailPage/style.scss

@@ -9,7 +9,7 @@
         margin: -#{$page-view-margin} -#{$page-view-margin} 0 -#{$page-view-margin};
         padding: 16px 32px 0 32px;
         background: #fff;
-        border-bottom: 1px solid #dcdfe6;
+        border-bottom: 1px solid $border-color-light;
 
         > .el-page-header {
             padding: 0 0 24px 0;