From cbbc0b44f324f352025dbaa7fef174e67fd4ba72 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: Thu, 25 Sep 2025 16:26:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=9D=E8=AF=95=E8=B0=83=E6=95=B4H5=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/work-flow/H5MediaViewer.tsx  | 11 +++++++----
 components/pages/work-flow/H5TaskInfo.tsx     |  2 +-
 components/pages/work-flow/thumbnail-grid.tsx |  2 +-
 3 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/components/pages/work-flow/H5MediaViewer.tsx b/components/pages/work-flow/H5MediaViewer.tsx
index e000ea1..c0877e9 100644
--- a/components/pages/work-flow/H5MediaViewer.tsx
+++ b/components/pages/work-flow/H5MediaViewer.tsx
@@ -371,13 +371,13 @@ export function H5MediaViewer({
 
     // 其他阶段：使用 Carousel
     return (
-        <div ref={rootRef} data-alt="h5-media-viewer" className="w-[100vw] relative px-4">
+        <div ref={rootRef} data-alt="h5-media-viewer" className={`w-[100vw] relative ${stage === 'final_video' ? '' : 'px-4'}`}>
             {/* 左侧最终视频缩略图栏（H5） 视频暂停时展示 */}
             {taskObject?.final?.url && !isPlaying && (
-              <div className="absolute left-4 top-0 z-[60]" data-alt="final-sidebar-h5">
+              <div className={`absolute left-0 top-4 z-[10] ${stage === 'final_video' ? 'left-0' : 'left-4'}`} data-alt="final-sidebar-h5">
                 <div className="flex items-start">
                   {isFinalBarOpen && (
-                    <div className="w-[3rem] max-h-[50vh] overflow-y-auto rounded-md backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl p-1 mr-2" data-alt="final-thumbnails">
+                    <div className="w-[3rem] max-h-[50vh] overflow-y-auto rounded-md backdrop-blur-lg bg-black/30 border border-white/20 shadow-xl p-1" data-alt="final-thumbnails">
                       <button
                         type="button"
                         onClick={() => onSelectView && onSelectView('final')}
@@ -491,8 +491,11 @@ export function H5MediaViewer({
               </div>
             )}
             <style jsx global>{`
-              [data-alt='carousel-wrapper'] .slick-slide { display: block; }
+              [data-alt='carousel-wrapper'] .slick-slide { display: flex !important;justify-content: center; }
+              .slick-slider { height: 100% !important;display: flex !important; }
+              .ant-carousel { height: 100% !important; }
               .slick-list { width: 100%;height: 100% !important;max-height: calc(100vh - 20rem); }
+              .slick-track { display: flex !important; align-items: center;height: 100% !important; }
             `}</style>
         </div>
     );
diff --git a/components/pages/work-flow/H5TaskInfo.tsx b/components/pages/work-flow/H5TaskInfo.tsx
index 9c25535..e8be32a 100644
--- a/components/pages/work-flow/H5TaskInfo.tsx
+++ b/components/pages/work-flow/H5TaskInfo.tsx
@@ -125,7 +125,7 @@ const H5TaskInfo: React.FC<H5TaskInfoProps> = ({
   return (
     <div
       data-alt="h5-header"
-      className={`absolute top-0 left-0 right-0 z-[50] pr-1 ${className || ''}`}
+      className={`absolute top-0 -left-4 right-0 z-[50] pr-1 ${className || ''}`}
     >
       <div
         data-alt="h5-header-bar"
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index fa291a7..cf9ca5b 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -356,7 +356,7 @@ export function ThumbnailGrid({
     <div
       ref={thumbnailsRef}
       tabIndex={0}
-      className={`w-full h-full grid grid-flow-col gap-2 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none auto-cols-[${cols}] ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '' : '!auto-cols-max'}`}
+      className={`w-full h-full grid grid-flow-col gap-2 overflow-x-auto hide-scrollbar px-1 py-1 cursor-grab active:cursor-grabbing focus:outline-none select-none auto-cols-[${cols}] ${aspectRatio === 'VIDEO_ASPECT_RATIO_LANDSCAPE' ? '' : '!auto-cols-min'}`}
       autoFocus
       onMouseDown={handleMouseDown}
       onMouseMove={handleMouseMove}