From ff4c9bc1408d575119c01cda52f24490d3b758b9 Mon Sep 17 00:00:00 2001
From: Sisyphus <sisyphus@direv.local>
Date: Thu, 9 Jul 2026 17:38:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(F006-W18.9):=20dark=20=E4=B8=BB=E9=A2=98=20?=
 =?UTF-8?q?=E5=85=A8=E5=B1=80=E6=BB=9A=E5=8A=A8=E6=9D=A1=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E9=80=82=E9=85=8D=20(=E9=81=BF=E5=85=8D=E6=B5=85=E7=99=BD?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8=E6=9D=A1=E5=89=B2=E8=A3=82)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

用户反馈: 暗主题下侧边栏原生滚动条是浅白色, 在深色背景上刺眼割裂

根因: 浏览器原生 ::-webkit-scrollbar 走系统默认色 (亮色),
项目没覆盖, dark 下没适配

修法 (src/styles/global-popper.scss 末尾新增):
- 默认 (亮主题): thumb var(--border) 浅灰
- hover: var(--ink-4) 深灰
- [data-theme=dark]: thumb var(--border) = #475569 深色
- hover: var(--ink-3) = #CBD5E1
- Firefox 兼容: html { scrollbar-color: var(--border) transparent; }

Playwright 实测 (.rr-sidebar 滚动条 thumb):
- 改前: 系统默认 #C0C0C0 浅灰 (刺眼)
- 改后: rgb(71,85,105) = #475569 深色 ✅ (dark 协调)
---
 src/styles/global-popper.scss | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/styles/global-popper.scss b/src/styles/global-popper.scss
index e9352c4..18dedfb 100644
--- a/src/styles/global-popper.scss
+++ b/src/styles/global-popper.scss
@@ -87,3 +87,37 @@
 .el-select__wrapper.is-focused {
   box-shadow: 0 0 0 1px var(--brand, #2563EB) inset, 0 0 0 3px var(--brand-glow, rgba(37, 99, 235, 0.18)) !important;
 }
+
+/* === W18.9 全局滚动条暗主题适配 (深色滚动条避免割裂) === */
+/* 默认 (亮主题): 浅灰滚动条 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border, #E2E8F0);
+  border-radius: 4px;
+  transition: background 0.15s;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: var(--ink-4, #94A3B8);
+}
+/* Firefox */
+html {
+  scrollbar-color: var(--border, #E2E8F0) transparent;
+  scrollbar-width: thin;
+}
+
+/* 暗主题: 深色滚动条适配, 避免浅白滚动条在深色背景上刺眼 */
+[data-theme="dark"] ::-webkit-scrollbar-thumb {
+  background: var(--border, #475569);
+}
+[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
+  background: var(--ink-3, #CBD5E1);
+}
+[data-theme="dark"] html {
+  scrollbar-color: var(--border, #475569) transparent;
+}