fix(canvas): 画布导入与云端同步 - 修复解压媒体直传对象存储与本地缓存自愈，支持封面实时上传进度与防误关提示

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) {