From af44476c0fbad66cfc53b7d11483d2c34b8d1bfb Mon Sep 17 00:00:00 2001
From: iven <iven_h@qq.com>
Date: Mon, 27 Apr 2026 09:58:51 +0800
Subject: [PATCH] =?UTF-8?q?perf(web):=20PluginGraphPage=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2=E6=8C=81=E7=BB=AD=20rAF=20=E5=BE=AA=E7=8E=AF=E4=B8=BA?=
 =?UTF-8?q?=E6=8C=89=E9=9C=80=E9=87=8D=E7=BB=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

移除持续 requestAnimationFrame 循环，改为数据变更 useEffect 触发
单次重绘 + ResizeObserver 监听容器变化，静态页面 CPU 占用大幅降低。
---
 apps/web/src/pages/PluginGraphPage.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/pages/PluginGraphPage.tsx b/apps/web/src/pages/PluginGraphPage.tsx
index 332518f..ffa9a7d 100644
--- a/apps/web/src/pages/PluginGraphPage.tsx
+++ b/apps/web/src/pages/PluginGraphPage.tsx
@@ -376,15 +376,22 @@ export function PluginGraphPage() {
     }
   }, [canvasSize, selectedCenter, hoverState, token]);
 
-  // ── Animation loop ──
+  // ── On-demand redraw: data changes + resize ──
 
+  // 数据变更时触发单次重绘
   useEffect(() => {
-    const animate = () => {
+    drawGraph();
+  }, [drawGraph]);
+
+  // 容器大小变化时触发重绘
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(() => {
       drawGraph();
-      animFrameRef.current = requestAnimationFrame(animate);
-    };
-    animFrameRef.current = requestAnimationFrame(animate);
-    return () => cancelAnimationFrame(animFrameRef.current);
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
   }, [drawGraph]);
 
   // ── Mouse interaction handlers ──