From 31f1a2e177f8bcd9fdff423f016dfa93ee2f3a0c Mon Sep 17 00:00:00 2001
From: qinglong <qinglong@@users.noreply.github.com>
Date: Sat, 13 Jun 2026 22:03:57 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20Sentinel=20=E6=A8=AA=E7=89=88=E6=A8=A1?=
 =?UTF-8?q?=E5=BC=8F=20=E2=80=94=20=E7=AE=80=E5=8C=96:=20=E6=95=B0?=
 =?UTF-8?q?=E5=80=BC=E5=B1=95=E7=A4=BA=E6=9B=BF=E4=BB=A3=E6=8A=98=E7=BA=BF?=
 =?UTF-8?q?=E5=9B=BE=20(=E5=8E=BB=E9=99=A4=20MiniChart=20=E4=BE=9D?=
 =?UTF-8?q?=E8=B5=96)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

横版布局现在显示大号CPU/MEM/NET数值，无需加载 chart.js
- 移除 _chartInstances / MiniChart 依赖
- 移除动态 chart.js 加载
- 移除 toggleLayout 中的图表销毁逻辑

Co-Authored-By: Claude <noreply@anthropic.com>
---
 plugins/sentinel/dashboard.html | 47 ++++++++++++---------------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/plugins/sentinel/dashboard.html b/plugins/sentinel/dashboard.html
index 0a616b5..d750d57 100644
--- a/plugins/sentinel/dashboard.html
+++ b/plugins/sentinel/dashboard.html
@@ -84,24 +84,16 @@
 
   <script>
     // 确保 chart.js 已加载 (SPA 导航时可能未加载)
-    if (typeof MiniChart === 'undefined') {
-      var cs = document.createElement('script');
-      cs.src = '/SenSu/static/js/chart.js?v=0705';
-      document.head.appendChild(cs);
-    }
 
     var pollTimer = null;
     var editingId = null;
-    var _chartInstances = {};
-    var _layoutMode = 'grid';  // 'grid' | 'row'
+        var _layoutMode = 'grid';  // 'grid' | 'row'
 
     function toggleLayout() {
       _layoutMode = _layoutMode === 'grid' ? 'row' : 'grid';
       var btn = document.getElementById("btn-layout");
       var grid = document.getElementById("sentinel-grid");
       // 销毁旧图表
-      Object.keys(_chartInstances).forEach(function(k){ _chartInstances[k].forEach(function(c){ c.destroy(); }); });
-      _chartInstances = {};
       _cardCache = {};
       _firstRender = true;
       grid.innerHTML = '<div class="card" style="text-align:center;padding:24px;color:var(--text-dim)">加载中...</div>';
@@ -228,16 +220,12 @@
           if (isNew) {
             if (isRow) {
               body.innerHTML =
-                '<div class="chart-box"><canvas class="chart-cpu" style="width:100%;height:100%"></canvas></div>'+
-                '<div class="chart-box"><canvas class="chart-mem" style="width:100%;height:100%"></canvas></div>'+
-                '<div class="chart-box"><canvas class="chart-net" style="width:100%;height:100%"></canvas></div>';
-              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'),
-                ];
-              }
+                '<div class="metric-row" style="flex-wrap:wrap">'+
+                  '<div class="metric" style="min-width:100px"><div class="metric-label">CPU</div><div class="metric-value cpu-val" style="font-size:1.4rem">0%</div></div>'+
+                  '<div class="metric" style="min-width:100px"><div class="metric-label">MEM</div><div class="metric-value mem-val" style="font-size:1.4rem">0%</div><div class="mem-detail-val" style="font-size:.65rem;color:var(--text-dim)"></div></div>'+
+                  '<div class="metric" style="min-width:100px"><div class="metric-label">NET ↓</div><div class="metric-value net-down" style="font-size:1rem"></div></div>'+
+                  '<div class="metric" style="min-width:100px"><div class="metric-label">NET ↑</div><div class="metric-value net-up" style="font-size:1rem"></div></div>'+
+                '</div>';
             } else {
               body.innerHTML =
                 '<div class="metric-row">'+
@@ -252,19 +240,18 @@
           }
 
           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);
-            }
+            // 横版: 更新数值 + 内存详情
+            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 right = card.querySelector('.card-right');
             if (right) right.innerHTML =
-              '<div class="metric-value" style="font-size:1.2rem">CPU '+(cpuVal).toFixed(1)+'%</div>'+
-              '<div class="metric-value" style="font-size:1.2rem;margin-top:4px">MEM '+(memVal).toFixed(1)+'%</div>'+
-              '<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>';
+              '<div style="font-size:.75rem;color:var(--text-dim)">'+
+              (n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'</div>';
           } else {
             body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0);
             body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0);