feat: 素材列表添加48x48缩略图预览

apps/web/src/pages/generate/components/material/ManualMaterialList.tsx

@@ -32,6 +32,8 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
         <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
           {materials.items.map((m) => {
             const checked = selectedMaterials.includes(m.id)
+            const isVideo = m.mime_type.startsWith("video/")
+            const thumbSrc = m.thumbnail_url || (isVideo ? m.file_url : undefined)
             return (
               <label
                 key={m.id}
@@ -53,13 +55,45 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                   type="checkbox"
                   checked={checked}
                   onChange={() => onToggle(m.id)}
-                  style={{ accentColor: "var(--primary-color, #4f46e5)" }}
+                  style={{ accentColor: "var(--primary-color, #4f46e5)", flexShrink: 0 }}
                 />
+                {/* 缩略图预览 48×48 */}
+                <div
+                  style={{
+                    width: 48,
+                    height: 48,
+                    borderRadius: 6,
+                    overflow: "hidden",
+                    background: "#e2e8f0",
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  {thumbSrc ? (
+                    <img
+                      src={thumbSrc}
+                      alt={m.name}
+                      style={{
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "cover",
+                      }}
+                    />
+                  ) : (
+                    <span style={{ fontSize: 20, opacity: 0.5 }}>{isVideo ? "🎬" : "🎵"}</span>
+                  )}
+                </div>
                 <span
                   style={{
                     fontSize: 13,
                     color: "var(--text-primary)",
                     flex: 1,
+                    minWidth: 0,
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                    whiteSpace: "nowrap",
                   }}
                 >
                   {m.name}
@@ -68,6 +102,7 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
                   style={{
                     fontSize: 11,
                     color: "var(--text-tertiary, #94a3b8)",
+                    flexShrink: 0,
                   }}
                 >
                   {m.mime_type.split("/")[1].toUpperCase()}