feat(webui): 通道归属合并进拓扑图,整张图改 SVG(少文字、多图形)

上一版把「通道分配(按归属)」单开一段,等于把同一件事拆成两张表——
而通道属于谁是**拓扑的一部分**(左边这些输入口分别被谁接管),拆开反而
看不出关系。按用户要求合并,并整体改成图形化:

- 整张拓扑用 SVG:左侧按归属画出输入通道容器(根=青色虚线框,驻留子=彩色
  实线框并标轮次/上下文满),→ 汇集母线 → 内核 → 输出母线 → 右侧输出通道。
  **连线即路由**。
- 信息全部改用图形编码:归属=容器/配色、容量=节点内细条(默认容量不画填充)、
  输出能力=五个彩色圆点(text/file/image/audio/structured)。
- 文字降到最少:去掉四个数字块的副标题、排队队列那行只留 "FIFO"、
  通道行不再写"回程由来源决定"这类说明。
- 段名改为「通道拓扑(连线即路由;左框 = 归属)」。

验证:node --check 通过;go build ./... 干净;webui 测试全绿。
This commit is contained in:
JianFeeeee
2026-09-14 11:22:20 +08:00
parent 75f377fd4d
commit e8d7bb4c06
2 changed files with 186 additions and 110 deletions

View File

@ -2191,6 +2191,20 @@
.rt-lv-3 > i { background: #ffa657; }
.rt-lv-2 > i { background: var(--sakura-400); }
.rt-lv-1 > i { background: var(--frost-300); }
/* 拓扑图:整张图为 SVG,文字降到最少,其余信息用图形编码
(归属=容器/配色、容量=细条、输出能力=圆点、路由=连线)。 */
.rt-svg-wrap {
overflow-x: auto;
padding: 4px 0 8px;
}
.rt-svg {
min-width: 560px;
font-family: inherit;
display: block;
}
.rt-svg text {
fill: var(--text-primary);
}
/* 第五条:排队队列(无级别)。用虚线分隔 + 中性色,与“有级别”的四条区分开——
它不是优先级,而是另一**类别**(排队 vs 中断),同一套配色会误导。 */
.rt-level.rt-level-queued {