展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 保存原始表单和其他页面基线
- 确认项目支持 Select Component
- 通过预览工具选择真实表单组件
- 给出只改一处的可测试约束
- 分别检查空值、错误和有效输入
- 复查不应改变的内容
- 交付改动与剩余缺口
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 保存原始表单和其他页面基线
解压后先打开 before.html，再读 baseline.json。姓名、邮箱、日期是本次修改范围；about.html 和页头不在范围内。verify.mjs 会检查这两个未修改文件的哈希。
bash
node verify.mjs
2. 确认项目支持 Select Component
官方指南将默认启用界定为 v0.8.0 之后创建的 Dyad 应用。较旧或导入项目要按实际框架检查支持情况；不能只在普通页面上点击元素就声称已经选中 React 组件。
3. 通过预览工具选择真实表单组件
在 Dyad 预览栏打开组件选择工具，再点预约表单，确认定位到负责表单的组件。本页提供 BookingForm.jsx 作为结构参考；未执行该工具，因此没有组件高亮的模拟截图。
4. 给出只改一处的可测试约束
把 prompt.md 中的范围直接交给工具：姓名去空白后至少两字、邮箱格式有效、日期不能早于本地今天；不要改页头和介绍页，不增加账户与支付功能。
bash
cat prompt.md5. 分别检查空值、错误和有效输入
after.html 使用与校验脚本同一个 validateBooking 函数。错误逐字段显示，有效输入只生成本地确认信息，不上传或真实预约。Node 测试覆盖无效邮箱、过去日期和跨时区本地日期边界。
bash
node verify.mjs
6. 复查不应改变的内容
比较 before/after 的导航和介绍文案，检查 baseline.json 对其他文件的指纹。哈希证明指定文件未改，不代表所有页面的视觉和行为都无回归；在实际 Dyad 输出中再运行同样的比较。
7. 交付改动与剩余缺口
保留修改前后 HTML、BookingForm.jsx、共享 logic.mjs 和真实 verification.json。它们能辅助判断“AI局部改网页”是否越界；表单成功提示不等于短信、数据库或预约服务已经接通。
bash
npm run dev
来自 verification.json、clean-room.json 的真实本地检查排版；仅证明本站参考工程，未运行目标 App/模型/外部发布。
横向滑动查看细节，或打开原图放大对照。
怎样确认已经完成
- 输入、实际输出和模型/工具未执行范围分开记录，不把手写参考当模型结果。
- 真实运行本题 npm ci / check / build，并回读独立目录的页面与资源。
- 按本题七步核对负例、手机布局、数据或路由；外部服务单独保存实际验证结果。
常见问题
网页改一处不全改，选中组件就能完全保证吗？
不能。选中组件帮助定位，但模型仍可能改到关联文件；要保存基线并复查实际差异。
预约确认后记录存到哪里？
本站练习只显示页面内的确认结果，不持久化、不发送邮件；真实存储要另接后端并验证权限。