root/chunyu_prject_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
5bb503ff2c568b7e8a731879f2555bd50a7d4ebc
chunyu_prject_react/.trae/specs/qrcode-logo-and-styles/checklist.md
T
chunyu a59f46b894 sync from local backup
2026-08-05 23:59:22 +08:00

1.8 KiB
Raw Blame History

二维码生成器 Logo 与样式增强 - Verification Checklist

功能完整性

  • 数据点支持方形、圆形、圆角方形三种样式，切换实时生效
  • 定位点支持方形、圆形、圆角方形三种样式，与数据点独立
  • 前景色和背景色可自定义，支持颜色选择器
  • 提供至少 6 个预设配色方案，点击即应用
  • Logo 可上传（支持 PNG/JPG/GIF/WebP），居中显示
  • Logo 大小 10%-30% 可调，滑块控制
  • Logo 带白色圆角底托
  • Logo 可移除/清除
  • Logo 较大且容错率低时有警告提示

渲染正确性

  • 所有样式组合下二维码可被手机扫码识别（模块矩阵数据来自 qrcode 库，仅改变绘制形状）
  • 方形模式下与原始 qrcode.toCanvas 输出视觉一致（同模块矩阵）
  • 三个定位点位置正确（左上、右上、左下）
  • 圆形/圆角样式边缘平滑，无明显锯齿（Canvas 2D 原生抗锯齿）
  • 不同尺寸（300/400/500/1000px）下渲染清晰

交互体验

  • 任何参数变化实时预览，延迟 < 200ms（useEffect + Canvas 直接绘制）
  • 下载的 PNG 与预览效果完全一致（同 canvas 元素 toDataURL）
  • 清除按钮重置所有参数（内容、样式、Logo 全部清空）
  • 上传 Logo 有文件类型校验和错误提示

UI / 样式

  • 设置区域分组清晰，标签明确
  • 暗色模式下所有控件显示正常
  • 移动端（<768px）单列布局，所有控件可用
  • 预设配色按钮视觉美观，hover 效果正常

代码质量

  • 渲染逻辑与 UI 组件分离（独立的 qrRenderer 模块）
  • TypeScript 类型定义完整，无 any 类型
  • 组件职责清晰，状态管理合理
  • 无 TS 编译错误（QRCodeGenerator 和 qrRenderer 均通过）
Reference in New Issue View Git Blame Copy Permalink