# 🌙 暗色模式适配 - 测试指南

## ✅ 完成的修改

### 修改文件

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. 触发通知

**测试通知**：
- 使用调试 API 发送测试通知：
  ```javascript
  // 方式1: 使用调试工具（推荐）
  window.__DEBUG__.notification.forceNotification({
    title: '测试通知',
    body: '验证暗色模式下的通知样式'
  });

  // 方式2: 等待后端真实推送
  // 确保已连接后端，等待真实事件推送
  ```

### 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)` 半透明紫

---

## 🔍 在浏览器控制台测试

### 手动触发各类型通知

> **注意**: Mock Socket 已移除，请使用调试工具或真实后端测试。

```javascript
// 使用调试工具测试不同类型的通知
// 确保已开启调试模式：REACT_APP_ENABLE_DEBUG=true

// 测试公告通知
window.__DEBUG__.notification.forceNotification({
  title: '测试公告通知',
  body: '这是暗色模式下的蓝色通知',
  tag: 'test_announcement',
  autoClose: 0,
});

// 测试股票上涨（红色）
window.__DEBUG__.notification.forceNotification({
  title: '🔴 测试股票上涨',
  body: '宁德时代 +5.2%',
  tag: 'test_stock_up',
});

// 测试股票下跌（绿色）
window.__DEBUG__.notification.forceNotification({
  title: '🟢 测试股票下跌',
  body: '比亚迪 -3.8%',
  tag: 'test_stock_down',
});

// 测试事件动向（橙色）
window.__DEBUG__.notification.forceNotification({
  title: '🟠 测试事件动向',
  body: '央行宣布降准',
  tag: 'test_event',
});

// 测试分析报告（紫色）
window.__DEBUG__.notification.forceNotification({
  title: '🟣 测试分析报告',
  body: '医药行业深度报告',
  tag: 'test_report',
});
```

---

## 🐛 常见问题

### 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
```

---

**测试完成后，请反馈效果！** 🎉