From 67b5a534fc8a232f1158cdfa6fcbef341d9b73b7 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Thu, 26 Nov 2020 12:46:07 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E5=88=87=E6=8D=A2?=
 =?UTF-8?q?=E6=B1=89=E5=A0=A1=E5=8C=85=E4=BD=8D=E7=BD=AE=E7=9A=84=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/asset/style/element-ui.scss           |  1 -
 vue/src/asset/style/variables.scss            |  7 +++-
 vue/src/component/TreeSelect/index.vue        |  4 +-
 .../component/menu/NavMenu/theme-dark.scss    |  2 +-
 .../component/menu/NavMenu/theme-light.scss   |  2 +-
 .../component/Aside/component/OnePartRoot.vue |  7 +++-
 vue/src/layout/component/Aside/style.scss     | 11 ++++++
 .../layout/component/Aside/theme-dark.scss    | 16 +++++---
 .../layout/component/Aside/theme-light.scss   | 12 +++++-
 vue/src/layout/component/Hamburger.vue        | 30 ++++++++++++++
 .../component/Navbar/component/Hamburger.vue  | 29 --------------
 vue/src/layout/component/Navbar/index.vue     | 39 +++----------------
 .../Page/component/TagsView/style.scss        |  2 +-
 vue/src/layout/component/SettingDrawer.vue    | 18 ++++++++-
 vue/src/layout/mixin/hamburger.js             | 30 ++++++++++++++
 vue/src/layout/store/aside.js                 |  5 ++-
 vue/src/view/app/common/DetailPage/style.scss |  2 +-
 17 files changed, 137 insertions(+), 80 deletions(-)
 create mode 100644 vue/src/layout/component/Hamburger.vue
 delete mode 100644 vue/src/layout/component/Navbar/component/Hamburger.vue
 create mode 100644 vue/src/layout/mixin/hamburger.js

diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss
index ce94831..e0783d5 100644
--- a/vue/src/asset/style/element-ui.scss
+++ b/vue/src/asset/style/element-ui.scss
@@ -94,7 +94,6 @@
 }
 
 .el-menu {
-    height: 100%;
     width: 100%;
     border: none !important;
     overflow: hidden;
diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss
index 36b29f7..83c026c 100644
--- a/vue/src/asset/style/variables.scss
+++ b/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和文字的距离
@@ -100,5 +105,5 @@ $dialog-top: 100px;
     warning: $--color-warning;
     pageViewMargin: $page-view-margin;
     dialogTop: $dialog-top;
-    menuPadding:$menu-padding;
+    menuPadding: $menu-padding;
 }
diff --git a/vue/src/component/TreeSelect/index.vue b/vue/src/component/TreeSelect/index.vue
index 8abe29a..e29a944 100644
--- a/vue/src/component/TreeSelect/index.vue
+++ b/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;
     }
 }
diff --git a/vue/src/component/menu/NavMenu/theme-dark.scss b/vue/src/component/menu/NavMenu/theme-dark.scss
index 31872ac..75262dc 100644
--- a/vue/src/component/menu/NavMenu/theme-dark.scss
+++ b/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;
             }
         }
     }
diff --git a/vue/src/component/menu/NavMenu/theme-light.scss b/vue/src/component/menu/NavMenu/theme-light.scss
index 7786ccf..38a1f8b 100644
--- a/vue/src/component/menu/NavMenu/theme-light.scss
+++ b/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;
             }
         }
     }
diff --git a/vue/src/layout/component/Aside/component/OnePartRoot.vue b/vue/src/layout/component/Aside/component/OnePartRoot.vue
index 2a23902..0fb7c85 100644
--- a/vue/src/layout/component/Aside/component/OnePartRoot.vue
+++ b/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>
         )
 
diff --git a/vue/src/layout/component/Aside/style.scss b/vue/src/layout/component/Aside/style.scss
index 7760c68..c28d122 100644
--- a/vue/src/layout/component/Aside/style.scss
+++ b/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;
+    }
 }
 
 //页面为上下结构时，侧边栏的抽屉模式需要扣除导航栏的高度
diff --git a/vue/src/layout/component/Aside/theme-dark.scss b/vue/src/layout/component/Aside/theme-dark.scss
index 731dcd6..8a2a962 100644
--- a/vue/src/layout/component/Aside/theme-dark.scss
+++ b/vue/src/layout/component/Aside/theme-dark.scss
@@ -1,7 +1,5 @@
-.dark {
-    &.aside {
-        background-color: $menu-dark-background;
-    }
+.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;
+        }
+    }
 }
diff --git a/vue/src/layout/component/Aside/theme-light.scss b/vue/src/layout/component/Aside/theme-light.scss
index ea61d67..610b97d 100644
--- a/vue/src/layout/component/Aside/theme-light.scss
+++ b/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;
+        }
     }
 }
diff --git a/vue/src/layout/component/Hamburger.vue b/vue/src/layout/component/Hamburger.vue
new file mode 100644
index 0000000..6812e6e
--- /dev/null
+++ b/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>
diff --git a/vue/src/layout/component/Navbar/component/Hamburger.vue b/vue/src/layout/component/Navbar/component/Hamburger.vue
deleted file mode 100644
index fc879ba..0000000
--- a/vue/src/layout/component/Navbar/component/Hamburger.vue
+++ /dev/null
@@ -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>
diff --git a/vue/src/layout/component/Navbar/index.vue b/vue/src/layout/component/Navbar/index.vue
index 91f50cd..924c0ed 100644
--- a/vue/src/layout/component/Navbar/index.vue
+++ b/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>
 
diff --git a/vue/src/layout/component/Page/component/TagsView/style.scss b/vue/src/layout/component/Page/component/TagsView/style.scss
index b50be45..e67f6ce 100644
--- a/vue/src/layout/component/Page/component/TagsView/style.scss
+++ b/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;
diff --git a/vue/src/layout/component/SettingDrawer.vue b/vue/src/layout/component/SettingDrawer.vue
index 1d7c6f4..d6ae0d3 100644
--- a/vue/src/layout/component/SettingDrawer.vue
+++ b/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)
diff --git a/vue/src/layout/mixin/hamburger.js b/vue/src/layout/mixin/hamburger.js
new file mode 100644
index 0000000..9363a71
--- /dev/null
+++ b/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
+        }
+    }
+}
diff --git a/vue/src/layout/store/aside.js b/vue/src/layout/store/aside.js
index 65d6914..c7b105f 100644
--- a/vue/src/layout/store/aside.js
+++ b/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)
diff --git a/vue/src/view/app/common/DetailPage/style.scss b/vue/src/view/app/common/DetailPage/style.scss
index ac71da1..6b79cf7 100644
--- a/vue/src/view/app/common/DetailPage/style.scss
+++ b/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;