From 17a343392ce54bf641cfe87c5a990ebce568dc68 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Sun, 10 May 2026 22:48:49 +0800
Subject: [PATCH] refactor: replace mobile device check with touch capability
 detection for tab scroll controls

---
 src/layouts/components/HeaderTab.vue | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/layouts/components/HeaderTab.vue b/src/layouts/components/HeaderTab.vue
index f700fe63..e1ab23a7 100644
--- a/src/layouts/components/HeaderTab.vue
+++ b/src/layouts/components/HeaderTab.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { useTabStateRestore } from '@/composables/useStateRestore'
-import { isMobileDevice } from '@/@core/utils/navigator'
 
 const props = defineProps({
   modelValue: {
@@ -65,6 +64,10 @@ const showTabsScrollIndicator = ref(false)
 const showLeftButton = ref(false)
 const showRightButton = ref(false)
 
+const isTouchDevice = () => {
+  return window.matchMedia('(hover: none) and (pointer: coarse)').matches || navigator.maxTouchPoints > 0
+}
+
 // Function to scroll the tabs
 const scrollTabs = (direction: 'left' | 'right') => {
   const el = tabsContainerRef.value
@@ -90,17 +93,17 @@ const updateTabsIndicator = () => {
   const el = tabsContainerRef.value
   if (!el) return
 
-  // 在移动端不显示滚动指示器
-  const isMobile = isMobileDevice()
+  // 仅在触摸设备上隐藏按钮，非触摸小屏设备仍需支持横向切换
+  const shouldHideScrollControls = isTouchDevice()
 
   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 && !isMobile
-  showLeftButton.value = hasOverflow && !isScrolledToStart && !isMobile
-  showRightButton.value = hasOverflow && !isScrolledToEnd && !isMobile
+  showTabsScrollIndicator.value = hasOverflow && !isScrolledToEnd && !shouldHideScrollControls
+  showLeftButton.value = hasOverflow && !isScrolledToStart && !shouldHideScrollControls
+  showRightButton.value = hasOverflow && !isScrolledToEnd && !shouldHideScrollControls
 }
 
 // Debounce resize handler
@@ -185,8 +188,8 @@ onUnmounted(() => {
     margin-inline-start: 6px;
   }
 
-  // 在移动端隐藏滚动按钮
-  @media (width <= 768px) {
+  // 触摸设备支持手势横向滚动，无需额外按钮
+  @media (hover: none) and (pointer: coarse) {
     display: none !important;
   }
 }
@@ -231,8 +234,8 @@ onUnmounted(() => {
     opacity: 1;
   }
 
-  // 在移动端隐藏渐变指示器
-  @media (width <= 768px) {
+  // 触摸设备支持手势横向滚动，无需额外指示器
+  @media (hover: none) and (pointer: coarse) {
     &::after {
       display: none !important;
     }