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