63 lines
2.9 KiB
Markdown
63 lines
2.9 KiB
Markdown
# 二维码生成器夜间模式完整适配 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` 不影响背景渲染 |