AskaEth/SenSu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 横版2列 — 每行数据+图表同div (高度天然对齐)

Browse Source
This commit is contained in:
qinglong
2026-06-14 08:42:05 +08:00
parent bf832c11c8
commit 5e6ac11543
1 changed files with 15 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/sentinel/dashboard.html
+15 -24
View File
@@ -54,18 +54,17 @@
.node-sys { font-size:.75rem; color:var(--text-dim); margin-bottom:4px }
.node-url { font-size:.75rem; color:var(--text-dim); margin-bottom:8px; word-break:break-all }
.node-notes { font-size:.75rem; color:var(--text-dim); font-style:italic; margin-bottom:8px }
/* 横版布局 — 左设备信息 / 中指标数值 / 右折线图 */
/* 横版布局 — 左设备信息 | 右数据+图表同行 */
#sentinel-grid.layout-row { display:flex;flex-direction:column;gap:12px }
#sentinel-grid.layout-row .node-card { display:grid;grid-template-columns:200px 1fr 200px;gap:8px 16px;align-items:start }
#sentinel-grid.layout-row .node-card { display:grid;grid-template-columns:200px 1fr;gap:8px 16px;align-items:start }
#sentinel-grid.layout-row .col-left { min-width:0 }
#sentinel-grid.layout-row .col-mid { display:flex;flex-direction:column;gap:8px }
#sentinel-grid.layout-row .col-mid .rlabel { font-size:.7rem;color:var(--text-dim);text-transform:uppercase;display:inline-block;width:40px }
#sentinel-grid.layout-row .col-mid .rval { font-weight:600 }
#sentinel-grid.layout-row .row-cpu, #sentinel-grid.layout-row .row-mem, #sentinel-grid.layout-row .row-net { height:36px;display:flex;align-items:center;gap:4px;padding:0 4px;border-bottom:1px solid var(--md-sys-color-surface-container-lowest) }
#sentinel-grid.layout-row .col-right { display:flex;flex-direction:column;gap:4px }
#sentinel-grid.layout-row .col-right canvas { border-radius:3px;background:var(--md-sys-color-surface-container-lowest) }
#sentinel-grid.layout-row .col-info { text-align:right;font-size:.75rem;color:var(--text-dim);margin-top:4px }
#sentinel-grid.layout-row .node-time { grid-column:1;margin-top:4px }
#sentinel-grid.layout-row .col-right-stack { display:flex;flex-direction:column;gap:2px;min-width:0 }
#sentinel-grid.layout-row .mtr { display:flex;align-items:center;gap:12px;height:36px;padding:0 8px;border-bottom:1px solid var(--md-sys-color-surface-container-lowest) }
#sentinel-grid.layout-row .mtr-data { flex:1;min-width:0;white-space:nowrap }
#sentinel-grid.layout-row .mtr-data .rlabel { font-size:.7rem;color:var(--text-dim);text-transform:uppercase;margin-right:6px }
#sentinel-grid.layout-row .mtr-data .rval { font-weight:600 }
#sentinel-grid.layout-row .mtr canvas { border-radius:3px;background:var(--md-sys-color-surface-container-lowest);flex-shrink:0 }
#sentinel-grid.layout-row .node-time { margin-top:4px }
#sentinel-grid.layout-row .metric-bar { display:none }
.metric-row { display:flex; gap:12px; margin-bottom:8px }
.metric { flex:1 }
@@ -190,16 +189,11 @@
(n.notes ? '<div class="node-notes">📝 '+esc(n.notes)+'</div>' : '')+
'<div class="node-time"></div>'+
'</div>'+
'<div class="col-mid">'+
'<div class="row-cpu"><span class="rlabel">CPU</span> <span class="rval cpu-val">0%</span></div>'+
'<div class="row-mem"><span class="rlabel">MEM</span> <span class="rval mem-val">0%</span> <span class="mem-row-detail" style="font-size:.65rem;color:var(--text-dim)"></span></div>'+
'<div class="row-net"><span class="rlabel">NET</span> <span class="rval net-down" style="font-size:.85rem"></span> <span class="rval net-up" style="font-size:.85rem"></span></div>'+
'</div>'+
'<div class="col-right">'+
'<canvas id="'+id+'-cpu" width="180" height="36"></canvas>'+
'<canvas id="'+id+'-mem" width="180" height="36"></canvas>'+
'<canvas id="'+id+'-net" width="180" height="36"></canvas>'+
'<div class="col-info"></div>'+
'<div class="col-right-stack">'+
'<div class="mtr" id="mtr-'+id+'-cpu"><div class="mtr-data"><span class="rlabel">CPU</span> <span class="rval cpu-val">0%</span></div><canvas id="'+id+'-cpu" width="180" height="36"></canvas></div>'+
'<div class="mtr" id="mtr-'+id+'-mem"><div class="mtr-data"><span class="rlabel">MEM</span> <span class="rval mem-val">0%</span> <span class="mem-row-detail" style="font-size:.65rem;color:var(--text-dim)"></span></div><canvas id="'+id+'-mem" width="180" height="36"></canvas></div>'+
'<div class="mtr" id="mtr-'+id+'-net"><div class="mtr-data"><span class="rlabel">NET</span> <span class="rval net-down" style="font-size:.85rem">0</span> <span class="rval net-up" style="font-size:.85rem">0</span></div><canvas id="'+id+'-net" width="180" height="36"></canvas></div>'+
'<div class="col-info" style="text-align:right;font-size:.7rem;color:var(--text-dim);margin-top:4px"></div>'+
'</div>';
} else {
card.innerHTML =
@@ -237,7 +231,7 @@
sysEl.textContent = si2;
} else if (sysEl) { sysEl.remove(); }
var body = isRow ? card.querySelector('.col-mid') : card.querySelector('.metrics-body');
var body = isRow ? card.querySelector('.col-right-stack') : card.querySelector('.metrics-body');
if (!body) return;
var oldCpu = parseFloat(body.getAttribute('data-cpu')||(sys.cpu||{}).percent||0);
@@ -246,7 +240,6 @@
body.setAttribute('data-mem', (sys.memory||{}).percent||0);
if (isRow) {
// 更新中间列数值
var cpuEl = card.querySelector('.cpu-val');
var memEl = card.querySelector('.mem-val');
var netDn = card.querySelector('.net-down');
@@ -257,12 +250,10 @@
if (netDn) netDn.textContent = '↓' + fmtSpeed(net.rx_bytes_sec||0);
if (netUp) netUp.textContent = '↑' + fmtSpeed(net.tx_bytes_sec||0);
if (mrd) mrd.textContent = (mem.used_gb||0).toFixed(1)+'/'+(mem.total_gb||0).toFixed(1)+' GB';
// 图表更新
var charts = _chartInstances[id];
if (charts && charts[0]) {
try { charts[0].update(cpuVal); charts[1].update(memVal); charts[2].update(net.rx_bytes_sec||0); } catch(e) {}
}
// 右侧信息
var infoR = card.querySelector('.col-info');
if (infoR) infoR.textContent = (n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—');
var timeEl = card.querySelector('.node-time');