fix: 使用key强制组件在画布ID变化时重新挂载
Some checks failed
Lint / build (20) (push) Has been cancelled
Playwright Tests / test (push) Has been cancelled

This commit is contained in:
Your Name 2026-02-01 19:48:55 +08:00
parent 97daaeeb36
commit efa1234a93

View File

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