chunyu_prject_react/.trae/specs/qrcode-dark-mode-complete/spec.md

二维码生成器夜间模式完整适配 Spec

Why

通过逐行审查 CSS 与 TSX 元素的对应关系，发现当前暗色模式存在多处遗漏：hero 区白色径向渐变叠加层在暗色下过亮、粒子效果未适配、hover 阴影过于刺眼、色块选中态边框不协调等问题。

What Changes

• 修复 .qr-generator-hero::before 白色径向渐变叠加层
• 适配 .qr-hero-icon 和 .qr-particle 暗色透明度
• 降低生成/下载按钮 hover 阴影亮度
• 修复 .qr-color-swatch.selected 暗色边框
• 修复 .qr-beautify-modal .ant-modal-body 暗色背景确保生效

Impact

• Affected specs: qrcode-dark-mode, qrcode-logo-and-styles, qrcode-fixes-and-improvements
• Affected code: src/pages/QRCodeGenerator/QRCodeGenerator.css

ADDED Requirements

Requirement: Hero 区暗色渐变叠加层

系统 SHALL 在暗色模式下降低 hero 区 ::before 伪元素的白色径向渐变亮度。

Scenario: 暗色 Hero 叠加层

• WHEN 系统处于暗色模式
• THEN .qr-generator-hero::before 中的白色径向渐变 rgba(255,255,255,0.1) 和 rgba(255,255,255,0.08) 应降低至 rgba(255,255,255,0.04) 和 rgba(255,255,255,0.03)

Requirement: Hero 图标暗色适配

系统 SHALL 在暗色模式下降低 hero 图标的透明白色背景亮度。

Scenario: 暗色 Hero 图标

• WHEN 系统处于暗色模式
• THEN .qr-hero-icon 背景 rgba(255,255,255,0.2) → rgba(255,255,255,0.08)，边框 rgba(255,255,255,0.3) → rgba(255,255,255,0.15)

Requirement: 粒子暗色适配

系统 SHALL 在暗色模式下降低粒子背景亮度。

Scenario: 暗色粒子

• WHEN 系统处于暗色模式
• THEN .qr-particle 背景 rgba(255,255,255,0.12) → rgba(255,255,255,0.05)

Requirement: 按钮 hover 阴影暗色柔和化

系统 SHALL 在暗色模式下降低自定义按钮 hover 阴影亮度。

Scenario: 生成按钮 hover 暗色

• WHEN 系统处于暗色模式且 hover 生成按钮
• THEN box-shadow rgba(102,126,234,0.35) → rgba(102,126,234,0.18)

Scenario: 下载按钮 hover 暗色

• WHEN 系统处于暗色模式且 hover 下载按钮
• THEN box-shadow rgba(16,185,129,0.35) → rgba(16,185,129,0.18)

Requirement: 色块选中态暗色适配

系统 SHALL 在暗色模式下调整色块选中态的边框和阴影颜色。

Scenario: 暗色选中色块

• WHEN 系统处于暗色模式且色块被选中
• THEN .qr-color-swatch.selected box-shadow rgba(102,126,234,0.25) → rgba(99,102,241,0.2)

Requirement: 弹窗 body 暗色背景

系统 SHALL 确保弹窗 body 区域在暗色模式下有正确的暗色背景。

Scenario: 弹窗 body 暗色

• WHEN 系统处于暗色模式且美化弹窗打开
• THEN .ant-modal-body 背景为 #1e293b，.ant-modal-content 确保 overflow: hidden 不影响背景渲染