From 5d6498cd2742d5a3be54011ad2b44f69938916f1 Mon Sep 17 00:00:00 2001 From: Danborad Date: Tue, 1 Sep 2026 14:44:40 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=A0=BC=E5=BC=8F=E5=8C=96=20web=20?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BB=A5=E6=BB=A1=E8=B6=B3=20prettier=20?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=A7=84=E8=8C=83=E6=A3=80=E6=9F=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/src/components/cached-resource-image.tsx | 85 +++++++++------ .../components/canvas/canvas-project-card.tsx | 101 ++++++++++++------ web/src/pages/canvas/index.tsx | 21 ++-- web/src/services/user-data-sync.ts | 6 +- 4 files changed, 129 insertions(+), 84 deletions(-) diff --git a/web/src/components/cached-resource-image.tsx b/web/src/components/cached-resource-image.tsx index fe0213322..f30b29853 100644 --- a/web/src/components/cached-resource-image.tsx +++ b/web/src/components/cached-resource-image.tsx @@ -33,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]); @@ -50,47 +53,61 @@ export function CachedResourceImage({ storageKey, src = "", fallback = null, eag if (remoteResource && storageKey) { if (!nearViewport) { setCachedSrc(""); - return () => { cancelled = true; }; + return () => { + cancelled = true; + }; } setCachedSrc(""); const resolve = cacheResourceObjectUrl(storageKey); - void resolve.then((url) => { - if (!cancelled) setCachedSrc(url || src); - }).catch(() => { - if (!cancelled) { - setCacheFailed(true); - setCachedSrc(src); - } - }); - return () => { cancelled = true; }; + void resolve + .then((url) => { + if (!cancelled) setCachedSrc(url || src); + }) + .catch(() => { + if (!cancelled) { + setCacheFailed(true); + setCachedSrc(src); + } + }); + return () => { + cancelled = true; + }; } if (localImageResource && storageKey) { - void resolveImageUrl(storageKey, src).then((url) => { - if (!cancelled) setCachedSrc(url || src); - }).catch(() => { - if (!cancelled) setCachedSrc(src); - }); - return () => { cancelled = true; }; + void resolveImageUrl(storageKey, src) + .then((url) => { + if (!cancelled) setCachedSrc(url || src); + }) + .catch(() => { + if (!cancelled) setCachedSrc(src); + }); + return () => { + cancelled = true; + }; } setCachedSrc(src); - return () => { cancelled = true; }; + 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); - }); + void resolveImageUrl(storageKey) + .then((url) => { + if (url && url !== cachedSrc) { + setCachedSrc(url); + return; + } + setCacheFailed(true); + onError?.(e); + }) + .catch(() => { + setCacheFailed(true); + onError?.(e); + }); return; } setCacheFailed(true); diff --git a/web/src/components/canvas/canvas-project-card.tsx b/web/src/components/canvas/canvas-project-card.tsx index df63add13..4a2a6b185 100644 --- a/web/src/components/canvas/canvas-project-card.tsx +++ b/web/src/components/canvas/canvas-project-card.tsx @@ -14,11 +14,15 @@ 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[] = [];