diff --git a/docs/NOTIFICATION_SYSTEM.md b/docs/NOTIFICATION_SYSTEM.md
index 0fc20c6a..224a7a4b 100644
--- a/docs/NOTIFICATION_SYSTEM.md
+++ b/docs/NOTIFICATION_SYSTEM.md
@@ -1,16 +1,24 @@
# 实时消息推送系统 - 完整技术文档
-> **版本**: v2.11.0
-> **更新日期**: 2025-01-10
-> **文档类型**: 快速入门 + 完整技术规格
+> **版本**: v2.12.0
+> **更新日期**: 2025-11-17
+> **文档类型**: 用户指南 + 完整技术规格
>
-> ⚠️ **重要更新**: Mock Socket 已移除(2025-01-10),文档中关于 `mockSocketService` 的内容仅供历史参考。
+> ⚠️ **重要更新**:
+> - 测试工具已移除(2025-11-17):NotificationTestTool、window.__TEST_NOTIFICATION__、notificationDebugger
+> - 保留生产可用调试工具:window.__DEBUG__、window.browserNotificationService
---
## 📑 目录
-### 第一部分:快速入门
+### 👤 第零部分:用户快速指南
+0. [连接状态查看](#-连接状态查看)
+1. [手动操作指南](#-手动操作指南)
+2. [常见问题解决](#-常见问题解决)
+3. [可用调试命令](#-可用调试命令)
+
+### 第一部分:快速入门(开发者)
1. [系统简介](#-系统概述)
2. [核心特性](#核心特性)
3. [5分钟快速开始](#-快速开始)
@@ -89,6 +97,222 @@
---
+## 👤 用户快速指南
+
+> **适用人群**: 普通用户、测试人员、客服人员
+> **阅读时间**: 5 分钟
+
+### 🔌 连接状态查看
+
+#### **方法 1: 页面顶部状态横幅**
+
+当系统出现连接问题时,页面顶部会显示状态横幅:
+
+| 状态 | 显示内容 | 颜色 | 说明 |
+|------|----------|------|------|
+| ✅ 已连接 | 无横幅 | - | 正常工作,无需操作 |
+| ⚠️ 断开连接 | "⚠️ 连接已断开" | 橙色 | 正在尝试重连 |
+| 🔄 重连中 | "🔄 正在重连... (第 X 次)" | 蓝色 | 自动重连进行中 |
+| ❌ 连接失败 | "❌ 连接失败,请检查网络" | 红色 | 需要手动干预 |
+| ✓ 已重连 | "✓ 已重新连接" | 绿色 | 重连成功,2秒后自动消失 |
+
+**操作**:
+- 横幅可手动关闭(点击 ✕ 按钮)
+- 关闭后会记住状态,重连成功后自动清除
+
+#### **方法 2: 浏览器控制台查看**
+
+1. 按 `F12` 打开开发者工具
+2. 切换到 `Console` 标签
+3. 输入以下命令:
+
+```javascript
+// 查看连接状态
+__DEBUG__.socket.getStatus()
+
+// 输出示例:
+{
+ connected: true,
+ socketId: "abc123...",
+ reconnectAttempts: 0
+}
+```
+
+---
+
+### 🔧 手动操作指南
+
+#### **1. 手动重连**
+
+当连接失败时,可以手动触发重连:
+
+**浏览器控制台** (`F12` → `Console`):
+```javascript
+// 手动重连
+__DEBUG__.socket.reconnect()
+```
+
+**刷新页面**(最简单):
+- 按 `Ctrl+R` (Windows) 或 `Cmd+R` (Mac)
+- 或点击浏览器刷新按钮
+
+#### **2. 查看连接日志**
+
+```javascript
+// 查看最近的 Socket 日志
+__DEBUG__.socket.getLogs()
+
+// 导出所有日志到文件
+__DEBUG__.exportAll()
+```
+
+#### **3. 检查浏览器通知权限**
+
+```javascript
+// 查看通知权限状态
+window.browserNotificationService.getPermissionStatus()
+
+// 返回值:
+// "granted" - 已授权
+// "denied" - 已拒绝
+// "default" - 未询问
+```
+
+**如何授予权限**:
+1. 点击浏览器地址栏左侧的🔒图标
+2. 找到"通知"设置
+3. 选择"允许"
+
+---
+
+### 🆘 常见问题解决
+
+#### **问题 1: 收不到通知**
+
+**可能原因**:
+- ❌ 浏览器通知权限未授予
+- ❌ Socket 连接断开
+- ❌ 浏览器标签页处于后台(网页通知需要标签页在前台)
+
+**解决步骤**:
+1. 检查连接状态(参见上面"连接状态查看")
+2. 检查通知权限:
+ ```javascript
+ window.browserNotificationService.getPermissionStatus()
+ ```
+3. 如果是 `"denied"`,需要在浏览器设置中允许通知
+4. 如果是 `"default"`,刷新页面会自动请求权限
+
+#### **问题 2: 连接一直断开**
+
+**排查步骤**:
+1. **检查网络连接**:打开其他网站,确认网络正常
+2. **查看重连次数**:
+ ```javascript
+ __DEBUG__.socket.getStatus()
+ ```
+3. **查看错误日志**:
+ ```javascript
+ __DEBUG__.socket.getLogs()
+ ```
+4. **手动重连**:
+ ```javascript
+ __DEBUG__.socket.reconnect()
+ ```
+5. **刷新页面**:`Ctrl+R` 或 `Cmd+R`
+
+#### **问题 3: 通知太多/太少**
+
+**无法控制通知数量**(由后端推送决定),但可以:
+- **清空所有通知**: 点击通知容器右上角"清空全部"按钮
+- **关闭单个通知**: 点击通知右上角 ✕ 按钮
+- **关闭音效**: 点击通知容器右上角🔊图标
+
+#### **问题 4: 页面卡顿**
+
+**可能原因**: 通知历史过多
+
+**解决方法**:
+1. 点击"清空全部"按钮清空历史通知
+2. 系统会自动限制最多显示 15 条通知
+3. 如仍卡顿,刷新页面
+
+---
+
+### 💻 可用调试命令
+
+> **使用方法**: 打开浏览器控制台 (`F12` → `Console`),输入以下命令
+
+#### **Socket 连接调试**
+
+```javascript
+// 1. 查看连接状态
+__DEBUG__.socket.getStatus()
+
+// 2. 手动重连
+__DEBUG__.socket.reconnect()
+
+// 3. 查看 Socket 日志
+__DEBUG__.socket.getLogs()
+
+// 4. 导出 Socket 日志
+__DEBUG__.socket.exportLogs()
+```
+
+#### **通知权限调试**
+
+```javascript
+// 1. 查看权限状态
+window.browserNotificationService.getPermissionStatus()
+// 返回: "granted" | "denied" | "default"
+
+// 2. 请求权限
+window.browserNotificationService.requestPermission()
+
+// 3. 检查是否支持通知
+window.browserNotificationService.isSupported()
+// 返回: true | false
+```
+
+#### **综合调试**
+
+```javascript
+// 1. 系统诊断(检查所有状态)
+__DEBUG__.diagnose()
+
+// 2. 查看所有统计信息
+__DEBUG__.printStats()
+
+// 3. 导出所有日志
+__DEBUG__.exportAll()
+
+// 4. 清空所有日志
+__DEBUG__.clearAll()
+
+// 5. 显示帮助信息
+__DEBUG__.help()
+```
+
+#### **开发环境专用(Mock 模式)**
+
+仅在开发环境(`npm start`)可用:
+
+```javascript
+// 模拟断线(测试重连机制)
+__mockSocket.simulateDisconnection()
+
+// 查看连接状态
+__mockSocket.isConnected()
+
+// 手动重连
+__mockSocket.reconnect()
+
+// 发送测试通知
+__mockSocket.sendTestNotification()
+```
+
+---
+
## 📋 系统概述
本系统是专为**金融资讯场景**设计的实时消息推送系统,支持 Mock 模式(开发)和真实 Socket.IO 模式(生产)。消息以右下角层叠弹窗的形式显示,**新消息在最上方**,符合主流桌面应用的交互习惯。
@@ -126,7 +350,6 @@ graph TB
A[App.js] --> B[AppProviders]
B --> C[NotificationProvider
NotificationContext]
C --> D[NotificationContainer
通知容器UI]
- C --> E[NotificationTestTool
开发测试工具]
end
subgraph "通知系统核心"
@@ -231,7 +454,6 @@ sequenceDiagram
|-------|------|------|---------|
| **NotificationContext** | React Context | 通知系统核心逻辑、状态管理 | `src/contexts/NotificationContext.js` |
| **NotificationContainer** | React Component | 通知UI容器、动画、交互 | `src/components/NotificationContainer/index.js` |
-| **NotificationTestTool** | React Component | 开发测试工具 | `src/components/NotificationTestTool/index.js` |
| **socketService** | Service Class | 真实WebSocket连接管理 | `src/services/socketService.js` |
| **mockSocketService** | Service Class | Mock WebSocket模拟 | `src/services/mockSocketService.js` |
| **browserNotificationService** | Service Class | 浏览器通知API封装 | `src/services/browserNotificationService.js` |
@@ -880,7 +1102,7 @@ __mockSocket.pausePush() // 暂停自动推送,专注测试单条
- [ ] 点击请求权限按钮弹出浏览器授权对话框
- [ ] 授权后状态变为"granted"
- [ ] 拒绝后状态变为"denied",显示设置指引
-- [ ] 权限状态在测试工具中正确显示
+- [ ] 权限状态正确显示
#### 7. 浏览器通知显示测试
- [ ] 权限授予后,切换到其他标签页,收到通知时显示系统通知
@@ -1258,22 +1480,38 @@ npm start
### 3. 测试通知
-打开浏览器,右上角会显示 **"金融资讯测试工具"**,包含:
+打开浏览器控制台 (`F12` → `Console`),使用以下命令测试:
-#### 通知类型测试
-- 公告通知、股票动向、事件动向、分析报告
-- 预测通知(不可跳转)
+#### **Mock 模式测试**(开发环境)
+```javascript
+// 发送测试通知
+__mockSocket.sendTestNotification()
-#### 组合测试
-- 预测→详情流程(5秒延迟)
+// 模拟断线重连
+__mockSocket.simulateDisconnection()
-#### 功能按钮
-- 清空全部、音效开关、队列状态
+// 查看连接状态
+__mockSocket.isConnected()
+```
+
+#### **通用测试命令**
+```javascript
+// 查看系统状态
+__DEBUG__.diagnose()
+
+// 查看连接状态
+__DEBUG__.socket.getStatus()
+
+// 查看通知权限
+window.browserNotificationService.getPermissionStatus()
+```
### 4. 自动推送
Mock 模式下,系统会自动每 60 秒推送 1-2 条随机金融资讯。
+查看更多测试命令,请参考本文档开头的 [用户快速指南](#-用户快速指南)。
+
---
## 💻 代码使用
@@ -1405,7 +1643,7 @@ socketio.emit('new_event', {
**检查项**:
1. 确认 `NotificationProvider` 已包裹应用
2. 检查浏览器控制台是否有错误
-3. 确认 socket 连接状态(查看测试工具)
+3. 确认 socket 连接状态(使用 `__DEBUG__.socket.getStatus()`)
4. 检查通知数据格式是否正确
### 问题 2: 股票动向颜色不对
@@ -1688,7 +1926,7 @@ ERROR: Browser permission not granted
1. 在 `src/constants/notificationTypes.js` 添加类型定义
2. 添加类型配置(图标、颜色、样式)
3. 在 `NotificationContainer` 中添加渲染逻辑
-4. 在测试工具中添加测试按钮
+4. 使用控制台命令测试(Mock 模式:`__mockSocket.sendTestNotification()`)
5. 更新文档
**示例**:
@@ -1882,10 +2120,8 @@ src/
├── contexts/
│ └── NotificationContext.js # 通知上下文管理
├── components/
-│ ├── NotificationContainer/
-│ │ └── index.js # 通知容器组件
-│ └── NotificationTestTool/
-│ └── index.js # 测试工具组件
+│ └── NotificationContainer/
+│ └── index.js # 通知容器组件
├── hooks/
│ └── useEventNotifications.js # 事件订阅 Hook
└── assets/
@@ -1962,11 +2198,11 @@ src/
## 📞 支持
如有问题,请查看:
+- **用户快速指南**: 本文档开头的[用户快速指南](#-用户快速指南)
- **项目文档**: `CLAUDE.md`
-- **测试工具**: 开发环境右上角"金融资讯测试工具"
+- **调试命令**: 浏览器控制台使用 `__DEBUG__.help()` 查看所有可用命令
- **控制台日志**: 所有操作都有详细日志
- **类型定义**: `src/constants/notificationTypes.js`
-- **测试用例**: `docs/test-cases/notification-tests.md`
---