From ac15b8e886ec510d765a26c2f64aae3c09ad8d81 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@126.com>
Date: Fri, 13 Nov 2020 08:51:39 +0800
Subject: [PATCH] =?UTF-8?q?logo=E4=BD=8D=E7=BD=AE=E5=8F=AF=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=E7=9A=84=E5=87=86=E5=A4=87=E5=B7=A5=E4=BD=9C=20logo?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E6=9C=AC=E5=9C=B0=E8=B5=84=E6=BA=90=EF=BC=8C?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E4=BA=86config=E4=B8=AD=E7=9A=84sidebarLogoU?=
 =?UTF-8?q?rl=E9=80=89=E9=A1=B9=20=E5=8F=8C=E5=B1=82=E4=BE=A7=E8=BE=B9?=
 =?UTF-8?q?=E6=A0=8F=E7=9A=84=E6=A0=B9=E8=8F=9C=E5=8D=95=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E4=BA=86=E6=BB=9A=E5=8A=A8=E8=87=B3=E6=BF=80=E6=B4=BB=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E7=9A=84=E5=8A=9F=E8=83=BD=20=E5=8E=BB=E9=99=A4?=
 =?UTF-8?q?=E4=BA=86=E5=8E=9F=E6=9C=AC=E5=8F=AA=E6=9C=89=E5=9C=A8dev?=
 =?UTF-8?q?=E7=8E=AF=E5=A2=83=E4=B8=8B=E6=89=8D=E4=BD=BF=E7=94=A8ThemeColo?=
 =?UTF-8?q?rReplacer=E7=9A=84=E9=99=90=E5=88=B6=20=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E4=BA=86=E5=AF=BC=E8=88=AA=E8=8F=9C=E5=8D=95hover=E6=97=B6?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E9=A2=9C=E8=89=B2=E4=B8=8D=E4=B8=80=E8=87=B4?=
 =?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98=20=E9=83=A8=E5=88=86=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=A7=BB=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vue/public/static/img/logo.svg                |  1 +
 vue/src/component/menu/NavMenu/item.vue       |  2 +-
 vue/src/config/index.js                       |  7 +-
 .../layout/component/Aside/OnePart/index.vue  | 10 ++-
 .../layout/component/Aside/TwoPart/index.vue  | 67 -------------------
 .../layout/component/Aside/TwoPart/root.vue   | 59 ++++++++++++++--
 .../layout/component/Aside/TwoPart/sub.vue    | 34 ++++++++++
 .../component/Header/TagsView/index.vue       | 17 +++--
 vue/src/layout/component/{Aside => }/Logo.vue | 35 +++++-----
 vue/src/layout/component/SettingDrawer.vue    | 37 +++++++---
 .../layout/mixin/decideRouterTransition.js    |  5 +-
 vue/src/layout/store/page.js                  |  4 ++
 .../example/component/regionSelectorPage.vue  |  6 +-
 vue/vue.config.js                             | 12 ++--
 14 files changed, 169 insertions(+), 127 deletions(-)
 create mode 100644 vue/public/static/img/logo.svg
 rename vue/src/layout/component/{Aside => }/Logo.vue (56%)

diff --git a/vue/public/static/img/logo.svg b/vue/public/static/img/logo.svg
new file mode 100644
index 0000000..239bf69
--- /dev/null
+++ b/vue/public/static/img/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" version="1.1" viewBox="0 0 200 200"><title>Group 28 Copy 5</title><desc>Created with Sketch.</desc><defs><linearGradient id="linearGradient-1" x1="62.102%" x2="108.197%" y1="0%" y2="37.864%"><stop offset="0%" stop-color="#4285EB"/><stop offset="100%" stop-color="#2EC7FF"/></linearGradient><linearGradient id="linearGradient-2" x1="69.644%" x2="54.043%" y1="0%" y2="108.457%"><stop offset="0%" stop-color="#29CDFF"/><stop offset="37.86%" stop-color="#148EFF"/><stop offset="100%" stop-color="#0A60FF"/></linearGradient><linearGradient id="linearGradient-3" x1="69.691%" x2="16.723%" y1="-12.974%" y2="117.391%"><stop offset="0%" stop-color="#FA816E"/><stop offset="41.473%" stop-color="#F74A5C"/><stop offset="100%" stop-color="#F51D2C"/></linearGradient><linearGradient id="linearGradient-4" x1="68.128%" x2="30.44%" y1="-35.691%" y2="114.943%"><stop offset="0%" stop-color="#FA8E7D"/><stop offset="51.264%" stop-color="#F74A5C"/><stop offset="100%" stop-color="#F51D2C"/></linearGradient></defs><g id="Page-1" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><g id="logo" transform="translate(-20.000000, -20.000000)"><g id="Group-28-Copy-5" transform="translate(20.000000, 20.000000)"><g id="Group-27-Copy-3"><g id="Group-25" fill-rule="nonzero"><g id="2"><path id="Shape" fill="url(#linearGradient-1)" d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C99.2571609,26.9692191 101.032305,26.9692191 102.20193,28.1378823 L129.985225,55.8983314 C134.193707,60.1033528 141.017005,60.1033528 145.225487,55.8983314 C149.433969,51.69331 149.433969,44.8756232 145.225487,40.6706018 L108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z"/><path id="Shape" fill="url(#linearGradient-2)" d="M91.5880863,4.17652823 L4.17996544,91.5127728 C-0.519240605,96.2081146 -0.519240605,103.791885 4.17996544,108.487227 L91.5880863,195.823472 C96.2872923,200.518814 103.877304,200.518814 108.57651,195.823472 L145.225487,159.204632 C149.433969,154.999611 149.433969,148.181924 145.225487,143.976903 C141.017005,139.771881 134.193707,139.771881 129.985225,143.976903 L102.20193,171.737352 C101.032305,172.906015 99.2571609,172.906015 98.0875359,171.737352 L28.285908,101.993122 C27.1162831,100.824459 27.1162831,99.050775 28.285908,97.8821118 L98.0875359,28.1378823 C100.999864,25.6271836 105.751642,20.541824 112.729652,19.3524487 C117.915585,18.4685261 123.585219,20.4140239 129.738554,25.1889424 C125.624663,21.0784292 118.571995,14.0340304 108.58055,4.05574592 C103.862049,-0.537986846 96.2692618,-0.500797906 91.5880863,4.17652823 Z"/></g><path id="Shape" fill="url(#linearGradient-3)" d="M153.685633,135.854579 C157.894115,140.0596 164.717412,140.0596 168.925894,135.854579 L195.959977,108.842726 C200.659183,104.147384 200.659183,96.5636133 195.960527,91.8688194 L168.690777,64.7181159 C164.472332,60.5180858 157.646868,60.5241425 153.435895,64.7316526 C149.227413,68.936674 149.227413,75.7543607 153.435895,79.9593821 L171.854035,98.3623765 C173.02366,99.5310396 173.02366,101.304724 171.854035,102.473387 L153.685633,120.626849 C149.47715,124.83187 149.47715,131.649557 153.685633,135.854579 Z"/></g><ellipse id="Combined-Shape" cx="100.519" cy="100.437" fill="url(#linearGradient-4)" rx="23.6" ry="23.581"/></g></g></g></g></svg>
\ No newline at end of file
diff --git a/vue/src/component/menu/NavMenu/item.vue b/vue/src/component/menu/NavMenu/item.vue
index 9c92941..997202c 100644
--- a/vue/src/component/menu/NavMenu/item.vue
+++ b/vue/src/component/menu/NavMenu/item.vue
@@ -9,7 +9,7 @@ const MenuItemContent = {
 
         const iconComponent =
             useTitleAsIcon
-                ? <i class="icon" style="font-style: normal">{title[0]}</i>
+                ? <em class="icon" style="font-style: normal">{title[0]}</em>
                 : icon
                 ? <v-icon icon={icon}/>
                 : <span class="icon" style="display: none"/>
diff --git a/vue/src/config/index.js b/vue/src/config/index.js
index 5ae061c..2fc15e9 100644
--- a/vue/src/config/index.js
+++ b/vue/src/config/index.js
@@ -1,12 +1,10 @@
 const isDev = process.env.NODE_ENV === 'development'
 
-const contextPath = '/'
-
 module.exports = {
     isDev,
 
     //项目的部署路径，始终以'/'开头，以'/'结束
-    contextPath,
+    contextPath: '/',
 
     //页面标题、登录注册页的标题
     title: 'BiuBiuBiu~',
@@ -20,9 +18,6 @@ module.exports = {
     //socket连接地址
     socketUrl: isDev ? 'http://localhost:12580' : 'https://toesbieya.cn',
 
-    //侧边栏顶上的logo地址
-    sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',
-
     //路由配置
     route: {
         //路由模式，['hash','history']
diff --git a/vue/src/layout/component/Aside/OnePart/index.vue b/vue/src/layout/component/Aside/OnePart/index.vue
index 267d4c0..bb8dbcc 100644
--- a/vue/src/layout/component/Aside/OnePart/index.vue
+++ b/vue/src/layout/component/Aside/OnePart/index.vue
@@ -2,7 +2,8 @@
 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 {getters as pageGetters} from "@/layout/store/page"
+import Logo from '@/layout/component/Logo'
 import NavMenu from '@/component/menu/NavMenu'
 import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util"
 import {moveToActiveMenuVertically} from "@/util/element-ui/elMenu"
@@ -158,13 +159,15 @@ export default {
     render() {
         if (this.menus.length <= 0) return
 
+        const showLogo = pageGetters.showLogo && pageGetters.logoPosition === 'aside'
+
         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}/>}
+                {showLogo && <logo show-title={!this.collapse}/>}
                 <nav-menu
                     menus={this.menus}
                     collapse={this.collapse}
@@ -182,9 +185,10 @@ export default {
                 <el-drawer
                     visible={this.show}
                     with-header={false}
+                    modal={this.isMobile} //设置自动隐藏时不使用遮罩
                     direction="ltr"
                     size="auto"
-                    on-close={() => asideMutations.close()}
+                    on-close={asideMutations.close}
                 >
                     {aside}
                 </el-drawer>
diff --git a/vue/src/layout/component/Aside/TwoPart/index.vue b/vue/src/layout/component/Aside/TwoPart/index.vue
index 2a80b49..88078e0 100644
--- a/vue/src/layout/component/Aside/TwoPart/index.vue
+++ b/vue/src/layout/component/Aside/TwoPart/index.vue
@@ -15,70 +15,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;
-        }
-    }
-}
-
-.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 ae10ee3..a39d203 100644
--- a/vue/src/layout/component/Aside/TwoPart/root.vue
+++ b/vue/src/layout/component/Aside/TwoPart/root.vue
@@ -1,8 +1,9 @@
 <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'
+import {getters as pageGetters} from "@/layout/store/page"
+import Logo from '@/layout/component/Logo'
+import {scrollIntoViewVertically} from "@/util/browser"
 
 const Item = {
     functional: true,
@@ -20,7 +21,7 @@ const Item = {
         const iconComponent =
             icon
                 ? <v-icon icon={icon}/>
-                : <i class="icon" style="font-style: normal">{title[0]}</i>
+                : <em class="icon" style="font-style: normal">{title[0]}</em>
 
         return (
             <li
@@ -60,11 +61,22 @@ export default {
             immediate: true,
             handler(to) {
                 const {path, matched} = to
+
                 //使用/redirect跳转 或 无匹配路由 时跳过
                 if (path.startsWith('/redirect') || matched.length === 0) {
                     return
                 }
+
                 this.setActiveRootMenu(this.navMode, to)
+
+                //滚动至激活菜单
+                if (!this._isMounted) return
+                this.$nextTick(() => {
+                    scrollIntoViewVertically(
+                        this.$el.querySelector('.el-menu-item.is-active'),
+                        this.$el.querySelector('.el-menu.el-menu--vertical')
+                    )
+                })
             }
         }
     },
@@ -87,6 +99,8 @@ export default {
     },
 
     render() {
+        const showLogo = pageGetters.showLogo && pageGetters.logoPosition === 'aside'
+
         return (
             <div class="root-sidebar-container">
                 <div
@@ -94,7 +108,7 @@ export default {
                     on-mouseleave={() => this.mouseOutside = true}
                     on-mouseenter={() => this.mouseOutside = false}
                 >
-                    {asideGetters.showLogo && <logo collapse={this.mouseOutside}/>}
+                    {showLogo && <logo show-title={!this.mouseOutside}/>}
                     <ul class="el-menu el-menu--vertical">
                         {this.menus.map(({fullPath, meta: {title, icon}}) => (
                             <item
@@ -111,3 +125,40 @@ 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/TwoPart/sub.vue
index 2130146..efd1d8d 100644
--- a/vue/src/layout/component/Aside/TwoPart/sub.vue
+++ b/vue/src/layout/component/Aside/TwoPart/sub.vue
@@ -95,3 +95,37 @@ 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/Header/TagsView/index.vue b/vue/src/layout/component/Header/TagsView/index.vue
index a35438a..7e9d9b1 100644
--- a/vue/src/layout/component/Header/TagsView/index.vue
+++ b/vue/src/layout/component/Header/TagsView/index.vue
@@ -89,10 +89,10 @@ export default {
             tag && this.$refs.scrollPanel.moveToTarget(tag, tagInstances)
         },
 
-        /*
-        * 右键菜单选项
-        * 刷新所选、关闭所选、关闭其他、关闭所有
-        * */
+        /**
+         * 右键菜单选项
+         * 刷新所选、关闭所选、关闭其他、关闭所有
+         */
         refreshSelectedTag() {
             if (!this.selectedTag) return
             tagsViewMutations.delCacheOnly(this.selectedTag)
@@ -127,13 +127,13 @@ export default {
             else refreshPage()
         },
 
-        openMenu(tag, e) {
+        openContextMenu(e, tag) {
             e.preventDefault()
 
-            const menuMinWidth = 105
+            const contextMenuWidth = 105 //右键菜单的假定宽度
             const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
             const offsetWidth = this.$el.offsetWidth // container width
-            const maxLeft = offsetWidth - menuMinWidth // left boundary
+            const maxLeft = offsetWidth - contextMenuWidth // left boundary
             const left = e.clientX - offsetLeft + 15 // 15: margin right
 
             this.contextmenu.left = left > maxLeft ? maxLeft : left
@@ -156,8 +156,7 @@ export default {
                         key={path}
                         class={{'tags-view-item': true, active}}
                         to={{path, query, fullPath}}
-                        tag="a"
-                        v-on:contextmenu_native={e => this.openMenu(tag, e)}
+                        v-on:contextmenu_native={e => this.openContextMenu(e, tag)}
                         v-on:dblclick_native={e => closeSelectedTag(e, tag)}
                     >
                         {title}
diff --git a/vue/src/layout/component/Aside/Logo.vue b/vue/src/layout/component/Logo.vue
similarity index 56%
rename from vue/src/layout/component/Aside/Logo.vue
rename to vue/src/layout/component/Logo.vue
index bb2d9ca..e6fcb01 100644
--- a/vue/src/layout/component/Aside/Logo.vue
+++ b/vue/src/layout/component/Logo.vue
@@ -1,23 +1,23 @@
 <script type="text/jsx">
-import {sidebarLogoUrl, title} from '@/config'
+import {title} from '@/config'
 
 export default {
-    name: 'SidebarLogo',
+    name: 'Logo',
 
     functional: true,
 
-    props: {collapse: Boolean},
+    props: {showTitle: Boolean},
 
     render(h, context) {
-        const {collapse} = context.props
+        const {showTitle} = context.props
 
-        const logoClass = {'sidebar-logo-container': true, 'collapse': collapse}
+        const logoClass = {'logo-container': true, 'no-title': !showTitle}
 
         return (
             <div class={logoClass}>
-                <router-link class="sidebar-logo-link" to="/">
-                    {sidebarLogoUrl && <img src={sidebarLogoUrl} class="sidebar-logo"/>}
-                    {!collapse && <h1 class="sidebar-title">{title}</h1>}
+                <router-link class="logo-link" to="/">
+                    <img src={`${process.env.BASE_URL}static/img/logo.svg`}/>
+                    {showTitle && <h1 class="logo-title">{title}</h1>}
                 </router-link>
             </div>
         )
@@ -30,28 +30,28 @@ export default {
 
 $logoSize: 30px;
 
-.sidebar-logo-container {
+.logo-container {
     position: relative;
     width: 100%;
     height: $nav-height;
     line-height: $nav-height;
     padding-left: 20px;
 
-    .sidebar-logo-link {
+    .logo-link {
+        display: block;
         height: 100%;
-        width: 100%;
 
-        .sidebar-logo {
-            width: $logoSize;
+        > img {
+            display: inline-block;
             height: $logoSize;
             vertical-align: middle;
 
-            & + .sidebar-title {
+            & + .logo-title {
                 margin-left: 12px;
             }
         }
 
-        .sidebar-title {
+        .logo-title {
             display: inline-block;
             margin: 0;
             color: #ffffff;
@@ -63,9 +63,8 @@ $logoSize: 30px;
         }
     }
 
-    &.collapse {
-        text-align: center;
-        padding-left: 0;
+    &.no-title {
+        padding-left: ($aside-icon-size + 20px * 2 - $logoSize) / 2;
     }
 }
 </style>
diff --git a/vue/src/layout/component/SettingDrawer.vue b/vue/src/layout/component/SettingDrawer.vue
index 3a91e18..7ca941a 100644
--- a/vue/src/layout/component/SettingDrawer.vue
+++ b/vue/src/layout/component/SettingDrawer.vue
@@ -1,5 +1,11 @@
 <template>
-    <el-drawer :visible="value" :with-header="false" append-to-body size="288px" @close="$emit('input', false)">
+    <el-drawer
+        :visible="value"
+        :with-header="false"
+        append-to-body
+        size="288px"
+        @close="$emit('input', false)"
+    >
         <div class="drawer-container">
             <el-divider>主题色</el-divider>
             <div class="drawer-item">
@@ -22,6 +28,22 @@
             </div>
 
             <el-divider>页面设置</el-divider>
+            <div class="drawer-item">
+                <span>显示logo</span>
+                <el-switch :value="pageGetters.showLogo" @input="changePageShowLogo"/>
+            </div>
+            <div class="drawer-item">
+                <span>logo位置</span>
+                <el-select
+                    :value="pageGetters.logoPosition"
+                    size="mini"
+                    style="width: 80px"
+                    @input="changePageLogoPosition"
+                >
+                    <el-option value="aside" label="侧栏"/>
+                    <el-option value="head" label="顶栏"/>
+                </el-select>
+            </div>
             <div class="drawer-item">
                 <span>显示页头</span>
                 <el-switch :value="pageGetters.showPageHeader" @input="changePageShowHeader"/>
@@ -32,10 +54,6 @@
             </div>
 
             <el-divider>侧边栏设置</el-divider>
-            <div class="drawer-item">
-                <span>显示logo</span>
-                <el-switch :value="asideGetters.showLogo" @input="changeAsideShowLogo"/>
-            </div>
             <div class="drawer-item">
                 <span>手风琴效果</span>
                 <el-switch :value="asideGetters.uniqueOpen" @input="changeAsideUniqueOpen"/>
@@ -198,6 +216,12 @@ export default {
             appMutations.navMode(v)
         },
 
+        changePageShowLogo(v) {
+            pageMutations.showLogo(v)
+        },
+        changePageLogoPosition(v) {
+            pageMutations.logoPosition(v)
+        },
         changePageShowHeader(v) {
             pageMutations.showPageHeader(v)
         },
@@ -205,9 +229,6 @@ export default {
             pageMutations.showBackToTop(v)
         },
 
-        changeAsideShowLogo(v) {
-            asideMutations.showLogo(v)
-        },
         changeAsideUniqueOpen(v) {
             asideMutations.uniqueOpen(v)
         },
diff --git a/vue/src/layout/mixin/decideRouterTransition.js b/vue/src/layout/mixin/decideRouterTransition.js
index 9f75791..163ddf7 100644
--- a/vue/src/layout/mixin/decideRouterTransition.js
+++ b/vue/src/layout/mixin/decideRouterTransition.js
@@ -15,11 +15,14 @@ export default {
         decideRouteTransition(to, from) {
             let transitionName = animate.prev
 
+            //这里认为页签数量不会太多，所以为了可读性使用两次循环查找
             const fromIndex = this.visitedViews.findIndex(i => i.path === from.path)
             const toIndex = this.visitedViews.findIndex(i => i.path === to.path)
 
             //新开tab也认为顺序高于上一个tab
-            if (toIndex === -1 || fromIndex < toIndex) transitionName = animate.next
+            if (toIndex === -1 || fromIndex < toIndex) {
+                transitionName = animate.next
+            }
 
             tagsViewMutations.transitionName(transitionName)
         },
diff --git a/vue/src/layout/store/page.js b/vue/src/layout/store/page.js
index efc85da..987d053 100644
--- a/vue/src/layout/store/page.js
+++ b/vue/src/layout/store/page.js
@@ -11,6 +11,10 @@ const state = {
     currentIframe: '',
     iframeList: [],
 
+    //是否显示侧边栏或顶部导航栏的logo
+    showLogo: true,
+    //logo位置，侧边栏（'aside'）、顶部导航栏（'head）
+    logoPosition: 'aside',
     //是否显示页头
     showPageHeader: true,
     //是否显示返回顶部按钮
diff --git a/vue/src/view/example/component/regionSelectorPage.vue b/vue/src/view/example/component/regionSelectorPage.vue
index de80cfb..cf1f5c2 100644
--- a/vue/src/view/example/component/regionSelectorPage.vue
+++ b/vue/src/view/example/component/regionSelectorPage.vue
@@ -1,17 +1,17 @@
 <template>
-    <div style="width: 300px">
+    <div>
         <div class="tip-row">
             行政区划选择，<a href="https://github.com/modood/Administrative-divisions-of-China" target="_blank">数据由此获取</a>
         </div>
         <div class="tip-row">
             <p>树形</p>
-            <div>
+            <div style="width: 300px">
                 <region-selector :value="value" type="tree" @clear="clear" @select="select"/>
             </div>
         </div>
         <div class="tip-row">
             <p>选项卡型，支持v-model，<a href="https://github.com/TerryZ/v-region" target="_blank">样式搬的这个</a></p>
-            <div>
+            <div style="width: 300px">
                 <region-selector v-model="value" @clear="clear"/>
             </div>
         </div>
diff --git a/vue/vue.config.js b/vue/vue.config.js
index 87bcb84..d00fa2b 100644
--- a/vue/vue.config.js
+++ b/vue/vue.config.js
@@ -64,13 +64,11 @@ module.exports = {
                 minRatio: 0.8,
                 deleteOriginalAssets: false,        //是否删除源文件
             }),
-            settings.isDev
-                ? new ThemeColorReplacer({
-                    fileName: 'css/theme-colors.[contenthash:8].css',
-                    matchColors: forElementUI.getElementUISeries('#1890ff'),
-                    changeSelector: forElementUI.changeSelector
-                })
-                : EMPTY_PLUGIN,
+            new ThemeColorReplacer({
+                fileName: 'css/theme-colors.[contenthash:8].css',
+                matchColors: forElementUI.getElementUISeries('#1890ff'),
+                changeSelector: forElementUI.changeSelector
+            }),
             settings.isDev ? EMPTY_PLUGIN : new BundleAnalyzerPlugin()
         ]
     },