Merge a2485a5a46 into 33a93a12b4

src/layout/components/TagsView/ScrollPane.vue

@@ -34,12 +34,16 @@ export default {
     emitScroll() {
       this.$emit('scroll')
     },
-    moveToTarget(currentTag) {
+    moveToTarget(currentRoute) {
       const $container = this.$refs.scrollContainer.$el
       const $containerWidth = $container.offsetWidth
       const $scrollWrapper = this.scrollWrapper
-      const tagList = this.$parent.$refs.tag
-
+      const tagList = Array.from(window.document.querySelectorAll('#tags-view-container .tags-view-item'))
+      const currentTag = tagList.find(i => i.dataset.fullPath === currentRoute.fullPath)
+      // when jumping `/redirect/` at the beginning of the path will not match
+      if (!currentTag) {
+        return
+      }
       let firstTag = null
       let lastTag = null
 
@@ -60,10 +64,10 @@ export default {
         const nextTag = tagList[currentIndex + 1]
 
         // the tag's offsetLeft after of nextTag
-        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
+        const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing
 
         // the tag's offsetLeft before of prevTag
-        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+        const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing
 
         if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
           $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth

src/layout/components/TagsView/index.vue

@@ -1,25 +1,28 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
     <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
-      <router-link
-        v-for="tag in visitedViews"
-        ref="tag"
-        :key="tag.path"
-        :class="isActive(tag)?'active':''"
-        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
-        tag="span"
-        class="tags-view-item"
-        @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
-        @contextmenu.prevent.native="openMenu(tag,$event)"
-      >
-        {{ tag.title }}
-        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
-      </router-link>
+      <div ref="sortable-wrap">
+        <router-link
+          v-for="tag in visitedViews"
+          :key="tag.path"
+          :class="{ active: isActive(tag), sortable: !isAffix(tag) }"
+          :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
+          tag="span"
+          class="tags-view-item"
+          :data-full-path="tag.fullPath"
+          @click.middle.native="!isAffix(tag)?closeSelectedTag(tag):''"
+          @contextmenu.prevent.native="openMenu(tag,$event)"
+        >
+          {{ tag.title }}
+          <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
+        </router-link>
+      </div>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
       <li @click="refreshSelectedTag(selectedTag)">Refresh</li>
       <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">Close</li>
       <li @click="closeOthersTags">Close Others</li>
+      <li v-if="!isLastView()" @click="closeRightTags">Close to the Right</li>
       <li @click="closeAllTags(selectedTag)">Close All</li>
     </ul>
   </div>
@@ -28,6 +31,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import Sortable from 'sortablejs'
 
 export default {
   components: { ScrollPane },
@@ -64,6 +68,7 @@ export default {
   mounted() {
     this.initTags()
     this.addTags()
+    this.initSortableTags()
   },
   methods: {
     isActive(route) {
@@ -72,6 +77,13 @@ export default {
     isAffix(tag) {
       return tag.meta && tag.meta.affix
     },
+    isLastView() {
+      try {
+        return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
+      } catch (err) {
+        return false
+      }
+    },
     filterAffixTags(routes, basePath = '/') {
       let tags = []
       routes.forEach(route => {
@@ -104,24 +116,34 @@ export default {
     },
     addTags() {
       const { name } = this.$route
-      if (name) {
+      if (!name) {
+        return
+      }
+      const res = this.visitedViews.find(v => v.path === this.$route.path)
+      if (res) {
+        // when query is different then update
+        if (res.fullPath !== this.$route.fullPath) {
+          this.$store.dispatch('tagsView/updateVisitedView', this.$route)
+        }
+      } else {
         this.$store.dispatch('tagsView/addView', this.$route)
       }
-      return false
+    },
+    initSortableTags() {
+      this.$nextTick(() => {
+        new Sortable(this.$refs['sortable-wrap'], {
+          draggable: '.sortable',
+          animation: 200,
+          onUpdate: event => {
+            const { oldIndex, newIndex } = event
+            this.$store.dispatch('tagsView/moveView', { oldIndex, newIndex })
+          }
+        })
+      })
     },
     moveToCurrentTag() {
-      const tags = this.$refs.tag
       this.$nextTick(() => {
-        for (const tag of tags) {
-          if (tag.to.path === this.$route.path) {
-            this.$refs.scrollPane.moveToTarget(tag)
-            // when query is different then update
-            if (tag.to.fullPath !== this.$route.fullPath) {
-              this.$store.dispatch('tagsView/updateVisitedView', this.$route)
-            }
-            break
-          }
-        }
+        this.$refs.scrollPane.moveToTarget(this.$route)
       })
     },
     refreshSelectedTag(view) {
@@ -147,6 +169,13 @@ export default {
         this.moveToCurrentTag()
       })
     },
+    closeRightTags() {
+      this.$store.dispatch('tagsView/delRightTags', this.selectedTag).then(visitedViews => {
+        if (!visitedViews.find(i => i.fullPath === this.$route.fullPath)) {
+          this.toLastView(visitedViews)
+        }
+      })
+    },
     closeAllTags(view) {
       this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => {
         if (this.affixTags.some(tag => tag.path === view.path)) {
@@ -155,7 +184,7 @@ export default {
         this.toLastView(visitedViews, view)
       })
     },
-    toLastView(visitedViews, view) {
+    toLastView(visitedViews, view = {}) {
       const latestView = visitedViews.slice(-1)[0]
       if (latestView) {
         this.$router.push(latestView.fullPath)

src/store/modules/tagsView.js

@@ -63,6 +63,25 @@ const mutations = {
         break
       }
     }
+  },
+  MOVE_VIEW: (state, { oldIndex, newIndex }) => {
+    state.visitedViews.splice(newIndex, 0, state.visitedViews.splice(oldIndex, 1)[0])
+  },
+  DEL_RIGHT_VIEWS: (state, view) => {
+    const index = state.visitedViews.findIndex(v => v.path === view.path)
+    if (index === -1) {
+      return
+    }
+    state.visitedViews = state.visitedViews.filter((item, idx) => {
+      if (idx <= index || (item.meta && item.meta.affix)) {
+        return true
+      }
+      const i = state.cachedViews.indexOf(item.name)
+      if (i > -1) {
+        state.cachedViews.splice(i, 1)
+      }
+      return false
+    })
   }
 }
 
@@ -149,6 +168,15 @@ const actions = {
 
   updateVisitedView({ commit }, view) {
     commit('UPDATE_VISITED_VIEW', view)
+  },
+  moveView({ commit }, arg) {
+    commit('MOVE_VIEW', arg)
+  },
+  delRightTags({ commit }, view) {
+    return new Promise(resolve => {
+      commit('DEL_RIGHT_VIEWS', view)
+      resolve([...state.visitedViews])
+    })
   }
 }