feat: 添加当前tab滚动功能并优化滚动条样式

eslint.config.js

@@ -18,8 +18,5 @@ export default antfu(
         'vue/component-definition-name-casing': 'off',
       },
     },
-    rules: {
-      'no-console': 'off',
-    },
   },
 )

src/layouts/components/tab/TabBar.vue

@@ -13,6 +13,7 @@ import ContentFullScreen from './ContentFullScreen.vue'
 import DropTabs from './DropTabs.vue'
 import Reload from './Reload.vue'
 import TabBarItem from './TabBarItem.vue'
+import { throttle } from 'radash'
 
 const tabStore = useTabStore()
 const { tabs } = storeToRefs(useTabStore())
@@ -106,24 +107,64 @@ function onClickoutside() {
 const el = ref()
 const scrollbar = ref<InstanceType<typeof NScrollbar>>()
 
-/**
+// 新增：滚动到当前tab的方法
- * [todo)
+function scrollToCurrentTab() {
- * radash 给滚动加上防抖
+  nextTick(() => {
- * 遮盖右侧操作区问题 may fixed it  √
+    const currentTabElement = document.querySelector(`[data-tab-path="${tabStore.currentTabPath}"]`) as HTMLElement
- *  添加 类名 基于宽度(对上面的区域) √
+    const tabBarScrollWrapper = document.querySelector('.tab-bar-scroller-wrapper .n-scrollbar-container')
- * 隐藏滚动条(添加到设置中)
+    const tabBarScrollContent = document.querySelector('.tab-bar-scroller-content')
- * 定位当前tab 始终显示
+    if (currentTabElement && tabBarScrollContent && tabBarScrollWrapper) {
- */
+      const tabLeft = currentTabElement.offsetLeft
-function onWheel(e: WheelEvent) {
+      const wrapper = tabBarScrollWrapper.getBoundingClientRect().width
-  e.preventDefault()
+      const tabWidth = currentTabElement.getBoundingClientRect().width
-  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+      const containerPR = Number.parseFloat(
-    console.log('dddwdadad', e.deltaY)
+        window.getComputedStyle(tabBarScrollContent)
-    scrollbar.value?.scrollBy({
+          .getPropertyValue('padding-right'),
-      left: e.deltaY,
+      ) || 0
+      if (tabLeft + tabWidth + 160 + containerPR > wrapper + tabBarScrollWrapper.scrollLeft) {
+        scrollbar.value?.scrollTo({
+          left: tabLeft + tabWidth + containerPR - wrapper + 160,
+          behavior: 'smooth',
+        })
+      }
+      else if (tabLeft - 100 < tabBarScrollWrapper.scrollLeft) {
+        scrollbar.value?.scrollTo({
+          left: tabLeft - 160,
           behavior: 'smooth',
         })
       }
     }
+  })
+}
+
+// 监听当前tab变化
+watchEffect(() => {
+  if (tabStore.currentTabPath) {
+    scrollToCurrentTab()
+  }
+})
+
+/**
+ * [todo)
+ * radash 给滚动加上防抖 √
+ * 遮盖右侧操作区问题 may fixed it  √
+ *  添加 类名 基于宽度(对上面的区域) √
+ * 定位当前tab 始终显示 √
+ */
+const handleScroll = throttle({ interval: 120 }, (setp) => {
+  scrollbar.value?.scrollBy({
+    left: setp * 400,
+    behavior: 'smooth',
+  })
+})
+
+function onWheel(e: WheelEvent) {
+  e.preventDefault()
+  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+    handleScroll(e.deltaY > 0 ? 1 : -1)
+  }
+}
+
 useDraggable(el, tabs, {
   animation: 150,
   ghostClass: 'ghost',
@@ -131,7 +172,7 @@ useDraggable(el, tabs, {
 </script>
 
 <template>
-  <n-scrollbar ref="scrollbar" class="relative flex" content-class="pr-34" :x-scrollable="true" @wheel="onWheel">
+  <n-scrollbar ref="scrollbar" class="relative flex tab-bar-scroller-wrapper" content-class="pr-34 tab-bar-scroller-content" :x-scrollable="true" @wheel="onWheel">
     <div class="p-l-2 flex w-full relative">
       <div class="flex items-end">
         <TabBarItem
@@ -141,7 +182,12 @@ useDraggable(el, tabs, {
       </div>
       <div ref="el" class="flex items-end flex-1">
         <TabBarItem
-          v-for="item in tabStore.tabs" :key="item.fullPath" :value="tabStore.currentTabPath" :route="item" closable
+          v-for="item in tabStore.tabs"
+          :key="item.fullPath"
+          :value="tabStore.currentTabPath"
+          :route="item"
+          closable
+          :data-tab-path="item.fullPath"
           @close="tabStore.closeTab"
           @click="handleTab(item)"
           @contextmenu="handleContextMenu($event, item)"