From c626d2b785d6cad5af2c548ab09b9ddb62d8accc Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Sun, 27 Nov 2022 20:04:11 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BD=93=E5=89=8D=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E9=A1=B5=E5=A7=8B=E7=BB=88=E6=98=BE=E7=A4=BA=E5=9C=A8=E8=A7=86?=
 =?UTF-8?q?=E9=87=8E=E5=86=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ScrollX.vue    | 22 ++++++++++++++++++++++
 src/layout/components/tags/index.vue | 17 ++++++++++++++++-
 src/store/modules/tags/index.js      | 12 ++++++++----
 3 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/src/components/common/ScrollX.vue b/src/components/common/ScrollX.vue
index e612597..1d1411f 100644
--- a/src/components/common/ScrollX.vue
+++ b/src/components/common/ScrollX.vue
@@ -88,6 +88,28 @@ onBeforeUnmount(() => {
   window.removeEventListener('resize', refreshIsOverflow)
   observer.disconnect()
 })
+
+function handleScroll(x, width) {
+  const wrapperWidth = wrapper.value?.offsetWidth
+  const contentWidth = content.value?.offsetWidth
+  if (contentWidth <= wrapperWidth) return
+
+  // 当 x 小于可视范围的最小值时
+  if (x < -translateX.value + 150) {
+    translateX.value = -(x - 150)
+    resetTranslateX(wrapperWidth, contentWidth)
+  }
+
+  // 当 x 大于可视范围的最大值时
+  if (x + width > -translateX.value + wrapperWidth) {
+    translateX.value = wrapperWidth - (x + width)
+    resetTranslateX(wrapperWidth, contentWidth)
+  }
+}
+
+defineExpose({
+  handleScroll,
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/layout/components/tags/index.vue b/src/layout/components/tags/index.vue
index 17c9cdf..f71ba3e 100644
--- a/src/layout/components/tags/index.vue
+++ b/src/layout/components/tags/index.vue
@@ -1,7 +1,8 @@
 <template>
-  <ScrollX>
+  <ScrollX ref="scrollXRef">
     <n-tag
       v-for="tag in tagsStore.tags"
+      ref="tabRefs"
       :key="tag.path"
       class="px-15 mx-5 rounded-4 cursor-pointer hover:color-primary"
       :type="tagsStore.activeTag === tag.path ? 'primary' : 'default'"
@@ -30,6 +31,8 @@ import ScrollX from '@/components/common/ScrollX.vue'
 const route = useRoute()
 const router = useRouter()
 const tagsStore = useTagsStore()
+const tabRefs = ref([])
+const scrollXRef = ref(null)
 
 const contextMenuOption = reactive({
   show: false,
@@ -48,6 +51,18 @@ watch(
   { immediate: true }
 )
 
+watch(
+  () => tagsStore.activeIndex,
+  async (activeIndex) => {
+    await nextTick()
+    const activeTabElement = tabRefs.value[activeIndex]?.$el
+    if (!activeTabElement) return
+    const { offsetLeft: x, offsetWidth: width } = activeTabElement
+    scrollXRef.value?.handleScroll(x + width, width)
+  },
+  { immediate: true }
+)
+
 const handleTagClick = (path) => {
   tagsStore.setActiveTag(path)
   router.push(path)
diff --git a/src/store/modules/tags/index.js b/src/store/modules/tags/index.js
index 47f2079..7e2233c 100644
--- a/src/store/modules/tags/index.js
+++ b/src/store/modules/tags/index.js
@@ -10,6 +10,11 @@ export const useTagsStore = defineStore('tag', {
       activeTag: activeTag || '',
     }
   },
+  getters: {
+    activeIndex() {
+      return this.tags.findIndex((item) => item.path === this.activeTag)
+    },
+  },
   actions: {
     setActiveTag(path) {
       this.activeTag = path
@@ -26,11 +31,10 @@ export const useTagsStore = defineStore('tag', {
     },
     removeTag(path) {
       if (path === this.activeTag) {
-        const activeIndex = this.tags.findIndex((item) => item.path === path)
-        if (activeIndex > 0) {
-          router.push(this.tags[activeIndex - 1].path)
+        if (this.activeIndex > 0) {
+          router.push(this.tags[this.activeIndex - 1].path)
         } else {
-          router.push(this.tags[activeIndex + 1].path)
+          router.push(this.tags[this.activeIndex + 1].path)
         }
       }
       this.setTags(this.tags.filter((tag) => tag.path !== path))