From 765387981e836ea8d5004416376d0aa16b1782f4 Mon Sep 17 00:00:00 2001 From: qinglong Date: Sat, 13 Jun 2026 22:10:02 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20Sentinel=20=E6=A8=AA=E7=89=88=E6=8A=98?= =?UTF-8?q?=E7=BA=BF=E5=9B=BE=20=E2=80=94=20MiniChart=20=E5=A4=8D=E7=94=A8?= =?UTF-8?q?=E4=B8=BB=E9=A1=B5=20chart.js=20(SPA=20=E5=85=A8=E5=B1=80?= =?UTF-8?q?=E5=8F=AF=E7=94=A8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- plugins/sentinel/dashboard.html | 46 ++++++++++++++++++++++----------- 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/plugins/sentinel/dashboard.html b/plugins/sentinel/dashboard.html index d750d57..9c0999c 100644 --- a/plugins/sentinel/dashboard.html +++ b/plugins/sentinel/dashboard.html @@ -86,6 +86,7 @@ // 确保 chart.js 已加载 (SPA 导航时可能未加载) var pollTimer = null; + var _chartInstances = {}; var editingId = null; var _layoutMode = 'grid'; // 'grid' | 'row' @@ -94,6 +95,8 @@ var btn = document.getElementById("btn-layout"); var grid = document.getElementById("sentinel-grid"); // 销毁旧图表 + Object.keys(_chartInstances).forEach(function(k){ if(_chartInstances[k]) _chartInstances[k].forEach(function(c){ if(c.destroy)c.destroy(); }); }); + _chartInstances = {}; _cardCache = {}; _firstRender = true; grid.innerHTML = '
加载中...
'; @@ -120,6 +123,8 @@ } // ═══ 仪表盘 ═══ + Object.keys(_chartInstances).forEach(function(k){ if(_chartInstances[k]) _chartInstances[k].forEach(function(c){ if(c.destroy)c.destroy(); }); }); + _chartInstances = {}; var _cardCache = {}; function animateValue(el, oldVal, newVal, decimals, suffix) { @@ -143,6 +148,8 @@ var grid = document.getElementById("sentinel-grid"); if (!nodes.length) { grid.innerHTML = '
暂无节点 — 切换到节点管理添加
'; + Object.keys(_chartInstances).forEach(function(k){ if(_chartInstances[k]) _chartInstances[k].forEach(function(c){ if(c.destroy)c.destroy(); }); }); + _chartInstances = {}; _cardCache = {}; _firstRender = true; return; @@ -220,11 +227,18 @@ if (isNew) { if (isRow) { body.innerHTML = - '
'+ - '
CPU
0%
'+ - '
MEM
0%
'+ - '
NET ↓
'+ - '
NET ↑
'+ + '
'+ + '
'+ + '
'+ + '
'+ + if (typeof MiniChart !== "undefined") { + _chartInstances[id] = [ + new MiniChart(body.querySelector(".chart-cpu"), "#7aa2f7"), + new MiniChart(body.querySelector(".chart-mem"), "#9ece6a"), + new MiniChart(body.querySelector(".chart-net"), "#e0af68"), + ]; + } + ''+ '
'; } else { body.innerHTML = @@ -240,18 +254,20 @@ } if (isRow) { - // 横版: 更新数值 + 内存详情 - body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0); - body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0); - var md = body.querySelector('.mem-detail-val'); - if (md) md.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 charts = _chartInstances[id]; + if (charts && charts[0]) { + charts[0].update(cpuVal); + charts[1].update(memVal); + charts[2].update(net.rx_bytes_sec||0); + } var right = card.querySelector('.card-right'); if (right) right.innerHTML = - '
'+ - (n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'
'; + '
CPU '+(cpuVal).toFixed(1)+'%
'+ + '
MEM '+(memVal).toFixed(1)+'%
'+ + '
'+(mem.used_gb||0).toFixed(1)+'/'+(mem.total_gb||0).toFixed(1)+' GB
'+ + '
↓ '+fmtSpeed(net.rx_bytes_sec||0)+'
'+ + '
↑ '+fmtSpeed(net.tx_bytes_sec||0)+'
'+ + '
'+(n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'
'; } else { body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0); body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0);