sync from local backup

.trae/specs/qrcode-logo-and-styles/tasks.md

@@ -0,0 +1,101 @@
+# 二维码生成器 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 尺寸下载的图片清晰，无锯齿