可选路由模式

侧边栏增强
登陆成功改用router跳转
el-message、el-message-box设置最大宽度384px

vue/src/assets/styles/element-ui.scss

@@ -52,6 +52,10 @@
 
 .el-scrollbar {
     height: 100%;
+
+    .el-scrollbar__wrap {
+        -webkit-overflow-scrolling: touch;
+    }
 }
 
 .el-tree {
@@ -67,6 +71,7 @@
 
 .el-message {
     @include deep-shadow;
+    @include max-mobile-width;
     border-width: 0;
     overflow: visible;
 
@@ -122,6 +127,7 @@
 .el-message-box {
     position: relative;
     @include deep-shadow;
+    @include max-mobile-width;
 }
 
 .el-notification {

vue/src/assets/styles/nprogress.scss

@@ -3,7 +3,6 @@
 #nprogress {
     .bar {
         background: $--color-primary;
-        height: 5px;
 
         .peg {
             box-shadow: 0 0 10px $--color-primary, 0 0 5px $--color-primary;;

vue/src/assets/styles/sidebar.scss

@@ -40,7 +40,6 @@ $iconSize: 17px;
         height: 50px;
         line-height: 50px;
         text-align: center;
-        overflow: hidden;
 
         & .sidebar-logo-link {
             height: 100%;
@@ -123,6 +122,12 @@ $iconSize: 17px;
         overflow: hidden;
     }
 
+    &.el-menu--popup {
+        max-height: 88vh;
+        margin-bottom: 0.5vh;
+        overflow-y: auto;
+    }
+
     .el-submenu__title i {
         color: inherit;
     }

vue/src/assets/styles/variables.scss

@@ -30,6 +30,12 @@ $--color-info: $--color-teal;
     box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
 }
 
+@mixin max-mobile-width {
+    @media (max-width: 768px) {
+        max-width: 384px;
+    }
+}
+
 // sidebar
 //$menuText: #bfcbd9;
 $menuText: #D6E2F0;

vue/src/config/index.js

@@ -4,6 +4,9 @@ module.exports = {
     //全局axios的baseUrl
     apiPrefix: '/api',
 
+    //路由模式，['hash','history']
+    routerMode: 'history',
+
     //socket连接地址
     //socketUrl: 'wss://toesbieya.cn',
     socketUrl: 'localhost:12580',

vue/src/layout/components/Sidebar/index.vue

@@ -1,36 +1,4 @@
-<template>
+<script type="text/jsx">
-    <aside
-            :class="sidebarClass"
-            @mouseenter="mouseOutside=false"
-            @mouseleave="mouseOutside=true"
-    >
-        <logo v-if="showLogo" :collapse="collapse"/>
-        <el-scrollbar>
-            <el-menu
-                    ref="menu"
-                    :active-text-color="variables.primary"
-                    :background-color="variables.menuBg"
-                    :collapse="collapse"
-                    :collapse-transition="false"
-                    :default-active="$route.path"
-                    :text-color="variables.menuText"
-                    :unique-opened="sidebarUniqueOpen"
-                    mode="vertical"
-                    @select="select"
-            >
-                <sidebar-item
-                        v-for="route in routes"
-                        :key="route.path"
-                        :show-parent="sidebarShowParent"
-                        :collapse="sidebarCollapse"
-                        :item="route"
-                />
-            </el-menu>
-        </el-scrollbar>
-    </aside>
-</template>
-
-<script>
     import {mapState} from 'vuex'
     import Logo from './components/Logo'
     import SidebarItem from './components/SidebarItem'
@@ -41,7 +9,6 @@
         components: {SidebarItem, Logo},
         data() {
             return {
-                variables,
                 mouseOutside: true
             }
         },
@@ -77,6 +44,17 @@
             }
         },
         watch: {
+            //由于elMenu的initOpenedMenu()不会触发select事件，所以手动实现菜单收起
+            '$route.path'(nv, ov) {
+                //如果是redirect刷新，则跳过
+                if (nv === '/redirect' + ov) return
+
+                const menu = this.$refs.menu
+                if (!menu) return
+                const item = menu.items[nv]
+                if (!item) menu.openedMenus = []
+                else this.select(item.index, item.indexPath, item, false)
+            },
             hideSidebar(v) {
                 if (v) document.addEventListener('mousemove', this.moveEvent)
                 else document.removeEventListener('mousemove', this.moveEvent)
@@ -86,14 +64,24 @@
             moveEvent(e) {
                 if (e.clientX <= 15) this.mouseOutside = false
             },
-            select(index) {
+            select(index, indexPath, item, jump = true) {
+                //开启手风琴模式时，激活没有子级的菜单时收起其它展开项
+                if (this.sidebarUniqueOpen && indexPath.length === 1) {
+                    const menu = this.$refs.menu
+                    const opened = menu.openedMenus
+                    opened.forEach(i => i !== index && menu.closeMenu(i))
+                }
+
+                //mobile时激活隐藏侧边栏
+                this.device === 'mobile' && this.$store.commit('setting/sidebarCollapse', true)
+
+                if (!jump) return
+
                 if (this.$route.path === index) {
                     this.$store.commit('tagsView/delCachedView', this.$route)
                     this.$nextTick(() => this.$router.replace({path: '/redirect' + this.$route.fullPath}))
                 }
                 else this.$router.push(index)
-                //mobile时激活隐藏侧边栏
-                this.device === 'mobile' && this.$store.commit('setting/sidebarCollapse', true)
             }
         },
         mounted() {
@@ -103,6 +91,42 @@
         },
         beforeDestroy() {
             document.removeEventListener('mousemove', this.moveEvent)
+        },
+        render() {
+            const menu = (
+                <el-menu
+                    ref="menu"
+                    active-text-color={variables['primary']}
+                    background-color={variables['menuBg']}
+                    text-color={variables['menuText']}
+                    collapse={this.collapse}
+                    collapse-transition={false}
+                    default-active={this.$route.path}
+                    unique-opened={this.sidebarUniqueOpen}
+                    mode="vertical"
+                    on-select={this.select}
+                >
+                    {this.routes.map(route => (
+                        <sidebar-item
+                            key={route.path}
+                            show-parent={this.sidebarShowParent}
+                            collapse={this.sidebarCollapse}
+                            item={route}
+                        />
+                    ))}
+                </el-menu>
+            )
+
+            return (
+                <aside
+                    class={this.sidebarClass}
+                    on-mouseenter={() => this.mouseOutside = false}
+                    on-mouseleave={() => this.mouseOutside = true}
+                >
+                    {this.showLogo && <logo collapse={this.collapse}/>}
+                    {<el-scrollbar>{menu}</el-scrollbar>}
+                </aside>
+            )
         }
     }
 </script>

vue/src/router/index.js

@@ -17,7 +17,7 @@ import NProgress from 'nprogress'
 import {isUserExist} from "@/utils/sessionStorage"
 import {auth, needAuth} from "@/utils/auth"
 import {isEmpty} from "@/utils"
-import {title} from '@/config'
+import {title, routerMode} from '@/config'
 import constantRoutes from '@/router/constantRoutes'
 import authorityRoutes from '@/router/authorityRoutes'
 import store from "@/store"
@@ -36,6 +36,7 @@ metaExtend(constantRoutes)
 metaExtend(authorityRoutes)
 
 const router = new Router({
+    mode: routerMode,
     scrollBehavior: () => ({y: 0}),
     routes: constantRoutes.concat(authorityRoutes, endRoute)
 })

vue/src/views/app/login.vue

@@ -116,9 +116,9 @@
             },
             success() {
                 elSuccess('登陆成功')
-                let redirect = this.$route.query.redirect || '/'
+                const redirect = this.$route.query.redirect || '/'
-                //由于清除消息时会造成卡顿，所以延迟0.5s跳转
+                //由于清除消息时会造成卡顿，所以延迟0.2s跳转
-                setTimeout(() => window.location.href = '/#' + redirect, 500)
+                setTimeout(() => this.$router.push(redirect), 200)
             },
             capsLockTip({keyCode}) {
                 if (keyCode === 20) this.capsTooltip = !this.capsTooltip

vue/vue.config.js

@@ -12,7 +12,7 @@ const port = process.env.port || 8079 // dev port
 
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
-    publicPath: './',
+    publicPath: settings.routerMode === 'history' ? '/' : './',
     outputDir: 'dist',
     assetsDir: 'static',
     runtimeCompiler: true,