调整工作流样式布局

components/pages/style/work-flow.css

@@ -159,6 +159,10 @@
   display: flex;
   overflow: hidden;
   min-height: 0;
+
+  display: grid;
+  grid-auto-rows: auto;
+  justify-content: center;
 }
 .videoContainer-qteKNi {
   flex: 1;
@@ -166,13 +170,14 @@
   display: flex;
   position: relative;
   justify-content: center;
+
+  width: max-content;
 }
 .heroVideo-FIzuK1 {
   object-fit: cover;
   object-position: center;
   background-color: #0003;
   border-radius: 8px;
-  width: 100%;
   height: 100%;
 }
 .container-kIPoeH {

components/pages/work-flow.tsx

@@ -21,7 +21,6 @@ const WorkFlow = React.memo(function WorkFlow() {
     console.log("init-WorkFlow");
     return () => console.log("unmount-WorkFlow");
   }, []);
-  
   const containerRef = useRef<HTMLDivElement>(null);
   const [isEditModalOpen, setIsEditModalOpen] = React.useState(false);
   const [activeEditTab, setActiveEditTab] = React.useState('1');
@@ -92,8 +91,7 @@ const WorkFlow = React.memo(function WorkFlow() {
   return (
     <ErrorBoundary>
       <div className="w-full overflow-hidden h-[calc(100vh-6rem)] absolute top-[4rem] left-0 right-0 px-[1rem]">
-        <div className="flex h-full flex-col justify-start items-center">
+        <div className="w-full h-full">
-          <div className="container-H2sRZG">
           <div className="splashContainer-otuV_A">
             <div className="content-vPGYx8">
               <div className="info-UUGkPJ">
@@ -148,7 +146,7 @@ const WorkFlow = React.memo(function WorkFlow() {
                 ) : isLoading ? (
                   <Skeleton className="w-full aspect-video rounded-lg" />
                 ) : (
-                    <div className="heroVideo-FIzuK1" style={{ aspectRatio: "16 / 9" }} key={currentSketchIndex}>
+                  <div className={`heroVideo-FIzuK1 ${['final_video', 'script'].includes(taskObject.currentStage) ? 'h-[calc(100vh-6rem)] w-[calc((100vh-6rem)/9*16)]' : 'h-[calc(100vh-6rem-200px)] w-[calc((100vh-6rem-200px)/9*16)]'}`} style={{ aspectRatio: "16 / 9" }} key={currentSketchIndex}>
                     <ErrorBoundary>
                       <MediaViewer
                         taskObject={taskObject}
@@ -168,8 +166,7 @@ const WorkFlow = React.memo(function WorkFlow() {
                 )}
               </div>
               {taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
-                  <div className="imageGrid-ymZV9z hide-scrollbar">
+                <div className="h-[112px] w-[calc((100vh-6rem-200px)/9*16)]">
-                    <ErrorBoundary>
                   <ThumbnailGrid
                     isEditModalOpen={isEditModalOpen}
                     taskObject={taskObject}
@@ -183,14 +180,12 @@ const WorkFlow = React.memo(function WorkFlow() {
                     totalSketchCount={totalSketchCount}
                     onSketchSelect={setCurrentSketchIndex}
                   />
-                    </ErrorBoundary>
                 </div>
               )}
               
             </div>
           </div>
         </div>
-        </div>
 
         {/* 暂停/播放按钮 */}
         {

components/pages/work-flow/media-viewer.tsx

@@ -137,7 +137,7 @@ export const MediaViewer = React.memo(function MediaViewer({
     return (
       <video
         ref={finalVideoRef}
-        className="w-[auto] h-full object-cover rounded-lg"
+        className="w-full h-full object-cover rounded-lg"
         src={taskObject.final.url}
         autoPlay={isFinalVideoPlaying}
         loop
@@ -305,7 +305,7 @@ export const MediaViewer = React.memo(function MediaViewer({
             transition={{ duration: 0.8, ease: "easeInOut" }}
           >
             <video
-              className="w-[auto] h-full rounded-lg object-cover object-center"
+              className="w-full h-full rounded-lg object-cover object-center"
               src={taskObject.final.url}
               loop
               playsInline

components/pages/work-flow/thumbnail-grid.tsx

@@ -366,7 +366,7 @@ export function ThumbnailGrid({
     <div 
       ref={thumbnailsRef}
       tabIndex={0}
-      className="w-full grid grid-flow-col auto-cols-[20%] gap-4 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none"
+      className="w-full h-full grid grid-flow-col auto-cols-[20%] gap-4 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none"
       autoFocus
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}