feat: add left and right scroll buttons to Tabs bar (#4161) (#4162)

packages/effects/layouts/src/basic/tabbar/tabbar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import { useRoute } from 'vue-router';
 
 import { useContentMaximize, useTabs } from '@vben/hooks';
@@ -12,6 +12,9 @@ import {
   TabsView,
 } from '@vben-core/tabs-ui';
 
+import { ChevronLeftIcon, ChevronRightIcon } from '@radix-icons/vue';
+
+import { useTabViewScroll } from './use-tab-view-scroll';
 import { useTabbar } from './use-tabbar';
 
 defineOptions({
@@ -49,9 +52,26 @@ const menus = computed(() => {
 if (!preferences.tabbar.persist) {
   tabbarStore.closeOtherTabs(route);
 }
+
+const { scrollDirection, setScrollBarEl, setScrollViewEl } = useTabViewScroll();
+
+onMounted(() => {
+  const scrollBarEl: HTMLElement | null =
+    document.querySelector('#tabs-scrollbar');
+
+  const scrollViewportEl: HTMLElement | null | undefined =
+    scrollBarEl?.querySelector('div[data-radix-scroll-area-viewport]');
+
+  setScrollBarEl(scrollBarEl);
+  setScrollViewEl(scrollViewportEl);
+});
 </script>
 
 <template>
+  <ChevronLeftIcon
+    class="mx-2 h-full cursor-pointer"
+    @click="scrollDirection('left')"
+  />
   <TabsView
     :active="currentActive"
     :class="theme"
@@ -66,6 +86,10 @@ if (!preferences.tabbar.persist) {
     @update:active="handleClick"
   />
   <div class="flex-center h-full">
+    <ChevronRightIcon
+      class="mx-2 h-full cursor-pointer"
+      @click="scrollDirection('right')"
+    />
     <TabsToolRefresh
       v-if="preferences.tabbar.showRefresh"
       @refresh="refreshTab"