Issue 170 - ShaoClean/Alune GitHub Wiki

Issue #170：重新设计整体 UI，统一工作区与共享组件的视觉体系

背景与问题

用户反馈“整体的 UI 不协调，需要重新设计”，并明确要求参考 high-end-visual-design 技能。

当前提供的分支下拉列表截图是具体反馈样例：搜索框、列表行、分组文字、浮层边界与底部操作区的比例和视觉重量需要协调。全局问题来自用户的整体体验反馈，其余页面应在实施前通过真实界面截图逐项审视，不能将单张局部截图当作所有页面问题的证据。

目标

为 Alune 建立统一、精致、适合长时间使用的桌面 Git 工具视觉体系，使页面布局、控件密度、字体层级、间距、圆角、色彩和交互反馈协调一致，并保持核心工作流的效率与可读性。

需求与范围

  • 覆盖工作区框架、仓库标签、工具栏、仓库／工作区导航、分支浮层、文件与改动列表、Diff 周边控件、提交区、历史、PR/MR、仓库／连接页和设置页。
  • 统一 Input、Button、图标按钮、菜单、Popover、Tooltip、弹窗、通知等共享组件，并同步 @alune/ui 与 UI 文档示例。
  • 形成可复用的字体、字号、行高、间距、控件高度、圆角、层次、阴影、语义颜色和动效变量；明确紧凑列表与普通表单的密度规则。
  • 覆盖浅色／深色、窄窗口与可调面板、长文本、加载、空状态、失败、禁用、选中和键盘焦点状态。
  • 保留 Git、SSH、Worktree、Diff、暂存／提交、历史及 PR/MR 的现有业务行为、快捷键与布局配置；实现时分阶段回归。

设计方向与技能要求

参考用户指定的 high-end-visual-design，设计方案在 Wiki 中记录来源及针对桌面 Git 场景的取舍：

  • 延续并完善现有 Geist／Geist Mono 字体体系，统一文字层级与图标笔画；避免将 Inter、Roboto、Arial、Open Sans、Helvetica 作为新设计主字体，以及粗重的通用图标风格。
  • 统一背景、面板和浮层的层次；评估技能中的嵌套容器（Double-Bezel）、同心圆角、柔和环境阴影与细腻高光，避免层层边框叠加造成视觉噪声。
  • 对主要按钮评估胶囊形态与内嵌尾部图标；明确与高频紧凑工具按钮的尺寸关系。
  • 使用克制的自定义 cubic-bezier／弹簧过渡，保持 hover、active 与 focus 的一致反馈；动效优先使用 transform／opacity，并遵循系统和应用“减少动态效果”。
  • 磨砂效果限定在必要浮层，避免大面积滚动区域的持续模糊重绘；统一遮罩、菜单、弹窗、提示的层级。
  • 先选择统一的视觉方向并形成代表性设计稿。技能中的宏观留白、巨型标题和展示型布局需结合桌面工具的信息密度评估；具体参数与布局尚未定稿。

方案建议与代码线索

  • 先核对 UI 规范、弹窗规范 与当前真实界面的差异，补充全局一致性清单和前后对照设计。
  • 从共享层 packages/ui/src/styles/tokens.css、共享组件样式，以及应用层 apps/web/src/theme.css、index.css、workspace-layout.css 入手，减少相互冲突的局部覆盖。
  • 建议按“现状审视与设计稿 → 共享变量与基础控件 → 工作区主流程 → 其余页面与视觉回归”分阶段落地，记录每阶段的边界和验收。
  • 关联 #166 的改动列表操作图标优化、#168 的工作区标识需求；统一设计应吸收这些需求。

验收标准

  • 在 Wiki 提供真实界面问题清单、统一视觉规则及代表性页面的前后对照设计，明确 high-end-visual-design 的采用方式与场景取舍。
  • 同类输入框、按钮、图标、列表、菜单与弹窗共享一致的高度、留白、圆角、字体和状态规则，避免页面间显著不一致。
  • 工作区信息层级清晰，分支搜索框、列表行与主次操作的视觉比例协调，常用操作仍易于发现和点击。
  • 浅色／深色、默认与窄窗口、面板调宽／隐藏、长文本、多标签和多分支场景无溢出、遮挡或明显裁切。
  • 键盘操作与焦点可见，文本和状态对比度可读，减少动态效果生效，禁用／加载／失败等状态完整。
  • 本地与 SSH 仓库的核心工作流、Worktree、Diff、暂存／提交、历史、PR/MR 与设置无回归。
  • UI 规范、共享组件文档及真实示例同步更新；Wiki 记录截图、验证环境、实际结果和未验证平台。

验证方案

对工作区主流程、仓库／连接页、设置页和关键浮层建立代表性截图对照，覆盖深浅主题、窄窗口、长文本及异常状态；在实际应用中验证核心交互与键盘流程，检查减少动态效果及滚动／浮层动效流畅度。执行受影响共享组件检查与应用回归；各平台实际验证情况分别记录，不将未运行的平台视为通过。

风险与待确认

具体视觉方向、最终尺寸和页面布局待设计；共享组件变化可能影响官网 UI 示例，需同步检查。应明确全局规范扩展与业务页面调整的界限，防止局部 CSS 覆盖继续造成风格漂移。

补充资料

用户于 2026-10-02 提供的分支下拉列表截图（应用版本、系统与缩放比例未提供）：

Alune 分支下拉列表：顶部搜索框与分支行、底部新建入口的比例待调整

关联需求：[优化] 增加分支下拉列表搜索框高度，协调输入区与列表的比例。

验证记录

日期 环境／依据 场景 结果
2026-10-02 用户截图与上述代码基线 记录需求、核对代码入口 已创建需求草案；未修改应用代码，未进行运行时复现或实现验收