perf(schedule): 减少重渲染与冗余动画

- useCanvasNodeDrag.moveDrag 改 ref 直改 DOM,松手才写 store,避免拖拽期间反复重渲染 SchedulePage
- runs 轮询改 setTimeout 链式 + 移除 runs 依赖,避免每 1.5s 重建 interval
- SchedulePage 拆 PositionDraftBadge / RunNowButton,删除冗余的 runs/runsLoading/positionDraftCount 订阅
- 拆 ScheduleEdge 组件 + React.memo + useMemo,切换 edge 选中时不再重算所有 edgePath
- 删除 schedule.css 中引用未定义 keyframes 的 modal-in/spin 死动画
- 删除 .schedule-edge-line transition、.schedule-run-result-backdrop backdrop-filter;补 .artifact-card transition

Refs: kaneo #19-#24

frontend/app/features/schedules/SchedulePage.tsx

@@ -1,6 +1,7 @@
 import {
   type DragEvent,
   type FormEvent,
+  memo,
   type MouseEvent as ReactMouseEvent,
   useEffect,
   useMemo,
@@ -51,6 +52,113 @@ const NODE_WIDTH = 218;
 const NODE_HEIGHT = 104;
 const ARTIFACT_MIME = "application/x-model-platform-version";
 
+/**
+ * 顶部状态文案里 “N 个节点位置待保存” 那段抽出来,
+ * 让它独立订阅 positionDraftCount,避免每次 setPositionDraftCount 都让
+ * SchedulePage 整树重渲染。
+ */
+function PositionDraftBadge() {
+  const count = useSchedulesStore((s) => s.positionDraftCount);
+  if (count <= 0) return null;
+  return <> · {count} 个节点位置待保存</>;
+}
+
+/**
+ * “立即运行” 按钮的 disabled / title 都依赖 positionDraftCount,
+ * 抽成子组件独立订阅该字段。
+ */
+function RunNowButton({
+  schedule,
+  busy,
+}: {
+  schedule: import("../../services/api").Schedule | null;
+  busy: string | null | undefined;
+}) {
+  const positionDraftCount = useSchedulesStore((s) => s.positionDraftCount);
+  return (
+    <button
+      className="schedule-action--run"
+      type="button"
+      disabled={
+        !schedule
+        || Boolean(busy)
+        || !schedule.dag_validation.valid
+        || schedule.nodes.length === 0
+      }
+      title={
+        positionDraftCount > 0
+          ? "请先保存节点位置"
+          : "立即执行当前已保存的稳定版本 DAG"
+      }
+      onClick={() => useSchedulesStore.getState().runNow()}
+    >
+      <Icon name="play" size={14} />立即运行
+    </button>
+  );
+}
+
+/**
+ * 把右键菜单打开逻辑提到模块级,使 ScheduleEdge 这类 memo 化的子组件
+ * 也能直接调用,避免通过 props 传入每渲染都新建的箭头函数。
+ */
+function openScheduleContextMenu(
+  event: ReactMouseEvent<HTMLElement | SVGElement>,
+  target: ScheduleContextMenuTarget,
+): void {
+  event.preventDefault();
+  event.stopPropagation();
+  const menuWidth = 176;
+  const menuHeight = target.kind === "schedule" ? 132 : 48;
+  useSchedulesStore.getState().setContextMenu({
+    ...target,
+    x: Math.min(event.clientX, window.innerWidth - menuWidth - 8),
+    y: Math.min(event.clientY, window.innerHeight - menuHeight - 8),
+  } as ScheduleContextMenu);
+}
+
+/**
+ * 单条调度连线。React.memo 包裹后,selectedEdgeId / nodes 引用未变就不
+ * 重渲染,避免切换选中状态时所有边重算 edgePath。
+ */
+const ScheduleEdge = memo(function ScheduleEdge({
+  edge,
+  nodes,
+  selectedEdgeId,
+}: {
+  edge: ScheduleEdge;
+  nodes: ScheduleNode[];
+  selectedEdgeId: string | null;
+}) {
+  const path = useMemo(() => {
+    const source = nodes.find((node) => node.node_id === edge.source_node_id);
+    const target = nodes.find((node) => node.node_id === edge.target_node_id);
+    if (!source || !target) return null;
+    return edgePath(source, target);
+  }, [nodes, edge.source_node_id, edge.target_node_id]);
+  if (!path) return null;
+  return (
+    <g
+      className={selectedEdgeId === edge.edge_id ? "is-selected" : ""}
+      onClick={(event) => {
+        event.stopPropagation();
+        useSchedulesStore.getState().setSelectedEdgeId(edge.edge_id);
+        useSchedulesStore.getState().setSelectedNodeId(null);
+      }}
+      onContextMenu={(event) => openScheduleContextMenu(event, {
+        kind: "edge",
+        edge,
+      })}
+    >
+      <path className="schedule-edge-hit" d={path} />
+      <path
+        className="schedule-edge-line"
+        d={path}
+        markerEnd="url(#schedule-arrow)"
+      />
+    </g>
+  );
+});
+
 export default function SchedulePage({
   onNotify,
   onConnectionChange,
@@ -89,19 +197,15 @@ export default function SchedulePage({
   const newScheduleName = useSchedulesStore((s) => s.newScheduleName);
   const setNewScheduleName = useSchedulesStore((s) => s.setNewScheduleName);
   const contextMenu = useSchedulesStore((s) => s.contextMenu);
-  const setContextMenu = useSchedulesStore((s) => s.setContextMenu);
   const scheduleForm = useSchedulesStore((s) => s.scheduleForm);
   const setScheduleForm = useSchedulesStore((s) => s.setScheduleForm);
   const nodeForm = useSchedulesStore((s) => s.nodeForm);
   const setNodeForm = useSchedulesStore((s) => s.setNodeForm);
   const cronResult = useSchedulesStore((s) => s.cronResult);
   const setCronResult = useSchedulesStore((s) => s.setCronResult);
-  const runs = useSchedulesStore((s) => s.runs);
   const setRuns = useSchedulesStore((s) => s.setRuns);
-  const runsLoading = useSchedulesStore((s) => s.runsLoading);
   const setRunsLoading = useSchedulesStore((s) => s.setRunsLoading);
   const canvasRef = useRef<HTMLDivElement | null>(null);
-   const positionDraftCount = useSchedulesStore((state) => state.positionDraftCount);
 
   const selectedNode = schedule?.nodes.find(
     (item) => item.node_id === selectedNodeId,
@@ -120,21 +224,6 @@ export default function SchedulePage({
 
   useContextMenuDismiss();
 
-  const openContextMenu = (
-    event: ReactMouseEvent<HTMLElement | SVGElement>,
-    target: ScheduleContextMenuTarget,
-  ): void => {
-    event.preventDefault();
-    event.stopPropagation();
-    const menuWidth = 176;
-    const menuHeight = target.kind === "schedule" ? 132 : 48;
-    setContextMenu({
-      ...target,
-      x: Math.min(event.clientX, window.innerWidth - menuWidth - 8),
-      y: Math.min(event.clientY, window.innerHeight - menuHeight - 8),
-    } as ScheduleContextMenu);
-  };
-
  useEffect(() => {
     if (!workspaceId || !api) return;
     setSchedules([]);
@@ -161,18 +250,29 @@ export default function SchedulePage({
   useEffect(() => {
     const scheduleId = schedule?.schedule_id;
     if (!scheduleId || !api) return;
-    const hasActiveRun = runs.some(
-      (item) => item.run_status === "queued" || item.run_status === "running",
-    );
-    const isEnabledCron = schedule.trigger_type === "cron" && schedule.enabled;
-    // Cron 会由后端在未来某个整分钟创建新记录。即使当前没有运行中的
-    // 记录，也要持续刷新，才能让新一轮运行自动出现在右侧列表中。
-    if (!hasActiveRun && !isEnabledCron) return;
-    const timer = window.setInterval(() => {
+    let timer: number | undefined;
+    let cancelled = false;
+    const tick = (): void => {
+      if (cancelled) return;
       void useSchedulesStore.getState().refreshRuns(scheduleId);
-    }, hasActiveRun ? 1500 : 3000);
-    return () => window.clearInterval(timer);
-  }, [schedule?.schedule_id, schedule?.trigger_type, schedule?.enabled, runs, api]);
+      // 每次 tick 重新读最新 runs,不再把 runs 放进依赖数组,避免每次 setRuns
+      // 都触发 effect cleanup + 重建 setInterval。
+      const runs = useSchedulesStore.getState().runs;
+      const hasActiveRun = runs.some(
+        (item) => item.run_status === "queued" || item.run_status === "running",
+      );
+      const isEnabledCron = schedule.trigger_type === "cron" && schedule.enabled;
+      // Cron 会由后端在未来某个整分钟创建新记录。即使当前没有运行中的
+      // 记录，也要持续刷新，才能让新一轮运行自动出现在右侧列表中。
+      if (!hasActiveRun && !isEnabledCron) return;
+      timer = window.setTimeout(tick, hasActiveRun ? 1500 : 3000);
+    };
+    tick();
+    return () => {
+      cancelled = true;
+      if (timer !== undefined) window.clearTimeout(timer);
+    };
+  }, [schedule?.schedule_id, schedule?.trigger_type, schedule?.enabled, api]);
 
   // Form submit wrapper for create-schedule modal — keeps the FormEvent flow out of JSX.
   const handleCreateScheduleSubmit = (event: FormEvent<HTMLFormElement>): void => {
@@ -220,12 +320,9 @@ export default function SchedulePage({
           <strong>图形化调度</strong>
           <span>
             {schedule
-              ? `版本 ${schedule.workflow_version} · ${schedule.dag_validation.valid ? "DAG 有效" : "待校验"}${
-                  positionDraftCount > 0
-                    ? ` · ${positionDraftCount} 个节点位置待保存`
-                    : ""
-                }`
+              ? `版本 ${schedule.workflow_version} · ${schedule.dag_validation.valid ? "DAG 有效" : "待校验"}`
               : "创建调度后开始编排"}
+            <PositionDraftBadge />
           </span>
         </div>
         <div className="schedule-toolbar__actions">
@@ -247,24 +344,7 @@ export default function SchedulePage({
           >
             校验 DAG
           </button>
-          <button
-            className="schedule-action--run"
-            type="button"
-            disabled={
-              !schedule
-              || Boolean(busy)
-              || !schedule.dag_validation.valid
-              || schedule.nodes.length === 0
-            }
-            title={
-              positionDraftCount > 0
-                ? "请先保存节点位置"
-                : "立即执行当前已保存的稳定版本 DAG"
-            }
-            onClick={() => useSchedulesStore.getState().runNow()}
-          >
-            <Icon name="play" size={14} />立即运行
-          </button>
+          <RunNowButton schedule={schedule} busy={busy} />
           <button
             className="schedule-action--danger"
             type="button"
@@ -284,7 +364,7 @@ export default function SchedulePage({
             keyword={scheduleKeyword}
             loading={loading}
             onSelect={(id) => useSchedulesStore.getState().chooseSchedule(id)}
-            onContextMenu={(event, item) => openContextMenu(event as ReactMouseEvent<HTMLElement | SVGElement>, item ? { kind: "schedule", schedule: item } : { kind: "schedule-list" })}
+            onContextMenu={(event, item) => openScheduleContextMenu(event as ReactMouseEvent<HTMLElement | SVGElement>, item ? { kind: "schedule", schedule: item } : { kind: "schedule-list" })}
             onKeywordChange={setScheduleKeyword}
           />
           <ArtifactList
@@ -292,7 +372,7 @@ export default function SchedulePage({
             keyword={artifactKeyword}
             onDrop={(artifact, x, y) => void useSchedulesStore.getState().addArtifactAt(artifact, x, y)}
             onDoubleClick={(artifact) => void useSchedulesStore.getState().addArtifactAt(artifact, 90 + (schedule?.nodes.length ?? 0) * 245, 130)}
-            onContextMenu={(event, artifact) => openContextMenu(event as ReactMouseEvent<HTMLElement | SVGElement>, { kind: "artifact", artifact })}
+            onContextMenu={(event, artifact) => openScheduleContextMenu(event as ReactMouseEvent<HTMLElement | SVGElement>, { kind: "artifact", artifact })}
             onKeywordChange={setArtifactKeyword}
           />
         </aside>
@@ -344,38 +424,14 @@ export default function SchedulePage({
                       <path d="M0,0 L8,4 L0,8 Z" fill="#4e92db" />
                     </marker>
                   </defs>
-                  {schedule.edges.map((edge) => {
-                    const source = schedule.nodes.find(
-                      (node) => node.node_id === edge.source_node_id,
-                    );
-                    const target = schedule.nodes.find(
-                      (node) => node.node_id === edge.target_node_id,
-                    );
-                    if (!source || !target) return null;
-                    const path = edgePath(source, target);
-                    return (
-                      <g
-                        className={selectedEdgeId === edge.edge_id ? "is-selected" : ""}
-                        key={edge.edge_id}
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          setSelectedEdgeId(edge.edge_id);
-                          setSelectedNodeId(null);
-                        }}
-                        onContextMenu={(event) => openContextMenu(event, {
-                          kind: "edge",
-                          edge,
-                        })}
-                      >
-                        <path className="schedule-edge-hit" d={path} />
-                        <path
-                          className="schedule-edge-line"
-                          d={path}
-                          markerEnd="url(#schedule-arrow)"
-                        />
-                      </g>
-                    );
-                  })}
+                  {schedule.edges.map((edge) => (
+                    <ScheduleEdge
+                      key={edge.edge_id}
+                      edge={edge}
+                      nodes={schedule.nodes}
+                      selectedEdgeId={selectedEdgeId}
+                    />
+                  ))}
                 </svg>
               )}
 
@@ -395,7 +451,7 @@ export default function SchedulePage({
                   onPointerMove={moveDrag}
                   onPointerUp={finishDrag}
                   onPointerCancel={finishDrag}
-                  onContextMenu={(event) => openContextMenu(event, {
+                  onContextMenu={(event) => openScheduleContextMenu(event, {
                     kind: "node",
                     node,
                   })}
@@ -515,9 +571,7 @@ export default function SchedulePage({
             )}
           </div>
           <RunHistory
-            runs={runs}
             nodes={schedule?.nodes ?? []}
-            loading={runsLoading}
             disabled={!schedule || Boolean(busy)}
             onRefresh={() => {
               if (schedule) void useSchedulesStore.getState().refreshRuns(schedule.schedule_id, true);