From 3ca001b938a6210c4cd6ad898bfacf82c765ba1e Mon Sep 17 00:00:00 2001 From: qinglong Date: Sat, 13 Jun 2026 18:19:07 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BF=9B=E5=BA=A6=E6=9D=A1=E5=B9=B3?= =?UTF-8?q?=E6=BB=91=E8=BF=87=E6=B8=A1=20=E2=80=94=20force=20reflow=20?= =?UTF-8?q?=E6=8A=80=E5=B7=A7=E7=A1=AE=E4=BF=9D=20CSS=20transition=20?= =?UTF-8?q?=E7=94=9F=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 临时关 transition → 设旧值 → offsetWidth reflow → 开 transition → 设新值 - DOM 复用: 首次 innerHTML 创建, 后续只改属性 - 进度条从旧值滑到新值, 不再闪现 Co-Authored-By: Claude --- config/permissions/pending_requests.json | 22 ++++++++++ config/plugins/commands.yaml | 2 +- config/services/network_routes.yaml | 2 +- plugins/sentinel/dashboard.html | 56 +++++++++++++++--------- 4 files changed, 59 insertions(+), 23 deletions(-) diff --git a/config/permissions/pending_requests.json b/config/permissions/pending_requests.json index 927f17e..8a1f80d 100644 --- a/config/permissions/pending_requests.json +++ b/config/permissions/pending_requests.json @@ -262,5 +262,27 @@ "framework.command.execute" ], "timestamp": 27544.2709947 + }, + "29ffcf99": { + "plugin_name": "example_plugin", + "permissions": [ + "plugin.example.read", + "plugin.example.write", + "plugin.example.execute", + "framework.event.subscribe", + "framework.command.execute" + ], + "timestamp": 27821.237625479 + }, + "bd46f35e": { + "plugin_name": "sentinel", + "permissions": [ + "plugin.sentinel.read", + "plugin.sentinel.write", + "plugin.network.access", + "framework.event.subscribe", + "framework.command.execute" + ], + "timestamp": 27821.239961313 } } \ No newline at end of file diff --git a/config/plugins/commands.yaml b/config/plugins/commands.yaml index aa51117..56bd955 100644 --- a/config/plugins/commands.yaml +++ b/config/plugins/commands.yaml @@ -101,7 +101,7 @@ commands: permissions: - framework.command.test source: internal -last_updated: 27544.226537616 +last_updated: 27821.221132094 plugin_commands: example_plugin: echo: *id001 diff --git a/config/services/network_routes.yaml b/config/services/network_routes.yaml index 8f0b473..b8d4dd2 100644 --- a/config/services/network_routes.yaml +++ b/config/services/network_routes.yaml @@ -1,5 +1,5 @@ http_port: 4200 -last_updated: 27544.261331002 +last_updated: 27821.238246209 plugin_routes: example_plugin: - methods: diff --git a/plugins/sentinel/dashboard.html b/plugins/sentinel/dashboard.html index 5b2746e..e531788 100644 --- a/plugins/sentinel/dashboard.html +++ b/plugins/sentinel/dashboard.html @@ -164,27 +164,41 @@ var oldMem = parseFloat((body.getAttribute('data-mem')||memVal)); body.setAttribute('data-cpu', cpuVal); body.setAttribute('data-mem', memVal); - body.innerHTML = - '
'+ - '
CPU
'+oldCpu.toFixed(1)+'%
'+ - '
MEM
'+oldMem.toFixed(1)+'%
'+ - '
'+ - '
'+ - '
NET ↓
'+fmtSpeed(net.rx_bytes_sec||0)+'
'+ - '
NET ↑
'+fmtSpeed(net.tx_bytes_sec||0)+'
'+ - '
'+ - '
内存 '+(mem.used_gb||0).toFixed(1)+'/'+(mem.total_gb||0).toFixed(1)+' GB
'; - // 动画计数 - var cpuEl = body.querySelector('.cpu-val'); - var memEl = body.querySelector('.mem-val'); - animateValue(cpuEl, oldCpu, cpuVal, 1, '%'); - animateValue(memEl, oldMem, memVal, 1, '%'); - // 进度条平滑过渡 (CSS transition 自动处理) - requestAnimationFrame(function(){ - var fills = body.querySelectorAll('.metric-bar-fill'); - if (fills[0]) { fills[0].style.width = cpuVal+'%'; fills[0].className = 'metric-bar-fill '+cpuBarCls; } - if (fills[1]) { fills[1].style.width = memVal+'%'; fills[1].className = 'metric-bar-fill '+memBarCls; } - }); + var isNew = !body.querySelector('.cpu-val'); + if (isNew) { + body.innerHTML = + '
'+ + '
CPU
0%
'+ + '
MEM
0%
'+ + '
'+ + '
'+ + '
NET ↓
'+ + '
NET ↑
'+ + '
'+ + '
'; + } + // 更新 NET + body.querySelector('.net-down').textContent = fmtSpeed(net.rx_bytes_sec||0); + body.querySelector('.net-up').textContent = fmtSpeed(net.tx_bytes_sec||0); + body.querySelector('.mem-detail').innerHTML = '
内存 '+(mem.used_gb||0).toFixed(1)+'/'+(mem.total_gb||0).toFixed(1)+' GB
'; + // 进度条: 先设旧值 → force reflow → 设新值 + var barCpu = body.querySelectorAll('.metric-bar-fill')[0]; + var barMem = body.querySelectorAll('.metric-bar-fill')[1]; + barCpu.style.transition = 'none'; + barMem.style.transition = 'none'; + barCpu.style.width = oldCpu+'%'; + barMem.style.width = oldMem+'%'; + barCpu.className = 'metric-bar-fill '+cpuBarCls; + barMem.className = 'metric-bar-fill '+memBarCls; + barCpu.offsetWidth; // force reflow + barMem.offsetWidth; + barCpu.style.transition = ''; + barMem.style.transition = ''; + barCpu.style.width = cpuVal+'%'; + barMem.style.width = memVal+'%'; + // 数字跳动 + animateValue(body.querySelector('.cpu-val'), oldCpu, cpuVal, 1, '%'); + animateValue(body.querySelector('.mem-val'), oldMem, memVal, 1, '%'); } else { body.innerHTML = '
'+(n.error||'离线')+'
'; }