From 06d5bf8071b295f713247438a935c1031b4cc1d6 Mon Sep 17 00:00:00 2001
From: qinglong <qinglong@@users.noreply.github.com>
Date: Sat, 13 Jun 2026 22:19:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Sentinel=20=E6=A8=AA=E7=89=88=20?=
 =?UTF-8?q?=E2=80=94=20=E5=AE=8C=E5=85=A8=E7=A7=BB=E9=99=A4=20MiniChart,?=
 =?UTF-8?q?=20=E7=BA=AF=E6=96=87=E6=9C=AC=E6=95=B0=E5=80=BC=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 plugins/sentinel/dashboard.html | 49 ++++++++-------------------------
 1 file changed, 12 insertions(+), 37 deletions(-)

diff --git a/plugins/sentinel/dashboard.html b/plugins/sentinel/dashboard.html
index 825b7ed..395575d 100644
--- a/plugins/sentinel/dashboard.html
+++ b/plugins/sentinel/dashboard.html
@@ -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);