一、背景

线下活动签到的老问题：纸质签到表效率低、字迹难认，事后还得人工录入；临时找开发同学写个小工具，排期又等不起。

这一次我们直接把需求丢给码道Space，看看它能不能一口气交付一个双击就能用的签到工具。

二、需求输入

原始需求只有一句话：

帮我做一个电子胸卡活动签到组合工具，单个 HTML 文件，包含姓名信息和签到二维码生成；表单要有必填校验和提示；支持导出图片或打印；名单要能增删、界面即时更新；样式简洁现代、卡片居中、圆角柔和阴影、配色协调、手机端自适应；纯 HTML+CSS+JS 不引外部库；用 localStorage 持久化并提供清空入口；代码结构清晰、注释完整。

关键约束其实就三条：单文件、零依赖、本地可跑。

三、交付结果

• 交付形态：单个 电子胸卡签到工具.html，双击即用，无需安装、无需联网
• 任务数据：10m34s，36.4K tokens
• 功能清单：

能力	说明
胸卡预览	编号（B-0001 起）+ 姓名 + 签到时间 + 二维码
签到登记	姓名必填校验，空值给出红色提示并回焦
名单管理	实时增删，统计人数，删除即时同步存储
图片导出	克隆胸卡 → SVG foreignObject → 2 倍 Canvas → PNG 下载
打印	window.print() + 专用打印样式，仅胸卡可见
持久化	localStorage，刷新后恢复名单并默认展示最近一位
响应式	宽屏左右两栏，窄屏自动单栏堆叠

四、实现要点

1）零依赖的二维码绘制：没有引任何 CDN，二维码按模块逐格画在 Canvas 上。

var qr = qrcode(0, 'M');        // 版本自动、M 级纠错
qr.addData(text, 'Byte');       // 字节模式
qr.make();
var count = qr.getModuleCount();
for (var r = 0; r < count; r++)
  for (var c = 0; c < count; c++)
    if (qr.isDark(r, c)) ctx.fillRect(/* 逐格填充 */);

2）单文件持久化：load() / save() 包了 try...catch，隐私模式下写入失败会提示而不是白屏。

3）PNG 导出：Canvas 无法被序列化，所以先克隆胸卡、把 Canvas 替换成同尺寸 <img>，再走 foreignObject 转图。

五、质量验证：AI 交付后，我做了什么

初稿不等于可用——这是本次最值得记录的部分。

第一层：结构检查。 检查 <script> / </body> / </html> 标签配平，发现文件里出现了两个 </script>：库源码中 case '$' : return 37; 被构建脚本替换成了 </script></body></html>，导致脚本被提前闭合——这就是"页面完全不出二维码"的根因。

第二层：逻辑冒烟测试。 用 Node + DOM 桩执行文件内嵌脚本，跑通 41 项断言：初始状态、必填校验、签到、二维码模块绘制、名单增删、PNG 导出、打印、清空、刷新恢复。

第三层：独立解码验证（关键）。 自己写的编码器不能自己证明自己。我们引入了独立的开源解码器 jsQR，把应用真实绘制到画布上的像素还原成 RGBA，再解码：

PASS  扫出内容 = "B-0001|Tom"
PASS  扫出内容 = "B-0001|张三"
PASS  扫出内容 = "B-0001|李四2026"
PASS  扫出内容 = "B-0001|王五"

这一层直接揪出了一个隐蔽缺陷：二维码库默认按 Latin-1 编码，中文「张」(U+5F20) 被 & 0xff 截成 0x20，二维码能扫但内容是错的。修复只需在编码入口启用 UTF-8：

qrcode.stringToBytes = qrcode.stringToBytesFuncs['UTF-8'];

顺带修掉的第三个小坑：胸卡编号原本按 list.length + 1 生成，删除中间记录后会产生重复编号；改为取现有编号最大序号 +1 后，编号始终唯一递增。

最终状态：冒烟 41/41 通过 + 独立解码 4/4 通过，中文姓名可正确扫描。

六、小结与思考

1. AI 的价值在于"从 0 到 1"：一句话需求到可运行初稿只用了十几分钟，省掉的是搭骨架、写样式、查 API 的时间。
2. 验收必须动手：能显示 ≠ 能用，能用 ≠ 用对。"页面不出二维码"和"中文扫出来是乱码"都不是靠读代码能轻易发现的，得真跑、真扫。
3. 测试要引入独立实现：用同一个库自证，只能证明"它自洽"，不能证明"它正确"。
4. 单文件交付在活动现场非常实用：一个 HTML 文件发到群里，谁都能双击打开用，不依赖网络和环境。