feat(operating-room): 添加手术室类型和所属科室字段
- 新增手术室类型字段支持急诊、择期、日间、复合手术室四种类型 - 添加所属科室字段实现科室级别资源管理 - 前端列表页面新增类型和所属科室显示列 - 新增类型选择器和科室选择器组件 - 后端实体类和服务类添加对应字段处理逻辑 - 数据库添加room_type_enum字段和相关索引 - 创建手术室类型字典数据和字典项配置 - 生成手术室管理功能说明文档
This commit is contained in:
178
md/公告通知弹窗功能说明.md
Normal file
178
md/公告通知弹窗功能说明.md
Normal file
@@ -0,0 +1,178 @@
|
||||
# 公告通知弹窗功能说明
|
||||
|
||||
## 功能概述
|
||||
用户登录后，系统会自动弹出公告通知窗口，显示未读的系统公告和通知。
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 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
|
||||
Reference in New Issue
Block a user