From 2cb5f10d8e1df5ac34b59cfb39e819dcc7c43df4 Mon Sep 17 00:00:00 2001
From: xiaoxia <dev@xiaoxiajianji.com>
Date: Sat, 8 Aug 2026 15:41:00 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E5=8F=B3=E4=BE=A7=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF=20aspect-ratio=20=E5=8A=A8=E6=80=81=E9=80=82?=
 =?UTF-8?q?=E9=85=8D=20videoRatio=20(#1304)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: xiaoxia <dev@xiaoxiajianji.com>
Co-committed-by: xiaoxia <dev@xiaoxiajianji.com>
---
 .../src/pages/generate/components/PreviewVideoPanel.tsx    | 7 ++++---
 apps/web/src/pages/generate/generate.css                   | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
index 99df4811c..a64ce92d9 100644
--- a/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
+++ b/apps/web/src/pages/generate/components/PreviewVideoPanel.tsx
@@ -169,6 +169,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
   const isLoading = previewStatus === "pending" || previewStatus === "generating"
   const isError = previewStatus === "error"
   const showTitlePreview = !!titleSettings
+  const videoAspectStyle = { aspectRatio: (videoRatio || "16:9").replace(":", "/") }
 
   // video 模式 refs
   const canvasRef = useRef<HTMLCanvasElement>(null)
@@ -310,7 +311,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       {/* 生成中 */}
       {isLoading && (
         <div className="xx-preview-loading-panel">
-          <div className="xx-preview-video">
+          <div className="xx-preview-video" style={videoAspectStyle}>
             <div className="xx-preview-loading-center">
               <LoadingOutlined style={{ fontSize: 36, color: "#fff" }} spin />
               <p style={{ marginTop: 12, color: "rgba(255,255,255,0.8)", fontSize: 14 }}>
@@ -327,7 +328,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       {/* 生成失败 */}
       {isError && (
         <div className="xx-preview-error-panel">
-          <div className="xx-preview-video xx-preview-video--error">
+          <div className="xx-preview-video xx-preview-video--error" style={videoAspectStyle}>
             <p style={{ color: "rgba(255,255,255,0.8)", fontSize: 14 }}>预览生成失败</p>
           </div>
           <p className="xx-preview-error-msg">
@@ -342,7 +343,7 @@ export const PreviewVideoPanel: React.FC<PreviewVideoPanelProps> = ({
       {/* 预览成功 + Canvas 标题叠加 */}
       {hasPreview && (
         <div ref={containerRef} style={{ position: "relative" }}>
-          <div className="xx-preview-video">
+          <div className="xx-preview-video" style={videoAspectStyle}>
             <video
               ref={videoRef}
               src={previewResult.videoUrl}
diff --git a/apps/web/src/pages/generate/generate.css b/apps/web/src/pages/generate/generate.css
index 1804f3105..282e29f55 100644
--- a/apps/web/src/pages/generate/generate.css
+++ b/apps/web/src/pages/generate/generate.css
@@ -891,7 +891,7 @@
 
 /* ── 视频预览 ── */
 .xx-preview-video {
-  aspect-ratio: 9 / 16;
+  aspect-ratio: 16 / 9;
   max-height: 400px;
   border-radius: var(--radius-md);
   background: linear-gradient(135deg, var(--color-gray-900), var(--color-primary-900));
@@ -2647,7 +2647,7 @@
 .xx-preview-video-wrapper .xx-preview-video {
   max-width: 300px;
   width: 100%;
-  aspect-ratio: 9 / 16;
+  aspect-ratio: 16 / 9;
   margin-bottom: 0;
 }