wangyizhe/his
3
3
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity
Files
02eab2d932a197e79569ce8bb879be24fe8004e3
his/公告通知弹窗功能说明.md

4.2 KiB
Raw Blame History

公告通知弹窗功能说明

功能概述

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

功能特性

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

// 获取用户公告列表
getUserNotices()

// 标记为已读
markAsRead(noticeId)

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

// 获取未读数量
getUnreadCount()

后端接口

// 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 表新增字段

-- 优先级字段
priority VARCHAR(1) DEFAULT '3'

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

使用说明

1. 数据库迁移

执行 SQL 脚本添加必要的字段：

# 添加优先级字段
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