JOJO/agent-Specialization
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(frontend): 工具块展开内部滚动条样式统一，滚动槽透明

Browse Source 
- 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>
This commit is contained in:
JOJO 2026-06-01 21:07:11 +08:00
parent 548455f127
commit 469e804e38
2 changed files with 59 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
static/src/components/chat/MinimalBlocks.vue
View File

@ -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;
}
/* 工具内容 */

37
static/src/components/chat/actions/ToolAction.vue
View File

@ -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;