From dca5885ef1cda173680ca171e2faeb6a763cc9fb Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Mon, 28 Apr 2025 13:28:44 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E6=A0=87=E7=AD=BE=E5=A4=B4=E9=83=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=B7=A6=E5=8F=B3=E6=BB=9A=E5=8A=A8=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BC=98=E5=8C=96=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C=EF=BC=8C=E6=94=AF=E6=8C=81=E5=B9=B3?=
 =?UTF-8?q?=E6=BB=91=E6=BB=9A=E5=8A=A8=E6=95=88=E6=9E=9C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/components/HeaderTab.vue | 71 ++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)

diff --git a/src/layouts/components/HeaderTab.vue b/src/layouts/components/HeaderTab.vue
index 4068afe7..79f79369 100644
--- a/src/layouts/components/HeaderTab.vue
+++ b/src/layouts/components/HeaderTab.vue
@@ -29,6 +29,25 @@ watch(
 const tabsContainerRef = ref<HTMLElement | null>(null)
 // State for showing the scroll indicator
 const showTabsScrollIndicator = ref(false)
+// State for showing the scroll buttons
+const showLeftButton = ref(false)
+const showRightButton = ref(false)
+
+// Function to scroll the tabs
+const scrollTabs = (direction: 'left' | 'right') => {
+  const el = tabsContainerRef.value
+  if (!el) return
+  
+  const scrollAmount = 200 // 可以根据需要调整滚动量
+  const scrollPosition = direction === 'left' 
+    ? el.scrollLeft - scrollAmount 
+    : el.scrollLeft + scrollAmount
+  
+  el.scrollTo({
+    left: scrollPosition,
+    behavior: 'smooth'
+  })
+}
 
 // Function to check and update the indicator state
 const updateTabsIndicator = () => {
@@ -38,8 +57,11 @@ const updateTabsIndicator = () => {
   const tolerance = 1 // Allow 1px tolerance
   const hasOverflow = el.scrollWidth > el.clientWidth + tolerance
   const isScrolledToEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - tolerance
+  const isScrolledToStart = el.scrollLeft <= tolerance
 
   showTabsScrollIndicator.value = hasOverflow && !isScrolledToEnd
+  showLeftButton.value = hasOverflow && !isScrolledToStart
+  showRightButton.value = hasOverflow && !isScrolledToEnd
 }
 
 // Debounce resize handler
@@ -71,6 +93,16 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="tab-header rounded-t-lg">
+    <VBtn 
+      v-if="showLeftButton" 
+      class="scroll-button left-button"
+      @click="scrollTabs('left')"
+      variant="text"
+      icon
+    >
+      <VIcon icon="tabler-chevron-left" size="small" />
+    </VBtn>
+    
     <div ref="tabsContainerRef" class="header-tabs" :class="{ 'show-indicator': showTabsScrollIndicator }">
       <div
         v-for="(item, index) in items"
@@ -83,6 +115,17 @@ onUnmounted(() => {
         <span>{{ item.title }}</span>
       </div>
     </div>
+    
+    <VBtn 
+      v-if="showRightButton" 
+      class="scroll-button right-button"
+      @click="scrollTabs('right')"
+      variant="text"
+      icon
+    >
+      <VIcon icon="tabler-chevron-right" size="small" />
+    </VBtn>
+    
     <slot name="append" />
   </div>
 </template>
@@ -101,6 +144,34 @@ onUnmounted(() => {
   padding-inline: 16px;
 }
 
+.scroll-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  width: 28px;
+  border-radius: 50%;
+  background-color: rgba(var(--v-theme-primary), 0.1);
+  color: rgb(var(--v-theme-primary));
+  cursor: pointer;
+  border: none;
+  outline: none;
+  z-index: 2;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: rgba(var(--v-theme-primary), 0.2);
+  }
+  
+  &.left-button {
+    margin-right: 6px;
+  }
+  
+  &.right-button {
+    margin-left: 6px;
+  }
+}
+
 .header-tabs {
   position: relative; // Needed for pseudo-element positioning
   display: flex;