实时监控Real-Time Monitoring
数据流持续更新：状态灯、脉冲告警、流式曲线与最新值并列。深色底降低眩光，颜色语义必须严格区分正常/警告/严重。
典型场景运维大屏 · IoT · 交易风控
编号31
年代2020s Modern
复杂度Medium
默认模式自动
效果示例
Nova
产品方案定价
开始使用
Design System
同一套组件
不同的性格
色彩、字体、圆角与材质，决定了界面的气质。
主要操作次要操作
标签 A标签 B+12
月度增长
+24.8%
转化率4.2%
客单价¥328
Aa Bb Cc 0123
按钮 / ButtonPrimaryGhost
输入 / Inputname@example.com
标签 / Chip已选中默认+8
进度 / Progress
开关 / Switch
数值 / Numeric1,284.50
同一副骨架，演示色彩、字体、圆角、描边、阴影与材质。明暗切换展示该风格在两种模式下的令牌表现。
风格描述
数据流持续更新：状态灯、脉冲告警、流式曲线与最新值并列。深色底降低眩光，颜色语义必须严格区分正常/警告/严重。
关键词
Live data updatesstatus indicatorsalert notificationsstreaming data visualizationactive monitoringstreaming charts
别名
Real-TimeReal-Time Monitor
效果与动效
Real-time chart animations, alert pulse/glow, status indicator blink animation, smooth data stream updates, loading effect
设计系统变量
--pulse-animationpulse 2s infinite--alert-z-index1000--live-indicator#22C55E--critical-color#DC2626--update-interval5s--toast-duration5s配色方案
色值取自风格数据，不足时补充主题令牌主色 / Primary
Alert colors: critical (red #FF0000), warning (orange #FFA500), normal (green #22C55E), updating (blue animation)
辅色 / Secondary
Status indicator colors, chart line colors varying by metric, streaming data highlight colors
强调色在页面底色上的对比度约 8.2:1，可用于正文与图标。
适用场景
适合 / Best For
- System monitoring dashboards
- DevOps dashboards
- real-time analytics
- stock market dashboards
- live event tracking
避开 / Do Not Use For
- Historical analysis
- long-term trend reports
- archived data dashboards
框架兼容
rechartschartjsd3
能力矩阵
浅色模式支持
深色模式支持
移动适配需额外处理
转化导向不适用Not applicable
渲染成本低无额外开销
无障碍风险低contrast-text-4.5 / keyboard / visible-focus / reduced-motion
实现要点
落地清单
- Live updates working,
- Alert sounds optional,
- Connection status shown,
- Auto-refresh indicated,
- Critical alerts prominent,
- Offline fallback
CSS / 技术关键词
animation: pulse for live, WebSocket for streaming, position: fixed for alerts, status-dot with animation, chart real-time updates, notification toast, connection indicator
AI 提示词
Design a real-time monitoring dashboard. Use: live status indicators (pulsing), streaming charts, alert notifications, connection status, auto-refresh indicators, critical alerts prominent, system health overview.