feat: 当前标签页始终显示在视野内

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>

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)

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))