验证闭环：截图反解 + genui check

「能跑」不等于「能上线」。小工具上线前必须建立一套验证闭环，把「看起来对」升级成「确定对」。实战中沉淀出两层验证：静态合规检查 + 动态真实验证。

第一层：genui check（静态合规）

这是门槛级验证，必须 exit 0：

genui check ./your-tool-dir

它覆盖结构、代码、视觉、交互、资源、打点六个维度，把外链、硬编码色、小字号、第三方脚本等红线在本地拦下。任何非 0 退出都要逐条修。

建议边写边跑，而不是写完后一次性跑——迭代中暴露问题，定位成本最低。

第二层：genui preview + 无头截图（布局核对）

genui check 只管合规，不管「长得对不对」。布局要用预览 + 截图核对：

genui preview --qr-image ./your-tool-dir

注意实战约定：preview 必须带 --qr-image，否则可能无法正常起预览/出二维码。起好后用无头 Edge 对预览端口截图，肉眼核对：

  • 表头是否在、文案是否 ≤ 10 字、高度是否 45px；
  • 画布与操作区布局是否错乱、是否溢出；
  • 控件（滑动条/按钮）数量与位置是否合理。

第三层：程序反解（生成类专属）

对「生成图片 / 二维码」类工具，截图肉眼看不够，要反向验证产物可被正确消费。以二维码为例：

  1. 无头 Edge 截图得到 preview-xxxxx.png；
  2. Node 脚本用 jsqr + pngjs 对图中二维码反解；
  3. 断言反解出的 URL / 中文与输入一致，输出 MATCH YES。

这一步能抓出「UTF-8 编码错导致中文乱码」这类 check 查不出的逻辑 bug。实战中二维码整改前后都做了反解复测，确保 MATCH YES。

cos-icon 的「假异常」

cos-icon 字体图标在平台外（如本地浏览器直接打开产物）会显示为方块，这是正常现象，不是 bug，也不影响平台内渲染。验证时别被它误导，重点看布局与功能。

验证清单（上线前自测）

  • [ ] genui check 退出码 0
  • [ ] preview 截图布局无错乱、无溢出
  • [ ] 表头文案 ≤ 10 字、高 45px
  • [ ] 生成类工具做了反解验证（MATCH YES）
  • [ ] sendLog 守卫已封装、本地打开不报错
  • [ ] 剪贴板/网络等红线已确认合规

小结

验证闭环 = check 管合规 + 截图管布局 + 反解管逻辑。三层都过，才敢说「确定能上线」。