vf/vf_react

Fork 0

Files

zdl 643c3db03e feat: 通知调试能力

2025-11-10 20:05:53 +08:00

7.5 KiB

Raw Blame History

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

✅ 完成的修改

修改文件

src/constants/notificationTypes.js - 添加暗色模式配置
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：通过浏览器开发者工具

打开浏览器开发者工具（F12）
切换到 "渲染" 或 "Rendering" 标签
找到 "Emulate CSS media feature prefers-color-scheme"
选择 "prefers-color-scheme: dark"

方法 B：系统设置

将你的操作系统切换到暗色模式
刷新页面

方法 C：Chakra UI Color Mode Toggle

如果你的应用有主题切换按钮，直接点击切换即可。

3. 触发通知

测试通知：

使用调试 API 发送测试通知：

// 方式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 已移除，请使用调试工具或真实后端测试。

// 使用调试工具测试不同类型的通知
// 确保已开启调试模式：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: 检查配置是否正确应用：

清除浏览器缓存并刷新
确认 notificationTypes.js 包含 darkBg 等配置
在控制台查看元素的实际 background 值

Q: 不同类型看起来都一样？

A: 确认：

透明度配置是否生效（应该看到半透明效果）
不同类型的 RGB 值是否不同
浏览器是否支持 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

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

7.5 KiB Raw Blame History Unescape Escape