feat: Sentinel 横版折线图 — MiniChart 正确放置 (innerHTML 外部, try-catch 保护)

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");
       // 销毁旧图表
+      try { Object.keys(_chartInstances).forEach(function(k){ if(_chartInstances[k]) _chartInstances[k].forEach(function(c){ if(c.destroy)c.destroy(); }); }); } catch(e) {}
+      _chartInstances = {};
       _cardCache = {};
       _firstRender = true;
       grid.innerHTML = '<div class="card" style="text-align:center;padding:24px;color:var(--text-dim)">加载中...</div>';
@@ -144,6 +147,8 @@
       var grid = document.getElementById("sentinel-grid");
       if (!nodes.length) {
         grid.innerHTML = '<div class="card" style="text-align:center;padding:24px;color:var(--text-dim)">暂无节点 — 切换到节点管理添加</div>';
+        try { Object.keys(_chartInstances).forEach(function(k){ if(_chartInstances[k]) _chartInstances[k].forEach(function(c){ if(c.destroy)c.destroy(); }); }); } catch(e) {}
+      _chartInstances = {};
       _cardCache = {};
         _firstRender = true;
         return;
@@ -182,6 +187,11 @@
               '</div>'+
               '<div class="card-mid">'+
                 '<div class="metrics-body">'+
+                  '<div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:4px">'+
+                    '<div class="chart-box"><canvas class="chart-cpu" width="160" height="50"></canvas></div>'+
+                    '<div class="chart-box"><canvas class="chart-mem" width="160" height="50"></canvas></div>'+
+                    '<div class="chart-box"><canvas class="chart-net" width="160" height="50"></canvas></div>'+
+                  '</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>'+
@@ -193,6 +203,16 @@
               '<div class="card-right">'+
                 '<div class="node-time"></div>'+
               '</div>';
+            if (typeof MiniChart !== 'undefined') {
+              var mcBody = card.querySelector('.metrics-body');
+              if (mcBody) {
+                _chartInstances[id] = [
+                  new MiniChart(mcBody.querySelector('.chart-cpu'), '#7aa2f7'),
+                  new MiniChart(mcBody.querySelector('.chart-mem'), '#9ece6a'),
+                  new MiniChart(mcBody.querySelector('.chart-net'), '#e0af68'),
+                ];
+              }
+            }
           } else {
             card.innerHTML =
               '<div class="node-name">'+(n.online?'🟢':'🔴')+' '+esc(n.name)+'</div>'+
@@ -229,6 +249,10 @@
         body.setAttribute('data-mem', (sys.memory||{}).percent||0);
 
         if (isRow) {
+          var charts = _chartInstances[id];
+          if (charts && charts[0]) {
+            try { charts[0].update(cpuVal); charts[1].update(memVal); charts[2].update(net.rx_bytes_sec||0); } catch(e) {}
+          }
           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');