From 469e804e38849501cbb5eb698128de4260f0c5e5 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Mon, 1 Jun 2026 21:07:11 +0800
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E5=B7=A5=E5=85=B7=E5=9D=97?=
 =?UTF-8?q?=E5=B1=95=E5=BC=80=E5=86=85=E9=83=A8=E6=BB=9A=E5=8A=A8=E6=9D=A1?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=9F=E4=B8=80=EF=BC=8C=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=A7=BD=E9=80=8F=E6=98=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MinimalBlocks 思考内容(.thinking-content)补全自定义滚动条
- ToolAction 结构化显示三类滚动区(content/diff/code/output pre)统一样式
- 参考 git 状态侧边栏滚动条：10px 圆角胶囊滑块、半透明主题色
- 滚动槽(track)设为透明，贴合工具块灰色底色，避免明显槽体
- 颜色走 --claude-*/--theme-* 变量，三模式自适应

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 static/src/components/chat/MinimalBlocks.vue  | 22 +++++++++++
 .../components/chat/actions/ToolAction.vue    | 37 +++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/static/src/components/chat/MinimalBlocks.vue b/static/src/components/chat/MinimalBlocks.vue
index 1b211a8..a316075 100644
--- a/static/src/components/chat/MinimalBlocks.vue
+++ b/static/src/components/chat/MinimalBlocks.vue
@@ -726,6 +726,28 @@ watch(
   display: block;
   /* 让第一行文字中心和 SVG 中心对齐：向上移动半个行高减去半个字高 */
   margin-top: calc((1em - 1.7em) / 2);
+  /* 滚动条样式（参考 git 状态侧边栏文件列表，滚动槽透明贴合灰色底色） */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent)
+    transparent;
+}
+
+.thinking-content::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.thinking-content::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 999px;
+  margin: 8px;
+}
+
+.thinking-content::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
 }
 
 /* 工具内容 */
diff --git a/static/src/components/chat/actions/ToolAction.vue b/static/src/components/chat/actions/ToolAction.vue
index 2a12b3b..b05ad6b 100644
--- a/static/src/components/chat/actions/ToolAction.vue
+++ b/static/src/components/chat/actions/ToolAction.vue
@@ -1112,6 +1112,43 @@ function renderEasterEgg(result: any, args: any): string {
   background: rgba(0, 0, 0, 0.01);
 }
 
+/* 结构化显示滚动条样式（参考 git 状态侧边栏文件列表，滚动槽透明贴合灰色底色） */
+.tool-result-content.scrollable,
+.tool-result-diff.scrollable,
+.code-block pre,
+.output-block pre {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent)
+    transparent;
+}
+
+.tool-result-content.scrollable::-webkit-scrollbar,
+.tool-result-diff.scrollable::-webkit-scrollbar,
+.code-block pre::-webkit-scrollbar,
+.output-block pre::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+.tool-result-content.scrollable::-webkit-scrollbar-track,
+.tool-result-diff.scrollable::-webkit-scrollbar-track,
+.code-block pre::-webkit-scrollbar-track,
+.output-block pre::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 999px;
+  margin: 8px;
+}
+
+.tool-result-content.scrollable::-webkit-scrollbar-thumb,
+.tool-result-diff.scrollable::-webkit-scrollbar-thumb,
+.code-block pre::-webkit-scrollbar-thumb,
+.output-block pre::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--claude-text-secondary, #6b7280) 55%, transparent);
+  border-radius: 999px;
+  border: 2px solid transparent;
+  background-clip: padding-box;
+}
+
 .tool-result-content pre {
   margin: 0;
   white-space: pre-wrap;