样式修改

mapState简化

vue/src/assets/styles/index.scss

@@ -10,7 +10,7 @@ body {
     height: 100%;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
 }
 
 html {

vue/src/layout/components/Header.vue

@@ -2,12 +2,12 @@
     <header
             :class="{'hide-header':hideHeader}"
             class="header-container"
-            @mouseenter="mouseOutside=false"
-            @mouseleave="mouseOutside=true"
+            @mouseenter="() => valueCtrl('mouseOutside',false)"
+            @mouseleave="() => valueCtrl('mouseOutside',true)"
     >
-        <v-navbar @menu-show="navbarMenuShow=$event"/>
+        <v-navbar @menu-show="e => valueCtrl('navbarMenuShow',e)"/>
 
-        <tags-view v-if="useTagsView" @menu-show="tagsViewMenuShow=$event"/>
+        <tags-view v-if="useTagsView" @menu-show="e => valueCtrl('tagsViewMenuShow',e)"/>
     </header>
 </template>
 
@@ -31,10 +31,7 @@
         },
 
         computed: {
-            ...mapState('setting', {
-                useTagsView: state => state.useTagsView,
-                headerAutoHidden: state => state.headerAutoHidden
-            }),
+            ...mapState('setting', ['useTagsView', 'headerAutoHidden']),
 
             hideHeader() {
                 return this.mouseOutside
@@ -56,6 +53,10 @@
         },
 
         methods: {
+            valueCtrl(key, value) {
+                this[key] = value
+            },
+
             moveEvent(e) {
                 if (e.clientY <= 15) this.mouseOutside = false
             },

vue/src/layout/components/Main.vue

@@ -38,18 +38,11 @@
         components: {KeepRouterViewAlive},
 
         computed: {
-            ...mapState('app', {
-                scrollTop: state => state.scrollTop,
-            }),
-
-            ...mapState('setting', {
-                showBackToTop: state => state.showBackToTop
-            }),
-
-            ...mapState('tagsView', {
-                cachedViews: state => state.cachedViews,
-                transitionName: state => state.transitionName
-            }),
+            ...mapState('app', ['scrollTop']),
+
+            ...mapState('setting', ['showBackToTop']),
+
+            ...mapState('tagsView', ['cachedViews', 'transitionName']),
 
             ...mapState('iframe', {
                 showIframe: state => state.show,

vue/src/layout/components/Navbar/index.vue

@@ -71,16 +71,9 @@
         },
 
         computed: {
-            ...mapState('user', {
-                avatar: state => state.avatar,
-                name: state => state.name,
-                prepare_logout: state => state.prepare_logout
-            }),
-
-            ...mapState('setting', {
-                sidebarCollapse: state => state.sidebarCollapse,
-                showBreadcrumb: state => state.showBreadcrumb
-            }),
+            ...mapState('user', ['avatar', 'name', 'prepare_logout']),
+
+            ...mapState('setting', ['sidebarCollapse', 'showBreadcrumb']),
 
             showSystemMonitor() {
                 return auth('/system/monitor')

vue/src/layout/components/Navbar/style.scss

@@ -4,6 +4,7 @@
     height: $nav-height;
     overflow: hidden;
     position: relative;
+    z-index: 9;
     background: #fff;
     box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 

vue/src/layout/components/Sidebar/components/Logo.vue

@@ -1,25 +1,26 @@
-<template>
-    <div :class="{'collapse':collapse}" class="sidebar-logo-container">
-        <router-link class="sidebar-logo-link" key="expand" to="/">
-            <img v-if="logo" :src="logo" class="sidebar-logo">
-            <h1 v-if="!collapse" class="sidebar-title">{{ title }}</h1>
-        </router-link>
-    </div>
-</template>
-
-<script>
+<script type="text/jsx">
     import {sidebarLogoUrl, title} from '@/config'
 
     export default {
         name: 'SidebarLogo',
 
+        functional: true,
+
         props: {collapse: Boolean},
 
-        data() {
-            return {
-                title,
-                logo: sidebarLogoUrl
-            }
+        render(h, context) {
+            const {collapse} = context.props
+
+            const logoClass = {'sidebar-logo-container': true, 'collapse': collapse}
+
+            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>
+                </div>
+            )
         }
     }
 </script>

vue/src/layout/components/Sidebar/components/SidebarItemContent.vue

@@ -17,7 +17,7 @@
 
             if (icon) {
                 const isElIcon = icon.startsWith('el-icon-')
-                iconComponent = isElIcon ? <i class={icon + ' svg-icon'}/> : <svg-icon icon={icon}/>
+                iconComponent = isElIcon ? <i class={`svg-icon ${icon}`}/> : <svg-icon icon={icon}/>
             }
             else iconComponent = <span class="svg-icon"/>
 

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

@@ -16,21 +16,11 @@
         },
 
         computed: {
-            ...mapState('app', {
-                device: state => state.device
-            }),
-
-            ...mapState('resource', {
-                routes: state => state.sidebarMenus
-            }),
-
-            ...mapState('setting', {
-                showLogo: state => state.showLogo,
-                sidebarCollapse: state => state.sidebarCollapse,
-                sidebarUniqueOpen: state => state.sidebarUniqueOpen,
-                sidebarShowParent: state => state.sidebarShowParent,
-                sidebarAutoHidden: state => state.sidebarAutoHidden
-            }),
+            ...mapState('app', ['device']),
+
+            ...mapState('resource', ['sidebarMenus']),
+
+            ...mapState('setting', ['showLogo', 'sidebarCollapse', 'sidebarUniqueOpen', 'sidebarShowParent', 'sidebarAutoHidden']),
 
             activeMenu() {
                 const route = this.$route
@@ -132,7 +122,7 @@
                     mode="vertical"
                     on-select={this.select}
                 >
-                    {this.routes.map(route => (
+                    {this.sidebarMenus.map(route => (
                         <sidebar-item
                             key={route.path}
                             show-parent={this.sidebarShowParent}
@@ -150,7 +140,7 @@
                     on-mouseleave={() => this.mouseOutside = true}
                 >
                     {this.showLogo && <logo collapse={this.collapse}/>}
-                    {<el-scrollbar>{menu}</el-scrollbar>}
+                    {<el-scrollbar noresize native>{menu}</el-scrollbar>}
                 </aside>
             )
         }

vue/src/layout/components/Sidebar/style.scss

@@ -42,18 +42,18 @@ $iconSize: 17px;
         line-height: $nav-height;
         text-align: center;
 
-        & .sidebar-logo-link {
+        .sidebar-logo-link {
             height: 100%;
             width: 100%;
 
-            & .sidebar-logo {
+            .sidebar-logo {
                 width: 32px;
                 height: 32px;
                 vertical-align: middle;
                 margin-right: 12px;
             }
 
-            & .sidebar-title {
+            .sidebar-title {
                 display: inline-block;
                 margin: 0;
                 color: #fff;
@@ -74,14 +74,6 @@ $iconSize: 17px;
 
     .el-scrollbar {
         flex: 1;
-
-        > .el-scrollbar__wrap {
-            overflow-x: hidden !important;
-        }
-
-        > .el-scrollbar__bar.is-vertical {
-            right: 0;
-        }
     }
 }
 

vue/src/layout/components/TagsView/index.vue

@@ -171,7 +171,7 @@
 
         beforeDestroy() {
             //销毁前将路由动画改为fade
-            this.$store.commit('setting/transitionName', 'el-fade-in-linear')
+            this.$store.commit('tagsView/transitionName', 'el-fade-in-linear')
         },
 
         mounted() {

vue/src/layout/index.vue

@@ -30,19 +30,11 @@
         components: {VMain, VSidebar, VHeader},
 
         computed: {
-            ...mapState('app', {
-                device: state => state.device,
-                hasHeader: state => state.hasHeader
-            }),
+            ...mapState('app', ['device', 'hasHeader']),
 
-            ...mapState('setting', {
-                useTagsView: state => state.useTagsView,
-                sidebarCollapse: state => state.sidebarCollapse
-            }),
+            ...mapState('setting', ['useTagsView', 'sidebarCollapse']),
 
-            ...mapState('socket', {
-                online: state => state.online
-            }),
+            ...mapState('socket', ['online']),
 
             ...mapState('user', {
                 isLogin: state => !isEmpty(state.id) && !isEmpty(state.token)

vue/src/views/app/login/index.vue

@@ -5,7 +5,7 @@
         <div class="login-container" @click.stop>
             <div class="title">
                 {{title}}
-                <set-animation :value="animation" custom-class="set-animation" @select="setAnimation"/>
+                <set-animation :value="loginBackgroundAnimation" custom-class="set-animation" @select="setAnimation"/>
             </div>
 
             <component :is="component"/>
@@ -34,10 +34,7 @@
         },
 
         computed: {
-            ...mapState('app', {
-                device: state => state.device,
-                animation: state => state.loginBackgroundAnimation
-            }),
+            ...mapState('app', ['device', 'loginBackgroundAnimation']),
 
             component() {
                 const formType = this.$route.path.substring(1)
@@ -64,7 +61,7 @@
 
         mounted() {
             //移动端关闭动画，太卡
-            this.device !== 'mobile' && this.setAnimation(this.animation)
+            this.device !== 'mobile' && this.setAnimation(this.loginBackgroundAnimation)
         },
 
         beforeDestroy() {

vue/src/views/example/developingTest/components/ApiSpeedTest.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="tip-row">
         测试接口返回速度<br>
-        当前响应次数：{{times}}，平均响应：{{avg}}毫秒，最长响应：{{max}}毫秒
+        当前响应次数：{{times}}，响应时间：{{cur}}毫秒，平均响应：{{avg}}毫秒，最长响应：{{max}}毫秒
         <el-row>
             <el-button type="primary" @click="post">点我测试</el-button>
             <el-button plain @click="reset">重置</el-button>
@@ -18,6 +18,7 @@
             return {
                 loading: false,
                 times: 0,
+                cur: 0,
                 avg: 0,
                 max: 0,
                 total: 0
@@ -31,17 +32,20 @@
                 request
                     .post('/test/test')
                     .finally(() => {
-                        const end = performance.now() - start
+                        const end = (performance.now() - start)
                         if (end > this.max) this.max = end
+                        this.cur = end.toFixed(2)
                         this.total += end
                         this.times++
                         this.avg = (this.total / this.times).toFixed(2)
                         this.loading = false
                     })
             },
+
             reset() {
                 if (this.loading) return
                 this.times = 0
+                this.cur = 0
                 this.avg = 0
                 this.max = 0
                 this.total = 0

vue/src/views/example/developingTest/components/ImageCompressTest.vue

@@ -31,6 +31,7 @@
                 </el-row>
             </div>
         </div>
+
         <div class="tip-row">
             测试纯前端png图片压缩效率。
             <a href="https://github.com/psych0der/pngquantjs" target="_blank">使用pngquant</a>
@@ -118,6 +119,7 @@
                 this[type].input.size = file.size
                 this[type].input.src = window.URL.createObjectURL(file)
             },
+
             cancel(type) {
                 if (this[type].loading) return
                 window.URL.revokeObjectURL(this[type].input.src)
@@ -130,6 +132,7 @@
                 this[type].totalCost = 0
                 this[type].calcCost = 0
             },
+
             compress(type) {
                 if (this[type].loading) return
                 if (!this[type].input.file) return elError(`请选择一张${type}图片`)
@@ -143,18 +146,21 @@
                 }
                 reader.readAsArrayBuffer(this[type].input.file)
             },
+
             compressJPG(uint8Array, start) {
                 import('@/plugin/imageCompress/cjpeg')
                     .then(_ => _.default(uint8Array, this.jpg.quality))
                     .then(({data, time}) => this.compressSuccess({type: 'jpg', start, data, time}))
                     .finally(() => this.jpg.loading = false)
             },
+
             compressPNG(uint8Array, start) {
                 import('@/plugin/imageCompress/pngquant')
                     .then(_ => _.default(uint8Array, this.png.quality, this.png.speed))
                     .then(({data, time}) => this.compressSuccess({type: 'png', start, data, time}))
                     .finally(() => this.png.loading = false)
             },
+
             compressSuccess({type, start, data, time}) {
                 this[type].totalCost = (window.performance.now() - start).toFixed(2)
                 this[type].calcCost = time.toFixed(2)

vue/src/views/userCenter/components/UserCard.vue

@@ -36,12 +36,7 @@
         },
 
         computed: {
-            ...mapState('user', {
-                name: state => state.name,
-                avatar: state => state.avatar,
-                role_name: state => state.role_name,
-                admin: state => state.admin
-            })
+            ...mapState('user', ['name', 'avatar', 'role_name', 'admin'])
         }
     }
 </script>