添加遮罩

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>

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;