From dca252434b3e776f541a5f2d77b526ac712d0479 Mon Sep 17 00:00:00 2001
From: Danborad <danborad@github.com>
Date: Tue, 1 Sep 2026 11:16:42 +0800
Subject: [PATCH] =?UTF-8?q?fix(canvas):=20=E7=94=BB=E5=B8=83=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E4=B8=8E=E4=BA=91=E7=AB=AF=E5=90=8C=E6=AD=A5=20-=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A7=A3=E5=8E=8B=E5=AA=92=E4=BD=93=E7=9B=B4?=
 =?UTF-8?q?=E4=BC=A0=E5=AF=B9=E8=B1=A1=E5=AD=98=E5=82=A8=E4=B8=8E=E6=9C=AC?=
 =?UTF-8?q?=E5=9C=B0=E7=BC=93=E5=AD=98=E8=87=AA=E6=84=88=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=B0=81=E9=9D=A2=E5=AE=9E=E6=97=B6=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E8=BF=9B=E5=BA=A6=E4=B8=8E=E9=98=B2=E8=AF=AF=E5=85=B3=E6=8F=90?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/cached-resource-image.tsx  |  78 +++++--
 .../components/canvas/canvas-project-card.tsx |  73 +++++--
 web/src/pages/canvas/index.tsx                | 204 ++++++++++++------
 web/src/services/user-data-sync.ts            | 159 +++++++++++---
 web/src/stores/use-sync-progress-store.ts     |  68 ++++++
 5 files changed, 458 insertions(+), 124 deletions(-)
 create mode 100644 web/src/stores/use-sync-progress-store.ts

diff --git a/web/src/components/cached-resource-image.tsx b/web/src/components/cached-resource-image.tsx
index efda66929..fe0213322 100644
--- a/web/src/components/cached-resource-image.tsx
+++ b/web/src/components/cached-resource-image.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState, type ImgHTMLAttributes, type ReactNode } f
 
 import { resourceIdFromStorageKey } from "@/services/api/resources";
 import { cacheResourceObjectUrl } from "@/services/resource-blob-cache";
+import { resolveImageUrl } from "@/services/image-storage";
 
 type CachedResourceImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {
     storageKey?: string;
@@ -12,10 +13,11 @@ type CachedResourceImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, "src">
 
 /**
  * 资源图片优先读取按用户隔离的本地 Blob 缓存，避免刷新后再次从对象存储下载。
- * 普通外链、data URL 和本地 Blob URL 不经过资源缓存，保持原有行为。
+ * 本地 image: 类型的 storageKey 也会自动从 LocalForage 恢复有效的 Object URL。
  */
 export function CachedResourceImage({ storageKey, src = "", fallback = null, eager = false, onError, ...props }: CachedResourceImageProps) {
     const remoteResource = Boolean(resourceIdFromStorageKey(storageKey));
+    const localImageResource = Boolean(storageKey && storageKey.startsWith("image:"));
     const targetRef = useRef<HTMLSpanElement>(null);
     const [nearViewport, setNearViewport] = useState(eager || !remoteResource);
     const [cachedSrc, setCachedSrc] = useState(remoteResource ? "" : src);
@@ -44,32 +46,64 @@ export function CachedResourceImage({ storageKey, src = "", fallback = null, eag
     useEffect(() => {
         let cancelled = false;
         setCacheFailed(false);
-        if (!remoteResource || !storageKey) {
-            setCachedSrc(src);
-            return () => { cancelled = true; };
-        }
-        if (!nearViewport) {
-            setCachedSrc("");
-            return () => { cancelled = true; };
-        }
 
-        setCachedSrc("");
-        const resolve = cacheResourceObjectUrl(storageKey);
-        void resolve.then((url) => {
-            if (!cancelled) setCachedSrc(url || src);
-        }).catch(() => {
-            if (!cancelled) {
-                setCacheFailed(true);
-                setCachedSrc(src);
+        if (remoteResource && storageKey) {
+            if (!nearViewport) {
+                setCachedSrc("");
+                return () => { cancelled = true; };
             }
-        });
-        return () => { cancelled = true; };
-    }, [nearViewport, remoteResource, src, storageKey]);
+            setCachedSrc("");
+            const resolve = cacheResourceObjectUrl(storageKey);
+            void resolve.then((url) => {
+                if (!cancelled) setCachedSrc(url || src);
+            }).catch(() => {
+                if (!cancelled) {
+                    setCacheFailed(true);
+                    setCachedSrc(src);
+                }
+            });
+            return () => { cancelled = true; };
+        }
 
-    if (!remoteResource) return <img {...props} src={cachedSrc} onError={onError} />;
+        if (localImageResource && storageKey) {
+            void resolveImageUrl(storageKey, src).then((url) => {
+                if (!cancelled) setCachedSrc(url || src);
+            }).catch(() => {
+                if (!cancelled) setCachedSrc(src);
+            });
+            return () => { cancelled = true; };
+        }
+
+        setCachedSrc(src);
+        return () => { cancelled = true; };
+    }, [localImageResource, nearViewport, remoteResource, src, storageKey]);
+
+    const handleImgError = (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
+        if (localImageResource && storageKey && cachedSrc.startsWith("blob:")) {
+            void resolveImageUrl(storageKey).then((url) => {
+                if (url && url !== cachedSrc) {
+                    setCachedSrc(url);
+                    return;
+                }
+                setCacheFailed(true);
+                onError?.(e);
+            }).catch(() => {
+                setCacheFailed(true);
+                onError?.(e);
+            });
+            return;
+        }
+        setCacheFailed(true);
+        onError?.(e);
+    };
+
+    if (!remoteResource) {
+        if (cacheFailed && fallback) return <>{fallback}</>;
+        return <img {...props} src={cachedSrc} onError={handleImgError} />;
+    }
     return (
         <span ref={targetRef} className="cached-resource-image-shell">
-            {cachedSrc && !(cacheFailed && !src) ? <img {...props} src={cachedSrc} onError={onError} /> : fallback}
+            {cachedSrc && !(cacheFailed && !src) ? <img {...props} src={cachedSrc} onError={handleImgError} /> : fallback}
         </span>
     );
 }
diff --git a/web/src/components/canvas/canvas-project-card.tsx b/web/src/components/canvas/canvas-project-card.tsx
index 87a70d28a..df63add13 100644
--- a/web/src/components/canvas/canvas-project-card.tsx
+++ b/web/src/components/canvas/canvas-project-card.tsx
@@ -1,4 +1,4 @@
-import { Check, Clapperboard, Download, FileText, Frame, Image as ImageIcon, MoreHorizontal, Music2, Pencil, Plus, Settings2, Sparkles, Trash2, Video, X } from "lucide-react";
+import { Check, Clapperboard, CloudUpload, Download, FileText, Frame, Image as ImageIcon, MoreHorizontal, Music2, Pencil, Plus, Settings2, Sparkles, Trash2, Video, X } from "lucide-react";
 import type { ReactNode } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { Dropdown, Input } from "antd";
@@ -11,6 +11,7 @@ import { resourceFileUrl, resourceIdFromStorageKey } from "@/services/api/resour
 import { resolveBackendApiUrl } from "@/stores/use-config-store";
 import { CachedResourceImage } from "@/components/cached-resource-image";
 import { cn } from "@/lib/utils";
+import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
 
 export function CanvasCreateCard({ disabled, onClick }: { disabled?: boolean; onClick: () => void }) {
     return <button type="button" className="app-canvas-create-card" disabled={disabled} onClick={onClick}>
@@ -106,33 +107,31 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
 }
 
 export function ProjectPreview({ project, preferLatestImage = false }: { project: CanvasProject; preferLatestImage?: boolean }) {
+    const syncProgress = useSyncProgressStore((state) => state.syncingProjects[project.id]);
+    const isSyncing = Boolean(syncProgress && (syncProgress.phase === "uploading" || syncProgress.phase === "saving"));
     const mediaNodes = project.nodes
         .flatMap((node) => {
             if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) return [];
             const url = getNodeMediaUrl(node);
-            return isPreviewUrl(url) ? [{ node, url, storageKey: node.metadata?.storageKey }] : [];
+            const storageKey = node.metadata?.storageKey;
+            return isPreviewUrl(url) || Boolean(storageKey) ? [{ node, url, storageKey }] : [];
         });
     const imageNodes = mediaNodes.filter(({ node }) => node.type === CanvasNodeType.Image);
     const media = preferLatestImage
         ? imageNodes[imageNodes.length - 1] || mediaNodes[mediaNodes.length - 1]
         : imageNodes[0] || mediaNodes[0];
-    if (media) {
-        const { node, url, storageKey } = media;
-        return (
-            <div className="canvas-project-media size-full">
-                {node.type === CanvasNodeType.Video
-                    ? <div className="canvas-project-video size-full"><Video className="size-8" aria-label={node.title || "项目视频"} /></div>
-                    : <CachedResourceImage storageKey={storageKey} src={url} alt={node.title || "项目图片"} loading="lazy" decoding="async" className="size-full min-h-0 object-cover" />}
-            </div>
-        );
-    }
-    const nodes = project.nodes.slice(0, 8);
-    if (!nodes.length) return <div className="canvas-project-empty size-full"><Plus className="canvas-project-empty-icon" /><span>空白画布</span><small>等待第一幕</small></div>;
-    const previewNodes = buildNodePreviewLayout(nodes);
 
-    return (
+    const content = media ? (
+        <div className="canvas-project-media size-full">
+            {media.node.type === CanvasNodeType.Video
+                ? <div className="canvas-project-video size-full"><Video className="size-8" aria-label={media.node.title || "项目视频"} /></div>
+                : <CachedResourceImage storageKey={media.storageKey} src={media.url} alt={media.node.title || "项目图片"} loading="lazy" decoding="async" className="size-full min-h-0 object-cover" />}
+        </div>
+    ) : !project.nodes.length ? (
+        <div className="canvas-project-empty size-full"><Plus className="canvas-project-empty-icon" /><span>空白画布</span><small>等待第一幕</small></div>
+    ) : (
         <div className="canvas-project-preview-canvas relative size-full overflow-hidden">
-            {previewNodes.map(({ node, style }) => {
+            {buildNodePreviewLayout(project.nodes.slice(0, 8)).map(({ node, style }) => {
                 const presentation = getNodePresentation(node);
                 return (
                     <span key={node.id} className="canvas-project-preview-node absolute flex min-w-0 items-center gap-1.5 overflow-hidden" style={style}>
@@ -143,6 +142,46 @@ export function ProjectPreview({ project, preferLatestImage = false }: { project
             })}
         </div>
     );
+
+    return (
+        <div className="relative size-full overflow-hidden">
+            {content}
+            {isSyncing && syncProgress ? (
+                <div
+                    className="absolute inset-0 z-20 flex flex-col items-center justify-center gap-2 bg-stone-950/75 p-3 text-center backdrop-blur-sm transition-all duration-300 pointer-events-none select-none"
+                    onClick={(e) => e.stopPropagation()}
+                >
+                    <div className="flex items-center gap-1.5 text-amber-400">
+                        <CloudUpload className="size-4 animate-bounce" />
+                        <span className="text-xs font-medium tracking-wide">云端同步中</span>
+                    </div>
+                    <div className="w-full max-w-[150px] space-y-1">
+                        {syncProgress.total > 0 ? (
+                            <>
+                                <div className="flex items-center justify-between text-[10px] text-white/80">
+                                    <span>媒体上传</span>
+                                    <span className="font-mono text-amber-300">
+                                        {syncProgress.completed}/{syncProgress.total}
+                                    </span>
+                                </div>
+                                <div className="h-1 w-full overflow-hidden rounded-full bg-white/20">
+                                    <div
+                                        className="h-full bg-gradient-to-r from-amber-400 to-orange-400 transition-all duration-200"
+                                        style={{
+                                            width: `${Math.max(8, Math.round((syncProgress.completed / syncProgress.total) * 100))}%`,
+                                        }}
+                                    />
+                                </div>
+                            </>
+                        ) : (
+                            <div className="text-[10px] text-white/80">正在写入云端结构...</div>
+                        )}
+                        <div className="text-[9px] text-white/60">请勿关闭或刷新浏览器</div>
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    );
 }
 
 function getNodeMediaUrl(node: CanvasNodeData) {
diff --git a/web/src/pages/canvas/index.tsx b/web/src/pages/canvas/index.tsx
index b08a1ea1a..687f7fe70 100644
--- a/web/src/pages/canvas/index.tsx
+++ b/web/src/pages/canvas/index.tsx
@@ -13,12 +13,17 @@ import { setImageBlob } from "@/services/image-storage";
 import { CanvasCreateCard } from "@/components/canvas/canvas-project-card";
 import { CanvasFolderCard } from "@/components/canvas/canvas-folder-card";
 import type { CanvasExportFile } from "@/types/canvas-export";
-import { useCanvasStore } from "@/stores/canvas/use-canvas-store";
+import type { CanvasNodeData } from "@/types/canvas";
+import { flushCanvasStorePersistence, useCanvasStore } from "@/stores/canvas/use-canvas-store";
 import { useCanvasUiStore } from "@/stores/canvas/use-canvas-ui-store";
 import { exportCanvasProjects } from "@/lib/canvas/canvas-export";
 import { saveCanvasDrawing, type CanvasDrawingRenderDraft } from "@/lib/canvas/canvas-drawing-storage";
 import { createCanvasProjectWithRemoteSync, saveRemoteUserDataNow } from "@/services/user-data-sync";
 import { listProjects } from "@/services/api/projects";
+import { resourceFileUrl, resourceStorageKey, uploadResourceFile } from "@/services/api/resources";
+import { primeResourceBlobCache } from "@/services/resource-blob-cache";
+import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
+import { upsertRemoteCanvasProject } from "@/services/api/user-data";
 
 export default function CanvasPage() {
     const { message } = App.useApp();
@@ -101,72 +106,149 @@ export default function CanvasPage() {
     };
     const importCanvas = async (file?: File) => {
         if (!file) return;
+        const hideLoading = message.loading({ content: "正在解压并准备导入画布...", duration: 0 });
         try {
             const zip = await readZip(file);
             const projectFile = zip.get("projects.json");
-            if (!projectFile) throw new Error("missing projects.json");
+            if (!projectFile) throw new Error("缺少 projects.json 元数据文件");
             const data = JSON.parse(await projectFile.text()) as CanvasExportFile;
-            await Promise.all(
-                data.projects.flatMap((project) =>
-                    project.files.map(async (item) => {
-                        const blob = zip.get(item.path);
-                        if (!blob) return;
-                        const typedBlob = blob.type ? blob : blob.slice(0, blob.size, item.mimeType);
-                        await (item.storageKey.startsWith("image:") ? setImageBlob(item.storageKey, typedBlob) : setMediaBlob(item.storageKey, typedBlob));
-                    }),
-                ),
-            );
-            await Promise.all(
-                data.projects.map(async (item) => {
-                    const drawingEngineById = new Map((item.drawingDocuments || []).map((document) => [document.drawingId, document.engine || "tldraw"]));
-                    const importedProjectId = importProject({
-                        ...item.project,
-                        nodes: item.project.nodes.map((node) =>
-                            node.type === "drawing" && node.metadata?.drawingId ? { ...node, metadata: { ...node.metadata, drawingEngine: drawingEngineById.get(node.metadata.drawingId) || node.metadata.drawingEngine || "tldraw" } } : node,
-                        ),
+            hideLoading();
+
+            for (const item of data.projects) {
+                const totalFiles = item.files.length;
+                const importedProjectId = importProject({
+                    ...item.project,
+                    title: item.project.title || "导入画布",
+                    nodes: item.project.nodes || [],
+                });
+
+                if (totalFiles > 0) {
+                    useSyncProgressStore.getState().setProjectProgress(importedProjectId, {
+                        projectId: importedProjectId,
+                        total: totalFiles,
+                        completed: 0,
+                        phase: "uploading",
+                        message: "正在上传媒体至云端",
                     });
-                    await Promise.all(
-                        (item.drawingDocuments || []).map((document) => {
-                            const previewFile = document.previewPath ? zip.get(document.previewPath) : undefined;
-                            const preview = previewFile && !previewFile.type ? previewFile.slice(0, previewFile.size, "image/png") : previewFile;
-                            const renderFile = document.generationRender?.path ? zip.get(document.generationRender.path) : undefined;
-                            const renderBlob = renderFile && !renderFile.type ? renderFile.slice(0, renderFile.size, document.generationRender?.mimeType || "image/png") : renderFile;
-                            const render =
-                                renderBlob && document.generationRender
-                                    ? ({
-                                          blob: renderBlob,
-                                          pageId: document.generationRender.pageId,
-                                          width: document.generationRender.width,
-                                          height: document.generationRender.height,
-                                          mimeType: document.generationRender.mimeType,
-                                          background: document.generationRender.background,
-                                      } satisfies CanvasDrawingRenderDraft)
-                                    : undefined;
-                            const engine = document.engine || "tldraw";
-                            return saveCanvasDrawing(
-                                importedProjectId,
-                                document.drawingId,
+                }
+
+                const storageKeyMap = new Map<string, { storageKey: string; url: string }>();
+                const concurrency = 4;
+                let fileIndex = 0;
+                const workers = new Array(Math.min(item.files.length, concurrency)).fill(null).map(async () => {
+                    while (fileIndex < item.files.length) {
+                        const current = fileIndex++;
+                        const fileItem = item.files[current];
+                        const blob = zip.get(fileItem.path);
+                        if (!blob) {
+                            useSyncProgressStore.getState().incrementProjectCompleted(importedProjectId);
+                            continue;
+                        }
+                        const mime = fileItem.mimeType || blob.type || "image/png";
+                        const typedBlob = blob.type ? blob : blob.slice(0, blob.size, mime);
+                        const kind: "image" | "video" | "audio" | "file" = mime.startsWith("image/") ? "image" : mime.startsWith("video/") ? "video" : mime.startsWith("audio/") ? "audio" : "file";
+
+                        try {
+                            const resource = await uploadResourceFile(typedBlob, kind, { fileName: fileItem.path.split("/").pop() });
+                            const newStorageKey = resourceStorageKey(resource.id);
+                            const newUrl = resourceFileUrl(resource.id);
+                            await primeResourceBlobCache(newStorageKey, typedBlob).catch(() => "");
+                            storageKeyMap.set(fileItem.storageKey, { storageKey: newStorageKey, url: newUrl });
+                        } catch (uploadErr) {
+                            console.warn("上传资源到后端失败，降级保存本地", uploadErr);
+                            const localUrl = await (fileItem.storageKey.startsWith("image:") ? setImageBlob(fileItem.storageKey, typedBlob) : setMediaBlob(fileItem.storageKey, typedBlob));
+                            if (localUrl) {
+                                storageKeyMap.set(fileItem.storageKey, { storageKey: fileItem.storageKey, url: localUrl });
+                            }
+                        } finally {
+                            useSyncProgressStore.getState().incrementProjectCompleted(importedProjectId);
+                        }
+                    }
+                });
+                await Promise.all(workers);
+
+                const drawingEngineById = new Map((item.drawingDocuments || []).map((document) => [document.drawingId, document.engine || "tldraw"]));
+                const remapNodeMedia = (node: CanvasNodeData): CanvasNodeData => {
+                    const oldKey = node.metadata?.storageKey;
+                    const mapped = oldKey ? storageKeyMap.get(oldKey) : undefined;
+                    const isDeadBlob = (val?: string) => typeof val === "string" && val.startsWith("blob:");
+                    const nextStorageKey = mapped ? mapped.storageKey : (oldKey && !isDeadBlob(oldKey) ? oldKey : undefined);
+                    const content = mapped ? mapped.url : (isDeadBlob(node.metadata?.content) ? "" : node.metadata?.content);
+                    const previewContent = mapped ? mapped.url : (isDeadBlob(node.metadata?.previewContent) ? "" : node.metadata?.previewContent);
+                    return {
+                        ...node,
+                        metadata: {
+                            ...node.metadata,
+                            ...(nextStorageKey !== undefined ? { storageKey: nextStorageKey } : {}),
+                            ...(content !== undefined ? { content } : {}),
+                            ...(previewContent !== undefined ? { previewContent } : {}),
+                            drawingEngine: node.type === "drawing" && node.metadata?.drawingId ? drawingEngineById.get(node.metadata.drawingId) || node.metadata.drawingEngine || "tldraw" : node.metadata?.drawingEngine,
+                        },
+                    };
+                };
+
+                const remappedNodes = item.project.nodes.map(remapNodeMedia);
+                updateProject(importedProjectId, { nodes: remappedNodes });
+
+                await Promise.all(
+                    (item.drawingDocuments || []).map((document) => {
+                        const previewFile = document.previewPath ? zip.get(document.previewPath) : undefined;
+                        const preview = previewFile && !previewFile.type ? previewFile.slice(0, previewFile.size, "image/png") : previewFile;
+                        const renderFile = document.generationRender?.path ? zip.get(document.generationRender.path) : undefined;
+                        const renderBlob = renderFile && !renderFile.type ? renderFile.slice(0, renderFile.size, document.generationRender?.mimeType || "image/png") : renderFile;
+                        const render =
+                            renderBlob && document.generationRender
+                                ? ({
+                                      blob: renderBlob,
+                                      pageId: document.generationRender.pageId,
+                                      width: document.generationRender.width,
+                                      height: document.generationRender.height,
+                                      mimeType: document.generationRender.mimeType,
+                                      background: document.generationRender.background,
+                                  } satisfies CanvasDrawingRenderDraft)
+                                : undefined;
+                        const engine = document.engine || "tldraw";
+                        return saveCanvasDrawing(
+                            importedProjectId,
+                            document.drawingId,
+                            engine,
+                            document.snapshot,
+                            {
+                                version: 2,
                                 engine,
-                                document.snapshot,
-                                {
-                                    version: 2,
-                                    engine,
-                                    snapshot: document.snapshot,
-                                    revision: Math.max(0, document.revision - 1),
-                                    updatedAt: document.updatedAt,
-                                    shapeCount: document.shapeCount,
-                                    pageCount: document.pageCount,
-                                },
-                                preview,
-                                render,
-                            );
-                        }),
-                    );
-                }),
-            );
-            message.success(`已导入 ${data.projects.length} 个画布`);
-        } catch {
-            message.error("导入失败，请选择有效的画布压缩包");
+                                snapshot: document.snapshot,
+                                revision: Math.max(0, document.revision - 1),
+                                updatedAt: document.updatedAt,
+                                shapeCount: document.shapeCount,
+                                pageCount: document.pageCount,
+                            },
+                            preview,
+                            render,
+                        );
+                    }),
+                );
+
+                useSyncProgressStore.getState().setProjectProgress(importedProjectId, {
+                    phase: "saving",
+                    message: "正在保存画布结构",
+                });
+                const fullProject = useCanvasStore.getState().projects.find((p) => p.id === importedProjectId);
+                if (fullProject) {
+                    try {
+                        await upsertRemoteCanvasProject(fullProject);
+                    } catch (syncErr) {
+                        console.warn("同步至云端警告:", syncErr);
+                    }
+                }
+                useSyncProgressStore.getState().setProjectProgress(importedProjectId, null);
+            }
+
+            await flushCanvasStorePersistence();
+            message.success(`已导入 ${data.projects.length} 个画布并完成云端同步`);
+        } catch (error) {
+            hideLoading();
+            console.error("导入画布失败", error);
+            message.error(error instanceof Error ? `导入失败：${error.message}` : "导入失败，请选择有效的画布压缩包");
         } finally {
             if (inputRef.current) inputRef.current.value = "";
         }
diff --git a/web/src/services/user-data-sync.ts b/web/src/services/user-data-sync.ts
index 371783ed6..669a038e8 100644
--- a/web/src/services/user-data-sync.ts
+++ b/web/src/services/user-data-sync.ts
@@ -6,6 +6,7 @@ import type { Asset } from "@/stores/use-asset-store";
 import { flushAssetStorePersistence, useAssetStore } from "@/stores/use-asset-store";
 import type { CanvasProject } from "@/stores/canvas/use-canvas-store";
 import { flushCanvasStorePersistence, useCanvasStore } from "@/stores/canvas/use-canvas-store";
+import { useSyncProgressStore } from "@/stores/use-sync-progress-store";
 
 let activeRemoteUserId = "";
 type RemoteUserDataPhase = "inactive" | "hydrating" | "ready" | "failed";
@@ -136,6 +137,34 @@ export async function deleteCanvasProjectsWithRemoteSync(ids: string[]) {
             // 批量删除允许部分成功；每个已成功远端删除的实体都立即落实到本地 durable cache。
             await flushCanvasStorePersistence();
         }
+        // 清理仅属于被删除画布的自动生成素材
+        const currentAssets = useAssetStore.getState().assets;
+        const remainingProjects = useCanvasStore.getState().projects;
+        const activeAssetIds = new Set<string>();
+        for (const proj of remainingProjects) {
+            for (const node of proj.nodes) {
+                if (node.metadata?.assetId) activeAssetIds.add(node.metadata.assetId);
+            }
+        }
+        const assetsToRemove = currentAssets.filter((asset) => {
+            const canvasId = asset.metadata?.canvasId as string | undefined;
+            const source = asset.metadata?.source as string | undefined;
+            return canvasId && projectIds.includes(canvasId) && source === "canvas-generation" && !activeAssetIds.has(asset.id);
+        });
+        for (const asset of assetsToRemove) {
+            if (activeRemoteUserId) {
+                try {
+                    await deleteRemoteAsset(asset.id);
+                    acknowledgedAssets.delete(asset.id);
+                } catch {
+                    // 忽略远端删除失败，继续本地清理
+                }
+            }
+            await useAssetStore.getState().removeAsset(asset.id);
+        }
+        if (assetsToRemove.length > 0) {
+            await flushAssetStorePersistence();
+        }
     });
 }
 
@@ -179,9 +208,34 @@ async function saveRemoteUserDataBatch() {
     // 转换后的 resource: 引用只属于发往服务端的 payload，不能反写整份实时 store。
     // 已确认快照记录的是本次上传所依据的本地实体；上传期间的新编辑会在下一轮继续提交。
     for (const source of dirtyProjects) {
-        const remotePayload = await ensureRemoteResourceReferences(source, uploaded);
+        const keysToUpload = collectLocalMediaKeys(source);
+        const total = keysToUpload.length;
+        if (total > 0) {
+            useSyncProgressStore.getState().setProjectProgress(source.id, {
+                projectId: source.id,
+                total,
+                completed: 0,
+                phase: "uploading",
+                message: "正在同步媒体至云端",
+            });
+        }
+        const onMediaUploaded = () => {
+            if (total > 0) {
+                useSyncProgressStore.getState().incrementProjectCompleted(source.id);
+            }
+        };
+        const remotePayload = await ensureRemoteResourceReferences(source, uploaded, onMediaUploaded);
+        if (total > 0) {
+            useSyncProgressStore.getState().setProjectProgress(source.id, {
+                phase: "saving",
+                message: "正在保存画布结构",
+            });
+        }
         await upsertRemoteCanvasProject(remotePayload);
         acknowledgedProjects.set(source.id, source);
+        if (total > 0) {
+            useSyncProgressStore.getState().setProjectProgress(source.id, null);
+        }
     }
     for (const source of dirtyAssets) {
         const remotePayload = await ensureRemoteResourceReferences(source, uploaded);
@@ -198,17 +252,41 @@ async function saveRemoteUserDataBatch() {
     }
 }
 
-async function ensureRemoteResourceReferences<T>(value: T, uploaded = new Map<string, string>()): Promise<T> {
+function collectLocalMediaKeys(value: unknown, set = new Set<string>()): string[] {
+    if (!value || typeof value !== "object") return [...set];
+    if (Array.isArray(value)) {
+        for (const item of value) collectLocalMediaKeys(item, set);
+        return [...set];
+    }
+    const record = value as Record<string, unknown>;
+    const storageKey = typeof record.storageKey === "string" ? record.storageKey : "";
+    if (isLocalStorageKey(storageKey) && !resourceIdFromStorageKey(storageKey)) {
+        set.add(storageKey);
+    } else {
+        const inline = inlineMediaDataUrl(record);
+        if (inline) set.add(inline.slice(0, 48));
+    }
+    for (const child of Object.values(record)) {
+        collectLocalMediaKeys(child, set);
+    }
+    return [...set];
+}
+
+async function ensureRemoteResourceReferences<T>(
+    value: T,
+    uploaded = new Map<string, string>(),
+    onUploaded?: () => void,
+): Promise<T> {
     if (!value || typeof value !== "object") return value;
     if (Array.isArray(value)) {
         const result: unknown[] = [];
-        for (const item of value) result.push(await ensureRemoteResourceReferences(item, uploaded));
+        for (const item of value) result.push(await ensureRemoteResourceReferences(item, uploaded, onUploaded));
         return result as T;
     }
 
     const next: Record<string, unknown> = {};
     for (const [key, child] of Object.entries(value)) {
-        next[key] = await ensureRemoteResourceReferences(child, uploaded);
+        next[key] = await ensureRemoteResourceReferences(child, uploaded, onUploaded);
     }
 
     const storageKey = typeof next.storageKey === "string" ? next.storageKey : "";
@@ -218,14 +296,35 @@ async function ensureRemoteResourceReferences<T>(value: T, uploaded = new Map<st
     if (!isLocalStorageKey(storageKey)) {
         const inline = inlineMediaDataUrl(next);
         if (!inline) return next as T;
-        const resourceStorage = await uploadInlineDataUrl(inline);
-        return applyResourceReference(next, resourceStorage) as T;
+        try {
+            const resourceStorage = await uploadInlineDataUrl(inline);
+            if (resourceStorage) {
+                onUploaded?.();
+                return applyResourceReference(next, resourceStorage) as T;
+            }
+        } catch (error) {
+            console.warn("内嵌媒体上传失败，保留原内容", error);
+        }
+        return next as T;
     }
 
     const cached = uploaded.get(storageKey);
-    const resourceStorage = cached || (await uploadLocalStorageKey(storageKey, next));
-    uploaded.set(storageKey, resourceStorage);
-    return applyResourceReference(next, resourceStorage) as T;
+    let resourceStorage = cached;
+    if (!resourceStorage) {
+        try {
+            resourceStorage = await uploadLocalStorageKey(storageKey, next);
+            if (resourceStorage) {
+                uploaded.set(storageKey, resourceStorage);
+                onUploaded?.();
+            }
+        } catch (error) {
+            console.warn(`[Sync] 本地媒体转换失败，保留节点原引用: ${storageKey}`, error);
+        }
+    }
+    if (resourceStorage) {
+        return applyResourceReference(next, resourceStorage) as T;
+    }
+    return next as T;
 }
 
 function applyResourceReference(payload: Record<string, unknown>, storageKey: string) {
@@ -246,24 +345,36 @@ function inlineMediaDataUrl(payload: Record<string, unknown>) {
 }
 
 async function uploadInlineDataUrl(dataUrl: string) {
-    const response = await fetch(dataUrl);
-    if (!response.ok) throw new Error("内嵌媒体读取失败");
-    const blob = await response.blob();
-    const kind: "image" | "video" | "audio" | "file" = blob.type.startsWith("image/") ? "image" : blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
-    const resource = await uploadResourceFile(blob, kind);
-    return resourceStorageKey(resource.id);
+    try {
+        const response = await fetch(dataUrl);
+        if (!response.ok) return "";
+        const blob = await response.blob();
+        const kind: "image" | "video" | "audio" | "file" = blob.type.startsWith("image/") ? "image" : blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
+        const resource = await uploadResourceFile(blob, kind);
+        return resourceStorageKey(resource.id);
+    } catch {
+        return "";
+    }
 }
 
 async function uploadLocalStorageKey(storageKey: string, payload: Record<string, unknown>) {
-    const blob = storageKey.startsWith("image:") ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
-    if (!blob) throw new Error(`本地媒体不存在：${storageKey}`);
-    const kind = blob.type.startsWith("image/") ? "image" : blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
-    const resource = await uploadResourceFile(blob, kind, {
-        width: numberValue(payload.naturalWidth) || numberValue(payload.width),
-        height: numberValue(payload.naturalHeight) || numberValue(payload.height),
-        durationMs: numberValue(payload.durationMs),
-    });
-    return resourceStorageKey(resource.id);
+    try {
+        const blob = storageKey.startsWith("image:") ? await getImageBlob(storageKey) : await getMediaBlob(storageKey);
+        if (!blob) {
+            console.warn(`[Sync] 本地媒体未找到 (可能已清理或不存在于本地缓存): ${storageKey}`);
+            return "";
+        }
+        const kind = blob.type.startsWith("image/") ? "image" : blob.type.startsWith("video/") ? "video" : blob.type.startsWith("audio/") ? "audio" : "file";
+        const resource = await uploadResourceFile(blob, kind, {
+            width: numberValue(payload.naturalWidth) || numberValue(payload.width),
+            height: numberValue(payload.naturalHeight) || numberValue(payload.height),
+            durationMs: numberValue(payload.durationMs),
+        });
+        return resourceStorageKey(resource.id);
+    } catch (error) {
+        console.warn(`[Sync] 上传媒体到对象存储失败 (${storageKey}):`, error);
+        return "";
+    }
 }
 
 function requireRemoteUserDataBaseline() {
diff --git a/web/src/stores/use-sync-progress-store.ts b/web/src/stores/use-sync-progress-store.ts
new file mode 100644
index 000000000..ba848a272
--- /dev/null
+++ b/web/src/stores/use-sync-progress-store.ts
@@ -0,0 +1,68 @@
+import { create } from "zustand";
+
+export type SyncProjectProgress = {
+    projectId: string;
+    total: number;
+    completed: number;
+    phase: "uploading" | "saving" | "done" | "error";
+    message?: string;
+};
+
+type SyncProgressStore = {
+    syncingProjects: Record<string, SyncProjectProgress>;
+    setProjectProgress: (projectId: string, patch: Partial<SyncProjectProgress> | null) => void;
+    incrementProjectCompleted: (projectId: string) => void;
+    isAnySyncing: () => boolean;
+};
+
+export const useSyncProgressStore = create<SyncProgressStore>((set, get) => ({
+    syncingProjects: {},
+    setProjectProgress: (projectId, patch) =>
+        set((state) => {
+            if (!patch) {
+                const next = { ...state.syncingProjects };
+                delete next[projectId];
+                return { syncingProjects: next };
+            }
+            const current = state.syncingProjects[projectId] || {
+                projectId,
+                total: 0,
+                completed: 0,
+                phase: "uploading",
+            };
+            return {
+                syncingProjects: {
+                    ...state.syncingProjects,
+                    [projectId]: { ...current, ...patch },
+                },
+            };
+        }),
+    incrementProjectCompleted: (projectId) =>
+        set((state) => {
+            const current = state.syncingProjects[projectId];
+            if (!current) return state;
+            return {
+                syncingProjects: {
+                    ...state.syncingProjects,
+                    [projectId]: {
+                        ...current,
+                        completed: Math.min(current.total, current.completed + 1),
+                    },
+                },
+            };
+        }),
+    isAnySyncing: () => {
+        const list = Object.values(get().syncingProjects);
+        return list.some((item) => item.phase === "uploading" || item.phase === "saving");
+    },
+}));
+
+if (typeof window !== "undefined") {
+    window.addEventListener("beforeunload", (event) => {
+        if (useSyncProgressStore.getState().isAnySyncing()) {
+            event.preventDefault();
+            event.returnValue = "画布正在同步至云端，请勿关闭页面。";
+            return "画布正在同步至云端，请勿关闭页面。";
+        }
+    });
+}