308 lines
7.9 KiB
Markdown
308 lines
7.9 KiB
Markdown
# 🌙 暗色模式适配 - 测试指南
|
||
|
||
## ✅ 完成的修改
|
||
|
||
### 修改文件
|
||
|
||
1. **`src/constants/notificationTypes.js`** - 添加暗色模式配置
|
||
2. **`src/components/NotificationContainer/index.js`** - 更新颜色逻辑
|
||
|
||
### 新增配置
|
||
|
||
为每种通知类型添加了暗色模式专属配置：
|
||
|
||
| 配置项 | 亮色值 | 暗色值 | 说明 |
|
||
|-------|-------|-------|------|
|
||
| `bg` | `{color}.50` | `rgba(..., 0.15)` | 背景色：15% 透明度 |
|
||
| `borderColor` | `{color}.400` | `{color}.400` | 边框色：保持一致 |
|
||
| `iconColor` | `{color}.500` | `{color}.300` | 图标色：降低饱和度 |
|
||
| `hoverBg` | `{color}.100` | `rgba(..., 0.25)` | Hover背景：25% 透明度 |
|
||
|
||
---
|
||
|
||
## 🧪 测试步骤
|
||
|
||
### 1. 启动应用
|
||
|
||
```bash
|
||
npm start
|
||
```
|
||
|
||
### 2. 切换到暗色模式
|
||
|
||
#### 方法 A：通过浏览器开发者工具
|
||
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 "渲染" 或 "Rendering" 标签
|
||
3. 找到 "Emulate CSS media feature prefers-color-scheme"
|
||
4. 选择 "prefers-color-scheme: dark"
|
||
|
||
#### 方法 B：系统设置
|
||
|
||
1. 将你的操作系统切换到暗色模式
|
||
2. 刷新页面
|
||
|
||
#### 方法 C：Chakra UI Color Mode Toggle
|
||
|
||
如果你的应用有主题切换按钮，直接点击切换即可。
|
||
|
||
### 3. 触发通知
|
||
|
||
**Mock 模式**（默认）：
|
||
- 等待 60 秒，会自动推送 1-2 条通知
|
||
- 或在控制台执行：
|
||
```javascript
|
||
import { mockSocketService } from './services/mockSocketService.js';
|
||
mockSocketService.sendTestNotification();
|
||
```
|
||
|
||
**Real 模式**：
|
||
- 创建测试事件（运行后端测试脚本）
|
||
|
||
### 4. 验证效果
|
||
|
||
检查以下项目：
|
||
|
||
#### ✅ 背景色
|
||
- [ ] **半透明效果**：背景应该是半透明的，能看到底层背景
|
||
- [ ] **类型区分**：蓝、橙、紫、红、绿应该清晰可辨
|
||
- [ ] **不刺眼**：不应该有过深的背景色
|
||
|
||
#### ✅ 文字颜色
|
||
- [ ] **主标题**：`gray.100`（浅灰，不是纯白）
|
||
- [ ] **副文本**：`gray.300`（更淡的灰）
|
||
- [ ] **元信息**：`gray.500`（中等灰）
|
||
|
||
#### ✅ 图标颜色
|
||
- [ ] 图标应该是 `.300` 色阶（柔和但清晰）
|
||
- [ ] 不同类型有不同颜色
|
||
|
||
#### ✅ 边框
|
||
- [ ] 边框清晰可见（`.400` 色阶）
|
||
- [ ] 保持类型区分
|
||
|
||
#### ✅ Hover 效果
|
||
- [ ] 鼠标悬停时背景加深（25% 透明度）
|
||
- [ ] 有平滑过渡动画
|
||
|
||
---
|
||
|
||
## 🎨 视觉对比
|
||
|
||
### 亮色模式
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 🔵 蓝色浅背景 (blue.50) │
|
||
│ 深色文字 (gray.800) │
|
||
│ 明亮图标 (blue.500) │
|
||
│ 边框清晰 (blue.400) │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
### 暗色模式（修改后）
|
||
```
|
||
┌─────────────────────────────────┐
|
||
│ 🔵 半透明蓝背景 (15% opacity) │
|
||
│ 浅灰文字 (gray.100) │
|
||
│ 柔和图标 (blue.300) │
|
||
│ 边框可见 (blue.400) │
|
||
└─────────────────────────────────┘
|
||
```
|
||
|
||
---
|
||
|
||
## 📋 各类型通知配色
|
||
|
||
### 公告通知（蓝色）
|
||
- **亮色**：`blue.50` 背景
|
||
- **暗色**：`rgba(59, 130, 246, 0.15)` 半透明蓝
|
||
|
||
### 股票涨（红色）
|
||
- **亮色**：`red.50` 背景
|
||
- **暗色**：`rgba(239, 68, 68, 0.15)` 半透明红
|
||
|
||
### 股票跌（绿色）
|
||
- **亮色**：`green.50` 背景
|
||
- **暗色**：`rgba(34, 197, 94, 0.15)` 半透明绿
|
||
|
||
### 事件动向（橙色）
|
||
- **亮色**：`orange.50` 背景
|
||
- **暗色**：`rgba(249, 115, 22, 0.15)` 半透明橙
|
||
|
||
### 分析报告（紫色）
|
||
- **亮色**：`purple.50` 背景
|
||
- **暗色**：`rgba(168, 85, 247, 0.15)` 半透明紫
|
||
|
||
---
|
||
|
||
## 🔍 在浏览器控制台测试
|
||
|
||
### 手动触发各类型通知
|
||
|
||
```javascript
|
||
// 引入服务
|
||
import { mockSocketService } from './services/mockSocketService.js';
|
||
import { NOTIFICATION_TYPES, PRIORITY_LEVELS } from './constants/notificationTypes.js';
|
||
|
||
// 测试公告通知（蓝色）
|
||
mockSocketService.sendTestNotification({
|
||
type: NOTIFICATION_TYPES.ANNOUNCEMENT,
|
||
priority: PRIORITY_LEVELS.IMPORTANT,
|
||
title: '测试公告通知',
|
||
content: '这是暗色模式下的蓝色通知',
|
||
timestamp: Date.now(),
|
||
autoClose: 0,
|
||
});
|
||
|
||
// 测试股票上涨（红色）
|
||
mockSocketService.sendTestNotification({
|
||
type: NOTIFICATION_TYPES.STOCK_ALERT,
|
||
priority: PRIORITY_LEVELS.URGENT,
|
||
title: '测试股票上涨',
|
||
content: '宁德时代 +5.2%',
|
||
extra: { priceChange: '+5.2%' },
|
||
timestamp: Date.now(),
|
||
autoClose: 0,
|
||
});
|
||
|
||
// 测试股票下跌（绿色）
|
||
mockSocketService.sendTestNotification({
|
||
type: NOTIFICATION_TYPES.STOCK_ALERT,
|
||
priority: PRIORITY_LEVELS.IMPORTANT,
|
||
title: '测试股票下跌',
|
||
content: '比亚迪 -3.8%',
|
||
extra: { priceChange: '-3.8%' },
|
||
timestamp: Date.now(),
|
||
autoClose: 0,
|
||
});
|
||
|
||
// 测试事件动向（橙色）
|
||
mockSocketService.sendTestNotification({
|
||
type: NOTIFICATION_TYPES.EVENT_ALERT,
|
||
priority: PRIORITY_LEVELS.IMPORTANT,
|
||
title: '测试事件动向',
|
||
content: '央行宣布降准',
|
||
timestamp: Date.now(),
|
||
autoClose: 0,
|
||
});
|
||
|
||
// 测试分析报告（紫色）
|
||
mockSocketService.sendTestNotification({
|
||
type: NOTIFICATION_TYPES.ANALYSIS_REPORT,
|
||
priority: PRIORITY_LEVELS.NORMAL,
|
||
title: '测试分析报告',
|
||
content: '医药行业深度报告',
|
||
timestamp: Date.now(),
|
||
autoClose: 0,
|
||
});
|
||
```
|
||
|
||
---
|
||
|
||
## 🐛 常见问题
|
||
|
||
### Q: 暗色模式下还是很深？
|
||
|
||
**A:** 检查配置是否正确应用：
|
||
1. 清除浏览器缓存并刷新
|
||
2. 确认 `notificationTypes.js` 包含 `darkBg` 等配置
|
||
3. 在控制台查看元素的实际 `background` 值
|
||
|
||
### Q: 不同类型看起来都一样？
|
||
|
||
**A:** 确认：
|
||
1. 透明度配置是否生效（应该看到半透明效果）
|
||
2. 不同类型的 RGB 值是否不同
|
||
3. 浏览器是否支持 `rgba()` 颜色
|
||
|
||
### Q: 文字看不清？
|
||
|
||
**A:** 调整文字颜色：
|
||
- 主标题：`gray.100`（可调整为 `gray.50` 或 `white`）
|
||
- 如果背景太淡，可以增加透明度（15% → 20%）
|
||
|
||
### Q: 如何微调透明度？
|
||
|
||
**A:** 在 `notificationTypes.js` 中修改 `rgba()` 的第 4 个参数：
|
||
```javascript
|
||
darkBg: 'rgba(59, 130, 246, 0.20)', // 从 0.15 改为 0.20
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 预期效果截图对比
|
||
|
||
### 亮色模式下的通知
|
||
- 背景明亮（.50 色阶）
|
||
- 文字深色（gray.800）
|
||
- 图标鲜艳（.500 色阶）
|
||
|
||
### 暗色模式下的通知
|
||
- 背景半透明（15% 透明度）
|
||
- 文字浅色（gray.100）
|
||
- 图标柔和（.300 色阶）
|
||
- **保持类型区分度**
|
||
|
||
---
|
||
|
||
## 📊 技术参数
|
||
|
||
### 透明度参数
|
||
|
||
| 状态 | 透明度 | 说明 |
|
||
|-----|-------|------|
|
||
| 默认 | 15% | 背景色 |
|
||
| Hover | 25% | 鼠标悬停 |
|
||
|
||
### 色阶选择
|
||
|
||
| 元素 | 亮色 | 暗色 | 原因 |
|
||
|-----|------|------|------|
|
||
| 背景 | .50 | rgba 15% | 保持通透感 |
|
||
| 边框 | .400 | .400 | 确保可见 |
|
||
| 图标 | .500 | .300 | 降低饱和度 |
|
||
| 文字 | .800 | .100 | 保持对比度 |
|
||
|
||
---
|
||
|
||
## ✅ 测试检查清单
|
||
|
||
- [ ] 亮色模式下通知正常显示
|
||
- [ ] 暗色模式下通知半透明效果
|
||
- [ ] 5 种类型（蓝、红、绿、橙、紫）区分清晰
|
||
- [ ] 文字在暗色背景上可读性良好
|
||
- [ ] 图标颜色柔和但醒目
|
||
- [ ] Hover 效果明显
|
||
- [ ] 边框清晰可见
|
||
- [ ] 亮色/暗色切换平滑
|
||
|
||
---
|
||
|
||
## 🚀 如果需要调整
|
||
|
||
如果效果不满意，可以调整以下参数：
|
||
|
||
### 调整透明度（`notificationTypes.js`）
|
||
|
||
```javascript
|
||
// 增加对比度（背景更明显）
|
||
darkBg: 'rgba(59, 130, 246, 0.25)', // 15% → 25%
|
||
|
||
// 减少对比度（更柔和）
|
||
darkBg: 'rgba(59, 130, 246, 0.10)', // 15% → 10%
|
||
```
|
||
|
||
### 调整文字颜色（`NotificationContainer/index.js`）
|
||
|
||
```javascript
|
||
// 更亮的文字
|
||
const textColor = useColorModeValue('gray.800', 'gray.50'); // gray.100 → gray.50
|
||
|
||
// 更柔和的文字
|
||
const textColor = useColorModeValue('gray.800', 'gray.200'); // gray.100 → gray.200
|
||
```
|
||
|
||
---
|
||
|
||
**测试完成后，请反馈效果！** 🎉
|