Issue 6

Issue #6：[优化] 重构工作区布局，突出改动与检查器并提升侧栏灵活性

Issue #6 · PR #10 · 实现方案与验收记录

2026-09-16 从 Issue 迁入的需求与方案快照，保留原始验收勾选状态；当前进度以关联 Issue / PR 为准。实现细节、验收证据和未验证项见上方记录。

当前基线（2026-09-11）

• 发布基线：v0.2.0，对应提交 eafe99b。
• 开发基线：development@7d9aace。dev 指 development；当前分支相对 tag 新增 3 个提交，见差异。
• 本项状态：已关闭 / TODO Done；PR #10 已合并（11f1d54），已包含于 v0.2.0 和当前 development。

背景与问题

原需求针对 0.1.2 时的仓库界面：左侧工作区与仓库内导航同时占用横向空间，头部较高，留给“改动”和“检查器”的面积不足；侧栏收起状态未持久化，面板宽度固定，窄窗口检查器可能不可访问。

PR #10 已完成这轮布局改造，并随 v0.2.0 发布。当前 development 保留紧凑工具栏、横向视图导航、侧栏与改动列表调宽、布局偏好恢复及窄窗口检查器切换；以下为本轮需求与已记录验收结果。

目标

• 用户明确目标：以“改动”和“检查器”为主视图，减少左侧工作区和顶部非核心信息占用，让主要操作与内容更容易找到。
• 推荐交互目标：支持按需要调整、收起面板，并在重新打开应用后恢复布局偏好；窄窗口仍能完成查看改动和差异的完整流程。
• 布局重构保持现有 Git 操作语义，终端和 AI 功能由独立事项推进。

需求与范围

1. 默认进入仓库时突出改动列表与检查器的联动。选择文件后显示对应差异，清楚标示当前选择、暂存状态和文件路径；提交历史仍可使用检查器查看提交详情及文件差异。
2. 左侧工作区可收起、重新展开、拖动调宽，并提供无需鼠标拖动的调整方式。收起后保留明确的恢复入口；长连接名、仓库名和路径应可辨认或查看完整内容。
3. 为改动列表和检查器提供可调整的空间分配与恢复默认布局入口，设置合理的宽度边界。列表和差异区独立滚动，避免操作按钮被内容挤出可访问区域。
4. 压缩仓库身份、分支、同步状态等信息的呈现，整合同类刷新、拉取、推送入口。保留当前仓库与连接辨识、必要状态及操作反馈，次要信息可按需展开。
5. 窄窗口采用明确的面板切换或临时展开方式，选择文件后能进入检查器并返回列表。切换布局不清空提交输入、不触发 Git 写操作，不显示其他仓库的残留差异。
6. 新增布局偏好与现有树展开、排序数据兼容；窗口变小时临时适配，恢复尺寸后合理恢复用户选择。终端和 AI 至多预留按需入口，不增加默认常驻的大块区域。

方案建议与代码线索

当前实现已采用双主面板、紧凑横向导航和窄窗口切换：

• Layout.tsx 与 useWorkspaceLayout.ts：侧栏收起、调宽、临时窄屏抽屉与布局偏好，不再仅用局部内存保存收起状态。
• RepositoryDetailPage.tsx 与 ChangesView.tsx：紧凑工具栏、横向导航、改动与检查器分配、窄窗口返回列表以及按仓库隔离的输入与差异。
• workspace-layout.css：正式工作区布局与响应式规则；index.css 保留全局视觉样式。
• workspaceStore.ts 与 workspaceStorage.ts：state.layout 与原树展开、排序偏好一并保存，兼容版本 1 封装和无效数据回退。

验收标准

• 相同窗口尺寸、仓库与数据的前后对比能展示改动和检查器获得更多可用空间，仓库身份与主要操作仍可找到。
• 侧栏可收起、展开和调宽；改动与检查器可调整分配，并支持恢复默认布局。
• 刷新页面、重启桌面应用后恢复已保存偏好；旧配置、无效宽度或存储失败时仍有可用布局和适当反馈。
• 窄窗口中可从文件列表进入检查器并返回，关键按钮未被裁切，页面没有妨碍操作的整体横向溢出。
• 调整布局不丢失提交输入与当前仓库上下文；切换仓库后不残留前一个仓库的差异。
• 仅用键盘可开关侧栏、调整分隔区域并进入检查器；控件有可见焦点和可访问名称，关闭临时面板后焦点合理返回。
• 工作区树折叠、拖动及键盘排序、仓库标签切换、暂存/取消暂存、提交和同步操作通过回归验证。

验证方案

在桌面应用与浏览器分别检查宽屏、普通窗口、窄窗口及缩放场景，覆盖空仓库、多文件、长路径、大差异、加载和错误状态，并提供同条件前后截图或录屏。对布局偏好边界、旧数据兼容、重启恢复和关键键盘操作补充必要验证；复用现有侧栏与桌面存储测试，执行前端构建及相关回归检查。

风险与待确认

已确定：小于 900 px 使用临时工作区抽屉及列表/检查器切换；布局按应用保存，窗口适配不回写用户偏好。默认侧栏 220 px、改动列表 340 px，宽度边界和键盘行为见验证记录。提交草稿只在本次页面会话内按仓库保留，刷新后清空。

已有浏览器与 macOS Electron 验证覆盖布局和接口路由；真实远程 SSH 写操作及 Windows/Linux 原生安装包验收未执行，不能从本轮结果推断已通过。

补充资料

需求来源：用户提出“主要的应该是改动和检查器”，并指出左侧工作区灵活性不足、顶部状态信息占位过多。

• 实现 PR：#10，合并提交 11f1d54；已包含于 v0.2.0，当前 Issue 已关闭、TODO 为 Done。
• 实现说明、同条件前后截图与验证记录：包含 Web 18 项、Desktop 21 项测试，Electron 跨进程恢复及浏览器布局/操作路由验证；测试数字为交付时记录。
• 后续终端 #7、远端 AI #8 与主题 #15 应复用当前布局；本轮布局任务已完成，不再作为尚未启动的前置重构。