Skip to content

fix(ui): 深色模式下侧边栏与主面板分界线过亮 - #828

Merged
Loosand merged 1 commit into
Stack-Cairn:developfrom
AlphaCatMeow:fix-sidebar-dark-border
Sep 19, 2026
Merged

Loosand merged 1 commit into
Stack-Cairn:developfrom
AlphaCatMeow:fix-sidebar-dark-border

Conversation

@AlphaCatMeow

Copy link
Copy Markdown
Contributor

Linked issue

Fixes #827

Summary

develop 分支(refactor/ui 合入后)深色模式下,左侧导航栏与中间对话面板的分界处有一条非常明显的亮灰色竖线,浅色模式下几乎看不到。

原因:crates/agent-ui/src/components/ui/sidebar.tsx 的 Sidebar 原语默认给左侧栏容器加 group-data-[side=left]:border-r,边框色取全局 --border。深色主题下侧栏底色是纯黑(--settings-rail: 0 0% 0%)而 --border220 14% 26%,亮度差 26 个点;浅色主题两者只差约 4 个点,所以问题只在深色模式暴露。

修复:只在 ChatHistorySidebar 传给 Sidebar 的 className 上追加 dark:border-border/30,让深色模式下这条边框的视觉强度与浅色模式对齐。不改 Sidebar 原语本身(其他使用方不受影响),不改浅色模式,不涉及任何布局或交互逻辑。

说明:该问题只存在于 developmain 上尚无 sidebar.tsx),所以本 PR 以 develop 为 base,从 upstream/develop 当前 head b2a54e05 切出。

Change scope

  • Modules: agent-ui
  • Key paths:
    • crates/agent-ui/src/components/chat/ChatHistorySidebar.tsx(一行 className 改动)
    • .github/pr-assets/sidebar-dark-border-*.png(截图证据)

Screenshots / preview

深色模式,Windows 11 本地 tauri dev 调试客户端,同一窗口、同一位置:

修复前 修复后
before after

完整窗口截图:修复前 / 修复后

像素实测(同一坐标 y=600,x=418 为分界线):

  • 修复前:(0,0,0) | (58,63,75) | (18,21,28)
  • 修复后:(0,0,0) | (17,19,23) | (18,21,28)

Verification

  • pnpm exec biome check crates/agent-ui/src/components/chat/ChatHistorySidebar.tsx:仅报全文件 CRLF 行尾格式差异(Windows autocrlf 检出导致,与本改动无关;git diff 确认只有一行变更)
  • 本地 pnpm --dir crates/agent-gui tauri dev 从本分支 HEAD 启动调试客户端,深色模式下人工确认分界线消失,浅色模式无变化
  • 未运行项:完整 pnpm test / Rust 检查,改动仅为一个 Tailwind class,不涉及逻辑与测试覆盖的行为

Pre-submit checklist

  • A requirement issue is linked (or this is a trivial fix that needs no issue, as explained in the summary).
  • Synced with the target branch; no merge conflicts.
  • The change is focused, with no unrelated modifications.
  • No secrets, tokens, or personal data included.
  • Docs are updated for changes affecting user behavior, deployment, or configuration.

develop 引入的 Sidebar 原语默认给左侧栏加 border-r,深色主题下侧栏底色是纯黑而
--border 亮度 26%,分界处形成一条扎眼的亮线;浅色主题下两者亮度只差 4 个点所以
看不出来。只在 chat-history-sidebar 上给深色模式把边框透明度降到 30%,不改原语、
不影响浅色模式和布局。

Fixes Stack-Cairn#827
@Loosand
Loosand merged commit cb0cf51 into Stack-Cairn:develop Sep 19, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants