From 75e42002b5ca876adfa6b48fc6a99bf10701f4ea Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Thu, 6 Aug 2026 10:16:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=B4=A0=E6=9D=90=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A048x48=E7=BC=A9=E7=95=A5=E5=9B=BE=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../material/ManualMaterialList.tsx           | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index 0225a338f..15825b189 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/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()}