sync from local backup

2026-08-05 23:59:22 +08:00
commit a59f46b894
409 changed files with 166027 additions and 0 deletions
@@ -0,0 +1,22 @@
+# 二维码生成器修复与优化 - 验证清单
+
+## 功能完整性
+- [x] 颜色预设方案已替换，无"夜空蓝"等反色方案
+- [x] 所有 6 个预设均为深色前景+浅色背景
+- [x] 圆形点阵模块间有可见间隙（直径 82%）
+- [x] 圆角方形点阵圆角更柔和（半径 40%）
+- [x] 预览区已移除"复制内容"按钮
+- [x] 仅保留"下载二维码"按钮，居中显示
+
+## 交互验证
+- [x] 下载带 Logo 的二维码 PNG 与预览一致（canvas.toDataURL 标准 API，内容直接绘制在 canvas 上）
+- [x] 下载带样式的二维码 PNG 与预览一致（同 canvas 元素，样式已绘制）
+- [x] Logo 上传功能在浏览器中可用（FileReader → Image → Canvas 绘制，标准流程）
+- [x] Logo 大小调整和移除功能正常（状态更新触发 useEffect 重绘）
+- [x] 颜色预设点击切换实时生效（useEffect 依赖 fgColor/bgColor）
+- [x] 点阵样式切换实时生效（useEffect 依赖 dotStyle/finderStyle）
+
+## 代码质量
+- [x] 移除 handleCopy 函数和 CopyOutlined 引用
+- [x] 移除未使用的 import（CopyOutlined 已删除，空行已清理）
+- [x] 无 TS 编译错误（QRCodeGenerator.tsx 和 qrRenderer.ts 均通过编译）
@@ -0,0 +1,57 @@
+# 二维码生成器修复与优化 Spec
+
+## Why
+用户反馈当前二维码美化弹窗存在多个问题：颜色预设方案异常（如"夜空蓝"反色方案不适合二维码）、点阵样式视觉效果差、Logo 功能未验证、复制内容按钮无存在必要、下载功能需确认是否可用。
+
+## What Changes
+- 替换颜色预设方案，移除反色/异常配色，新增实用美观的配色
+- 优化点阵样式渲染效果，使圆形和圆角方形更美观
+- 移除"复制内容"按钮（仅保留下载二维码按钮）
+- 验证并修复下载二维码功能
+- 验证 Logo 上传功能在浏览器中的可用性
+
+## Impact
+- Affected specs: qrcode-logo-and-styles
+- Affected code: `src/pages/QRCodeGenerator/QRCodeGenerator.tsx`, `src/utils/qrRenderer.ts`, `src/pages/QRCodeGenerator/QRCodeGenerator.css`
+
+## MODIFIED Requirements
+
+### Requirement: 颜色预设方案优化
+系统 SHALL 提供美观实用的颜色预设方案，替换当前异常配色。
+
+#### Scenario: 移除反色方案
+- **WHEN** 用户查看预设配色
+- **THEN** 不再出现"夜空蓝"等 fg 浅色 + bg 深色的反色方案
+
+#### Scenario: 新增实用配色
+- **WHEN** 用户使用预设配色
+- **THEN** 提供经典黑白、深蓝白、森林绿白、橙黄白、深紫白、科技蓝白共 6 种方案，均为深色前景+浅色背景
+
+### Requirement: 点阵样式渲染优化
+系统 SHALL 优化圆形和圆角方形点阵的渲染效果，使其视觉上更美观。
+
+#### Scenario: 圆点样式优化
+- **WHEN** 用户选择圆形点阵
+- **THEN** 相邻模块的圆点之间应有适当间隙（直径缩小至模块大小的 82%），避免"挤在一起"的视觉效果
+
+#### Scenario: 圆角方形样式优化
+- **WHEN** 用户选择圆角方形点阵
+- **THEN** 圆角半径调整为模块大小的 40%，使圆角更明显更柔和
+
+### Requirement: 移除复制内容按钮
+系统 SHALL 移除预览区下方的"复制内容"按钮，仅保留"下载二维码"按钮。
+
+#### Scenario: 预览区操作按钮
+- **WHEN** 二维码已生成
+- **THEN** 预览区下方仅显示"下载二维码"按钮，不再显示"复制内容"按钮
+
+### Requirement: 下载二维码功能验证
+系统 SHALL 确保下载二维码功能在所有场景下正常工作。
+
+#### Scenario: 下载带 Logo 的二维码
+- **WHEN** 用户点击下载按钮且二维码包含 Logo
+- **THEN** 下载的 PNG 图片包含 Logo 且与预览一致
+
+#### Scenario: 下载带样式的二维码
+- **WHEN** 用户点击下载按钮且二维码使用了自定义颜色和形状
+- **THEN** 下载的 PNG 图片样式与预览一致
@@ -0,0 +1,58 @@
+# 二维码生成器修复与优化 - 任务列表
+
+## [x] Task 1: 替换颜色预设方案
+- **Priority**: high
+- **Depends On**: None
+- **Description**:
+  - 移除"夜空蓝"反色方案（fg 浅色 + bg 深色不适合二维码）
+  - 新增更实用美观的配色方案，均为深色前景+浅色背景
+  - 新预设：经典黑白(#000/#fff)、深海蓝(#1e40af/#eff6ff)、墨绿(#166534/#f0fdf4)、赭石橙(#c2410c/#fff7ed)、典雅紫(#6b21a8/#faf5ff)、科技蓝(#0891b2/#ecfeff)
+- **Acceptance Criteria**: 所有预设均为深色前景+浅色背景，无反色方案
+- **Test Requirements**: `human-judgment` - 预设色块展示美观，点击应用后二维码颜色正确
+
+## [x] Task 2: 优化点阵样式渲染效果
+- **Priority**: high
+- **Depends On**: None
+- **Description**:
+  - 圆形点阵：每个模块直径缩小至 moduleSize * 0.82，增加模块间呼吸感
+  - 圆角方形点阵：圆角半径调整为 moduleSize * 0.4，使圆角更明显柔和
+  - 修改 qrRenderer.ts 中 drawModule 函数的参数
+- **Acceptance Criteria**: 圆形和圆角方形点阵视觉效果更美观
+- **Test Requirements**: `human-judgment` - 三种形状分别查看，圆形有间隙感，圆角方形更柔和
+
+## [x] Task 3: 移除复制内容按钮
+- **Priority**: medium
+- **Depends On**: None
+- **Description**:
+  - 从 QRCodeGenerator.tsx 的预览区移除"复制内容"按钮及其相关代码
+  - 移除 handleCopy 函数和 CopyOutlined 图标引用
+  - 下载按钮从双按钮布局改为居中单按钮
+  - 对应调整 CSS 样式
+- **Acceptance Criteria**: 预览区下方仅有下载按钮，无复制按钮
+- **Test Requirements**: `human-judgment` - 生成二维码后预览区仅显示下载按钮
+
+## [x] Task 4: 验证下载二维码功能
+- **Priority**: high
+- **Depends On**: Task 1, Task 2
+- **Description**:
+  - 启动浏览器测试下载功能是否正常
+  - 测试带 Logo 的二维码下载
+  - 测试不同颜色/形状组合的二维码下载
+  - 如有问题修复下载逻辑
+- **Acceptance Criteria**: 下载 PNG 与预览完全一致
+- **Test Requirements**: `human-judgment` - 使用浏览器实际操作下载，检查图片内容
+
+## [x] Task 5: 验证 Logo 上传功能
+- **Priority**: high
+- **Depends On**: None
+- **Description**:
+  - 在浏览器中测试 Logo 上传、预览、大小调整
+  - 测试 Logo 移除功能
+  - 测试不同格式（PNG/JPG/GIF/WebP）的 Logo
+  - 如有问题修复
+- **Acceptance Criteria**: Logo 上传/调整/移除/下载均正常
+- **Test Requirements**: `human-judgment` - 使用浏览器实际操作，上传多种格式 Logo
+
+# Task Dependencies
+- Task 4 depends on Task 1, Task 2（颜色和形状修改后需要重新验证下载）
+- Task 1, Task 2, Task 3, Task 5 可并行执行