状态卡片组件系统
基于GrassWeb框架的状态卡片组件，完全符合主站视觉风格，包含多种状态变体、响应式设计、无障碍支持和丰富的交互效果。
🎨 视觉一致性
完全继承主站的颜色方案、字体规范和设计令牌
📱 响应式设计
在所有设备尺寸上都能完美显示和交互
♿ 无障碍支持
支持高对比度、减少动画和屏幕阅读器
🌙 深色模式
自动适配系统深色模式偏好设置
⚡ 框架集成
完全集成GrassWeb框架，自动加载和配置
🔧 易于定制
基于设计令牌，可轻松调整样式和主题
基础状态变体
展示不同服务状态的视觉表现，每种状态都有独特的颜色和动画效果。
在线服务
service.example.com
在线
运行时间
99.9%
最后检查
刚刚
维护服务
maintenance.example.com
维护中
运行时间
98.5%
预计恢复
2小时后
性能下降
slow.example.com
性能下降
响应时间
2.5s
最后检查
1分钟前
离线服务
down.example.com
离线
故障时长
15分钟
最后检查
刚刚
警告状态
warning.example.com
警告
CPU使用率
85%
内存使用率
78%
信息状态
info.example.com
信息
版本
v2.1.0
更新时间
昨天
特殊效果演示
展示特殊的视觉效果，如重点突出、关键警报和加载状态。
重点服务
featured.example.com
在线
重要级别
高
监控频率
每分钟
关键警报
critical.example.com
离线
影响用户
1000+
故障级别
严重
加载中
loading.example.com
检查中
状态
检查中...
进度
60%
状态摘要组件
用于显示整体状态概览和历史统计信息的摘要卡片。
总体状态
大部分服务正常运行
最后更新: 刚刚
历史统计
30天平均运行时间
99.2%
本月事故次数
2次
平均响应时间
245ms
性能指标
API调用成功率
99.8%
错误率
0.2%
并发用户
1,234
框架集成说明
状态卡片组件已完全集成到GrassWeb框架中，通过配置文件即可自动加载和使用。
📦 自动加载
通过main.json配置文件自动加载样式和脚本
🔧 配置驱动
服务状态通过配置文件统一管理
🎨 主题一致
完全继承框架的设计令牌和主题系统
📱 响应式
自动适配不同设备和屏幕尺寸
♿ 无障碍
支持键盘导航和屏幕阅读器
⚡ 高性能
优化的CSS和JavaScript，快速加载