fix(canvas): 画布导入与云端同步 - 合并 PR #368 并修复同步一致性

2026-09-01 18:33:56 +08:00
parent e1f2f16e85 5d6498cd27
commit aa4203a3f8
5 changed files with 494 additions and 104 deletions
--- 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);
@@ -31,12 +33,15 @@ export function CachedResourceImage({ storageKey, src = "", fallback = null, eag
            setNearViewport(true);
            return;
        }
-        const observer = new IntersectionObserver((entries) => {
-            if (entries.some((entry) => entry.isIntersecting)) {
-                setNearViewport(true);
-                observer.disconnect();
-            }
-        }, { rootMargin: "240px" });
+        const observer = new IntersectionObserver(
+            (entries) => {
+                if (entries.some((entry) => entry.isIntersecting)) {
+                    setNearViewport(true);
+                    observer.disconnect();
+                }
+            },
+            { rootMargin: "240px" },
+        );
        observer.observe(image);
        return () => observer.disconnect();
    }, [eager, remoteResource]);
@@ -44,32 +49,78 @@ 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>
    );
 }
--- 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,16 +11,21 @@ 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";

 type ProjectPreviewMedia = { node: CanvasNodeData; url: string; storageKey?: string };
 const projectPreviewMediaCache = new WeakMap<CanvasNodeData[], { first?: ProjectPreviewMedia; latest?: ProjectPreviewMedia }>();

 export function CanvasCreateCard({ disabled, onClick }: { disabled?: boolean; onClick: () => void }) {
-    return <button type="button" className="app-canvas-create-card" disabled={disabled} onClick={onClick}>
-        <span className="app-canvas-create-preview"><Plus className="app-canvas-create-icon" /></span>
-        <span className="app-canvas-create-title">新建画布</span>
-        <span className="app-canvas-create-meta">从空白开始</span>
-    </button>;
+    return (
+        <button type="button" className="app-canvas-create-card" disabled={disabled} onClick={onClick}>
+            <span className="app-canvas-create-preview">
+                <Plus className="app-canvas-create-icon" />
+            </span>
+            <span className="app-canvas-create-title">新建画布</span>
+            <span className="app-canvas-create-meta">从空白开始</span>
+        </button>
+    );
 }

 export function CanvasProjectCard({ project, projectName, variant = "library", readOnly = false, footer }: { project: CanvasProject; projectName?: string; variant?: "library" | "recent"; readOnly?: boolean; footer?: ReactNode }) {
@@ -57,14 +62,27 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
                >
                    <ProjectPreview project={project} />
                </button>
-                {!compact && !readOnly ? <span className={`canvas-project-select ${selected ? "is-visible" : ""}`} onClick={(event) => event.stopPropagation()}><input type="checkbox" checked={selected} onChange={(event) => toggleSelected(project.id, event.target.checked)} className="app-canvas-project-checkbox" aria-label={`选择 ${project.title}`} /></span> : null}
-                <div className="canvas-project-cover-meta" aria-hidden="true"><span className="canvas-project-node-count">{project.nodes.length} 节点</span></div>
+                {!compact && !readOnly ? (
+                    <span className={`canvas-project-select ${selected ? "is-visible" : ""}`} onClick={(event) => event.stopPropagation()}>
+                        <input type="checkbox" checked={selected} onChange={(event) => toggleSelected(project.id, event.target.checked)} className="app-canvas-project-checkbox" aria-label={`选择 ${project.title}`} />
+                    </span>
+                ) : null}
+                <div className="canvas-project-cover-meta" aria-hidden="true">
+                    <span className="canvas-project-node-count">{project.nodes.length} 节点</span>
+                </div>
            </div>

            <div className={cn("app-canvas-project-body", compact ? "is-compact" : "")}>
                <div className="canvas-project-heading-row">
                    {editing && !readOnly ? (
-                        <Input className="canvas-project-title-input" value={editingTitle} onClick={(event) => event.stopPropagation()} onChange={(event) => setEditingTitle(event.target.value)} onKeyDown={(event) => event.key === "Enter" && saveTitle()} autoFocus />
+                        <Input
+                            className="canvas-project-title-input"
+                            value={editingTitle}
+                            onClick={(event) => event.stopPropagation()}
+                            onChange={(event) => setEditingTitle(event.target.value)}
+                            onKeyDown={(event) => event.key === "Enter" && saveTitle()}
+                            autoFocus
+                        />
                    ) : (
                        <button
                            type="button"
@@ -79,12 +97,18 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
                    )}
                    {editing && !readOnly ? (
                        <div className="canvas-project-actions" onClick={(event) => event.stopPropagation()}>
-                            <button type="button" onClick={saveTitle} aria-label="保存名称"><Check className="size-3.5" /></button>
-                            <button type="button" onClick={stopEditing} aria-label="取消重命名"><X className="size-3.5" /></button>
+                            <button type="button" onClick={saveTitle} aria-label="保存名称">
+                                <Check className="size-3.5" />
+                            </button>
+                            <button type="button" onClick={stopEditing} aria-label="取消重命名">
+                                <X className="size-3.5" />
+                            </button>
                        </div>
                    ) : !readOnly ? (
                        <div className="canvas-project-actions" onClick={(event) => event.stopPropagation()}>
-                            <button type="button" onClick={() => startEditing(project.id, project.title)} aria-label={`重命名 ${project.title}`} title="重命名"><Pencil className="size-3.5" /></button>
+                            <button type="button" onClick={() => startEditing(project.id, project.title)} aria-label={`重命名 ${project.title}`} title="重命名">
+                                <Pencil className="size-3.5" />
+                            </button>
                            <Dropdown
                                trigger={["click"]}
                                menu={{
@@ -96,37 +120,52 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r
                                    ],
                                }}
                            >
-                                <button type="button" aria-label={`${project.title} 画布操作`} title="更多操作"><MoreHorizontal className="size-4" /></button>
+                                <button type="button" aria-label={`${project.title} 画布操作`} title="更多操作">
+                                    <MoreHorizontal className="size-4" />
+                                </button>
                            </Dropdown>
                        </div>
                    ) : null}
                </div>
-                <div className="canvas-project-stats"><span>{projectName || "自由画布"}</span><span aria-hidden="true">·</span><time dateTime={project.updatedAt}>{formatProjectTime(project.updatedAt)}</time></div>
-                {footer ? <div className="canvas-project-card-footer" onClick={(event) => event.stopPropagation()}>{footer}</div> : null}
+                <div className="canvas-project-stats">
+                    <span>{projectName || "自由画布"}</span>
+                    <span aria-hidden="true">·</span>
+                    <time dateTime={project.updatedAt}>{formatProjectTime(project.updatedAt)}</time>
+                </div>
+                {footer ? (
+                    <div className="canvas-project-card-footer" onClick={(event) => event.stopPropagation()}>
+                        {footer}
+                    </div>
+                ) : null}
            </div>
        </article>
    );
 }

 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 media = projectPreviewMedia(project.nodes, preferLatestImage);
-    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}>
@@ -137,6 +176,43 @@ 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>
+    );
 }

 export function projectPreviewMedia(nodes: CanvasNodeData[], preferLatestImage = false) {
@@ -210,7 +286,7 @@ function getNodePresentation(node: CanvasNodeData) {
 }

 function isPreviewUrl(value?: string) {
-    return Boolean(value && (/^(https?:|blob:|data:image\/|data:video\/|\/api\/)/.test(value)));
+    return Boolean(value && /^(https?:|blob:|data:image\/|data:video\/|\/api\/)/.test(value));
 }

 export function formatProjectTime(value: string) {