From 98f132f38118abe58fda00fe698eea2c0db38f7b Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 4 Aug 2026 14:05:22 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat(title):=20=E6=A0=87=E9=A2=98=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=94=B9=E4=B8=BA=E5=8F=A0=E5=8A=A0=E5=9C=A8=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=94=BB=E9=9D=A2=E4=B8=8A=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?top/center/bottom=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../generate/components/PreviewVideoPanel.tsx | 75 ++++++++++---------
 1 file changed, 38 insertions(+), 37 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 6cb865fc7..cf7003223 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -21,16 +21,16 @@ interface PreviewVideoPanelProps {
   titleSettings?: TitleSettings
 }
 
-/** 根据 position 返回垂直对齐样式 */
-const positionAlignStyle = (position: string): React.CSSProperties => {
+/** 根据 position 返回 absolute 定位样式（叠加在视频上） */
+const positionOverlayStyle = (position: string): React.CSSProperties => {
   switch (position) {
     case "top":
-      return { justifyContent: "flex-start", paddingTop: 16 }
+      return { top: 16, left: 0, right: 0 }
     case "center":
-      return { justifyContent: "center" }
+      return { top: "50%", left: 0, right: 0, transform: "translateY(-50%)" }
     case "bottom":
     default:
-      return { justifyContent: "flex-end", paddingBottom: 16 }
+      return { bottom: 56, left: 0, right: 0 } // 56px = 给视频控制条留空间
   }
 }
 
@@ -121,47 +121,47 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
         </div>
       )}
 
-      {/* 预览成功 */}
+      {/* 预览成功 + 标题叠加 */}
       {hasPreview && (
-        <div className="xx-preview-video">
-          <video src={previewResult.videoUrl} controls preload="metadata" />
+        <div style={{ position: "relative" }}>
+          <div className="xx-preview-video">
+            <video src={previewResult.videoUrl} controls preload="metadata" />
+          </div>
+          {/* 标题叠加在视频画面上 */}
+          {showTitlePreview && (
+            <div
+              style={{
+                position: "absolute",
+                ...positionOverlayStyle(titleSettings!.position),
+                width: "100%",
+                zIndex: 1,
+                pointerEvents: "none",
+              }}
+            >
+              <span style={buildTitleStyle(titleSettings!)}>
+                {titleText && titleText.trim() ? titleText : "请选择或输入标题"}
+              </span>
+            </div>
+          )}
         </div>
       )}
 
-      {/* 标题实时预览区域 */}
-      {showTitlePreview && (
+      {/* 无视频时的标题预览（idle/loading/error 状态下仍然显示标题预览） */}
+      {!hasPreview && showTitlePreview && (
         <div
-          className="xx-preview-title-section"
           style={{
+            background: "rgba(0,0,0,0.3)",
+            borderRadius: 8,
+            minHeight: 64,
             marginTop: 12,
-            padding: "12px 0",
-            borderTop: "1px solid rgba(255,255,255,0.08)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
-          <div
-            style={{
-              fontSize: 12,
-              color: "var(--text-tertiary)",
-              marginBottom: 8,
-              paddingLeft: 4,
-            }}
-          >
-            标题预览
-          </div>
-          <div
-            style={{
-              background: "rgba(0,0,0,0.3)",
-              borderRadius: 8,
-              minHeight: 64,
-              display: "flex",
-              alignItems: "center",
-              ...positionAlignStyle(titleSettings!.position),
-            }}
-          >
-            <span style={buildTitleStyle(titleSettings!)}>
-              {titleText && titleText.trim() ? titleText : "请选择或输入标题"}
-            </span>
-          </div>
+          <span style={buildTitleStyle(titleSettings!)}>
+            {titleText && titleText.trim() ? titleText : "请选择或输入标题"}
+          </span>
         </div>
       )}
 
@@ -190,3 +190,4 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
 }
 
 export default PreviewVideoPanel
+
-- 
2.54.0


From 8120d1c5a3d2b7ce7d3267296ff70f080333bee3 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 4 Aug 2026 14:05:38 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat(title):=20=E6=A0=87=E9=A2=98=E9=A2=84?=
 =?UTF-8?q?=E8=A7=88=E6=94=B9=E4=B8=BA=E5=8F=A0=E5=8A=A0=E5=9C=A8=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E7=94=BB=E9=9D=A2=E4=B8=8A=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?top/center/bottom=E5=AE=9A=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

-- 
2.54.0


From 0b8f8dd18c97a4497925b5f6c7279e52dcb43b19 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Tue, 4 Aug 2026 14:17:40 +0800
Subject: [PATCH 3/3] style: fix prettier formatting for PreviewVideoPanel.tsx

---
 apps/web/src/pages/generate/components/PreviewVideoPanel.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index cf7003223..4c30f9b67 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -190,4 +190,3 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
 }
 
 export default PreviewVideoPanel
-
-- 
2.54.0