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

fix: Sentinel 横版模式 — 简化: 数值展示替代折线图 (去除 MiniChart 依赖)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
qinglong
2026-06-13 22:03:57 +08:00
parent 02cae47292
commit 31f1a2e177
1 changed files with 17 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
plugins/sentinel/dashboard.html
+17 -30
View File
@@ -84,24 +84,16 @@
<script> <script>
// 确保 chart.js 已加载 (SPA 导航时可能未加载) // 确保 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 pollTimer = null;
var editingId = null; var editingId = null;
var _chartInstances = {}; var _layoutMode = 'grid'; // 'grid' | 'row'
var _layoutMode = 'grid'; // 'grid' | 'row'
function toggleLayout() { function toggleLayout() {
_layoutMode = _layoutMode === 'grid' ? 'row' : 'grid'; _layoutMode = _layoutMode === 'grid' ? 'row' : 'grid';
var btn = document.getElementById("btn-layout"); var btn = document.getElementById("btn-layout");
var grid = document.getElementById("sentinel-grid"); var grid = document.getElementById("sentinel-grid");
// 销毁旧图表 // 销毁旧图表
Object.keys(_chartInstances).forEach(function(k){ _chartInstances[k].forEach(function(c){ c.destroy(); }); });
_chartInstances = {};
_cardCache = {}; _cardCache = {};
_firstRender = true; _firstRender = true;
grid.innerHTML = '<div class="card" style="text-align:center;padding:24px;color:var(--text-dim)">加载中...</div>'; grid.innerHTML = '<div class="card" style="text-align:center;padding:24px;color:var(--text-dim)">加载中...</div>';
@@ -228,16 +220,12 @@
if (isNew) { if (isNew) {
if (isRow) { if (isRow) {
body.innerHTML = body.innerHTML =
'<div class="chart-box"><canvas class="chart-cpu" style="width:100%;height:100%"></canvas></div>'+ '<div class="metric-row" style="flex-wrap:wrap">'+
'<div class="chart-box"><canvas class="chart-mem" style="width:100%;height:100%"></canvas></div>'+ '<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="chart-box"><canvas class="chart-net" style="width:100%;height:100%"></canvas></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>'+
if (typeof MiniChart !== 'undefined') { '<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>'+
_chartInstances[id] = [ '<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>'+
new MiniChart(body.querySelector('.chart-cpu'), '#7aa2f7'), '</div>';
new MiniChart(body.querySelector('.chart-mem'), '#9ece6a'),
new MiniChart(body.querySelector('.chart-net'), '#e0af68'),
];
}
} else { } else {
body.innerHTML = body.innerHTML =
'<div class="metric-row">'+ '<div class="metric-row">'+
@@ -252,19 +240,18 @@
} }
if (isRow) { if (isRow) {
var charts = _chartInstances[id]; // 横版: 更新数值 + 内存详情
if (charts && charts[0]) { body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0);
charts[0].update(cpuVal); body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0);
charts[1].update(memVal); var md = body.querySelector('.mem-detail-val');
charts[2].update(net.rx_bytes_sec||0); 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'); var right = card.querySelector('.card-right');
if (right) right.innerHTML = if (right) right.innerHTML =
'<div class="metric-value" style="font-size:1.2rem">CPU '+(cpuVal).toFixed(1)+'%</div>'+ '<div style="font-size:.75rem;color:var(--text-dim)">'+
'<div class="metric-value" style="font-size:1.2rem;margin-top:4px">MEM '+(memVal).toFixed(1)+'%</div>'+ (n.last_seen ? new Date(n.last_seen*1000).toLocaleTimeString() : '—')+'</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>';
} else { } else {
body.querySelector('.net-down').textContent = fmtSpeed(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); body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0);