From efa1234a9356d75ffd563a1c228abb15da99ae80 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sun, 1 Feb 2026 19:48:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8key=E5=BC=BA=E5=88=B6?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E5=9C=A8=E7=94=BB=E5=B8=83ID=E5=8F=98?=
 =?UTF-8?q?=E5=8C=96=E6=97=B6=E9=87=8D=E6=96=B0=E6=8C=82=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/canvas/[id]/page.tsx | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/app/canvas/[id]/page.tsx b/app/canvas/[id]/page.tsx
index 2d5bc0e..081ad5e 100644
--- a/app/canvas/[id]/page.tsx
+++ b/app/canvas/[id]/page.tsx
@@ -133,35 +133,37 @@ export default function CanvasEditorPage({ params }: PageProps) {
 
   // 加载画布数据
   useEffect(() => {
+    console.log('[Canvas] Loading project:', id);
+    
     const loadProject = async () => {
       setIsLoading(true);
       
       // 🆕 先清空当前画布状态，确保切换时不会显示旧数据
-      clearCanvas();
+      useCanvasStore.getState().clearCanvas();
       
       const result = await canvasService.getProject(id);
       
       if (result.success && result.data) {
-        setProject(id, result.data.title);
+        useCanvasStore.getState().setProject(id, result.data.title);
         if (result.data.canvasData) {
-          loadCanvas(result.data.canvasData);
+          useCanvasStore.getState().loadCanvas(result.data.canvasData);
         }
       } else {
         // 画布不存在时，创建一个新画布
-        console.log('画布不存在，创建新画布:', id);
-        setProject(id, '未命名画布');
+        console.log('[Canvas] 画布不存在，创建新画布:', id);
+        useCanvasStore.getState().setProject(id, '未命名画布');
         // 保存新画布到数据库
         try {
           await canvasService.saveCanvasState(id, { nodes: [], connections: [] });
         } catch (error) {
-          console.error('创建新画布失败:', error);
+          console.error('[Canvas] 创建新画布失败:', error);
         }
       }
       setIsLoading(false);
     };
     
     loadProject();
-  }, [id, clearCanvas, setProject, loadCanvas]);
+  }, [id]); // 只依赖 id，使用 getState() 直接调用 store actions
 
   // 自动保存逻辑
   useEffect(() => {
@@ -442,8 +444,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
     <TooltipProvider>
       <div className="relative h-dvh w-full overflow-hidden bg-background">
         
-        {/* 1. Canvas Layer (Full Screen) */}
-        <div className="absolute inset-0 z-0">
+        {/* 1. Canvas Layer (Full Screen) - 使用 key 强制在 id 变化时重新挂载 */}
+        <div className="absolute inset-0 z-0" key={`workspace-${id}`}>
            <CanvasWorkspace />
         </div>
 
@@ -526,8 +528,8 @@ export default function CanvasEditorPage({ params }: PageProps) {
         )}>
             <div className="h-full w-full rounded-2xl border bg-background/95 backdrop-blur-md shadow-2xl overflow-hidden flex flex-col">
               {panelMode === 'chat' ? (
-                // AI 对话内容
-                <div className="flex-1 overflow-hidden">
+                // AI 对话内容 - 使用 key 强制在 id 变化时重新挂载
+                <div className="flex-1 overflow-hidden" key={`chat-${id}`}>
                   <CanvasChatPanel 
                     chatId={`canvas-${id}`} 
                     onClose={() => setIsPanelOpen(false)}