1

src/components/OnlineFile/index.vue

@@ -2,9 +2,11 @@
   <div>
     <vxe-modal
       v-model="showModal"
-      :width="840"
-      :height="600"
+      :width="defaultModalSize.width"
+      :height="defaultModalSize.height"
       show-zoom
+      resize
+      transfer
       :fullscreen="$store.getters.device === 'mobile'"
       :z-index="zIndex"
       :footer-hide="true"
@@ -23,10 +25,12 @@
 
 <script>
 import { PopupManager } from 'element-ui/lib/utils/popup'
+import { defaultModalSize } from '@/settings'
 
 export default {
   data() {
     return {
+      defaultModalSize,
       zIndex: PopupManager.nextZIndex(),
       showModal: false,
       codeUri: ''

src/layout/components/Navbar/index.vue

@@ -16,6 +16,10 @@
         </div>
         <div class="navbar-module">
           <svg-icon icon-class="modules" class-name="modules__toggler" @click="isShowMenuMobile = !isShowMenuMobile" />
+
+          <transition name="fade">
+            <el-button v-if="isMenuScroll && scrollOffset > 0" class="navbar-module__scroll--lf" type="primary" icon="el-icon-caret-left" circle size="mini" @click="menuScroll('prev')" />
+          </transition>
           <el-menu
             id="navbar-menu"
             text-color="hsla(0,0%,100%,.7)"
@@ -26,6 +30,10 @@
           >
             <Item v-for="(item) in permission_routes" :key="item.key" :item="item" :base-path="item.path" />
           </el-menu>
+          <transition name="fade">
+            <el-button v-if="isMenuScroll && (scrollOffset < scrollMaxWidth)" class="navbar-module__scroll--rt" type="primary" icon="el-icon-caret-right" circle size="mini" @click="menuScroll('next')" />
+          </transition>
+
         </div>
         <div class="navbar-nav flex-row order-md-last d-flex">
 
@@ -122,6 +130,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import ThemePicker from '@/components/ThemePicker/index.vue'
 import { PopupManager } from 'element-ui/lib/utils/popup'
 import Cookies from 'js-cookie'
+import { debounce } from '@/utils'
 export default {
   components: {
     ThemePicker,
@@ -130,6 +139,9 @@ export default {
   },
   data() {
     return {
+      isMenuScroll: false,
+      scrollOffset: 0,
+      scrollMaxWidth: 0,
       isEnvTest: (process.env.ENV === 'staging' || process.env.NODE_ENV === 'development'),
       zIndex: PopupManager.nextZIndex(),
       isFullscreen: false,
@@ -169,15 +181,59 @@ export default {
       }
     }
   },
-  created() {
-  },
+  created() {},
   mounted() {
     document.addEventListener('fullscreenchange', this.handleFullscreen)
+    this.menuIsOverflow()
   },
   beforeDestroy() {
     document.removeEventListener('fullscreenchange', this.handleFullscreen)
   },
   methods: {
+    menuScroll(type = 'prev') {
+      const offset = 80
+      const container = document.querySelector('#navbar-menu')
+      const scrollTo = (to) => {
+        container.scrollTo(to, 0)
+      }
+      if (type === 'prev') {
+        if ((container.scrollLeft - offset) > 0) {
+          scrollTo((container.scrollLeft - offset), 0)
+        } else {
+          scrollTo(0, 0)
+        }
+      } else {
+        if ((container.scrollLeft + offset) < this.scrollMaxWidth) {
+          scrollTo((container.scrollLeft + offset), 0)
+        } else {
+          scrollTo(container.scrollWidth, 0)
+        }
+      }
+    },
+    menuScrollListener: debounce(function(event) {
+      this.scrollOffset = event.target.scrollLeft
+    }),
+    menuIsOverflow() {
+      const handle = () => {
+        const container = document.querySelector('#navbar-menu')
+        this.isMenuScroll = container.scrollWidth > container.clientWidth
+        this.scrollMaxWidth = container.scrollWidth - container.clientWidth
+        if (this.isMenuScroll) {
+          container.addEventListener('scroll', e => this.menuScrollListener(e))
+        }
+      }
+      const $watch = this.$watch(() => this.permission_routes, (newVal) => {
+        if (newVal && newVal instanceof Array && newVal.length > 0) {
+          this.$nextTick(() => {
+            setTimeout(handle, 500)
+            $watch()
+          })
+        }
+      }, {
+        deep: true,
+        immediate: true
+      })
+    },
     toggleIframeSidebarOpened() {
       const iframe = document.querySelector('#iframe-cpn')
       if (iframe && !document.querySelector('.sidebar-container')) {

src/settings.js

@@ -13,5 +13,10 @@ module.exports = {
    * @type {boolean} true | false
    * @description Whether show the logo in sidebar
    */
-  sidebarLogo: false
+  sidebarLogo: false,
+
+  defaultModalSize: {
+    width: '76vw',
+    height: '80vh'
+  }
 }

src/styles/navbar.css

@@ -40,12 +40,28 @@
 .navbar .container .navbar-module {
   flex: 1;
   overflow-y: hidden;
+  position: relative;
+}
+.navbar .container .navbar-module .navbar-module__scroll--lf {
+  transform: translateY(-50%);
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  z-index: 1;
+}
+.navbar .container .navbar-module .navbar-module__scroll--rt {
+  transform: translateY(-50%);
+  position: absolute;
+  top: 50%;
+  right: 8px;
 }
 .navbar .container .navbar-module .modules__toggler {
   color: #fff;
 }
 .navbar .container .navbar-module #navbar-menu {
+  scroll-behavior: smooth;
   overflow-x: scroll;
+  scrollbar-width: none;
 }
 .navbar .container .navbar-module #navbar-menu::-webkit-scrollbar {
   background-color: transparent;

src/styles/navbar.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;;AAEF;EACE;;AAEA;EACE;EACA;EACA;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EAEI;IACE;;;EAKA;IACE;;;AAKR;EAEI;IACE;;;EAKA;IACE;;EAEF;IACE;IACA;;;AAKR;EAEI;IACE;;EAGA;IACE;;EAIF;IACE;;EAIF;IACE;;;AAON;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAIA;EACE;EACA","file":"navbar.css"}
+{"version":3,"sourceRoot":"","sources":["navbar.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIN;EACE;EACA;;AAEA;EACE;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAGJ;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAMV;EAEI;IACE;;;EAKA;IACE;;;AAKR;EAEI;IACE;;;EAKA;IACE;;EAEF;IACE;IACA;;;AAKR;EAEI;IACE;;EAGA;IACE;;EAIF;IACE;;EAIF;IACE;;;AAON;EACE;;AAEA;EACE;EACA;;AAGJ;EACE;EACA;;AAEF;EACE;;;AAIF;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;;AAGJ;EACE;;AAIA;EACE;EACA","file":"navbar.css"}

src/styles/navbar.scss

@@ -39,12 +39,28 @@
     .navbar-module {
       flex: 1;
       overflow-y: hidden;
+      position: relative;
 
+      .navbar-module__scroll--lf {
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        left: 8px;
+        z-index: 1;
+      }
+      .navbar-module__scroll--rt {
+        transform: translateY(-50%);
+        position: absolute;
+        top: 50%;
+        right: 8px;
+      }
       .modules__toggler {
         color: #fff;
       }
       #navbar-menu {
+        scroll-behavior: smooth;
         overflow-x: scroll;
+        scrollbar-width: none;
 
         &::-webkit-scrollbar {
           background-color: transparent;

src/utils/index.js

@@ -180,10 +180,10 @@ export function throttle(fn, interval, immediate = true) {
 }
 export function debounce(fn, delay = 500) {
   let timer = null
-  return function _debounce() {
+  return function() {
     if (timer) clearTimeout(timer)
     timer = setTimeout(() => {
-      fn()
+      fn.call(this, ...arguments)
     }, delay)
   }
 }

src/views/system/DashboardComponents/quickMenu.vue

@@ -31,8 +31,10 @@
         show-footer
         title="快捷菜单"
         show-confirm-button
-        :width="600"
-        :height="600"
+        show-zoom
+        resize
+        :width="defaultModalSize.width"
+        :height="defaultModalSize.height"
         esc-closable
       >
         <el-form ref="form" :model="form" :rules="rules" label-position="top" label-width="100">
@@ -85,6 +87,7 @@ import { index, save, destroy } from '@/api/diyMenu'
 import { deepCopy } from '@/utils'
 import { permissions } from '@/api/me'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { defaultModalSize } from '@/settings'
 export default {
   name: 'QuickMenu',
   components: {
@@ -100,6 +103,7 @@ export default {
   },
   data() {
     return {
+      defaultModalSize,
       loading: false,
       fileList: [],
       action: process.env.VUE_APP_UPLOAD_API,

src/views/system/DashboardComponents/toDo.vue

@@ -53,11 +53,12 @@
       v-model="isShowModal"
       :z-index="zIndex"
       transfer
+      resize
       show-zoom
       :fullscreen="$store.getters.device === 'mobile'"
       title="办理"
-      width="86vw"
-      height="80vh"
+      :width="defaultModalSize.width"
+      :height="defaultModalSize.height"
       esc-closable
     >
       <iframe :src="modalUrl" style="width: 100%;height: 100%" frameborder="0" />
@@ -71,6 +72,7 @@ import SvgIcon from '@/components/SvgIcon/index.vue'
 import ElementResize from 'element-resize-detector'
 import axios from 'axios'
 import { getToken } from '@/utils/auth'
+import { defaultModalSize } from '@/settings'
 
 export default {
   name: 'ToDo',
@@ -87,6 +89,7 @@ export default {
   },
   data() {
     return {
+      defaultModalSize,
       zIndex: PopupManager.nextZIndex(),
       isShowModal: false,
       modalUrl: '/',

src/views/system/components/AddArticle.vue

@@ -5,9 +5,12 @@
       show-footer
       title="文章管理"
       show-confirm-button
-      :width="820"
-      :height="600"
+      :width="defaultModalSize.width"
+      :height="defaultModalSize.height"
       esc-closable
+      show-zoom
+      resize
+      transfer
       :fullscreen="$store.getters.device === 'mobile'"
       @input="e => $emit('update:isShow',e)"
     >
@@ -65,6 +68,7 @@ import { index } from '@/api/articleType'
 import { save, show } from '@/api/article'
 import { getToken } from '@/utils/auth'
 import { deepCopy } from '@/utils'
+import { defaultModalSize } from "@/settings"
 export default {
   props: {
     isShow: {
@@ -75,6 +79,7 @@ export default {
   },
   data() {
     return {
+      defaultModalSize,
       fileList: [],
       action: process.env.VUE_APP_UPLOAD_API,
       types: [],