jianf/HomeAgent
1
0
Fork 0
mirror of https://gitcode.com/JianFeeeee/HomeAgent.git synced 2026-09-28 21:33:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(webui): 拓扑按实测容器宽布局 + 字号/截断，修间距失衡与文字难读

Browse Source 
三处实机问题：
1) viewBox 固定 640 而容器 ~920，浏览器按 'meet' 把内容顶到左上、右侧空出一大片
   —— 观感就是「间距不对」。改为 viewBox 宽 = 实测容器宽、width 用像素值，
   缩放恒为 1（已用 getScreenCTM().a 验证）。
2) 文字全是 9-11px + 低对比度硬编码色（#8b90a5）→ 难读。字号提到 10.5-12.5px，
   fill/font-size 改走 .tp-* 类，颜色交给 --text-primary/--text-muted 主题变量。
3) 列短的一侧原来顶在带上半、节点居中，连线又长又歪；长通道名还会溢出到邻居身上。
   现在两列在带内各自居中、节点块高度参与带高计算（单行带不再把节点名压到下一条带），
   长名按估算宽度截断加 …，完整名放 <title> 悬停可见。
另：rtSpark 用的 _rtEdgeIn/_rtEdgeOut 键与取值方式未变，光点动画照旧。
This commit is contained in:
JianFeeeee
2026-09-14 16:51:41 +08:00
parent 5ea87a498a
commit 0fd4fb1f7a
2 changed files with 75 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
internal/plugins/webui/dashboard.css
View File

@ -2397,6 +2397,19 @@
.rt-svg text {
fill: var(--text-primary);
}
/* 拓扑图的文字全部走类（不用 font-size/fill 属性）：
1) 字号统一可读（原来 9–11px 且低对比度，实机很难看清）；
2) 颜色交给主题变量，切主题/配色时不用重算 SVG。
长名截断由 JS 的 rtClip 负责（SVG 没有 text-overflow）。 */
.rt-topo-svg .tp-name { font-size: 12px; fill: var(--text-primary); }
.rt-topo-svg .tp-sub { font-size: 10.5px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.rt-topo-svg .tp-val { font-size: 12.5px; font-weight: 700; fill: var(--text-primary); }
.rt-topo-svg .tp-lab { font-size: 11px; font-weight: 600; }
.rt-topo-svg .tp-warn { font-size: 10.5px; fill: #ffb86b; }
.rt-topo-svg .tp-hint { font-size: 10.5px; fill: var(--text-muted); }
.rt-topo-svg .tp-edge { fill: none; }
.rt-topo-svg .tp-edge-in { stroke-opacity: 0.45; stroke-width: 1.4; }
.rt-topo-svg .tp-edge-out { stroke-opacity: 0.35; stroke-width: 1.2; }
/* 第五条：排队队列（无级别）。用虚线分隔 + 中性色，与“有级别”的四条区分开——
它不是优先级，而是另一**类别**（排队 vs 中断），同一套配色会误导。 */
.rt-level.rt-level-queued {