From c2fe02cf068214a4f2782b6ce520161fa0990eb7 Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Thu, 27 Aug 2026 15:47:28 +0800
Subject: [PATCH] =?UTF-8?q?fix(ui):=20=E6=A8=A1=E6=9D=BF=E9=80=89=E6=8B=A9?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=9D=A1=E5=AE=BD=E5=BA=A6=E7=BC=A9=E7=9F=AD?=
 =?UTF-8?q?=E8=87=B31/3=EF=BC=8C=E7=B4=A0=E6=9D=90=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=94=B9=E4=B8=BA=E7=82=B9=E5=87=BB=E6=92=AD=E6=94=BE=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- generate.css: xx-choice-thumb 宽度从 100% 改为 33%（max-width 80px），居中显示
- ManualMaterialList.tsx: 重构为独立 MaterialCard 组件
  - 移除 hover 自动播放逻辑
  - 默认显示视频封面/缩略图（非黑色）
  - 点击播放按钮开始播放，播放时隐藏按钮
  - 播放中点击视频区域可暂停并恢复按钮
  - 卡片内嵌播放，无弹窗
---
 .../material/ManualMaterialList.tsx           | 431 +++++++++---------
 apps/web/src/pages/generate/generate.css      |   4 +-
 2 files changed, 231 insertions(+), 204 deletions(-)

diff --git a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
index dbee4a1b0..240f4cffd 100644
--- a/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
+++ b/apps/web/src/pages/generate/components/material/ManualMaterialList.tsx
@@ -1,7 +1,8 @@
 /**
  * 手动选择素材列表 — 竖屏 9:16 卡片网格
+ * 交互：默认显示封面，点击播放按钮播放，播放中隐藏按钮，点击视频区域暂停
  */
-import React, { useRef, useCallback } from "react"
+import React, { useRef, useState, useCallback } from "react"
 import { Typography } from "antd"
 import type { AssetItem } from "@/api/assets"
 
@@ -22,37 +23,230 @@ const fmtDuration = (seconds?: number): string => {
   return `${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`
 }
 
+/** 单个素材卡片 */
+const MaterialCard: React.FC<{
+  asset: AssetItem
+  checked: boolean
+  onToggle: () => void
+}> = ({ asset, checked, onToggle }) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const [isPlaying, setIsPlaying] = useState(false)
+  const isVideo = asset.mime_type?.startsWith("video/") ?? false
+  const thumbSrc = asset.thumbnail_url || undefined
+
+  const handlePlayToggle = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const video = videoRef.current
+      if (!video || !isVideo) return
+
+      if (isPlaying) {
+        video.pause()
+        setIsPlaying(false)
+      } else {
+        video.play().catch(() => {})
+        setIsPlaying(true)
+      }
+    },
+    [isPlaying, isVideo],
+  )
+
+  const handleVideoEnded = useCallback(() => {
+    setIsPlaying(false)
+  }, [])
+
+  const handleCardClick = useCallback(() => {
+    // 如果视频正在播放，点击卡片空白区域暂停视频
+    if (isPlaying) {
+      const video = videoRef.current
+      if (video) {
+        video.pause()
+        setIsPlaying(false)
+      }
+      return
+    }
+    onToggle()
+  }, [isPlaying, onToggle])
+
+  return (
+    <div
+      onClick={handleCardClick}
+      style={{
+        position: "relative",
+        aspectRatio: "9 / 16",
+        borderRadius: 10,
+        overflow: "hidden",
+        cursor: "pointer",
+        border: checked ? "2px solid var(--primary-color, #4f46e5)" : "2px solid transparent",
+        boxShadow: checked ? "0 0 0 2px rgba(79, 70, 229, 0.2)" : "0 1px 3px rgba(0, 0, 0, 0.1)",
+        background: "#1e293b",
+        transition: "all 0.15s ease",
+      }}
+    >
+      {/* 视频元素 */}
+      {isVideo && asset.file_url ? (
+        <video
+          ref={videoRef}
+          src={asset.file_url}
+          poster={thumbSrc}
+          muted
+          loop
+          playsInline
+          preload="metadata"
+          onEnded={handleVideoEnded}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+          }}
+        />
+      ) : thumbSrc ? (
+        <img
+          src={thumbSrc}
+          alt={asset.name}
+          style={{
+            width: "100%",
+            height: "100%",
+            objectFit: "cover",
+            display: "block",
+          }}
+          onError={(e) => {
+            const target = e.target as HTMLImageElement
+            target.style.display = "none"
+          }}
+        />
+      ) : (
+        <div
+          style={{
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: "linear-gradient(135deg, #334155, #1e293b)",
+            color: "rgba(255,255,255,0.5)",
+            fontSize: 28,
+          }}
+        >
+          {isVideo ? "🎬" : "🎵"}
+        </div>
+      )}
+
+      {/* 底部渐变遮罩 */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          right: 0,
+          height: "50%",
+          background: "linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%)",
+          pointerEvents: "none",
+        }}
+      />
+
+      {/* 播放按钮 — 播放中隐藏 */}
+      {!isPlaying && (
+        <div
+          onClick={handlePlayToggle}
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            width: 36,
+            height: 36,
+            borderRadius: "50%",
+            background: "rgba(99, 102, 241, 0.85)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 3,
+            transition: "opacity 0.2s ease",
+          }}
+        >
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="white">
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </div>
+      )}
+
+      {/* 文件名（左下角） */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 6,
+          left: 6,
+          right: 50,
+          color: "white",
+          fontSize: 11,
+          fontWeight: 500,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          textShadow: "0 1px 2px rgba(0,0,0,0.5)",
+          pointerEvents: "none",
+          zIndex: 1,
+        }}
+      >
+        {asset.name}
+      </div>
+
+      {/* 时长（右下角） */}
+      <div
+        style={{
+          position: "absolute",
+          bottom: 6,
+          right: 6,
+          background: "rgba(0, 0, 0, 0.7)",
+          color: "white",
+          padding: "1px 5px",
+          borderRadius: 3,
+          fontSize: 10,
+          fontWeight: 600,
+          fontVariantNumeric: "tabular-nums",
+          pointerEvents: "none",
+          zIndex: 1,
+        }}
+      >
+        {fmtDuration(asset.duration)}
+      </div>
+
+      {/* 选中勾选标记（左上角） */}
+      {checked && (
+        <div
+          style={{
+            position: "absolute",
+            top: 6,
+            left: 6,
+            width: 20,
+            height: 20,
+            borderRadius: "50%",
+            background: "var(--primary-color, #4f46e5)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            fontSize: 12,
+            fontWeight: 700,
+            zIndex: 2,
+            pointerEvents: "none",
+          }}
+        >
+          ✓
+        </div>
+      )}
+    </div>
+  )
+}
+
 const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
   materials,
   materialsLoading,
   selectedMaterials,
   onToggle,
 }) => {
-  const activeVideoRef = useRef<HTMLVideoElement | null>(null)
-
-  const handleVideoMouseEnter = useCallback((e: React.MouseEvent<HTMLVideoElement>) => {
-    const video = e.currentTarget
-    if (
-      activeVideoRef.current &&
-      activeVideoRef.current !== video &&
-      document.body.contains(activeVideoRef.current)
-    ) {
-      activeVideoRef.current.pause()
-      activeVideoRef.current.currentTime = 0
-    }
-    activeVideoRef.current = video
-    video.play().catch(() => {})
-  }, [])
-
-  const handleVideoMouseLeave = useCallback((e: React.MouseEvent<HTMLVideoElement>) => {
-    const video = e.currentTarget
-    video.pause()
-    video.currentTime = 0
-    if (activeVideoRef.current === video) {
-      activeVideoRef.current = null
-    }
-  }, [])
-
   return (
     <div style={{ marginTop: 14 }}>
       {materialsLoading ? (
@@ -69,183 +263,14 @@ const ManualMaterialList: React.FC<ManualMaterialListProps> = ({
             gap: 10,
           }}
         >
-          {materials.items.map((m) => {
-            const checked = selectedMaterials.includes(m.id)
-            const isVideo = m.mime_type?.startsWith("video/") ?? false
-            const thumbSrc = m.thumbnail_url || undefined
-            return (
-              <div
-                key={m.id}
-                onClick={() => onToggle(m.id)}
-                style={{
-                  position: "relative",
-                  aspectRatio: "9 / 16",
-                  borderRadius: 10,
-                  overflow: "hidden",
-                  cursor: "pointer",
-                  border: checked
-                    ? "2px solid var(--primary-color, #4f46e5)"
-                    : "2px solid transparent",
-                  boxShadow: checked
-                    ? "0 0 0 2px rgba(79, 70, 229, 0.2)"
-                    : "0 1px 3px rgba(0, 0, 0, 0.1)",
-                  background: "#1e293b",
-                  transition: "all 0.15s ease",
-                }}
-              >
-                {/* 视频/图片封面 */}
-                {isVideo && m.file_url ? (
-                  <video
-                    src={m.file_url}
-                    poster={m.thumbnail_url || undefined}
-                    muted
-                    loop
-                    playsInline
-                    preload="none"
-                    onMouseEnter={handleVideoMouseEnter}
-                    onMouseLeave={handleVideoMouseLeave}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      objectFit: "cover",
-                      display: "block",
-                    }}
-                  />
-                ) : thumbSrc ? (
-                  <img
-                    src={thumbSrc}
-                    alt={m.name}
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      objectFit: "cover",
-                      display: "block",
-                    }}
-                    onError={(e) => {
-                      const target = e.target as HTMLImageElement
-                      target.style.display = "none"
-                    }}
-                  />
-                ) : (
-                  <div
-                    style={{
-                      width: "100%",
-                      height: "100%",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      background: "linear-gradient(135deg, #334155, #1e293b)",
-                      color: "rgba(255,255,255,0.5)",
-                      fontSize: 28,
-                    }}
-                  >
-                    {isVideo ? "🎬" : "🎵"}
-                  </div>
-                )}
-
-                {/* 底部渐变遮罩 */}
-                <div
-                  style={{
-                    position: "absolute",
-                    bottom: 0,
-                    left: 0,
-                    right: 0,
-                    height: "50%",
-                    background: "linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%)",
-                    pointerEvents: "none",
-                  }}
-                />
-
-                {/* 播放按钮（中央） */}
-                <div
-                  style={{
-                    position: "absolute",
-                    top: "50%",
-                    left: "50%",
-                    transform: "translate(-50%, -50%)",
-                    width: 32,
-                    height: 32,
-                    borderRadius: "50%",
-                    background: "rgba(99, 102, 241, 0.85)",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    pointerEvents: "none",
-                  }}
-                >
-                  <svg width="14" height="14" viewBox="0 0 24 24" fill="white">
-                    <path d="M8 5v14l11-7z" />
-                  </svg>
-                </div>
-
-                {/* 文件名（左下角） */}
-                <div
-                  style={{
-                    position: "absolute",
-                    bottom: 6,
-                    left: 6,
-                    right: 50,
-                    color: "white",
-                    fontSize: 11,
-                    fontWeight: 500,
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                    textShadow: "0 1px 2px rgba(0,0,0,0.5)",
-                    pointerEvents: "none",
-                    zIndex: 1,
-                  }}
-                >
-                  {m.name}
-                </div>
-
-                {/* 时长（右下角） */}
-                <div
-                  style={{
-                    position: "absolute",
-                    bottom: 6,
-                    right: 6,
-                    background: "rgba(0, 0, 0, 0.7)",
-                    color: "white",
-                    padding: "1px 5px",
-                    borderRadius: 3,
-                    fontSize: 10,
-                    fontWeight: 600,
-                    fontVariantNumeric: "tabular-nums",
-                    pointerEvents: "none",
-                    zIndex: 1,
-                  }}
-                >
-                  {fmtDuration(m.duration)}
-                </div>
-
-                {/* 选中勾选标记（左上角） */}
-                {checked && (
-                  <div
-                    style={{
-                      position: "absolute",
-                      top: 6,
-                      left: 6,
-                      width: 20,
-                      height: 20,
-                      borderRadius: "50%",
-                      background: "var(--primary-color, #4f46e5)",
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      color: "white",
-                      fontSize: 12,
-                      fontWeight: 700,
-                      zIndex: 2,
-                      pointerEvents: "none",
-                    }}
-                  >
-                    ✓
-                  </div>
-                )}
-              </div>
-            )
-          })}
+          {materials.items.map((asset) => (
+            <MaterialCard
+              key={asset.id}
+              asset={asset}
+              checked={selectedMaterials.includes(asset.id)}
+              onToggle={() => onToggle(asset.id)}
+            />
+          ))}
         </div>
       )}
     </div>
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 2e74af669..e389a31d5 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -219,6 +219,8 @@
 }
 
 .xx-choice-thumb {
+  width: 33%;
+  max-width: 80px;
   height: 36px;
   border-radius: var(--radius-sm);
   display: grid;
@@ -226,7 +228,7 @@
   color: var(--text-inverse);
   font-size: 16px;
   font-weight: 700;
-  margin-bottom: 6px;
+  margin: 0 auto 6px;
 }
 
 .xx-choice-item h4 {