# 消息通知功能使用指南

## 功能概览

顶部导航栏右侧的消息通知小铃铛 🔔 提供了完整的消息管理功能。

## 主要特性

### 1. 未读消息提醒
- **红色徽章**：显示未读消息数量
- **实时更新**：未读数量会随消息状态自动更新
- **醒目提示**：未读消息用蓝色圆点标识

### 2. 消息列表（点击铃铛）
点击小铃铛后会弹出消息列表，包含：

- **消息概览**
  - 消息标题
  - 消息摘要（最多显示2行）
  - 发送时间
  - 消息类型标签（通知/预警/成功/错误）

- **快捷操作**
  - 点击任意消息：查看完整详情
  - "全部已读"按钮：一键标记所有消息为已读
  - "查看全部消息"：跳转到消息中心

### 3. 消息详情（点击单条消息）
点击消息后会弹出详情对话框，显示：

- **消息标题**：带类型图标
- **消息类型**：彩色徽章标识
  - ℹ️ 通知（蓝色）
  - ⚠️ 预警（橙色）
  - ✅ 成功（绿色）
  - ❌ 错误（红色）
- **发送时间**：带彩色背景高亮
- **完整内容**：支持多行文本和换行格式

### 4. 自动标记已读
- 点击消息后自动标记为已读
- 已读消息文字颜色变浅
- 蓝色圆点变为灰色
- 未读数量自动减少

## 消息类型

系统支持 4 种消息类型：

| 类型 | 说明 | 示例 | 颜色 |
|------|------|------|------|
| `info` | 一般通知 | 系统维护通知 | 蓝色 |
| `success` | 成功提醒 | 任务分配成功 | 绿色 |
| `warning` | 预警信息 | 设备需要保养 | 橙色 |
| `error` | 错误提醒 | 操作失败 | 红色 |

## 使用场景

### 系统通知
- 系统维护公告
- 功能更新提醒
- 政策变更通知

### 任务提醒
- 新任务分配
- 任务完成通知
- 任务超时提醒

### 设备预警
- 设备故障预警
- 保养周期提醒
- 设备异常通知

### 操作结果
- 操作成功确认
- 操作失败提示
- 审核结果通知

## 交互流程

```
用户点击铃铛
  ↓
显示消息列表
  ↓
用户点击某条消息
  ↓
标记消息为已读 + 显示详情对话框
  ↓
用户查看完整内容
  ↓
关闭对话框 / 查看更多消息
```

## 技术实现

### 消息数据结构
```typescript
interface Message {
  id: string;              // 消息ID
  title: string;           // 消息标题
  content: string;         // 消息摘要
  fullContent?: string;    // 完整内容
  time: string;            // 发送时间
  read: boolean;          // 已读状态
  type?: 'info' | 'warning' | 'success' | 'error';  // 消息类型
}
```

### 状态管理
- 使用 `useState` 管理消息列表
- 实时计算未读数量
- 点击后更新消息状态

### UI组件
- **Popover**：消息列表弹出层
- **Dialog**：消息详情对话框
- **ScrollArea**：可滚动区域
- **Badge**：徽章和标签

## 最佳实践

### 1. 及时查看
- 定期查看未读消息
- 注意红色徽章提示
- 重要消息及时处理

### 2. 消息管理
- 阅读后消息自动标记
- 使用"全部已读"快速清理
- 到消息中心查看历史消息

### 3. 消息响应
- 任务类消息需及时响应
- 预警消息需关注处理
- 错误消息需排查原因

## 扩展功能

### 当前已实现
✅ 消息列表展示
✅ 未读消息统计
✅ 消息详情查看
✅ 自动标记已读
✅ 消息类型分类
✅ 一键全部已读

### 未来可扩展
- 🔜 消息分类筛选
- 🔜 消息搜索功能
- 🔜 消息删除功能
- 🔜 消息置顶功能
- 🔜 声音提醒开关
- 🔜 桌面通知推送

## 注意事项

1. **消息状态**
   - 消息状态仅在当前会话保存
   - 刷新页面后恢复默认状态
   - 生产环境需对接后端API

2. **性能优化**
   - 消息列表使用虚拟滚动
   - 大量消息时建议分页加载
   - 定期清理已读消息

3. **用户体验**
   - 消息摘要限制2行显示
   - 完整内容支持长文本
   - 自动换行保持可读性

## 相关文件

- `/components/Navigation.tsx` - 导航栏和消息通知
- `/components/config/MessageLog.tsx` - 消息日志页面
- `/components/config/MessageTemplate.tsx` - 消息模板管理

## 联系支持

如有问题或建议，请联系系统管理员。
