From 9365896bb672a877b8abe7d9b8aeb663858702c9 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: Fri, 5 Sep 2025 17:24:16 +0800
Subject: [PATCH] =?UTF-8?q?-=20[x]=20=E6=98=BE=E7=A4=BA=20=E5=8E=9F?=
 =?UTF-8?q?=E5=88=86=E9=95=9C=EF=BC=8C=E5=89=AA=E8=BE=91=E5=90=8E=20-=20[x?=
 =?UTF-8?q?]=20=E6=94=AF=E6=8C=81=E6=89=B9=E9=87=8F=E4=B8=8B=E8=BD=BD?=
 =?UTF-8?q?=E5=88=86=E9=95=9C=E8=A7=86=E9=A2=91=20Chatbox=E6=9F=A5?=
 =?UTF-8?q?=E6=89=BE=E6=B6=88=E6=81=AF=E6=98=AF=E5=90=A6=E6=9C=89=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=20=E8=BF=98=E5=9C=A8=E6=89=A7=E8=A1=8C=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/SmartChatBox/useMessages.ts        |  9 ++++
 components/pages/work-flow.tsx                |  4 +-
 components/pages/work-flow/media-viewer.tsx   | 21 +++++++-
 components/pages/work-flow/thumbnail-grid.tsx | 53 ++++++++++++++-----
 .../pages/work-flow/use-workflow-data.tsx     |  1 -
 utils/tools.ts                                | 10 ++++
 6 files changed, 80 insertions(+), 18 deletions(-)

diff --git a/components/SmartChatBox/useMessages.ts b/components/SmartChatBox/useMessages.ts
index 79f2312..a3e5de4 100644
--- a/components/SmartChatBox/useMessages.ts
+++ b/components/SmartChatBox/useMessages.ts
@@ -267,6 +267,15 @@ export function useMessages({ config, onMessagesUpdate }: UseMessagesProps): [Me
     }
   }, [updateMessages]);
 
+  // 监听 消息列表中是否存在 pending 状态的消息，有的话 将 loading 置为 true
+  useEffect(() => {
+    if (displayMessages.some(msg => msg.status === 'pending')) {
+      setIsLoading(true);
+    } else {
+      setIsLoading(false);
+    }
+  }, [displayMessages]);
+
   return [
     { 
       messages: displayMessages, 
diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index 1eb56e8..edd8e2f 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -216,7 +216,7 @@ const WorkFlow = React.memo(function WorkFlow() {
               {isLoading ? (
                 <Skeleton className="w-full aspect-video rounded-lg" />
               ) : (
-                <div className={`relative 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={taskObject.currentStage+'_'+currentSketchIndex}>
+                <div className={`relative heroVideo-FIzuK1 ${['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={taskObject.currentStage+'_'+currentSketchIndex}>
                   <MediaViewer
                     taskObject={taskObject}
                     scriptData={scriptData}
@@ -242,7 +242,7 @@ const WorkFlow = React.memo(function WorkFlow() {
                 </div>
               )}
             </div>
-            {taskObject.currentStage !== 'final_video' && taskObject.currentStage !== 'script' && (
+            {taskObject.currentStage !== 'script' && (
               <div className="h-[123px] w-[calc((100vh-6rem-200px)/9*16)]">
                 <ThumbnailGrid
                   isDisabledFocus={isEditModalOpen || isPauseWorkFlow || isFocusChatInput}
diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index d082cc7..648a619 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -2,7 +2,7 @@
 
 import React, { useRef, useEffect, useState, SetStateAction, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
-import { Edit3, Play, Pause, Volume2, VolumeX, Maximize, Minimize, Loader2, X, Scissors, RotateCcw, MessageCircleMore, Download } from 'lucide-react';
+import { Edit3, Play, Pause, Volume2, VolumeX, Maximize, Minimize, Loader2, X, Scissors, RotateCcw, MessageCircleMore, Download, ArrowDownWideNarrow } from 'lucide-react';
 import { ProgressiveReveal, presets } from '@/components/ui/progressive-reveal';
 import { GlassIconButton } from '@/components/ui/glass-icon-button';
 import { ScriptRenderer } from '@/components/script-renderer/ScriptRenderer';
@@ -10,7 +10,7 @@ import { mockScriptData } from '@/components/script-renderer/mock';
 import { Skeleton } from '@/components/ui/skeleton';
 import { TaskObject } from '@/api/DTO/movieEdit';
 import { Button, Tooltip } from 'antd';
-import { downloadVideo } from '@/utils/tools';
+import { downloadVideo, downloadAllVideos } from '@/utils/tools';
 
 interface MediaViewerProps {
   taskObject: TaskObject;
@@ -65,6 +65,7 @@ export const MediaViewer = React.memo(function MediaViewer({
   const [userHasInteracted, setUserHasInteracted] = useState(false);
   const [toosBtnRight, setToodsBtnRight] = useState('1rem');
   const [isLoadingDownloadBtn, setIsLoadingDownloadBtn] = useState(false);
+  const [isLoadingDownloadAllVideosBtn, setIsLoadingDownloadAllVideosBtn] = useState(false);
 
   useEffect(() => {
     if (isSmartChatBoxOpen) {
@@ -364,6 +365,14 @@ export const MediaViewer = React.memo(function MediaViewer({
                 onClick={() => handleEditClick('3', 'final')}
               />
             </Tooltip>
+            {/* 下载所有视频按钮 */}
+            <Tooltip placement="top" title="Download all videos">
+              <GlassIconButton icon={ArrowDownWideNarrow} size='sm' loading={isLoadingDownloadAllVideosBtn} onClick={ async () => {
+                setIsLoadingDownloadAllVideosBtn(true);
+                await downloadAllVideos(taskObject.videos.data.flatMap((video: any) => video.urls));
+                setIsLoadingDownloadAllVideosBtn(false);
+              }} />
+            </Tooltip>
             {/* 下载按钮 */}
             <Tooltip placement="top" title="Download video">
               <GlassIconButton icon={Download} loading={isLoadingDownloadBtn} size='sm' onClick={async () => {
@@ -493,6 +502,14 @@ export const MediaViewer = React.memo(function MediaViewer({
                   }
                 }} />
               </Tooltip>
+              {/* 下载所有视频按钮 */}
+              <Tooltip placement="top" title="Download all videos">
+                <GlassIconButton icon={ArrowDownWideNarrow} size='sm' loading={isLoadingDownloadAllVideosBtn} onClick={ async () => {
+                  setIsLoadingDownloadAllVideosBtn(true);
+                  await downloadAllVideos(taskObject.videos.data.flatMap((video: any) => video.urls));
+                  setIsLoadingDownloadAllVideosBtn(false);
+                }} />
+              </Tooltip>
               {/* 下载按钮 */}
               <Tooltip placement="top" title="Download video">
                 <GlassIconButton icon={Download} loading={isLoadingDownloadBtn} size='sm' onClick={async () => {
diff --git a/components/pages/work-flow/thumbnail-grid.tsx b/components/pages/work-flow/thumbnail-grid.tsx
index 11e279c..5a4636c 100644
--- a/components/pages/work-flow/thumbnail-grid.tsx
+++ b/components/pages/work-flow/thumbnail-grid.tsx
@@ -15,6 +15,9 @@ interface ThumbnailGridProps {
   onRetryVideo: (video_id: string) => void;
 }
 
+/** 
+ * 视频缩略图网格组件，支持hover时播放视频预览
+ */
 export function ThumbnailGrid({
   isDisabledFocus,
   taskObject,
@@ -22,6 +25,17 @@ export function ThumbnailGrid({
   onSketchSelect,
   onRetryVideo
 }: ThumbnailGridProps) {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  /** 处理鼠标进入缩略图事件 */
+  const handleMouseEnter = useCallback((index: number) => {
+    setHoveredIndex(index);
+  }, []);
+
+  /** 处理鼠标离开缩略图事件 */
+  const handleMouseLeave = useCallback((index: number) => {
+    setHoveredIndex(null);
+  }, []);
   const thumbnailsRef = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState(false);
   const [startX, setStartX] = useState(0);
@@ -159,13 +173,8 @@ export function ThumbnailGrid({
     console.log('taskObject.currentStage_thumbnail-grid', taskObject.currentStage);
   }, [taskObject.currentStage]);
 
-  // 粗剪/精剪最终成片阶段不显示缩略图
-  if (taskObject.currentStage === 'final_video') {
-    return null;
-  }
-
   // 渲染视频阶段的缩略图
-  const renderVideoThumbnails = () => (
+  const renderVideoThumbnails = (disabled: boolean = false) => (
     taskObject.videos.data.map((video, index) => {
       const urls: string = video.urls ? video.urls.join(',') : '';
 
@@ -173,8 +182,8 @@ export function ThumbnailGrid({
         <div
           key={`video-${urls}-${index}`}
           className={`relative aspect-video rounded-lg overflow-hidden
-            ${currentSketchIndex === index ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`}
-          onClick={() => !isDragging && onSketchSelect(index)}
+            ${(currentSketchIndex === index && !disabled) ? 'ring-2 ring-blue-500 z-10' : 'hover:ring-2 hover:ring-blue-500/50'}`}
+          onClick={() => !isDragging && !disabled && onSketchSelect(index)}
         >
 
           {/* 视频层 */}
@@ -202,11 +211,28 @@ export function ThumbnailGrid({
               //   loop
               //   muted
               // />
-              <img
-                className="w-full h-full object-cover"
-                src={`${taskObject.videos.data[index].urls[0]}?x-oss-process=video/snapshot,t_1000,f_jpg`}
-                draggable="false"
-              />
+              <div 
+                className="w-full h-full relative" 
+                onMouseEnter={() => handleMouseEnter(index)}
+                onMouseLeave={() => handleMouseLeave(index)}
+              >
+                <img
+                  className="w-full h-full object-cover"
+                  src={`${taskObject.videos.data[index].urls[0]}?x-oss-process=video/snapshot,t_1000,f_jpg`}
+                  draggable="false"
+                  alt="video thumbnail"
+                />
+                {hoveredIndex === index && (
+                  <video
+                    className="absolute inset-0 w-full h-full object-cover"
+                    src={taskObject.videos.data[index].urls[0]}
+                    autoPlay
+                    muted
+                    playsInline
+                    loop
+                  />
+                )}
+              </div>
             ) : (
               <div className="w-full h-full transform hover:scale-105 transition-transform duration-500">
                 
@@ -316,6 +342,7 @@ export function ThumbnailGrid({
     >
       {taskObject.currentStage === 'video' && renderVideoThumbnails()}
       {(taskObject.currentStage === 'scene' || taskObject.currentStage === 'character') && renderSketchThumbnails(getCurrentData())}
+      {taskObject.currentStage === 'final_video' && renderVideoThumbnails(true)}
     </div>
   );
 }
diff --git a/components/pages/work-flow/use-workflow-data.tsx b/components/pages/work-flow/use-workflow-data.tsx
index 11971b5..ab3f6d2 100644
--- a/components/pages/work-flow/use-workflow-data.tsx
+++ b/components/pages/work-flow/use-workflow-data.tsx
@@ -716,7 +716,6 @@ export function useWorkflowData({ onEditPlanGenerated }: UseWorkflowDataProps =
     applyScript,
     fallbackToStep,
     originalText: state.originalText,
-    // showGotoCutButton: from && currentLoadingText.includes('Post-production') ? true : false,
     showGotoCutButton: (canGoToCut && (isGenerateEditPlan || taskObject.currentStage === 'final_video') || isShowError) ? true : false,
     generateEditPlan: openEditPlan,
     handleRetryVideo
diff --git a/utils/tools.ts b/utils/tools.ts
index 7a79fd3..8bc2f84 100644
--- a/utils/tools.ts
+++ b/utils/tools.ts
@@ -93,4 +93,14 @@ export const downloadVideo = async (url: string) => {
   } catch (error) {
     console.error('下载视频失败:', error);
   }
+};
+
+/**
+ * 下载所有视频
+ * @param urls 视频URL列表
+ */
+export const downloadAllVideos = async (urls: string[]) => {
+  for (const url of urls) {
+    await downloadVideo(url);
+  }
 };
\ No newline at end of file