fix(l2): fill alarm and offline nodes red, reserve red frame for >5ms latency

Alarm and offline are now whole-node red states instead of red borders. Latency 3-5ms keeps an orange frame and >5ms keeps a red frame. Update legend outlines and docs; bump app.js cache version.

docs/使用说明.md

@@ -241,7 +241,7 @@ zabbix-deploy/
   - **PoE 交换机**：采集器通过华为 `hwPoePortJudgeIsSupport` 或 RFC3621 `pethPsePortAdminEnable` 判断 PoE 能力，
     交换机名称最前面显示 `⚡️`；当前网络若没有 PoE 设备则不显示。
 - **节点标签**：`车间 · 楼层机柜U · 角色 · IP`；双击节点跳转该主机的问题页。
-- **告警面板只显示拓扑内交换机**，不再混入服务器/测试机等“拓扑外”主机；告警交换机边框统一红色。
+- **告警/离线/延迟着色**：告警交换机整个节点填充红色，离线交换机同样整节点红色；延迟 **3–5ms 为橙色边框**，**大于 5ms 才为红色边框**。告警不会再只画一个红框。告警面板只显示拓扑内交换机，不混入服务器/测试机等“拓扑外”主机。
 - **显示终端 / 只看离线**：勾选「显示终端」在交换机下方展开终端点（绿=在线、灰=离线）；
   「只看离线」仅显示离线终端。右侧「离线终端」面板点击可联动定位。
 - **时间轴**：右上「快照时间」下拉可选 `实时` 或历史某分钟快照（保存 **7 天**，5 分钟一个点）。

web-modules/WecomCenter/assets/l2topology/app.js

@@ -1113,12 +1113,12 @@
         'width': 0.7, 'line-color': d ? '#3b4a5e' : '#c5cfdb', 'opacity': 0.55,
         'curve-style': 'bezier', 'z-index-compare': 'manual', 'z-index': 11
       }},
-      // Latency is a secondary label signal; alarm and offline must win over
-      // latency so an alarmed/offline switch is never shown as merely orange.
+      // Latency is a secondary signal and is the only state that uses a
+      // coloured frame.  Alarm/offline are filled red at the node level.
       {selector: 'node.lat-warn', style: {'border-color': '#F39C12', 'border-width': 4, 'border-style': 'solid'}},
       {selector: 'node.lat-bad', style: {'border-color': '#E74C3C', 'border-width': 6}},
-      {selector: 'node.alarm', style: {'border-color': '#E45959', 'border-width': 6}},
-      {selector: 'node.offline', style: {'border-color': '#C0392B', 'border-width': 6, 'border-style': 'dashed', 'opacity': 0.9}},
+      {selector: 'node.alarm', style: {'color': '#ffffff'}},
+      {selector: 'node.offline', style: {'color': '#ffffff', 'opacity': 0.92}},
       {selector: 'node.dim', style: {'opacity': 0.12}},
       {selector: 'edge.dim', style: {'opacity': 0.08}},
       {selector: 'edge.hl', style: {'width': 5, 'line-color': '#FFD54A', 'opacity': 1, 'z-index-compare': 'manual', 'z-index': 45}},
@@ -1262,8 +1262,11 @@
       var n = p.node, cls = [];
       var bg = p.role === 'core' ? TIER_BG.core : (p.role === 'main' ? '#2E75B6' : (p.role === 'dist' ? TIER_BG.dist : TIER_BG.access));
       var bd = bg;
-      if (n.alarms && n.alarms.length) { cls.push('alarm'); bd = '#E45959'; }
-      if (n.offline || n.oper === 'down') cls.push('offline');
+      // Alarm and offline are node-level states: fill the whole node red.
+      // Only latency > LATB is allowed to draw a red frame; 3-5 ms uses an
+      // orange frame.  Alarm must never be represented by a red border alone.
+      if (n.alarms && n.alarms.length) { cls.push('alarm'); bg = '#E45959'; bd = '#B03A3A'; }
+      if (n.offline || n.oper === 'down') { cls.push('offline'); bg = '#C0392B'; bd = '#7B241C'; }
       if (n.latency_ms != null) {
         if (+n.latency_ms > LATB) cls.push('lat-bad');
         else if (+n.latency_ms > LATW) cls.push('lat-warn');
@@ -1433,7 +1436,13 @@
       if (!isRoot && ni % 2 === 1) bg = dark ? '#4f8a3a' : '#6ca75a';
       if (n.alarms && n.alarms.length) {
         cls.push('alarm');
-        bd = '#E45959';
+        bg = '#E45959';
+        bd = '#B03A3A';
+      }
+      if (n.offline || n.oper === 'down') {
+        cls.push('offline');
+        bg = '#C0392B';
+        bd = '#7B241C';
       }
       if (n.latency_ms != null) {
         if (+n.latency_ms > LATB) cls.push('lat-bad');
@@ -1446,7 +1455,7 @@
         term_online: n.term_online, term_offline: n.term_offline, latency_ms: n.latency_ms,
         poe: !!n.poe,
         label: isRoot ? rootLabel(n) : rowLabel(n), tw: isRoot ? 150 : 360,
-        bg: bg, bd: isRoot ? bd : '#25501e',
+        bg: bg, bd: bd,
         w: isRoot ? 170 : 380, h: isRoot ? 50 : 24, group: viewGroup
       }, position: p, classes: cls.join(' ')});
     });
@@ -1544,8 +1553,8 @@
          '<span class="lg-box" style="background:' + TIER_BG.dist + ';margin-left:8px"></span>' + t('l2.dist', 'Distribution') +
          '<span class="lg-box" style="background:' + TIER_BG.access + ';margin-left:8px"></span>' + t('l2.access', 'Access') + '</div>';
     h += '<div class="lg-title">' + t('l2.legend_lat', 'Latency') + '</div>';
-    h += '<div class="lg-row"><span class="lg-box" style="background:#F39C12;border-radius:2px"></span>&gt;' + LATW + 'ms' +
-         '<span class="lg-box" style="background:#E74C3C;border-radius:2px;margin-left:8px"></span>&gt;' + LATB + 'ms</div>';
+    h += '<div class="lg-row"><span class="lg-box" style="background:transparent;border:2px solid #F39C12;border-radius:2px"></span>&gt;' + LATW + 'ms' +
+         '<span class="lg-box" style="background:transparent;border:2px solid #E74C3C;border-radius:2px;margin-left:8px"></span>&gt;' + LATB + 'ms</div>';
     h += '<div class="lg-row"><span class="lg-box" style="background:#E45959;border-radius:2px"></span>' + t('l2.alarms', 'Alarms') + '</div>';
     h += '<div class="lg-row"><span class="lg-box" style="background:#2ECC71;border-radius:50%"></span>' + t('l2.term_on', 'Online') +
          '<span class="lg-box" style="background:#C0392B;border-radius:2px;margin-left:8px"></span>' + t('l2.offline', 'Offline switch') + '</div>';

web-modules/WecomCenter/views/topology.view.php

@@ -107,7 +107,7 @@ window.L2_META = {
 };
 </script>
 <script src="<?php echo $base; ?>cytoscape.min.js"></script>
-<script src="<?php echo $base; ?>app.js?v=202611051845"></script>
+<script src="<?php echo $base; ?>app.js?v=202611051900"></script>
 <script>
 (function(){
   var tabs = document.querySelectorAll('.side-tab');