Optimize (#442)

* feat(*): Continuously optimize code

re #440

* improvement(*): optimze code as usual

re $440

Author: vanoneang

package-lock.json

@@ -16,10 +16,10 @@
     "@antv/g2plot": "^0.11.35",
     "@babel/polyfill": "^7.4.4",
     "@tinymce/tinymce-vue": "^2.0.0",
-    "axios": "~0.18.0",
+    "axios": "^0.21.1",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.4",
-    "element-plus": "^1.0.2-beta.36",
+    "element-plus": "^1.0.2-beta.39",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",

package.json

@@ -1,21 +1,18 @@
 <template>
   <section class="container">
     <div class="wrapper" id="wrapper">
-      <transition name="fade-transform" mode="out-in"> <router-view></router-view> </transition>
+      <router-view v-slot="{ Component }">
+        <transition appear name="fade-transform" mode="out-in">
+          <component :is="Component" />
+        </transition>
+      </router-view>
     </div>
   </section>
 </template>
 
 <script>
 export default {
   name: 'AppMain',
-  watch: {
-    $route() {
-      if (this.$previewInstance) {
-        this.$previewInstance.destroy()
-      }
-    },
-  },
 }
 </script>
 

src/component/layout/app-main.vue

@@ -22,13 +22,13 @@
 </template>
 
 <script>
-import User from './user'
 import store from '@/store'
 import Config from '@/config'
+import { getToken } from '@/lin/util/token'
+import User from './user'
 import ClearTab from './clear-tab'
 import Breadcrumb from './breadcrumb'
 import Screenfull from './screen-full'
-import { getToken } from '@/lin/util/token'
 
 export default {
   name: 'NavBar',

src/component/layout/nav-bar.vue

@@ -1,7 +1,7 @@
+import Utils from '@/lin/util/util'
 import adminConfig from './admin'
 import bookConfig from './book' // 引入图书管理路由文件
 import pluginsConfig from './plugin'
-import Utils from '@/lin/util/util'
 
 // eslint-disable-next-line import/no-mutable-exports
 let homeRouter = [
@@ -48,9 +48,20 @@ let homeRouter = [
   adminConfig,
 ]
 
+// 接入插件
 const plugins = [...pluginsConfig]
+filterPlugin(homeRouter)
+homeRouter = homeRouter.concat(plugins)
 
-// 筛除已经被添加的插件
+// 处理顺序
+homeRouter = Utils.sortByOrder(homeRouter)
+deepReduceName(homeRouter)
+
+export default homeRouter
+
+/**
+ * 筛除已经被添加的插件
+ */
 function filterPlugin(data) {
   if (plugins.length === 0) {
     return
@@ -70,16 +81,10 @@ function filterPlugin(data) {
   }
 }
 
-filterPlugin(homeRouter)
-
-homeRouter = homeRouter.concat(plugins)
-
-// 处理顺序
-homeRouter = Utils.sortByOrder(homeRouter)
 /**
  * 使用 Symbol 处理 name 字段, 保证唯一性
  */
-const deepReduceName = target => {
+function deepReduceName(target) {
   if (Array.isArray(target)) {
     target.forEach(item => {
       if (typeof item !== 'object') {
@@ -105,7 +110,3 @@ const deepReduceName = target => {
     }
   }
 }
-
-deepReduceName(homeRouter)
-
-export default homeRouter

src/config/stage/index.js

@@ -1,6 +1,6 @@
+import store from '@/store'
 import _axios, { post, get, put } from '@/lin/plugin/axios'
 import { saveTokens } from '../util/token'
-import store from '@/store'
 
 export default class User {
   /**

src/lin/model/user.js

@@ -45,7 +45,7 @@ export default class Sse {
     this.source.addEventListener(eventName, event => {
       // console.log('receive one message: ', event.data)
       // console.log('receive one message: ', event.lastEventId)
-      store.commit('ADD_UNREAD_MESSAGE', { data: event.data, id: event.lastEventId })
+      store.commit('MARK_UNREAD_MESSAGE', { data: event.data, id: event.lastEventId })
       ElMessage.warning(JSON.parse(event.data).message)
     })
   }

src/lin/util/sse.js

@@ -13,6 +13,6 @@ export default {
 
   readMessage({ commit }, message) {
     commit(types.REMOVE_UNREAD_MESSAGE, message.id)
-    commit(types.ADD_READED_MESSAGE, message)
+    commit(types.MARK_READ_MESSAGE, message)
   },
 }

src/store/action.js

@@ -2,23 +2,6 @@ import Util from '@/lin/util/util'
 
 let stageMap = {}
 
-const deepTravel = (obj, fuc) => {
-  if (Array.isArray(obj)) {
-    obj.forEach(item => {
-      deepTravel(item, fuc)
-    })
-    return
-  }
-  if (obj && obj.children) {
-    fuc(obj)
-    deepTravel(obj.children, fuc)
-    return
-  }
-  if (obj.name) {
-    fuc(obj)
-  }
-}
-
 export const loggedIn = state => state.loggedIn
 
 export const user = state => state.user
@@ -27,43 +10,6 @@ export const alreadyReadMessages = state => state.alreadyReadMessages
 
 export const unreadMessages = state => state.unreadMessages
 
-/**
- * 在侧边栏展示时，如果当前路由 children 属性为空，则删除该路由
- * @param {*} arr 路由配置项数据
- */
-function IterationDelateMenuChildren(arr) {
-  if (arr.length) {
-    // eslint-disable-next-line no-unused-vars
-    for (const i in arr) {
-      if (arr[i].children && !arr[i].children.length) {
-        delete arr[i]
-      } else if (arr[i].children && arr[i].children.length) {
-        IterationDelateMenuChildren(arr[i].children)
-      }
-    }
-  }
-  return arr
-}
-
-/**
- * Shaking 掉无权限路由
- * @param {array} stageConfig 路由配置项数据
- * @param {array} permissions 当前登录管理员所拥有的权限集合
- * @param {object} currentUser 当前登录管理员
- */
-function permissionShaking(stageConfig, permissions, currentUser) {
-  const shookConfig = stageConfig.filter(route => {
-    if (Util.hasPermission(permissions, route, currentUser)) {
-      if (route.children && route.children.length) {
-        route.children = permissionShaking(route.children, permissions, currentUser)
-      }
-      return true
-    }
-    return false
-  })
-  return IterationDelateMenuChildren(shookConfig)
-}
-
 /**
  * 获取有权限的舞台配置
  * @param {*} state
@@ -216,3 +162,62 @@ export const getStageInfo = state => {
     return stageInfo
   }
 }
+
+/**
+ * 递归
+ * @param {*} obj
+ * @param {*} fuc
+ */
+function deepTravel(obj, fuc) {
+  if (Array.isArray(obj)) {
+    obj.forEach(item => {
+      deepTravel(item, fuc)
+    })
+    return
+  }
+  if (obj && obj.children) {
+    fuc(obj)
+    deepTravel(obj.children, fuc)
+    return
+  }
+  if (obj.name) {
+    fuc(obj)
+  }
+}
+
+/**
+ * 在侧边栏展示时，如果当前路由 children 属性为空，则删除该路由
+ * @param {*} arr 路由配置项数据
+ */
+function IterationDelateMenuChildren(arr) {
+  if (arr.length) {
+    // eslint-disable-next-line no-unused-vars
+    for (const i in arr) {
+      if (arr[i].children && !arr[i].children.length) {
+        delete arr[i]
+      } else if (arr[i].children && arr[i].children.length) {
+        IterationDelateMenuChildren(arr[i].children)
+      }
+    }
+  }
+  return arr
+}
+
+/**
+ * Shaking 掉无权限路由
+ * @param {array} stageConfig 路由配置项数据
+ * @param {array} permissions 当前登录管理员所拥有的权限集合
+ * @param {object} currentUser 当前登录管理员
+ */
+function permissionShaking(stageConfig, permissions, currentUser) {
+  const shookConfig = stageConfig.filter(route => {
+    if (Util.hasPermission(permissions, route, currentUser)) {
+      if (route.children && route.children.length) {
+        route.children = permissionShaking(route.children, permissions, currentUser)
+      }
+      return true
+    }
+    return false
+  })
+  return IterationDelateMenuChildren(shookConfig)
+}

src/store/getter.js

@@ -1,5 +1,6 @@
 import { createStore, createLogger } from 'vuex'
 import VuexPersistence from 'vuex-persist'
+
 import mutations from './mutation'
 import state from './state'
 import * as getters from './getter'
@@ -8,9 +9,8 @@ import actions from './action'
 const vuexLocal = new VuexPersistence({
   storage: window.localStorage,
   reducer: stateData => ({
-    // eslint-disable-line
-    loggedIn: stateData.loggedIn,
     user: stateData.user,
+    loggedIn: stateData.loggedIn,
     permissions: stateData.permissions,
   }),
 })
@@ -20,8 +20,8 @@ const debug = process.env.NODE_ENV !== 'production'
 export default createStore({
   state,
   getters,
-  mutations,
   actions,
-  plugins: debug ? [vuexLocal.plugin, createLogger()] : [vuexLocal.plugin],
+  mutations,
   strict: debug,
+  plugins: debug ? [vuexLocal.plugin, createLogger()] : [vuexLocal.plugin],
 })