179 lines
4.2 KiB
Markdown
179 lines
4.2 KiB
Markdown
# 公告通知弹窗功能说明
|
||
|
||
## 功能概述
|
||
用户登录后，系统会自动弹出公告通知窗口，显示未读的系统公告和通知。
|
||
|
||
## 功能特性
|
||
|
||
### 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
|