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

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>
     );
 }