From 4925fd52af4f8823a3737fb454929f533b244f9e Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@126.com>
Date: Mon, 9 Nov 2020 08:43:47 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E4=BA=86=E4=BB=BF=E4=B8=83?=
 =?UTF-8?q?=E7=89=9B=E4=BA=91=E7=9A=84=E5=8F=8C=E5=B1=82=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E5=AF=BC=E8=88=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/src/asset/style/transition.scss           |   3 -
 vue/src/asset/style/variables.scss            |   2 +-
 vue/src/component/Icon/index.vue              |   2 +
 vue/src/component/menu/NavMenu/index.vue      |  35 ++-
 vue/src/component/menu/NavMenu/item.vue       |   6 +-
 .../menu/NavMenu}/style.scss                  | 114 ++++-----
 vue/src/layout/component/Aside/Logo.vue       |  45 ++++
 .../layout/component/Aside/OnePart/index.vue  | 222 +++++++++++++++++
 .../layout/component/Aside/TwoPart/index.vue  |  86 ++++++-
 .../layout/component/Aside/TwoPart/root.vue   | 101 +++++++-
 .../layout/component/Aside/TwoPart/sub.vue    | 103 +++++++-
 vue/src/layout/component/Aside/index.vue      | 228 +++---------------
 .../{component => }/Navbar/component/Bell.vue |   0
 .../Navbar/component/Hamburger.vue            |   0
 .../Navbar/component/HeadMenu.vue             |   8 +-
 .../Header/{component => }/Navbar/index.vue   |  62 ++++-
 .../{component => }/TagsView/ScrollPanel.vue  |   0
 .../Header/{component => }/TagsView/index.vue |   0
 .../{component => }/TagsView/style.scss       |   0
 .../Header/component/Navbar/style.scss        | 101 --------
 vue/src/layout/component/Header/index.vue     |   4 +-
 vue/src/layout/util.js                        |   8 +-
 22 files changed, 725 insertions(+), 405 deletions(-)
 rename vue/src/{layout/component/Aside => component/menu/NavMenu}/style.scss (54%)
 create mode 100644 vue/src/layout/component/Aside/OnePart/index.vue
 rename vue/src/layout/component/Header/{component => }/Navbar/component/Bell.vue (100%)
 rename vue/src/layout/component/Header/{component => }/Navbar/component/Hamburger.vue (100%)
 rename vue/src/layout/component/Header/{component => }/Navbar/component/HeadMenu.vue (98%)
 rename vue/src/layout/component/Header/{component => }/Navbar/index.vue (76%)
 rename vue/src/layout/component/Header/{component => }/TagsView/ScrollPanel.vue (100%)
 rename vue/src/layout/component/Header/{component => }/TagsView/index.vue (100%)
 rename vue/src/layout/component/Header/{component => }/TagsView/style.scss (100%)
 delete mode 100644 vue/src/layout/component/Header/component/Navbar/style.scss

diff --git a/vue/src/asset/style/transition.scss b/vue/src/asset/style/transition.scss
index e187ba2..f05199c 100644
--- a/vue/src/asset/style/transition.scss
+++ b/vue/src/asset/style/transition.scss
@@ -209,19 +209,16 @@ $transition-easing: cubic-bezier(0.215, 0.61, 0.355, 1);
     &-enter-to,
     &-leave {
         transform: perspective(400px) rotate3d(1, 1, 0, 0deg)
-
     }
 }
 
 .flip-right {
     &-enter {
         transform: perspective(400px) rotate3d(0, 1, 0, -180deg)
-
     }
 
     &-leave-to {
         transform: perspective(400px) rotate3d(0, 1, 0, 180deg)
-
     }
 }
 
diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss
index 7265234..2f0bbc5 100644
--- a/vue/src/asset/style/variables.scss
+++ b/vue/src/asset/style/variables.scss
@@ -51,7 +51,7 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
 $menu-icon-text-gap: 10px;
 
 //侧边菜单icon的大小
-$aside-icon-size: 14px;
+$aside-icon-size: 16px;
 //侧边栏菜单的背景色
 $aside-menu-background: #304156;
 //侧边栏子菜单的背景色
diff --git a/vue/src/component/Icon/index.vue b/vue/src/component/Icon/index.vue
index cc074a7..4c42251 100644
--- a/vue/src/component/Icon/index.vue
+++ b/vue/src/component/Icon/index.vue
@@ -11,6 +11,8 @@ export default {
     render(h, context) {
         const {data, props: {icon}} = context
 
+        if (!icon) return
+
         //渲染成svg
         if (icon.startsWith(SVG_PREFIX)) {
             return (
diff --git a/vue/src/component/menu/NavMenu/index.vue b/vue/src/component/menu/NavMenu/index.vue
index 694c6ee..240160b 100644
--- a/vue/src/component/menu/NavMenu/index.vue
+++ b/vue/src/component/menu/NavMenu/index.vue
@@ -11,11 +11,31 @@ export default {
         mode: {type: String, default: 'vertical'},
         collapse: Boolean,
         showParentOnCollapse: Boolean,
-        showIconMaxDepth: {type: Number, default: 1}
+        showIconMaxDepth: {type: Number, default: 1},
+        switchTransition: Boolean,
+        switchTransitionName: {type: String, default: 'sidebar'}
     },
 
     render(h, context) {
-        const {data, props: {mode, menus, collapse, showParentOnCollapse, showIconMaxDepth}} = context
+        const {
+            data, children,
+            props: {
+                mode, menus, collapse, showParentOnCollapse,
+                showIconMaxDepth, switchTransition, switchTransitionName
+            }
+        } = context
+
+        let items = children || menus.map(m => (
+            <Item
+                menu={m}
+                show-parent={showParentOnCollapse}
+                collapse={collapse}
+                show-icon-max-depth={showIconMaxDepth}
+            />
+        ))
+        if (switchTransition) {
+            items = <transition-group name={switchTransitionName}>{items}</transition-group>
+        }
 
         return (
             <el-menu
@@ -26,16 +46,11 @@ export default {
                 collapse-transition={false}
                 {...data}
             >
-                {menus.map(m => (
-                    <Item
-                        menu={m}
-                        show-parent={showParentOnCollapse}
-                        collapse={collapse}
-                        show-icon-max-depth={showIconMaxDepth}
-                    />
-                ))}
+                {items}
             </el-menu>
         )
     }
 }
 </script>
+
+<style lang="scss" src="./style.scss"></style>
diff --git a/vue/src/component/menu/NavMenu/item.vue b/vue/src/component/menu/NavMenu/item.vue
index b9feda5..9c92941 100644
--- a/vue/src/component/menu/NavMenu/item.vue
+++ b/vue/src/component/menu/NavMenu/item.vue
@@ -1,7 +1,5 @@
 <script type="text/jsx">
 const MenuItemContent = {
-    name: "NavMenuItemContent",
-
     functional: true,
 
     props: {icon: String, title: String, useTitleAsIcon: Boolean},
@@ -11,7 +9,7 @@ const MenuItemContent = {
 
         const iconComponent =
             useTitleAsIcon
-                ? <em>{title[0]}</em>
+                ? <i class="icon" style="font-style: normal">{title[0]}</i>
                 : icon
                 ? <v-icon icon={icon}/>
                 : <span class="icon" style="display: none"/>
@@ -116,8 +114,6 @@ function renderMenu(h, {menu, showParent, collapse, showIconMaxDepth, depth = 1}
 }
 
 export default {
-    name: "NavMenuItem",
-
     functional: true,
 
     props: {
diff --git a/vue/src/layout/component/Aside/style.scss b/vue/src/component/menu/NavMenu/style.scss
similarity index 54%
rename from vue/src/layout/component/Aside/style.scss
rename to vue/src/component/menu/NavMenu/style.scss
index 32e146e..a94f2e6 100644
--- a/vue/src/layout/component/Aside/style.scss
+++ b/vue/src/component/menu/NavMenu/style.scss
@@ -1,59 +1,9 @@
 @import "~@/asset/style/variables.scss";
 
-//侧边栏
-.aside {
-    display: flex;
-    flex-direction: column;
-    width: $aside-width;
-    background-color: $aside-menu-background;
-    font-size: 0;
-    flex-shrink: 0;
-    height: 100vh;
-    z-index: 10;
-    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
-    transition: all 0.2s ease-in-out;
-
-    //折叠状态
-    &.collapse {
-        width: $aside-icon-size + 20px * 2;
-    }
-
-    > .sidebar-logo-container {
-        position: relative;
-        width: 100%;
-        height: $nav-height;
-        line-height: $nav-height;
-        text-align: center;
-
-        .sidebar-logo-link {
-            height: 100%;
-            width: 100%;
-
-            .sidebar-logo {
-                width: 32px;
-                height: 32px;
-                vertical-align: middle;
-                margin-right: 12px;
-            }
-
-            .sidebar-title {
-                display: inline-block;
-                margin: 0;
-                color: #ffffff;
-                font-weight: 600;
-                line-height: $nav-height;
-                font-size: 14px;
-                font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
-                vertical-align: middle;
-            }
-        }
-
-        &.collapse {
-            .sidebar-logo {
-                margin-right: 0;
-            }
-        }
-    }
+//原始样式使用 '>' 可能导致侧边栏折叠时还会显示右侧箭头图标
+//此样式只对垂直状态生效
+.el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
+    display: none;
 }
 
 /*-------侧边栏垂直菜单开始---------*/
@@ -107,4 +57,60 @@
         border-bottom: 1px solid $aside-sub-menu-background;
     }
 }
+
 /*-------侧边栏垂直菜单结束---------*/
+
+/*-------顶部水平菜单开始-----------*/
+.el-menu--horizontal .el-menu,
+.el-menu--horizontal.el-menu {
+    font-size: 14px;
+
+    .icon {
+        font-size: 14px;
+    }
+
+    //图标和文字的间隔
+    .icon + .menu-item-content {
+        margin-left: $menu-icon-text-gap;
+    }
+
+    //菜单的文字以及hover颜色
+    .el-menu-item,
+    .el-submenu__title {
+        color: $head-menu-item-color;
+
+        &:hover {
+            color: $head-menu-item-hover-color;
+        }
+
+        > span {
+            max-width: 100px;
+        }
+    }
+
+    //submenu的右侧箭头会稍微偏上，不懂为啥
+    .el-submenu__icon-arrow {
+        margin-top: -4px;
+    }
+}
+
+//顶部菜单的顶级节点
+.el-menu--horizontal.el-menu {
+    //不显示折叠展开按钮
+    > .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
+        display: none;
+    }
+
+    //顶级节点的高度以及hover颜色
+    > .el-menu-item,
+    > .el-submenu > .el-submenu__title {
+        height: $nav-height;
+        line-height: $nav-height;
+
+        &:hover {
+            border-bottom: 2px solid $head-menu-item-hover-color;
+        }
+    }
+}
+
+/*-------顶部水平菜单结束---------*/
diff --git a/vue/src/layout/component/Aside/Logo.vue b/vue/src/layout/component/Aside/Logo.vue
index e4b7677..bb2d9ca 100644
--- a/vue/src/layout/component/Aside/Logo.vue
+++ b/vue/src/layout/component/Aside/Logo.vue
@@ -24,3 +24,48 @@ export default {
     }
 }
 </script>
+
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+$logoSize: 30px;
+
+.sidebar-logo-container {
+    position: relative;
+    width: 100%;
+    height: $nav-height;
+    line-height: $nav-height;
+    padding-left: 20px;
+
+    .sidebar-logo-link {
+        height: 100%;
+        width: 100%;
+
+        .sidebar-logo {
+            width: $logoSize;
+            height: $logoSize;
+            vertical-align: middle;
+
+            & + .sidebar-title {
+                margin-left: 12px;
+            }
+        }
+
+        .sidebar-title {
+            display: inline-block;
+            margin: 0;
+            color: #ffffff;
+            font-weight: 600;
+            line-height: $nav-height;
+            font-size: 14px;
+            font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+            vertical-align: middle;
+        }
+    }
+
+    &.collapse {
+        text-align: center;
+        padding-left: 0;
+    }
+}
+</style>
diff --git a/vue/src/layout/component/Aside/OnePart/index.vue b/vue/src/layout/component/Aside/OnePart/index.vue
new file mode 100644
index 0000000..267d4c0
--- /dev/null
+++ b/vue/src/layout/component/Aside/OnePart/index.vue
@@ -0,0 +1,222 @@
+<script type="text/jsx">
+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 Logo from '@/layout/component/Aside/Logo'
+import NavMenu from '@/component/menu/NavMenu'
+import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util"
+import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
+
+export default {
+    name: "Sidebar",
+
+    mixins: [menuMixin],
+
+    components: {Logo, NavMenu},
+
+    data() {
+        return {
+            //鼠标是否在侧边栏外
+            mouseOutside: true
+        }
+    },
+
+    computed: {
+        isMobile: () => appGetters.isMobile,
+
+        //侧边栏菜单
+        menus: () => getSidebarMenus(),
+
+        //当时移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹
+        renderInDrawer() {
+            return this.isMobile || asideGetters.autoHide
+        },
+
+        //侧边栏的显隐状态，true显示、false隐藏
+        show() {
+            //store中要显示那就显示
+            if (asideGetters.show) return true
+
+            //移动端，false
+            if (this.isMobile) return false
+
+            //未设置侧边栏自动隐藏，false
+            if (!asideGetters.autoHide) return false
+
+            //鼠标在侧边栏内，true
+            if (!this.mouseOutside) return true
+
+            //侧边栏处于折叠状态 且 存在弹出的子菜单，true
+            return this.collapse && this.openedMenuNum > 0
+        },
+
+        //侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
+        collapse() {
+            return asideGetters.collapse && !this.isMobile
+        },
+
+        //判断是否需要绑定鼠标移动的事件
+        shouldBindMouseMoveEvent() {
+            //如果是移动端，false
+            if (this.isMobile) return false
+
+            //如果未启用侧边栏自动隐藏，false
+            if (!asideGetters.autoHide) return false
+
+            //侧边栏为打开状态，false
+            if (this.show) return false
+
+            //鼠标在侧边栏外部，true
+            return this.mouseOutside
+        }
+    },
+
+    watch: {
+        '$route.path': {
+            immediate: true,
+            handler(v) {
+                //如果是redirect跳转，则跳过
+                if (v.startsWith('/redirect')) return
+
+                this.activeMenu = getActiveMenuByRoute(this.$route)
+
+                const menu = this.$refs.menu
+                if (!menu) return
+                const item = menu.items[this.activeMenu]
+
+                //如果侧边栏中没有对应的激活菜单，则收起全部
+                if (!item) return menu.openedMenus = []
+
+                //由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
+                this.onSelect(item.index, item.indexPath, item, false)
+
+                //仅当非抽屉模式下滚动至激活的菜单
+                !this.renderInDrawer && this.$nextTick(this.moveToCurrentMenu)
+            }
+        },
+
+        //切换至移动端时收起侧边栏
+        isMobile: {
+            immediate: true,
+            handler(v) {
+                v && asideMutations.close()
+            }
+        },
+
+        //抽屉模式下侧边栏显示时滚动至激活菜单
+        show(v) {
+            v && this.$nextTick(this.moveToCurrentMenu)
+        },
+
+        //添加或移除鼠标移动事件
+        shouldBindMouseMoveEvent: {
+            immediate: true,
+            handler(v) {
+                //尝试移除之前可能添加的事件
+                window.removeEventListener('mousemove', this.moveEvent)
+
+                v && window.addEventListener('mousemove', this.moveEvent)
+            }
+        }
+    },
+
+    methods: {
+        //开启侧边栏自动隐藏后的鼠标移动事件
+        moveEvent(e) {
+            //鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部
+            if (e.clientX <= 1) this.mouseOutside = false
+        },
+
+        //模拟选中菜单
+        onSelect(index, indexPath, item, jump = true) {
+            //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
+            if (asideGetters.uniqueOpen && indexPath.length === 1) {
+                const menu = this.$refs.menu
+                const opened = menu.openedMenus
+                opened.forEach(i => i !== index && menu.closeMenu(i))
+            }
+
+            jump && this.actionOnSelectMenu(index)
+
+            //抽屉模式下需要关闭抽屉
+            if (this.renderInDrawer && this.show) {
+                asideMutations.close()
+                this.mouseOutside = true
+            }
+        },
+
+        //滚动至当前激活的菜单
+        moveToCurrentMenu() {
+            moveToActiveMenuVertically(this.$refs.menu)
+        }
+    },
+
+    beforeDestroy() {
+        window.removeEventListener('mousemove', this.moveEvent)
+    },
+
+    render() {
+        if (this.menus.length <= 0) return
+
+        const aside = (
+            <aside
+                class={{'aside': true, 'sidebar': true, 'collapse': this.collapse}}
+                on-mouseleave={() => this.mouseOutside = true}
+                on-mouseenter={() => this.mouseOutside = false}
+            >
+                {asideGetters.showLogo && <logo collapse={this.collapse}/>}
+                <nav-menu
+                    menus={this.menus}
+                    collapse={this.collapse}
+                    default-active={this.activeMenu}
+                    unique-opened={asideGetters.uniqueOpen}
+                    show-parent={asideGetters.showParentOnCollapse}
+                    switch-transition
+                    on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}}
+                />
+            </aside>
+        )
+
+        if (this.renderInDrawer) {
+            return (
+                <el-drawer
+                    visible={this.show}
+                    with-header={false}
+                    direction="ltr"
+                    size="auto"
+                    on-close={() => asideMutations.close()}
+                >
+                    {aside}
+                </el-drawer>
+            )
+        }
+
+        return aside
+    }
+}
+</script>
+
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+.sidebar {
+    display: flex;
+    flex-direction: column;
+    width: $aside-width;
+    background-color: $aside-menu-background;
+    font-size: 0;
+    height: 100vh;
+    z-index: 10;
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    transition: all 0.2s ease-in-out;
+
+    //折叠状态
+    &.collapse {
+        width: $aside-icon-size + 20px * 2;
+
+        .menu-item-content {
+            display: none;
+        }
+    }
+}
+</style>
diff --git a/vue/src/layout/component/Aside/TwoPart/index.vue b/vue/src/layout/component/Aside/TwoPart/index.vue
index 21364fd..2a80b49 100644
--- a/vue/src/layout/component/Aside/TwoPart/index.vue
+++ b/vue/src/layout/component/Aside/TwoPart/index.vue
@@ -1,12 +1,84 @@
-<script>
+<script type="text/jsx">
+import RootSidebar from './root'
+import SubSidebar from './sub'
+
 export default {
-    name: "TwoPartSidebar",
-    data() {
-        return {}
-    },
-    methods: {},
-    mounted() {
+    functional: true,
 
+    render() {
+        return (
+            <aside class="aside">
+                <RootSidebar/>
+                <SubSidebar/>
+            </aside>
+        )
     }
 }
 </script>
+
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+$background-color: #1d2935;
+
+.root-sidebar-container {
+    width: $aside-icon-size + 20px * 2;
+    position: relative;
+}
+
+.root-sidebar {
+    display: flex;
+    flex-direction: column;
+    position: absolute;
+    height: 100vh;
+    width: $aside-width;
+    background-color: $background-color;
+    overflow: hidden;
+    z-index: 11;
+    border-right: 1px solid #101117;
+    transition: all 0.2s ease-in-out;
+
+    > .el-menu--vertical.el-menu {
+        background-color: $background-color;
+    }
+
+    //折叠状态
+    &.collapse {
+        width: $aside-icon-size + 20px * 2;
+
+        .menu-item-content {
+            display: none;
+        }
+    }
+}
+
+.sub-sidebar {
+    display: flex;
+    flex-direction: column;
+    width: $aside-width;
+    background-color: $aside-menu-background;
+    font-size: 0;
+    height: 100vh;
+    z-index: 10;
+    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+    transition: all 0.2s ease-in-out;
+
+    //折叠状态
+    &.collapse {
+        width: $aside-icon-size + 20px * 2;
+
+        .sub-sidebar-title,
+        .menu-item-content {
+            display: none;
+        }
+    }
+
+    &-title {
+        height: $nav-height;
+        line-height: $nav-height;
+        padding-left: 20px;
+        color: #ffffff;
+        font-size: 16px;
+    }
+}
+</style>
diff --git a/vue/src/layout/component/Aside/TwoPart/root.vue b/vue/src/layout/component/Aside/TwoPart/root.vue
index aa7553c..ae10ee3 100644
--- a/vue/src/layout/component/Aside/TwoPart/root.vue
+++ b/vue/src/layout/component/Aside/TwoPart/root.vue
@@ -1,6 +1,45 @@
 <script type="text/jsx">
+import menuMixin from "@/layout/mixin/menu"
+import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
+import {getters as asideGetters} from "@/layout/store/aside"
+import Logo from '@/layout/component/Aside/Logo'
+
+const Item = {
+    functional: true,
+
+    props: {
+        title: String,
+        icon: String,
+        active: Boolean
+    },
+
+    render(h, context) {
+        const {title, icon, active} = context.props
+        const {click} = context.listeners
+
+        const iconComponent =
+            icon
+                ? <v-icon icon={icon}/>
+                : <i class="icon" style="font-style: normal">{title[0]}</i>
+
+        return (
+            <li
+                class={{'el-menu-item': true, 'is-active': active}}
+                on-click={click}
+            >
+                {iconComponent}
+                <span class="menu-item-content">{title}</span>
+            </li>
+        )
+    }
+}
+
 export default {
-    name: "TwoPartRootSidebar",
+    name: "RootSidebar",
+
+    mixins: [menuMixin],
+
+    components: {Logo, Item},
 
     data() {
         return {
@@ -9,10 +48,66 @@ export default {
         }
     },
 
-    methods: {},
+    computed: {
+        menus() {
+            return appGetters.menus.map(root => ({...root, children: undefined}))
+        }
+    },
 
-    mounted() {
+    watch: {
+        //路由变化时设置高亮菜单
+        $route: {
+            immediate: true,
+            handler(to) {
+                const {path, matched} = to
+                //使用/redirect跳转 或 无匹配路由 时跳过
+                if (path.startsWith('/redirect') || matched.length === 0) {
+                    return
+                }
+                this.setActiveRootMenu(this.navMode, to)
+            }
+        }
+    },
+
+    methods: {
+        //设置当前激活的顶部菜单
+        setActiveRootMenu(navMode = this.navMode, {matched} = this.$route) {
+            const rootPath = matched[0].path || '/'
+            appMutations.activeRootMenu(rootPath)
+        },
+        onSelect(index) {
+            //点击相同菜单不刷新页面
+            if (index !== appGetters.activeRootMenu) {
+                this.actionOnSelectMenu(index)
+            }
+
+            //收起
+            this.mouseOutside = true
+        },
+    },
 
+    render() {
+        return (
+            <div class="root-sidebar-container">
+                <div
+                    class={{'root-sidebar': true, 'collapse': this.mouseOutside}}
+                    on-mouseleave={() => this.mouseOutside = true}
+                    on-mouseenter={() => this.mouseOutside = false}
+                >
+                    {asideGetters.showLogo && <logo collapse={this.mouseOutside}/>}
+                    <ul class="el-menu el-menu--vertical">
+                        {this.menus.map(({fullPath, meta: {title, icon}}) => (
+                            <item
+                                title={title}
+                                icon={icon}
+                                active={fullPath === appGetters.activeRootMenu}
+                                on-click={() => this.onSelect(fullPath)}
+                            />
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        )
     }
 }
 </script>
diff --git a/vue/src/layout/component/Aside/TwoPart/sub.vue b/vue/src/layout/component/Aside/TwoPart/sub.vue
index 912014f..2130146 100644
--- a/vue/src/layout/component/Aside/TwoPart/sub.vue
+++ b/vue/src/layout/component/Aside/TwoPart/sub.vue
@@ -1,20 +1,97 @@
-<template>
+<script type="text/jsx">
+import menuMixin from "@/layout/mixin/menu"
+import {getters as appGetters} from "@/layout/store/app"
+import {getters as asideGetters} from "@/layout/store/aside"
+import NavMenu from "@/component/menu/NavMenu"
+import {getActiveMenuByRoute, getSidebarMenus} from "@/layout/util"
+import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
 
-</template>
-
-<script>
 export default {
-    name: "TwoPartSubSidebar",
-    data() {
-        return {}
+    name: "SubSidebar",
+
+    mixins: [menuMixin],
+
+    components: {NavMenu},
+
+    computed: {
+        //父级菜单
+        rootMenu() {
+            const active = appGetters.activeRootMenu
+            return appGetters.menus.find(i => i.fullPath === active)
+        },
+
+        //侧边栏菜单
+        menus: () => getSidebarMenus(),
+
+        //侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
+        collapse() {
+            return asideGetters.collapse && !asideGetters.isMobile
+        },
+    },
+
+    watch: {
+        '$route.path': {
+            immediate: true,
+            handler(v) {
+                //如果是redirect跳转，则跳过
+                if (v.startsWith('/redirect')) return
+
+                this.activeMenu = getActiveMenuByRoute(this.$route)
+
+                const menu = this.$refs.menu
+                if (!menu) return
+                const item = menu.items[this.activeMenu]
+
+                //如果侧边栏中没有对应的激活菜单，则收起全部
+                if (!item) return menu.openedMenus = []
+
+                //由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
+                this.onSelect(item.index, item.indexPath, item, false)
+
+                //滚动至激活的菜单
+                this.$nextTick(this.moveToCurrentMenu)
+            }
+        }
+    },
+
+    methods: {
+        //模拟选中菜单
+        onSelect(index, indexPath, item, jump = true) {
+            //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
+            if (asideGetters.uniqueOpen && indexPath.length === 1) {
+                const menu = this.$refs.menu
+                const opened = menu.openedMenus
+                opened.forEach(i => i !== index && menu.closeMenu(i))
+            }
+
+            jump && this.actionOnSelectMenu(index)
+        },
+
+        //滚动至当前激活的菜单
+        moveToCurrentMenu() {
+            moveToActiveMenuVertically(this.$refs.menu)
+        }
     },
-    methods: {},
-    mounted() {
 
+    render() {
+        if (this.menus.length <= 0) return
+
+        return (
+            <div class={{'sub-sidebar': true, 'collapse': this.collapse}}>
+                <div class="sub-sidebar-title">
+                    {this.rootMenu && this.rootMenu.meta.title}
+                </div>
+                <nav-menu
+                    menus={this.menus}
+                    collapse={this.collapse}
+                    default-active={this.activeMenu}
+                    unique-opened={asideGetters.uniqueOpen}
+                    show-parent={asideGetters.showParentOnCollapse}
+                    switch-transition
+                    on-select={this.onSelect}
+                />
+            </div>
+        )
     }
 }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/vue/src/layout/component/Aside/index.vue b/vue/src/layout/component/Aside/index.vue
index 52810e4..be50baf 100644
--- a/vue/src/layout/component/Aside/index.vue
+++ b/vue/src/layout/component/Aside/index.vue
@@ -1,208 +1,48 @@
 <script type="text/jsx">
-import menuMixin from "@/layout/mixin/menu"
+import OnePart from './OnePart'
+import TwoPart from './TwoPart'
 import {getters as appGetters} from "@/layout/store/app"
-import {getters as asideGetters, mutations as asideMutations} from "@/layout/store/aside"
-import Logo from '@/layout/component/Aside/Logo'
-import NavMenuItem from '@/component/menu/NavMenu/item'
-import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util"
-import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
 
 export default {
-    name: 'Aside',
+    functional: true,
 
-    mixins: [menuMixin],
-
-    components: {Logo, NavMenuItem},
-
-    data() {
-        return {
-            //鼠标是否在侧边栏外
-            mouseOutside: true
-        }
-    },
-
-    computed: {
-        isMobile: () => appGetters.isMobile,
-
-        //侧边栏菜单
-        menus: () => getSidebarMenus(),
-
-        //当时移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹
-        renderInDrawer() {
-            return this.isMobile || asideGetters.autoHide
-        },
-
-        //侧边栏的显隐状态，true显示、false隐藏
-        show() {
-            //store中要显示那就显示
-            if (asideGetters.show) return true
-
-            //移动端，false
-            if (this.isMobile) return false
-
-            //未设置侧边栏自动隐藏，false
-            if (!asideGetters.autoHide) return false
-
-            //鼠标在侧边栏内，true
-            if (!this.mouseOutside) return true
-
-            //侧边栏处于折叠状态 且 存在弹出的子菜单，true
-            return this.collapse && this.openedMenuNum > 0
-        },
-
-        //侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
-        collapse() {
-            return asideGetters.collapse && !this.isMobile
-        },
-
-        //判断是否需要绑定鼠标移动的事件
-        shouldBindMouseMoveEvent() {
-            //如果是移动端，false
-            if (this.isMobile) return false
-
-            //如果未启用侧边栏自动隐藏，false
-            if (!asideGetters.autoHide) return false
-
-            //侧边栏为打开状态，false
-            if (this.show) return false
-
-            //鼠标在侧边栏外部，true
-            return this.mouseOutside
-        }
-    },
-
-    watch: {
-        '$route.path': {
-            immediate: true,
-            handler(v) {
-                //如果是redirect跳转，则跳过
-                if (v.startsWith('/redirect')) return
-
-                this.activeMenu = getActiveMenuByRoute(this.$route)
-
-                const menu = this.$refs.menu
-                if (!menu) return
-                const item = menu.items[this.activeMenu]
-
-                //如果侧边栏中没有对应的激活菜单，则收起全部
-                if (!item) return menu.openedMenus = []
-
-                //由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
-                this.onSelect(item.index, item.indexPath, item, false)
-
-                //仅当非抽屉模式下滚动至激活的菜单
-                !this.renderInDrawer && this.$nextTick(this.moveToCurrentMenu)
-            }
-        },
-
-        //切换至移动端时收起侧边栏
-        isMobile: {
-            immediate: true,
-            handler(v) {
-                v && asideMutations.close()
-            }
-        },
-
-        //抽屉模式下侧边栏显示时滚动至激活菜单
-        show(v) {
-            v && this.$nextTick(this.moveToCurrentMenu)
-        },
-
-        //添加或移除鼠标移动事件
-        shouldBindMouseMoveEvent: {
-            immediate: true,
-            handler(v) {
-                //尝试移除之前可能添加的事件
-                window.removeEventListener('mousemove', this.moveEvent)
-
-                v && window.addEventListener('mousemove', this.moveEvent)
-            }
+    render() {
+        //移动端只能使用抽屉模式的单层侧边栏
+        if (appGetters.isMobile) {
+            return <OnePart/>
         }
-    },
 
-    methods: {
-        //开启侧边栏自动隐藏后的鼠标移动事件
-        moveEvent(e) {
-            //鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部
-            if (e.clientX <= 1) this.mouseOutside = false
-        },
-
-        //模拟选中菜单
-        onSelect(index, indexPath, item, jump = true) {
-            //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
-            if (asideGetters.uniqueOpen && indexPath.length === 1) {
-                const menu = this.$refs.menu
-                const opened = menu.openedMenus
-                opened.forEach(i => i !== index && menu.closeMenu(i))
-            }
-
-            jump && this.actionOnSelectMenu(index)
-
-            //抽屉模式下需要关闭抽屉
-            if (this.renderInDrawer && this.show) {
-                asideMutations.close()
-                this.mouseOutside = true
-            }
-        },
-
-        //滚动至当前激活的菜单
-        moveToCurrentMenu() {
-            moveToActiveMenuVertically(this.$refs.menu)
+        switch (appGetters.navMode) {
+            case 'mix':
+            case 'aside':
+                return <OnePart/>
+            case 'aside-two-part':
+                return <TwoPart/>
         }
-    },
-
-    beforeDestroy() {
-        window.removeEventListener('mousemove', this.moveEvent)
-    },
+    }
+}
+</script>
 
-    render() {
-        if (this.menus.length <= 0) return
+<style lang="scss">
+.aside {
+    display: flex;
+    position: relative;
+}
 
-        const aside = (
-            <aside
-                class={{'aside': true, 'collapse': this.collapse}}
-                on-mouseleave={() => this.mouseOutside = true}
-                on-mouseenter={() => this.mouseOutside = false}
-            >
-                {asideGetters.showLogo && <logo collapse={this.collapse}/>}
-                <el-menu
-                    ref="menu"
-                    class="el-menu--vertical"
-                    collapse={this.collapse}
-                    collapse-transition={false}
-                    default-active={this.activeMenu}
-                    unique-opened={asideGetters.uniqueOpen}
-                    on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}}
-                >
-                    {this.menus.map(m => (
-                        <nav-menu-item
-                            menu={m}
-                            show-parent={asideGetters.showParentOnCollapse}
-                            collapse={this.collapse}
-                            show-icon-max-depth={1}
-                        />
-                    ))}
-                </el-menu>
-            </aside>
-        )
+/* 侧边栏切换动画开始 */
+.sidebar-enter-active {
+    transition: all 0.2s;
+}
 
-        if (this.renderInDrawer) {
-            return (
-                <el-drawer
-                    visible={this.show}
-                    with-header={false}
-                    direction="ltr"
-                    size="auto"
-                    on-close={() => asideMutations.close()}
-                >
-                    {aside}
-                </el-drawer>
-            )
-        }
+.sidebar-enter,
+.sidebar-leave-active {
+    opacity: 0;
+    transform: translateY(30px) skewY(10deg)
+}
 
-        return aside
-    }
+.sidebar-leave-active {
+    position: absolute;
 }
-</script>
 
-<style lang="scss" src="./style.scss"></style>
+/* 侧边栏切换动画结束 */
+</style>
diff --git a/vue/src/layout/component/Header/component/Navbar/component/Bell.vue b/vue/src/layout/component/Header/Navbar/component/Bell.vue
similarity index 100%
rename from vue/src/layout/component/Header/component/Navbar/component/Bell.vue
rename to vue/src/layout/component/Header/Navbar/component/Bell.vue
diff --git a/vue/src/layout/component/Header/component/Navbar/component/Hamburger.vue b/vue/src/layout/component/Header/Navbar/component/Hamburger.vue
similarity index 100%
rename from vue/src/layout/component/Header/component/Navbar/component/Hamburger.vue
rename to vue/src/layout/component/Header/Navbar/component/Hamburger.vue
diff --git a/vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue b/vue/src/layout/component/Header/Navbar/component/HeadMenu.vue
similarity index 98%
rename from vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue
rename to vue/src/layout/component/Header/Navbar/component/HeadMenu.vue
index 827b953..7447641 100644
--- a/vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue
+++ b/vue/src/layout/component/Header/Navbar/component/HeadMenu.vue
@@ -5,6 +5,7 @@
  */
 import menuMixin from "@/layout/mixin/menu"
 import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
+import NavMenu from "@/component/menu/NavMenu"
 import NavMenuItem from "@/component/menu/NavMenu/item"
 import {getActiveMenuByRoute} from "@/layout/util"
 
@@ -13,7 +14,7 @@ export default {
 
     mixins: [menuMixin],
 
-    components: {NavMenuItem},
+    components: {NavMenu, NavMenuItem},
 
     props: {
         //是否在只有一个顶部菜单时仍然渲染
@@ -190,15 +191,14 @@ export default {
         }
 
         return (
-            <el-menu
-                ref="menu"
+            <nav-menu
                 mode="horizontal"
                 default-active={this.activeMenu}
                 on-select={this.onSelect}
             >
                 {this.renderVisibleMenus(visibleMenus)}
                 {this.renderHiddenMenus(hiddenMenus, hiddenMenus.length === menus.length)}
-            </el-menu>
+            </nav-menu>
         )
     }
 }
diff --git a/vue/src/layout/component/Header/component/Navbar/index.vue b/vue/src/layout/component/Header/Navbar/index.vue
similarity index 76%
rename from vue/src/layout/component/Header/component/Navbar/index.vue
rename to vue/src/layout/component/Header/Navbar/index.vue
index 6a9d01a..f960e2e 100644
--- a/vue/src/layout/component/Header/component/Navbar/index.vue
+++ b/vue/src/layout/component/Header/Navbar/index.vue
@@ -42,13 +42,14 @@ export default {
             //渲染折叠按钮的条件
             //①侧边栏有菜单
             //②移动端
-            //③桌面端且是侧边栏导航或混合导航模式
-            //④桌面端且未设置侧边栏自动隐藏
+            //③桌面端是双层侧边栏导航
+            //④桌面端且是侧边栏导航或混合导航时，未设置侧边栏自动隐藏
             const hasSidebarMenus = getSidebarMenus().length > 0,
                 isMobile = appGetters.isMobile,
-                correctMode = ['aside','mix'].includes(appGetters.navMode),
-                notAutoHidden = !asideGetters.autoHide,
-                renderHamburger = hasSidebarMenus && (isMobile || correctMode && notAutoHidden)
+                correctMode =
+                    ['aside', 'mix'].includes(appGetters.navMode) && !asideGetters.autoHide
+                    || appGetters.navMode === 'aside-two-part',
+                renderHamburger = hasSidebarMenus && (isMobile || correctMode)
 
             if (renderHamburger) {
                 const active = isMobile ? asideGetters.show : !asideGetters.collapse
@@ -123,4 +124,53 @@ export default {
 }
 </script>
 
-<style lang="scss" src="./style.scss"></style>
+<style lang="scss">
+@import "~@/asset/style/variables.scss";
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: $nav-height;
+    padding: 0 12px;
+    transition: height .3s ease-in-out;
+    position: relative;
+    z-index: 9;
+    background-color: #ffffff;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+
+    > div {
+        display: flex;
+        flex-wrap: nowrap;
+        height: 100%;
+    }
+
+    .navbar-icon {
+        font-size: 18px;
+    }
+
+    .navbar-item {
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        color: #5a5e66;
+        transition: background .3s;
+        cursor: pointer;
+
+        &:hover {
+            background: rgba(0, 0, 0, .025)
+        }
+    }
+
+    .avatar-wrapper {
+        display: flex;
+        align-items: center;
+
+        span {
+            margin-right: 5px;
+            font-size: 18px;
+        }
+    }
+}
+</style>
diff --git a/vue/src/layout/component/Header/component/TagsView/ScrollPanel.vue b/vue/src/layout/component/Header/TagsView/ScrollPanel.vue
similarity index 100%
rename from vue/src/layout/component/Header/component/TagsView/ScrollPanel.vue
rename to vue/src/layout/component/Header/TagsView/ScrollPanel.vue
diff --git a/vue/src/layout/component/Header/component/TagsView/index.vue b/vue/src/layout/component/Header/TagsView/index.vue
similarity index 100%
rename from vue/src/layout/component/Header/component/TagsView/index.vue
rename to vue/src/layout/component/Header/TagsView/index.vue
diff --git a/vue/src/layout/component/Header/component/TagsView/style.scss b/vue/src/layout/component/Header/TagsView/style.scss
similarity index 100%
rename from vue/src/layout/component/Header/component/TagsView/style.scss
rename to vue/src/layout/component/Header/TagsView/style.scss
diff --git a/vue/src/layout/component/Header/component/Navbar/style.scss b/vue/src/layout/component/Header/component/Navbar/style.scss
deleted file mode 100644
index 35c77ee..0000000
--- a/vue/src/layout/component/Header/component/Navbar/style.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-@import "~@/asset/style/variables.scss";
-
-.navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    height: $nav-height;
-    padding: 0 12px;
-    transition: height .3s ease-in-out;
-    position: relative;
-    z-index: 9;
-    background-color: #ffffff;
-    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
-
-    > div {
-        display: flex;
-        flex-wrap: nowrap;
-        height: 100%;
-    }
-
-    .navbar-icon {
-        font-size: 18px;
-    }
-
-    .navbar-item {
-        display: flex;
-        align-items: center;
-        padding: 0 8px;
-        color: #5a5e66;
-        transition: background .3s;
-        cursor: pointer;
-
-        &:hover {
-            background: rgba(0, 0, 0, .025)
-        }
-    }
-
-    .avatar-wrapper {
-        display: flex;
-        align-items: center;
-
-        span {
-            margin-right: 5px;
-            font-size: 18px;
-        }
-    }
-}
-
-//顶部水平菜单
-.el-menu--horizontal .el-menu,
-.el-menu--horizontal.el-menu {
-    font-size: 14px;
-
-    .icon {
-        font-size: 14px;
-    }
-
-    //图标和文字的间隔
-    .icon + .menu-item-content {
-        margin-left: $menu-icon-text-gap;
-    }
-
-    //菜单的文字以及hover颜色
-    .el-menu-item,
-    .el-submenu__title {
-        color: $head-menu-item-color;
-
-        &:hover {
-            color: $head-menu-item-hover-color;
-        }
-
-        > span {
-            max-width: 100px;
-        }
-    }
-
-    //submenu的右侧箭头会稍微偏上，不懂为啥
-    .el-submenu__icon-arrow {
-        margin-top: -4px;
-    }
-}
-
-//顶部菜单的顶级节点
-.el-menu--horizontal.el-menu {
-    //不显示折叠展开按钮
-    > .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
-        display: none;
-    }
-
-    //顶级节点的高度以及hover颜色
-    > .el-menu-item,
-    > .el-submenu > .el-submenu__title {
-        height: $nav-height;
-        line-height: $nav-height;
-
-        &:hover {
-            border-bottom: 2px solid $head-menu-item-hover-color;
-        }
-    }
-}
diff --git a/vue/src/layout/component/Header/index.vue b/vue/src/layout/component/Header/index.vue
index ccdb126..5495b5f 100644
--- a/vue/src/layout/component/Header/index.vue
+++ b/vue/src/layout/component/Header/index.vue
@@ -1,7 +1,7 @@
 <script type="text/jsx">
 import {getters as tagsViewGetters} from "@/layout/store/tagsView"
-import VNavbar from './component/Navbar'
-import TagsView from './component/TagsView'
+import VNavbar from './Navbar'
+import TagsView from './TagsView'
 
 export default {
     name: "Header",
diff --git a/vue/src/layout/util.js b/vue/src/layout/util.js
index 9114bf4..e50283a 100644
--- a/vue/src/layout/util.js
+++ b/vue/src/layout/util.js
@@ -6,21 +6,25 @@ export function getRouterViewCacheKey({name, path, fullPath, meta = {}}) {
     return usePathKey ? path : useFullPathKey ? fullPath : name
 }
 
-//获取侧边栏的菜单
+//获取侧边栏的菜单，如果是双层侧边栏导航时，获取的是子菜单
 export function getSidebarMenus() {
     const menus = appGetters.menus
+
     if (!Array.isArray(menus)) {
         return []
     }
+
+    //移动端时，侧边栏只会按侧边栏导航模式渲染
     if (appGetters.isMobile) {
         return menus
     }
+
     switch (appGetters.navMode) {
         case 'aside':
-        case 'aside-two-part':
             return menus
         case 'head':
             return []
+        case 'aside-two-part':
         case 'mix':
             const root = menus.find(i => i.path === appGetters.activeRootMenu)
             return root ? root.children || [] : []