From c718730d1ef4b91359c9989aecc01e41050bb544 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Mon, 14 Sep 2020 17:27:31 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
 =?UTF-8?q?=E8=87=AA=E5=8A=A8=E9=9A=90=E8=97=8F=E7=9A=84=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=20=E4=BE=A7=E8=BE=B9=E6=A0=8F=E5=A2=9E=E5=8A=A0=E4=BA=86?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E8=87=B3=E6=BF=80=E6=B4=BB=E8=8F=9C=E5=8D=95?=
 =?UTF-8?q?=E7=9A=84=E5=8A=9F=E8=83=BD=20layout=E4=B8=AD=E5=AF=B9=E6=98=AF?=
 =?UTF-8?q?=E5=90=A6=E4=B8=BA=E7=A7=BB=E5=8A=A8=E7=AB=AF=E7=9A=84=E5=88=A4?=
 =?UTF-8?q?=E6=96=AD=E7=94=B1device=E6=94=B9=E4=B8=BAisMobile=20=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E4=BA=86window=E5=85=A8=E5=B1=80=E5=AF=B9=E8=B1=A1?=
 =?UTF-8?q?=E7=9A=84=E6=96=B9=E6=B3=95=E5=85=A8=E9=83=A8=E4=BB=A5window.?=
 =?UTF-8?q?=E5=BC=80=E5=A4=B4=20=E9=83=A8=E5=88=86=E5=91=BD=E5=90=8D?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9=20=E9=83=A8=E5=88=86=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../component/Message/main.vue                |   4 +-
 vue/src/asset/style/element-ui.scss           |  24 +--
 vue/src/asset/style/index.scss                |  35 ++--
 vue/src/asset/style/variables.scss            |   2 +
 vue/src/component/Icon/index.vue              |  12 +-
 vue/src/component/form/Anchor/index.vue       |  17 +-
 vue/src/component/menu/NavMenu/item.vue       |  48 ++++--
 vue/src/globalMethod/Guide/main.vue           |   2 +-
 vue/src/globalMethod/Verify/main.vue          |  20 +--
 vue/src/layout/component/Aside/index.vue      | 162 ++++++++++++++----
 vue/src/layout/component/Aside/style.scss     |  23 +--
 .../component/Navbar/component/HeadMenu.vue   |   2 +-
 .../Navbar/component/SettingDrawer.vue        |   5 +-
 .../Header/component/Navbar/index.vue         |   4 +-
 .../{ScrollPane.vue => ScrollPanel.vue}       |  69 ++++----
 .../Header/component/TagsView/index.vue       |  71 ++++----
 .../Header/component/TagsView/style.scss      |  10 +-
 .../component/Page/component/PageFooter.vue   |   4 +-
 .../component/Page/component/PageHeader.vue   |   7 +-
 vue/src/layout/component/Page/index.vue       |   3 +-
 vue/src/layout/index.vue                      |   5 +-
 vue/src/layout/mixin/menu.js                  |  21 ++-
 vue/src/layout/store/app.js                   |   4 +-
 vue/src/layout/store/aside.js                 |  18 +-
 vue/src/layout/util.js                        |   2 +-
 .../plugin/canvasAnimation/firework/index.js  |   2 +-
 .../canvasAnimation/godrays/original.js       |   2 +-
 .../canvasAnimation/particleNetwork/index.js  |   2 +-
 vue/src/plugin/live2d/index.js                |   6 +-
 .../router/{guard => guardian}/avoidReuse.js  |   0
 vue/src/router/{guard => guardian}/iframe.js  |   0
 vue/src/router/{guard => guardian}/index.js   |   0
 .../router/{guard => guardian}/nprogress.js   |   0
 .../router/{guard => guardian}/security.js    |   0
 vue/src/router/{guard => guardian}/setInfo.js |   0
 vue/src/router/index.js                       |   4 +-
 vue/src/util/browser.js                       |  95 +++++-----
 vue/src/util/index.js                         |   6 +-
 vue/src/view/app/login/LoginForm.vue          |   6 +-
 vue/src/view/app/login/RegisterForm.vue       |   4 +-
 vue/src/view/message/manage/EditDialog.vue    |   2 +-
 vue/src/view/message/user/indexPage.vue       |   2 +-
 .../department/component/OrgTreeView.vue      |   8 +-
 43 files changed, 427 insertions(+), 286 deletions(-)
 rename vue/src/layout/component/Header/component/TagsView/{ScrollPane.vue => ScrollPanel.vue} (50%)
 rename vue/src/router/{guard => guardian}/avoidReuse.js (100%)
 rename vue/src/router/{guard => guardian}/iframe.js (100%)
 rename vue/src/router/{guard => guardian}/index.js (100%)
 rename vue/src/router/{guard => guardian}/nprogress.js (100%)
 rename vue/src/router/{guard => guardian}/security.js (100%)
 rename vue/src/router/{guard => guardian}/setInfo.js (100%)

diff --git a/vue/element-ui-personal/component/Message/main.vue b/vue/element-ui-personal/component/Message/main.vue
index e4110ae..63298ab 100644
--- a/vue/element-ui-personal/component/Message/main.vue
+++ b/vue/element-ui-personal/component/Message/main.vue
@@ -94,9 +94,7 @@ export default {
                 this.pause = false
                 this.startAt = Date.now()
                 if (this.remainTime === 0) this.remainTime = this.duration
-                this.timer = setTimeout(() => {
-                    !this.closed && this.close()
-                }, this.remainTime)
+                this.timer = window.setTimeout(() => !this.closed && this.close(), this.remainTime)
             }
         }
     },
diff --git a/vue/src/asset/style/element-ui.scss b/vue/src/asset/style/element-ui.scss
index 0c1d826..e8f41b8 100644
--- a/vue/src/asset/style/element-ui.scss
+++ b/vue/src/asset/style/element-ui.scss
@@ -99,17 +99,19 @@
     width: 100%;
 
     &::-webkit-scrollbar {
-        width: 0;
-    }
-
-    //文字超出截断
-    .el-menu-item > span,
-    .el-submenu__title > span {
-        display: inline-block;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        word-break: break-all;
+        display: none;
+    }
+
+    .el-menu-item,
+    .el-submenu__title {
+        //文字超出截断
+        > span {
+            display: inline-block;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            word-break: break-all;
+        }
     }
 
     //子级菜单激活时，父级同样高亮
diff --git a/vue/src/asset/style/index.scss b/vue/src/asset/style/index.scss
index bfb04f5..21c9a5c 100644
--- a/vue/src/asset/style/index.scss
+++ b/vue/src/asset/style/index.scss
@@ -72,10 +72,6 @@ a:hover {
     overflow: hidden !important;
 }
 
-.text-center {
-    text-align: center
-}
-
 .flex {
     display: flex;
     flex-wrap: wrap;
@@ -83,20 +79,37 @@ a:hover {
     align-content: space-between;
 }
 
+/*----------路由页面的最大高度开始----------*/
 .max-view-height {
     height: calc(100vh - #{$page-view-margin * 2});
 }
 
-.has-nav {
-    .max-view-height {
-        height: calc(100vh - #{$nav-height} - #{$page-view-margin * 2});
-    }
+.has-nav .max-view-height {
+    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height});
+}
 
-    &.has-tags-view .max-view-height {
-        height: calc(100vh - #{$nav-height} - #{$tags-view-height} - #{$page-view-margin * 2});
-    }
+.has-tags-view .max-view-height {
+    height: calc(100vh - #{$page-view-margin * 2} - #{$tags-view-height});
+}
+
+.has-page-header .max-view-height {
+    height: calc(100vh - #{$page-view-margin * 2} - #{$page-header-height});
 }
 
+.has-nav.has-tags-view .max-view-height {
+    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height} - #{$tags-view-height});
+}
+
+.has-nav .has-page-header .max-view-height {
+    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height} - #{$page-header-height});
+}
+
+.has-nav.has-tags-view .has-page-header .max-view-height {
+    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height} - #{$tags-view-height} - #{$page-header-height});
+}
+
+/*----------路由页面的最大高度结束----------*/
+
 .table-container {
     margin-top: 10px;
 }
diff --git a/vue/src/asset/style/variables.scss b/vue/src/asset/style/variables.scss
index e6df623..e4103f0 100644
--- a/vue/src/asset/style/variables.scss
+++ b/vue/src/asset/style/variables.scss
@@ -73,6 +73,8 @@ $nav-height: 50px;
 //头部多页签栏高度
 $tags-view-height: 40px;
 
+//页头高度
+$page-header-height: 51px;
 //路由页面的margin
 $page-view-margin: 24px;
 
diff --git a/vue/src/component/Icon/index.vue b/vue/src/component/Icon/index.vue
index 158feb7..cc074a7 100644
--- a/vue/src/component/Icon/index.vue
+++ b/vue/src/component/Icon/index.vue
@@ -1,4 +1,5 @@
 <script type="text/jsx">
+const SVG_PREFIX = 'svg-'
 
 export default {
     name: 'VIcon',
@@ -9,12 +10,12 @@ export default {
 
     render(h, context) {
         const {data, props: {icon}} = context
-        const svgPrefix = 'svg-'
 
-        if (icon.startsWith(svgPrefix)) {
+        //渲染成svg
+        if (icon.startsWith(SVG_PREFIX)) {
             return (
-                <svg class="icon" aria-hidden="true" {...data}>
-                    <use href={`#icon-${icon.replace(svgPrefix, '')}`}/>
+                <svg class="icon svg" aria-hidden="true" {...data}>
+                    <use href={`#icon-${icon.replace(SVG_PREFIX, '')}`}/>
                 </svg>
             )
         }
@@ -28,6 +29,9 @@ export default {
 .icon {
     width: 1em;
     height: 1em;
+}
+
+.icon.svg {
     fill: currentColor;
 }
 </style>
diff --git a/vue/src/component/form/Anchor/index.vue b/vue/src/component/form/Anchor/index.vue
index b9c668f..fc60647 100644
--- a/vue/src/component/form/Anchor/index.vue
+++ b/vue/src/component/form/Anchor/index.vue
@@ -64,16 +64,21 @@ export default {
 
         click(ref) {
             if (!ref || this.animating || !this.reference) return
+
             this.cur = ref
-            const {offsetTop, getContainer} = this
-            const container = getContainer()
-            const scrollTop = getScroll(container, true)
+
             const targetElement = this.getDomFromRef(ref)
             if (!targetElement) return
-            const eleOffsetTop = getOffsetTop(targetElement, container)
-            const y = scrollTop + eleOffsetTop - offsetTop
+
             this.animating = true
-            scrollTo(y, {callback: () => this.animating = false, getContainer})
+
+            const container = this.getContainer()
+            const scrollTop = getScroll(container, true)
+            const elOffsetTop = getOffsetTop(targetElement, container)
+            const y = scrollTop + elOffsetTop - this.offsetTop
+
+            //由于滚动监听函数的防抖阈值是100ms，所以延迟设置滚动标识
+            scrollTo(container, y, {callback: () => window.setTimeout(() => this.animating = false, 110)})
         },
 
         scroll() {
diff --git a/vue/src/component/menu/NavMenu/item.vue b/vue/src/component/menu/NavMenu/item.vue
index 196f4fe..b9feda5 100644
--- a/vue/src/component/menu/NavMenu/item.vue
+++ b/vue/src/component/menu/NavMenu/item.vue
@@ -4,26 +4,31 @@ const MenuItemContent = {
 
     functional: true,
 
-    props: {icon: String, title: String},
+    props: {icon: String, title: String, useTitleAsIcon: Boolean},
 
     render(h, context) {
-        const {icon, title} = context.props
-        const vnodes = []
+        const {icon, title, useTitleAsIcon} = context.props
 
         const iconComponent =
-            icon ? <v-icon icon={icon}/> : <span class="icon" style="display: none"/>
+            useTitleAsIcon
+                ? <em>{title[0]}</em>
+                : icon
+                ? <v-icon icon={icon}/>
+                : <span class="icon" style="display: none"/>
 
-        vnodes.push(iconComponent)
+        const vnodes = [iconComponent]
 
-        if (title) vnodes.push(<span slot="title" class="menu-item-content">{title}</span>)
+        title && vnodes.push(<span slot="title" class="menu-item-content">{title}</span>)
 
         return vnodes
     }
 }
 
 //根据showIconMaxDepth、depth判断是否需要限制图标的显示
-function getIcon(icon, showIconMaxDepth, depth) {
-    if (!showIconMaxDepth || showIconMaxDepth < 0) return icon
+function getIcon({icon, showIconMaxDepth, depth}) {
+    if (!showIconMaxDepth || showIconMaxDepth < 0) {
+        return icon
+    }
     return showIconMaxDepth < depth ? undefined : icon
 }
 
@@ -38,18 +43,20 @@ function getOnlyChild(menu) {
     return null
 }
 
-function renderSingleMenu(h, {index, icon, title}) {
+function renderSingleMenu(h, {index, icon, title, collapse, depth}) {
+    const useTitleAsIcon = depth === 1 && collapse && !!!icon && !!title
     return (
         <el-menu-item key={index} index={index}>
-            <MenuItemContent icon={icon} title={title}/>
+            <MenuItemContent icon={icon} title={title} useTitleAsIcon={useTitleAsIcon}/>
         </el-menu-item>
     )
 }
 
-function renderSubMenu(h, {index, icon, title, children}) {
+function renderSubMenu(h, {index, icon, title, children, collapse, depth}) {
+    const useTitleAsIcon = depth === 1 && collapse && !!!icon && !!title
     return (
         <el-submenu key={index} index={index} popper-append-to-body>
-            <MenuItemContent slot="title" icon={icon} title={title}/>
+            <MenuItemContent slot="title" icon={icon} title={title} useTitleAsIcon={useTitleAsIcon}/>
             {children}
         </el-submenu>
     )
@@ -71,7 +78,13 @@ function renderMenu(h, {menu, showParent, collapse, showIconMaxDepth, depth = 1}
 
     if (showSingle) {
         const {fullPath, meta: {icon, title}} = onlyOneChild
-        return renderSingleMenu(h, {index: fullPath, icon: getIcon(icon, showIconMaxDepth, depth), title})
+        return renderSingleMenu(h, {
+            index: fullPath,
+            icon: getIcon({icon, showIconMaxDepth, depth}),
+            title,
+            collapse,
+            depth
+        })
     }
 
     const {icon, title} = menu.meta
@@ -92,7 +105,14 @@ function renderMenu(h, {menu, showParent, collapse, showIconMaxDepth, depth = 1}
         }
     }
 
-    return renderSubMenu(h, {index: menu.fullPath, icon: getIcon(icon, showIconMaxDepth, depth), title, children})
+    return renderSubMenu(h, {
+        index: menu.fullPath,
+        icon: getIcon({icon, showIconMaxDepth, depth}),
+        title,
+        children,
+        collapse,
+        depth
+    })
 }
 
 export default {
diff --git a/vue/src/globalMethod/Guide/main.vue b/vue/src/globalMethod/Guide/main.vue
index feed439..43c52b6 100644
--- a/vue/src/globalMethod/Guide/main.vue
+++ b/vue/src/globalMethod/Guide/main.vue
@@ -208,7 +208,7 @@ export default {
 
             this.$_setStageStyle(getCalculatedPosition(el))
 
-            setTimeout(() => {
+            window.setTimeout(() => {
                 this.$refs.popover.updatePopper()
                 this.moving = false
             }, 300)
diff --git a/vue/src/globalMethod/Verify/main.vue b/vue/src/globalMethod/Verify/main.vue
index ddfd878..3e82a14 100644
--- a/vue/src/globalMethod/Verify/main.vue
+++ b/vue/src/globalMethod/Verify/main.vue
@@ -285,14 +285,14 @@ export default {
             if (this.moveStartAtX !== null) {
                 const success = maxLeft > distance && distance > minLeft
                 this.stat = success ? 'success' : 'fail'
-                setTimeout(() => {
+                window.setTimeout(() => {
                     this.stat = 'ready'
                     if (!success) return this.initCanvas()
                     this.resolve()
                     this.close()
                 }, success ? 500 : 1000)
             }
-            setTimeout(() => {
+            window.setTimeout(() => {
                 this.sliderStyle.left = '0'
                 this.sliderStyle.transition = "left 0.5s"
             }, 1000)
@@ -302,17 +302,17 @@ export default {
 
         addListener() {
             if (this.image.loading) return
-            document.addEventListener("mousemove", this.moving)
-            document.addEventListener("mouseup", this.moveEnd)
-            document.addEventListener("touchmove", this.moving)
-            document.addEventListener("touchend", this.moveEnd)
+            window.addEventListener("mousemove", this.moving)
+            window.addEventListener("mouseup", this.moveEnd)
+            window.addEventListener("touchmove", this.moving)
+            window.addEventListener("touchend", this.moveEnd)
         },
 
         removeListener() {
-            document.removeEventListener("mousemove", this.moving)
-            document.removeEventListener("mouseup", this.moveEnd)
-            document.addEventListener("touchmove", this.moving)
-            document.addEventListener("touchend", this.moveEnd)
+            window.removeEventListener("mousemove", this.moving)
+            window.removeEventListener("mouseup", this.moveEnd)
+            window.addEventListener("touchmove", this.moving)
+            window.addEventListener("touchend", this.moveEnd)
         },
 
         handleAfterLeave() {
diff --git a/vue/src/layout/component/Aside/index.vue b/vue/src/layout/component/Aside/index.vue
index ac040db..7c33c51 100644
--- a/vue/src/layout/component/Aside/index.vue
+++ b/vue/src/layout/component/Aside/index.vue
@@ -5,6 +5,7 @@ import {getters as asideGetters, mutations as asideMutations} from "@/layout/sto
 import Logo from './Logo'
 import NavMenuItem from '@/component/menu/NavMenu/item'
 import {getSidebarMenus, getActiveMenuByRoute} from "@/layout/util"
+import {getOffsetTop} from "@/util/browser"
 
 export default {
     name: 'Aside',
@@ -21,25 +22,57 @@ export default {
     },
 
     computed: {
-        device: () => appGetters.device,
+        isMobile: () => appGetters.isMobile,
         activeRootMenu: () => appGetters.activeRootMenu,
 
-        //侧边栏的折叠状态，true折叠false展开，仅在pc端可折叠
+        //侧边栏菜单
+        menus: () => getSidebarMenus(),
+
+        //当时移动端或设置了侧边栏自动隐藏时将侧边栏用抽屉包裹
+        renderInDrawer() {
+            return this.isMobile || asideGetters.autoHide
+        },
+
+        //侧边栏的显隐状态，true显示、false隐藏
+        show() {
+            //store中要显示那就显示
+            if (asideGetters.show) return true
+
+            //移动端，false
+            if (this.isMobile) return false
+
+            //未设置侧边栏自动隐藏，false
+            if (!asideGetters.autoHide) return false
+
+            //鼠标在侧边栏内，true
+            if (!this.mouseOutside) return true
+
+            //侧边栏处于折叠状态 且 存在弹出的子菜单，true
+            return this.collapse && this.openedMenus.length > 0
+        },
+
+        //侧边栏的折叠状态，true折叠、false展开，仅在pc端可折叠
         collapse() {
-            return asideGetters.collapse && this.device === 'pc'
+            return asideGetters.collapse && !this.isMobile
         },
 
-        //是否隐藏侧边栏
-        //①设置了侧边栏自动隐藏且鼠标不在侧边栏内且是pc端
-        //②侧边栏处于折叠状态且是移动端
-        hide() {
-            return asideGetters.autoHide && this.mouseOutside && this.device === 'pc'
-                || asideGetters.collapse && this.device === 'mobile'
+        //判断是否需要绑定鼠标移动的事件
+        shouldBindMouseMoveEvent() {
+            //如果是移动端，false
+            if (this.isMobile) return false
+
+            //如果未启用侧边栏自动隐藏，false
+            if (!asideGetters.autoHide) return false
+
+            //侧边栏为打开状态，false
+            if (this.show) return false
+
+            //鼠标在侧边栏外部，true
+            return this.mouseOutside
         }
     },
 
     watch: {
-        //由于elMenu的initOpenedMenu()不会触发select事件，所以手动实现菜单收起
         '$route.path': {
             immediate: true,
             handler(v) {
@@ -55,33 +88,45 @@ export default {
                 //如果侧边栏中没有对应的激活菜单，则收起全部
                 if (!item) return menu.openedMenus = []
 
+                //由于elMenu的initOpenedMenu()不会触发select事件，所以选择手动触发
                 this.onSelect(item.index, item.indexPath, item, false)
+
+                //仅当非抽屉模式下滚动至激活的菜单
+                !this.renderInDrawer && this.$nextTick(this.moveToCurrentMenu)
             }
         },
 
         //切换至移动端时收起侧边栏
-        device: {
+        isMobile: {
             immediate: true,
             handler(v) {
-                v === 'mobile' && asideMutations.close()
+                v && asideMutations.close()
             }
         },
 
-        //顶部菜单改变时重设高亮项
+        //顶部菜单改变时重设高亮项（ele考虑不周，只要菜单被点击就会激活）
         activeRootMenu(v) {
             v && this.resetActiveMenu()
         },
 
-        //设置了侧边栏自动隐藏后，根据状态添加或移除鼠标移动事件
-        hide(v) {
-            if (!asideGetters.autoHide) return
-            const method = `${v ? 'add' : 'remove'}EventListener`
-            document[method]('mousemove', this.moveEvent)
+        //抽屉模式下侧边栏显示时滚动至激活菜单
+        show(v) {
+            v && this.$nextTick(this.moveToCurrentMenu)
+        },
+
+        //添加或移除鼠标移动事件
+        shouldBindMouseMoveEvent(v) {
+            //尝试移除之前可能添加的事件
+            window.removeEventListener('mousemove', this.moveEvent)
+
+            v && window.addEventListener('mousemove', this.moveEvent)
         }
     },
 
     methods: {
+        //开启侧边栏自动隐藏后的鼠标移动事件
         moveEvent(e) {
+            //鼠标移动至屏幕左侧边缘时，标识鼠标在侧边栏内部
             if (e.clientX <= 1) this.mouseOutside = false
         },
 
@@ -95,27 +140,75 @@ export default {
             }
 
             jump && this.actionOnSelectMenu(index)
-        }
-    },
 
-    mounted() {
-        if (asideGetters.autoHide) {
-            document.addEventListener('mousemove', this.moveEvent)
+            //抽屉模式下需要关闭抽屉
+            if (this.renderInDrawer && this.show) {
+                asideMutations.close()
+                this.mouseOutside = true
+            }
+        },
+
+        //滚动至当前激活的菜单
+        moveToCurrentMenu() {
+            const menu = this.$refs.menu, cur = this.activeMenu
+            if (!menu || !cur) return
+
+            const curInstance = menu.items[cur]
+            if (!curInstance) return
+
+            let el = curInstance.$el
+
+            //当侧边栏折叠时，需要滚动至可视区域的元素是激活菜单的最顶层父节点
+            if (this.collapse) {
+                let rootParent = curInstance
+                while (rootParent.$parent.$options.componentName !== 'ElMenu') {
+                    rootParent = rootParent.$parent
+                }
+                el = rootParent.$el
+            }
+
+            /*
+            * 这里考虑了菜单展开时的200ms动画时间
+            * 为什么不分情况讨论？比如当subMenu已经是展开状态时，无需延时滚动
+            * 但这种情况无法判断，因为这时menu.openedMenus已经包含了subMenu，无论subMenu之前是否展开
+            * 所以统一延时300ms
+            * */
+            window.setTimeout(() => this.scrollMenuIntoView(el, menu.$el), 300)
+        },
+
+        //将指定菜单滚动到可视区域内
+        scrollMenuIntoView(el, container) {
+            const {scrollTop, scrollHeight, offsetHeight: menuHeight} = container
+
+            //当菜单高度不足以滚动时跳过
+            if (scrollHeight <= menuHeight) return
+
+            const elHeight = el.offsetHeight, between = getOffsetTop(el, container)
+
+            //计算需要滚动的距离，undefined说明不需要滚动
+            let distance
+
+            if (between < 0) distance = between
+            else if (between + elHeight > menuHeight) {
+                distance = between + elHeight - menuHeight
+            }
+
+            if (distance !== undefined) {
+                container.scrollTo({top: scrollTop + distance, behavior: 'smooth'})
+            }
         }
+    },
 
-        this.$once('hook:beforeDestroy', () => {
-            document.removeEventListener('mousemove', this.moveEvent)
-        })
+    beforeDestroy() {
+        window.removeEventListener('mousemove', this.moveEvent)
     },
 
     render() {
-        const menus = getSidebarMenus()
-        if (menus.length <= 0) return
+        if (this.menus.length <= 0) return
 
         const aside = (
             <aside
                 class={{'aside': true, 'collapse': this.collapse}}
-                on-mouseenter={() => this.mouseOutside = false}
                 on-mouseleave={() => this.mouseOutside = true}
             >
                 {asideGetters.showLogo && <logo collapse={this.collapse}/>}
@@ -126,9 +219,9 @@ export default {
                     collapse-transition={false}
                     default-active={this.activeMenu}
                     unique-opened={asideGetters.uniqueOpen}
-                    on-select={this.onSelect}
+                    on={{'select': this.onSelect, 'hook:mounted': this.watchOpenedMenus}}
                 >
-                    {menus.map(m => (
+                    {this.menus.map(m => (
                         <nav-menu-item
                             menu={m}
                             show-parent={asideGetters.showParentOnCollapse}
@@ -140,13 +233,10 @@ export default {
             </aside>
         )
 
-        //当是移动端 或 设置了侧边栏自动隐藏时，渲染成抽屉
-        const renderInDrawer = this.device === 'mobile' || asideGetters.autoHide
-
-        if (renderInDrawer) {
+        if (this.renderInDrawer) {
             return (
                 <el-drawer
-                    visible={asideGetters.show}
+                    visible={this.show}
                     with-header={false}
                     direction="ltr"
                     size="auto"
diff --git a/vue/src/layout/component/Aside/style.scss b/vue/src/layout/component/Aside/style.scss
index 5294d22..32e146e 100644
--- a/vue/src/layout/component/Aside/style.scss
+++ b/vue/src/layout/component/Aside/style.scss
@@ -18,7 +18,7 @@
         width: $aside-icon-size + 20px * 2;
     }
 
-    .sidebar-logo-container {
+    > .sidebar-logo-container {
         position: relative;
         width: 100%;
         height: $nav-height;
@@ -54,21 +54,16 @@
             }
         }
     }
+}
 
-    .el-scrollbar {
-        flex: 1;
-
-        &__wrap {
-            overflow-x: hidden;
-        }
-    }
+/*-------侧边栏垂直菜单开始---------*/
+.el-menu--vertical.el-menu {
+    overflow-y: auto;
 }
 
-//侧边栏垂直菜单
 .el-menu--vertical .el-menu,
 .el-menu--vertical.el-menu {
     background-color: $aside-menu-background;
-    overflow-y: auto;
 
     .icon {
         font-size: $aside-icon-size;
@@ -87,7 +82,8 @@
             color: $aside-menu-item-hover-color;
         }
 
-        > span {
+        //菜单文字的最大宽度
+        > .menu-item-content {
             //侧边栏宽度、菜单左右padding、左侧图标宽度、距离左右的距离、右侧图标宽度
             max-width: $aside-width - 20px * 2 - $aside-icon-size - $menu-icon-text-gap * 2 - 12px;
         }
@@ -111,7 +107,4 @@
         border-bottom: 1px solid $aside-sub-menu-background;
     }
 }
-
-
-
-
+/*-------侧边栏垂直菜单结束---------*/
diff --git a/vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue b/vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue
index 03aedaf..3b2312e 100644
--- a/vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue
+++ b/vue/src/layout/component/Header/component/Navbar/component/HeadMenu.vue
@@ -32,7 +32,7 @@ export default {
         navMode: () => appGetters.navMode,
 
         menus() {
-            if (appGetters.device === 'mobile') return []
+            if (appGetters.isMobile) return []
             switch (this.navMode) {
                 case 'aside':
                     return []
diff --git a/vue/src/layout/component/Header/component/Navbar/component/SettingDrawer.vue b/vue/src/layout/component/Header/component/Navbar/component/SettingDrawer.vue
index bbbf07c..990b921 100644
--- a/vue/src/layout/component/Header/component/Navbar/component/SettingDrawer.vue
+++ b/vue/src/layout/component/Header/component/Navbar/component/SettingDrawer.vue
@@ -142,11 +142,10 @@ export default {
             asideMutations.collapse(aside.collapse)
             asideMutations.showParentOnCollapse(aside.showParentOnCollapse)
             asideMutations.autoHide(aside.autoHide)
-
         },
         //将layout中的store数据同步到此处的设置项
         syncLayoutStore() {
-            const {app, page, aside, other} = this.setting
+            const {app, page, aside} = this.setting
             app.color = appGetters.color
             app.navMode = appGetters.navMode
 
@@ -211,7 +210,7 @@ export default {
         }
     },
 
-    mounted() {
+    created() {
         mergeObj(this.setting, getLocalPersonalSettings())
 
         //由于数据结构可能发生变化，所以在合并后覆盖本地数据
diff --git a/vue/src/layout/component/Header/component/Navbar/index.vue b/vue/src/layout/component/Header/component/Navbar/index.vue
index 7f249a8..71e04f7 100644
--- a/vue/src/layout/component/Header/component/Navbar/index.vue
+++ b/vue/src/layout/component/Header/component/Navbar/index.vue
@@ -48,7 +48,7 @@ export default {
             //③桌面端且非顶部导航
             //④桌面端且未设置侧边栏自动隐藏
             const hasSidebarMenus = getSidebarMenus().length > 0,
-                isMobile = appGetters.device === 'mobile',
+                isMobile = appGetters.isMobile,
                 notHeadMode = appGetters.navMode !== 'head',
                 notAutoHidden = !asideGetters.autoHide,
                 renderHamburger = hasSidebarMenus && (isMobile || notHeadMode && notAutoHidden)
@@ -59,7 +59,7 @@ export default {
             }
         },
         renderHeadMenuMenu() {
-            if (appGetters.navMode !== 'aside' && appGetters.device !== 'mobile') {
+            if (appGetters.navMode !== 'aside' && !appGetters.isMobile) {
                 return <head-menu always-show/>
             }
         },
diff --git a/vue/src/layout/component/Header/component/TagsView/ScrollPane.vue b/vue/src/layout/component/Header/component/TagsView/ScrollPanel.vue
similarity index 50%
rename from vue/src/layout/component/Header/component/TagsView/ScrollPane.vue
rename to vue/src/layout/component/Header/component/TagsView/ScrollPanel.vue
index 789cda3..daa7010 100644
--- a/vue/src/layout/component/Header/component/TagsView/ScrollPane.vue
+++ b/vue/src/layout/component/Header/component/TagsView/ScrollPanel.vue
@@ -1,23 +1,23 @@
 <template>
-    <el-scrollbar ref="scrollContainer" native noresize @wheel.native.prevent="handleScroll">
+    <div class="tags-view-wrapper" @wheel="handleScroll">
         <slot/>
-    </el-scrollbar>
+    </div>
 </template>
 
 <script>
-const tagAndTagSpacing = 4
+import {scrollTo} from "@/util/browser"
 
 export default {
-    name: 'ScrollPane',
+    name: 'ScrollPanel',
 
-    methods: {
-        getWrapper() {
-            return this.$refs.scrollContainer.$refs.wrap
-        },
+    props: {
+        between: {type: Number, default: 4}
+    },
 
+    methods: {
         handleScroll(e) {
             const eventDelta = e.wheelDelta || -(e.detail || 0) * 40
-            const {scrollLeft, scrollWidth, clientWidth} = this.getWrapper()
+            const {scrollLeft, scrollWidth, clientWidth} = this.$el
             if (eventDelta > 0 && scrollLeft === 0
                 || eventDelta < 0 && scrollWidth <= scrollLeft + clientWidth) {
                 return
@@ -25,18 +25,25 @@ export default {
             this.smoothScroll(-eventDelta * 2)
         },
 
-        moveToTarget(currentTag) {
-            const $containerWidth = this.$refs.scrollContainer.$el.offsetWidth
-            const {scrollWidth, scrollLeft} = this.getWrapper()
-            const tagList = this.$parent.getTags()
+        smoothScroll(val) {
+            if (this.rAF) {
+                window.cancelAnimationFrame(this.rAF)
+                this.rAf = null
+            }
+
+            this.rAf = scrollTo(this.$el, this.$el.scrollLeft + val, {direction: 'left'})
+        },
+
+        moveToTarget(currentTag, tagInstances) {
+            const {offsetWidth: $containerWidth, scrollWidth, scrollLeft} = this.$el
 
             let firstTag = null
             let lastTag = null
 
             // find first tag and last tag
-            if (tagList.length > 0) {
-                firstTag = tagList[0]
-                lastTag = tagList[tagList.length - 1]
+            if (tagInstances.length > 0) {
+                firstTag = tagInstances[0]
+                lastTag = tagInstances[tagInstances.length - 1]
             }
 
             if (firstTag === currentTag) {
@@ -47,15 +54,15 @@ export default {
             }
             else {
                 // find preTag and nextTag
-                const currentIndex = tagList.findIndex(item => item === currentTag)
-                const prevTag = tagList[currentIndex - 1]
-                const nextTag = tagList[currentIndex + 1]
+                const currentIndex = tagInstances.findIndex(item => item === currentTag)
+                const prevTag = tagInstances[currentIndex - 1]
+                const nextTag = tagInstances[currentIndex + 1]
 
                 // the tag's offsetLeft after of nextTag
-                const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+                const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + this.between
 
                 // the tag's offsetLeft before of prevTag
-                const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+                const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - this.between
 
                 if (afterNextTagOffsetLeft > scrollLeft + $containerWidth) {
                     this.scrollLeft(afterNextTagOffsetLeft - $containerWidth)
@@ -67,25 +74,7 @@ export default {
         },
 
         scrollLeft(val) {
-            this.getWrapper().scrollTo({
-                left: val,
-                behavior: 'smooth'
-            })
-        },
-
-        //在300ms内完成滚动
-        smoothScroll(val) {
-            if (this.rAF) window.cancelAnimationFrame(this.rAF)
-            let cost = 300, times = cost / 16, gap = val / times + 1
-            const frameFunc = () => {
-                if (times > 0) {
-                    this.getWrapper().scrollLeft += gap
-                    this.rAF = window.requestAnimationFrame(frameFunc)
-                    times--
-                }
-                else window.cancelAnimationFrame(this.rAF)
-            }
-            frameFunc()
+            this.$el.scrollTo({left: val, behavior: 'smooth'})
         }
     }
 }
diff --git a/vue/src/layout/component/Header/component/TagsView/index.vue b/vue/src/layout/component/Header/component/TagsView/index.vue
index 024a361..5d18ef8 100644
--- a/vue/src/layout/component/Header/component/TagsView/index.vue
+++ b/vue/src/layout/component/Header/component/TagsView/index.vue
@@ -5,12 +5,12 @@ import {route as routeConfig} from '@/config'
 import {getters as appGetters} from "@/layout/store/app"
 import {getters as tagsViewGetters, mutations as tagsViewMutations} from "@/layout/store/tagsView"
 import ContextMenu from "@/component/menu/ContextMenu"
-import ScrollPane from './ScrollPane'
+import ScrollPanel from './ScrollPanel'
 
 export default {
     mixins: [shortcutMixin, decideRouterTransitionMixin],
 
-    components: {ContextMenu, ScrollPane},
+    components: {ContextMenu, ScrollPanel},
 
     data() {
         return {
@@ -34,39 +34,43 @@ export default {
         $route(to, from) {
             this.decideRouteTransition && this.decideRouteTransition(to, from)
             this.addTags(to)
-            this.moveToCurrentTag()
+            this.$nextTick(this.moveToCurrentTag)
         }
     },
 
     methods: {
-        isActive(route) {
-            return route.path === this.$route.path
+        //判断页签是否激活，考虑刷新的情况
+        isActive({path}) {
+            const {path: routePath} = this.$route
+            return routePath === path || routePath === `/redirect${path}`
         },
         isAffix(tag) {
             return tag.meta && tag.meta.affix
         },
 
-        filterAffixTags(menus) {
-            const tags = []
-            menus.forEach(({name, fullPath, children, meta}) => {
-                if (meta && meta.title && meta.affix) {
-                    tags.push({
-                        //注意，此处的fullPath并不是$route.fullPath，而是路由树拼接后的全路径
-                        fullPath,
-                        path: fullPath,
-                        name,
-                        meta: {...meta}
-                    })
-                }
-                if (children) {
-                    const tempTags = this.filterAffixTags(children)
-                    tempTags.length && tags.push(...tempTags)
-                }
-            })
-            return tags
-        },
         initTags() {
-            this.affixTags = this.filterAffixTags(this.menus)
+            //获取所有需要固定显示的页签
+            function getAffixTags(menus) {
+                const tags = []
+                menus.forEach(({name, fullPath, children, meta}) => {
+                    if (meta && meta.title && meta.affix) {
+                        tags.push({
+                            //注意，此处的fullPath并不是$route.fullPath，而是路由树拼接后的全路径
+                            fullPath,
+                            path: fullPath,
+                            name,
+                            meta: {...meta}
+                        })
+                    }
+                    if (children) {
+                        const tempTags = getAffixTags(children)
+                        tempTags.length && tags.push(...tempTags)
+                    }
+                })
+                return tags
+            }
+
+            this.affixTags = getAffixTags(this.menus)
             for (const tag of this.affixTags) {
                 tagsViewMutations.addVisitedView(tag)
             }
@@ -76,16 +80,13 @@ export default {
         addTags(to = this.$route) {
             to.meta.title && tagsViewMutations.addView(to)
         },
-        getTags() {
-            return this.$refs.scrollPane.$children[0].$children
-        },
 
         //横向滚动条移动至当前tab
         moveToCurrentTag() {
-            this.$nextTick(() => {
-                const tag = this.getTags().find(i => i.to.path === this.$route.path)
-                tag && this.$refs.scrollPane.moveToTarget(tag)
-            })
+            //获取所有页签的componentInstance
+            const tagInstances = this.$refs.scrollPanel.$children
+            const tag = tagInstances.find(i => this.isActive(i.to))
+            tag && this.$refs.scrollPanel.moveToTarget(tag, tagInstances)
         },
 
         /*
@@ -155,7 +156,7 @@ export default {
                         key={path}
                         class={{'tags-view-item': true, active}}
                         to={{path, query, fullPath}}
-                        tag="div"
+                        tag="a"
                         v-on:contextmenu_native={e => this.openMenu(tag, e)}
                         v-on:dblclick_native={e => closeSelectedTag(e, tag)}
                     >
@@ -196,9 +197,9 @@ export default {
     render(h) {
         return (
             <nav class="tags-view-container">
-                <scroll-pane ref="scrollPane" class="tags-view-wrapper">
+                <scroll-panel ref="scrollPanel" class="tags-view-wrapper">
                     {this.renderTags(h)}
-                </scroll-pane>
+                </scroll-panel>
                 {this.renderContextMenu(h)}
             </nav>
         )
diff --git a/vue/src/layout/component/Header/component/TagsView/style.scss b/vue/src/layout/component/Header/component/TagsView/style.scss
index f901ea5..2c53bdc 100644
--- a/vue/src/layout/component/Header/component/TagsView/style.scss
+++ b/vue/src/layout/component/Header/component/TagsView/style.scss
@@ -7,8 +7,14 @@
     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 {
+            display: none;
+        }
 
         .tags-view-item {
             display: inline-block;
@@ -68,9 +74,5 @@
                 }
             }
         }
-
-        .el-scrollbar__wrap {
-            height: 57px;
-        }
     }
 }
diff --git a/vue/src/layout/component/Page/component/PageFooter.vue b/vue/src/layout/component/Page/component/PageFooter.vue
index 6229db6..caf3a88 100644
--- a/vue/src/layout/component/Page/component/PageFooter.vue
+++ b/vue/src/layout/component/Page/component/PageFooter.vue
@@ -13,8 +13,10 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~@/asset/style/variables.scss";
+
 .page-footer {
-    padding: 48px 24px 24px 24px;
+    padding: 48px $page-view-margin $page-view-margin $page-view-margin;
     text-align: center;
 
     .copyright {
diff --git a/vue/src/layout/component/Page/component/PageHeader.vue b/vue/src/layout/component/Page/component/PageHeader.vue
index b40c8e3..6841222 100644
--- a/vue/src/layout/component/Page/component/PageHeader.vue
+++ b/vue/src/layout/component/Page/component/PageHeader.vue
@@ -21,8 +21,8 @@ export default {
             immediate: true,
             handler(to) {
                 const {path, meta: {title}, matched} = to
-                this.title = title
                 if (!path.startsWith('/redirect')) {
+                    this.title = title
                     this.data = matched.filter(item => item.meta.title)
                 }
             }
@@ -32,13 +32,16 @@ export default {
 </script>
 
 <style lang="scss">
+@import "~@/asset/style/variables.scss";
+
 .page-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: nowrap;
+    height: $page-header-height;
     font-size: 14px;
-    padding: 16px 24px 0 24px;
+    padding: 16px $page-view-margin 0 $page-view-margin;
 
     > .el-breadcrumb .no-redirect {
         color: #909399;
diff --git a/vue/src/layout/component/Page/index.vue b/vue/src/layout/component/Page/index.vue
index cdd0f0e..c9ab816 100644
--- a/vue/src/layout/component/Page/index.vue
+++ b/vue/src/layout/component/Page/index.vue
@@ -14,10 +14,11 @@ export default {
     methods: {
         renderPage() {
             const render = pageGetters.showPageHeader && this.$route.meta.pageHeader !== false
+            const className = {'scroll-container': true, 'has-page-header': render}
             const {cachedViews, transitionName} = tagsViewGetters
 
             return (
-                <div v-show={!pageGetters.showIframe} class="scroll-container">
+                <div v-show={!pageGetters.showIframe} class={className}>
                     {render && <page-header/>}
                     <page-view include={cachedViews} transition-name={transitionName}/>
                     <page-footer/>
diff --git a/vue/src/layout/index.vue b/vue/src/layout/index.vue
index edf5df6..2e78645 100644
--- a/vue/src/layout/index.vue
+++ b/vue/src/layout/index.vue
@@ -26,8 +26,7 @@ export default {
     methods: {
         $_resizeHandler() {
             if (!document.hidden) {
-                const mobile = isMobile()
-                appMutations.device(mobile ? 'mobile' : 'pc')
+                appMutations.isMobile(isMobile())
             }
         }
     },
@@ -44,7 +43,7 @@ export default {
     },
 
     render() {
-        const renderAide = appGetters.device === 'mobile' || appGetters.navMode !== 'head'
+        const renderAide = appGetters.isMobile || appGetters.navMode !== 'head'
         return (
             <section class="app-wrapper">
                 {renderAide && <v-aside/>}
diff --git a/vue/src/layout/mixin/menu.js b/vue/src/layout/mixin/menu.js
index 5332f21..8833fb6 100644
--- a/vue/src/layout/mixin/menu.js
+++ b/vue/src/layout/mixin/menu.js
@@ -8,7 +8,10 @@ export default {
     data() {
         return {
             //当前激活的菜单的fullPath
-            activeMenu: ''
+            activeMenu: '',
+
+            //el-menu的openedMenus
+            openedMenus: []
         }
     },
 
@@ -40,6 +43,22 @@ export default {
             //所以手动更新el-menu的当前高亮菜单
             const menu = this.$refs.menu
             menu && menu.updateActiveIndex()
+        },
+
+        //渲染el-menu时监听其展开菜单
+        watchOpenedMenus() {
+            //尝试取消之前设置的监听
+            if (this.watchOpenedMenusCallback) {
+                this.watchOpenedMenusCallback()
+                this.watchOpenedMenusCallback = null
+            }
+
+            const menu = this.$refs.menu
+            if (!menu) return
+
+            this.watchOpenedMenusCallback = menu.$watch('openedMenus', v => {
+                this.openedMenus = [...v]
+            })
         }
     }
 }
diff --git a/vue/src/layout/store/app.js b/vue/src/layout/store/app.js
index 1fa7839..a3f3442 100644
--- a/vue/src/layout/store/app.js
+++ b/vue/src/layout/store/app.js
@@ -4,8 +4,8 @@ import {isMobile} from "@/util/browser"
 import {createGetters, createMutations} from "@/util/observable"
 
 const state = {
-    //区分pc和移动端（mobile）
-    device: isMobile() ? 'mobile' : 'pc',
+    //区分pc和移动端
+    isMobile: isMobile(),
 
     //当前激活的顶部菜单的fullPath
     activeRootMenu: '',
diff --git a/vue/src/layout/store/aside.js b/vue/src/layout/store/aside.js
index 3c7587d..3e129f4 100644
--- a/vue/src/layout/store/aside.js
+++ b/vue/src/layout/store/aside.js
@@ -33,25 +33,15 @@ export const getters = createGetters(store)
 export const mutations = bindThis({
     ...createMutations(store),
 
-    /*折叠和自动隐藏不能同时启用*/
-    collapse(v) {
-        if (v) store.autoHide = false
-        store.collapse = v
-    },
-    autoHide(v) {
-        if (v) store.collapse = false
-        store.autoHide = v
-    },
-
-    /*移动端是打开关闭抽屉，桌面端是展开折叠*/
+    /*移动端或设置了侧边栏自动隐藏时打开关闭抽屉，否则展开折叠*/
     open() {
-        if (appGetters.device === 'mobile') {
+        if (appGetters.isMobile || store.autoHide) {
             store.show = true
         }
         else store.collapse = false
     },
     close() {
-        if (appGetters.device === 'mobile') {
+        if (appGetters.isMobile || store.autoHide) {
             store.show = false
         }
         else store.collapse = true
@@ -65,7 +55,7 @@ export const mutations = bindThis({
                 return this.close()
             default :
                 let open = true
-                if (appGetters.device === 'mobile') {
+                if (appGetters.isMobile) {
                     open = !store.show
                 }
                 else open = store.collapse
diff --git a/vue/src/layout/util.js b/vue/src/layout/util.js
index 905885f..60b383a 100644
--- a/vue/src/layout/util.js
+++ b/vue/src/layout/util.js
@@ -12,7 +12,7 @@ export function getSidebarMenus() {
     if (!Array.isArray(menus)) {
         return []
     }
-    if (appGetters.device === 'mobile') {
+    if (appGetters.isMobile) {
         return menus
     }
     switch (appGetters.navMode) {
diff --git a/vue/src/plugin/canvasAnimation/firework/index.js b/vue/src/plugin/canvasAnimation/firework/index.js
index f224e9d..199485f 100644
--- a/vue/src/plugin/canvasAnimation/firework/index.js
+++ b/vue/src/plugin/canvasAnimation/firework/index.js
@@ -81,7 +81,7 @@ export default class Firework {
     start() {
         this.resizeObserver = new ResizeObserver(() => this.resize())
         this.resizeObserver.observe(this.canvas)
-        document.addEventListener('click', this.addRocket)
+        window.addEventListener('click', this.addRocket)
         this.timer = window.setInterval(this.addRocket, 1000)
         this.resize()
         this.loop()
diff --git a/vue/src/plugin/canvasAnimation/godrays/original.js b/vue/src/plugin/canvasAnimation/godrays/original.js
index 203405f..1ccd732 100644
--- a/vue/src/plugin/canvasAnimation/godrays/original.js
+++ b/vue/src/plugin/canvasAnimation/godrays/original.js
@@ -10,7 +10,7 @@
 //    Readable (more or less) version of the code
 //    ...
 
-document.addEventListener("DOMContentLoaded", go)
+window.addEventListener("DOMContentLoaded", go)
 
 function go() {
     "use strict"
diff --git a/vue/src/plugin/canvasAnimation/particleNetwork/index.js b/vue/src/plugin/canvasAnimation/particleNetwork/index.js
index a590df9..43483f3 100644
--- a/vue/src/plugin/canvasAnimation/particleNetwork/index.js
+++ b/vue/src/plugin/canvasAnimation/particleNetwork/index.js
@@ -150,7 +150,7 @@ export default class ParticleNetwork {
 
         this.onTouchStart = function (e) {
             e.preventDefault()
-            setTimeout(function () {
+            window.setTimeout(function () {
                 if (!this.touchIsMoving) {
                     for (let i = 0; i < this.spawnQuantity; i++) {
                         this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY))
diff --git a/vue/src/plugin/live2d/index.js b/vue/src/plugin/live2d/index.js
index 3317b59..491808e 100644
--- a/vue/src/plugin/live2d/index.js
+++ b/vue/src/plugin/live2d/index.js
@@ -56,7 +56,7 @@ export default class Waifu {
             `
         )
 
-        setTimeout(() => document.getElementById("waifu").style.bottom = '0', 0)
+        window.setTimeout(() => document.getElementById("waifu").style.bottom = '0', 0)
     }
 
     addEventListener() {
@@ -190,7 +190,7 @@ export default class Waifu {
 
                 this.showMessage(result.hitokoto, 6000, 9)
 
-                setTimeout(() => this.showMessage(text, 4000, 9), 6000)
+                window.setTimeout(() => this.showMessage(text, 4000, 9), 6000)
             })
     }
 
@@ -286,6 +286,6 @@ export default class Waifu {
         const dom = document.getElementById("waifu")
         dom.style.bottom = "-500px"
 
-        setTimeout(() => dom.remove && dom.remove(), 3000)
+        window.setTimeout(() => dom.remove && dom.remove(), 3000)
     }
 }
diff --git a/vue/src/router/guard/avoidReuse.js b/vue/src/router/guardian/avoidReuse.js
similarity index 100%
rename from vue/src/router/guard/avoidReuse.js
rename to vue/src/router/guardian/avoidReuse.js
diff --git a/vue/src/router/guard/iframe.js b/vue/src/router/guardian/iframe.js
similarity index 100%
rename from vue/src/router/guard/iframe.js
rename to vue/src/router/guardian/iframe.js
diff --git a/vue/src/router/guard/index.js b/vue/src/router/guardian/index.js
similarity index 100%
rename from vue/src/router/guard/index.js
rename to vue/src/router/guardian/index.js
diff --git a/vue/src/router/guard/nprogress.js b/vue/src/router/guardian/nprogress.js
similarity index 100%
rename from vue/src/router/guard/nprogress.js
rename to vue/src/router/guardian/nprogress.js
diff --git a/vue/src/router/guard/security.js b/vue/src/router/guardian/security.js
similarity index 100%
rename from vue/src/router/guard/security.js
rename to vue/src/router/guardian/security.js
diff --git a/vue/src/router/guard/setInfo.js b/vue/src/router/guardian/setInfo.js
similarity index 100%
rename from vue/src/router/guard/setInfo.js
rename to vue/src/router/guardian/setInfo.js
diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index ae58d31..3b4da3b 100644
--- a/vue/src/router/index.js
+++ b/vue/src/router/index.js
@@ -16,7 +16,7 @@ import Router from 'vue-router'
 import {route as routeConfig} from '@/config'
 import {stringifyRoutes, parseRoutes, generateRoutes} from './util'
 import defaultRoutes from './define'
-import registerGuard from './guard'
+import registerGuardian from './guardian'
 
 Vue.use(Router)
 
@@ -27,7 +27,7 @@ const router = new Router({
     routes: defaultRoutes
 })
 
-registerGuard(router)
+registerGuardian(router)
 
 export default router
 
diff --git a/vue/src/util/browser.js b/vue/src/util/browser.js
index 7b3f335..3328276 100644
--- a/vue/src/util/browser.js
+++ b/vue/src/util/browser.js
@@ -1,23 +1,25 @@
-const {body} = document
-const MAX_MOBILE_WIDTH = 500
-
+//根据body宽度判断是否为移动端，是则返回true
 export function isMobile() {
-    const rect = body.getBoundingClientRect()
-    return rect.width - 1 < MAX_MOBILE_WIDTH
+    const rect = document.body.getBoundingClientRect()
+    return rect.width < 501
+}
+
+export function isDom(obj) {
+    return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string'
 }
 
-//获取元素的内宽度
 export function getElementInnerWidth(ele) {
     if (!ele) return 0
 
     const style = window.getComputedStyle(ele)
+
     return parseFloat(style.width) - (parseFloat(style.paddingLeft) + parseFloat(style.paddingRight))
 }
 
 export function getElementHeight(ele, style) {
     if (!ele) return 0
 
-    let node = ele.cloneNode(true)
+    const node = ele.cloneNode(true)
     node.style.opacity = '0'
 
     if (style) {
@@ -36,6 +38,7 @@ export function getElementHeight(ele, style) {
     return height
 }
 
+//获取元素距离其容器的顶部距离
 export function getOffsetTop(element, container) {
     if (!element) return 0
 
@@ -57,11 +60,10 @@ export function getOffsetTop(element, container) {
 }
 
 /**
- * 加载js或css
- *
+ * @desc 加载js或css
  * @param url
  * @param type js|css
- * @returns {Promise<String>} url
+ * @returns {Promise<String>} 加载成功返回url（若资源此前已加载，返回undefined）
  */
 export function loadExternalResource(url, type = 'js') {
     return new Promise((resolve, reject) => {
@@ -92,45 +94,52 @@ export function loadExternalResource(url, type = 'js') {
     })
 }
 
-export function scrollTo(y, options = {}) {
-    const raf = window.requestAnimationFrame
-    const {getContainer = () => window, callback, duration = 450} = options
+/**
+ * @desc 平滑滚动至指定的位置
+ * @param el 滚动容器，或可用于querySelector的字符串，或一个返回DOM的函数
+ * @param position 滚动的目的地
+ * @param options
+ */
+export function scrollTo(el, position, options) {
+    const {
+        callback,          //滚动完成的回调
+        duration = 300,    //滚动耗时
+        direction = 'top'  //滚动方向，top滚动至距元素顶部distance的位置，left滚动至距元素左边distance的位置
+    } = options || {}
+
+    if (typeof el === 'string') el = document.querySelector(el)
+    else if (typeof el === 'function') el = el()
+
+    if (!isDom(el)) return
+
+    const elPosition = getScroll(el, direction === 'top')
+    const scrollFunc = ((el, direction) => {
+        if (el === window) {
+            return direction === 'top'
+                ? y => el.scrollTo(window.pageXOffset, window.pageYOffset + y)
+                : x => el.scrollTo(window.pageXOffset + x, window.pageYOffset)
+        }
+        return direction === 'top'
+            ? y => el.scrollTop += y
+            : x => el.scrollLeft += x
+    })(el, direction)
 
-    const container = getContainer()
-    const scrollTop = getScroll(container, true)
-    const startTime = Date.now()
+    let times = duration / 16, distance = (position - elPosition) / (times + 1)
 
     const frameFunc = () => {
-        const timestamp = Date.now()
-        const time = timestamp - startTime
-        const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration)
-        if (container === window) {
-            container.scrollTo(window.pageXOffset, nextScrollTop)
-        }
-        else {
-            container.scrollTop = nextScrollTop
-        }
-        if (time < duration) {
-            raf(frameFunc)
-        }
-        else if (typeof callback === 'function') {
-            callback()
+        if (times > 0) {
+            scrollFunc(distance)
+            times--
+            return window.requestAnimationFrame(frameFunc)
         }
+        typeof callback === 'function' && callback()
     }
-    raf(frameFunc)
-}
 
-export function getScroll(target, top) {
-    const prop = top ? 'pageYOffset' : 'pageXOffset'
-    const method = top ? 'scrollTop' : 'scrollLeft'
-    return target === window ? target[prop] : target[method]
+    return window.requestAnimationFrame(frameFunc)
 }
 
-export function easeInOutCubic(t, b, c, d) {
-    const cc = c - b
-    t /= d / 2
-    if (t < 1) {
-        return (cc / 2) * t * t * t + b
-    }
-    return (cc / 2) * ((t -= 2) * t * t + 2) + b
+export function getScroll(el, top) {
+    return el === window
+        ? el[top ? 'pageYOffset' : 'pageXOffset']
+        : el[top ? 'scrollTop' : 'scrollLeft']
 }
diff --git a/vue/src/util/index.js b/vue/src/util/index.js
index 9c704a0..75cd548 100644
--- a/vue/src/util/index.js
+++ b/vue/src/util/index.js
@@ -96,7 +96,7 @@ export function debounce(func, wait = 100, immediate = false) {
 
         // 上次被包装函数被调用时间间隔 last 小于设定时间间隔 wait
         if (last < wait && last > 0) {
-            timeout = setTimeout(later, wait - last)
+            timeout = window.setTimeout(later, wait - last)
         }
         else {
             timeout = null
@@ -114,7 +114,7 @@ export function debounce(func, wait = 100, immediate = false) {
         timestamp = new Date().getTime()
         const callNow = immediate && !timeout
         // 如果延时不存在，重新设定延时
-        if (!timeout) timeout = setTimeout(later, wait)
+        if (!timeout) timeout = window.setTimeout(later, wait)
         if (callNow) {
             result = func.apply(context, args)
             context = args = null
@@ -141,7 +141,7 @@ export function throttle(func, delay = 100) {
         clearTimeout(timeoutID)
 
         if (elapsed > delay) exec()
-        else timeoutID = setTimeout(exec, delay - elapsed)
+        else timeoutID = window.setTimeout(exec, delay - elapsed)
     }
 
     return wrapper
diff --git a/vue/src/view/app/login/LoginForm.vue b/vue/src/view/app/login/LoginForm.vue
index 85b0fb8..cf755ae 100644
--- a/vue/src/view/app/login/LoginForm.vue
+++ b/vue/src/view/app/login/LoginForm.vue
@@ -107,7 +107,7 @@ export default {
             elSuccess('登陆成功')
             const redirect = this.$route.query.redirect || '/'
             //由于清除消息时会造成卡顿，所以延迟0.2s跳转
-            setTimeout(() => this.$router.replace(redirect), 200)
+            window.setTimeout(() => this.$router.replace(redirect), 200)
         },
 
         thirdPartyLogin(channel) {
@@ -119,11 +119,11 @@ export default {
         },
 
         addCapsLockEvent() {
-            document.addEventListener('keyup', this.capsLockTip)
+            window.addEventListener('keyup', this.capsLockTip)
         },
 
         removeEvent() {
-            document.removeEventListener('keyup', this.addCapsLockEvent)
+            window.removeEventListener('keyup', this.addCapsLockEvent)
         }
     },
 
diff --git a/vue/src/view/app/login/RegisterForm.vue b/vue/src/view/app/login/RegisterForm.vue
index 9ee345a..4bcc850 100644
--- a/vue/src/view/app/login/RegisterForm.vue
+++ b/vue/src/view/app/login/RegisterForm.vue
@@ -136,11 +136,11 @@ export default {
         },
 
         addEvent() {
-            document.addEventListener('keyup', this.capsLockTip)
+            window.addEventListener('keyup', this.capsLockTip)
         },
 
         removeEvent() {
-            document.removeEventListener('keyup', this.addCapsLockEvent)
+            window.removeEventListener('keyup', this.addCapsLockEvent)
         }
     },
 
diff --git a/vue/src/view/message/manage/EditDialog.vue b/vue/src/view/message/manage/EditDialog.vue
index 838ca24..ea14ba4 100644
--- a/vue/src/view/message/manage/EditDialog.vue
+++ b/vue/src/view/message/manage/EditDialog.vue
@@ -152,7 +152,7 @@ export default {
             this.closeDialog()
             this.needSearch && this.$emit('search')
 
-            setTimeout(() => this.clearForm(), 200)
+            window.setTimeout(() => this.clearForm(), 200)
             this.loading = false
         },
 
diff --git a/vue/src/view/message/user/indexPage.vue b/vue/src/view/message/user/indexPage.vue
index 6c701b1..eebcfa7 100644
--- a/vue/src/view/message/user/indexPage.vue
+++ b/vue/src/view/message/user/indexPage.vue
@@ -27,7 +27,7 @@ export default {
 
     computed: {
         tabPosition() {
-            return appGetters.device === 'pc' ? 'left' : 'top'
+            return appGetters.isMobile ? 'top' : 'left'
         },
         tabContentClass() {
             return this.tabPosition === 'left' ? 'tab-main-right' : 'tab-main-top'
diff --git a/vue/src/view/system/department/component/OrgTreeView.vue b/vue/src/view/system/department/component/OrgTreeView.vue
index b2f1beb..3740b95 100644
--- a/vue/src/view/system/department/component/OrgTreeView.vue
+++ b/vue/src/view/system/department/component/OrgTreeView.vue
@@ -62,8 +62,8 @@ export default {
             this.initPageY = event.pageY
             this.oldMarginLeft = this.orgTreeOffsetLeft
             this.oldMarginTop = this.orgTreeOffsetTop
-            document.addEventListener('mousemove', this.mousemoveView)
-            document.addEventListener('mouseup', this.mouseupView)
+            window.addEventListener('mousemove', this.mousemoveView)
+            window.addEventListener('mouseup', this.mouseupView)
         },
         mousemoveView(event) {
             if (!this.canMove) return
@@ -73,8 +73,8 @@ export default {
         },
         mouseupView() {
             this.canMove = false
-            document.removeEventListener('mousemove', this.mousemoveView)
-            document.removeEventListener('mouseup', this.mouseupView)
+            window.removeEventListener('mousemove', this.mousemoveView)
+            window.removeEventListener('mouseup', this.mouseupView)
         }
     }
 }