展开本页目录
开始前准备什么
- 下载独立练习包，使用 Node.js 20+；参考源码没有 npm 第三方依赖，React 库仅 W03/W11 随包提供。
- 在自己的独立目录中运行；所有业务和身份均为虚构教学数据。
- 目标 App、模型、账号授权与外部发布需按本页真实边界另行操作；不使用真实客户资料练习。
- 定义报名字段和成功条件
- 区分工具环境与生成页面环境
- 选择 OpenAI Like 并填写真实模型
- 把具体约束交给模型
- 检查三个错误和有效报名
- 在浏览器确认可访问的状态变化
- 导出并记录实际接口边界
独立原创源码、输入、逐步说明、运行脚本和真实本地检查；不含账号密钥或模型权重。
包含七步具体操作、来源与本题未执行范围。
真实执行本题纯函数/结构断言，不代替目标 App、模型、权限或发布测试。
离线 npm ci、check、build 与 HTTP 内容类型回读结果。
1. 定义报名字段和成功条件
本题工作坊包含姓名、邮箱、人数与同意声明。人数限制 1–4 且必须是整数；勾选声明是必需条件。先读 brief.json，避免模型把报名页扩成不需要的登录或付款系统。
bash
node verify.mjs
2. 区分工具环境与生成页面环境
bolt.diy 本身的 .env.local 配置供应商。官方 .env.example 有 OPENAI_LIKE_API_BASE_URL 与 OPENAI_LIKE_API_KEY；它们不应复制进生成的客户端页面或以 VITE_ 前缀公开。
bash
cat env.example.txt3. 选择 OpenAI Like 并填写真实模型
按你实际运行的 bolt.diy 版本在供应商配置中选择对应项，输入兼容基址和账户可用模型。工具可使用兼容协议，不代表所有模型特性、视觉输入或工具调用都兼容；先运行最小请求。
4. 把具体约束交给模型
prompt.md 要求标签关联输入、错误放在对应字段下、键盘可提交、成功后显示摘要并声明未发送。本文未调用模型，手写参考页只是可比较的验收目标，不能冒充 bolt.diy 的生成输出。
bash
cat prompt.md5. 检查三个错误和有效报名
logic.mjs 拒绝空姓名、无效邮箱、人数 0/5/1.5、未同意声明；有效数据姓名去空白。verify.mjs 在 Node 真正执行这些测试，页面与测试共用函数，避免表面提示与实际规则不一致。
bash
node verify.mjs
6. 在浏览器确认可访问的状态变化
运行本地服务，先提交空表单，再填有效字段。错误使用 aria-live 和输入 aria-describedby，成功摘要不回显 HTML 标签。此练习不发送请求，不代表邮件或数据库已收件。
bash
npm run dev
7. 导出并记录实际接口边界
交付源码和 verification.json，并在自己的模型运行记录中标明版本与费用。若后续接模型 API 或报名后端，将私密 token 放服务器；apizt 配置页用于独立模型接入，不接管本题报名数据。
bash
node verify.mjs
来自 verification.json、clean-room.json 的真实本地检查排版；仅证明本站参考工程，未运行目标 App/模型/外部发布。
横向滑动查看细节，或打开原图放大对照。
怎样确认已经完成
- 输入、实际输出和模型/工具未执行范围分开记录，不把手写参考当模型结果。
- 真实运行本题 npm ci / check / build，并回读独立目录的页面与资源。
- 按本题七步核对负例、手机布局、数据或路由；外部服务单独保存实际验证结果。
常见问题
开源AI建站工具可以把 API Key 直接放报名页吗？
不可以。工具侧供应商密钥与生成网站运行时是两个环境。浏览器代码对访问者可见，私密模型请求应由服务端代理。
AI生成报名网页显示成功，为什么没收到邮件？
本题成功只表示字段校验通过，没有邮件或存储服务。真实通知须另接后端并检查失败状态和重复提交。