fix(canvas): 画布媒体 - 修复预览首帧音量和创作状态展示

web/src/components/canvas/canvas-workspace-node-list-panel.tsx

@@ -1,9 +1,9 @@
 import { memo, useState } from "react";
 import { AudioLines, Clock3, FileText, Image, Layers, Pencil, Search, X } from "lucide-react";
 
+import { CanvasVideoPreviewImage } from "@/components/canvas/canvas-video-preview-image";
 import { WorkspaceState } from "@/components/layout/workspace-state";
 import { canvasNodeMaterialSummary, canvasNodeSearchContext, canvasNodeSearchTimes } from "@/lib/canvas/canvas-node-search";
-import { canvasNodeVideoPreviewUrl } from "@/lib/canvas/canvas-media-preview";
 import { getNodeListLabel } from "@/lib/canvas/node-registry";
 import { CanvasNodeType, type CanvasNodeData } from "@/types/canvas";
 import { Video as CanvasVideoIcon } from "lucide-react";
@@ -103,15 +103,18 @@ const CanvasNodeListItem = memo(function CanvasNodeListItem({ node, active, onSe
 function CanvasNodeListThumbnail({ node }: { node: CanvasNodeData }) {
     const [failed, setFailed] = useState(false);
     const mediaSource =
-        node.type === CanvasNodeType.Video
-            ? canvasNodeVideoPreviewUrl(node)
-            : node.metadata?.drawingPreviewUrl ||
-              node.metadata?.characterCoverUrl ||
-              node.metadata?.folder?.themeCover ||
-              (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Panorama || node.type === CanvasNodeType.ColorGrade ? node.metadata?.content : undefined);
+        node.metadata?.drawingPreviewUrl ||
+        node.metadata?.characterCoverUrl ||
+        node.metadata?.folder?.themeCover ||
+        (node.type === CanvasNodeType.Image || node.type === CanvasNodeType.Panorama || node.type === CanvasNodeType.ColorGrade ? node.metadata?.content : undefined);
     const commonClass = "h-9 w-11 rounded-[var(--r-sm)] border object-cover";
     const commonStyle = { borderColor: "color-mix(in srgb, var(--foreground) 9%, transparent)", background: "color-mix(in srgb, var(--foreground) 5%, transparent)" };
 
+    if (node.type === CanvasNodeType.Video) {
+        const fallback = <span aria-hidden="true" className="grid h-9 w-11 place-items-center rounded-[var(--r-sm)] border text-foreground/48" style={commonStyle}><CanvasVideoIcon className="size-3.5" /></span>;
+        return <CanvasVideoPreviewImage node={node} alt="" width={44} height={36} loading="lazy" decoding="async" className={commonClass} style={commonStyle} fallback={fallback} />;
+    }
+
     if (mediaSource && !failed) {
         return <img src={mediaSource} alt="" width={44} height={36} loading="lazy" decoding="async" className={commonClass} style={commonStyle} onError={() => setFailed(true)} />;
     }