feat: 添加局域网设备发现功能和链路胶囊优化

- 实现局域网设备发现面板,支持探测ESP32中继板并自动切换端点
- 添加POST /api/lan/probe接口用于设备探测,返回三态判决结果
- 实现快扫和全段扫描两种模式,支持种子地址优先探测
- 添加端点唯一写手机制,防止多处同时修改设备IP
- 优化链路胶囊UI显示WiFi/EtherCAT/BLE连接状态和设备名称
- 修复EtherCAT链路OTA刷写期间PDO循环暂停和AL状态处理问题
- 调整PDO周期设置范围为0.125-4ms,支持亚毫秒显示为微秒
- 添加ESP32 WiFi使能开关控件样式和数据来源角标显示
This commit is contained in:
cbb
2026-10-13 00:48:34 +08:00
parent 514070b36d
commit eac3717f9a
41 changed files with 4229 additions and 934 deletions
+106
View File
@@ -133,3 +133,109 @@ body::after {
outline-offset: 2px;
border-radius: 4px;
}
/* ============================================================
局域网设备发现(js/common/lan-picker.js)
这里只放弹窗本身和它特有的排布。按钮 / 表单 / 输入框 / 列表行
一律复用 layout.css 的既有类(.btn .btn-outline .btn-sm .input
.input-group .form-label .jump-history-item .jh-tag .jh-msg .jh-time
与 .ok/.err/.info 状态色),不再另造一套控件外观。
============================================================ */
.lan-slot { display: flex; align-items: center; gap: 8px; padding: 0 6px; }
/* 遮罩:居中弹出 + 周围高斯模糊(backdrop-filter 作用于遮罩下方的整个页面) */
.lan-mask {
position: fixed; inset: 0; z-index: 900;
display: none; align-items: center; justify-content: center;
padding: 24px;
background: rgba(4, 8, 14, .62);
-webkit-backdrop-filter: blur(9px) saturate(.85);
backdrop-filter: blur(9px) saturate(.85);
animation: lanFade .16s ease;
}
.lan-mask.show { display: flex; }
@keyframes lanFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lanPop {
from { opacity: 0; transform: translateY(10px) scale(.985); }
to { opacity: 1; transform: none; }
}
/* 盒子沿用 .card 的渐变底与顶部子系统色带,描边/阴影/圆角同 .modal-box */
.lan-box {
position: relative;
width: min(760px, 100%); max-height: min(82vh, 780px);
overflow: auto;
background: linear-gradient(170deg, var(--bg-card) 0%, rgba(15,23,38,.96) 100%);
border: 1px solid var(--border-strong);
border-radius: var(--radius-lg);
box-shadow: 0 24px 64px rgba(0,0,0,.6);
animation: lanPop .18s ease;
}
.lan-box::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--esp32) 0%, var(--ble) 55%, var(--gd32) 100%);
opacity: .8;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.lan-head {
position: sticky; top: 0; z-index: 2;
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-display); font-size: 13px; font-weight: 600;
letter-spacing: .05em; color: var(--text);
background: linear-gradient(170deg, var(--bg-card) 0%, rgba(15,23,38,.96) 100%);
}
.lan-ep {
font-family: var(--font-mono); font-size: 11px; font-weight: 400;
letter-spacing: 0; color: var(--text-dim);
}
.lan-head .btn { margin-left: auto; }
.lan-body { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 12px; }
.lan-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lan-field { display: flex; align-items: center; gap: 8px; }
.lan-field .form-label { margin-bottom: 0; }
.lan-field .input { width: 172px; padding: 7px 10px; font-size: 12px; }
.lan-check {
display: flex; align-items: center; gap: 6px; cursor: pointer;
font-family: var(--font-display); font-size: 11px;
letter-spacing: .08em; text-transform: uppercase; color: var(--text-label);
}
.lan-progress { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-label); }
.lan-progress.lan-busy { color: var(--esp32); }
/* 列表行 = .jump-history-item 既有排布,但改成网格:
没有操作按钮的"当前端点"行和有按钮的行才能按同一套列宽对齐
(flex 布局下两行的右侧列会各自漂移,就是"对不齐"的来源)。 */
.lan-list {
list-style: none; margin: 0; padding: 0; overflow: hidden;
border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--bg-card);
}
.lan-list .jump-history-item {
display: grid; align-items: center; gap: 8px;
grid-template-columns: 46px minmax(0, 1fr) auto 52px;
padding: 6px 12px; cursor: pointer;
}
.lan-list .jump-history-item > .jh-msg { min-width: 0; }
.lan-list .jump-history-item > .jh-time { text-align: right; }
.lan-list .jump-history-item > .lan-sub { grid-column: 1 / -1; }
.lan-list .jump-history-item:hover { background: var(--bg-hover); }
.lan-list .jump-history-item.lan-cur { background: var(--esp32-dim); }
.lan-list .jump-history-item.lan-stale { opacity: .55; }
.lan-ip { color: var(--text); font-weight: 700; }
.lan-meta { color: var(--text-dim); font-weight: 400; }
.lan-acts { display: flex; gap: 4px; flex-shrink: 0; }
.lan-sub { flex-basis: 100%; font-size: 11px; color: var(--text-label); }
.lan-empty, .lan-cut { padding: 12px; font-size: 12px; color: var(--text-dim); text-align: center; }
.lan-note { min-height: 1.2em; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-dim); }
.lan-note-warn { color: var(--amber); }
.lan-note-error { color: var(--red); }
.lan-misc {
display: flex; flex-direction: column; gap: 8px;
border-top: 1px solid var(--border-subtle); padding-top: 12px;
}
.lan-block { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-label); }
.lan-block b { color: var(--text-dim); font-weight: 600; }
.lan-block ul { margin: 4px 0 0; padding-left: 18px; }
.lan-hint { color: var(--text-dim); }