From 3b56778cd46c9ce64bd9b4b90eb9b25ae4bbf246 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=89=8D=E7=AB=AFAgent?= <frontend-agent@xiaoxia.local>
Date: Tue, 4 Aug 2026 22:32:15 +0800
Subject: [PATCH] =?UTF-8?q?feat(asset):=20=E7=B4=A0=E6=9D=90=E6=82=AC?=
 =?UTF-8?q?=E6=B5=AE=E9=A2=84=E8=A7=88=E6=94=AF=E6=8C=81=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=E6=92=AD=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- MediaAsset 新增 source_url 字段，映射自 AssetItem.file_url
- PreviewOverlay 视频素材使用 video 标签自动播放（muted+loop）
- 图片素材保持 img 标签不变
- CSS 增加 video 元素样式适配
---
 apps/web/src/api/template-editor/mediaAssets.ts       |  1 +
 apps/web/src/api/template-editor/types.ts             |  2 ++
 .../src/components/asset-selector/AssetSelector.css   |  3 ++-
 .../src/components/asset-selector/PreviewOverlay.tsx  | 11 ++++++++++-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/api/template-editor/mediaAssets.ts b/apps/web/src/api/template-editor/mediaAssets.ts
index 9e13b7680..613df0f72 100644
--- a/apps/web/src/api/template-editor/mediaAssets.ts
+++ b/apps/web/src/api/template-editor/mediaAssets.ts
@@ -18,6 +18,7 @@ const mapAssetToMediaAsset = (asset: AssetItem): MediaAsset => {
     id: asset.id,
     name: asset.name,
     type: inferMediaType(asset.mime_type || ""),
+    source_url: asset.file_url,
     thumbnail_url: asset.thumbnail_url,
     duration: asset.duration ?? metaDuration,
     size: asset.file_size ?? undefined,
diff --git a/apps/web/src/api/template-editor/types.ts b/apps/web/src/api/template-editor/types.ts
index b9bc8bf89..42bf46849 100644
--- a/apps/web/src/api/template-editor/types.ts
+++ b/apps/web/src/api/template-editor/types.ts
@@ -424,6 +424,8 @@ export interface MediaAsset {
   id: string
   name: string
   type: "video" | "image" | "audio"
+  /** 源文件 URL（视频/原图），用于悬浮预览播放 */
+  source_url?: string
   /** 缩略图 URL */
   thumbnail_url?: string
   /** 时长（秒），仅 video/audio */
diff --git a/apps/web/src/components/asset-selector/AssetSelector.css b/apps/web/src/components/asset-selector/AssetSelector.css
index 3e19910da..cd32261f7 100644
--- a/apps/web/src/components/asset-selector/AssetSelector.css
+++ b/apps/web/src/components/asset-selector/AssetSelector.css
@@ -456,7 +456,8 @@
   margin-bottom: 8px;
 }
 
-.as-preview-overlay-thumb img {
+.as-preview-overlay-thumb img,
+.as-preview-overlay-thumb video {
   width: 100%;
   height: 100%;
   object-fit: cover;
diff --git a/apps/web/src/components/asset-selector/PreviewOverlay.tsx b/apps/web/src/components/asset-selector/PreviewOverlay.tsx
index 5b7d2da21..72c47bb92 100644
--- a/apps/web/src/components/asset-selector/PreviewOverlay.tsx
+++ b/apps/web/src/components/asset-selector/PreviewOverlay.tsx
@@ -12,7 +12,16 @@ const PreviewOverlay: React.FC<PreviewOverlayProps> = ({ asset, position }) => {
   return (
     <div className="as-preview-overlay" style={{ left: position.x, top: position.y }}>
       <div className="as-preview-overlay-thumb">
-        {asset.thumbnail_url ? (
+        {asset.type === "video" && asset.source_url ? (
+          <video
+            src={asset.source_url}
+            autoPlay
+            muted
+            loop
+            playsInline
+            poster={asset.thumbnail_url}
+          />
+        ) : asset.thumbnail_url ? (
           <img src={asset.thumbnail_url} alt={asset.name} />
         ) : (
           <span className="as-preview-overlay-thumb-icon">{MATERIAL_TYPE_ICONS[asset.type]}</span>
-- 
2.54.0