102 lines
5.4 KiB
Markdown
102 lines
5.4 KiB
Markdown
# 二维码生成器 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 尺寸下载的图片清晰，无锯齿
|