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

fix: Sentinel 横版 — 完全移除 MiniChart, 纯文本数值展示

Browse Source
This commit is contained in:
qinglong
2026-06-13 22:19:47 +08:00
parent 5628f5d288
commit 06d5bf8071
1 changed files with 12 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/sentinel/dashboard.html
+12 -37
View File
@@ -86,7 +86,6 @@
// 确保 chart.js 已加载 (SPA 导航时可能未加载)
var pollTimer = null;
var _chartInstances = {};
var editingId = null;
var _layoutMode = 'grid'; // 'grid' | 'row'
@@ -95,7 +94,6 @@
var btn = document.getElementById("btn-layout");
var grid = document.getElementById("sentinel-grid");
// 销毁旧图表
_chartInstances = {};
_cardCache = {};
_firstRender = true;
grid.innerHTML = '<div class="card" style="text-align:center;padding:24px;color:var(--text-dim)">加载中...</div>';
@@ -184,29 +182,17 @@
'</div>'+
'<div class="card-mid">'+
'<div class="metrics-body">'+
'<div style="display:flex;flex-wrap:wrap;gap:12px">'+
'<div class="chart-box"><canvas class="chart-cpu" width="200" height="60"></canvas></div>'+
'<div class="chart-box"><canvas class="chart-mem" width="200" height="60"></canvas></div>'+
'<div class="chart-box"><canvas class="chart-net" width="200" height="60"></canvas></div>'+
'</div>'+
'<div class="metric-row" style="margin-top:4px">'+
'<div class="metric"><span class="metric-label">CPU</span> <span class="metric-value cpu-val" style="font-size:.9rem">0%</span></div>'+
'<div class="metric"><span class="metric-label">MEM</span> <span class="metric-value mem-val" style="font-size:.9rem">0%</span></div>'+
'<div class="metric"><span class="mem-detail-val" style="font-size:.65rem;color:var(--text-dim)"></span></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>';
if (typeof MiniChart !== 'undefined') {
var body = card.querySelector('.metrics-body');
_chartInstances[id] = [
new MiniChart(body.querySelector('.chart-cpu'), '#7aa2f7'),
new MiniChart(body.querySelector('.chart-mem'), '#9ece6a'),
new MiniChart(body.querySelector('.chart-net'), '#e0af68'),
];
}
} else {
card.innerHTML =
'<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
@@ -238,21 +224,12 @@
if (!body) return;
if (isRow) {
// 更新图表
var charts = _chartInstances[id];
if (charts && charts[0]) {
charts[0].update(cpuVal);
charts[1].update(memVal);
charts[2].update(net.rx_bytes_sec||0);
}
// 更新数值
var ce = body.querySelector('.cpu-val');
var me = body.querySelector('.mem-val');
var md = body.querySelector('.mem-detail-val');
if (ce) ce.textContent = cpuVal.toFixed(1) + '%';
if (me) me.textContent = memVal.toFixed(1) + '%';
if (md) md.textContent = 'NET ↓'+fmtSpeed(net.rx_bytes_sec||0)+' ↑'+fmtSpeed(net.tx_bytes_sec||0);
// 右边数值
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 =
'<div style="font-size:1.1rem;font-weight:600">CPU '+(cpuVal).toFixed(1)+'%</div>'+
@@ -260,9 +237,7 @@
'<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:.75rem;color:var(--text-dim);margin-top:8px">↓ '+fmtSpeed(net.rx_bytes_sec||0)+'</div>'+
'<div style="font-size:.75rem;color:var(--text-dim)">↑ '+fmtSpeed(net.tx_bytes_sec||0)+'</div>';
// 时间
var timeEl = card.querySelector('.node-time');
if (timeEl) timeEl.innerHTML = '<div style="font-size:.7rem;color:var(--text-dim);margin-top:8px">'+(n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'</div>';
card.querySelector('.node-time').innerHTML = '<div style="font-size:.7rem;color:var(--text-dim);margin-top:8px">'+(n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'</div>';
} else {
// 网格模式
var oldCpu = parseFloat(body.getAttribute('data-cpu')||cpuVal);