From fe211fc5631e3fc3dc2eb59418eaa4658223f47d Mon Sep 17 00:00:00 2001
From: IanShaw027 <ianshaw027@gmail.com>
Date: Thu, 9 Apr 2026 15:13:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E4=BF=AE=E5=A4=8D=E5=9C=A8=20macOS?=
 =?UTF-8?q?=20=E7=B3=BB=E7=BB=9F=E4=B8=8B=E6=95=B0=E6=8D=AE=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8=E6=9D=A1=E9=97=AA?=
 =?UTF-8?q?=E9=9A=90=E5=92=8C=E6=B6=88=E5=A4=B1=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题原因：
原本的 `style.css` 代码全局使用了 W3C 标准属性 (`scrollbar-width`)。而在 Chrome 121+ 以及 Safari 环境下，一旦匹配到 W3C 标准属性，浏览器就会放弃 WebKit 的定制样式，全面交由操作系统原生渲染。因为 macOS 原生的滚动条特性就是“不滚动时自动隐藏”，加之原本又配置了全局 hover 时才显色的透明度逻辑，最终导致在苹果系统下数据表常常无法明显看出横向滚动条。

修复方式：
1. 在 `style.css` 中增加 `@supports (-moz-appearance:none)`，将对全局 `scrollbar-width` 的干预严格隔离限制在 Firefox 浏览器内，防止误伤 Chrome 等 WebKit 系浏览器。
2. 移除旧版代码中对 `.table-wrapper` 直接定义的 `scrollbar-width` 和透明覆盖。
3. 在 `DataTable.vue` 内部，通过 `!important` 将 Webkit 专属定制外观（12px高度，实心圆角灰色轨道）的优先权推至最高，强制覆盖透明隐身规则。
4. 为底层 table 添加了 `min-w-max` 属性，强制阻止内容宽度受限于屏幕边界带来的收缩，充分保证合理超出范围而触发常驻横向溢出。
---
 frontend/src/components/common/DataTable.vue | 61 +++++++++++++++++++-
 frontend/src/style.css                       | 57 +++++-------------
 2 files changed, 75 insertions(+), 43 deletions(-)

diff --git a/frontend/src/components/common/DataTable.vue b/frontend/src/components/common/DataTable.vue
index 159fbd84..36c7e278 100644
--- a/frontend/src/components/common/DataTable.vue
+++ b/frontend/src/components/common/DataTable.vue
@@ -68,7 +68,7 @@
       'is-scrollable': isScrollable
     }"
   >
-    <table class="min-w-full divide-y divide-gray-200 dark:divide-dark-700">
+    <table class="w-full min-w-max divide-y divide-gray-200 dark:divide-dark-700">
       <thead class="table-header bg-gray-50 dark:bg-dark-800">
         <tr>
           <th
@@ -797,3 +797,62 @@ tbody tr:hover .sticky-col {
   background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
 }
 </style>
+
+<style>
+/* ==========================================================================
+   终极悬浮滚动条防丢器 (Sledgehammer Override)
+   绕过 style.css 中 `* { scrollbar-color: transparent }` 的全局悬停隐身诅咒！
+   ========================================================================== */
+
+/* 1. 废除全局针对所有元素的 scrollbar-width 设定，拿回 Chrome/Safari 下 Webkit 滚动条规则的控制权！ */
+.table-wrapper {
+  scrollbar-width: auto !important; /* 阻止 Chrome 121 退化到原生 Mac 闪隐滚动条 */
+}
+
+/* 2. 重写 Webkit 滚动层，全部加上 !important 强制覆盖透明悬停陷阱 */
+.table-wrapper::-webkit-scrollbar {
+  height: 12px !important;
+  width: 12px !important;
+  display: block !important;
+  background-color: transparent !important;
+}
+
+.table-wrapper::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.03) !important;
+  border-radius: 6px !important;
+  margin: 0 4px !important;
+}
+.dark .table-wrapper::-webkit-scrollbar-track {
+  background-color: rgba(255, 255, 255, 0.05) !important;
+}
+
+/* 常驻、不透明的滑块，无视鼠标是否 hover 都在那！ */
+.table-wrapper::-webkit-scrollbar-thumb {
+  background-color: rgba(107, 114, 128, 0.75) !important; 
+  border-radius: 6px !important;
+  border: 2px solid transparent !important;
+  background-clip: padding-box !important;
+  -webkit-appearance: none !important;
+}
+.table-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(75, 85, 99, 0.9) !important;
+}
+
+.dark .table-wrapper::-webkit-scrollbar-thumb {
+  background-color: rgba(156, 163, 175, 0.75) !important;
+}
+.dark .table-wrapper::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(209, 213, 219, 0.9) !important;
+}
+
+/* 3. 仅给真正的 Firefox 留的后路 */
+@supports (-moz-appearance:none) {
+  .table-wrapper {
+    scrollbar-width: thin !important;
+    scrollbar-color: rgba(156, 163, 175, 0.5) rgba(0, 0, 0, 0.03) !important;
+  }
+  .dark .table-wrapper {
+    scrollbar-color: rgba(75, 85, 99, 0.5) rgba(255, 255, 255, 0.05) !important;
+  }
+}
+</style>
diff --git a/frontend/src/style.css b/frontend/src/style.css
index e36a3651..9ea1e01c 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -16,20 +16,22 @@
     @apply min-h-screen;
   }
 
-  /* 自定义滚动条 - 默认隐藏，悬停或滚动时显示 */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: transparent transparent;
-  }
+  /* 自定义滚动条 - 仅针对 Firefox，避免 Chrome 取消 webkit 的全局定制 */
+  @supports (-moz-appearance:none) {
+    * {
+      scrollbar-width: thin;
+      scrollbar-color: transparent transparent;
+    }
 
-  *:hover,
-  *:focus-within {
-    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
-  }
+    *:hover,
+    *:focus-within {
+      scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
+    }
 
-  .dark *:hover,
-  .dark *:focus-within {
-    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
+    .dark *:hover,
+    .dark *:focus-within {
+      scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
+    }
   }
 
   ::-webkit-scrollbar {
@@ -58,36 +60,7 @@
     @apply bg-primary-500/20 text-primary-900 dark:text-primary-100;
   }
 
-  /*
-   * 表格滚动容器：始终显示滚动条，不跟随全局悬停策略。
-   *
-   * 浏览器兼容性说明：
-   * - Chrome 121+ 原生支持 scrollbar-color / scrollbar-width。
-   *   一旦元素匹配了这两个标准属性，::-webkit-scrollbar-* 被完全忽略。
-   *   全局 * { scrollbar-width: thin } 使所有元素都走标准属性，
-   *   因此 Chrome 121+ 只看 scrollbar-color。
-   * - Chrome < 121 不认识标准属性，只看 ::-webkit-scrollbar-*，
-   *   所以保留 ::-webkit-scrollbar-thumb 作为回退。
-   * - Firefox 始终只看 scrollbar-color / scrollbar-width。
-   */
-  .table-wrapper {
-    scrollbar-width: auto;
-    scrollbar-color: rgba(156, 163, 175, 0.7) transparent;
-  }
-  .dark .table-wrapper {
-    scrollbar-color: rgba(75, 85, 99, 0.7) transparent;
-  }
-  /* 旧版 Chrome (< 121) 兼容回退 */
-  .table-wrapper::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-  }
-  .table-wrapper::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-gray-400/70;
-  }
-  .dark .table-wrapper::-webkit-scrollbar-thumb {
-    @apply rounded-full bg-gray-500/70;
-  }
+
 }
 
 @layer components {