From a042a94346e032088242d7b0083c82c54703997f Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Wed, 25 Nov 2020 17:23:51 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=92=8C=E5=AF=BC?=
 =?UTF-8?q?=E8=88=AA=E6=A0=8F=E5=A2=9E=E5=8A=A0=E4=BA=86=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复了导航栏自适应时节点未更新的问题

修复了SettingDrawer由于layout设置变化而重新渲染的问题

导航菜单在没有icon时不会再渲染占位元素

ContextMenu表现形式修改：
- 使用v-show代替整个dom的移除
- 定位由absolute改为fixed

代码优化
---
 vue/src/asset/icon/svg/develop.svg            |   1 +
 vue/src/asset/style/element-ui.scss           |  16 +-
 vue/src/asset/style/variables.scss            |  39 +--
 vue/src/component/menu/ContextMenu/index.vue  |   8 +-
 vue/src/component/menu/NavMenu/index.vue      |  30 ++-
 vue/src/component/menu/NavMenu/item.vue       |  55 ++--
 vue/src/component/menu/NavMenu/style.scss     | 156 +++++-------
 .../component/menu/NavMenu/theme-dark.scss    |  61 +++++
 .../component/menu/NavMenu/theme-light.scss   |  39 +++
 .../layout/component/Aside/TwoPart/index.vue  |  17 --
 .../index.vue => component/OnePartRoot.vue}   |  53 ++--
 .../root.vue => component/TwoPartRoot.vue}    |  57 +----
 .../sub.vue => component/TwoPartSub.vue}      |  44 +---
 vue/src/layout/component/Aside/index.vue      |  52 ++--
 vue/src/layout/component/Aside/style.scss     |  89 +++++++
 .../layout/component/Aside/theme-dark.scss    |  18 ++
 .../layout/component/Aside/theme-light.scss   |   6 +
 vue/src/layout/component/Logo.vue             |  12 +-
 .../component/Navbar/component/Bell.vue       |   1 +
 .../component/Navbar/component/HeadMenu.vue   |  80 +++---
 vue/src/layout/component/Navbar/index.vue     | 241 +++++++-----------
 vue/src/layout/component/Navbar/style.scss    |  49 ++++
 .../layout/component/Navbar/theme-dark.scss   |  11 +
 .../layout/component/Navbar/theme-light.scss  |  11 +
 .../Page/component/TagsView/index.vue         |  46 ++--
 .../Page/component/TagsView/style.scss        |  23 +-
 vue/src/layout/component/Page/index.vue       |   3 +-
 vue/src/layout/component/SettingDrawer.vue    |  99 ++++---
 vue/src/layout/index.vue                      |  30 ++-
 vue/src/layout/store/app.js                   |   4 +
 vue/src/layout/store/aside.js                 |   3 +
 vue/src/layout/store/navbar.js                |  13 +
 vue/src/router/module/devRoot/index.js        |   2 +-
 vue/src/util/browser.js                       |   6 +-
 vue/src/view/app/common/DetailPage/style.scss |   2 +-
 vue/src/view/example/cool/fluidPage.vue       |   2 +-
 .../component/PanelGroup/PanelGroupItem.vue   |   1 -
 .../view/index/component/PanelGroup/index.vue |  10 +-
 .../view/system/category/component/List.vue   |   8 +-
 vue/src/view/system/department/indexPage.vue  |   5 +-
 40 files changed, 793 insertions(+), 610 deletions(-)
 create mode 100644 vue/src/asset/icon/svg/develop.svg
 create mode 100644 vue/src/component/menu/NavMenu/theme-dark.scss
 create mode 100644 vue/src/component/menu/NavMenu/theme-light.scss
 delete mode 100644 vue/src/layout/component/Aside/TwoPart/index.vue
 rename vue/src/layout/component/Aside/{OnePart/index.vue => component/OnePartRoot.vue} (88%)
 rename vue/src/layout/component/Aside/{TwoPart/root.vue => component/TwoPartRoot.vue} (76%)
 rename vue/src/layout/component/Aside/{TwoPart/sub.vue => component/TwoPartSub.vue} (78%)
 create mode 100644 vue/src/layout/component/Aside/style.scss
 create mode 100644 vue/src/layout/component/Aside/theme-dark.scss
 create mode 100644 vue/src/layout/component/Aside/theme-light.scss
 create mode 100644 vue/src/layout/component/Navbar/style.scss
 create mode 100644 vue/src/layout/component/Navbar/theme-dark.scss
 create mode 100644 vue/src/layout/component/Navbar/theme-light.scss
 create mode 100644 vue/src/layout/store/navbar.js

diff --git a/vue/src/asset/icon/svg/develop.svg b/vue/src/asset/icon/svg/develop.svg
new file mode 100644
index 0000000..a0dadbd
--- /dev/null
+++ b/vue/src/asset/icon/svg/develop.svg
@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="200" height="200"><defs><style/></defs><path d="M964.432 861.95c0 53.44-43.325 96.763-96.764 96.763H153.817c-53.44 0-96.764-43.323-96.764-96.763v-699.9c0-53.438 43.324-96.763 96.764-96.763h713.851c53.44 0 96.764 43.324 96.764 96.764v699.9zm-55.839-699.9c0-22.602-18.322-40.924-40.925-40.924H153.817c-22.603 0-40.925 18.322-40.925 40.925v699.9c0 22.602 18.322 40.923 40.925 40.923h713.851c22.603 0 40.925-18.321 40.925-40.924v-699.9z"/><path d="M931.196 274.682H79.656c-7.717 0-13.96-6.244-13.96-13.96 0-7.717 6.244-13.96 13.96-13.96h851.54c7.701 0 13.959 6.243 13.959 13.96 0 7.716-6.257 13.96-13.96 13.96zM177.373 204.884h-13.96c-7.715 0-13.96-6.244-13.96-13.96 0-7.715 6.245-13.96 13.96-13.96h13.96c7.703 0 13.96 6.245 13.96 13.96 0 7.716-6.257 13.96-13.96 13.96zM275.09 204.884h-13.96c-7.715 0-13.96-6.244-13.96-13.96 0-7.715 6.245-13.96 13.96-13.96h13.96c7.703 0 13.96 6.245 13.96 13.96 0 7.716-6.257 13.96-13.96 13.96zM372.808 204.884h-13.96c-7.716 0-13.96-6.244-13.96-13.96 0-7.715 6.244-13.96 13.96-13.96h13.96c7.703 0 13.96 6.245 13.96 13.96 0 7.716-6.257 13.96-13.96 13.96zM361.18 769.985c-4.062 0-8.097-1.77-10.85-5.153l-127.97-157.92a13.992 13.992 0 010-17.586l78.837-97.302c4.854-5.971 13.646-6.885 19.631-2.058 6 4.853 6.912 13.64 2.06 19.637l-71.708 88.503 120.838 149.139c4.854 5.997 3.926 14.777-2.059 19.63a13.882 13.882 0 01-8.778 3.11zM348.407 469.886a13.906 13.906 0 01-8.78-3.122c-5.985-4.854-6.912-13.646-2.06-19.631l12.761-15.733c4.867-5.985 13.646-6.898 19.631-2.045 5.985 4.853 6.912 13.646 2.06 19.63l-12.761 15.733a13.948 13.948 0 01-10.851 5.168zM663.631 769.985c-3.095 0-6.203-1.007-8.779-3.108-5.998-4.853-6.911-13.633-2.059-19.631l120.838-149.139-120.838-149.12c-4.852-5.998-3.94-14.791 2.059-19.645 5.958-4.839 14.764-3.926 19.631 2.06l127.955 157.925a13.96 13.96 0 010 17.587L674.482 764.83a13.998 13.998 0 01-10.851 5.154zM454.236 695.825a13.891 13.891 0 01-8.779-3.108c-5.985-4.855-6.911-13.633-2.059-19.631l127.969-157.92c4.852-5.97 13.646-6.898 19.63-2.071 5.985 4.852 6.912 13.659 2.06 19.658L465.087 690.67a13.98 13.98 0 01-10.851 5.155z"/></svg>
\ No newline at end of file
diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss
index 5ed8bfa..fba9c17 100644
--- a/vue/src/asset/style/element-ui.scss
+++ b/vue/src/asset/style/element-ui.scss
@@ -94,9 +94,10 @@
 }
 
 .el-menu {
-    border: none;
     height: 100%;
     width: 100%;
+    border: none !important;
+    overflow: hidden;
 
     &::-webkit-scrollbar {
         display: none;
@@ -125,6 +126,11 @@
         color: inherit;
     }
 
+    //原先垂直时右侧展开箭头偏上
+    .el-submenu__icon-arrow {
+        margin-top: -4px;
+    }
+
     //弹出菜单
     &.el-menu--popup {
         max-height: 88vh;
@@ -138,6 +144,14 @@
             padding: 0 20px;
         }
     }
+
+    &--horizontal > .el-menu-item:not(.is-disabled):hover,
+    &--horizontal > .el-menu-item:not(.is-disabled):focus,
+    &--horizontal > .el-submenu .el-submenu__title:hover,
+    &--horizontal .el-menu .el-menu-item,
+    &--horizontal .el-menu .el-submenu__title {
+        background-color: inherit;
+    }
 }
 
 .el-message {
diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss
index 2f0bbc5..0e8de92 100644
--- a/vue/src/asset/style/variables.scss
+++ b/vue/src/asset/style/variables.scss
@@ -1,4 +1,4 @@
-//设定移动端的最大宽度
+//设定移动端的最大宽度，只能是number类型
 $max-mobile-width: 500px;
 
 //覆盖element颜色
@@ -47,29 +47,33 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
     }
 }
 
+//菜单中icon的大小
+$menu-icon-size: 16px;
 //菜单中icon和文字的距离
 $menu-icon-text-gap: 10px;
-
-//侧边菜单icon的大小
-$aside-icon-size: 16px;
-//侧边栏菜单的背景色
-$aside-menu-background: #304156;
-//侧边栏子菜单的背景色
-$aside-sub-menu-background: #1f2d3d;
-//侧边栏菜单文字的颜色
-$aside-menu-item-color: hsla(0, 0%, 99.6%, .65);
-//侧边栏菜单文字的hover颜色
-$aside-menu-item-hover-color: #fefefe;
-
-//顶部菜单文字的颜色
-$head-menu-item-color: #303133;
-//顶部菜单文字的hover颜色
-$head-menu-item-hover-color: $--color-primary;
+//暗色菜单的背景色
+$menu-dark-background: #304156;
+//暗色子级菜单的背景色
+$sub-menu-dark-background: #1f2d3d;
+//暗色主菜单的背景色（用于双层侧边栏的主菜单和顶部导航栏）
+$root-menu-dark-background: #001529;
+//亮色菜单的文字颜色
+$menu-text-light-color: #303133;
+//亮色菜单的文字hover颜色
+$menu-text-hover-light-color: $--color-primary;
+//暗色菜单的文字颜色
+$menu-text-dark-color: rgba(255, 255, 255, .65);
+//暗色菜单的文字hover颜色
+$menu-text-dark-hover-color: rgba(255, 255, 255, 1);
 
 //侧边栏宽度
 $aside-width: 208px;
+//侧边栏折叠时的宽度
+$aside-collapse-width: $menu-icon-size + 20px * 2;
+
 //头部导航栏高度
 $nav-height: 48px;
+
 //头部多页签栏高度
 $tags-view-height: 32px;
 
@@ -86,6 +90,7 @@ $dialog-top: 100px;
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
+    maxMobileWidth: $max-mobile-width;
     primary: $--color-primary;
     info: $--color-info;
     success: $--color-success;
diff --git a/vue/src/component/menu/ContextMenu/index.vue b/vue/src/component/menu/ContextMenu/index.vue
index cba7dd6..3bf2428 100644
--- a/vue/src/component/menu/ContextMenu/index.vue
+++ b/vue/src/component/menu/ContextMenu/index.vue
@@ -70,12 +70,12 @@ export default {
     },
 
     render() {
-        if (!this.value || !Array.isArray(this.items) || this.items.length === 0) return
+        if (!Array.isArray(this.items)) return
 
         const style = {left: this.realLeft, top: this.realTop}
 
         return (
-            <ul class="context-menu" style={style}>
+            <ul v-show={this.value} class="context-menu" style={style}>
                 {this.items.map(i => (
                     i && <item on-click={i.click}>{i.content}</item>
                 ))}
@@ -90,9 +90,9 @@ export default {
 
 .context-menu {
     margin: 0;
-    background: $aside-menu-background;
+    background: $menu-dark-background;
     z-index: 10;
-    position: absolute;
+    position: fixed;
     list-style-type: none;
     padding: 5px 0;
     border-radius: 4px;
diff --git a/vue/src/component/menu/NavMenu/index.vue b/vue/src/component/menu/NavMenu/index.vue
index 240160b..01a3378 100644
--- a/vue/src/component/menu/NavMenu/index.vue
+++ b/vue/src/component/menu/NavMenu/index.vue
@@ -2,45 +2,63 @@
 import Item from './item'
 
 export default {
-    name: "NavMenu",
-
     functional: true,
 
     props: {
+        //路由配置项组成的树形数组
         menus: Array,
+
+        //垂直还是水平，在el-menu原效果上加了样式名
         mode: {type: String, default: 'vertical'},
+
+        //主题，light 或 dark
+        theme: {type: String, default: 'light'},
+
+        //是否折叠
         collapse: Boolean,
+
+        //折叠时的展开菜单是否显示父级
         showParentOnCollapse: Boolean,
+
+        //能够显示图标的最大深度，不传 或 <0 则不作限制
         showIconMaxDepth: {type: Number, default: 1},
+
+        //menus变化时是否使用过渡动画
         switchTransition: Boolean,
-        switchTransitionName: {type: String, default: 'sidebar'}
+
+        //menus过渡动画名称
+        switchTransitionName: String
     },
 
     render(h, context) {
         const {
             data, children,
             props: {
-                mode, menus, collapse, showParentOnCollapse,
+                mode, menus, theme, collapse, showParentOnCollapse,
                 showIconMaxDepth, switchTransition, switchTransitionName
             }
         } = context
 
+        const themeClassName = `el-menu--${theme}`
+
         let items = children || menus.map(m => (
             <Item
                 menu={m}
+                popper-class={themeClassName}
                 show-parent={showParentOnCollapse}
                 collapse={collapse}
                 show-icon-max-depth={showIconMaxDepth}
             />
         ))
-        if (switchTransition) {
+
+        if (switchTransition && switchTransitionName) {
             items = <transition-group name={switchTransitionName}>{items}</transition-group>
         }
 
         return (
             <el-menu
                 ref="menu"
-                class={`el-menu--${mode}`}
+                class={`el-menu--${mode} ${themeClassName}`}
                 mode={mode}
                 collapse={collapse}
                 collapse-transition={false}
diff --git a/vue/src/component/menu/NavMenu/item.vue b/vue/src/component/menu/NavMenu/item.vue
index 997202c..b455a50 100644
--- a/vue/src/component/menu/NavMenu/item.vue
+++ b/vue/src/component/menu/NavMenu/item.vue
@@ -2,29 +2,18 @@
 const MenuItemContent = {
     functional: true,
 
-    props: {icon: String, title: String, useTitleAsIcon: Boolean},
+    props: {icon: String, title: String},
 
     render(h, context) {
-        const {icon, title, useTitleAsIcon} = context.props
+        const {icon, title} = context.props
 
-        const iconComponent =
-            useTitleAsIcon
-                ? <em class="icon" style="font-style: normal">{title[0]}</em>
-                : icon
-                ? <v-icon icon={icon}/>
-                : <span class="icon" style="display: none"/>
-
-        const vnodes = [iconComponent]
-
-        title && vnodes.push(<span slot="title" class="menu-item-content">{title}</span>)
-
-        return vnodes
+        return [<v-icon icon={icon}/>, <span slot="title" class="menu-item-content">{title}</span>]
     }
 }
 
 //根据showIconMaxDepth、depth判断是否需要限制图标的显示
 function getIcon({icon, showIconMaxDepth, depth}) {
-    if (!showIconMaxDepth || showIconMaxDepth < 0) {
+    if (showIconMaxDepth == null || showIconMaxDepth < 0) {
         return icon
     }
     return showIconMaxDepth < depth ? undefined : icon
@@ -41,20 +30,18 @@ function getOnlyChild(menu) {
     return null
 }
 
-function renderSingleMenu(h, {index, icon, title, collapse, depth}) {
-    const useTitleAsIcon = depth === 1 && collapse && !!!icon && !!title
+function renderSingleMenu(h, {index, icon, title}) {
     return (
         <el-menu-item key={index} index={index}>
-            <MenuItemContent icon={icon} title={title} useTitleAsIcon={useTitleAsIcon}/>
+            <MenuItemContent icon={icon} title={title}/>
         </el-menu-item>
     )
 }
 
-function renderSubMenu(h, {index, icon, title, children, collapse, depth}) {
-    const useTitleAsIcon = depth === 1 && collapse && !!!icon && !!title
+function renderSubMenu(h, {index, icon, title, popperClass, children}) {
     return (
-        <el-submenu key={index} index={index} popper-append-to-body>
-            <MenuItemContent slot="title" icon={icon} title={title} useTitleAsIcon={useTitleAsIcon}/>
+        <el-submenu key={index} index={index} popper-class={popperClass}>
+            <MenuItemContent slot="title" icon={icon} title={title}/>
             {children}
         </el-submenu>
     )
@@ -69,7 +56,9 @@ function renderChildrenWithParentMenu(h, {icon, title, children}) {
     ]
 }
 
-function renderMenu(h, {menu, showParent, collapse, showIconMaxDepth, depth = 1}) {
+function renderMenu(h, props) {
+    const {menu, popperClass, showParent, collapse, showIconMaxDepth, depth = 1} = props
+
     const onlyOneChild = getOnlyChild(menu)
 
     const showSingle = onlyOneChild && !onlyOneChild.children
@@ -79,21 +68,13 @@ function renderMenu(h, {menu, showParent, collapse, showIconMaxDepth, depth = 1}
         return renderSingleMenu(h, {
             index: fullPath,
             icon: getIcon({icon, showIconMaxDepth, depth}),
-            title,
-            collapse,
-            depth
+            title
         })
     }
 
     const {icon, title} = menu.meta
 
-    let children = menu.children.map(child => renderMenu(h, {
-        menu: child,
-        showParent,
-        collapse,
-        showIconMaxDepth,
-        depth: depth + 1
-    }))
+    let children = menu.children.map(child => renderMenu(h, {...props, menu: child, depth: depth + 1}))
 
     //这里弹出菜单如果包裹了<el-scrollbar>，则在触发mouseleave时，不会触发父菜单的mouseleave事件
     if (collapse) {
@@ -107,9 +88,8 @@ function renderMenu(h, {menu, showParent, collapse, showIconMaxDepth, depth = 1}
         index: menu.fullPath,
         icon: getIcon({icon, showIconMaxDepth, depth}),
         title,
-        children,
-        collapse,
-        depth
+        popperClass,
+        children
     })
 }
 
@@ -120,6 +100,9 @@ export default {
         //菜单对象，即路由配置项
         menu: Object,
 
+        //弹出菜单的自定义类名
+        popperClass: String,
+
         //折叠时的展开菜单是否显示父级
         showParent: Boolean,
 
diff --git a/vue/src/component/menu/NavMenu/style.scss b/vue/src/component/menu/NavMenu/style.scss
index f75d6c7..1cca17a 100644
--- a/vue/src/component/menu/NavMenu/style.scss
+++ b/vue/src/component/menu/NavMenu/style.scss
@@ -1,15 +1,27 @@
 @import "~@/asset/style/variables.scss";
 
+//设置菜单图标的大小和与文字的间隔
+.el-menu {
+    .icon {
+        font-size: $menu-icon-size;
+    }
+
+    .icon + .menu-item-content {
+        margin-left: $menu-icon-text-gap;
+    }
+}
+
 //原始样式使用 '>' 可能导致侧边栏折叠时还会显示右侧箭头图标
 //此样式只对垂直状态生效
 .el-menu--collapse .el-submenu .el-submenu__title .el-submenu__icon-arrow {
     display: none;
 }
 
-//hover时，菜单左侧图标放大
-.el-menu-item,
+//hover时，菜单左侧图标放大（弹出菜单的父级不放大）
+.el-menu-item:not(.popover-menu__title),
 .el-submenu__title {
-    > .icon, > .el-tooltip > .icon {
+    > .icon,
+    > .el-tooltip > .icon {
         transition: transform .1s;
     }
 
@@ -19,111 +31,71 @@
     }
 }
 
-/*-------侧边栏垂直菜单开始---------*/
-.el-menu--vertical.el-menu {
-    overflow-y: auto;
-}
-
-.el-menu--vertical .el-menu,
-.el-menu--vertical.el-menu {
-    background-color: $aside-menu-background;
-
-    .icon {
-        font-size: $aside-icon-size;
-    }
-
-    .icon + .menu-item-content {
-        margin-left: $menu-icon-text-gap;
+//侧边栏垂直菜单
+.el-menu--vertical {
+    &.el-menu {
+        overflow-y: auto;
     }
 
-    //菜单的文字以及hover颜色
-    .el-menu-item,
-    .el-submenu__title {
-        color: $aside-menu-item-color;
-
-        &:hover {
-            color: $aside-menu-item-hover-color;
+    &.el-menu,
+    .el-menu {
+        //菜单的文字以及hover颜色
+        .el-menu-item,
+        .el-submenu__title {
+            //菜单文字的最大宽度
+            > .menu-item-content {
+                //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
+                max-width: $aside-width - 20px * 2 - $menu-icon-size - $menu-icon-text-gap * 2 - 12px;
+            }
         }
 
-        //菜单文字的最大宽度
-        > .menu-item-content {
-            //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
-            max-width: $aside-width - 20px * 2 - $aside-icon-size - $menu-icon-text-gap * 2 - 12px;
+        //弹出菜单的父级
+        &.el-menu--popup .popover-menu__title {
+            cursor: auto;
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
         }
     }
-
-    //子级菜单的背景颜色
-    &.el-menu--inline,
-    .el-submenu .el-submenu > .el-submenu__title {
-        background-color: $aside-sub-menu-background;
-    }
-
-    //子级菜单内阴影
-    &.el-menu--inline {
-        box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45)
-    }
-
-    //设置了显示弹出菜单的父级
-    &.el-menu--popup .popover-menu__title {
-        cursor: auto;
-        color: $aside-menu-item-hover-color;
-        border-bottom: 1px solid $aside-sub-menu-background;
-    }
 }
 
-/*-------侧边栏垂直菜单结束---------*/
-
-/*-------顶部水平菜单开始-----------*/
-.el-menu--horizontal .el-menu,
-.el-menu--horizontal.el-menu {
-    font-size: 14px;
+//顶部水平菜单
+.el-menu--horizontal {
+    //顶部菜单的顶级节点
+    &.el-menu {
+        //不显示折叠展开按钮
+        > .el-submenu > .el-submenu__title > .el-submenu__icon-arrow {
+            display: none;
+        }
 
-    .icon {
-        font-size: 14px;
-    }
+        //顶级节点的高度以及hover颜色
+        > .el-menu-item,
+        > .el-submenu > .el-submenu__title {
+            height: $nav-height;
+            line-height: $nav-height;
 
-    //图标和文字的间隔
-    .icon + .menu-item-content {
-        margin-left: $menu-icon-text-gap;
+            &:hover {
+                border-bottom: 2px solid $--color-primary;
+            }
+        }
     }
 
-    //菜单的文字以及hover颜色
-    .el-menu-item,
-    .el-submenu__title {
-        color: $head-menu-item-color;
-
-        &:hover {
-            color: $head-menu-item-hover-color;
+    &.el-menu,
+    .el-menu {
+        //菜单的文字以及hover颜色
+        .el-menu-item,
+        .el-submenu__title {
+            > span {
+                max-width: 100px;
+            }
         }
 
-        > span {
-            max-width: 100px;
+        //submenu的右侧箭头会稍微偏上，不懂为啥
+        .el-submenu__icon-arrow {
+            margin-top: -4px;
         }
     }
-
-    //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;
-        }
-    }
-}
 
-/*-------顶部水平菜单结束---------*/
+@import "./theme-light";
+@import "./theme-dark";
diff --git a/vue/src/component/menu/NavMenu/theme-dark.scss b/vue/src/component/menu/NavMenu/theme-dark.scss
new file mode 100644
index 0000000..31872ac
--- /dev/null
+++ b/vue/src/component/menu/NavMenu/theme-dark.scss
@@ -0,0 +1,61 @@
+.el-menu--dark {
+    //侧边栏垂直菜单
+    &.el-menu--vertical {
+        &.el-menu,
+        .el-menu {
+            background-color: $menu-dark-background;
+
+            //菜单的文字以及hover颜色
+            .el-menu-item,
+            .el-submenu__title {
+                color: $menu-text-dark-color;
+
+                &:hover {
+                    color: $menu-text-dark-hover-color;
+                }
+            }
+
+            //子级菜单的背景颜色
+            &.el-menu--inline,
+            .el-submenu .el-submenu > .el-submenu__title {
+                background-color: $sub-menu-dark-background;
+            }
+
+            //子级菜单内阴影
+            &.el-menu--inline {
+                box-shadow: inset 0 2px 8px rgba(0, 0, 0, .45)
+            }
+
+            //设置了显示弹出菜单的父级
+            &.el-menu--popup .popover-menu__title {
+                color: $menu-text-dark-hover-color;
+                border-bottom-color: #101117;
+            }
+        }
+    }
+
+    //顶部水平菜单
+    &.el-menu--horizontal {
+        &.el-menu,
+        .el-menu {
+            background-color: $root-menu-dark-background;
+
+            //菜单的文字以及hover颜色
+            .el-menu-item,
+            .el-submenu__title {
+                color: $menu-text-dark-color;
+
+                &:hover {
+                    color: $menu-text-dark-hover-color;
+                }
+            }
+        }
+
+        &.el-menu > .el-menu-item,
+        &.el-menu > .el-submenu > .el-submenu__title,
+        &.el-menu > .el-menu-item:hover,
+        &.el-menu > .el-submenu > .el-submenu__title:hover {
+            border-bottom: none;
+        }
+    }
+}
diff --git a/vue/src/component/menu/NavMenu/theme-light.scss b/vue/src/component/menu/NavMenu/theme-light.scss
new file mode 100644
index 0000000..7786ccf
--- /dev/null
+++ b/vue/src/component/menu/NavMenu/theme-light.scss
@@ -0,0 +1,39 @@
+.el-menu--light {
+    //侧边栏垂直菜单
+    &.el-menu--vertical {
+        &.el-menu,
+        .el-menu {
+            //菜单的文字以及hover颜色
+            .el-menu-item,
+            .el-submenu__title {
+                color: $menu-text-light-color;
+
+                &:hover {
+                    color: $menu-text-hover-light-color;
+                }
+            }
+
+            //弹出菜单的父级
+            &.el-menu--popup .popover-menu__title {
+                color: $menu-text-hover-light-color;
+                border-bottom-color: #dcdfe6;
+            }
+        }
+    }
+
+    //顶部水平菜单
+    &.el-menu--horizontal {
+        &.el-menu,
+        .el-menu {
+            //菜单的文字以及hover颜色
+            .el-menu-item,
+            .el-submenu__title {
+                color: $menu-text-light-color;
+
+                &:hover {
+                    color: $menu-text-hover-light-color;
+                }
+            }
+        }
+    }
+}
diff --git a/vue/src/layout/component/Aside/TwoPart/index.vue b/vue/src/layout/component/Aside/TwoPart/index.vue
deleted file mode 100644
index 88078e0..0000000
--- a/vue/src/layout/component/Aside/TwoPart/index.vue
+++ /dev/null
@@ -1,17 +0,0 @@
-<script type="text/jsx">
-import RootSidebar from './root'
-import SubSidebar from './sub'
-
-export default {
-    functional: true,
-
-    render() {
-        return (
-            <aside class="aside">
-                <RootSidebar/>
-                <SubSidebar/>
-            </aside>
-        )
-    }
-}
-</script>
diff --git a/vue/src/layout/component/Aside/OnePart/index.vue b/vue/src/layout/component/Aside/component/OnePartRoot.vue
similarity index 88%
rename from vue/src/layout/component/Aside/OnePart/index.vue
rename to vue/src/layout/component/Aside/component/OnePartRoot.vue
index 4e612dd..2a23902 100644
--- a/vue/src/layout/component/Aside/OnePart/index.vue
+++ b/vue/src/layout/component/Aside/component/OnePartRoot.vue
@@ -32,6 +32,12 @@ export default {
         renderInDrawer() {
             return this.isMobile || asideGetters.autoHide
         },
+        //el-drawer的自定义类名
+        drawerClass() {
+            return this.isMobile || pageGetters.position !== 'top-bottom'
+                ? undefined
+                : 'drawer-behind-header'
+        },
 
         //侧边栏的显隐状态，true显示、false隐藏
         show() {
@@ -74,6 +80,15 @@ export default {
         //是否需要显示logo
         showLogo() {
             return pageGetters.showLogo && (this.isMobile || pageGetters.position === 'left-right')
+        },
+
+        //是否需要使用侧边栏的切换动画
+        switchTransition() {
+            return !this.isMobile && appGetters.navMode !== 'aside'
+        },
+
+        className() {
+            return {'sidebar': true, 'collapse': this.collapse}
         }
     },
 
@@ -165,22 +180,24 @@ export default {
         if (this.menus.length <= 0) return
 
         const aside = (
-            <aside
-                class={{'aside': true, 'sidebar': true, 'collapse': this.collapse}}
+            <div
+                class={this.className}
                 on-mouseleave={() => this.mouseOutside = true}
                 on-mouseenter={() => this.mouseOutside = false}
             >
                 {this.showLogo && <logo show-title={!this.collapse}/>}
                 <nav-menu
                     menus={this.menus}
+                    theme={asideGetters.theme}
                     collapse={this.collapse}
                     default-active={this.activeMenu}
                     unique-opened={asideGetters.uniqueOpen}
-                    show-parent={asideGetters.showParentOnCollapse}
-                    switch-transition
+                    show-parent-on-collapse={asideGetters.showParentOnCollapse}
+                    switch-transition={this.switchTransition}
+                    switch-transition-name="sidebar"
                     on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}}
                 />
-            </aside>
+            </div>
         )
 
         if (this.renderInDrawer) {
@@ -188,6 +205,7 @@ export default {
                 <el-drawer
                     visible={this.show}
                     with-header={false}
+                    custom-class={this.drawerClass}
                     modal={this.isMobile} //设置自动隐藏时不使用遮罩
                     direction="ltr"
                     size="auto"
@@ -202,28 +220,3 @@ export default {
     }
 }
 </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/root.vue b/vue/src/layout/component/Aside/component/TwoPartRoot.vue
similarity index 76%
rename from vue/src/layout/component/Aside/TwoPart/root.vue
rename to vue/src/layout/component/Aside/component/TwoPartRoot.vue
index ae4ce39..761135a 100644
--- a/vue/src/layout/component/Aside/TwoPart/root.vue
+++ b/vue/src/layout/component/Aside/component/TwoPartRoot.vue
@@ -1,6 +1,7 @@
 <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 {getters as pageGetters} from "@/layout/store/page"
 import Logo from '@/layout/component/Logo'
 import {scrollIntoViewVertically} from "@/util/browser"
@@ -18,17 +19,12 @@ const Item = {
         const {title, icon, active} = context.props
         const {click} = context.listeners
 
-        const iconComponent =
-            icon
-                ? <v-icon icon={icon}/>
-                : <em class="icon" style="font-style: normal">{title[0]}</em>
-
         return (
             <li
                 class={{'el-menu-item': true, 'is-active': active}}
                 on-click={click}
             >
-                {iconComponent}
+                <v-icon icon={icon}/>
                 <span class="menu-item-content">{title}</span>
             </li>
         )
@@ -57,6 +53,14 @@ export default {
         //是否需要显示logo
         showLogo() {
             return pageGetters.showLogo && pageGetters.position === 'left-right'
+        },
+
+        containerClass() {
+            return {'root-sidebar': true, 'collapse': this.mouseOutside}
+        },
+
+        menuClass() {
+            return `el-menu el-menu--vertical el-menu--${asideGetters.theme}`
         }
     },
 
@@ -107,12 +111,12 @@ export default {
         return (
             <div class="root-sidebar-container">
                 <div
-                    class={{'root-sidebar': true, 'collapse': this.mouseOutside}}
+                    class={this.containerClass}
                     on-mouseleave={() => this.mouseOutside = true}
                     on-mouseenter={() => this.mouseOutside = false}
                 >
                     {this.showLogo && <logo show-title={!this.mouseOutside}/>}
-                    <ul class="el-menu el-menu--vertical">
+                    <ul class={this.menuClass}>
                         {this.menus.map(({fullPath, meta: {title, icon}}) => (
                             <item
                                 title={title}
@@ -128,40 +132,3 @@ export default {
     }
 }
 </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;
-        }
-    }
-}
-</style>
diff --git a/vue/src/layout/component/Aside/TwoPart/sub.vue b/vue/src/layout/component/Aside/component/TwoPartSub.vue
similarity index 78%
rename from vue/src/layout/component/Aside/TwoPart/sub.vue
rename to vue/src/layout/component/Aside/component/TwoPartSub.vue
index efd1d8d..4f376dc 100644
--- a/vue/src/layout/component/Aside/TwoPart/sub.vue
+++ b/vue/src/layout/component/Aside/component/TwoPartSub.vue
@@ -27,6 +27,10 @@ export default {
         collapse() {
             return asideGetters.collapse && !asideGetters.isMobile
         },
+
+        className() {
+            return {'sub-sidebar': true, 'collapse': this.collapse}
+        }
     },
 
     watch: {
@@ -77,17 +81,19 @@ export default {
         if (this.menus.length <= 0) return
 
         return (
-            <div class={{'sub-sidebar': true, 'collapse': this.collapse}}>
+            <div class={this.className}>
                 <div class="sub-sidebar-title">
                     {this.rootMenu && this.rootMenu.meta.title}
                 </div>
                 <nav-menu
                     menus={this.menus}
+                    theme={asideGetters.theme}
                     collapse={this.collapse}
                     default-active={this.activeMenu}
                     unique-opened={asideGetters.uniqueOpen}
-                    show-parent={asideGetters.showParentOnCollapse}
+                    show-parent-on-collapse={asideGetters.showParentOnCollapse}
                     switch-transition
+                    switch-transition-name="sidebar"
                     on-select={this.onSelect}
                 />
             </div>
@@ -95,37 +101,3 @@ export default {
     }
 }
 </script>
-
-<style lang="scss">
-@import "~@/asset/style/variables.scss";
-
-.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/index.vue b/vue/src/layout/component/Aside/index.vue
index be50baf..43d4420 100644
--- a/vue/src/layout/component/Aside/index.vue
+++ b/vue/src/layout/component/Aside/index.vue
@@ -1,48 +1,34 @@
 <script type="text/jsx">
-import OnePart from './OnePart'
-import TwoPart from './TwoPart'
+import OnePart from './component/OnePartRoot'
+import TwoPartRoot from './component/TwoPartRoot'
+import TwoPartSub from './component/TwoPartSub'
 import {getters as appGetters} from "@/layout/store/app"
+import {getters as asideGetters} from "@/layout/store/aside"
 
 export default {
     functional: true,
 
     render() {
+        let children
+
         //移动端只能使用抽屉模式的单层侧边栏
         if (appGetters.isMobile) {
-            return <OnePart/>
+            children = <OnePart/>
         }
-
-        switch (appGetters.navMode) {
-            case 'mix':
-            case 'aside':
-                return <OnePart/>
-            case 'aside-two-part':
-                return <TwoPart/>
+        else {
+            switch (appGetters.navMode) {
+                case 'mix':
+                case 'aside':
+                    children = <OnePart/>
+                    break
+                case 'aside-two-part':
+                    children = [<TwoPartRoot/>, <TwoPartSub/>]
+            }
         }
+
+        return <aside class={`aside ${asideGetters.theme}`}>{children}</aside>
     }
 }
 </script>
 
-<style lang="scss">
-.aside {
-    display: flex;
-    position: relative;
-}
-
-/* 侧边栏切换动画开始 */
-.sidebar-enter-active {
-    transition: all 0.2s;
-}
-
-.sidebar-enter,
-.sidebar-leave-active {
-    opacity: 0;
-    transform: translateY(30px) skewY(10deg)
-}
-
-.sidebar-leave-active {
-    position: absolute;
-}
-
-/* 侧边栏切换动画结束 */
-</style>
+<style lang="scss" src="./style.scss"></style>
diff --git a/vue/src/layout/component/Aside/style.scss b/vue/src/layout/component/Aside/style.scss
new file mode 100644
index 0000000..0d88fcf
--- /dev/null
+++ b/vue/src/layout/component/Aside/style.scss
@@ -0,0 +1,89 @@
+@import "~@/asset/style/variables.scss";
+
+.aside {
+    display: flex;
+    z-index: 11;
+
+    //移动端下侧边栏抽屉不能设置z-index，否则会被modal遮住
+    @include mobile {
+        z-index: auto;
+    }
+
+    //单层和双层侧边栏
+    .sidebar,
+    .root-sidebar,
+    .sub-sidebar {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: $aside-width;
+        box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
+        transition: all 0.2s;
+
+        //折叠状态
+        &.collapse {
+            width: $aside-collapse-width;
+
+            //隐藏菜单文字
+            .menu-item-content,
+            .sub-sidebar-title {
+                display: none;
+            }
+        }
+    }
+}
+
+//页面为上下结构时，侧边栏的抽屉模式需要扣除导航栏的高度
+.el-drawer.drawer-behind-header {
+    top: $nav-height;
+}
+
+
+/* 双侧侧边栏开始 */
+
+.root-sidebar-container {
+    position: relative;
+    width: $aside-collapse-width;
+    height: 100%;
+}
+
+.root-sidebar {
+    position: absolute;
+    overflow: hidden;
+    z-index: 1;
+    box-shadow: none !important;
+    border-right-width: 1px;
+    border-right-style: solid;
+}
+
+.sub-sidebar-title {
+    height: $nav-height;
+    line-height: $nav-height;
+    padding-left: 20px;
+    font-size: 16px;
+}
+
+/* 双侧侧边栏结束 */
+
+
+/* 侧边栏切换动画开始 */
+
+.sidebar-enter-active {
+    transition: all 0.2s;
+}
+
+.sidebar-enter,
+.sidebar-leave-active {
+    opacity: 0;
+    transform: translateY(30px) skewY(10deg)
+}
+
+.sidebar-leave-active {
+    position: absolute;
+}
+
+/* 侧边栏切换动画结束 */
+
+
+@import "theme-light";
+@import "theme-dark";
diff --git a/vue/src/layout/component/Aside/theme-dark.scss b/vue/src/layout/component/Aside/theme-dark.scss
new file mode 100644
index 0000000..731dcd6
--- /dev/null
+++ b/vue/src/layout/component/Aside/theme-dark.scss
@@ -0,0 +1,18 @@
+.dark {
+    &.aside {
+        background-color: $menu-dark-background;
+    }
+
+    .root-sidebar,
+    .root-sidebar > .el-menu--vertical.el-menu {
+        background-color: $root-menu-dark-background;
+    }
+
+    .root-sidebar {
+        border-right-color: #101117;
+    }
+
+    .sub-sidebar-title {
+        color: #ffffff;
+    }
+}
diff --git a/vue/src/layout/component/Aside/theme-light.scss b/vue/src/layout/component/Aside/theme-light.scss
new file mode 100644
index 0000000..ea61d67
--- /dev/null
+++ b/vue/src/layout/component/Aside/theme-light.scss
@@ -0,0 +1,6 @@
+.light {
+    .root-sidebar {
+        background-color: #ffffff;
+        border-right-color: #dcdfe6;
+    }
+}
diff --git a/vue/src/layout/component/Logo.vue b/vue/src/layout/component/Logo.vue
index 11439dd..72a8893 100644
--- a/vue/src/layout/component/Logo.vue
+++ b/vue/src/layout/component/Logo.vue
@@ -31,7 +31,6 @@ export default {
 $logoSize: 30px;
 
 .logo-container {
-    position: relative;
     width: 100%;
     height: $nav-height;
     line-height: $nav-height;
@@ -54,17 +53,20 @@ $logoSize: 30px;
         > h1 {
             display: inline-block;
             margin: 0;
-            color: #ffffff;
+            color: $--color-primary;
             font-weight: 600;
             line-height: $nav-height;
-            font-size: 14px;
-            font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
+            font-size: 18px;
             vertical-align: middle;
         }
     }
 
     &.no-title {
-        padding-left: ($aside-icon-size + 20px * 2 - $logoSize) / 2;
+        padding-left: ($aside-collapse-width - $logoSize) / 2;
     }
 }
+
+.dark .logo-container .logo-link > h1 {
+    color: #ffffff;
+}
 </style>
diff --git a/vue/src/layout/component/Navbar/component/Bell.vue b/vue/src/layout/component/Navbar/component/Bell.vue
index 3269371..026b407 100644
--- a/vue/src/layout/component/Navbar/component/Bell.vue
+++ b/vue/src/layout/component/Navbar/component/Bell.vue
@@ -36,5 +36,6 @@ export default {
 .bell-badge .el-badge__content {
     top: 15px !important;
     right: 10px !important;
+    border: none;
 }
 </style>
diff --git a/vue/src/layout/component/Navbar/component/HeadMenu.vue b/vue/src/layout/component/Navbar/component/HeadMenu.vue
index 7447641..b0a5baf 100644
--- a/vue/src/layout/component/Navbar/component/HeadMenu.vue
+++ b/vue/src/layout/component/Navbar/component/HeadMenu.vue
@@ -1,7 +1,6 @@
 <script type="text/jsx">
 /**
  * 顶部菜单，参考了ant design的响应式设计
- * TODO 菜单隐藏后再显示出来存在BUG，怀疑是组件复用的问题
  */
 import menuMixin from "@/layout/mixin/menu"
 import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
@@ -18,14 +17,20 @@ export default {
 
     props: {
         //是否在只有一个顶部菜单时仍然渲染
-        alwaysShow: Boolean
+        alwaysShow: Boolean,
+
+        //主题由父组件控制
+        theme: String
     },
 
     data() {
         return {
             //最后一个不被隐藏的顶部菜单的数组下标
             //为undefined时，说明不需要隐藏菜单，为-1时，说明需要隐藏全部菜单
-            lastVisibleIndex: undefined
+            lastVisibleIndex: undefined,
+
+            //用于生成el-submenu的key
+            seed: 0
         }
     },
 
@@ -42,6 +47,30 @@ export default {
                 case 'mix':
                     return appGetters.menus.map(root => ({...root, children: undefined}))
             }
+        },
+
+        //实际用于渲染的菜单数组
+        realMenus() {
+            const {lastVisibleIndex, menus} = this
+
+            //不需要隐藏菜单
+            if (lastVisibleIndex === undefined) {
+                return menus
+            }
+
+            const fullPath = `_${this.seed}`
+
+            //隐藏全部菜单
+            if (lastVisibleIndex === -1) {
+                return [{fullPath, meta: {icon: 'el-icon-menu'}, children: menus}]
+            }
+
+            const visible = menus.slice(0, lastVisibleIndex + 1)
+            const hidden = menus.slice(lastVisibleIndex + 1)
+
+            visible.push({fullPath, meta: {title: '...'}, children: hidden})
+
+            return visible
         }
     },
 
@@ -65,6 +94,11 @@ export default {
             handler(mode) {
                 this.setActiveMenu(mode)
             }
+        },
+
+        //变动时修改种子，避免组件不更新
+        lastVisibleIndex() {
+            this.seed++
         }
     },
 
@@ -146,22 +180,6 @@ export default {
             this.$once('hook:beforeDestroy', () => {
                 this.resizeObserver && this.resizeObserver.disconnect()
             })
-        },
-
-        renderVisibleMenus(visibleMenus) {
-            return visibleMenus.map(m => <nav-menu-item menu={m} show-icon-max-depth={1}/>)
-        },
-        renderHiddenMenus(hiddenMenus, hideAll) {
-            if (hiddenMenus.length <= 0) return
-
-            const content = hideAll
-                ? <v-icon slot="title" icon={'el-icon-menu'}/>
-                : <span slot="title" class="menu-item-content">{'...'}</span>
-
-            const children = hiddenMenus.map(m => <nav-menu-item menu={m} show-icon-max-depth={0}/>)
-            children.unshift(content)
-
-            return <el-submenu index={'_'}>{children}</el-submenu>
         }
     },
 
@@ -171,34 +189,18 @@ export default {
     },
 
     render() {
-        const {lastVisibleIndex, menus} = this
-        if (!Array.isArray(menus) || menus.length <= 0 || menus.length === 1 && !this.alwaysShow) {
+        if (this.menus.length <= 0 || this.menus.length === 1 && !this.alwaysShow) {
             return
         }
 
-        let visibleMenus = menus, hiddenMenus = []
-        if (lastVisibleIndex !== undefined) {
-            //不需要隐藏菜单
-            if (lastVisibleIndex === -1) {
-                visibleMenus = []
-                hiddenMenus = menus
-            }
-            //需要隐藏全部菜单
-            else if (lastVisibleIndex !== menus.length - 1) {
-                visibleMenus = menus.slice(0, lastVisibleIndex + 1)
-                hiddenMenus = menus.slice(lastVisibleIndex + 1)
-            }
-        }
-
         return (
             <nav-menu
+                menus={this.realMenus}
                 mode="horizontal"
+                theme={this.theme}
                 default-active={this.activeMenu}
                 on-select={this.onSelect}
-            >
-                {this.renderVisibleMenus(visibleMenus)}
-                {this.renderHiddenMenus(hiddenMenus, hiddenMenus.length === menus.length)}
-            </nav-menu>
+            />
         )
     }
 }
diff --git a/vue/src/layout/component/Navbar/index.vue b/vue/src/layout/component/Navbar/index.vue
index 6fcfe95..91f50cd 100644
--- a/vue/src/layout/component/Navbar/index.vue
+++ b/vue/src/layout/component/Navbar/index.vue
@@ -5,9 +5,9 @@ import Bell from "./component/Bell"
 import Hamburger from './component/Hamburger'
 import HeadMenu from "./component/HeadMenu"
 import Logo from "@/layout/component/Logo"
-import SettingDrawer from '@/layout/component/SettingDrawer'
-import {getters as appGetters} from "@/layout/store/app"
+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"
@@ -18,11 +18,51 @@ export default {
 
     mixins: [GuideMixin.navbar],
 
-    components: {Bell, Hamburger, HeadMenu, Logo, SettingDrawer},
+    components: {Bell, Hamburger, HeadMenu, Logo},
 
-    data: () => ({settingDrawer: false}),
+    computed: {
+        ...mapState('user', ['avatar', 'name', 'prepareLogout']),
 
-    computed: mapState('user', ['avatar', 'name', 'prepareLogout']),
+        //渲染导航栏logo的条件
+        //①桌面端
+        //②设置了显示logo
+        //③导航模式为顶部导航或页面为上下结构
+        renderLogo() {
+            return !appGetters.isMobile
+                && pageGetters.showLogo
+                && (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
+        },
+
+        //渲染顶部导航菜单的条件
+        //①桌面端
+        //②导航模式为顶部导航或混合导航
+        renderHeadMenu() {
+            return !appGetters.isMobile && ['head', 'mix'].includes(appGetters.navMode)
+        },
+
+        className() {
+            return `navbar ${navbarGetters.theme}`
+        }
+    },
 
     methods: {
         command(command) {
@@ -40,161 +80,74 @@ export default {
             }
         },
 
-        renderLogo() {
-            const render =
-                !appGetters.isMobile
-                && pageGetters.showLogo
-                && pageGetters.position === 'top-bottom'
-
-            if (render) return <logo show-title/>
+        clickRefreshBtn() {
+            refreshPage()
         },
-        renderHamburger() {
-            //渲染折叠按钮的条件
-            //①侧边栏有菜单
-            //②移动端
-            //③桌面端是双层侧边栏导航
-            //④桌面端且是侧边栏导航或混合导航时，未设置侧边栏自动隐藏
-            const hasSidebarMenus = getSidebarMenus().length > 0,
-                isMobile = appGetters.isMobile,
-                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
-                return <hamburger class="navbar-item" active={active} on-click={() => asideMutations.switch()}/>
-            }
-        },
-        renderHeadMenuMenu() {
-            if (['head', 'mix'].includes(appGetters.navMode) && !appGetters.isMobile) {
-                return <head-menu always-show/>
-            }
-        },
-        renderActionButtons() {
-            return [
-                <bell class="navbar-item"/>,
-
-                <div class="navbar-item" title="刷新" on-click={() => refreshPage()}>
-                    <i class="el-icon-refresh-right navbar-icon"/>
-                </div>,
-
-                <div class="setting-btn navbar-item"
-                     title="个性设置"
-                     on-click={() => this.settingDrawer = true}
-                >
-                    <i class="el-icon-s-operation navbar-icon"/>
-                </div>
-            ]
-        },
-        renderUserButton() {
-            return (
-                <el-dropdown
-                    class="navbar-item"
-                    trigger="click"
-                    on-command={this.command}
-                >
-                    <div class="avatar-wrapper">
-                        <el-avatar size={30} src={this.avatar} icon="el-icon-user-solid"/>
-                        <span class="hidden-xs">{this.name}</span>
-                    </div>
-                    <el-dropdown-menu class="user-dropdown" slot="dropdown">
-                        <el-dropdown-item icon="el-icon-user" command="user">
-                            个人中心
-                        </el-dropdown-item>
-                        <el-dropdown-item class="hidden-xs" icon="el-icon-guide" command="guide">
-                            新手指引
-                        </el-dropdown-item>
-                        <el-dropdown-item divided icon="el-icon-switch-button" command="logout">
-                            退出登录
-                        </el-dropdown-item>
-                    </el-dropdown-menu>
-                </el-dropdown>
-            )
+        openSettingDrawer() {
+            appMutations.showSettingDrawer(true)
         }
     },
 
     render() {
         return (
-            <nav class="navbar">
-                {this.renderLogo()}
+            <nav class={this.className}>
+                {this.renderLogo && <logo show-title/>}
 
                 <div style="flex: 1">
-                    {this.renderHamburger()}
-                    {this.renderHeadMenuMenu()}
+                    {
+                        this.renderHamburger &&
+                        <hamburger
+                            class="navbar-item"
+                            active={this.isHamburgerActive}
+                            on-click={asideMutations.switch}
+                        />
+                    }
+
+                    {this.renderHeadMenu && <head-menu always-show theme={navbarGetters.theme}/>}
                 </div>
 
                 <div>
-                    {this.renderActionButtons()}
-                    {this.renderUserButton()}
-                </div>
+                    <bell class="navbar-item"/>
+
+                    <div
+                        class="navbar-item"
+                        title="刷新"
+                        on-click={this.clickRefreshBtn}
+                    >
+                        <i class="el-icon-refresh-right navbar-icon"/>
+                    </div>
 
-                <setting-drawer v-model={this.settingDrawer}/>
+                    <div
+                        class="setting-btn navbar-item"
+                        title="个性设置"
+                        on-click={this.openSettingDrawer}
+                    >
+                        <i class="el-icon-s-operation navbar-icon"/>
+                    </div>
+
+                    <el-dropdown class="navbar-item" on-command={this.command}>
+                        <div class="avatar-wrapper">
+                            <el-avatar size={30} src={this.avatar} icon="el-icon-user-solid"/>
+                            <span class="hidden-xs">{this.name}</span>
+                        </div>
+                        <el-dropdown-menu class="user-dropdown" slot="dropdown">
+                            <el-dropdown-item icon="el-icon-user" command="user">
+                                个人中心
+                            </el-dropdown-item>
+                            <el-dropdown-item class="hidden-xs" icon="el-icon-guide" command="guide">
+                                新手指引
+                            </el-dropdown-item>
+                            <el-dropdown-item divided icon="el-icon-switch-button" command="logout">
+                                退出登录
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </el-dropdown>
+                </div>
             </nav>
         )
     }
 }
 </script>
 
-<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-left: 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)
-        }
-    }
-
-    .logo-container {
-        width: auto;
-        min-width: 192px;
-        padding-left: 0;
-
-        > .logo-link > h1 {
-            font-weight: 400;
-            color: #303133;
-            font-size: 16px;
-        }
-    }
-
-    .avatar-wrapper {
-        display: flex;
-        align-items: center;
-
-        span {
-            margin-right: 5px;
-            font-size: 18px;
-        }
-    }
-}
-</style>
+<style lang="scss" src="./style.scss"></style>
diff --git a/vue/src/layout/component/Navbar/style.scss b/vue/src/layout/component/Navbar/style.scss
new file mode 100644
index 0000000..9cd0701
--- /dev/null
+++ b/vue/src/layout/component/Navbar/style.scss
@@ -0,0 +1,49 @@
+@import "~@/asset/style/variables.scss";
+
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: $nav-height;
+    padding-left: 12px;
+    z-index: 10;
+    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
+    transition: all .2s;
+
+    > div {
+        display: flex;
+        flex-wrap: nowrap;
+        height: 100%;
+    }
+
+    .navbar-icon {
+        font-size: 18px;
+    }
+
+    .navbar-item {
+        display: flex;
+        align-items: center;
+        padding: 0 8px;
+        cursor: pointer;
+    }
+
+    .logo-container {
+        width: auto;
+        min-width: 192px;
+        padding-left: 8px;
+    }
+
+    .avatar-wrapper {
+        display: flex;
+        align-items: center;
+
+        span {
+            margin-right: 5px;
+            font-size: 18px;
+        }
+    }
+}
+
+@import "theme-light";
+@import "theme-dark";
diff --git a/vue/src/layout/component/Navbar/theme-dark.scss b/vue/src/layout/component/Navbar/theme-dark.scss
new file mode 100644
index 0000000..875d3ce
--- /dev/null
+++ b/vue/src/layout/component/Navbar/theme-dark.scss
@@ -0,0 +1,11 @@
+.navbar.dark {
+    background-color: $root-menu-dark-background;
+
+    .navbar-item {
+        color: rgba(255, 255, 255, .85);
+
+        &:hover {
+            background: $--color-primary;
+        }
+    }
+}
diff --git a/vue/src/layout/component/Navbar/theme-light.scss b/vue/src/layout/component/Navbar/theme-light.scss
new file mode 100644
index 0000000..d535559
--- /dev/null
+++ b/vue/src/layout/component/Navbar/theme-light.scss
@@ -0,0 +1,11 @@
+.navbar.light {
+    background-color: #ffffff;
+
+    .navbar-item {
+        color: $menu-text-light-color;
+
+        &:hover {
+            background: rgba(0, 0, 0, .025);
+        }
+    }
+}
diff --git a/vue/src/layout/component/Page/component/TagsView/index.vue b/vue/src/layout/component/Page/component/TagsView/index.vue
index 5eeb1a0..a57a976 100644
--- a/vue/src/layout/component/Page/component/TagsView/index.vue
+++ b/vue/src/layout/component/Page/component/TagsView/index.vue
@@ -26,7 +26,22 @@ export default {
 
     computed: {
         visitedViews: () => tagsViewGetters.visitedViews,
-        menus: () => appGetters.menus
+
+        menus: () => appGetters.menus,
+
+        contextMenuItems() {
+            return [
+                {content: '刷新', click: this.refreshSelectedTag},
+                this.isAffix(this.selectedTag)
+                    ? undefined
+                    : {
+                        content: '关闭',
+                        click: () => this.closeSelectedTag(this.selectedTag)
+                    },
+                {content: '关闭其他', click: this.closeOthersTags},
+                {content: '关闭全部', click: this.closeAllTags}
+            ]
+        }
     },
 
     watch: {
@@ -131,10 +146,9 @@ export default {
             e.preventDefault()
 
             const contextMenuWidth = 105 //右键菜单的假定宽度
-            const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
             const offsetWidth = this.$el.offsetWidth // container width
             const maxLeft = offsetWidth - contextMenuWidth // left boundary
-            const left = e.clientX - offsetLeft + 15 // 15: margin right
+            const left = e.clientX + 15 // 15: margin right
 
             this.contextmenu.left = left > maxLeft ? maxLeft : left
             this.contextmenu.top = e.clientY
@@ -159,27 +173,11 @@ export default {
                         v-on:contextmenu_native={e => this.openContextMenu(e, tag)}
                         v-on:dblclick_native={e => closeSelectedTag(e, tag)}
                     >
-                        {title}
+                        <span>{title}</span>
                         {!affix && <i class="el-icon-close" on-click={e => closeSelectedTag(e, tag)}/>}
                     </router-link>
                 )
             })
-        },
-        renderContextMenu() {
-            const menu = this.contextmenu
-            const items = [
-                {content: '刷新', click: this.refreshSelectedTag},
-                this.isAffix(this.selectedTag)
-                    ? undefined
-                    : {
-                        content: '关闭',
-                        click: () => this.closeSelectedTag(this.selectedTag)
-                    },
-                {content: '关闭其他', click: this.closeOthersTags},
-                {content: '关闭全部', click: this.closeAllTags}
-            ]
-
-            return <context-menu v-model={menu.show} items={items} left={menu.left} top={menu.top}/>
         }
     },
 
@@ -193,7 +191,13 @@ export default {
                 <scroll-panel ref="scrollPanel" class="tags-view-wrapper">
                     {this.renderTags()}
                 </scroll-panel>
-                {this.renderContextMenu()}
+
+                <context-menu
+                    v-model={this.contextmenu.show}
+                    items={this.contextMenuItems}
+                    left={this.contextmenu.left}
+                    top={this.contextmenu.top}
+                />
             </div>
         )
     }
diff --git a/vue/src/layout/component/Page/component/TagsView/style.scss b/vue/src/layout/component/Page/component/TagsView/style.scss
index c4c937a..b50be45 100644
--- a/vue/src/layout/component/Page/component/TagsView/style.scss
+++ b/vue/src/layout/component/Page/component/TagsView/style.scss
@@ -1,15 +1,12 @@
 @import "~@/asset/style/variables.scss";
 
 .tags-view-container {
-    z-index: 8;
     height: $tags-view-height;
-    background-color: #f0f2f5;
     box-shadow: inset 0 0 3px 2px hsla(0, 0%, 39.2%, .1);
 
     .tags-view-wrapper {
         height: 100%;
         white-space: nowrap;
-        position: relative;
         overflow-x: auto;
 
         &::-webkit-scrollbar {
@@ -18,15 +15,16 @@
 
         .tags-view-item {
             $margin: 4px;
+            $border-width: 1px;
+
             display: inline-block;
-            position: relative;
             cursor: pointer;
             height: #{$tags-view-height - $margin * 2};
-            line-height: #{$tags-view-height - $margin * 2};
+            line-height: #{$tags-view-height - $margin * 2 - $border-width * 2};
             color: #909399;
             background-color: #ffffff;
             border-radius: 3px;
-            border: 1px solid #e8eaec;
+            border: $border-width solid #dcdfe6;
             padding: 0 12px;
             font-size: 12px;
             margin: $margin;
@@ -42,12 +40,12 @@
 
             &::before {
                 content: '';
-                background: #e8eaec;
+                position: relative;
+                background-color: #e8eaec;
                 display: inline-block;
                 width: 12px;
                 height: 12px;
                 border-radius: 50%;
-                position: relative;
                 top: 1px;
                 margin-right: 5px;
             }
@@ -61,18 +59,9 @@
             }
 
             .el-icon-close {
-                vertical-align: 2px;
                 border-radius: 50%;
                 font-size: 14px;
                 margin-left: 10px;
-
-                &:before {
-                    vertical-align: -3px;
-                }
-
-                &:hover {
-                    color: #3A71A8;
-                }
             }
         }
     }
diff --git a/vue/src/layout/component/Page/index.vue b/vue/src/layout/component/Page/index.vue
index 15e3676..b955120 100644
--- a/vue/src/layout/component/Page/index.vue
+++ b/vue/src/layout/component/Page/index.vue
@@ -67,13 +67,12 @@ export default {
     display: flex;
     flex-direction: column;
     flex: 1;
-    position: relative;
     overflow: hidden;
     background-color: #f0f2f5;
 
     > .scroll-container {
-        height: 100%;
         display: flex;
+        flex: 1;
         flex-direction: column;
         overflow-y: overlay;
         overflow-x: inherit;
diff --git a/vue/src/layout/component/SettingDrawer.vue b/vue/src/layout/component/SettingDrawer.vue
index 4cc7f9b..1d7c6f4 100644
--- a/vue/src/layout/component/SettingDrawer.vue
+++ b/vue/src/layout/component/SettingDrawer.vue
@@ -54,6 +54,18 @@
             </div>
 
             <el-divider>侧边栏设置</el-divider>
+            <div class="drawer-item">
+                <span>主题风格</span>
+                <el-select
+                    :value="asideGetters.theme"
+                    size="mini"
+                    style="width: 80px"
+                    @input="changeAsideTheme"
+                >
+                    <el-option value="light" label="亮色"/>
+                    <el-option value="dark" label="暗色"/>
+                </el-select>
+            </div>
             <div class="drawer-item">
                 <span>手风琴效果</span>
                 <el-switch :value="asideGetters.uniqueOpen" @input="changeAsideUniqueOpen"/>
@@ -71,6 +83,20 @@
                 <el-switch :value="asideGetters.autoHide" @input="changeAsideAutoHide"/>
             </div>
 
+            <el-divider>导航栏设置</el-divider>
+            <div class="drawer-item">
+                <span>主题风格</span>
+                <el-select
+                    :value="navbarGetters.theme"
+                    size="mini"
+                    style="width: 80px"
+                    @input="changeNavbarTheme"
+                >
+                    <el-option value="light" label="亮色"/>
+                    <el-option value="dark" label="暗色"/>
+                </el-select>
+            </div>
+
             <el-divider>多页签设置</el-divider>
             <div class="drawer-item">
                 <span>启用</span>
@@ -96,6 +122,7 @@ import ColorCheckbox from "@/component/checkbox/ColorCheckbox"
 import ImgCheckbox from "@/component/checkbox/ImgCheckbox"
 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, mutations as navbarMutations} from "@/layout/store/navbar"
 import {getters as pageGetters, mutations as pageMutations} from "@/layout/store/page"
 import {getters as tagsViewGetters, mutations as tagsViewMutations} from "@/layout/store/tagsView"
 import {mergeObj} from "@/util"
@@ -110,7 +137,7 @@ export default {
 
     data() {
         return {
-            appGetters, asideGetters, pageGetters, tagsViewGetters,
+            appGetters, asideGetters, navbarGetters, pageGetters, tagsViewGetters,
 
             colors: ['#f5222d', '#fa541c', '#fadb14', '#3eaf7c', '#13c2c2', '#1890ff', '#722ed1', '#eb2f96'],
             navModes: [
@@ -148,12 +175,15 @@ export default {
                     showBackToTop: true
                 },
                 aside: {
-                    showLogo: true,
+                    theme: 'light',
                     uniqueOpen: true,
                     collapse: false,
                     showParentOnCollapse: false,
                     autoHide: false
                 },
+                navbar: {
+                    theme: 'light'
+                },
                 tagsView: {
                     enabled: true,
                     shortcut: true,
@@ -164,51 +194,29 @@ export default {
     },
 
     methods: {
-        //按照此处的设置项修改layout中的store
-        updateLayoutStore() {
-            const {app, page, aside, tagsView} = this.setting
-
-            appMutations.color(app.color)
-            appMutations.navMode(app.navMode)
-
-            pageMutations.showLogo(page.showLogo)
-            pageMutations.position(page.position)
-            pageMutations.showPageHeader(page.showPageHeader)
-            pageMutations.showBackToTop(page.showBackToTop)
-
-            asideMutations.uniqueOpen(aside.uniqueOpen)
-            asideMutations.collapse(aside.collapse)
-            asideMutations.showParentOnCollapse(aside.showParentOnCollapse)
-            asideMutations.autoHide(aside.autoHide)
+        //将此处的设置项数据同步到layout中的store
+        syncLayoutStore() {
+            const {app, page, aside, navbar, tagsView} = this.setting
 
-            tagsViewMutations.enabled(tagsView.enabled)
-            tagsViewMutations.shortcut(tagsView.shortcut)
-            tagsViewMutations.persistent(tagsView.persistent)
+            Object.entries(app).forEach(([k, v]) => appMutations[k](v))
+            Object.entries(page).forEach(([k, v]) => pageMutations[k](v))
+            Object.entries(aside).forEach(([k, v]) => asideMutations[k](v))
+            Object.entries(navbar).forEach(([k, v]) => navbarMutations[k](v))
+            Object.entries(tagsView).forEach(([k, v]) => tagsViewMutations[k](v))
         },
         //将layout中的store数据同步到此处的设置项
-        syncLayoutStore() {
-            const {app, page, aside, tagsView} = this.setting
-            app.color = appGetters.color
-            app.navMode = appGetters.navMode
-
-            page.showLogo = pageGetters.showLogo
-            page.position = pageGetters.position
-            page.showPageHeader = pageGetters.showPageHeader
-            page.showBackToTop = pageGetters.showBackToTop
-
-            aside.showLogo = asideGetters.showLogo
-            aside.uniqueOpen = asideGetters.uniqueOpen
-            aside.collapse = asideGetters.collapse
-            aside.showParentOnCollapse = asideGetters.showParentOnCollapse
-            aside.autoHide = asideGetters.autoHide
+        syncSettingDrawer() {
+            const {app, page, aside, navbar, tagsView} = this.setting
 
-            tagsView.enabled = tagsViewGetters.enabled
-            tagsView.shortcut = tagsViewGetters.shortcut
-            tagsView.persistent = tagsViewGetters.persistent
+            Object.keys(app).forEach(k => app[k] = appGetters[k])
+            Object.keys(page).forEach(k => page[k] = pageGetters[k])
+            Object.keys(aside).forEach(k => aside[k] = asideGetters[k])
+            Object.keys(navbar).forEach(k => navbar[k] = navbarGetters[k])
+            Object.keys(tagsView).forEach(k => tagsView[k] = tagsViewGetters[k])
         },
         //将此处的设置项保存到本地
         saveSetting() {
-            this.syncLayoutStore()
+            this.syncSettingDrawer()
             setLocalPersonalSettings(this.setting)
         },
 
@@ -233,6 +241,9 @@ export default {
             pageMutations.showBackToTop(v)
         },
 
+        changeAsideTheme(v) {
+            asideMutations.theme(v)
+        },
         changeAsideUniqueOpen(v) {
             asideMutations.uniqueOpen(v)
         },
@@ -246,6 +257,10 @@ export default {
             asideMutations.autoHide(v)
         },
 
+        changeNavbarTheme(v) {
+            navbarMutations.theme(v)
+        },
+
         changeTagsViewEnabled(v) {
             tagsViewMutations.enabled(v)
         },
@@ -275,7 +290,7 @@ export default {
         //由于数据结构可能发生变化，所以在合并后覆盖本地数据
         setLocalPersonalSettings(this.setting)
 
-        this.updateLayoutStore()
+        this.syncLayoutStore()
 
         //初始化时尝试修改主题色
         this.changeThemeColor(this.setting.app.color)
@@ -293,7 +308,7 @@ export default {
     .drawer-item {
         display: flex;
         justify-content: space-between;
-        color: rgba(0, 0, 0, .65);
+        color: #606266;
         font-size: 14px;
         padding: 12px 0;
     }
diff --git a/vue/src/layout/index.vue b/vue/src/layout/index.vue
index b4b0330..6518ef5 100644
--- a/vue/src/layout/index.vue
+++ b/vue/src/layout/index.vue
@@ -3,7 +3,8 @@ import offlineMixin from './mixin/offline'
 import VAside from './component/Aside'
 import VNavbar from './component/Navbar'
 import VPage from './component/Page'
-import {getters as appGetters} from "@/layout/store/app"
+import SettingDrawer from './component/SettingDrawer'
+import {getters as appGetters, mutations as appMutations} from "@/layout/store/app"
 import {getters as pageGetters} from "@/layout/store/page"
 import {getters as tagsViewGetters} from "@/layout/store/tagsView"
 
@@ -12,12 +13,15 @@ export default {
 
     mixins: [offlineMixin],
 
-    components: {VAside, VNavbar, VPage},
+    components: {VAside, VNavbar, VPage, SettingDrawer},
 
     computed: {
         isLeftRight() {
             return pageGetters.position === 'left-right'
         },
+        renderAside() {
+            return appGetters.isMobile || ['aside', 'aside-two-part', 'mix'].includes(appGetters.navMode)
+        },
         wrapperClass() {
             return {
                 'app-wrapper': true,
@@ -32,9 +36,12 @@ export default {
                 this.isLeftRight && 'flex-column',
                 tagsViewGetters.enabled && 'has-tags-view'
             ]
-        },
-        renderAside() {
-            return appGetters.isMobile || ['aside', 'aside-two-part', 'mix'].includes(appGetters.navMode)
+        }
+    },
+
+    methods: {
+        closeSettingDrawer() {
+            appMutations.showSettingDrawer(false)
         }
     },
 
@@ -49,6 +56,11 @@ export default {
                     {this.isLeftRight ? <v-navbar/> : aside}
                     <v-page/>
                 </section>
+
+                <setting-drawer
+                    value={appGetters.showSettingDrawer}
+                    on-input={this.closeSettingDrawer}
+                />
             </section>
         )
     }
@@ -63,7 +75,6 @@ export default {
 
 .app-wrapper {
     display: flex;
-    position: relative;
     height: 100%;
     width: 100%;
 
@@ -71,7 +82,12 @@ export default {
         display: flex;
         flex: 1;
         overflow: hidden;
-        position: relative;
+    }
+
+    //左右结构时，侧边栏z-index需大于导航栏
+    //上下结构时，侧边栏z-index需小于导航栏
+    &.flex-column .aside {
+        z-index: 9;
     }
 }
 </style>
diff --git a/vue/src/layout/store/app.js b/vue/src/layout/store/app.js
index 9c8a43f..b629cf8 100644
--- a/vue/src/layout/store/app.js
+++ b/vue/src/layout/store/app.js
@@ -7,6 +7,10 @@ const state = {
     //区分pc和移动端
     isMobile: isMobile(),
 
+    //设置抽屉的显隐
+    //放这里的原因是navbar可能会重新渲染，从而导致抽屉的重新渲染
+    showSettingDrawer: false,
+
     //当前激活的顶部菜单的fullPath
     activeRootMenu: '',
 
diff --git a/vue/src/layout/store/aside.js b/vue/src/layout/store/aside.js
index 796c237..65d6914 100644
--- a/vue/src/layout/store/aside.js
+++ b/vue/src/layout/store/aside.js
@@ -10,6 +10,9 @@ const state = {
     //抽屉模式时的显隐
     show: false,
 
+    //主题，light 或 dark
+    theme: 'light',
+
     //手风琴效果
     uniqueOpen: true,
 
diff --git a/vue/src/layout/store/navbar.js b/vue/src/layout/store/navbar.js
new file mode 100644
index 0000000..c804ee4
--- /dev/null
+++ b/vue/src/layout/store/navbar.js
@@ -0,0 +1,13 @@
+import Vue from 'vue'
+import {createGetters, createMutations} from "@/util/observable"
+
+const state = {
+    //主题，light 或 dark
+    theme: 'light',
+}
+
+const store = Vue.observable(state)
+
+export const getters = createGetters(store)
+
+export const mutations = createMutations(store)
diff --git a/vue/src/router/module/devRoot/index.js b/vue/src/router/module/devRoot/index.js
index bc2d25c..d809bfb 100644
--- a/vue/src/router/module/devRoot/index.js
+++ b/vue/src/router/module/devRoot/index.js
@@ -6,6 +6,6 @@ const files = require.context('./child', false, /\.js$/)
 export default {
     path: '/dev',
     component: {template: `<div><div>开发专用页面</div><router-view/></div>`},
-    meta: {title: '开发专用页面', noAuth: true, noCache: true, alwaysShow: true},
+    meta: {title: '开发专用页面', icon: 'svg-develop', noAuth: true, noCache: true, alwaysShow: true},
     children: context2array(files)
 }
diff --git a/vue/src/util/browser.js b/vue/src/util/browser.js
index a6e3a40..99e6d8c 100644
--- a/vue/src/util/browser.js
+++ b/vue/src/util/browser.js
@@ -1,3 +1,7 @@
+import cssVariables from '@/asset/style/variables.scss'
+
+const maxMobileWidth = parseFloat(cssVariables.maxMobileWidth)
+
 /**
  * 根据body宽度判断是否为移动端，是则返回true
  *
@@ -5,7 +9,7 @@
  */
 export function isMobile() {
     const rect = document.body.getBoundingClientRect()
-    return rect.width < 501
+    return rect.width <= maxMobileWidth
 }
 
 /**
diff --git a/vue/src/view/app/common/DetailPage/style.scss b/vue/src/view/app/common/DetailPage/style.scss
index 0371dde..ac71da1 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 #e8eaec;
+        border-bottom: 1px solid #dcdfe6;
 
         > .el-page-header {
             padding: 0 0 24px 0;
diff --git a/vue/src/view/example/cool/fluidPage.vue b/vue/src/view/example/cool/fluidPage.vue
index e69fad2..8ff7fef 100644
--- a/vue/src/view/example/cool/fluidPage.vue
+++ b/vue/src/view/example/cool/fluidPage.vue
@@ -1,5 +1,5 @@
 <template>
-    <div style="position: absolute;top: 0;right: 0;left: 0;bottom: 0;">
+    <div style="margin: -24px">
         <canvas :height="height" :width="width" id="canvas-fluid" style="display: block"/>
     </div>
 </template>
diff --git a/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue b/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue
index 5877003..2969723 100644
--- a/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue
+++ b/vue/src/view/index/component/PanelGroup/PanelGroupItem.vue
@@ -42,7 +42,6 @@ export default {
     color: #666;
     background: #fff;
     border-radius: 4px;
-    -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
     box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
     border-color: rgba(0, 0, 0, .05);
 
diff --git a/vue/src/view/index/component/PanelGroup/index.vue b/vue/src/view/index/component/PanelGroup/index.vue
index dc469c9..0308fff 100644
--- a/vue/src/view/index/component/PanelGroup/index.vue
+++ b/vue/src/view/index/component/PanelGroup/index.vue
@@ -8,7 +8,7 @@
 
 <script>
 import PanelGroupItem from './PanelGroupItem'
-import variables from '@/asset/style/variables.scss'
+import cssVariables from '@/asset/style/variables.scss'
 import {getFourBlock} from '@/api/statistic'
 import {isEmpty} from "@/util"
 import {auth} from "@/util/auth"
@@ -26,7 +26,7 @@ export default {
                     id: 'online',
                     path: '/system/user',
                     icon: 'svg-user',
-                    color: variables.info,
+                    color: cssVariables.info,
                     value: 0,
                     text: '在线用户'
                 },
@@ -34,7 +34,7 @@ export default {
                     id: 'purchase',
                     path: '/purchase/order',
                     icon: 'svg-shopping',
-                    color: variables.primary,
+                    color: cssVariables.primary,
                     value: 0,
                     text: '今日采购额'
                 },
@@ -42,14 +42,14 @@ export default {
                     id: 'sell',
                     path: '/sell/order',
                     icon: 'svg-sell',
-                    color: variables.warning,
+                    color: cssVariables.warning,
                     value: 0,
                     text: '今日销售额'
                 },
                 {
                     id: 'profit',
                     icon: 'svg-money',
-                    color: variables.success,
+                    color: cssVariables.success,
                     value: 0,
                     text: '今日毛利润'
                 },
diff --git a/vue/src/view/system/category/component/List.vue b/vue/src/view/system/category/component/List.vue
index d41de55..f104a8a 100644
--- a/vue/src/view/system/category/component/List.vue
+++ b/vue/src/view/system/category/component/List.vue
@@ -101,15 +101,17 @@ export default {
 
         openContextMenu(e, obj, node) {
             e.preventDefault()
+
             this.currentCategory = obj ? {
                 ...obj,
                 level: node.level,
                 parent: node.parent ? node.parent.data : null
             } : null
+
             this.$refs.tree.$refs.tree.setCurrentKey(obj ? obj.id : null)
-            const {left, top} = this.$el.getBoundingClientRect()
-            this.contextmenu.left = e.clientX - left + 15
-            this.contextmenu.top = e.clientY - top
+
+            this.contextmenu.left = e.clientX + 15
+            this.contextmenu.top = e.clientY
             this.contextmenu.show = true
         }
     },
diff --git a/vue/src/view/system/department/indexPage.vue b/vue/src/view/system/department/indexPage.vue
index b3ac6f8..eac8e16 100644
--- a/vue/src/view/system/department/indexPage.vue
+++ b/vue/src/view/system/department/indexPage.vue
@@ -110,9 +110,8 @@ export default {
         openMenu(e, obj) {
             e.preventDefault()
             this.currentNode = obj
-            const {left, top} = this.$el.getBoundingClientRect()
-            this.contextmenu.left = e.clientX - left + 15
-            this.contextmenu.top = e.clientY - top
+            this.contextmenu.left = e.clientX  + 15
+            this.contextmenu.top = e.clientY
             this.contextmenu.show = true
         },