From 005cff1ce51f66ca81e30576bbbc7f638320c97b Mon Sep 17 00:00:00 2001
From: CI Bot <ci@xiaoxiajianji.com>
Date: Wed, 9 Sep 2026 17:32:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=AE=9E=E7=8E=B0=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E5=AE=9E=E6=97=B6=E9=A2=84=E8=A7=88=E8=A6=86=E7=9B=96=E5=B1=82?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=AE=E5=A4=8D=20titleConfig=20=E6=9C=AA=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=20TS6133=20=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/pages/ai-avatar/AiAvatarPage.tsx |  1 +
 .../components/PanelVideoSelector.tsx         | 31 +++++++++++++++++--
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx b/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx
index b5a8ff558..0dd14fe60 100644
--- a/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx
+++ b/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx
@@ -217,6 +217,7 @@ const AiAvatarPage: React.FC = () => {
               selectedVideo={state.selectedVideo}
               onSelectVideo={() => state.setShowAssetPicker(true)}
               onRemoveVideo={state.removeVideo}
+              titleConfig={state.titleConfig}
             />
           </div>
         </div>
diff --git a/apps/web/src/pages/ai-avatar/components/PanelVideoSelector.tsx b/apps/web/src/pages/ai-avatar/components/PanelVideoSelector.tsx
index 751d6fa59..71ec0b3b5 100644
--- a/apps/web/src/pages/ai-avatar/components/PanelVideoSelector.tsx
+++ b/apps/web/src/pages/ai-avatar/components/PanelVideoSelector.tsx
@@ -4,13 +4,15 @@
  * - 已选视频：竖屏 9:16 预览播放器 + 视频信息卡片 + 移除按钮
  */
 import type { AssetItem } from "@/api/assets"
+import type { AiAvatarTitleConfig } from "../types"
+import { getFontFamily } from "@/pages/generate/constants"
 
 export interface PanelVideoSelectorProps {
   selectedVideo: AssetItem | null
   /** 触发打开素材库弹窗 */
   onSelectVideo: () => void
   onRemoveVideo: () => void
-  titleConfig?: unknown
+  titleConfig?: AiAvatarTitleConfig
 }
 
 /** 格式化时长（秒 → mm:ss） */
@@ -55,13 +57,36 @@ export function PanelVideoSelector({
 
   return (
     <div>
-      {/* 竖屏 9:16 视频预览播放器 */}
-      <div className="aa-video-preview">
+      {/* 竖屏 9:16 视频预览播放器 + 标题实时预览 */}
+      <div className="aa-video-preview" style={{ position: "relative" }}>
         {fileUrl ? (
           <video src={fileUrl} poster={selectedVideo.thumbnail_url} controls playsInline />
         ) : (
           <div className="aa-video-preview__placeholder">视频暂不可预览</div>
         )}
+        {titleConfig?.title && (
+          <div
+            style={{
+              position: "absolute",
+              left: "50%",
+              transform: "translateX(-50%)",
+              ...(titleConfig.position === "top" ? { top: "10%" } : titleConfig.position === "bottom" ? { bottom: "10%" } : { top: "50%", transform: "translate(-50%, -50%)" }),
+              fontSize: titleConfig.size,
+              fontFamily: `"${titleConfig.font}", sans-serif`,
+              color: titleConfig.color,
+              fontWeight: titleConfig.bold ? 700 : 400,
+              fontStyle: titleConfig.italic ? "italic" : "normal",
+              textShadow: titleConfig.shadow ? "2px 2px 4px rgba(0,0,0,0.7)" : undefined,
+              WebkitTextStroke: titleConfig.stroke ? "1px rgba(0,0,0,0.5)" : undefined,
+              pointerEvents: "none",
+              zIndex: 10,
+              maxWidth: "90%",
+              textAlign: "center",
+            }}
+          >
+            {titleConfig.title}
+          </div>
+        )}
       </div>
 
       {/* 视频信息卡片：文件名 / 时长 / 分辨率 */}