feat: WebUI 首页仪表盘 — CPU/MEM/进程内存 数字跳动动画
- animateNumber(): 900ms ease-out 缓动, 存储前值于 data-val - CPU%、MEM%、进程内存 三个指标使用跳动动画 - 与 Sentinel 卡片动画风格统一 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -284,5 +284,27 @@
|
|||||||
"framework.command.execute"
|
"framework.command.execute"
|
||||||
],
|
],
|
||||||
"timestamp": 27821.239961313
|
"timestamp": 27821.239961313
|
||||||
|
},
|
||||||
|
"2ae8c213": {
|
||||||
|
"plugin_name": "example_plugin",
|
||||||
|
"permissions": [
|
||||||
|
"plugin.example.read",
|
||||||
|
"plugin.example.write",
|
||||||
|
"plugin.example.execute",
|
||||||
|
"framework.event.subscribe",
|
||||||
|
"framework.command.execute"
|
||||||
|
],
|
||||||
|
"timestamp": 27941.293164548
|
||||||
|
},
|
||||||
|
"dd24f0d1": {
|
||||||
|
"plugin_name": "sentinel",
|
||||||
|
"permissions": [
|
||||||
|
"plugin.sentinel.read",
|
||||||
|
"plugin.sentinel.write",
|
||||||
|
"plugin.network.access",
|
||||||
|
"framework.event.subscribe",
|
||||||
|
"framework.command.execute"
|
||||||
|
],
|
||||||
|
"timestamp": 27941.297902882
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -101,7 +101,7 @@ commands:
|
|||||||
permissions:
|
permissions:
|
||||||
- framework.command.test
|
- framework.command.test
|
||||||
source: internal
|
source: internal
|
||||||
last_updated: 27821.221132094
|
last_updated: 27941.282839757
|
||||||
plugin_commands:
|
plugin_commands:
|
||||||
example_plugin:
|
example_plugin:
|
||||||
echo: *id001
|
echo: *id001
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
http_port: 4200
|
http_port: 4200
|
||||||
last_updated: 27821.238246209
|
last_updated: 27941.295580277
|
||||||
plugin_routes:
|
plugin_routes:
|
||||||
example_plugin:
|
example_plugin:
|
||||||
- methods:
|
- methods:
|
||||||
|
|||||||
@@ -1,3 +1,19 @@
|
|||||||
|
/* ── 数字跳动动画 ── */
|
||||||
|
function animateNumber(el, newVal, decimals, suffix) {
|
||||||
|
var oldVal = parseFloat(el.getAttribute('data-val') || newVal);
|
||||||
|
if (oldVal === newVal) { el.textContent = newVal.toFixed(decimals) + suffix; return; }
|
||||||
|
el.setAttribute('data-val', newVal);
|
||||||
|
var start = performance.now();
|
||||||
|
var duration = 900;
|
||||||
|
function step(ts) {
|
||||||
|
var p = Math.min((ts - start) / duration, 1);
|
||||||
|
var eased = 1 - Math.pow(1 - p, 3); // ease-out
|
||||||
|
el.textContent = (oldVal + (newVal - oldVal) * eased).toFixed(decimals) + suffix;
|
||||||
|
if (p < 1) requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
requestAnimationFrame(step);
|
||||||
|
}
|
||||||
|
|
||||||
window.DashboardModule = {
|
window.DashboardModule = {
|
||||||
ws: null,
|
ws: null,
|
||||||
reconnectTimer: null,
|
reconnectTimer: null,
|
||||||
@@ -73,7 +89,7 @@ window.DashboardModule = {
|
|||||||
// ── 内存 ──
|
// ── 内存 ──
|
||||||
if (sys.memory) {
|
if (sys.memory) {
|
||||||
var m = sys.memory.percent || 0;
|
var m = sys.memory.percent || 0;
|
||||||
var el = document.getElementById('d-mem'); if (el) el.textContent = m + '%';
|
var el = document.getElementById('d-mem'); if (el) animateNumber(el, m, 1, '%');
|
||||||
el = document.getElementById('d-mem-detail');
|
el = document.getElementById('d-mem-detail');
|
||||||
if (el) el.textContent = (sys.memory.used_gb || 0).toFixed(1) + ' / ' + (sys.memory.total_gb || 0).toFixed(1) + ' GB';
|
if (el) el.textContent = (sys.memory.used_gb || 0).toFixed(1) + ' / ' + (sys.memory.total_gb || 0).toFixed(1) + ' GB';
|
||||||
self.charts.mem.update(m);
|
self.charts.mem.update(m);
|
||||||
@@ -86,7 +102,7 @@ window.DashboardModule = {
|
|||||||
var load = (sys.cpu.load_avg && sys.cpu.load_avg[0]) ? sys.cpu.load_avg[0] : 0;
|
var load = (sys.cpu.load_avg && sys.cpu.load_avg[0]) ? sys.cpu.load_avg[0] : 0;
|
||||||
cpuVal = Math.min(100, (load / (sys.cpu.cores || 1)) * 100);
|
cpuVal = Math.min(100, (load / (sys.cpu.cores || 1)) * 100);
|
||||||
}
|
}
|
||||||
var el = document.getElementById('d-cpu'); if (el) el.textContent = Math.round(cpuVal) + '%';
|
var el = document.getElementById('d-cpu'); if (el) animateNumber(el, cpuVal, 0, '%');
|
||||||
self.charts.cpu.update(cpuVal);
|
self.charts.cpu.update(cpuVal);
|
||||||
|
|
||||||
if (sys.cpu.load_avg) {
|
if (sys.cpu.load_avg) {
|
||||||
@@ -117,7 +133,7 @@ window.DashboardModule = {
|
|||||||
// ── 进程内存 ──
|
// ── 进程内存 ──
|
||||||
if (sys.process && sys.process.memory_mb !== undefined) {
|
if (sys.process && sys.process.memory_mb !== undefined) {
|
||||||
var pm = sys.process.memory_mb || 0;
|
var pm = sys.process.memory_mb || 0;
|
||||||
var el = document.getElementById('d-proc-mem'); if (el) el.textContent = pm + ' MB';
|
var el = document.getElementById('d-proc-mem'); if (el) animateNumber(el, pm, 1, ' MB');
|
||||||
self.charts.proc_mem.update(pm);
|
self.charts.proc_mem.update(pm);
|
||||||
}
|
}
|
||||||
if (sys.process && sys.process.pid !== undefined) {
|
if (sys.process && sys.process.pid !== undefined) {
|
||||||
|
|||||||
Reference in New Issue
Block a user