fix: 横版复用网格DOM结构 — 仅追加row-extra + CSS差异
This commit is contained in:
qinglong
@@ -56,13 +56,12 @@
|
|||||||
.node-notes { font-size:.75rem; color:var(--text-dim); font-style:italic; margin-bottom:8px }
|
.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 { 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 { display:flex;flex-wrap:wrap;gap:12px;align-items:start }
|
||||||
#sentinel-grid.layout-row .node-card .card-left { min-width:0 }
|
#sentinel-grid.layout-row .row-extra { display:flex;gap:12px;flex-wrap:wrap;flex:1;min-width:0 }
|
||||||
#sentinel-grid.layout-row .node-card .card-mid { display:flex;gap:16px;flex-wrap:wrap }
|
#sentinel-grid.layout-row .chart-row { display:flex;gap:8px;flex-wrap:wrap }
|
||||||
#sentinel-grid.layout-row .node-card .card-mid .chart-box { flex:1;min-width:120px;height:60px }
|
#sentinel-grid.layout-row .chart-row canvas { border-radius:4px;background:var(--md-sys-color-surface-container-lowest) }
|
||||||
#sentinel-grid.layout-row .node-card .card-right { text-align:right }
|
#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-bar { display:none }
|
||||||
#sentinel-grid.layout-row .metric-row { margin-bottom:0 }
|
|
||||||
.metric-row { display:flex; gap:12px; margin-bottom:8px }
|
.metric-row { display:flex; gap:12px; margin-bottom:8px }
|
||||||
.metric { flex:1 }
|
.metric { flex:1 }
|
||||||
.metric-label { font-size:.7rem; color:var(--text-dim); text-transform:uppercase }
|
.metric-label { font-size:.7rem; color:var(--text-dim); text-transform:uppercase }
|
||||||
@@ -177,40 +176,26 @@
|
|||||||
card.setAttribute('data-id', id);
|
card.setAttribute('data-id', id);
|
||||||
var plat = n.platform || {};
|
var plat = n.platform || {};
|
||||||
var sysInfo = (plat.system||'') + (plat.release ? ' ' + plat.release : '') + (plat.machine ? ' | ' + plat.machine : '');
|
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) {
|
if (isRow) {
|
||||||
card.innerHTML =
|
// 横版: 额外加折线图 canvas + 右侧信息区
|
||||||
'<div class="card-left">'+
|
var rowExtra = document.createElement('div');
|
||||||
'<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
|
rowExtra.className = 'row-extra';
|
||||||
(sysInfo.trim() ? '<div class="node-sys">'+esc(sysInfo)+'</div>' : '')+
|
rowExtra.innerHTML =
|
||||||
'<div class="node-url">'+esc(n.url||'')+'</div>'+
|
'<div class="chart-row">'+
|
||||||
(n.notes ? '<div class="node-notes">📝 '+esc(n.notes)+'</div>' : '')+
|
'<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>'+
|
||||||
'<div class="card-mid">'+
|
'<div class="info-right"></div>';
|
||||||
'<div class="metrics-body">'+
|
card.appendChild(rowExtra);
|
||||||
'<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>';
|
|
||||||
}
|
}
|
||||||
grid.appendChild(card);
|
grid.appendChild(card);
|
||||||
_cardCache[id] = card;
|
_cardCache[id] = card;
|
||||||
@@ -252,14 +237,8 @@
|
|||||||
if (charts && charts[0]) {
|
if (charts && charts[0]) {
|
||||||
try { charts[0].update(cpuVal); charts[1].update(memVal); charts[2].update(net.rx_bytes_sec||0); } catch(e) {}
|
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);
|
var infoR = card.querySelector('.info-right');
|
||||||
body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0);
|
if (infoR) infoR.innerHTML =
|
||||||
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 =
|
|
||||||
'<div style="font-size:1.1rem;font-weight:600">CPU '+(cpuVal).toFixed(1)+'%</div>'+
|
'<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: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>'+
|
'<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>'+
|
||||||
|
|||||||
Reference in New Issue
Block a user