From d0b54faf1b93159d097c884ff0faf83eeca88b2e Mon Sep 17 00:00:00 2001
From: huangmin <2927933426@qq.com>
Date: Fri, 5 Jun 2026 16:57:09 +0800
Subject: [PATCH] =?UTF-8?q?refactor(canvas):=20=E7=A7=BB=E9=99=A4=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=86=85=E8=81=94=E7=9A=84AnnotationModal=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=85=B6=E8=8A=82=E7=82=B9=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  从CanvasPage中移除直接渲染的AnnotationModal组件
2.  为AnnotationModal添加nodes空值兜底，防止空数组报错
3.  新增卸载时自动关闭弹窗的清理effect
---
 src/app/canvas/page.tsx            | 2 --
 src/components/AnnotationModal.tsx | 8 +++++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/canvas/page.tsx b/src/app/canvas/page.tsx
index 60d94ac6..b08cebf1 100644
--- a/src/app/canvas/page.tsx
+++ b/src/app/canvas/page.tsx
@@ -5,7 +5,6 @@ import { ReactFlowProvider } from "@xyflow/react";
 import { Header } from "@/components/Header";
 import { WorkflowCanvas } from "@/components/WorkflowCanvas";
 import { FloatingActionBar } from "@/components/FloatingActionBar";
-import { AnnotationModal } from "@/components/AnnotationModal";
 import { PopiaiEmbedBridge } from "@/components/PopiaiEmbedBridge";
 import { useWorkflowStore } from "@/store/workflowStore";
 import { FTUXModal } from "@/components/onboarding/FTUXModal";
@@ -82,7 +81,6 @@ function CanvasPageContent() {
         <Header />
         <WorkflowCanvas />
         <FloatingActionBar />
-        <AnnotationModal />
         <PopiaiEmbedBridge />
         {showFTUX && (
           <FTUXModal
diff --git a/src/components/AnnotationModal.tsx b/src/components/AnnotationModal.tsx
index a378183d..8f4ab091 100644
--- a/src/components/AnnotationModal.tsx
+++ b/src/components/AnnotationModal.tsx
@@ -99,7 +99,7 @@ export function AnnotationModal() {
   } = useAnnotationStore();
 
   const updateNodeData = useWorkflowStore((state) => state.updateNodeData);
-  const nodes = useWorkflowStore((state) => state.nodes);
+  const nodes = useWorkflowStore((state) => state.nodes ?? []);
   const nodeDisplaySize = useMemo(() => {
     const sourceNode = sourceNodeId ? nodes.find((node) => node.id === sourceNodeId) : null;
     const nodeType = sourceNode?.type as NodeType | undefined;
@@ -135,6 +135,12 @@ export function AnnotationModal() {
   const textInputCreatedAt = useRef<number>(0);
   const containerRef = useRef<HTMLDivElement>(null);
 
+  useEffect(() => {
+    return () => {
+      closeModal();
+    };
+  }, [closeModal]);
+
   useEffect(() => {
     let cancelled = false;
     let revokeImageSource: (() => void) | undefined;