diff --git a/plugins/sentinel/dashboard.html b/plugins/sentinel/dashboard.html index a95d875..8572432 100644 --- a/plugins/sentinel/dashboard.html +++ b/plugins/sentinel/dashboard.html @@ -54,16 +54,18 @@ .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:220px 1fr 180px;gap:12px 16px;align-items:start } + #sentinel-grid.layout-row .node-card { display:grid;grid-template-columns:200px 1fr 200px;gap:8px 16px;align-items:start } #sentinel-grid.layout-row .col-left { min-width:0 } - #sentinel-grid.layout-row .col-mid { min-width:0 } - #sentinel-grid.layout-row .col-right { display:flex;flex-direction:column;gap:8px } - #sentinel-grid.layout-row .col-chart { display:flex;flex-direction:column;gap:4px } - #sentinel-grid.layout-row .col-chart canvas { border-radius:4px;background:var(--md-sys-color-surface-container-lowest) } - #sentinel-grid.layout-row .col-info { text-align:right } - #sentinel-grid.layout-row .node-time { grid-column:1/-1;margin-top:8px } + #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 { padding:4px 0;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 .metric-bar { display:none } .metric-row { display:flex; gap:12px; margin-bottom:8px } .metric { flex:1 } @@ -186,17 +188,19 @@ (sysInfo.trim() ? '
'+esc(sysInfo)+'
' : '')+ '
'+esc(n.url||'')+'
'+ (n.notes ? '
📝 '+esc(n.notes)+'
' : '')+ + '
'+ + ''+ + '
'+ + '
CPU 0%
'+ + '
MEM 0%
'+ + '
NET
'+ '
'+ - '
'+ '
'+ - '
'+ - ''+ - ''+ - ''+ - '
'+ + ''+ + ''+ + ''+ '
'+ - '
'+ - '
'; + ''; } else { card.innerHTML = '
'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'
'+ @@ -242,39 +246,27 @@ body.setAttribute('data-mem', (sys.memory||{}).percent||0); if (isRow) { - // 初始化/更新中间栏的数值 - var isNewRow = !body.querySelector('.cpu-val'); - if (isNewRow) { - body.innerHTML = - '
'+ - '
CPU
0%
'+ - '
MEM
0%
'+ - '
'+ - '
'+ - '
'+ - '
NET ↓
'+ - '
NET ↑
'+ - '
'; - } - body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0); - body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0); - var mrd = body.querySelector('.mem-row-detail'); + // 更新中间列数值 + var cpuEl = card.querySelector('.cpu-val'); + var memEl = card.querySelector('.mem-val'); + var netDn = card.querySelector('.net-down'); + var netUp = card.querySelector('.net-up'); + var mrd = card.querySelector('.mem-row-detail'); + if (cpuEl) cpuEl.textContent = cpuVal.toFixed(1) + '%'; + if (memEl) memEl.textContent = memVal.toFixed(1) + '%'; + 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'; - animateValue(body.querySelector('.cpu-val'), oldCpu, cpuVal, 1, '%'); - animateValue(body.querySelector('.mem-val'), oldMem, memVal, 1, '%'); // 图表更新 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.innerHTML = - '
CPU '+(cpuVal).toFixed(1)+'%
'+ - '
MEM '+(memVal).toFixed(1)+'%
'+ - '
'+(mem.used_gb||0).toFixed(1)+'/'+(mem.total_gb||0).toFixed(1)+' GB
'+ - '
↓ '+fmtSpeed(net.rx_bytes_sec||0)+'
'+ - '
↑ '+fmtSpeed(net.tx_bytes_sec||0)+'
'; - card.querySelector('.node-time').innerHTML = '
'+(n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'
'; + if (infoR) infoR.textContent = (n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—'); + var timeEl = card.querySelector('.node-time'); + if (timeEl) timeEl.innerHTML = '
'+(n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'
'; } else { // 网格模式 — oldCpu/oldMem 已在上面读取(在setAttribute之前) var hasMetricBar = body.querySelector('.metric-bar');