migration(*): refactored sidebar logic to support unlimited menus

Author: vanoneang

package.json

@@ -18,17 +18,18 @@
     "@tinymce/tinymce-vue": "^2.0.0",
     "@vue/composition-api": "^0.5.0",
     "axios": "~0.18.0",
-    "element-plus": "^1.0.1-alpha.14",
+    "core-js": "^3.6.5",
+    "element-plus": "^1.0.1-alpha.21",
     "event-source-polyfill": "^1.0.7",
     "fastscan": "^1.0.4",
     "good-storage": "^1.1.0",
     "js-cookie": "^2.2.0",
     "lodash": "^4.17.14",
+    "mitt": "^2.1.0",
     "moment": "^2.24.0",
     "photoswipe": "^4.1.2",
     "screenfull": "^4.2.0",
     "tinymce": "^5.0.1",
-    "core-js": "^3.6.5",
     "vue": "^3.0.0",
     "vue-awesome-swiper": "^3.1.3",
     "vue-croppa": "^1.3.8",

public/iconfont.css

@@ -41,7 +41,7 @@
 <script>
 // photoswipe接口文档 http://photoswipe.com/documentation/api.html
 
-import { Loading } from 'element-plus'
+import { ElLoading } from 'element-plus'
 import 'photoswipe/dist/photoswipe.css'
 import 'photoswipe/dist/default-skin/default-skin.css'
 import PhotoSwipe from 'photoswipe/dist/photoswipe'
@@ -114,7 +114,7 @@ export default {
       options = Object.assign(defaultOptions, options, {
         index: imageIndex,
       })
-      const loadingInstance = Loading.service()
+      const loadingInstance = ElLoading.service()
       const galleryElement = this.$refs.myGallery
       this.radom = createId()
       let pswpElement = this.$refs.pswpWrap

src/component/base/preview/preview.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script>
+import emitter from 'lin/util/emitter'
+
 export default {
   name: 'CloseTab',
-  inject: ['eventBus'],
   methods: {
     closeReuseTab() {
-      this.eventBus.$emit('clearTap')
+      emitter.emit('clearTap')
     },
   },
 }

src/component/layout/clear-tab.vue

@@ -1,9 +1,9 @@
 import NavBar from './nav-bar'
-import SideBar from './side-bar'
+import Sidebar from './sidebar/sidebar.vue'
 import AppMain from './app-main'
 import ReuseTab from './reuse-tab'
 import MenuTab from './menu-tab.vue'
 import BackTop from './back-top.vue'
 import User from './user.vue'
 
-export { NavBar, SideBar, AppMain, ReuseTab, MenuTab, BackTop, User }
+export { NavBar, Sidebar, AppMain, ReuseTab, MenuTab, BackTop, User }

src/component/layout/index.js

@@ -27,6 +27,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
+import emitter from 'lin/util/emitter'
 import { swiper, swiperSlide } from 'vue-awesome-swiper'
 
 import 'swiper/dist/css/swiper.css' // eslint-disable-line
@@ -88,13 +89,12 @@ export default {
     },
     histories(arr) {
       if (arr.length < 2) {
-        this.eventBus.$emit('noReuse')
+        emitter.emit('noReuse')
       } else {
-        this.eventBus.$emit('hasReuse')
+        emitter.emit('hasReuse')
       }
     },
   },
-  inject: ['eventBus'],
   created() {
     // 关闭窗口时执行
     window.onbeforeunload = () => {
@@ -113,7 +113,7 @@ export default {
   },
   mounted() {
     this.init()
-    this.eventBus.$on('clearTap', () => {
+    emitter.on('clearTap', () => {
       this.histories = []
     })
   },