Issue 178 - ShaoClean/Alune GitHub Wiki

Issue #178：PR/MR 页面布局与审阅层级

类型：优化
状态：已实现，验收通过，待合并
Issue：https://github.com/ShaoClean/Alune/issues/178
PR：https://github.com/ShaoClean/Alune/pull/179
最近更新：2026-10-02
代码基线：ebe8b15；实现：122551b，fixture 修正：33e8090

背景与方案

原详情把远端、返回／切换、标题、分支、操作和内容标签纵向堆叠，Diff 与讨论的可用高度不足。本次复用 Alune 的 Geist 字体、主题 token、图标与 @alune/ui 控件，收紧辅助信息，并保持 API、权限与 Review 语义。

列表优先展示标题，编号／作者／分支为次级信息，状态及更新时间独立对齐；标题进入详情，右侧箭头在浏览器打开。
详情头部分为返回与请求切换、请求信息、辅助与合并操作三组；辅助按钮和合并按钮之间使用细分隔线，关闭入口放入“更多审阅操作”，保留原有确认流程。
内容标签使用独立底色与选中态；概览、讨论独立滚动，文件列表与 Diff 各自滚动，取消主 Diff 的固定高度上限。
根据实际面板宽度使用 container queries；窄面板将导航和操作移到信息上方，标题最多两行。分支保留完整 title 提示，并优先保留目标分支；长路径可换行，窄面板文件列表位于 Diff 上方。
访问设置默认折叠，认证错误、失效关联、未知平台或从令牌管理返回时展开。令牌选择、远端、分页、草稿隔离与 API 请求语义保持原有实现。

范围仅为 5 个 PR/MR 前端文件及已有 fixture 的长内容开关；未混入同时存在的工作区列表、标签页或全局样式改动。基线中的右侧检查器在 PR/MR 视图不可启用；本次保持此行为。

验收标准

列表标题、状态、作者、分支、更新时间和外部入口可区分。
详情导航、信息、操作三组清晰，主操作可见。
内容导航与工具区分离，选中状态明确。
桌面头部保持紧凑，Diff 与讨论获得主要可用高度。
文件列表与 Diff 独立滚动。
深浅主题和文字状态正常，保留共享控件与焦点样式。
390px、900px 和常规桌面下无页面横向溢出；长标题两行、长分支省略并可查看完整内容、路径换行。
返回、请求切换、刷新、分页、认证、草稿、代码评论、合并／关闭确认取消流程可用。
构建与回归检查通过，实际结果及前后截图已记录。

验证记录

环境：macOS arm64，Node.js 25.5.0，独立 worktree，生产 Vite 构建，Ego Lite Chromium。日期为 2026-10-02。

检查	结果
`npx turbo build --filter=web --filter=server`；最终 `npm run build -w web`	通过；保留已有大 chunk 提示
`npm test -w web`	233 项通过，包括 6 项 PR/MR 单元测试。首次与共享包构建同时启动时因 dist 尚未生成失败；依赖构建完成后重跑全量通过
`node --test apps/web/tests/pull-requests.integration.cjs`	最终 4 项通过；真实 Nest／SQLite／临时 Git／SSH，托管响应模拟；覆盖 GitHub、GitLab、自建 GitLab、令牌、分页、错误恢复及 Review 写入
Prettier、`git diff --check`、commitlint	通过
GitHub Actions（提交 `33e8090`）	push 与 PR 共 24 项检查全部通过：commitlint、web/server/ssh-client/ui/desktop 单元测试，macOS/Linux/Windows 本地 Git 与网络代理测试。PR run：37004548263
1500 × 791 常规视口	头部约 71px，内容 510px／详情 620px，约 82%；并非所有尺寸的固定要求
900 × 850 与 390 × 850，深浅主题	无页面横向溢出；390px 长标题实测 48px（两行），目标分支 development 完整显示
长内容 fixture	31 文件、长标题／分支、额外 160 行 Diff；列表 scrollTop 300 时 Diff 为 0，随后 Diff 滚到 700 时列表仍为 300
UI 流程	请求 #98／#94 切换、草稿／空描述、列表第二页 #76、刷新、返回、标签切换、GitLab 临时令牌认证及讨论回复通过
评论与操作	新行 11 单行选择，Shift 扩展至 12；填写正文后切至概览再返回，正文及选区保留；模拟多行评论成功显示；合并与关闭弹窗打开并取消
真实 GitHub 只读	ShaoClean/Alune PR #177 列表、详情、13 个文件 Diff、评论读取均 HTTP 200，实际页面渲染通过
真实 GitLab 只读	gitlab-org/cli MR !3992 列表、详情、4 个文件 Diff 均 HTTP 200，实际页面渲染通过；匿名 discussions 返回 401，认证讨论由 fixture 覆盖

长内容复验：运行 node apps/web/tests/pull-requests-fixture.cjs，向输出的 controlUrl POST {"layoutStress":true}，刷新详情；POST {"layoutStress":false} 恢复普通数据。此控制端点仅在测试 fixture 中存在。