# 第 10 章任务卡：做出可用记录页 v1.0 ## 1. 起点 你有一张五字段需求卡和三条虚构记录，需要做一个本地网页。目标只是“能记录、能筛选、能统计”，不是完整管理系统。 ## 2. 只读输入 - `inputs/chapter-10/field-card.md` - `inputs/chapter-10/records.json` - 第 9 章已验收内容包的用途说明 ## 3. 唯一写入位置 先只写 `workbench/tracker-app/`。本章检查通过后，冻结脚本才可创建 `workbench/chapter-11/v1.0-baseline/`；不要手工改写该基线。 ## 4. 本章唯一成果 完成 `index.html`、`styles.css`、`app-core.mjs`、`app.js`、`records.json` 和 `README.md` 的记录页 v1.0，并从这份通过验收的成果冻结第 11 章只读基线。 ## 5. 可复制给 Codex 的任务 ```text 根据 inputs/chapter-10 的字段卡和三条虚构记录，在 workbench/tracker-app 建一个不联网的本地记录页 v1.0。字段只有自动 ID、任务名称、状态、下一步、待确认问题；状态只有未开始、进行中、已完成。实现新增、全部查看、按状态筛选和三个独立统计；空任务名称必须拒绝，也必须拒绝任何不在三种允许值中的状态并明确指出它不受支持。数据只保存在页面内存，刷新后恢复三条样本，并在页面明确提示这一点。不得读取其他资料或增加账号、同步、权限、数据库。完成后先运行 npm run check:10；只有检查通过，才运行 node scripts/freeze-chapter-10-baseline.mjs，把自己的成果冻结成第 11 章基线。 ``` ## 6. 你必须亲手完成 启动 `npm run preview`，打开终端打印的根地址，再把路径切换到 `/workbench/tracker-app/index.html`。在浏览器新增一条有标题的虚构记录；切换到一个状态筛选并核对列表；再切回全部，核对三个统计。刷新页面，确认它恢复为三条起始样本。第 10 章检查通过后，运行 `node scripts/freeze-chapter-10-baseline.mjs`，确认终端输出 `CH10_BASELINE_FROZEN` 或 `CH10_BASELINE_UNCHANGED`。 ## 7. 你应该看到 - 空标题提交时出现明确错误且列表不增加。 - 直接向核心逻辑提交“待确认”等第四种状态时被明确拒绝；这样第 11 章才能因同一缺口得到正确 RED。 - 有效记录得到自动 ID 并立即进入列表。 - 筛选后只显示所选状态，统计仍按全部内存记录计算。 - 刷新后回到三条样本，页面说明没有持久保存。 ## 8. 三个真实坑 ### 坑 1：把小工具扩成完整系统 字段和状态由输入卡冻结。若增加登录、同步、优先级或数据库，范围检查会拒绝这些未授权能力。 ### 坑 2：读取现实数据 页面只能加载本地 `records.json`。代码扫描会拒绝外部请求、浏览器存储和不在练习包内的数据地址。 ### 坑 3：页面能开却不能完成动作 检查直接调用核心函数验证新增、过滤、统计、空标题和未知状态拒绝，不接受“有按钮、有文字”作为功能完成。 ## 9. 复选框验收 - [ ] 页面只显示五个约定字段。 - [ ] 有效记录可新增，空标题被拒绝。 - [ ] 不在三种允许值中的状态被明确拒绝。 - [ ] 三个状态均可筛选且计数正确。 - [ ] 刷新后恢复虚构样本并有内存态提示。 - [ ] `npm run check:10` 通过。 - [ ] 第 10 章检查通过后，冻结脚本从我自己的 `workbench/tracker-app/` 建立了 v1.0 基线。 ## 10. 停止、回退与交接 一旦需要联网、读取现实记录、增加需求卡外字段或引入安装依赖，就停止。回退为删除 `workbench/tracker-app/` 的本章输出并从输入卡重建。第 10 章检查通过后，交给第 11 章的是 v1.0 文件、`npm run check:10` 结果和由冻结脚本生成的 `workbench/chapter-11/v1.0-baseline/`；公开练习包不预置这份完成态。