修复创建项目的内容

components/common/ChatInputBox.tsx

@@ -31,6 +31,8 @@ import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStorySe
 import TemplateCard from "./templateCard";
 import { AudioRecorder } from "./AudioRecorder";
 import { useTemplateStoryServiceHook } from "@/app/service/Interaction/templateStoryService";
+import { createScriptEpisodeNew } from "@/api/script_episode";
+import { useRouter } from "next/navigation";
 
 // 自定义音频播放器样式
 const customAudioPlayerStyles = `
@@ -489,6 +491,7 @@ export function ChatInputBox() {
 
   // 共享状态 - 需要在不同渲染函数间共享
   const [script, setScript] = useState(""); // 用户输入的脚本内容
+  const router = useRouter();
 
   // 子组件引用，用于调用子组件方法
   const photoStoryModeRef = useRef<{
@@ -506,6 +509,8 @@ export function ChatInputBox() {
     }
   }, [isPhotoStoryMode]);
 
+
+
   const [loadingIdea, setLoadingIdea] = useState(false); // 获取创意建议时的加载状态
   const [isCreating, setIsCreating] = useState(false); // 视频创建过程中的加载状态
 
@@ -533,11 +538,7 @@ export function ChatInputBox() {
     }, 3000);
   };
 
-  // Handle editor content changes
+
-  const handleEditorChange = (e: React.FormEvent<HTMLDivElement>) => {
-    const newText = e.currentTarget.textContent || "";
-    setScript(newText);
-  };
 
   // 当进入图片故事模式时，调用子组件方法
   const enterPhotoStoryMode = () => {
@@ -550,21 +551,34 @@ export function ChatInputBox() {
   };
 
   // Handle creating video
+
   const handleCreateVideo = async () => {
     setIsCreating(true);
-    // 这里可以添加实际的创建逻辑
+    const User = JSON.parse(localStorage.getItem("currentUser") || "{}");
-    console.log("创建视频:", {
+
-      script,
+    // 创建剧集数据
-      ...configOptions,
+    let episodeData: any = {
-      ...(isPhotoStoryMode && {
+      user_id: String(User.id),
-        // 从子组件获取图片故事相关信息
+      script: script,
-        isPhotoStoryMode: true,
+      mode: configOptions.mode,
-      }),
+      resolution: configOptions.resolution,
-    });
+      language: configOptions.language,
-    setTimeout(() => {
+      video_duration: configOptions.videoDuration
-      setIsCreating(false);
+    };
-    }, 2000);
+
-  };
+    // 调用创建剧集API
+    const episodeResponse = await createScriptEpisodeNew(episodeData);
+    console.log('episodeResponse', episodeResponse);
+    if (episodeResponse.code !== 0) {
+      console.error(`创建剧集失败: ${episodeResponse.message}`);
+      alert(`创建剧集失败: ${episodeResponse.message}`);
+      return;
+    }
+    let episodeId = episodeResponse.data.project_id;
+    // let episodeId = '9c34fcc4-c8d8-44fc-879e-9bd56f608c76';
+    router.push(`/create/work-flow?episodeId=${episodeId}`);
+    setIsCreating(false);
+  }
 
   return (
     <div className="video-tool-component relative max-w-[1080px] w-full left-[50%] translate-x-[-50%]">
@@ -655,37 +669,34 @@ export function ChatInputBox() {
               />
 
               <div className="video-prompt-editor relative flex flex-1 items-center rounded-[6px]">
-                {/* 可编辑的脚本输入区域 */}
+                                 {/* 简单的文本输入框 */}
-                <div
+                 <input
-                  className="editor-content flex-1 w-0 max-h-[48px] min-h-[40px] h-auto pl-[10px] pr-[10px] py-[10px] rounded-[10px] leading-[20px] text-sm border-none overflow-y-auto cursor-text flex items-center"
+                   type="text"
-                  contentEditable={true}
+                   value={script}
-                  onInput={handleEditorChange}
+                   onChange={(e) => setScript(e.target.value)}
-                  suppressContentEditableWarning
+                   placeholder="Describe the content you want to action..."
-                >
+                   className="flex-1 w-0 pl-[10px] pr-[10px] py-[10px] rounded-[10px] leading-[20px] text-sm border-none bg-transparent text-white placeholder:text-white/[0.40] focus:outline-none"
-                  {script}
+                 />
-                </div>
 
-                {/* 占位符文本和获取创意按钮 */}
+                                 {/* 获取创意按钮 */}
-                <div
+                 {!script && (
-                  className={`custom-placeholder absolute top-[50%] left-[10px] z-10 translate-y-[-50%] flex items-center gap-1 pointer-events-none text-[14px] leading-[20px] text-white/[0.40] ${
+                   <div className="absolute top-[50%] right-[10px] z-10 translate-y-[-50%] flex items-center gap-1">
-                    script ? "hidden" : "block"
+                     <span className="text-[14px] leading-[20px] text-white/[0.40]">Get an </span>
-                  }`}
+                     <button
-                >
+                       className="idea-link inline-flex items-center gap-0.5 text-white/[0.50] font-normal underline hover:text-white/[0.70] transition-colors"
-                  <span>Describe the content you want to action. Get an </span>
+                       onClick={() => handleGetIdea()}
-                  <b
+                     >
-                    className="idea-link inline-flex items-center gap-0.5 text-white/[0.50] font-normal cursor-pointer pointer-events-auto underline"
+                       {loadingIdea ? (
-                    onClick={() => handleGetIdea()}
+                         <Loader2 className="w-4 h-4 animate-spin" />
-                  >
+                       ) : (
-                    {loadingIdea ? (
+                         <>
-                      <Loader2 className="w-4 h-4 animate-spin" />
+                           <Lightbulb className="w-4 h-4" />
-                    ) : (
+                           idea
-                      <>
+                         </>
-                        <Lightbulb className="w-4 h-4" />
+                       )}
-                        idea
+                     </button>
-                      </>
+                   </div>
-                    )}
+                 )}
-                  </b>
-                </div>
               </div>
 
               {/* Action按钮 */}