vf_react/docs/DARK_MODE_TEST.md

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

✅ 完成的修改

修改文件

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. 启动应用

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 条通知
• 或在控制台执行：

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

---

🔍 在浏览器控制台测试

手动触发各类型通知

// 引入服务
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 个参数：

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）

// 增加对比度（背景更明显）
darkBg: 'rgba(59, 130, 246, 0.25)',  // 15% → 25%

// 减少对比度（更柔和）
darkBg: 'rgba(59, 130, 246, 0.10)',  // 15% → 10%

调整文字颜色（NotificationContainer/index.js）

// 更亮的文字
const textColor = useColorModeValue('gray.800', 'gray.50');  // gray.100 → gray.50

// 更柔和的文字
const textColor = useColorModeValue('gray.800', 'gray.200');  // gray.100 → gray.200

---

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