From 761beb799d1c401bf3f61558188c608235bb5107 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8C=97=E6=9E=B3?=
 <7854742+wang_rumeng@user.noreply.gitee.com>
Date: Sat, 4 Oct 2025 17:11:46 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E6=AF=94=E4=BE=8B=E5=8D=A0?=
 =?UTF-8?q?=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/work-flow.tsx              |  3 ++-
 components/pages/work-flow/media-viewer.tsx | 20 +++++++++++---------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index fcb3276..ebe86cd 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -476,7 +476,8 @@ Please process this video editing request.`;
                     onGotoCut={generateEditPlan}
                     isSmartChatBoxOpen={isSmartChatBoxOpen}
                     onRetryVideo={(video_id) => handleRetryVideo(video_id)}
-                    aspectRatio={aspectRatio}
+                    aspectRatio={aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '16:9' : '9:16'}
+                    placeholderWidth={aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? `calc((100vh - ${taskObject.final.url ? '8rem' : '12rem'}) / 9 * 16)` : `calc((100vh - ${taskObject.final.url ? '8rem' : '12rem'}) / 16 * 9)`}
                   />
 
                   {['scene', 'character', 'video', 'final_video'].includes(taskObject.currentStage) && (
diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index 134de1d..35fc2e2 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -40,7 +40,8 @@ interface MediaViewerProps {
   enableVideoEdit?: boolean;
   onVideoEditDescriptionSubmit?: (editPoint: EditPointType, description: string) => void;
   projectId?: string;
-  aspectRatio: AspectRatioValue;
+  aspectRatio: string;
+  placeholderWidth: string;
 }
 
 export const MediaViewer = React.memo(function MediaViewer({
@@ -65,7 +66,8 @@ export const MediaViewer = React.memo(function MediaViewer({
   enableVideoEdit = true,
   onVideoEditDescriptionSubmit,
   projectId,
-  aspectRatio
+  aspectRatio,
+  placeholderWidth
 }: MediaViewerProps) {
   const mainVideoRef = useRef<HTMLVideoElement>(null);
   const finalVideoRef = useRef<HTMLVideoElement>(null);
@@ -217,7 +219,7 @@ export const MediaViewer = React.memo(function MediaViewer({
         ref={finalVideoRef}
         className="w-full h-full object-contain rounded-lg"
         style={{
-          aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16"
+          aspectRatio: aspectRatio
         }}
         src={taskObject.final.url}
         autoPlay={isFinalVideoPlaying}
@@ -436,7 +438,7 @@ export const MediaViewer = React.memo(function MediaViewer({
             <video
               className="w-full h-full rounded-lg object-contain object-center"
               style={{
-                aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16"
+                aspectRatio: aspectRatio
               }}
               src={taskObject.final.url}
               loop
@@ -463,7 +465,7 @@ export const MediaViewer = React.memo(function MediaViewer({
           {/* 编辑和剪辑按钮 */}
           <div className="absolute top-2 right-2 z-[21] flex items-center gap-2 transition-right duration-100"
           style={{
-            right: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? toosBtnRight : ''
+            right: aspectRatio === '16:9' ? toosBtnRight : ''
           }}>
             <Tooltip placement="top" title='Edit'>
               <GlassIconButton
@@ -514,7 +516,7 @@ export const MediaViewer = React.memo(function MediaViewer({
         key={`render-video-${urls}`}
         ref={videoContentRef}
         style={{
-          width: taskObject.videos.data[currentSketchIndex].video_status !== 1 ? 'calc(100vw - 8rem)' : '100%'
+          width: taskObject.videos.data[currentSketchIndex].video_status !== 1 ? placeholderWidth : '100%'
         }}
       >
         {/* 背景模糊的图片 */}
@@ -562,7 +564,7 @@ export const MediaViewer = React.memo(function MediaViewer({
                 key={taskObject.videos.data[currentSketchIndex].urls[0]}
                 className="w-full h-full rounded-lg object-contain object-center relative z-10"
                 style={{
-                  aspectRatio: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? "16 / 9" : "9 / 16"
+                  aspectRatio: aspectRatio
                 }}
                 src={taskObject.videos.data[currentSketchIndex].urls[0]}
                 poster={getFirstFrame(taskObject.videos.data[currentSketchIndex].urls[0])}
@@ -597,7 +599,7 @@ export const MediaViewer = React.memo(function MediaViewer({
 
             {/* 跳转剪辑按钮 */}
             <div className="absolute top-2 right-2 z-[21] flex items-center gap-2 transition-right duration-100" style={{
-              right: aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? toosBtnRight : ''
+              right: aspectRatio === '16:9' ? toosBtnRight : ''
             }}>
               {/* 视频编辑模式切换按钮 - 通过服务器配置控制显示 */}
               {enableVideoEdit && showVideoModification && (
@@ -689,7 +691,7 @@ export const MediaViewer = React.memo(function MediaViewer({
         className="relative w-full h-full rounded-lg group overflow-hidden"
         key={`render-sketch-${currentSketch.url}`}
         style={{
-          width: currentSketch.status === 1 ? '100%' : 'calc(100vw - 8rem)'
+          width: currentSketch.status === 1 ? '100%' : placeholderWidth
         }}
       >
         {/* 状态 */}