From fa7016f4db8ee89167521d0d6b5e075791b65acf Mon Sep 17 00:00:00 2001
From: Xin Wang <xin.victorwang@gmail.com>
Date: Tue, 1 Jul 2025 21:46:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=81=AE=E7=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/pages/create-to-video2.tsx       | 18 ++++++++++++++++--
 components/pages/style/create-to-video2.css |  7 +++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/components/pages/create-to-video2.tsx b/components/pages/create-to-video2.tsx
index 58da0da..8458674 100644
--- a/components/pages/create-to-video2.tsx
+++ b/components/pages/create-to-video2.tsx
@@ -71,6 +71,7 @@ export function CreateToVideo2() {
   const editorRef = useRef<HTMLDivElement>(null);
   const [runTour, setRunTour] = useState(true);
   const [episodeId, setEpisodeId] = useState<number>(0);
+  const [isCreating, setIsCreating] = useState(false);
 
   const handleUploadVideo = async () => {
     console.log('upload video');
@@ -107,6 +108,7 @@ export function CreateToVideo2() {
   const handleCreateVideo = async () => {
     if (videoUrl || script) {
       try {
+        setIsCreating(true);
         let convertResponse;
         
         // 根据选中的选项卡调用相应的API
@@ -156,6 +158,8 @@ export function CreateToVideo2() {
       } catch (error) {
         console.error('创建过程出错:', error);
         alert("创建项目时发生错误，请稍后重试");
+      } finally {
+        setIsCreating(false);
       }
     }
   }
@@ -536,8 +540,18 @@ export function CreateToVideo2() {
                   </div>
                 </div>
                 <div className='flex items-center gap-3'>
-                  <div className={`tool-submit-button ${videoUrl || script ? '' : 'disabled'}`} onClick={handleCreateVideo}>
-                    <ArrowUp className='w-4 h-4' />Create
+                  <div className={`tool-submit-button ${videoUrl || script ? '' : 'disabled'} ${isCreating ? 'loading' : ''}`} onClick={isCreating ? undefined : handleCreateVideo}>
+                    {isCreating ? (
+                      <>
+                        <Loader2 className='w-4 h-4 animate-spin' />
+                        Creating...
+                      </>
+                    ) : (
+                      <>
+                        <ArrowUp className='w-4 h-4' />
+                        Create
+                      </>
+                    )}
                   </div>
                 </div>
               </div>
diff --git a/components/pages/style/create-to-video2.css b/components/pages/style/create-to-video2.css
index 50f5452..10a1175 100644
--- a/components/pages/style/create-to-video2.css
+++ b/components/pages/style/create-to-video2.css
@@ -34,6 +34,13 @@
   cursor: not-allowed;
 }
 
+.video-storyboard-tools .tool-submit-button.loading {
+  background-color: #fff;
+  opacity: .7;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
 .storyboard-tools-tab {
   border-radius: 16px 16px 0 0;
   background: #ffffff0d;