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) {
- {/* 1. Canvas Layer (Full Screen) */} -
+ {/* 1. Canvas Layer (Full Screen) - 使用 key 强制在 id 变化时重新挂载 */} +
@@ -526,8 +528,8 @@ export default function CanvasEditorPage({ params }: PageProps) { )}>
{panelMode === 'chat' ? ( - // AI 对话内容 -
+ // AI 对话内容 - 使用 key 强制在 id 变化时重新挂载 +
setIsPanelOpen(false)}