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

fix: 横版改为左中右3列 — 220px/1fr/180px + display:contents

Browse Source
This commit is contained in:
qinglong
2026-06-14 08:08:31 +08:00
parent fb8add1336
commit c0b4966086
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/sentinel/dashboard.html
+10 -10
View File
@@ -54,14 +54,14 @@
.node-sys { font-size:.75rem; color:var(--text-dim); margin-bottom:4px } .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-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 } .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:1fr auto;gap:12px 20px } #sentinel-grid.layout-row .node-card { display:grid;grid-template-columns:220px 1fr 180px;gap:16px;align-items:start }
#sentinel-grid.layout-row .row-extra { display:flex;gap:16px;align-items:start } #sentinel-grid.layout-row .row-extra { display:contents }
#sentinel-grid.layout-row .chart-row { display:flex;gap:8px;flex-direction:column } #sentinel-grid.layout-row .col-chart { display:flex;flex-direction:column;gap:4px }
#sentinel-grid.layout-row .chart-row canvas { border-radius:4px;background:var(--md-sys-color-surface-container-lowest) } #sentinel-grid.layout-row .col-chart canvas { border-radius:4px;background:var(--md-sys-color-surface-container-lowest) }
#sentinel-grid.layout-row .info-right { min-width:120px;text-align:right } #sentinel-grid.layout-row .col-info { text-align:right }
#sentinel-grid.layout-row .node-time { grid-column:1 } #sentinel-grid.layout-row .node-time { grid-column:1/-1 }
#sentinel-grid.layout-row .metric-bar { display:none } #sentinel-grid.layout-row .metric-bar { display:none }
.metric-row { display:flex; gap:12px; margin-bottom:8px } .metric-row { display:flex; gap:12px; margin-bottom:8px }
.metric { flex:1 } .metric { flex:1 }
@@ -190,12 +190,12 @@
var rowExtra = document.createElement('div'); var rowExtra = document.createElement('div');
rowExtra.className = 'row-extra'; rowExtra.className = 'row-extra';
rowExtra.innerHTML = rowExtra.innerHTML =
'<div class="chart-row">'+ '<div class="col-chart">'+
'<canvas id="'+id+'-cpu" width="160" height="50"></canvas>'+ '<canvas id="'+id+'-cpu" width="160" height="50"></canvas>'+
'<canvas id="'+id+'-mem" width="160" height="50"></canvas>'+ '<canvas id="'+id+'-mem" width="160" height="50"></canvas>'+
'<canvas id="'+id+'-net" width="160" height="50"></canvas>'+ '<canvas id="'+id+'-net" width="160" height="50"></canvas>'+
'</div>'+ '</div>'+
'<div class="info-right"></div>'; '<div class="col-info"></div>';
card.appendChild(rowExtra); card.appendChild(rowExtra);
} }
grid.appendChild(card); grid.appendChild(card);
@@ -238,7 +238,7 @@
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) {}
} }
var infoR = card.querySelector('.info-right'); var infoR = card.querySelector('.col-info');
if (infoR) infoR.innerHTML = 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">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>'+