阶段 1 · 需求到前端骨架

AI CODING · STAGE 1 · FRONTEND FOUNDATION

冻结需求与目录边界，再用 Mock 数据接通阶段选择、推荐列表和详情页。代码从 1.4 开始写。

投入 5–8 小时自动检查 11 tests人工验收 4 paths

进入 1.1 →

1.1 需求1.2 架构1.3 组件1.4 实现

本阶段提交

docs/requirements.mddocs/architecture.md2 张 AI 任务卡可运行 H5 首屏

本阶段要交什么

最终链路只有四步：

选择阶段
  → 查看该阶段的推荐列表
  → 打开推荐详情
  → 无效详情 ID 显示空状态

需求写进 docs/requirements.md，目录责任写进 docs/architecture.md。组件任务拆成两张卡，分别交给 AI。实现完成后，repository 中应有阶段与推荐的 domain、5 条 Mock 数据、2 个 component、首页和详情页。

收藏、浏览历史、local persistence、API、database 和 AI 解释不进入本阶段 diff。

Repository 最终形态

完成 1.4 后，learner/week-01 至少应有下面这些文件。这里只列本阶段会碰到的路径：

chenyue-ai-coding-lab/
├── docs/
│   ├── requirements.md
│   └── architecture.md
└── apps/web/src/
    ├── domain/
    │   ├── stages.ts
    │   ├── stages.test.ts
    │   ├── recommendations.ts
    │   └── recommendations.test.ts
    ├── data/
    │   └── recommendations.ts
    ├── components/
    │   ├── StagePicker.vue
    │   └── RecommendationCard.vue
    ├── pages/
    │   ├── index/index.vue
    │   └── detail/index.vue
    └── pages.json

不要提前创建空目录。走到对应任务再建文件，git status --short 才能说明当前 diff 属于哪一步。

Commit 建议

建议拆成四个可以独立 Review 的 commit：

docs: add stage one requirements
docs: define stage one architecture
feat(web): add recommendation domain
feat(web): connect recommendation pages

Commit 数量不是硬指标。关键是文档、domain 和页面接线不要混成一个几百行 diff；Reviewer 应能退回其中一组而不影响另外三组。

按这个顺序做

顺序	改什么	Reviewer 看什么
1.3 页面与组件拆解	两张待执行任务卡	props、events、允许文件、禁止文件
1.4 用 Mock 数据跑通首屏	domain、data、component、page	RED/GREEN、diff、11 tests、H5 build、四条页面路径

前三节不写业务代码。1.4 再让 test 先失败，然后补最小实现。

合并前检查

在教学 repository 根目录运行：

npm run test:web
npm run build:web
git status --short

预期：11 项测试通过、H5 build exit 0、working tree 只包含准备提交的文件。

启动 H5 后再走四条路径：

1. 默认选中“6–12 月”，列表显示两条推荐。
2. 切到“孕期”，列表只剩“产检资料收纳清单”。
3. 打开“南瓜泥入门”，详情显示推荐依据和注意事项。
4. 把详情 ID 改成不存在的值，页面显示“没有找到这条推荐”。

CI 通过也不能替代这四条操作。它们检查 component event、页面导航和详情查询是否真的接上。

Reviewer 最终要拿到这些证据：

证据	能确认什么	不能确认什么
git log --oneline --decorate -8	commit 是否按责任拆开	页面行为是否正确
npm run test:web	阶段、筛选、查找规则没有回归	component event 和导航
npm run build:web	TypeScript 与 H5 构建链可用	用户路径是否接通
四条 H5 路径	首页状态、event、route、详情查询已接线	未来 API 和 persistence

某一项证据缺失，就只补对应检查。不要用一张“页面能打开”的截图替代 test 输出，也不要用 CI 绿灯替代手动路径。

从 1.1 需求拆解与验收条件 开始。