diff --git a/plugins/sentinel/dashboard.html b/plugins/sentinel/dashboard.html index 4857cf5..ef2a104 100644 --- a/plugins/sentinel/dashboard.html +++ b/plugins/sentinel/dashboard.html @@ -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 ? '
📝 '+esc(n.notes)+'
' : '')+ '
'+ ''+ - '
'+ - '
CPU 0%
'+ - '
MEM 0%
'+ - '
NET
'+ - '
'+ - '
'+ - ''+ - ''+ - ''+ - '
'+ + '
'+ + '
CPU 0%
'+ + '
MEM 0%
'+ + '
NET 0 0
'+ + '
'+ '
'; } 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');