fix(css): 补 motor.html 节点总览的 .node-item/.ni-* 样式

motor.js renderNodeList() 渲染的是 .node-item + .ni-led/.ni-name/
.ni-fault/.ni-sub, 但 ecat.css 里只有另一套 .node-card(供 ecat.html 的
单从站卡片)。类名对不上, N1-N9 九行渲染成无样式裸 div = "样式丢了"。

补齐单行紧凑布局(LED | Nx | 故障标签 | 右对齐读数)及状态态:
  .online   opacity 复原 + LED 转绿发光
  .active   边框转主色 + 底色加深
  故障      .ni-fault.has 显示为红色 pill, 边框同步转红
  离线      opacity .5 + 灰 LED 无光晕
沿用既有 CSS 变量与 .node-card 的视觉语言, 未改动 .node-card 本身。

Edge headless + CDP 实测计算样式确认: 9 项竖排不重叠、margin-left:auto
右对齐生效、四种状态切换正确。CSS 改动故 bump ?v=20260903b。
This commit is contained in:
cbb
2026-09-03 21:40:26 +08:00
parent 8d414ae3fb
commit 71c4ee6a14
+46
View File
@@ -233,6 +233,52 @@ label { display: block; }
.node-card.fault { border-color: color-mix(in srgb, var(--danger) 55%, transparent); } .node-card.fault { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.node-card.fault.active { border-color: var(--danger); } .node-card.fault.active { border-color: var(--danger); }
.node-card.offline { opacity: .5; } .node-card.offline { opacity: .5; }
/* motor.html 的 N1–N9 紧凑列表项(.node-item/.ni-*)。
* 与上面 .node-card 是两套东西: .node-card 供 ecat.html 的单从站卡片,
* 这里是 motor.js renderNodeList() 渲染的九行节点。类名对不上时整列表会裸奔。
* 单行布局: LED | N1 | 故障标签 | 右对齐读数 */
.node-item {
display: flex; align-items: center; gap: var(--sp-2);
padding: var(--sp-2) var(--sp-3);
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-root);
cursor: pointer;
opacity: .5; /* 默认离线态; .online 时恢复 */
transition: border-color .2s, background .2s, opacity .2s, transform .12s;
}
.node-item:hover { border-color: var(--border-strong); transform: translateX(2px); }
.node-item:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.node-item.online { opacity: 1; }
.node-item.active {
border-color: color-mix(in srgb, var(--seed-primary) 55%, transparent);
background: color-mix(in srgb, var(--seed-primary) 6%, var(--bg-root));
}
.node-item .ni-led {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--fg-dim); transition: background .3s, box-shadow .3s;
}
.node-item.online .ni-led { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.node-item .ni-name {
font-family: var(--font-mono); font-weight: 700; font-size: .9rem;
letter-spacing: -0.02em; min-width: 2.1em;
}
/* 故障标签默认不占位, 有内容(.has)时才显示 */
.node-item .ni-fault { display: none; }
.node-item .ni-fault.has {
display: inline-block;
font-size: .65rem; padding: 1px 6px; border-radius: 99px;
background: var(--danger-dim); color: var(--danger);
font-weight: 600; letter-spacing: .02em;
max-width: 8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-item.online:has(.ni-fault.has) { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.node-item .ni-sub {
margin-left: auto;
font-family: var(--font-mono); font-size: .68rem; color: var(--fg-muted);
letter-spacing: .01em; white-space: nowrap;
}
/* 独立 BOOT 徽章:总线上有电机在 Bootloader(0x103 心跳),不归属任何 Nx /* 独立 BOOT 徽章:总线上有电机在 Bootloader(0x103 心跳),不归属任何 Nx
* 注意:不要用内联 style="display:none",否则 .show 的 display:flex 盖不过。 */ * 注意:不要用内联 style="display:none",否则 .show 的 display:flex 盖不过。 */
.boot-badge { .boot-badge {