From 24a94cf8e5bbee8049700f56888ec4dbbb4ad95a Mon Sep 17 00:00:00 2001
From: Autumn-27 <53844290+Autumn-27@users.noreply.github.com>
Date: Tue, 18 Aug 2026 13:18:32 -0400
Subject: [PATCH] =?UTF-8?q?perf:=20=E6=8E=A2=E7=B4=A2=E5=9B=BE=E5=87=8F?=
 =?UTF-8?q?=E5=B0=91=E5=8D=A1=E9=A1=BF(=E6=95=B0=E6=8D=AE=E6=9C=AA?=
 =?UTF-8?q?=E5=8F=98=E4=B8=8D=E9=87=8D=E5=BB=BA=20+=20=E5=8F=AA=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E5=8F=AF=E8=A7=81=E8=8A=82=E7=82=B9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- graph-tab:轮询按签名判重,图数据无变化时跳过 setState,避免整图重建;
  拖动不再被 20s 轮询打断
- ExplorationGraph:ReactFlow 加 onlyRenderVisibleElements,屏幕外节点不渲染
---
 .../function/tasks/detail/_tabs/graph-tab.tsx    | 16 ++++++++++++++--
 web/src/components/exploration-graph.tsx         |  1 +
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/web/src/app/(main)/function/tasks/detail/_tabs/graph-tab.tsx b/web/src/app/(main)/function/tasks/detail/_tabs/graph-tab.tsx
index 6a483d2..6240bc9 100644
--- a/web/src/app/(main)/function/tasks/detail/_tabs/graph-tab.tsx
+++ b/web/src/app/(main)/function/tasks/detail/_tabs/graph-tab.tsx
@@ -10,16 +10,28 @@ import type { Edge, TaskNode } from "@/lib/types";
 export function GraphTab({ taskId }: { taskId: string }) {
   const [nodes, setNodes] = React.useState<TaskNode[]>([]);
   const [edges, setEdges] = React.useState<Edge[]>([]);
+  // 上一次图数据的签名:轮询拿到相同数据时跳过 setState,避免整图无谓重建(拖动时
+  // 才不会被 20s 轮询打断而顿挫)。只取影响渲染的字段。
+  const sigRef = React.useRef("");
 
   React.useEffect(() => {
     let cancelled = false;
+    sigRef.current = ""; // 换任务:强制下一次刷新
     const load = () => {
       api
         .explorationGraph(taskId)
         .then((g) => {
           if (cancelled) return;
-          setNodes(g.nodes ?? []);
-          setEdges(g.edges ?? []);
+          const ns = g.nodes ?? [];
+          const es = g.edges ?? [];
+          const sig = JSON.stringify([
+            ns.map((n) => [n.id, n.type, n.state, n.priority, n.payload]),
+            es.map((e) => [e.src, e.dst, e.rel]),
+          ]);
+          if (sig === sigRef.current) return; // 无变化 → 不重建
+          sigRef.current = sig;
+          setNodes(ns);
+          setEdges(es);
         })
         .catch(() => {
           /* keep last good data */
diff --git a/web/src/components/exploration-graph.tsx b/web/src/components/exploration-graph.tsx
index 49672fa..1fccfb5 100644
--- a/web/src/components/exploration-graph.tsx
+++ b/web/src/components/exploration-graph.tsx
@@ -444,6 +444,7 @@ function ExplorationGraphInner({
         fitView
         fitViewOptions={{ padding: 0.2 }}
         proOptions={{ hideAttribution: true }}
+        onlyRenderVisibleElements
         minZoom={0.1}
         className="!bg-[#f0f2f7] dark:!bg-neutral-950"
       >