From 211166f2039b54be169916175447e702ad5fb0cc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=81=B5=E5=BA=94?= <lingying@coze.email>
Date: Thu, 10 Sep 2026 13:42:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(ai-avatar):=20=E9=A2=84=E8=A7=88=E7=BC=A9?=
 =?UTF-8?q?=E6=94=BE/=E6=A0=87=E9=A2=98=E5=8F=A0=E5=8A=A0/=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93422/=E6=99=BA=E8=83=BD=E5=B0=81=E9=9D=A2=E8=B6=85?=
 =?UTF-8?q?=E6=97=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 对口型预览缩小: .aa-lipsync-preview 加 max-width:240px + 居中，9:16 等比不变，约原大小 1/2
2. 标题实时叠加预览: 视频容器 relative + 标题 absolute 定位（top/bottom/center 按配置），字号按 0.55 倍等比缩
3. 渲染 422 修复: submitRender 删掉 resolution 字段（后端 CreateAiAvatarRenderRequest schema 无此字段，Pydantic 校验失败）
4. 智能封面超时: generateSmartCover 接口超时从默认 10s 加到 60s（MediaKit 抽帧+评分+OSS转存耗时 >10s）

不改其他功能，无冗余代码。
---
 apps/web/src/pages/ai-avatar/AiAvatar.css     |  6 ++-
 apps/web/src/pages/ai-avatar/AiAvatarPage.tsx |  4 +-
 apps/web/src/pages/ai-avatar/api/aiAvatar.ts  |  2 +-
 .../components/PanelLipsyncPreview.tsx        | 38 +++++++++++++++++--
 4 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/pages/ai-avatar/AiAvatar.css b/apps/web/src/pages/ai-avatar/AiAvatar.css
index 8d19bbbac..e77e7660b 100644
--- a/apps/web/src/pages/ai-avatar/AiAvatar.css
+++ b/apps/web/src/pages/ai-avatar/AiAvatar.css
@@ -484,16 +484,19 @@
   margin-bottom: 12px;
 }
 
+
 .aa-lipsync-preview {
   width: 100%;
+  max-width: 240px;
   aspect-ratio: 9/16;
   background: #0f0f1a;
   border-radius: 10px;
   overflow: hidden;
-  margin-bottom: 12px;
+  margin: 0 auto 12px auto;
   display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
 }
 
 .aa-lipsync-preview video {
@@ -1246,3 +1249,4 @@
   width: auto;
   min-width: 300px;
 }
+
diff --git a/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx b/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx
index 0c5d807ee..3a3e113b5 100644
--- a/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx
+++ b/apps/web/src/pages/ai-avatar/AiAvatarPage.tsx
@@ -202,7 +202,6 @@ const AiAvatarPage: React.FC = () => {
         title_config: buildTitleConfigPayload(state.titleConfig),
         // cover_config：智能封面 cover_url + 截帧 timestamp
         cover_config: buildCoverConfigPayload(state.coverConfig, state.coverConfig.smart_cover_url),
-        resolution: state.resolution,
       })
       message.success("渲染任务已提交，可在视频管理中查看进度")
     } catch (err) {
@@ -218,7 +217,7 @@ const AiAvatarPage: React.FC = () => {
     state.bRollSegments,
     state.titleConfig,
     state.coverConfig,
-    state.resolution,
+
   ])
 
   /* ── 智能封面：调后端 MediaKit 选帧接口（#1822） ── */
@@ -359,6 +358,7 @@ const AiAvatarPage: React.FC = () => {
                   bRollSegments={state.bRollSegments}
                   onOpenBRollModal={() => state.setShowBRollModal(true)}
                   onRemoveBRoll={state.removeBRollSegment}
+                  titleConfig={state.titleConfig}
                 />
                 <div className="aa-step-btn-row">
                   <button type="button" className="aa-btn" onClick={handlePrevStep}>
diff --git a/apps/web/src/pages/ai-avatar/api/aiAvatar.ts b/apps/web/src/pages/ai-avatar/api/aiAvatar.ts
index 87d544150..d4d8e379b 100644
--- a/apps/web/src/pages/ai-avatar/api/aiAvatar.ts
+++ b/apps/web/src/pages/ai-avatar/api/aiAvatar.ts
@@ -66,6 +66,7 @@ export const generateSmartCover = async (
   const response = await apiClient.post<{ cover_url: string; status: string; message: string }>(
     "/ai-avatar/render/smart-cover",
     { video_url, max_frames },
+    { timeout: 60000 },
   )
   return response.data
 }
@@ -78,7 +79,6 @@ export const submitRender = async (data: {
   title_config?: Record<string, unknown>
   cover_config?: Record<string, unknown>
   project_id?: string
-  resolution?: string
 }): Promise<RenderJob> => {
   const response = await apiClient.post<RenderJob>("/ai-avatar/render", data)
   return response.data
diff --git a/apps/web/src/pages/ai-avatar/components/PanelLipsyncPreview.tsx b/apps/web/src/pages/ai-avatar/components/PanelLipsyncPreview.tsx
index 2b40a4380..d7acb0bad 100755
--- a/apps/web/src/pages/ai-avatar/components/PanelLipsyncPreview.tsx
+++ b/apps/web/src/pages/ai-avatar/components/PanelLipsyncPreview.tsx
@@ -1,8 +1,9 @@
 /**
  * AI数字人 — 对口型预览面板（步骤2用）
  * B-roll 画面插入 + 对口型视频预览 + 生成/重新生成按钮
+ * v3.1: 预览容器按 1/2 缩放、标题实时叠加预览
  */
-import type { LipsyncJob, BRollSegment } from "../types"
+import type { LipsyncJob, BRollSegment, AiAvatarTitleConfig } from "../types"
 
 interface PanelLipsyncPreviewProps {
   lipsyncJob: LipsyncJob | null
@@ -10,6 +11,8 @@ interface PanelLipsyncPreviewProps {
   bRollSegments: BRollSegment[]
   onOpenBRollModal: () => void
   onRemoveBRoll: (id: string) => void
+  /** 标题配置（实时叠加预览用） */
+  titleConfig?: AiAvatarTitleConfig
 }
 
 const BROLL_MODE_LABEL: Record<BRollSegment["mode"], string> = {
@@ -29,6 +32,7 @@ export function PanelLipsyncPreview({
   bRollSegments,
   onOpenBRollModal,
   onRemoveBRoll,
+  titleConfig,
 }: PanelLipsyncPreviewProps) {
   const isGenerating =
     lipsyncJob?.status === "pending" || lipsyncJob?.status === "processing"
@@ -42,6 +46,31 @@ export function PanelLipsyncPreview({
         ? "排队中…"
         : "对口型生成中…"
 
+  /** 标题叠加样式 */
+  const titleOverlayStyle: React.CSSProperties | null = titleConfig?.title
+    ? {
+        position: "absolute",
+        left: "50%",
+        transform: "translateX(-50%)",
+        color: titleConfig.color || "#ffffff",
+        fontFamily: titleConfig.font || "思源黑体",
+        fontSize: `${(titleConfig.size || 36) * 0.55}px`, // 预览等比缩
+        fontWeight: titleConfig.bold ? 700 : 400,
+        fontStyle: titleConfig.italic ? "italic" : "normal",
+        whiteSpace: "pre-wrap",
+        textAlign: "center",
+        width: "90%",
+        padding: "4px 8px",
+        textShadow: titleConfig.shadow ? "0 2px 4px rgba(0,0,0,0.8)" : undefined,
+        WebkitTextStroke: titleConfig.stroke ? "1.5px #000" : undefined,
+        ...(titleConfig.position === "top"
+          ? { top: 8 }
+          : titleConfig.position === "bottom"
+            ? { bottom: 8 }
+            : { top: "50%", transform: "translateX(-50%) translateY(-50%)" }),
+      }
+    : null
+
   return (
     <div className="aa-script-lipsync">
       {/* ── B-roll 画面 ── */}
@@ -111,13 +140,16 @@ export function PanelLipsyncPreview({
         )}
       </div>
 
-      {/* ── 对口型预览 ─ */}
+      {/* ── 对口型预览（v3.1: 缩放1/2 + 标题叠加） ─ */}
       <div className="aa-lipsync-section">
         <div className="aa-lipsync-section__title">对口型预览</div>
 
         <div className="aa-lipsync-preview">
           {isDone && lipsyncJob?.output_video_url ? (
-            <video src={lipsyncJob.output_video_url} controls />
+            <div style={{ position: "relative", width: "100%", height: "100%" }}>
+              <video src={lipsyncJob.output_video_url} controls />
+              {titleOverlayStyle && <div style={titleOverlayStyle}>{titleConfig!.title}</div>}
+            </div>
           ) : isGenerating ? (
             <div style={{ width: "80%", textAlign: "center", color: "#fff" }}>
               <div style={{ fontSize: 13, marginBottom: 8 }}>