1
分屏先定比例，再谈内容
目录栏固定 280–320 px，正文自适应；≤1024 px 立即合并为单列。侧栏 sticky 顶部偏移 76 px，避免与粘性导航重叠。
目标：首屏信息完整率 ≥ 85%
01
关键数据条：即时性是可测量的
38 ms
端到端平均时延
MQTT + 边缘预处理，P95 不超过 62 ms
99.95%
链路可用性
双通道热备，切换耗时 < 800 ms
2 s
数据刷新周期
分屏面板统一节拍，避免视觉抖动
1.4 万
并发设备接入
单集群实测，扩容步长 5,000 台/节点
02
实用指导清单：6 条把「即时」落到参数上
2
刷新节奏与动画解耦
数据面板统一 2 s 刷新；数字变化用 150 ms 缩放过渡，禁用整块重绘。超出 60 fps 时降级为纯色切换。
帧率：稳定 ≥ 55 fps3
告警分级配色，不只靠颜色
科技蓝承载常态，暖金强调动作；告警同时给出图标 + 文案 + 边框三重编码，色盲用户仍可区分。
对比度：文本 ≥ 4.5:14
响应式断点只保留三个
1024 / 640 / 380 px；超大屏 1600 px 起放宽容器至 1400–1680 px 并增加列数，避免中间窄柱两侧留白。
横向溢出：0 px5
图片统一固定宽高比
Hero 用 16:11、特写用 4:3、图集用 1:1，配合 object-fit:cover 与懒加载，杜绝布局跳动。
CLS：≤ 0.026
交互热区不小于 44 px
按钮、菜单项、卡片可点区统一 44 px 起；:focus-visible 用暖金描边，键盘可完整走查全部节点。
可点区：≥ 44×44 px
03
接入流程：4 步从设备到分屏可视
设备纳管
批量导入设备指纹，按协议分组（MQTT / CoAP / Modbus），自动生成设备目录树。
耗时：500 台 / 3 分钟
通道配置
开启双通道热备，主备切换阈值设为 800 ms；为关键点位单独绑定高优先级队列。
时延预算：< 40 ms
面板编排
以分屏布局组合目录与正文面板，指标卡按重要性排序，首屏只保留 4 个核心数字。
首屏加载：≤ 1.2 s
联调压测
按 1.5 倍峰值并发压测，观察 P95 时延与丢包率；异常时回滚配置快照。
丢包率：< 0.1%
04
图文混排特写：前端响应与现场节奏同频
边缘采集：把 200 ms 的等待压缩到 40 ms
在网关侧完成数据清洗与聚合，仅上传变化量。前端订阅增量通道后，分屏面板只重绘受影响卡片，避免整页闪烁。
- 采样高频点位 200 ms 一次，低频点位 5 s 一次
- 上传仅传差值，带宽占用下降约 68%
- 渲染卡片级更新，单帧耗时 ≤ 8 ms
运维视图：告警到处置，1 次点击完成
拓扑与列表共享同一份状态源，点击任一节点即在右侧正文区展开详情，无需跳转页面，保持分屏布局的连续性。
- 定位节点搜索响应 ≤ 120 ms
- 处置常用指令预置，平均 3 次点击内完成
- 留痕操作日志同步写入，回溯耗时 ≤ 1 s
05
节点图集：四种典型部署形态
