feat: redesign Canvas plan and reference flow

src/pages/ImageCanvas/DesignAssetThumbnail.tsx

@@ -0,0 +1,76 @@
+import { useEffect, useState } from 'react';
+import { Film, ImageIcon } from 'lucide-react';
+import { resolveImageWorkspaceAssetUrl } from '@/lib/image-workspace';
+import { cn } from '@/lib/utils';
+import type { DesignAsset } from '../../../shared/image-workspace';
+
+export function DesignAssetThumbnail({
+  asset,
+  className,
+  alt,
+}: {
+  asset: DesignAsset | null;
+  className?: string;
+  alt?: string;
+}) {
+  const [resolution, setResolution] = useState<{
+    contentPath: string | null;
+    source: string | null;
+    failed: boolean;
+  }>({ contentPath: asset?.contentPath ?? null, source: null, failed: false });
+  const currentResolution = resolution.contentPath === (asset?.contentPath ?? null)
+    ? resolution
+    : { contentPath: asset?.contentPath ?? null, source: null, failed: false };
+
+  useEffect(() => {
+    if (!asset) return;
+    let active = true;
+    void resolveImageWorkspaceAssetUrl(asset.contentPath)
+      .then((url) => {
+        if (active) setResolution({ contentPath: asset.contentPath, source: url, failed: false });
+      })
+      .catch(() => {
+        if (active) setResolution({ contentPath: asset.contentPath, source: null, failed: true });
+      });
+    return () => {
+      active = false;
+    };
+  }, [asset]);
+
+  if (!asset || !currentResolution.source || currentResolution.failed) {
+    return (
+      <span
+        className={cn(
+          'flex shrink-0 items-center justify-center overflow-hidden bg-surface-subtle text-muted-foreground',
+          className,
+        )}
+        aria-hidden="true"
+      >
+        {asset?.mediaType === 'video'
+          ? <Film className="h-5 w-5" />
+          : <ImageIcon className="h-5 w-5" />}
+      </span>
+    );
+  }
+
+  if (asset.mediaType === 'video') {
+    return (
+      <video
+        src={currentResolution.source}
+        className={cn('shrink-0 bg-surface-subtle object-cover', className)}
+        aria-label={alt ?? '视频作品预览'}
+        muted
+        preload="metadata"
+      />
+    );
+  }
+
+  return (
+    <img
+      src={currentResolution.source}
+      alt={alt ?? (asset.role === 'uploaded' ? '参考图片预览' : 'AI 作品预览')}
+      className={cn('shrink-0 bg-surface-subtle object-cover', className)}
+      loading="lazy"
+    />
+  );
+}