Issue 31
- 类型：优化
- 状态：设计稿 v1 已完成；应用重构已实现，草稿 PR 待审阅及真实 SSH / 跨平台回归
- Issue：https://github.com/ShaoClean/remote-git/issues/31
- PR：https://github.com/ShaoClean/remote-git/pull/33
- 最近更新：2026-09-16
- 设计稿代码基线：
codex/issue-25-wiki-docs/a272835
已按本页设计稿实现中央 Diff、右侧改动与提交、两侧独立显隐、集中应用菜单、布局偏好和快捷键，保留原有蓝色主题。原先“仅高保真图片”的交付范围属于设计阶段；用户随后要求开始应用重构。
- 实现 PR：https://github.com/ShaoClean/remote-git/pull/33
- 重构前后截图、交互验收与未验证场景
- 前端 46 项测试、桌面 41 项单元测试和两阶段 Electron 集成回归通过；真实 SSH 与 Windows / Linux 桌面仍待回归，Issue 不关闭。
下文保留设计稿 v1 的原始规格与制作记录，设计图中的模拟操作不等于真实应用回归；应用验收以独立验收页为准。
最终交付为 7 张 1440 × 900 浅色高保真 PNG 设计图，保留 RemoteGit 原有蓝色主题。图片中的仓库、代码及 Git 状态均为演示数据。
下载 ZIP 后解压，在 screens/ 中查看原尺寸图片。交付形式按用户于 2026-09-16 的选择确定为“仅高保真图片”，主题为“浅色主稿”。
合并重复的仓库总览入口，集中设置与帮助，为差异阅读分配更充分的空间。布局、菜单组织、面板控制及线性图标参考 Codex App。按照用户于 2026-09-16 补充的要求，主题色沿用 RemoteGit 现有配色。
| 项目 | 设计值 |
|---|---|
| 主画布 | 1440 × 900；另验证 1280 × 900 |
| 顶栏 / 状态栏 | 48px / 26px |
| 左侧工作区 / 右侧改动与提交 | 默认 236px / 320px |
| Diff 可用宽度 | 双侧显示 884px；隐藏左侧 1120px；隐藏右侧 1204px；双侧隐藏 1440px |
| 主要文字 / 代码 | 13px；文件名 12–13px；辅助信息 10–12px |
| 图标 / 图标按钮 | 16–17px 线性图标，约 1.55px 描边；30px 按钮 |
| 间距 / 圆角 | Diff 外侧 22px；控件圆角 6–7px；Diff 卡片 9px |
| 设置页 | 左侧分类 236px，正文最大 672px |
配色来源：现有主题变量。
| 用途 | 颜色 |
|---|---|
| 品牌主色、主要按钮、开关、选中标识 | #2563eb |
| 左侧工作区背景 | #eef3f9 |
| 选中态浅蓝 |
#e8f1ff / #eaf1ff
|
| 顶栏和次级表面 | #f8fafc |
| 正文 / 分隔线 |
#172033 / #e4e8ef
|
| Diff 新增 / 删除背景 |
#eaf8ef / #fff0f0
|
- 左侧保留连接管理、唯一的仓库总览入口和按连接分组的仓库树；选中的仓库使用原有蓝色标识。
- 中央是 Diff 主区域，右侧集中未暂存／已暂存文件与提交草稿。切换文件会更新差异；模拟暂存会更新分组和提交数量。
- 左右显隐按钮始终位于顶栏，关闭后仍可恢复；关闭面板不会清空当前文件或提交草稿。Diff 卡片中的放大按钮可一次隐藏两侧。
- 左下角仅保留一个应用菜单，包含设置与帮助。左栏隐藏时，该菜单入口移至顶栏，避免额外入口和功能不可达。
- 设置包含 AI 服务商、提交生成、布局及版本更新。布局稿展示显隐开关、宽度滑杆、默认 Diff 模式和恢复默认值的位置及状态。
- 统一 Diff 提供独立的代码滚动区域；分栏模式并排显示版本和增删对应关系，长行折行，避免窄列截断代码。
- 快捷键：
⌘ / Ctrl B切换左侧，⌘ / Ctrl ⇧ B切换右侧，⌘ / Ctrl ,打开设置，Esc关闭菜单／弹窗。
2026-09-16，制作阶段在 macOS 的 Ego Chromium 浏览器中校验布局与状态，并导出下列图片。以下记录用于说明制图质量，最终交付为静态高保真图片。
| 场景 | 结果 |
|---|---|
| 文件选择更新中央 Diff；模拟暂存更新提交数量 | 通过 |
| 两侧独立隐藏、同时隐藏和重新打开 | 通过；Diff 保持可见 |
| 面板切换后保留当前文件、提交摘要和说明 | 通过 |
| 左栏隐藏后设置菜单仍可打开，入口仅有一个 | 通过 |
| 设置页导航、布局开关、宽度调整和返回工作区 | 通过 |
| 统一／分栏切换、新增文件空版本比较 | 通过 |
| 文件筛选、输入时保持焦点 | 通过 |
| 提交按钮的演示提示与草稿保留 | 通过；未执行真实 Git 操作 |
| 1440px、1280px 窗口无页面横向溢出 | 通过 |
| 分栏长代码行在 1440px、1280px 下无截断 | 通过 |
| 7 张关键状态图逐张目视检查 | 通过 |
共通过 14 项交互／窗口检查，另通过 2 项分栏长行布局检查。只核验设计稿交付；真实应用的 Git 操作、SSH、状态持久化和其他平台仍需在实现阶段回归。
- 本次交付浅色高保真图片，不修改主应用代码、API 或类型。画面中的提交、推送、拉取和 AI 生成仅为设计展示。
- 设计图采用浅色版本，延续既有蓝色；未额外设计深色主题或移动端。
- 应用重构的验收项保持未完成；本页作为具体的视觉与交互依据，按后续反馈修订。
- Wiki 变更可以通过普通提交回退，不重写历史。