Skip to content

fix(ui): 改善深色控件与侧栏一致性,保留对话阅读位置 - #831

Merged
Loosand merged 1 commit into
Stack-Cairn:developfrom
Loosand:feature/fix-dark-mode-ui-contrast
Sep 19, 2026
Merged

Loosand merged 1 commit into
Stack-Cairn:developfrom
Loosand:feature/fix-dark-mode-ui-contrast

Conversation

@Loosand

@Loosand Loosand commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator

Linked issue

Closes #830

Summary

统一桌面端深色 UI 的交互状态,并修复对话切换后阅读位置丢失。

深色主题与组件一致性

  • 用中性灰替代偏蓝表面,分别调整主文字、辅助文字、边框和选中底色,增强主题切换、供应商页签及模型选择器的可读性。
  • 模型分组支持折叠/展开,列表显示可拖动滚动条;模型名称、能力标签和上下文大小保留清晰层级。
  • 聊天侧栏与设置侧栏复用相同的行高、间距、hover 和选中语义;同步虚拟列表的测量间距。
  • 右侧工具面板复用 Button、Tabs 和 SettingsToggleGroup,保留圆角页签,拖动手柄仅在 hover/focus 时显示。
  • 分支分组使用 SVG 折叠箭头;移除 Skills 列表多余的布局动画。

对话切换与阅读位置

  • 删除切换时的淡入过渡,以及外层重置逻辑中对旧对话的强制回底部。
  • 在切换开始前同步保存滚动位置、消息锚点和测量结果,防止卸载或滚动钳制覆盖旧位置。
  • 结合虚拟列表初始偏移与真实 DOM 锚点恢复阅读位置;仍处于底部跟随状态的对话继续跟随底部。
  • 恢复阶段保留跟随状态,避免视口绑定时重新吸到底部;用户滚动或键盘操作可中断锚点校正。
  • 位置缓存限于当前运行期间最近 100 个对话,不承诺跨重启持久化。

**范围说明:**按最终需求撤回新加的独立 Git Graph 功能,本 PR 不引入该功能。既有 Git 工具保留;不关闭侧栏纯黑背景、草稿丢失或工作空间切换等其他问题。

Change scope

  • Modules: agent-guiagent-ui
  • 主题与共享控件:crates/agent-ui/src/styles/components/settings/components/ui/tabs.tsx
  • 聊天侧栏/模型选择器:crates/agent-ui/src/components/chat/
  • 项目工具与分支列表:crates/agent-ui/src/components/project-tools/components/git/
  • 对话位置恢复:crates/agent-gui/src/pages/ChatPage.tsxpages/chat/transcript/crates/agent-ui/src/lib/chat-scroll/useScrollFollow.ts
  • 回归测试:crates/agent-gui/test/chat/test/skills/

Screenshots / preview

修改前(用户提供的桌面端设置页):

深色设置控件修改前

修改后(本分支运行中的桌面端;窗口尺寸与前图不同):

深色设置控件修改后

滚动恢复手动验证:在桌面端将长对话停在中间的同一消息,切到另一对话再切回;返回后消息标题、正文和表格的视口位置保持一致。截图仅展示设置控件,不公开本地对话内容。

Verification

已执行并通过:

  • pnpm typecheck:gui
  • pnpm typecheck:ui
  • pnpm check:ui-boundaries
  • git diff --check
  • 9 个相关 Node 测试文件,共 75 项测试通过transcript-switch-layoutuse-scroll-follow-native-scrollbarchat-transcript-scrollertranscript-row-modeltranscript-width-controls-history-switchsidebar-ui-consistencycomposer-model-pagesinstalled-skill-sortskills-category-tabs
  • macOS 桌面端实测对话 A → B → A 的中间阅读位置恢复。

新增/更新测试覆盖:初始位置计算、锚点恢复与回退、切换前快照、跟随状态恢复、侧栏行间距、模型分组/滚动容器,以及移除 Skills 布局动画。

未在本地执行全平台构建及整个仓库的完整测试套件。本地补充的 changed-Biome 脚本被 mise 工具下载的未认证 GitHub API 限流中断;相应检查随后在 CI 中通过。

GitHub CI(运行记录)已全部通过:GUI 构建/lint/前端与发布脚本测试、Gateway、Gateway WebUI、Docker Smoke、Shared UI Boundaries(含 changed-Biome)、Diff Hygiene、Detect Changes。PR Governance 亦通过。Tauri Rust Check 因无 Rust 相关变更按规则跳过。

Pre-submit checklist

  • 已关联需求 issue;需求来自本次开发会话中明确确认的修复范围。
  • 基于提交时最新的 upstream/develop,已检查无冲突。
  • 改动集中于本次 UI 一致性和对话切换体验,无额外 Git Graph 功能。
  • 未包含密钥、令牌或本地对话内容。
  • 行为边界与验证方法已在说明和代码注释中更新;无部署或配置迁移。

Improve neutral dark-theme contrast, model group folding and scrollbars, sidebar spacing, and rounded standard dock controls. Remove unnecessary Skills layout animations.

Capture transcript position before switching conversations, restore measured message anchors, and preserve follow state without forcing outgoing chats to the bottom. Add regression coverage and desktop before/after previews.

Closes Stack-Cairn#830
@Loosand
Loosand merged commit 9aadbc5 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.

1 participant