# 公告通知弹窗功能说明

## 功能概述
用户登录后，系统会自动弹出公告通知窗口，显示未读的系统公告和通知。

## 功能特性

### 1. 自动弹出
- 登录后 1 秒自动加载公告列表
- 如果有未读公告，自动弹出弹窗显示
- 延迟加载避免影响页面初始渲染

### 2. 优先级显示
- **高优先级**（1）：红色背景 `#fff1f0`，红色文字 `#ff4d4f`
- **中优先级**（2）：橙色背景 `#fff7e6`，橙色文字 `#faad14`
- **低优先级**（3）：灰色背景 `#f0f2f5`，灰色文字 `#909399`

### 3. 排序规则
- 按优先级升序排列（高 -> 中 -> 低）
- 相同优先级按创建时间降序排列

### 4. 已读状态
- 未读公告：黄色背景高亮显示
- 已读公告：默认白色背景
- 点击公告自动标记为已读

### 5. 分类显示
- **通知**（1）：蓝色图标
- **紧急**（2）：红色警告图标
- **信息**（3）：绿色信息图标
- **成功**（4）：紫色成功图标

## 文件结构

```
src/
├── components/
│   ├── NoticePopup/
│   │   └── index.vue          # 登录后自动弹窗组件
│   └── NoticePanel/
│       └── index.vue          # 手动打开的公告面板
├── layout/
│   └── index.vue              # 主布局，引入 NoticePopup
└── views/
    └── system/
        └── notice/
            └── index.vue         # 公告管理页面
```

## API 接口

### 前端 API
```javascript
// 获取用户公告列表
getUserNotices()

// 标记为已读
markAsRead(noticeId)

// 全部标记为已读
markAllAsRead(noticeIds)

// 获取未读数量
getUnreadCount()
```

### 后端接口
```java
// GET /system/notice/public/notice
// 获取当前用户的公告列表（含已读状态）

// GET /system/notice/public/unread/count
// 获取未读公告数量

// POST /system/notice/public/read/{noticeId}
// 标记公告为已读

// POST /system/notice/public/read/all
// 批量标记为已读
```

## 数据库字段

### sys_notice 表新增字段
```sql
-- 优先级字段
priority VARCHAR(1) DEFAULT '3'

-- 发布状态字段
publish_status VARCHAR(1) DEFAULT '0'
```

## 使用说明

### 1. 数据库迁移
执行 SQL 脚本添加必要的字段：
```bash
# 添加优先级字段
ALTER TABLE sys_notice ADD COLUMN priority VARCHAR(1) DEFAULT '3';

# 添加发布状态字段
ALTER TABLE sys_notice ADD COLUMN publish_status VARCHAR(1) DEFAULT '0';
```

### 2. 后台管理
在 `系统管理 > 公告管理` 中：
1. 点击"新增"创建公告
2. 选择优先级：高/中/低
3. 选择公告类型：通知/紧急/信息/成功
4. 填写标题和内容
5. 点击"发布"按钮

### 3. 用户端显示
- 登录后自动弹出未读公告
- 点击顶部导航栏铃铛图标可手动打开
- 点击公告查看详情
- 支持全部标记为已读

## 样式说明

### 弹窗样式
- 宽度：800px
- 高度：最大 600px
- 标题栏：渐变紫色背景 `linear-gradient(135deg, #667eea 0%, #764ba2 100%)`
- 左右分栏布局

### 列表样式
- 列表宽度：380px
- 滚动区域：最大高度 500px
- 未读高亮：黄色背景 `#fffbe6`
- 激活项：蓝色左边框 `#1890ff`

### 详情样式
- 自适应宽度
- 标题字号：18px
- 内容字号：14px
- 行高：1.8

## 注意事项

1. **权限控制**
   - 只有已发布的公告才会显示
   - 只有正常状态的公告才会显示

2. **性能优化**
   - 使用延迟加载（1秒）
   - 使用虚拟滚动（el-scrollbar）
   - 按需加载详情

3. **用户体验**
   - 支持点击空白处关闭
   - 支持ESC键关闭
   - 未读状态醒目标识
   - 优先级颜色区分明显

## 故障排查

### 弹窗不显示
1. 检查后端接口 `/system/notice/public/notice` 是否正常返回
2. 检查是否有未读公告
3. 检查浏览器控制台是否有错误
4. 清除浏览器缓存重试

### 样式错乱
1. 检查 Element Plus 版本是否兼容
2. 检查样式是否被其他 CSS 覆盖
3. 使用浏览器开发者工具检查样式

### 数据不更新
1. 检查后端返回的数据格式
2. 检查 API 调用是否成功
3. 检查响应拦截器处理

## 版本信息
- 创建日期：2025-12-30
- 功能版本：v1.0
- 前端框架：Vue 3 + Element Plus
- 后端框架：Spring Boot + MyBatis Plus