如何在Django Wagtail中实现符合指定规则的菜单告警功能

数据结构定义 #

首先定义单条告警的存储结构，所有告警可以存在后端配置表或者前端静态配置文件中：

// 单条告警数据结构
interface AlertItem {
  id: string; // 告警唯一标识
  content: string; // 告警描述，最多2句话
  effectiveAt: string; // 生效时间，格式可统一为ISO时间戳或YYYY-MM-DD HH:mm:ss
  expiredAt: string; // 解除时间，格式和生效时间保持一致
}

公共计算逻辑：每次页面加载/定时轮询时，过滤当前时间处于effectiveAt和expiredAt区间内的告警，得到活跃告警列表activeAlerts，统计长度得到活跃告警数activeAlertCount。

菜单入口交互实现 #

• 样式控制：
  • 当activeAlertCount > 0时，给告警图标、ALERT文字添加激活状态类，颜色设为深橙色，同时在文字后拼接(${activeAlertCount})的计数展示；hover状态下给文字添加下划线样式
  • 当activeAlertCount = 0时，移除激活状态类，图标和文字颜色设为主蓝色，不展示计数后缀
• 跳转逻辑：点击告警入口统一跳转至告警列表页，可通过全局状态、路由参数等方式将activeAlerts和activeAlertCount传递给列表页。

告警列表页逻辑 #

• 有活跃告警场景：遍历渲染activeAlerts内的所有告警条目，页面底部固定展示提示语：如果您遇到问题，请通过……联系我们
• 无活跃告警场景：不渲染列表，页面居中展示提示语：当前无活跃告警。如果您遇到问题，请通过……联系我们

可选优化项 #

• 新增定时轮询逻辑，每1-5分钟重新计算一次活跃告警数，无需用户刷新页面即可实时更新入口状态
• 告警条目支持配置关联跳转链接，点击单条告警可直接跳转至对应的故障说明、解决方案页面
• 新增已读标记功能，用户点击查看过的告警可调整透明度或标记已读状态，降低视觉干扰

内容的提问来源于stack exchange，提问作者soupi