# bolt.diy OpenAI Like 配置：生成能校验字段的报名页

本站手写报名页与字段测试已运行；bolt.diy 和远程模型未运行，页面成功状态只代表浏览器本地验证。

## 本地运行

需要 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. 定义报名字段和成功条件

本题工作坊包含姓名、邮箱、人数与同意声明。人数限制 1–4 且必须是整数；勾选声明是必需条件。先读 brief.json，避免模型把报名页扩成不需要的登录或付款系统。

```sh
node verify.mjs
```

### 2. 区分工具环境与生成页面环境

bolt.diy 本身的 .env.local 配置供应商。官方 .env.example 有 OPENAI_LIKE_API_BASE_URL 与 OPENAI_LIKE_API_KEY；它们不应复制进生成的客户端页面或以 VITE_ 前缀公开。

```sh
cat env.example.txt
```

### 3. 选择 OpenAI Like 并填写真实模型

按你实际运行的 bolt.diy 版本在供应商配置中选择对应项，输入兼容基址和账户可用模型。工具可使用兼容协议，不代表所有模型特性、视觉输入或工具调用都兼容；先运行最小请求。

### 4. 把具体约束交给模型

prompt.md 要求标签关联输入、错误放在对应字段下、键盘可提交、成功后显示摘要并声明未发送。本文未调用模型，手写参考页只是可比较的验收目标，不能冒充 bolt.diy 的生成输出。

```sh
cat prompt.md
```

### 5. 检查三个错误和有效报名

logic.mjs 拒绝空姓名、无效邮箱、人数 0/5/1.5、未同意声明；有效数据姓名去空白。verify.mjs 在 Node 真正执行这些测试，页面与测试共用函数，避免表面提示与实际规则不一致。

```sh
node verify.mjs
```

### 6. 在浏览器确认可访问的状态变化

运行本地服务，先提交空表单，再填有效字段。错误使用 aria-live 和输入 aria-describedby，成功摘要不回显 HTML 标签。此练习不发送请求，不代表邮件或数据库已收件。

```sh
npm run dev
```

### 7. 导出并记录实际接口边界

交付源码和 verification.json，并在自己的模型运行记录中标明版本与费用。若后续接模型 API 或报名后端，将私密 token 放服务器；apizt 配置页用于独立模型接入，不接管本题报名数据。

```sh
node verify.mjs
```

## 输入与许可

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

官方依据：
- https://github.com/stackblitz-labs/bolt.diy/blob/main/.env.example

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