From e142bdf9a5af32f4a0bfd8cb23efeb16f073431f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Thu, 30 Dec 2021 23:48:00 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(TagsView):=20tagsView=E6=94=B9?=
 =?UTF-8?q?=E9=80=A0setup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/TagsView/ScrollPane.vue | 123 +++++++++---------
 src/layout/components/TagsView/index.vue      |  62 ++++-----
 2 files changed, 85 insertions(+), 100 deletions(-)

diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index b9130c7d..1b6fbee9 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -1,84 +1,81 @@
 <template>
-  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
+  <el-scrollbar
+      ref="scrollContainerRef"
+      :vertical="false"
+      class="scroll-container"
+      @wheel.prevent="handleScroll">
     <slot/>
   </el-scrollbar>
 </template>
 
-<script lang="ts">
-import {defineComponent, reactive, ref, toRefs, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
+<script setup lang="ts">
+import {ref, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
+import {tagsViewStoreHook} from "@store/modules/tagsView";
 
-export default defineComponent({
-  emits: ['scroll'],
-  setup(_, context) {
-    const scrollContainer = ref(null)
-    const scrollWrapper = computed(() => {
-      return (scrollContainer.value as any).$refs.wrap as HTMLElement
-    })
-    const {ctx} = getCurrentInstance() as any
-    const tagAndTagSpacing = 4
+const tagAndTagSpacing = ref(4)
+const scrollContainerRef = ref(null)
 
-    const state = reactive({
-      handleScroll: (e: WheelEvent) => {
-        const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
-        scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
-      },
-      moveToCurrentTag: (currentTag: HTMLElement) => {
-        const container = (scrollContainer.value as any).$el as HTMLElement
-        const containerWidth = container.offsetWidth
-        const tagList = ctx.$parent.$refs.tag as any[]
-        let firstTag = null
-        let lastTag = null
+const emits = defineEmits()
+const emitScroll = () => {
+  emits('scroll')
+}
 
-        // find first tag and last tag
-        if (tagList.length > 0) {
-          firstTag = tagList[0]
-          lastTag = tagList[tagList.length - 1]
-        }
+const {ctx} = getCurrentInstance()
+const scrollWrapper = computed(() => {
+  return (scrollContainerRef.value as any).$refs.wrap as HTMLElement
+})
 
-        if (firstTag === currentTag) {
-          scrollWrapper.value.scrollLeft = 0
-        } else if (lastTag === currentTag) {
-          scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollWidth - containerWidth
-        } else {
-          // find preTag and nextTag
-          const currentIndex = tagList.findIndex(item => item === currentTag)
-          const prevTag = tagList[currentIndex - 1]
-          const nextTag = tagList[currentIndex + 1]
-          // the tag's offsetLeft after of nextTag
-          const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
-          // the tag's offsetLeft before of prevTag
-          const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
+onMounted(() => {
+  console.log('scrollWrapper', scrollWrapper.value)
+  //scrollWrapper.value.addEventListener('scroll', emitScroll, true);
+})
 
-          if (afterNextTagOffsetLeft > scrollWrapper.value.scrollLeft + containerWidth) {
-            scrollWrapper.value.scrollLeft = afterNextTagOffsetLeft - containerWidth
-          } else if (beforePrevTagOffsetLeft < scrollWrapper.value.scrollLeft) {
-            scrollWrapper.value.scrollLeft = beforePrevTagOffsetLeft
-          }
-        }
-      }
-    })
+onBeforeUnmount(() => {
+  // scrollWrapper.value.removeEventListener('scroll', emitScroll);
+})
 
-    const emitScroll = () => {
-      context.emit('scroll')
-    }
+function handleScroll(e: WheelEvent) {
+  const eventDelta = (e as any).wheelDelta || -e.deltaY * 40
+  scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
+}
 
-    onMounted(() => {
-      //scrollWrapper.value.addEventListener('scroll', emitScroll, true)
-    })
 
-    onBeforeUnmount(() => {
-      //scrollWrapper.value.removeEventListener('scroll', emitScroll)
-    })
+function moveToCurrentTag(currentTag: HTMLElement) {
+  const container = (scrollContainerRef.value as any).$el as HTMLElement
+  const containerWidth = container.offsetWidth
+  const tagList = ctx.$parent.$refs.tag as any[]
 
-    return {
-      scrollContainer,
-      ...toRefs(state)
+  let firstTag = null
+  let lastTag = null
+
+  if (tagList.length > 0) {
+    firstTag = tagList[0]
+    lastTag = tagList[tagList.length - 1]
+  }
+
+  if (firstTag === currentTag) {
+    scrollWrapper.value.scrollLeft = 0
+  } else if (lastTag === currentTag) {
+    scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollWidth - containerWidth
+  } else {
+    const currentIndex = tagList.findIndex(item => item === currentTag)
+    const prevTag = tagList[currentIndex - 1]
+    const nextTag = tagList[currentIndex + 1]
+
+    // the tag's offsetLeft after of nextTag
+    const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing.value
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing.value
+
+    if (afterNextTagOffsetLeft > scrollWrapper.value.scrollLeft + containerWidth) {
+      scrollWrapper.value.scrollLeft = afterNextTagOffsetLeft - containerWidth
+    } else if (beforePrevTagOffsetLeft < scrollWrapper.value.scrollLeft) {
+      scrollWrapper.value.scrollLeft = beforePrevTagOffsetLeft
     }
   }
-})
+}
 </script>
 
-
 <style lang="scss" scoped>
 .scroll-container {
   .el-scrollbar__bar {
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 4382390b..83cdad4d 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="tags-view-container" class="tags-view-container">
-    <scroll-pane ref="scrollPane" class="tags-view-wrapper" @scroll="handleScroll">
+    <scroll-pane ref="scrollPaneRef" class="tags-view-wrapper" @scroll="handleScroll">
       <router-link
           v-for="tag in visitedViews"
           ref="tag"
@@ -13,11 +13,9 @@
           @contextmenu.prevent.native="openMenu(tag,$event)"
       >
         {{ tag.meta.title }}
-        <span v-if="!isAffix(tag)" @click.prevent.stop="closeSelectedTag(tag)">
-          <el-icon :size="8">
-           <close />
-          </el-icon>
-        </span>
+        <span v-if="!isAffix(tag)" class="el-icon-close"  @click.prevent.stop="closeSelectedTag(tag)"/>
+
+
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -29,27 +27,25 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 
-import {Close} from '@element-plus/icons'
 import {tagsViewStoreHook} from '@/store/modules/tagsView'
 import {usePermissionStoreHook} from '@/store/modules/Permission'
-import ScrollPane from './ScrollPane.vue'
 import path from 'path-browserify'
-import {
-  defineComponent,
-  computed,
-  getCurrentInstance,
-  nextTick,
-  onBeforeMount,
-  reactive,
-  ref,
-  toRefs,
-  watch
-} from "vue";
+import { defineComponent, computed, getCurrentInstance, nextTick, onBeforeMount, reactive, ref, toRefs, watch} from "vue";
 import {RouteRecordRaw, useRoute, useRouter} from 'vue-router'
 import {TagView} from "@store/interface";
 
+import ScrollPane from './ScrollPane.vue'
+import {Close} from '@element-plus/icons'
+
+const {ctx} = getCurrentInstance() as any
+const router = useRouter()
+const route = useRoute();
+
+const visitedViews = computed(() => tagsViewStoreHook().visitedViews)
+const routes = computed(() =>usePermissionStoreHook().routes)
+
 export default defineComponent({
   components: {ScrollPane,Close},
   setup() {
@@ -232,14 +228,13 @@ export default defineComponent({
 
 </script>
 
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .tags-view-container {
   height: 34px;
   width: 100%;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
-
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
@@ -254,22 +249,18 @@ export default defineComponent({
       font-size: 12px;
       margin-left: 5px;
       margin-top: 4px;
-
       &:first-of-type {
         margin-left: 15px;
       }
-
       &:last-of-type {
         margin-right: 15px;
       }
-
       &.active {
         background-color: #42b983;
         color: #fff;
         border-color: #42b983;
-
         &::before {
-          content: '';
+          content: "";
           background: #fff;
           display: inline-block;
           width: 8px;
@@ -281,7 +272,6 @@ export default defineComponent({
       }
     }
   }
-
   .contextmenu {
     margin: 0;
     background: #fff;
@@ -293,13 +283,11 @@ export default defineComponent({
     font-size: 12px;
     font-weight: 400;
     color: #333;
-    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
-
+    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
-
       &:hover {
         background: #eee;
       }
@@ -318,20 +306,20 @@ export default defineComponent({
       vertical-align: 2px;
       border-radius: 50%;
       text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
       transform-origin: 100% 50%;
-
       &:before {
-        transform: scale(.6);
+        transform: scale(0.6);
         display: inline-block;
         vertical-align: -3px;
       }
-
       &:hover {
         background-color: #b4bccc;
         color: #fff;
+        width: 12px !important;
+        height: 12px !important;
       }
     }
   }
 }
-</style>
+</style>
\ No newline at end of file

From c04c9c7dddfe09f680a7fb6b1b13f79c86ba7018 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9C=89=E6=9D=A5=E6=8A=80=E6=9C=AF?= <1490493387@qq.com>
Date: Sat, 1 Jan 2022 00:11:10 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(TagsView):=20tagsView=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/components/TagsView/ScrollPane.vue |  60 ++-
 src/layout/components/TagsView/index.vue      | 408 ++++++++++--------
 src/store/modules/tagsView.ts                 | 114 ++---
 src/views/redirect/index.vue                  |  23 +-
 4 files changed, 331 insertions(+), 274 deletions(-)

diff --git a/src/layout/components/TagsView/ScrollPane.vue b/src/layout/components/TagsView/ScrollPane.vue
index 1b6fbee9..e106f188 100644
--- a/src/layout/components/TagsView/ScrollPane.vue
+++ b/src/layout/components/TagsView/ScrollPane.vue
@@ -10,7 +10,8 @@
 
 <script setup lang="ts">
 import {ref, computed, onMounted, onBeforeUnmount, getCurrentInstance} from "vue";
-import {tagsViewStoreHook} from "@store/modules/tagsView";
+import {tagsViewStoreHook} from "@store/modules/tagsView"
+
 
 const tagAndTagSpacing = ref(4)
 const scrollContainerRef = ref(null)
@@ -20,7 +21,7 @@ const emitScroll = () => {
   emits('scroll')
 }
 
-const {ctx} = getCurrentInstance()
+const {ctx} = getCurrentInstance() as any
 const scrollWrapper = computed(() => {
   return (scrollContainerRef.value as any).$refs.wrap as HTMLElement
 })
@@ -39,41 +40,56 @@ function handleScroll(e: WheelEvent) {
   scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollLeft + eventDelta / 4
 }
 
-
-function moveToCurrentTag(currentTag: HTMLElement) {
-  const container = (scrollContainerRef.value as any).$el as HTMLElement
-  const containerWidth = container.offsetWidth
-  const tagList = ctx.$parent.$refs.tag as any[]
+function moveToTarget(currentTag) {
+  const $container = ctx.$refs.scrollContainer.$el
+  const $containerWidth = $container.offsetWidth
+  const $scrollWrapper = scrollWrapper.value;
 
   let firstTag = null
   let lastTag = null
 
-  if (tagList.length > 0) {
-    firstTag = tagList[0]
-    lastTag = tagList[tagList.length - 1]
+  // find first tag and last tag
+  if (visitedViews.value.length > 0) {
+    firstTag = visitedViews.value[0]
+    lastTag = visitedViews.value[visitedViews.value.length - 1]
   }
 
   if (firstTag === currentTag) {
-    scrollWrapper.value.scrollLeft = 0
+    $scrollWrapper.scrollLeft = 0
   } else if (lastTag === currentTag) {
-    scrollWrapper.value.scrollLeft = scrollWrapper.value.scrollWidth - containerWidth
+    $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
   } else {
-    const currentIndex = tagList.findIndex(item => item === currentTag)
-    const prevTag = tagList[currentIndex - 1]
-    const nextTag = tagList[currentIndex + 1]
+    const tagListDom = document.getElementsByClassName('tags-view-item');
+    const currentIndex = visitedViews.value.findIndex(item => item === currentTag)
+    let prevTag = null
+    let nextTag = null
+    for (const k in tagListDom) {
+      if (k !== 'length' && Object.hasOwnProperty.call(tagListDom, k)) {
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex - 1].path) {
+          prevTag = tagListDom[k];
+        }
+        if (tagListDom[k].dataset.path === visitedViews.value[currentIndex + 1].path) {
+          nextTag = tagListDom[k];
+        }
+      }
+    }
 
     // the tag's offsetLeft after of nextTag
-    const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing.value
-    // the tag's offsetLeft before of prevTag
-    const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing.value
+    const afterNextTagOffsetLeft = nextTag.offsetLeft + nextTag.offsetWidth + tagAndTagSpacing.value
 
-    if (afterNextTagOffsetLeft > scrollWrapper.value.scrollLeft + containerWidth) {
-      scrollWrapper.value.scrollLeft = afterNextTagOffsetLeft - containerWidth
-    } else if (beforePrevTagOffsetLeft < scrollWrapper.value.scrollLeft) {
-      scrollWrapper.value.scrollLeft = beforePrevTagOffsetLeft
+    // the tag's offsetLeft before of prevTag
+    const beforePrevTagOffsetLeft = prevTag.offsetLeft - tagAndTagSpacing.value
+    if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
+      $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
+    } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
+      $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
     }
   }
 }
+
+defineExpose({
+  moveToTarget
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/TagsView/index.vue b/src/layout/components/TagsView/index.vue
index 83cdad4d..ae589c04 100644
--- a/src/layout/components/TagsView/index.vue
+++ b/src/layout/components/TagsView/index.vue
@@ -3,36 +3,59 @@
     <scroll-pane ref="scrollPaneRef" 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)"
+          @click.middle="!isAffix(tag)?closeSelectedTag(tag):''"
+          @contextmenu.prevent="openMenu(tag,$event)"
       >
         {{ tag.meta.title }}
-        <span v-if="!isAffix(tag)" class="el-icon-close"  @click.prevent.stop="closeSelectedTag(tag)"/>
-
-
+        <span v-if="!isAffix(tag)" class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)">
+          <close class="el-icon-close" style="width: 1em; height: 1em;vertical-align: middle;"/>
+        </span>
       </router-link>
     </scroll-pane>
     <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
-      <li @click="refreshSelectedTag(selectedTag)">刷新</li>
-      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">关闭</li>
-      <li @click="closeOthersTags">关闭其它</li>
-      <li @click="closeAllTags(selectedTag)">关闭所有</li>
+      <li @click="refreshSelectedTag(selectedTag)">
+        <refresh-right style="width: 1em; height: 1em;"/> 刷新
+      </li>
+      <li v-if="!isAffix(selectedTag)" @click="closeSelectedTag(selectedTag)">
+        <close style="width: 1em; height: 1em;"/>关闭
+      </li>
+      <li @click="closeOthersTags">
+        <circle-close style="width: 1em; height: 1em;"/>关闭其它
+      </li>
+      <li v-if="!isFirstView()" @click="closeLeftTags">
+        <back style="width: 1em; height: 1em;"/>关闭左侧
+      </li>
+      <li v-if="!isLastView()" @click="closeRightTags">
+        <right style="width: 1em; height: 1em;"/>关闭右侧
+      </li>
+      <li @click="closeAllTags(selectedTag)">
+        <circle-close style="width: 1em; height: 1em;"/>关闭所有
+      </li>
     </ul>
   </div>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
 
 import {tagsViewStoreHook} from '@/store/modules/tagsView'
 import {usePermissionStoreHook} from '@/store/modules/Permission'
 import path from 'path-browserify'
-import { defineComponent, computed, getCurrentInstance, nextTick, onBeforeMount, reactive, ref, toRefs, watch} from "vue";
+import {
+  defineComponent,
+  computed,
+  getCurrentInstance,
+  nextTick,
+  onBeforeMount,
+  reactive,
+  ref,
+  toRefs,
+  watch,
+  onMounted
+} from "vue";
 import {RouteRecordRaw, useRoute, useRouter} from 'vue-router'
 import {TagView} from "@store/interface";
 
@@ -44,187 +67,194 @@ const router = useRouter()
 const route = useRoute();
 
 const visitedViews = computed(() => tagsViewStoreHook().visitedViews)
-const routes = computed(() =>usePermissionStoreHook().routes)
+const routes = computed(() => usePermissionStoreHook().routes)
 
-export default defineComponent({
-  components: {ScrollPane,Close},
-  setup() {
-    const router = useRouter()
-    const instance = getCurrentInstance()
-    const currentRoute = useRoute()
-    const scrollPaneRef = ref(null)
-    const {ctx} = instance as any
+const affixTags = ref([]);
+const visible = ref(false);
+const selectedTag = ref({});
+const scrollPaneRef = ref(null);
+const left = ref(0);
+const top = ref(0);
 
-    const toLastView=(visitedViews:TagView[],view:TagView)=>{
-      const latestView = visitedViews.slice(-1)[0]
-      if (latestView && latestView.fullPath) {
-        router.push(latestView.fullPath)
-      } else {
-        if (view.name === 'Dashboard') {
-          router.push({path: '/redirect' + view.fullPath})
-        } else {
-          router.push('/')
-        }
-      }
-    }
+watch(route, () => {
+  addTags()
+  moveToCurrentTag()
+})
 
-    const state =reactive({
-      visible: false,
-      top: 0,
-      left: 0,
-      selectedTag: {} as TagView,
-      affixTags: [] as TagView[],
-      isActive: (route:TagView) => {
-        return route.path === currentRoute.path
-      },
-      isAffix: (tag:TagView) => {
-        return tag.meta && tag.meta.affix
-      },
-      refreshSelectedTag: (view: TagView) => {
-        tagsViewStoreHook().delCachedView(view)
-        const { fullPath } = view
-        nextTick(() => {
-          router.replace({ path: '/redirect' + fullPath }).catch(err => {
-            console.warn(err)
-          })
-        })
-      },
-      closeSelectedTag: (view: TagView) => {
-        tagsViewStoreHook().delView(view);
-        if (state.isActive(view)) {
-
-          toLastView(tagsViewStoreHook().visitedViews, view)
-        }
-      },
-      closeOthersTags: () => {
-        if (state.selectedTag.fullPath !== currentRoute.path && state.selectedTag.fullPath !== undefined) {
-          router.push(state.selectedTag.fullPath)
-        }
-        tagsViewStoreHook().delOthersViews(state.selectedTag as TagView)
-      },
-      closeAllTags: (view: TagView) => {
-        tagsViewStoreHook().delAllViews(undefined);
-        if (state.affixTags.some(tag => tag.path === currentRoute.path)) {
-          return
-        }
-        toLastView(tagsViewStoreHook().visitedViews, view)
-      },
-      openMenu: (tag: TagView, e: MouseEvent) => {
-        const menuMinWidth = 105
-        const offsetLeft = ctx.$el.getBoundingClientRect().left // container margin left
-        const offsetWidth = ctx.$el.offsetWidth // container width
-        const maxLeft = offsetWidth - menuMinWidth // left boundary
-        const left = e.clientX - offsetLeft + 15 // 15: margin right
-        if (left > maxLeft) {
-          state.left = maxLeft
-        } else {
-          state.left = left
-        }
-        state.top = e.clientY
-        state.visible = true
-        state.selectedTag = tag
-      },
-      closeMenu: () => {
-        state.visible = false
-      },
-      handleScroll: () => {
-        state.closeMenu()
-      }
-
-    })
-
-    const visitedViews = computed(() => {
-      return tagsViewStoreHook().visitedViews
-    })
-    const routes = computed(() =>usePermissionStoreHook().routes)
-
-    const filterAffixTags = (routes: RouteRecordRaw[], basePath = '/') => {
-      let tags: TagView[] = []
-
-      routes.forEach(route => {
-        if (route.meta && route.meta.affix) {
-          const tagPath = path.resolve(basePath, route.path)
-          tags.push({
-            fullPath: tagPath,
-            path: tagPath,
-            name: route.name,
-            meta: { ...route.meta }
-          })
-        }
-
-        if (route.children) {
-          const childTags = filterAffixTags(route.children, route.path)
-          if (childTags.length >= 1) {
-            tags = tags.concat(childTags)
-          }
-        }
-      })
-      return tags
-    }
-
-    const initTags = () => {
-      state.affixTags = filterAffixTags(routes.value)
-      for (const tag of state.affixTags) {
-        // Must have tag name
-        if (tag.name) {
-          tagsViewStoreHook().addVisitedView(tag as TagView)
-        }
-      }
-    }
-
-    const addTags = () => {
-      if (currentRoute.name) {
-        tagsViewStoreHook().addView(currentRoute)
-      }
-      return false
-    }
-
-    const moveToCurrentTag = () => {
-      const tags = instance?.refs.tag as any[]
-      nextTick(() => {
-        if (tags === null || tags === undefined || !Array.isArray(tags)) { return }
-        for (const tag of tags) {
-          if ((tag.to as TagView).path === currentRoute.path) {
-            (scrollPaneRef.value as any).moveToCurrentTag(tag)
-            // When query is different then update
-            if ((tag.to as TagView).fullPath !== currentRoute.fullPath) {
-              tagsViewStoreHook().updateVisitedView(currentRoute)
-            }
-          }
-        }
-      })
-    }
-
-    watch(() => currentRoute.name, () => {
-      if (currentRoute.name !== 'Login') {
-        addTags()
-        moveToCurrentTag()
-      }
-    })
-
-    watch(() => state.visible, (value) => {
-      if (value) {
-        document.body.addEventListener('click', state.closeMenu)
-      } else {
-        document.body.removeEventListener('click', state.closeMenu)
-      }
-    })
-
-    // life cricle
-    onBeforeMount(() => {
-      initTags()
-      addTags()
-    })
-
-    return {
-      visitedViews,
-      routes,
-      scrollPaneRef,
-      ...toRefs(state)
-    }
+watch(visible, (value) => {
+  if (value) {
+    document.body.addEventListener('click', closeMenu)
+  } else {
+    document.body.removeEventListener('click', closeMenu)
   }
 })
 
+function filterAffixTags(routes: RouteRecordRaw[], basePath = '/') {
+  let tags: TagView[] = []
+
+  routes.forEach(route => {
+    if (route.meta && route.meta.affix) {
+      const tagPath = path.resolve(basePath, route.path)
+      tags.push({
+        fullPath: tagPath,
+        path: tagPath,
+        name: route.name,
+        meta: {...route.meta}
+      })
+    }
+
+    if (route.children) {
+      const childTags = filterAffixTags(route.children, route.path)
+      if (childTags.length >= 1) {
+        tags = tags.concat(childTags)
+      }
+    }
+  })
+  return tags
+}
+
+function initTags() {
+  const res = filterAffixTags(routes.value)
+  affixTags.value = res
+  for (const tag of res) {
+    // Must have tag name
+    if (tag.name) {
+      tagsViewStoreHook().addVisitedView(tag as TagView)
+    }
+  }
+}
+
+function addTags() {
+  if (route.name) {
+    tagsViewStoreHook().addView(route)
+  }
+  return false
+}
+
+function moveToCurrentTag() {
+  const tags = getCurrentInstance()?.refs.tag as any[]
+  nextTick(() => {
+    if (tags === null || tags === undefined || !Array.isArray(tags)) {
+      return
+    }
+    for (const tag of tags) {
+      if ((tag.to as TagView).path === route.path) {
+        (scrollPaneRef.value as any).value.moveToTarget(tag)
+        // when query is different then update
+        if ((tag.to as TagView).fullPath !== route.fullPath) {
+          tagsViewStoreHook().updateVisitedView(route)
+        }
+      }
+    }
+  })
+}
+
+function isActive(tag: TagView) {
+  return tag.path === route.path
+}
+
+function isAffix(tag: TagView) {
+  return tag.meta && tag.meta.affix
+}
+
+function isFirstView() {
+  try {
+    return selectedTag.value.fullPath === visitedViews.value[1].fullPath || selectedTag.value.fullPath === '/index'
+  } catch (err) {
+    return false
+  }
+}
+
+function isLastView() {
+  try {
+    return selectedTag.value.fullPath === visitedViews.value[visitedViews.value.length - 1].fullPath
+  } catch (err) {
+    return false
+  }
+}
+
+function refreshSelectedTag(view: TagView) {
+  tagsViewStoreHook().delCachedView(view)
+  const {fullPath} = view
+  nextTick(() => {
+
+    console.log('fullPath',fullPath)
+    router.replace({path: '/redirect' + fullPath}).catch(err => {
+      console.warn(err)
+    })
+  })
+}
+
+function toLastView(visitedViews: TagView[], view: TagView) {
+  const latestView = visitedViews.slice(-1)[0]
+  if (latestView && latestView.fullPath) {
+    router.push(latestView.fullPath)
+  } else {
+    // now the default is to redirect to the home page if there is no tags-view,
+    // you can adjust it according to your needs.
+    if (view.name === 'Dashboard') {
+      // to reload home page
+      router.replace({path: '/redirect' + view.fullPath})
+    } else {
+      router.push('/')
+    }
+  }
+}
+
+function closeSelectedTag(view: TagView) {
+  tagsViewStoreHook().delView(view).then(({visitedViews}) => {
+    if (isActive(view)) {
+      toLastView(visitedViews, view)
+    }
+  })
+}
+
+function closeLeftTags() {
+  ctx.$tab.closeLeftPage(selectedTag.value).then(visitedViews => {
+    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews)
+    }
+  })
+}
+
+function closeRightTags() {
+  ctx.$tab.closeRightPage(selectedTag.value).then(visitedViews => {
+    if (!visitedViews.find(i => i.fullPath === route.fullPath)) {
+      toLastView(visitedViews)
+    }
+  })
+}
+
+function openMenu(tag: TagView, e: MouseEvent) {
+  const menuMinWidth = 105
+  const offsetLeft = ctx.$el.getBoundingClientRect().left // container margin left
+  const offsetWidth = ctx.$el.offsetWidth // container width
+  const maxLeft = offsetWidth - menuMinWidth // left boundary
+  const l = e.clientX - offsetLeft + 15 // 15: margin right
+
+  if (l > maxLeft) {
+    left.value = maxLeft
+  } else {
+    left.value = l
+  }
+
+  top.value = e.clientY
+  visible.value = true
+  selectedTag.value = tag
+}
+
+function closeMenu() {
+  visible.value = false
+}
+
+function handleScroll() {
+  closeMenu()
+}
+
+onMounted(() => {
+  initTags()
+  addTags()
+})
 
 </script>
 
@@ -303,7 +333,7 @@ export default defineComponent({
     .el-icon-close {
       width: 16px;
       height: 16px;
-      vertical-align: 2px;
+      vertical-align: 0px;
       border-radius: 50%;
       text-align: center;
       transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
diff --git a/src/store/modules/tagsView.ts b/src/store/modules/tagsView.ts
index 8e45852c..d6abd6ff 100644
--- a/src/store/modules/tagsView.ts
+++ b/src/store/modules/tagsView.ts
@@ -1,16 +1,15 @@
-
-import { defineStore } from "pinia";
-import { store } from "@/store";
+import {defineStore} from "pinia";
+import {store} from "@/store";
 import {TagsViewState} from "@store/interface";
 
-const tagsViewStore=defineStore({
-    id:"tagsView",
-    state:():TagsViewState=>( {
+const tagsViewStore = defineStore({
+    id: "tagsView",
+    state: (): TagsViewState => ({
         visitedViews: [],
         cachedViews: []
     }),
     actions: {
-         addVisitedView ( view:any) {
+        addVisitedView(view: any) {
             if (this.visitedViews.some(v => v.path === view.path)) return
             this.visitedViews.push(
                 Object.assign({}, view, {
@@ -18,58 +17,58 @@ const tagsViewStore=defineStore({
                 })
             )
         },
-          addCachedView(view:any) {
+        addCachedView(view: any) {
             if (this.cachedViews.includes(view.name)) return
             if (!view.meta.noCache) {
                 this.cachedViews.push(view.name)
             }
         },
 
-          delVisitedView( view:any) {
-              return new Promise(resolve => {
-                  for (const [i, v] of this.visitedViews.entries()) {
-                      if (v.path === view.path) {
-                          this.visitedViews.splice(i, 1)
-                          break
-                      }
-                  }
-                  resolve([...this.visitedViews])
-              })
+        delVisitedView(view: any) {
+            return new Promise(resolve => {
+                for (const [i, v] of this.visitedViews.entries()) {
+                    if (v.path === view.path) {
+                        this.visitedViews.splice(i, 1)
+                        break
+                    }
+                }
+                resolve([...this.visitedViews])
+            })
 
         },
-          delCachedView ( view:any)  {
-              return new Promise(resolve => {
-                  const index = this.cachedViews.indexOf(view.name)
-                  index > -1 && this.cachedViews.splice(index, 1)
-                  resolve([...this.cachedViews])
-              })
+        delCachedView(view: any) {
+            return new Promise(resolve => {
+                const index = this.cachedViews.indexOf(view.name)
+                index > -1 && this.cachedViews.splice(index, 1)
+                resolve([...this.cachedViews])
+            })
 
         },
 
-         delOthersVisitedViews (view:any) {
-             return new Promise(resolve => {
-                 this.visitedViews = this.visitedViews.filter(v => {
-                     return v.meta?.affix || v.path === view.path
-                 })
-                 resolve([...this.visitedViews])
-             })
+        delOthersVisitedViews(view: any) {
+            return new Promise(resolve => {
+                this.visitedViews = this.visitedViews.filter(v => {
+                    return v.meta?.affix || v.path === view.path
+                })
+                resolve([...this.visitedViews])
+            })
 
         },
-         delOthersCachedViews( view:any) {
-             return new Promise(resolve => {
-                 const index = this.cachedViews.indexOf(view.name)
-                 if (index > -1) {
-                     this.cachedViews = this.cachedViews.slice(index, index + 1)
-                 } else {
-                     // if index = -1, there is no cached tags
-                     this.cachedViews = []
-                 }
-                 resolve([...this.cachedViews])
-             })
+        delOthersCachedViews(view: any) {
+            return new Promise(resolve => {
+                const index = this.cachedViews.indexOf(view.name)
+                if (index > -1) {
+                    this.cachedViews = this.cachedViews.slice(index, index + 1)
+                } else {
+                    // if index = -1, there is no cached tags
+                    this.cachedViews = []
+                }
+                resolve([...this.cachedViews])
+            })
 
         },
 
-        updateVisitedView (view:any) {
+        updateVisitedView(view: any) {
             for (let v of this.visitedViews) {
                 if (v.path === view.path) {
                     v = Object.assign(v, view)
@@ -77,31 +76,42 @@ const tagsViewStore=defineStore({
                 }
             }
         },
-        addView( view:any) {
-            this.addVisitedView( view)
+        addView(view: any) {
+            this.addVisitedView(view)
             this.addCachedView(view)
         },
-        delView( view:any) {
+        delView(view: any) {
             return new Promise(resolve => {
-               this.delVisitedView(view)
-                this.delCachedView( view)
+                this.delVisitedView(view)
+                this.delCachedView(view)
                 resolve({
                     visitedViews: [...this.visitedViews],
                     cachedViews: [...this.cachedViews]
                 })
             })
         },
-        delOthersViews( view:any) {
+        delOthersViews(view: any) {
             return new Promise(resolve => {
-               this.delOthersVisitedViews(view)
-               this.delOthersCachedViews(view)
+                this.delOthersVisitedViews(view)
+                this.delOthersCachedViews(view)
                 resolve({
                     visitedViews: [...this.visitedViews],
                     cachedViews: [...this.cachedViews]
                 })
             })
         },
-        delAllViews( view:any) {
+        delLeftViews(view: any) {
+            const currIndex = this.visitedViews.findIndex(v => v.path === view.path)
+            if (currIndex === -1) {
+                return
+            }
+            this.visitedViews = this.visitedViews.filter((item, index) => {
+                if(index>=currIndex||(item.meta&&item.meta.affix)){
+                    return true
+                }
+            })
+        },
+        delAllViews(view: any) {
             return new Promise(resolve => {
                 const affixTags = this.visitedViews.filter(tag => tag.meta?.affix)
                 this.visitedViews = affixTags
diff --git a/src/views/redirect/index.vue b/src/views/redirect/index.vue
index 00df81ea..2363a22e 100644
--- a/src/views/redirect/index.vue
+++ b/src/views/redirect/index.vue
@@ -1,14 +1,15 @@
-<script lang="ts">
-import {defineComponent} from "vue";
+<template>
+  <div/>
+</template>
+
+<script setup lang="ts">
 import {useRoute, useRouter} from "vue-router";
 
-export default defineComponent({
-  created() {
-    const {params, query} = useRoute()
-    const {path} = params
-    useRouter().replace({path: '/' + path, query})
-  },
-  render() {
-  }
-})
+const route = useRoute();
+const router = useRouter();
+
+const { params, query } = route
+const { path } = params
+
+router.replace({ path: '/' + path, query })
 </script>