导航栏、多页签、页头样式修改

缩小多页签鼠标滚轮的单位滚动距离
使用window的方法以window.开头
移除无用注释

vue/element-ui-personal/component/Menu/Submenu.vue

@@ -129,8 +129,8 @@ export default {
 
             this.dispatch('ElSubmenu', 'mouse-enter-child')
 
-            clearTimeout(this.timeout)
+            window.clearTimeout(this.timeout)
-            this.timeout = setTimeout(() => this.rootMenu.openMenu(this.index, this.indexPath), showTimeout)
+            this.timeout = window.setTimeout(() => this.rootMenu.openMenu(this.index, this.indexPath), showTimeout)
 
             this.appendToBody && this.$parent.$el.dispatchEvent(new MouseEvent('mouseenter'))
         },
@@ -143,8 +143,8 @@ export default {
 
             this.dispatch('ElSubmenu', 'mouse-leave-child')
 
-            clearTimeout(this.timeout)
+            window.clearTimeout(this.timeout)
-            this.timeout = setTimeout(() => !this.mouseInChild && this.rootMenu.closeMenu(this.index), this.hideTimeout)
+            this.timeout = window.setTimeout(() => !this.mouseInChild && this.rootMenu.closeMenu(this.index), this.hideTimeout)
 
             if (this.appendToBody && deepDispatch) {
                 if (this.$parent.$options.name === 'ElSubmenu') {
@@ -170,11 +170,11 @@ export default {
         this.$on('toggle-collapse', this.handleCollapseToggle)
         this.$on('mouse-enter-child', () => {
             this.mouseInChild = true
-            clearTimeout(this.timeout)
+            window.clearTimeout(this.timeout)
         })
         this.$on('mouse-leave-child', () => {
             this.mouseInChild = false
-            clearTimeout(this.timeout)
+            window.clearTimeout(this.timeout)
         })
     },
 

vue/src/asset/style/element-ui.scss

@@ -77,8 +77,8 @@
     }
 
     .el-scrollbar__wrap {
-        //53 for dialog header,53 for dialog footer,100 for up+down
+        //53 for dialog header,53 for dialog footer
-        max-height: calc(100vh - 53px - 53px - 100px);
+        max-height: calc(100vh - 53px - 53px - #{$nav-height * 2});
     }
 }
 

vue/src/asset/style/index.scss

@@ -80,6 +80,8 @@ a:hover {
 }
 
 /*----------路由页面的最大高度开始----------*/
+$page-header-offsetHeight: $page-header-line-height + #{$page-view-margin * 2};
+
 .max-view-height {
     height: calc(100vh - #{$page-view-margin * 2});
 }
@@ -93,7 +95,7 @@ a:hover {
 }
 
 .has-page-header .max-view-height {
-    height: calc(100vh - #{$page-view-margin * 2} - #{$page-header-height});
+    height: calc(100vh - #{$page-view-margin * 2} - #{$page-header-offsetHeight});
 }
 
 .has-nav.has-tags-view .max-view-height {
@@ -101,11 +103,11 @@ a:hover {
 }
 
 .has-nav .has-page-header .max-view-height {
-    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height} - #{$page-header-height});
+    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height} - #{$page-header-offsetHeight});
 }
 
 .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});
+    height: calc(100vh - #{$page-view-margin * 2} - #{$nav-height} - #{$tags-view-height} - #{$page-header-offsetHeight});
 }
 
 /*----------路由页面的最大高度结束----------*/

vue/src/asset/style/variables.scss

@@ -69,12 +69,14 @@ $head-menu-item-hover-color: $--color-primary;
 //侧边栏宽度
 $aside-width: 208px;
 //头部导航栏高度
-$nav-height: 50px;
+$nav-height: 48px;
 //头部多页签栏高度
-$tags-view-height: 40px;
+$tags-view-height: 32px;
 
-//页头高度
+//页头行高
-$page-header-height: 51px;
+$page-header-line-height: 26px;
+//页头的上下padding
+$page-header-padding: 12px;
 //路由页面的margin
 $page-view-margin: 24px;
 
@@ -86,4 +88,5 @@ $page-view-margin: 24px;
     success: $--color-success;
     danger: $--color-danger;
     warning: $--color-warning;
+    navHeight: $nav-height;
 }

vue/src/component/abstract/Dialog/index.vue

@@ -1,4 +1,5 @@
 <script type="text/jsx">
+import variables from '@/asset/style/variables.scss'
 import LoadingMask from './LoadingMask'
 
 export default {
@@ -10,7 +11,7 @@ export default {
         value: Boolean,
         title: String,
         loading: {type: Boolean, default: true},
-        top: {type: String, default: '50px'},
+        top: {type: String, default: variables['navHeight']},
         width: {type: String, default: '30%'}
     },
 

vue/src/directive/ripple/index.js

@@ -86,17 +86,17 @@ function showRipple(evt, el, ctx, forceCenter) {
     }
     ctx.abort.push(abort)
 
-    let timer = setTimeout(() => {
+    let timer = window.setTimeout(() => {
         innerNode.classList.add('q-ripple__inner--enter')
         innerNode.style.transform = `translate3d(${centerX},${centerY},0) scale3d(1,1,1)`
         innerNode.style.opacity = 0.2
 
-        timer = setTimeout(() => {
+        timer = window.setTimeout(() => {
             innerNode.classList.remove('q-ripple__inner--enter')
             innerNode.classList.add('q-ripple__inner--leave')
             innerNode.style.opacity = 0
 
-            timer = setTimeout(() => {
+            timer = window.setTimeout(() => {
                 node.remove()
                 ctx.abort.splice(ctx.abort.indexOf(abort), 1)
             }, 275)

vue/src/layout/component/Header/component/TagsView/ScrollPanel.vue

@@ -22,7 +22,7 @@ export default {
                 || eventDelta < 0 && scrollWidth <= scrollLeft + clientWidth) {
                 return
             }
-            this.smoothScroll(-eventDelta * 2)
+            this.smoothScroll(-eventDelta)
         },
 
         smoothScroll(val) {
@@ -31,7 +31,7 @@ export default {
                 this.rAf = null
             }
 
-            this.rAf = scrollTo(this.$el, this.$el.scrollLeft + val, {direction: 'left'})
+            this.rAf = scrollTo(this.$el, this.$el.scrollLeft + val, {direction: 'left', duration: 100})
         },
 
         moveToTarget(currentTag, tagInstances) {

vue/src/layout/component/Header/component/TagsView/index.vue

@@ -68,12 +68,16 @@ export default {
                 return tags
             }
 
+            //添加所有固定显示的页签
             for (const tag of getAffixTags(this.menus)) {
                 tagsViewMutations.addVisitedView(tag)
             }
+
+            //将当前路由对象添加为页签
+            this.addTag(this.$route)
         },
-        //将具有meta.title的路由添加为tab页
+        //将具有meta.title的路由对象添加为tab页
-        addTag(to = this.$route) {
+        addTag(to) {
             to.meta.title && tagsViewMutations.addView(to)
         },
 
@@ -187,7 +191,6 @@ export default {
 
     mounted() {
         this.initTags()
-        this.addTag()
     },
 
     render(h) {

vue/src/layout/component/Header/component/TagsView/style.scss

@@ -17,18 +17,19 @@
         }
 
         .tags-view-item {
+            $margin: 4px;
             display: inline-block;
             position: relative;
             cursor: pointer;
-            height: 32px;
+            height: #{$tags-view-height - $margin * 2};
-            line-height: 32px;
+            line-height: #{$tags-view-height - $margin * 2};
             color: #909399;
             background-color: #ffffff;
             border-radius: 3px;
             border: 1px solid #e8eaec;
             padding: 0 12px;
             font-size: 12px;
-            margin: 4px;
+            margin: $margin;
             user-select: none;
 
             &:first-of-type {

vue/src/layout/component/Page/component/PageHeader.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="page-header">
-        <h1 class="page-header-title">{{ title }}</h1>
+        <span class="page-header-title">{{ title }}</span>
 
         <el-breadcrumb>
             <el-breadcrumb-item v-for="(item,index) in data" :key="item.path">
@@ -39,9 +39,9 @@ export default {
     justify-content: space-between;
     align-items: center;
     flex-wrap: nowrap;
-    height: $page-header-height;
     font-size: 14px;
-    padding: 16px $page-view-margin 0 $page-view-margin;
+    line-height: $page-header-line-height;
+    padding: $page-header-padding $page-view-margin $page-header-padding $page-view-margin;
 
     > .el-breadcrumb .no-redirect {
         color: #909399;
@@ -49,13 +49,17 @@ export default {
     }
 
     &-title {
-        margin: 4px 0;
         color: #303133;
-        font-weight: 400;
+        font-weight: 600;
-        font-size: 24px;
+        font-size: 18px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
     }
+
+    // 页头渲染时页面顶部margin为0
+    & + .page-view {
+        margin-top: 0 !important;
+    }
 }
 </style>

vue/src/layout/store/tagsView.js

@@ -16,7 +16,7 @@ const state = {
     //是否将页签持久化到sessionStorage
     persistent: true,
 
-    //显示的页签，routeConfig对象数组
+    //显示的页签，vue-router的routeConfig对象数组
     visitedViews: [],
 
     //缓存的页签，用于<keep-router-view-alive/>:include

vue/src/plugin/canvasAnimation/godrays/original.js

@@ -217,7 +217,7 @@ function go() {
 
         // this[rte](B)}
 
-        requestAnimationFrame(onFrame)
+        window.requestAnimationFrame(onFrame)
     }
 
     // Call our requestAnimationFrame handler to start rendering. Since it takes no arguments use the argument

vue/src/plugin/canvasAnimation/particleNetwork/index.js

@@ -87,7 +87,7 @@ export default class ParticleNetwork {
         if (isInitial) {
             let counter = 0
             window.clearInterval(this.timer)
-            this.timer = setInterval(() => {
+            this.timer = window.setInterval(() => {
                 if (counter < quantity - 1) this.particles.push(new Particle(this))
                 else window.clearInterval(this.timer)
                 counter++
@@ -134,7 +134,7 @@ export default class ParticleNetwork {
             this.mouseIsDown = true
             let counter = 0
             let quantity = this.spawnQuantity
-            let intervalId = setInterval(function () {
+            let intervalId = window.setInterval(function () {
                 if (this.mouseIsDown) {
                     if (counter === 1) quantity = 1
                     for (let i = 0; i < quantity; i++) {

vue/src/plugin/webgl/fluid/index.js

@@ -216,7 +216,7 @@ const WebGLFluid = canvas => {
         applyInputs()
         if (!config.PAUSED) step(dt)
         render(null)
-        requestAnimationFrame(update)
+        window.requestAnimationFrame(update)
     }
 
     function calcDeltaTime() {

vue/src/store/module/resource.js

@@ -99,9 +99,6 @@ function getAuthorizedMenus({resources, admin}, menus) {
     menus = JSON.parse(JSON.stringify(menus))
     clean(menus)
     addFullPath(menus)
-    // if (admin === true) return menus
-    // if (!resources) return []
-    // filter(menus, i => !needAuth(i) || i.fullPath in resources)
     filter(menus, i => !needAuth(i) || auth(i.fullPath))
     return menus
 }

vue/src/util/index.js

@@ -138,7 +138,7 @@ export function throttle(func, delay = 100) {
             func.apply(self, args)
         }
 
-        clearTimeout(timeoutID)
+        window.clearTimeout(timeoutID)
 
         if (elapsed > delay) exec()
         else timeoutID = window.setTimeout(exec, delay - elapsed)
@@ -173,7 +173,7 @@ export function waitUntilSuccess(success, callback, interval = 1000, maxTryTime
 
         if (success()) return check()
 
-        fun = setInterval(check, interval)
+        fun = window.setInterval(check, interval)
     })
 }
 

vue/src/view/purchase/inbound/component/OrderSelector.vue

@@ -5,7 +5,6 @@
         append-to-body
         title="选择采购订单"
         width="70%"
-        top="50px"
         @close="cancel"
         @open="search"
     >

vue/src/view/purchase/order/component/SupplierSelector.vue

@@ -5,7 +5,6 @@
         append-to-body
         title="选择供应商"
         width="70%"
-        top="50px"
         @close="cancel"
         @open="search"
     >

vue/src/view/sell/order/component/CustomerSelector.vue

@@ -5,7 +5,6 @@
         append-to-body
         title="选择客户"
         width="70%"
-        top="50px"
         @close="cancel"
         @open="search"
     >

vue/src/view/sell/order/component/StockSelector.vue

@@ -5,7 +5,6 @@
         append-to-body
         title="选择库存商品"
         width="70%"
-        top="50px"
         @close="cancel"
         @open="search"
     >

vue/src/view/sell/outbound/component/OrderSelector.vue

@@ -5,7 +5,6 @@
         append-to-body
         title="选择销售订单"
         width="70%"
-        top="50px"
         @close="cancel"
         @open="search"
     >

vue/src/view/sell/outbound/component/StockSelector.vue

@@ -5,7 +5,6 @@
         append-to-body
         title="选择库存商品"
         width="70%"
-        top="50px"
         @close="cancel"
         @open="search"
     >