From 0a3a3d0e2d8428b61ef1510eb850ff8ec41fb615 Mon Sep 17 00:00:00 2001
From: xieyuhang <xieyuhang@qq.com>
Date: Wed, 3 Jun 2020 12:26:23 +0800
Subject: [PATCH 1/5] feat: add tagviews drag sort

---
 src/layout/components/TagsView/ScrollPane.vue |  9 +--
 src/layout/components/TagsView/index.vue      | 66 +++++++++++--------
 src/store/modules/tagsView.js                 |  6 ++
 3 files changed, 50 insertions(+), 31 deletions(-)

diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 34a7e55f..655b6cce 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -34,11 +34,12 @@ 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)
 
       let firstTag = null
       let lastTag = null
@@ -60,10 +61,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
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index d2a56e70..7a3d3067 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,20 +1,22 @@
 <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>
@@ -28,6 +30,7 @@
 <script>
 import ScrollPane from './ScrollPane'
 import path from 'path'
+import Sortable from 'sortablejs'
 
 export default {
   components: { ScrollPane },
@@ -64,6 +67,7 @@ export default {
   mounted() {
     this.initTags()
     this.addTags()
+    this.initSortableTags()
   },
   methods: {
     isActive(route) {
@@ -104,24 +108,32 @@ 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() {
+      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) {
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index 57e72421..ab2ec298 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -63,6 +63,9 @@ const mutations = {
         break
       }
     }
+  },
+  MOVE_VIEW: (state, { oldIndex, newIndex }) => {
+    state.visitedViews.splice(newIndex, 0, state.visitedViews.splice(oldIndex, 1)[0])
   }
 }
 
@@ -149,6 +152,9 @@ const actions = {
 
   updateVisitedView({ commit }, view) {
     commit('UPDATE_VISITED_VIEW', view)
+  },
+  moveView({ commit }, arg) {
+    commit('MOVE_VIEW', arg)
   }
 }
 

From 92fcc8c50b6249d08182468b052dc2031d1e26cc Mon Sep 17 00:00:00 2001
From: xieyuhang <xieyuhang@qq.com>
Date: Wed, 3 Jun 2020 13:24:04 +0800
Subject: [PATCH 2/5] fix: error in tag refresh

---
 src/layout/components/TagsView/ScrollPane.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 655b6cce..33c3375f 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -40,7 +40,10 @@ export default {
       const $scrollWrapper = this.scrollWrapper
       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
 

From c320c1c63f9e3c8902362e6b5e73ccfc3460f44b Mon Sep 17 00:00:00 2001
From: xieyuhang <xieyuhang@qq.com>
Date: Wed, 3 Jun 2020 13:37:26 +0800
Subject: [PATCH 3/5] feat: add `Close to the Right` option on tagsview

---
 src/layout/components/TagsView/index.vue | 13 ++++++++++++-
 src/store/modules/tagsView.js            | 19 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 7a3d3067..b3e6f100 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -22,6 +22,7 @@
       <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>
@@ -76,6 +77,9 @@ export default {
     isAffix(tag) {
       return tag.meta && tag.meta.affix
     },
+    isLastView() {
+      return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
+    },
     filterAffixTags(routes, basePath = '/') {
       let tags = []
       routes.forEach(route => {
@@ -159,6 +163,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)) {
@@ -167,7 +178,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)
diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index ab2ec298..b8bb520f 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -66,6 +66,19 @@ const mutations = {
   },
   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
+    }
+    const arr = state.visitedViews.splice(index + 1)
+    arr.forEach(item => {
+      const index = state.cachedViews.indexOf(item.name)
+      if (index > -1) {
+        state.cachedViews.splice(index, 1)
+      }
+    })
   }
 }
 
@@ -155,6 +168,12 @@ const actions = {
   },
   moveView({ commit }, arg) {
     commit('MOVE_VIEW', arg)
+  },
+  delRightTags({ commit }, view) {
+    return new Promise(resolve => {
+      commit('DEL_RIGHT_VIEWS', view)
+      resolve([...state.visitedViews])
+    })
   }
 }
 

From 820ffdf3a77b05fd73d32c7780aa289d52405f12 Mon Sep 17 00:00:00 2001
From: xieyuhang <xieyuhang@qq.com>
Date: Wed, 3 Jun 2020 13:45:26 +0800
Subject: [PATCH 4/5] fix: compatible

---
 src/layout/components/TagsView/index.vue | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index b3e6f100..4e872a4c 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -78,7 +78,11 @@ export default {
       return tag.meta && tag.meta.affix
     },
     isLastView() {
-      return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
+      try {
+        return this.selectedTag.fullPath === this.visitedViews[this.visitedViews.length - 1].fullPath
+      } catch (err) {
+        return false
+      }
     },
     filterAffixTags(routes, basePath = '/') {
       let tags = []
@@ -126,13 +130,15 @@ export default {
       }
     },
     initSortableTags() {
-      new Sortable(this.$refs['sortable-wrap'], {
-        draggable: '.sortable',
-        animation: 200,
-        onUpdate: event => {
-          const { oldIndex, newIndex } = event
-          this.$store.dispatch('tagsView/moveView', { oldIndex, newIndex })
-        }
+      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() {

From a2485a5a46831e12ab6e0504b638743dba93c3c9 Mon Sep 17 00:00:00 2001
From: xieyuhang <xieyuhang@qq.com>
Date: Wed, 3 Jun 2020 15:45:58 +0800
Subject: [PATCH 5/5] fix: Not allowed to close tags

---
 src/store/modules/tagsView.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js
index b8bb520f..4b90c289 100644
--- a/src/store/modules/tagsView.js
+++ b/src/store/modules/tagsView.js
@@ -72,12 +72,15 @@ const mutations = {
     if (index === -1) {
       return
     }
-    const arr = state.visitedViews.splice(index + 1)
-    arr.forEach(item => {
-      const index = state.cachedViews.indexOf(item.name)
-      if (index > -1) {
-        state.cachedViews.splice(index, 1)
+    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
     })
   }
 }