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

fix: 横版复用网格DOM结构 — 仅追加row-extra + CSS差异

Browse Source
This commit is contained in:
qinglong
2026-06-14 07:58:24 +08:00
parent 62d49ff45f
commit 5ca68c9d13
1 changed files with 25 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/sentinel/dashboard.html
+25 -46
View File
@@ -56,13 +56,12 @@
.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 180px;gap:16px;align-items:start }
#sentinel-grid.layout-row .node-card .card-left { min-width:0 }
#sentinel-grid.layout-row .node-card .card-mid { display:flex;gap:16px;flex-wrap:wrap }
#sentinel-grid.layout-row .node-card .card-mid .chart-box { flex:1;min-width:120px;height:60px }
#sentinel-grid.layout-row .node-card .card-right { text-align:right }
#sentinel-grid.layout-row .node-card { display:flex;flex-wrap:wrap;gap:12px;align-items:start }
#sentinel-grid.layout-row .row-extra { display:flex;gap:12px;flex-wrap:wrap;flex:1;min-width:0 }
#sentinel-grid.layout-row .chart-row { display:flex;gap:8px;flex-wrap:wrap }
#sentinel-grid.layout-row .chart-row canvas { border-radius:4px;background:var(--md-sys-color-surface-container-lowest) }
#sentinel-grid.layout-row .info-right { min-width:140px;text-align:right }
#sentinel-grid.layout-row .metric-bar { display:none }
#sentinel-grid.layout-row .metric-row { margin-bottom:0 }
.metric-row { display:flex; gap:12px; margin-bottom:8px }
.metric { flex:1 }
.metric-label { font-size:.7rem; color:var(--text-dim); text-transform:uppercase }
@@ -177,40 +176,26 @@
card.setAttribute('data-id', id);
var plat = n.platform || {};
var sysInfo = (plat.system||'') + (plat.release ? ' ' + plat.release : '') + (plat.machine ? ' | ' + plat.machine : '');
// 两种模式用同一套 DOM, CSS 控制布局
card.innerHTML =
'<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
(sysInfo.trim() ? '<div class="node-sys">'+esc(sysInfo)+'</div>' : '')+
'<div class="node-url">'+esc(n.url||'')+'</div>'+
(n.notes ? '<div class="node-notes">📝 '+esc(n.notes)+'</div>' : '')+
'<div class="metrics-body"></div>'+
'<div class="node-time"></div>';
if (isRow) {
card.innerHTML =
'<div class="card-left">'+
'<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
(sysInfo.trim() ? '<div class="node-sys">'+esc(sysInfo)+'</div>' : '')+
'<div class="node-url">'+esc(n.url||'')+'</div>'+
(n.notes ? '<div class="node-notes">📝 '+esc(n.notes)+'</div>' : '')+
// 横版: 额外加折线图 canvas + 右侧信息区
var rowExtra = document.createElement('div');
rowExtra.className = 'row-extra';
rowExtra.innerHTML =
'<div class="chart-row">'+
'<canvas id="'+id+'-cpu" width="160" height="50"></canvas>'+
'<canvas id="'+id+'-mem" width="160" height="50"></canvas>'+
'<canvas id="'+id+'-net" width="160" height="50"></canvas>'+
'</div>'+
'<div class="card-mid">'+
'<div class="metrics-body">'+
'<div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:4px">'+
'<div class="chart-box"><canvas id="'+id+'-cpu" width="160" height="50"></canvas></div>'+
'<div class="chart-box"><canvas id="'+id+'-mem" width="160" height="50"></canvas></div>'+
'<div class="chart-box"><canvas id="'+id+'-net" width="160" height="50"></canvas></div>'+
'</div>'+
'<div class="metric-row">'+
'<div class="metric"><div class="metric-label">CPU</div><div class="metric-value cpu-val" style="font-size:1.3rem">0%</div></div>'+
'<div class="metric"><div class="metric-label">MEM</div><div class="metric-value mem-val" style="font-size:1.3rem">0%</div><div class="mem-detail-val" style="font-size:.65rem;color:var(--text-dim)"></div></div>'+
'<div class="metric"><div class="metric-label">NET ↓</div><div class="metric-value net-down" style="font-size:1rem"></div></div>'+
'<div class="metric"><div class="metric-label">NET ↑</div><div class="metric-value net-up" style="font-size:1rem"></div></div>'+
'</div>'+
'</div>'+
'</div>'+
'<div class="card-right">'+
'<div class="node-time"></div>'+
'</div>';
} else {
card.innerHTML =
'<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
(sysInfo.trim() ? '<div class="node-sys">'+esc(sysInfo)+'</div>' : '')+
'<div class="node-url">'+esc(n.url||'')+'</div>'+
(n.notes ? '<div class="node-notes">📝 '+esc(n.notes)+'</div>' : '')+
'<div class="metrics-body"></div>'+
'<div class="node-time"></div>';
'<div class="info-right"></div>';
card.appendChild(rowExtra);
}
grid.appendChild(card);
_cardCache[id] = card;
@@ -252,14 +237,8 @@
if (charts && charts[0]) {
try { charts[0].update(cpuVal); charts[1].update(memVal); charts[2].update(net.rx_bytes_sec||0); } catch(e) {}
}
body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0);
body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0);
var md3 = body.querySelector('.mem-detail-val');
if (md3) md3.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 right = card.querySelector('.card-right');
if (right) right.innerHTML =
var infoR = card.querySelector('.info-right');
if (infoR) infoR.innerHTML =
'<div style="font-size:1.1rem;font-weight:600">CPU '+(cpuVal).toFixed(1)+'%</div>'+
'<div style="font-size:1.1rem;font-weight:600;margin-top:4px">MEM '+(memVal).toFixed(1)+'%</div>'+
'<div style="font-size:.7rem;color:var(--text-dim);margin-top:4px">'+(mem.used_gb||0).toFixed(1)+'/'+(mem.total_gb||0).toFixed(1)+' GB</div>'+