fix: 使用key强制组件在画布ID变化时重新挂载
This commit is contained in:
parent
97daaeeb36
commit
efa1234a93
@ -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)}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user