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

fix: 横版显式3列结构 col-left/col-mid/col-right + 底行时间

Browse Source
This commit is contained in:
qinglong
2026-06-14 08:10:42 +08:00
parent c0b4966086
commit b81f8024ae
1 changed files with 29 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/sentinel/dashboard.html
+29 -21
View File
@@ -56,12 +56,14 @@
.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:220px 1fr 180px;gap:16px;align-items:start } #sentinel-grid.layout-row .node-card { display:grid;grid-template-columns:220px 1fr 180px;gap:12px 16px;align-items:start }
#sentinel-grid.layout-row .row-extra { display:contents } #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 { 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-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 .col-info { text-align:right }
#sentinel-grid.layout-row .node-time { grid-column:1/-1 } #sentinel-grid.layout-row .node-time { grid-column:1/-1;margin-top:8px }
#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 }
@@ -177,26 +179,32 @@
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) {
// 横版: 额外加折线图 canvas + 右侧信息区 card.innerHTML =
var rowExtra = document.createElement('div'); '<div class="col-left">'+
rowExtra.className = 'row-extra'; '<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
rowExtra.innerHTML = (sysInfo.trim() ? '<div class="node-sys">'+esc(sysInfo)+'</div>' : '')+
'<div class="col-chart">'+ '<div class="node-url">'+esc(n.url||'')+'</div>'+
'<canvas id="'+id+'-cpu" width="160" height="50"></canvas>'+ (n.notes ? '<div class="node-notes">📝 '+esc(n.notes)+'</div>' : '')+
'<canvas id="'+id+'-mem" width="160" height="50"></canvas>'+
'<canvas id="'+id+'-net" width="160" height="50"></canvas>'+
'</div>'+ '</div>'+
'<div class="col-info"></div>'; '<div class="col-mid"><div class="metrics-body"></div></div>'+
card.appendChild(rowExtra); '<div class="col-right">'+
'<div class="col-chart">'+
'<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="col-info"></div>'+
'</div>'+
'<div class="node-time"></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;