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,26 @@
+# 二维码生成器夜间模式完整适配 - 验证清单
+
+## Hero 区暗色
+- [x] `.qr-generator-hero::before` 暗色叠加层亮度降低
+- [x] `.qr-hero-icon` 暗色背景和边框柔和
+- [x] `.qr-particle` 暗色背景柔和
+
+## 按钮暗色
+- [x] `.qr-generate-btn:hover` 暗色 box-shadow 不刺眼
+- [x] `.qr-download-btn:hover` 暗色 box-shadow 不刺眼
+- [x] `.qr-color-swatch.selected` 暗色 box-shadow 协调
+
+## 面板暗色
+- [x] `.qr-panel` 暗色背景和边框
+- [x] `.qr-panel-header` 暗色背景
+- [x] `.qr-panel-title` 暗色文字颜色
+
+## 输入控件暗色
+- [x] `.qr-input` 暗色背景和边框
+- [x] `.qr-preview-area` 暗色背景
+
+## 浏览器验证
+- [x] 暗色模式下整体视觉协调
+- [x] Hero 区无过亮元素
+- [x] 面板和控件颜色正确
+- [x] 页面背景色正确
@@ -0,0 +1,63 @@
+# 二维码生成器夜间模式完整适配 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` 不影响背景渲染
@@ -0,0 +1,36 @@
+# 二维码生成器夜间模式完整适配 - 任务列表
+
+## [x] Task 1: 修复 Hero 区暗色叠加层和图标
+- **Priority**: high
+- **Depends On**: None
+- **Description**:
+  - 添加 `.qr-generator-hero::before` 暗色模式覆盖，降低白色径向渐变亮度
+  - 添加 `.qr-hero-icon` 暗色模式覆盖，降低透明白色背景和边框亮度
+  - 添加 `.qr-particle` 暗色模式覆盖，降低粒子背景亮度
+- **Acceptance Criteria**: Hero 区在暗色模式下不再有过亮的白色元素
+- **Test Requirements**: `human-judgment` - 切换暗色模式后 Hero 区视觉柔和
+- **Status**: ✅ 已完成 - CSS已添加暗色模式样式
+
+## [x] Task 2: 修复按钮 hover 阴影和色块选中态
+- **Priority**: medium
+- **Depends On**: None
+- **Description**:
+  - 添加 `.qr-generate-btn:hover` 暗色 box-shadow 覆盖
+  - 添加 `.qr-download-btn:hover` 暗色 box-shadow 覆盖
+  - 添加 `.qr-color-swatch.selected` 暗色 box-shadow 覆盖
+- **Acceptance Criteria**: hover 效果在暗色模式下不刺眼
+- **Test Requirements**: `human-judgment` - 暗色模式下按钮 hover 和色块选中效果协调
+- **Status**: ✅ 已完成 - CSS已添加暗色模式样式
+
+## [x] Task 3: 浏览器验证暗色模式
+- **Priority**: high
+- **Depends On**: Task 1, Task 2
+- **Description**:
+  - 使用浏览器在暗色模式下逐项验证所有元素
+  - 验证 Hero 区、面板、按钮、弹窗、色块等
+- **Acceptance Criteria**: 暗色模式下整体视觉协调舒适
+- **Test Requirements**: `human-judgment` - 暗色模式完整走查
+- **Status**: ✅ 已完成 - 浏览器验证通过，所有暗色模式样式正确应用
+
+# Task Dependencies
+- Task 3 depends on Task 1, Task 2