From 08ca156174e4f1148575b941d9204e313902674f 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, 4 Sep 2025 22:20:13 +0800
Subject: [PATCH] =?UTF-8?q?=E8=A7=86=E9=A2=91=E9=A6=96=E5=B8=A7=E3=80=81?=
 =?UTF-8?q?=E4=B8=8B=E8=BD=BDloading=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/create-to-video2.tsx         | 25 ++++++++++++-------
 components/pages/work-flow.tsx                | 21 ++++++++--------
 .../pages/work-flow/ai-editing-iframe.tsx     |  1 +
 .../pages/work-flow/editing-notification.tsx  | 16 +++++-------
 components/pages/work-flow/media-viewer.tsx   | 13 +++++++---
 .../pages/work-flow/use-workflow-data.tsx     |  2 +-
 components/ui/glass-icon-button.tsx           | 14 ++++++-----
 7 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/components/pages/create-to-video2.tsx b/components/pages/create-to-video2.tsx
index 7f4da38..38b980a 100644
--- a/components/pages/create-to-video2.tsx
+++ b/components/pages/create-to-video2.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect, useRef, useCallback } from 'react';
-import { Loader2, Check, Pencil, Trash, Download } from 'lucide-react';
+import { Loader2, Download } from 'lucide-react';
 import { useRouter } from 'next/navigation';
 import './style/create-to-video2.css';
 
@@ -28,6 +28,7 @@ export default function CreateToVideo2() {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const scrollContainerRef = useRef<HTMLDivElement>(null);
   const [userId, setUserId] = useState<number>(0);
+  const [isLoadingDownloadBtn, setIsLoadingDownloadBtn] = useState(false);
 
   // 添加一个 ref 来跟踪当前正在加载的页码
   const loadingPageRef = useRef<number | null>(null);
@@ -193,23 +194,24 @@ export default function CreateToVideo2() {
       <div
         key={project.project_id}
         className="group flex flex-col bg-black/20 rounded-lg overflow-hidden cursor-pointer hover:bg-white/5 transition-all duration-300"
-        onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}
         onMouseEnter={() => handleMouseEnter(project.project_id)}
         onMouseLeave={() => handleMouseLeave(project.project_id)}
         data-alt="project-card"
       >
         {/* 视频/图片区域 */}
-        <div className="relative aspect-video">
-          {(project.final_video_url || project.final_simple_video_url) ? (
+        <div className="relative aspect-video" onClick={() => router.push(`/movies/work-flow?episodeId=${project.project_id}`)}>
+          {(project.final_video_url || project.final_simple_video_url || project.video_urls) ? (
             <video
               ref={(el) => setVideoRef(project.project_id, el)}
-              src={project.final_video_url || project.final_simple_video_url}
+              src={project.final_video_url || project.final_simple_video_url || project.video_urls}
               className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
               muted
               loop
               playsInline
               preload="none"
-              poster={`${project.final_video_url || project.final_simple_video_url}?vframe/jpg/offset/1`}
+              poster={
+                project.final_video_url || project.final_simple_video_url ? `${project.final_video_url || project.final_simple_video_url}?vframe/jpg/offset/1` : `${project.video_urls}?x-oss-process=video/snapshot,t_1000,f_jpg`
+              }
             />
           ) : (
             <div 
@@ -224,9 +226,14 @@ export default function CreateToVideo2() {
           {(project.final_video_url || project.final_simple_video_url) && (
             <div className="absolute top-1 right-1">
               <Tooltip placement="top" title="Download">
-                <Button size="small" type="text" className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" onClick={() => {
-                  downloadVideo(project.final_video_url || project.final_simple_video_url);
-                }}><Download className="w-4 h-4 text-white" /></Button>
+                <Button size="small" type="text" disabled={isLoadingDownloadBtn} className="w-[2.5rem] h-[2.5rem] rounded-full items-center justify-center p-0 hidden group-hover:flex transition-all duration-300 hover:bg-white/15" onClick={async (e) => {
+                  e.stopPropagation(); // 阻止事件冒泡
+                  setIsLoadingDownloadBtn(true);
+                  await downloadVideo(project.final_video_url || project.final_simple_video_url);
+                  setIsLoadingDownloadBtn(false);
+                }}>
+                  {isLoadingDownloadBtn ? <Loader2 className="w-4 h-4 animate-spin text-white" /> : <Download className="w-4 h-4 text-white" />}
+                </Button>
               </Tooltip>
             </div>
           )}
diff --git a/components/pages/work-flow.tsx b/components/pages/work-flow.tsx
index e3024ee..14e9abf 100644
--- a/components/pages/work-flow.tsx
+++ b/components/pages/work-flow.tsx
@@ -50,18 +50,8 @@ const WorkFlow = React.memo(function WorkFlow() {
     aiEditingButtonRef.current?.handleAIEditing();
     editingNotificationKey.current = `editing-${Date.now()}`;
     showEditingNotification({
-      title: '视频编辑中', // 可选
       description: 'AI正在为您编辑视频...', // 可选
       key: editingNotificationKey.current,
-      onComplete: () => {
-        console.log('编辑完成');
-        // 3秒后关闭通知
-        setTimeout(() => {
-          if (editingNotificationKey.current) {
-            notification.destroy(editingNotificationKey.current);
-          }
-        }, 3000);
-      },
       onFail: () => {
         console.log('编辑失败');
         // 清缓存 生成计划 视频重新分析
@@ -115,7 +105,16 @@ const WorkFlow = React.memo(function WorkFlow() {
       // 更新通知状态为完成
       showEditingNotification({
         isCompleted: true,
-        key: editingNotificationKey.current
+        key: editingNotificationKey.current,
+        onComplete: () => {
+          console.log('编辑完成');
+          // 3秒后关闭通知
+          setTimeout(() => {
+            if (editingNotificationKey.current) {
+              notification.destroy(editingNotificationKey.current);
+            }
+          }, 3000);
+        },
       });
     }
   }, [taskObject.final, isHandleEdit]);
diff --git a/components/pages/work-flow/ai-editing-iframe.tsx b/components/pages/work-flow/ai-editing-iframe.tsx
index f167c73..597575a 100644
--- a/components/pages/work-flow/ai-editing-iframe.tsx
+++ b/components/pages/work-flow/ai-editing-iframe.tsx
@@ -489,6 +489,7 @@ export const AIEditingIframeButton = React.forwardRef<
   // 暴露 handleAIEditing 方法
   React.useImperativeHandle(ref, () => ({
     handleAIEditing: async () => {
+      console.log('handleAIEditing', iframeRef.current);
       iframeRef.current?.startAIEditing();
     }
   }));
diff --git a/components/pages/work-flow/editing-notification.tsx b/components/pages/work-flow/editing-notification.tsx
index a51027f..5101d4d 100644
--- a/components/pages/work-flow/editing-notification.tsx
+++ b/components/pages/work-flow/editing-notification.tsx
@@ -34,8 +34,6 @@ const descriptionStyle = {
 interface EditingNotificationProps {
   /** 编辑是否完成 */
   isCompleted?: boolean;
-  /** 自定义标题 */
-  title?: string;
   /** 自定义描述 */
   description?: string;
   /** key */
@@ -53,7 +51,6 @@ interface EditingNotificationProps {
 export const showEditingNotification = (props: EditingNotificationProps) => {
   const {
     isCompleted = false,
-    title = 'AI Video Editing',
     description = 'Your video is being edited by AI...',
     key,
     onComplete,
@@ -125,15 +122,14 @@ export const showEditingNotification = (props: EditingNotificationProps) => {
 
     return (
       <div data-alt="editing-notification" style={{ minWidth: '300px' }}>
-        <h3 style={messageStyle}>
-          {scissorsIcon}
-          {title}
-        </h3>
-        <p style={{
+        <h3 style={{
           ...descriptionStyle,
           color: status === 'exception' ? '#ff4d4f' :  
-                     'rgba(255, 255, 255, 0.65)',
-        }}>{currentDescription}</p>
+                    'rgba(255, 255, 255, 0.65)',
+        }}>
+          {scissorsIcon}
+          {currentDescription}
+        </h3>
         <Progress
           percent={Math.round(progress)}
           status={status}
diff --git a/components/pages/work-flow/media-viewer.tsx b/components/pages/work-flow/media-viewer.tsx
index c009940..4e188d6 100644
--- a/components/pages/work-flow/media-viewer.tsx
+++ b/components/pages/work-flow/media-viewer.tsx
@@ -64,6 +64,7 @@ export const MediaViewer = React.memo(function MediaViewer({
   const [finalVideoReady, setFinalVideoReady] = useState(false);
   const [userHasInteracted, setUserHasInteracted] = useState(false);
   const [toosBtnRight, setToodsBtnRight] = useState('1rem');
+  const [isLoadingDownloadBtn, setIsLoadingDownloadBtn] = useState(false);
 
   useEffect(() => {
     if (isSmartChatBoxOpen) {
@@ -365,8 +366,10 @@ export const MediaViewer = React.memo(function MediaViewer({
             </Tooltip>
             {/* 下载按钮 */}
             <Tooltip placement="top" title="Download video">
-              <GlassIconButton icon={Download} size='sm' onClick={() => {
-                downloadVideo(taskObject.final.url);
+              <GlassIconButton icon={Download} loading={isLoadingDownloadBtn} size='sm' onClick={async () => {
+                setIsLoadingDownloadBtn(true);
+                await downloadVideo(taskObject.final.url);
+                setIsLoadingDownloadBtn(false);
               }} />
             </Tooltip>
             {showGotoCutButton && (
@@ -492,10 +495,12 @@ export const MediaViewer = React.memo(function MediaViewer({
               </Tooltip>
               {/* 下载按钮 */}
               <Tooltip placement="top" title="Download video">
-                <GlassIconButton icon={Download} size='sm' onClick={() => {
+                <GlassIconButton icon={Download} loading={isLoadingDownloadBtn} size='sm' onClick={async () => {
                   const currentVideo = taskObject.videos.data[currentSketchIndex];
                   if (currentVideo && currentVideo.urls && currentVideo.urls.length > 0) {
-                    downloadVideo(currentVideo.urls[0]);
+                    setIsLoadingDownloadBtn(true);
+                    await downloadVideo(currentVideo.urls[0]);
+                    setIsLoadingDownloadBtn(false);
                   }
                 }} />
               </Tooltip>
diff --git a/components/pages/work-flow/use-workflow-data.tsx b/components/pages/work-flow/use-workflow-data.tsx
index 6e262a3..ca0db4f 100644
--- a/components/pages/work-flow/use-workflow-data.tsx
+++ b/components/pages/work-flow/use-workflow-data.tsx
@@ -648,7 +648,7 @@ export function useWorkflowData({ onEditPlanGenerated }: UseWorkflowDataProps =
     fallbackToStep,
     originalText: state.originalText,
     // showGotoCutButton: from && currentLoadingText.includes('Post-production') ? true : false,
-    showGotoCutButton: canGoToCut && isGenerateEditPlan ? true : false,
+    showGotoCutButton: canGoToCut && (isGenerateEditPlan || taskObject.currentStage === 'final_video') ? true : false,
     generateEditPlan: openEditPlan,
     handleRetryVideo
   };
diff --git a/components/ui/glass-icon-button.tsx b/components/ui/glass-icon-button.tsx
index 753380b..634512d 100644
--- a/components/ui/glass-icon-button.tsx
+++ b/components/ui/glass-icon-button.tsx
@@ -2,7 +2,7 @@
 
 import React, { forwardRef } from 'react';
 import { motion } from 'framer-motion';
-import { LucideIcon } from 'lucide-react';
+import { LucideIcon, Loader2 } from 'lucide-react';
 import { cn } from '@/public/lib/utils';
 
 // Define props without the ref
@@ -14,6 +14,7 @@ interface GlassIconButtonProps {
   className?: string;
   [key: string]: any; // To allow spreading other props
   text?: string;
+  loading?: boolean;
 }
 
 const variantStyles = {
@@ -38,12 +39,12 @@ const iconSizes = {
 const MotionButton = motion.button;
 
 export const GlassIconButton = forwardRef<HTMLButtonElement, GlassIconButtonProps>(
-  ({ icon: Icon, tooltip, variant = 'secondary', size = 'md', className, text, ...props }, ref) => {
+  ({ icon: Icon, tooltip, variant = 'secondary', size = 'md', className, text, loading = false, ...props }, ref) => {
     return (
       <MotionButton
         ref={ref}
         className={cn(
-          'relative rounded-full backdrop-blur-md transition-colors shadow-lg border flex items-center gap-2',
+          'relative rounded-full backdrop-blur-md transition-colors shadow-lg border flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed',
           variantStyles[variant],
           sizeStyles[size],
           className
@@ -59,12 +60,13 @@ export const GlassIconButton = forwardRef<HTMLButtonElement, GlassIconButtonProp
           perspective: '1000px'
         }}
         {...props}
+        disabled={loading}
       >
-        <Icon className={cn('text-white', iconSizes[size])} />
-        {text && (
+        {loading ? <Loader2 className={cn('text-white', iconSizes[size])} /> : <Icon className={cn('text-white', iconSizes[size])} />}
+        {text && !loading && (
           <span className="text-white text-xs">{text}</span>
         )}
-        {tooltip && (
+        {tooltip && !loading && (
           <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs
             bg-black/80 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity
             pointer-events-none whitespace-nowrap">