Files
chunyu_prject_react/.trae/specs/qrcode-fixes-and-improvements/spec.md
T
2026-08-05 23:59:22 +08:00

2.6 KiB

二维码生成器修复与优化 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 图片样式与预览一致