# Dyad 导入已有项目：保留 React 路由后增加客户详情页

本站手写 React 参考工程使用本地 React 运行库；实际静态服务与纯函数测试已运行，Dyad 导入和 AI 修改未执行。

## 本地运行

需要 Node.js 20+，本参考工程没有 npm 第三方运行依赖。

```sh
npm ci --ignore-scripts
npm run check
npm run dev
```

服务只绑定 127.0.0.1:8456；修改端口可运行 `PORT=8457 npm run dev`。W03 与 W11 包含随包本地 React 18.3.1 UMD 运行库及许可，前者 hash 路由不需要服务器路径回退。

## 七步操作

### 1. 先跑现有路由并记录入口

本题以 hash 路由保留 #/ 和 #/customers，并新增 #/customers/c-102。data.json 是三条虚构客户数据。先把 route-manifest.json 作为验收清单，避免把所有入口改成同一页。

```sh
npm run dev
```

### 2. 在独立副本中准备导入目录

检查 package.json 的 dev 脚本、Node 版本与安装方式；本题无构建依赖，dev 运行 node server.mjs，React 文件已随包提供。原始工程由你自己备份，不直接用业务主目录练习。

```sh
node --version
npm run check
```

### 3. 按当前 Dyad 版本导入本地工程

官方较新的导入说明支持本地目录、可配置安装与启动命令；v0.33.0 起支持原地导入。点击新增应用的 Import App 后选择副本目录，确认路径与启动命令，不能把旧文档的默认 dev 限制当所有版本约束。

### 4. 明确新增详情页与旧路由约束

prompt.md 要求点击客户姓名进入详情页，并显示行业、联系人代号和最后跟进日；保留原首页与客户列表内容。hash 路由是本题练习选择，实际项目如果用 React Router，应沿用原路由机制。

```sh
cat route-manifest.json
```

### 5. 处理未知客户与空数据

logic.mjs 的 resolveRoute 不把未知 ID 映射到第一个客户。#/customers/missing 显示“未找到客户”，并提供回到列表；不要把空数据理解为没有权限。

```sh
node verify.mjs
```

### 6. 回读旧入口与手机布局

按 route-manifest.json 逐条打开首页、列表、客户详情和未知路由。Node 测试覆盖数据解析；浏览器还要核对导航、回退与小屏表格，不能只看新增详情截图。

### 7. 记录实际导入和交付差异

参考工程可离线运行，但没有实际 Dyad 导入日志。你执行后记录 Dyad/Node 版本、导入目录和改动文件，保留原路由清单与不通过项，再把新增功能用于自己的项目。

```sh
node verify.mjs
```

## 输入与许可

虚构业务、客户、活动及几何插图均为本站原创教学输入；参考源码采用 MIT（见 LICENSE）。不是 Dyad/bolt.diy/screenshot-to-code UI 或模型输出。不包含真实 API 密钥、账号、发布 URL 或客户资料。

官方依据：
- https://www.dyad.sh/blog/import-project-ai-app-builder

查询词仅为任务意图，不是已验证 Google 月搜索量或抖音指数。