Files
chunyu_prject_react/.trae/specs/qrcode-logo-and-styles/tasks.md
T
2026-08-05 23:59:22 +08:00

5.4 KiB
Raw Blame History

二维码生成器 Logo 与样式增强 - The Implementation Plan

[x] Task 1: 自定义渲染引擎 - 模块矩阵获取与基础绘制

  • Priority: high
  • Depends On: None
  • Description:
    • 创建 qrRenderer.ts 工具模块,封装自定义二维码渲染逻辑
    • 使用 QRCode.create() 获取模块矩阵数据
    • 实现基础方形模块的 Canvas 绘制(对齐 qrcode 库默认效果,作为基准)
    • 实现定位点(finder pattern)的识别与独立绘制
    • 绘制函数接收配置对象,返回绘制到指定 canvas 的方法
  • Acceptance Criteria Addressed: AC-6
  • Test Requirements:
    • programmatic TR-1.1: 使用相同内容、容错率、版本生成二维码,自定义渲染与 qrcode.toCanvas 默认输出视觉一致(方形模式下)
    • human-judgement TR-1.2: 三个定位点(左上、右上、左下)位置正确,大小正确,与数据模块区分明显
  • Notes: 这是整个美化功能的基础,必须确保渲染正确性。模块矩阵中 true = dark module, false = light module。

[x] Task 2: 数据点形状样式(方形/圆形/圆角方形)

  • Priority: high
  • Depends On: Task 1
  • Description:
    • 在渲染引擎中新增 dotStyle 配置:square | circle | rounded
    • 圆形:每个模块绘制为圆,直径等于模块边长
    • 圆角方形:每个模块绘制为带圆角的矩形,圆角半径约为边长的 30%
    • 只对数据模块应用形状,定位点保持独立
  • Acceptance Criteria Addressed: AC-3, AC-6
  • Test Requirements:
    • human-judgement TR-2.1: 三种形状切换效果正确,圆形为正圆,圆角方形有适当圆角
    • human-judgement TR-2.2: 形状切换后二维码仍可被手机扫码识别
    • human-judgement TR-2.3: 三种形状在不同尺寸(300px, 500px, 1000px)下边缘清晰不模糊

[x] Task 3: 定位点样式(方形/圆形/圆角方形)

  • Priority: high
  • Depends On: Task 2
  • Description:
    • 在渲染引擎中新增 finderStyle 配置:square | circle | rounded
    • 定位点由外框和内点组成,需分别绘制以保持可识别性
    • 外框和内点形状保持一致(都是圆/圆角/方形)
    • 与数据点形状独立控制
  • Acceptance Criteria Addressed: AC-4, AC-6
  • Test Requirements:
    • human-judgement TR-3.1: 三种定位点样式均正确绘制在外框和内点上
    • human-judgement TR-3.2: 定位点样式与数据点样式可独立切换,互不影响
    • human-judgement TR-3.3: 所有样式组合下二维码可正常扫码识别

[x] Task 4: 颜色自定义(前景色 / 背景色)

  • Priority: high
  • Depends On: Task 1
  • Description:
    • 在渲染引擎中支持 fgColor 和 bgColor 配置
    • 在 UI 中添加颜色选择器(使用 Ant Design 的 ColorPicker 或 Input + 原生 color input)
    • 添加 6-8 个预设配色方案供快速选择
    • 修改现有 color.dark / color.light 逻辑,统一走新配置
  • Acceptance Criteria Addressed: AC-2, AC-6
  • Test Requirements:
    • human-judgement TR-4.1: 前景色和背景色可独立修改,实时预览更新
    • human-judgement TR-4.2: 预设配色点击后立即生效
    • human-judgement TR-4.3: 颜色在暗色模式下选择器显示正常

[x] Task 5: Logo 上传与嵌入

  • Priority: high
  • Depends On: Task 1
  • Description:
    • 添加 Logo 上传按钮,支持 PNG/JPG/GIF/WebP,使用 FileReader 读取
    • Logo 大小滑块:10% ~ 30%(相对于二维码尺寸),默认 20%
    • 绘制 Logo 时:先画白色圆角底托(比 Logo 大 6%),再画 Logo,居中放置
    • 移除 Logo 按钮
    • Logo 尺寸 > 20% 且容错率 < H (30%) 时显示警告提示
  • Acceptance Criteria Addressed: AC-1, AC-5, AC-6
  • Test Requirements:
    • human-judgement TR-5.1: 上传 Logo 后正确居中显示,有白底托
    • human-judgement TR-5.2: Logo 大小滑块调节实时生效,范围限制在 10%-30%
    • programmatic TR-5.3: 容错率 < H 且 Logo > 20% 时页面出现警告提示
    • human-judgement TR-5.4: 下载的 PNG 图片中包含 Logo

[x] Task 6: UI 布局整合与暗色模式适配

  • Priority: medium
  • Depends On: Task 2, Task 3, Task 4, Task 5
  • Description:
    • 在设置面板中新增"二维码美化"区域,分三组:颜色、形状、Logo
    • 使用 Ant Design 的 Collapse / Card 分组,保持界面整洁
    • 完整补充暗色模式 CSS 样式
    • 移动端响应式适配
  • Acceptance Criteria Addressed: AC-6, AC-7, AC-8
  • Test Requirements:
    • human-judgement TR-6.1: 设置区域布局整齐,分组清晰,交互流畅
    • human-judgement TR-6.2: 暗色模式下所有控件、标签、输入框正常显示
    • human-judgement TR-6.3: 移动端(<768px)单列布局,所有控件可用

[x] Task 7: 下载功能验证与联调

  • Priority: medium
  • Depends On: Task 6
  • Description:
    • 验证下载的 PNG 与预览完全一致(颜色、形状、Logo 全部包含)
    • 验证不同尺寸下下载图片的清晰度
    • 验证清除功能清除所有状态(包括 Logo、颜色等)
  • Acceptance Criteria Addressed: AC-1, AC-2, AC-3, AC-4
  • Test Requirements:
    • human-judgement TR-7.1: 下载 PNG 与预览视觉一致
    • human-judgement TR-7.2: 清除按钮重置所有美化参数为默认值
    • human-judgement TR-7.3: 1000px 尺寸下载的图片清晰,无锯齿