实时监控仪表板

Name: Real-Time Monitoring Dashboard
Author: @dataviz_team

ReactWebSocket仪表盘DevOpsMonitoring更新于 2026-08-13

使用场景： 构建 DevOps 实时监控界面、系统健康检查、实时指标展示、工厂车间大屏或任何需要实时更新数据的场景。

安装

npx skills add real-time-monitoring-dashboard

克隆

git clone https://github.com/skillhub-community/real-time-monitoring-dashboard.git

仓库文档

描述

专为实时更新数据流设计的实时监控仪表盘框架。核心组件：状态指示灯徽章（绿/黄/红/紫），具有可配置阈值和关键状态的脉冲动画；流式折线/面积图，添加新数据点并平滑滚动时间窗口（最后 5 分钟/15 分钟/1 小时/24 小时切换）；告警通知面板，具有严重级别（信息/警告/严重）、声音告警选项和确认工作流；以及指标网格，显示当前值及增减箭头和迷你趋势线。

架构：WebSocket 优先设计，自动重连和指数退避；WebSocket 不可用时回退到可配置间隔的轮询模式。包含数据适配层——可连接 Prometheus、Datadog、自定义 REST/WebSocket 端点，或开发用的模拟数据生成器。告警规则引擎：定义条件（值 > 阈值、变化速率、通过移动平均 + 标准差带的异常检测）。所有图表使用 requestAnimationFrame 实现流畅的实时渲染。

AI Hub

跑 Skill 需要模型接口？

AI Hub 提供 OpenAI 兼容接口，给 Cursor / Claude Code / Agent 用。

打开 AI Hub

元数据

作者@dataviz_team

许可证MIT

版本1.0.0

依赖0