From dca252434b3e776f541a5f2d77b526ac712d0479 Mon Sep 17 00:00:00 2001 From: Danborad Date: Tue, 1 Sep 2026 11:16:42 +0800 Subject: [PATCH 1/2] =?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, "src"> & { storageKey?: string; @@ -12,10 +13,11 @@ type CachedResourceImageProps = Omit, "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(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 ; + 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) => { + 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 ; + } return ( - {cachedSrc && !(cacheFailed && !src) ? : fallback} + {cachedSrc && !(cacheFailed && !src) ? : fallback} ); } 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 ; + return ( + + ); } export function CanvasProjectCard({ project, projectName, variant = "library", readOnly = false, footer }: { project: CanvasProject; projectName?: string; variant?: "library" | "recent"; readOnly?: boolean; footer?: ReactNode }) { @@ -55,14 +59,27 @@ export function CanvasProjectCard({ project, projectName, variant = "library", r > - {!compact && !readOnly ? event.stopPropagation()}> toggleSelected(project.id, event.target.checked)} className="app-canvas-project-checkbox" aria-label={`选择 ${project.title}`} /> : null} - + {!compact && !readOnly ? ( + event.stopPropagation()}> + toggleSelected(project.id, event.target.checked)} className="app-canvas-project-checkbox" aria-label={`选择 ${project.title}`} /> + + ) : null} +
{editing && !readOnly ? ( - event.stopPropagation()} onChange={(event) => setEditingTitle(event.target.value)} onKeyDown={(event) => event.key === "Enter" && saveTitle()} autoFocus /> + event.stopPropagation()} + onChange={(event) => setEditingTitle(event.target.value)} + onKeyDown={(event) => event.key === "Enter" && saveTitle()} + autoFocus + /> ) : ( - + +
) : !readOnly ? (
event.stopPropagation()}> - + - +
) : null}
-
{projectName || "自由画布"}
- {footer ?
event.stopPropagation()}>{footer}
: null} +
+ {projectName || "自由画布"} + + +
+ {footer ? ( +
event.stopPropagation()}> + {footer} +
+ ) : null} ); @@ -109,26 +142,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); - const storageKey = node.metadata?.storageKey; - return isPreviewUrl(url) || Boolean(storageKey) ? [{ node, url, storageKey }] : []; - }); + const mediaNodes = project.nodes.flatMap((node) => { + if (node.type !== CanvasNodeType.Image && node.type !== CanvasNodeType.Video) return []; + const url = getNodeMediaUrl(node); + 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]; + const media = preferLatestImage ? imageNodes[imageNodes.length - 1] || mediaNodes[mediaNodes.length - 1] : imageNodes[0] || mediaNodes[0]; const content = media ? (
- {media.node.type === CanvasNodeType.Video - ?
- : } + {media.node.type === CanvasNodeType.Video ? ( +
+
+ ) : ( + + )}
) : !project.nodes.length ? ( -
空白画布等待第一幕
+
+ + 空白画布 + 等待第一幕 +
) : (
{buildNodePreviewLayout(project.nodes.slice(0, 8)).map(({ node, style }) => { @@ -147,10 +185,7 @@ export function ProjectPreview({ project, preferLatestImage = false }: { project
{content} {isSyncing && syncProgress ? ( -
e.stopPropagation()} - > +
e.stopPropagation()}>
云端同步中 @@ -230,7 +265,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) { diff --git a/web/src/pages/canvas/index.tsx b/web/src/pages/canvas/index.tsx index 687f7fe70..a9c9860c8 100644 --- a/web/src/pages/canvas/index.tsx +++ b/web/src/pages/canvas/index.tsx @@ -172,9 +172,9 @@ export default function CanvasPage() { 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); + 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: { @@ -419,20 +419,17 @@ export default function CanvasPage() { {showCreateCard ? : null} {visibleProjects.map((project) => ( - enterProject(project.id)} - /> + enterProject(project.id)} /> ))} ) : ( )} - {hydrated && visibleProjects.length ?
- {visibleProjects.length < filteredProjects.length ? `继续下滑加载更多（每页 50 条）` : `已加载全部 ${filteredProjects.length} 个画布`} -
: null} + {hydrated && visibleProjects.length ? ( +
+ {visibleProjects.length < filteredProjects.length ? `继续下滑加载更多（每页 50 条）` : `已加载全部 ${filteredProjects.length} 个画布`} +
+ ) : null}
void importCanvas(event.target.files?.[0])} /> diff --git a/web/src/services/user-data-sync.ts b/web/src/services/user-data-sync.ts index 669a038e8..8bcc02a3b 100644 --- a/web/src/services/user-data-sync.ts +++ b/web/src/services/user-data-sync.ts @@ -272,11 +272,7 @@ function collectLocalMediaKeys(value: unknown, set = new Set()): string[ return [...set]; } -async function ensureRemoteResourceReferences( - value: T, - uploaded = new Map(), - onUploaded?: () => void, -): Promise { +async function ensureRemoteResourceReferences(value: T, uploaded = new Map(), onUploaded?: () => void): Promise { if (!value || typeof value !== "object") return value; if (Array.isArray(value)) { const result: unknown[] = [];