展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 先跑现有路由并记录入口
- 在独立副本中准备导入目录
- 按当前 Dyad 版本导入本地工程
- 明确新增详情页与旧路由约束
- 处理未知客户与空数据
- 回读旧入口与手机布局
- 记录实际导入和交付差异
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 先跑现有路由并记录入口
本题以 hash 路由保留 #/ 和 #/customers，并新增 #/customers/c-102。data.json 是三条虚构客户数据。先把 route-manifest.json 作为验收清单，避免把所有入口改成同一页。
bash
npm run dev
2. 在独立副本中准备导入目录
检查 package.json 的 dev 脚本、Node 版本与安装方式；本题无构建依赖，dev 运行 node server.mjs，React 文件已随包提供。原始工程由你自己备份，不直接用业务主目录练习。
bash
node --version
npm run check3. 按当前 Dyad 版本导入本地工程
官方较新的导入说明支持本地目录、可配置安装与启动命令；v0.33.0 起支持原地导入。点击新增应用的 Import App 后选择副本目录，确认路径与启动命令，不能把旧文档的默认 dev 限制当所有版本约束。
4. 明确新增详情页与旧路由约束
prompt.md 要求点击客户姓名进入详情页，并显示行业、联系人代号和最后跟进日；保留原首页与客户列表内容。hash 路由是本题练习选择，实际项目如果用 React Router，应沿用原路由机制。
bash
cat route-manifest.json5. 处理未知客户与空数据
logic.mjs 的 resolveRoute 不把未知 ID 映射到第一个客户。#/customers/missing 显示“未找到客户”，并提供回到列表；不要把空数据理解为没有权限。
bash
node verify.mjs
6. 回读旧入口与手机布局
按 route-manifest.json 逐条打开首页、列表、客户详情和未知路由。Node 测试覆盖数据解析；浏览器还要核对导航、回退与小屏表格，不能只看新增详情截图。
7. 记录实际导入和交付差异
参考工程可离线运行，但没有实际 Dyad 导入日志。你执行后记录 Dyad/Node 版本、导入目录和改动文件，保留原路由清单与不通过项，再把新增功能用于自己的项目。
bash
node verify.mjs
来自 verification.json、clean-room.json 的真实本地检查排版；仅证明本站参考工程，未运行目标 App/模型/外部发布。
横向滑动查看细节，或打开原图放大对照。
怎样确认已经完成
- 输入、实际输出和模型/工具未执行范围分开记录，不把手写参考当模型结果。
- 真实运行本题 npm ci / check / build，并回读独立目录的页面与资源。
- 按本题七步核对负例、手机布局、数据或路由；外部服务单独保存实际验证结果。
常见问题
已有项目交给AI，原地导入会复制一份吗？
官方当前说明 v0.33.0 起可原地导入，因此不能假设会自动生成安全副本。练习前主动复制目录或使用独立分支。
AI接着修改旧网站为什么旧链接打不开？
常见原因是重写路由、路径前缀或部署回退规则。本文先保存入口清单，再逐条检查，不能以首页 200 代表旧路由正常。