feat: add scrollbar support and enhance tab navigation finish:1/2

eslint.config.js

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

src/layouts/components/tab/TabBar.vue

@@ -2,6 +2,7 @@
 import type { RouteLocationNormalized } from 'vue-router'
 import { useAppStore, useTabStore } from '@/store'
 import { useDraggable } from 'vue-draggable-plus'
+import type { NScrollbar } from 'naive-ui'
 import IconClose from '~icons/icon-park-outline/close'
 import IconDelete from '~icons/icon-park-outline/delete-four'
 import IconFullwith from '~icons/icon-park-outline/fullwidth'
@@ -103,7 +104,19 @@ function onClickoutside() {
 }
 
 const el = ref()
+const scrollbar = ref<InstanceType<typeof NScrollbar>>()
 
+function onWheel(e: WheelEvent) {
+  e.preventDefault()
+  if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+    e.preventDefault()
+    console.log('dddwdadad', e.deltaY)
+    scrollbar.value?.scrollBy({
+      left: e.deltaY,
+      behavior: 'smooth',
+    })
+  }
+}
 useDraggable(el, tabs, {
   animation: 150,
   ghostClass: 'ghost',
@@ -111,6 +124,7 @@ useDraggable(el, tabs, {
 </script>
 
 <template>
+  <n-scrollbar ref="scrollbar" :x-scrollable="true" @wheel="onWheel">
     <div class="p-l-2 flex w-full relative">
       <div class="flex items-end">
         <TabBarItem
@@ -137,6 +151,7 @@ useDraggable(el, tabs, {
         <DropTabs />
       </n-el>
     </div>
+  </n-scrollbar>
 </template>
 
 <style scoped>