fix(webui): 运行态面板不再闪、通道分配带归属(含驻留子)、改图形化

三个用户可见问题,逐个说明根因与改法。

1) 首页「一闪一闪」——运行态每 3s 轮询一次,renderRuntime 无条件重建
   #rt-panel 的 innerHTML:数据没变也把整块 DOM(含各级条的 transition)
   推倒重来。改法:缓存数据签名(**不含 uptime**——它每秒都变,带上等于没缓存),
   签名相同直接 return,一个字节都不动。另:renderOverview 会整块重建
   #rt-panel(面板本身是空的),所以那里必须让签名失效,否则空面板填不上。

2) 通道分配只显示内核/根 agent,看不见驻留子——根因是状态面只暴露了设备能力
   (KernelStatus.Channels,来自 iom.ListChannels),而「这条输入归谁」是
   ChannelRegistry 的属性(InputChannel.Owner/Capacity/Output),从未出过内核。
   而登记表本来就是根 agent 与驻留子**共用同一份**,所以数据一直都在,只是没画。
   改法:KernelStatus 新增 InputChannels(+ sdk.InputChannelInfo),
   /api/v1/runtime 带出 input_channels;前端把它按 owner 分进「归属容器」,
   驻留子即使一条 inputch 都没划到也照样出现在图里(否则"子存在但看不见"
   与"子不存在"无法区分),并显示其 allowed_outputs / 轮次 / 上下文满标记。

3) 「这些信息明明可以图形化」——四级中断的登记/抢占由纯文本改成并排迷你条;
   通道分配用归属容器 + 容量滑块(轨道/填充/把手/读数),并把回程通道、
   注册插件做成胶囊标签。设备能力拓扑(原有)保留。

验证:go build/vet 干净;go test ./internal/agent/... ./internal/plugin/...
./internal/sdk/... ./cmd/... 全绿;node --check dashboard.js 语法通过。
TestRuntimeEndpoint 扩展为同时钉住 input_channels 的归属与「驻留子划走的那条」。
This commit is contained in:
JianFeeeee
2026-09-14 10:55:45 +08:00
parent c321388a21
commit 43536ba326
6 changed files with 326 additions and 5 deletions

View File

@ -2262,6 +2262,135 @@
background: rgba(136, 192, 208, 0.16);
color: var(--frost-300);
}
/* —— 通道分配(按归属):容器 + 容量滑块 ——
为什么用容器而不是一排文字:归属是“分组”语义,只有把同一 owner 的
inputch 画进同一个盒子,才能一眼看出“这条输入被划给了哪个驻留子”。 */
.rt-owner {
border: 1px solid var(--border-color);
border-left: 3px solid var(--frost-300);
border-radius: 8px;
padding: 7px 9px;
margin-bottom: 7px;
background: rgba(255, 255, 255, 0.03);
}
.rt-owner.rt-owner-child {
border-left-color: #b48ead;
background: rgba(180, 142, 173, 0.07);
}
.rt-owner-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 4px;
}
.rt-owner-name {
font-size: 11px;
font-weight: 600;
}
.rt-owner-meta {
font-size: 10px;
color: var(--text-muted);
}
.rt-assign {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
border-top: 1px dashed rgba(255, 255, 255, 0.06);
font-size: 11px;
}
.rt-assign .rt-chan-name {
font-weight: 600;
min-width: 84px;
}
.rt-assign .rt-chan-sub {
font-size: 10px;
color: var(--text-muted);
margin-left: auto;
}
.rt-chip {
font-size: 9px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(163, 190, 140, 0.16);
color: var(--text-secondary, var(--text-muted));
white-space: nowrap;
}
.rt-badge-warn {
font-size: 9px;
padding: 1px 6px;
border-radius: 999px;
background: rgba(191, 97, 106, 0.22);
color: #d08770;
}
/* 容量滑块:轨道 + 填充 + 把手 + 读数。 */
.rt-slider {
display: inline-flex;
align-items: center;
gap: 5px;
flex: 0 0 auto;
}
.rt-slider-label {
font-size: 9px;
color: var(--text-muted);
}
.rt-slider-track {
position: relative;
display: inline-block;
width: 64px;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
overflow: visible;
}
.rt-slider-track > i {
position: absolute;
left: 0;
top: 0;
bottom: 0;
border-radius: 999px;
background: var(--frost-300);
}
.rt-slider-track > b {
position: absolute;
top: 50%;
width: 9px;
height: 9px;
margin-left: -4.5px;
margin-top: -4.5px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
.rt-slider-val {
font-size: 10px;
min-width: 34px;
color: var(--text-muted);
}
/* 行内迷你条(登记 / 抢占并排) */
.rt-mini {
display: inline-flex;
align-items: center;
gap: 3px;
margin-left: 6px;
font-size: 10px;
}
.rt-mini-track {
display: inline-block;
width: 30px;
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.10);
overflow: hidden;
vertical-align: middle;
}
.rt-mini-track > i {
display: block;
height: 100%;
border-radius: 999px;
background: var(--frost-300);
}
.rt-core {
width: 74px;
height: 74px;