阶段 2 · 前端业务闭环

AI CODING · STAGE 2 · FRONTEND LOOP

把阶段 1 的静态页面接成可恢复、可重试的业务链。

刷新后 状态还在请求失败 可以重试新增页面 我的记录

从本地状态契约开始 →

从页面动作追到边界

切换阶段、收藏和打开详情都从 page 开始。沿调用方向读 diff：

切换阶段 / 收藏 / 打开详情
              ↓
             page
          ↙        ↘
client seam        Pinia store
     ↓                  ↓
app provider       persistence adapter
     ↓                  ↓
mock adapter          uni storage

Review 时逐层问：

• page 是否只经 provider 取得 client，没有 import Mock 数据或 adapter；
• component 是否只收 props、发 events，没有读取 store；
• store 是否只处理内存状态与 action，把 JSON 和 storage 异常交给 persistence；
• client 是否把 unknown 响应解析成固定 domain model，再交给 page。

五次可独立 Review 的改动

2.1 本地状态契约

问题：storage 里的 JSON、阶段和推荐 ID 都是不可信输入。 Review：核对 version、未知 stage fallback、ID 过滤去重、history 上限与冻结副本。

2.2 Pinia 与本地持久化

问题：刷新要恢复状态，但读取和写入 storage 都可能失败。 Review：区分五种 read status；损坏 v1 可重建，读异常和未来版本不能被覆盖。

2.3 请求 Client 与 Mock 场景

问题：三个页面需要不同查询，运行时响应也不能靠 TypeScript 断言。 Review：检查 list(stageId)、get(id)、listByIds(ids)、app provider、四种 Mock 场景与 stale request 保护。

2.4 页面状态与浏览器验收

问题：unit test 绿了，事件、跳转、storage、retry 和键盘链路仍可能断开。 Review：实际操作 loading、empty、error、收藏、历史和 retry，并量出紧凑控件的 44 × 44 触点。

2.5 PR Review 与交付

问题：AI 返回代码后，Reviewer 要决定这条分支能否进入 PR。 Review：依次读 unstaged diff、跑定向与全量检查、走浏览器路径，再核对 cached diff 和提交历史。

自动检查与 H5 路径

从教学仓 repository root 运行：

npm run test:web
npm run typecheck:web
npm run build:web
npm --workspace apps/web run dev:h5 -- --host 127.0.0.1 --port 4173

最终自动检查是 9 个 test files、143 tests；typecheck 与 H5 build 均为 exit 0。checkpoint 细节由教练侧维护记录对照。

H5 按这些路径操作：

1. 切换阶段后 refresh，阶段和列表保持一致。
2. 收藏后 refresh，“我的记录”仍能还原收藏。
3. 连续打开同一详情，最近浏览只保留一条。
4. #/pages/index/index?scenario=slow 先显示 loading，再显示结果。
5. #/pages/index/index?scenario=empty 显示 0 条和 empty 文案。
6. #/pages/index/index?scenario=retry 首次失败，激活“重新加载”后恢复结果。

再补查收藏不会打开详情、未知详情 ID 不写 history、Enter/Space 可操作、页面 console error 为 0。测试、浏览器和 diff 检查任何一项都不能由 AI 回复代替。

从 2.1 本地状态契约 开始。