调整工作流样式布局

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,102 +91,98 @@ 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="splashContainer-otuV_A">
+            <div className="content-vPGYx8">
-              <div className="content-vPGYx8">
+              <div className="info-UUGkPJ">
-                <div className="info-UUGkPJ">
+                <ErrorBoundary>
-                  <ErrorBoundary>
+                  <TaskInfo
-                    <TaskInfo
+                    isLoading={isLoading}
-                      isLoading={isLoading}
+                    taskObject={taskObject}
-                      taskObject={taskObject}
+                    currentLoadingText={currentLoadingText}
-                      currentLoadingText={currentLoadingText}
+                    dataLoadError={dataLoadError}
-                      dataLoadError={dataLoadError}
+                    roles={taskObject.roles.data}
-                      roles={taskObject.roles.data}
+                    isPauseWorkFlow={isPauseWorkFlow}
-                      isPauseWorkFlow={isPauseWorkFlow}
+                  />
-                    />
+                </ErrorBoundary>
-                  </ErrorBoundary>
-                </div>
               </div>
-              <div className="media-Ocdu1O rounded-lg">
+            </div>
-                <div
+            <div className="media-Ocdu1O rounded-lg">
-                  className="videoContainer-qteKNi"
+              <div
-                  ref={containerRef}
+                className="videoContainer-qteKNi"
-                >
+                ref={containerRef}
-                  {dataLoadError ? (
+              >
+                {dataLoadError ? (
+                  <motion.div
+                    className="flex flex-col items-center justify-center w-full aspect-video rounded-lg bg-red-50 border-2 border-red-200"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{ duration: 0.5 }}
+                  >
                     <motion.div
-                      className="flex flex-col items-center justify-center w-full aspect-video rounded-lg bg-red-50 border-2 border-red-200"
+                      className="flex items-center gap-3 mb-4"
-                      initial={{ opacity: 0, y: 20 }}
+                      initial={{ scale: 0.8 }}
-                      animate={{ opacity: 1, y: 0 }}
+                      animate={{ scale: 1 }}
-                      transition={{ duration: 0.5 }}
+                      transition={{ duration: 0.3, delay: 0.2 }}
                     >
-                      <motion.div
+                      <AlertCircle className="w-8 h-8 text-red-500" />
-                        className="flex items-center gap-3 mb-4"
+                      <h3 className="text-lg font-medium text-red-800">数据加载失败</h3>
-                        initial={{ scale: 0.8 }}
-                        animate={{ scale: 1 }}
-                        transition={{ duration: 0.3, delay: 0.2 }}
-                      >
-                        <AlertCircle className="w-8 h-8 text-red-500" />
-                        <h3 className="text-lg font-medium text-red-800">数据加载失败</h3>
-                      </motion.div>
-
-                      <p className="text-red-600 text-center mb-6 max-w-md px-4">
-                        {dataLoadError}
-                      </p>
-
-                      <motion.button
-                        className="flex items-center gap-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
-                        onClick={() => retryLoadData?.()}
-                        whileHover={{ scale: 1.05 }}
-                        whileTap={{ scale: 0.95 }}
-                      >
-                        <RefreshCw className="w-4 h-4" />
-                        重试加载
-                      </motion.button>
                     </motion.div>
-                  ) : isLoading ? (
+
-                    <Skeleton className="w-full aspect-video rounded-lg" />
+                    <p className="text-red-600 text-center mb-6 max-w-md px-4">
-                  ) : (
+                      {dataLoadError}
-                    <div className="heroVideo-FIzuK1" style={{ aspectRatio: "16 / 9" }} key={currentSketchIndex}>
+                    </p>
-                      <ErrorBoundary>
+
-                        <MediaViewer
+                    <motion.button
-                          taskObject={taskObject}
+                      className="flex items-center gap-2 px-6 py-3 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
-                          scriptData={scriptData}
+                      onClick={() => retryLoadData?.()}
-                          currentSketchIndex={currentSketchIndex}
+                      whileHover={{ scale: 1.05 }}
-                          isVideoPlaying={isVideoPlaying}
+                      whileTap={{ scale: 0.95 }}
-                          onEditModalOpen={handleEditModalOpen}
+                    >
-                          onToggleVideoPlay={toggleVideoPlay}
+                      <RefreshCw className="w-4 h-4" />
-                          setIsPauseWorkFlow={setIsPauseWorkFlow}
+                      重试加载
-                          setAnyAttribute={setAnyAttribute}
+                    </motion.button>
-                          isPauseWorkFlow={isPauseWorkFlow}
+                  </motion.div>
-                          applyScript={applyScript}
+                ) : isLoading ? (
-                          mode={mode}
+                  <Skeleton className="w-full aspect-video rounded-lg" />
-                        />
+                ) : (
-                      </ErrorBoundary>
+                  <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}>
-                    </div>
-                  )}
-                </div>
-                {taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
-                  <div className="imageGrid-ymZV9z hide-scrollbar">
                     <ErrorBoundary>
-                      <ThumbnailGrid
+                      <MediaViewer
-                        isEditModalOpen={isEditModalOpen}
                         taskObject={taskObject}
-                        isLoading={isLoading}
+                        scriptData={scriptData}
                         currentSketchIndex={currentSketchIndex}
-                        taskSketch={taskSketch}
+                        isVideoPlaying={isVideoPlaying}
-                        taskVideos={taskVideos}
+                        onEditModalOpen={handleEditModalOpen}
-                        isGeneratingSketch={isGeneratingSketch}
+                        onToggleVideoPlay={toggleVideoPlay}
-                        isGeneratingVideo={isGeneratingVideo}
+                        setIsPauseWorkFlow={setIsPauseWorkFlow}
-                        sketchCount={sketchCount}
+                        setAnyAttribute={setAnyAttribute}
-                        totalSketchCount={totalSketchCount}
+                        isPauseWorkFlow={isPauseWorkFlow}
-                        onSketchSelect={setCurrentSketchIndex}
+                        applyScript={applyScript}
+                        mode={mode}
                       />
                     </ErrorBoundary>
                   </div>
                 )}
-                
               </div>
+              {taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
+                <div className="h-[112px] w-[calc((100vh-6rem-200px)/9*16)]">
+                  <ThumbnailGrid
+                    isEditModalOpen={isEditModalOpen}
+                    taskObject={taskObject}
+                    isLoading={isLoading}
+                    currentSketchIndex={currentSketchIndex}
+                    taskSketch={taskSketch}
+                    taskVideos={taskVideos}
+                    isGeneratingSketch={isGeneratingSketch}
+                    isGeneratingVideo={isGeneratingVideo}
+                    sketchCount={sketchCount}
+                    totalSketchCount={totalSketchCount}
+                    onSketchSelect={setCurrentSketchIndex}
+                  />
+                </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}