# Dyad 选中组件修改：只调整预约表单并复查其余页面

本站提供 before/after 手写对照和 Node 真实校验；未运行 Dyad Select Component，图中不含虚构组件选择状态。

## 本地运行

需要 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. 保存原始表单和其他页面基线

解压后先打开 before.html，再读 baseline.json。姓名、邮箱、日期是本次修改范围；about.html 和页头不在范围内。verify.mjs 会检查这两个未修改文件的哈希。

```sh
node verify.mjs
```

### 2. 确认项目支持 Select Component

官方指南将默认启用界定为 v0.8.0 之后创建的 Dyad 应用。较旧或导入项目要按实际框架检查支持情况；不能只在普通页面上点击元素就声称已经选中 React 组件。

### 3. 通过预览工具选择真实表单组件

在 Dyad 预览栏打开组件选择工具，再点预约表单，确认定位到负责表单的组件。本页提供 BookingForm.jsx 作为结构参考；未执行该工具，因此没有组件高亮的模拟截图。

### 4. 给出只改一处的可测试约束

把 prompt.md 中的范围直接交给工具：姓名去空白后至少两字、邮箱格式有效、日期不能早于本地今天；不要改页头和介绍页，不增加账户与支付功能。

```sh
cat prompt.md
```

### 5. 分别检查空值、错误和有效输入

after.html 使用与校验脚本同一个 validateBooking 函数。错误逐字段显示，有效输入只生成本地确认信息，不上传或真实预约。Node 测试覆盖无效邮箱、过去日期和跨时区本地日期边界。

```sh
node verify.mjs
```

### 6. 复查不应改变的内容

比较 before/after 的导航和介绍文案，检查 baseline.json 对其他文件的指纹。哈希证明指定文件未改，不代表所有页面的视觉和行为都无回归；在实际 Dyad 输出中再运行同样的比较。

### 7. 交付改动与剩余缺口

保留修改前后 HTML、BookingForm.jsx、共享 logic.mjs 和真实 verification.json。它们能辅助判断“AI局部改网页”是否越界；表单成功提示不等于短信、数据库或预约服务已经接通。

```sh
npm run dev
```

## 输入与许可

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

官方依据：
- https://www.dyad.sh/docs/upgrades/select-component

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