1.9 KiB
1.9 KiB
二维码生成器夜间模式适配 Spec
Why
二维码生成器页面的夜间模式不完整：hero 区亮紫色渐变在暗色下刺眼、部分自定义元素缺少暗色样式，影响夜间使用体验。
What Changes
- hero 区渐变改为暗色调
- 补充缺失的自定义元素暗色样式（生成按钮、下载按钮、弹窗 body、颜色选择器边框等）
- 确保暗色模式下整体视觉柔和舒适
Impact
- Affected specs: qrcode-logo-and-styles, qrcode-fixes-and-improvements
- Affected code:
src/pages/QRCodeGenerator/QRCodeGenerator.css
MODIFIED Requirements
Requirement: Hero 区暗色渐变
系统 SHALL 在暗色模式下使用深色调渐变替代亮紫色。
Scenario: 暗色模式 Hero
- WHEN 系统处于暗色模式
- THEN hero 区背景使用深紫/深蓝渐变（如 #1e1b4b → #312e81），而非亮紫色 #667eea → #764ba2
Requirement: 自定义按钮暗色基础样式
系统 SHALL 在暗色模式下为自定义按钮提供合适的基色。
Scenario: 生成按钮暗色
- WHEN 系统处于暗色模式
- THEN 生成按钮渐变稍暗（如 #4f46e5 → #6366f1），hover 效果保持
Scenario: 下载按钮暗色
- WHEN 系统处于暗色模式
- THEN 下载按钮渐变稍暗（如 #059669 → #10b981），hover 效果保持
Requirement: 弹窗 body 暗色背景
系统 SHALL 在暗色模式下为美化弹窗 body 提供暗色背景。
Scenario: 弹窗暗色 body
- WHEN 系统处于暗色模式且美化弹窗打开
- THEN 弹窗 body 区域背景为 #1e293b，与弹窗 header 一致
Requirement: 颜色选择器暗色边框
系统 SHALL 在暗色模式下为原生 color input 提供可见边框。
Scenario: 颜色选择器暗色
- WHEN 系统处于暗色模式
- THEN color input 的 swatch 边框为 #475569，与暗色背景区分