报错提示修复，样式优化

api/DTO/movie_start_dto.ts

@@ -60,7 +60,11 @@ export interface CreateMovieProjectV2Request {
   /** 类型 */
   genre: string;
   /** 角色简介数组 */
-  character_briefs: string[];
+  character_briefs: {
+    name:string;
+    image_url:string;
+    character_analysis:Record<string,any>;
+  }[];
   /** 语言 */
   language: string;
   /** 图片URL */

api/request.ts

@@ -30,7 +30,7 @@ request.interceptors.request.use(
 request.interceptors.response.use(
   (response: AxiosResponse) => {
     // 直接返回响应数据
-    if (!response.data?.successful) {
+    if (response.data?.code !=0) {
       // TODO 暂时固定报错信息，后续根据后端返回的错误码进行处理
       errorHandle(0);
     }

app/service/Interaction/ImageStoryService.ts

@@ -426,9 +426,11 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
         // 从charactersAnalysis中提取whisk_caption字段组成数组
         const character_briefs = charactersAnalysis.map(char => {
 
-          const obj = JSON.parse(char.whisk_caption);
+          return {
-          obj.character_analysis.role_name = char.role_name;
+            name:char.role_name,
-          return JSON.stringify(obj);
+            image_url:char.crop_url,
+            character_analysis:JSON.parse(char.whisk_caption).character_analysis
+          }
         });
 
         const params: CreateMovieProjectV2Request = {

app/service/Interaction/templateStoryService.ts

@@ -142,7 +142,7 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
               ]
             }
           ]);
-        }, 10000);
+        }, 3000);
       });
 
       setTemplateStoryList(templates);

app/service/test/flow.test.ts

@@ -10,13 +10,13 @@ describe("flow 提示词优化", () => {
         - 身高估计：设定一个具体的值
         - 人种：预估这个人的人种。
 
-        2. **详细面容**  必须要给出预测的数值
+        2. **详细面容**:每一段不少于20个词的描述
-            - 眼睛：描述大小、形状、颜色、间距。
+            - 眼睛。
-            - 鼻子：描述长度、宽度、形态。
+            - 鼻子
-            - 嘴巴：描述宽度、形状、颜色。
+            - 嘴巴
-            - 耳朵：描述大小、形状、位置。
+            - 耳朵
-            - 脸型：描述整体轮廓、下巴、颧骨。
+            - 脸型
-            - 额头：描述高度、形状、发际线。
+            - 额头
 
         3. **外观特征**： 每一段不少于30个词的描述
         - 肤色：必须给出具体的颜色描述（如“浅米色”、“深棕色”、“橄榄色”等），严禁使用“浅色”、“深色”或“中等”等模糊词汇。

components/ChatInputBox/ChatInputBox.tsx

@@ -18,7 +18,15 @@ import {
   Sparkles,
   Settings,
 } from "lucide-react";
-import { Dropdown, Modal, Tooltip, Upload, Spin, Popconfirm } from "antd";
+import {
+  Dropdown,
+  Modal,
+  Tooltip,
+  Upload,
+  Spin,
+  Popconfirm,
+  Image,
+} from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import { StoryTemplateEntity } from "@/app/service/domain/Entities";
 import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStoryService";
@@ -53,9 +61,12 @@ const RenderTemplateStoryMode = ({
     setActiveRoleIndex,
     setActiveRoleImage,
     setActiveRoleAudio,
-    clearData
+    clearData,
   } = useTemplateStoryServiceHook();
 
+  // 使用上传文件hook
+  const { uploadFile, isUploading } = useUploadFile();
+
   // 本地加载状态，用于 UI 反馈
   const [localLoading, setLocalLoading] = useState(0);
 
@@ -103,14 +114,23 @@ const RenderTemplateStoryMode = ({
     }
   };
 
-  // 处理角色图片上传
+  // 处理角色图片上传 - 已移至customRequest中处理
-  const handleRoleImageUpload = (roleIndex: number, file: any) => {
+  // const handleRoleImageUpload = async (roleIndex: number, file: File) => {
-    if (file && selectedTemplate) {
+  //   if (!file || !selectedTemplate) return;
-      // 模拟上传成功，设置图片URL
+  //
-      const imageUrl = URL.createObjectURL(file);
+  //   try {
-      setActiveRoleImage(imageUrl);
+  //     // 使用真正的文件上传功能
-    }
+  //     const imageUrl = await uploadFile(file, (progress) => {
-  };
+  //       console.log(`上传进度: ${progress}%`);
+  //     });
+  //
+  //     // 上传成功后，更新角色图片
+  //     setActiveRoleImage(imageUrl);
+  //   } catch (error) {
+  //     console.error("图片上传失败:", error);
+  //     // 这里可以添加错误提示
+  //   }
+  // };
 
   // 删除角色图片
   const handleDeleteRoleImage = (roleIndex: number) => {
@@ -122,7 +142,6 @@ const RenderTemplateStoryMode = ({
   const templateListRender = () => {
     return (
       <div className="w-1/3 p-4 border-r border-white/[0.1]">
-        <h3 className="text-xl font-bold text-white mb-6">Story Templates</h3>
         <div className="space-y-4 max-h-[700px] overflow-y-auto pr-3 template-list-scroll">
           {templateStoryList.map((template, index) => (
             <div
@@ -148,7 +167,7 @@ const RenderTemplateStoryMode = ({
   };
   // 故事编辑器渲染
   const storyEditorRender = () => {
-    return  selectedTemplate ? (
+    return selectedTemplate ? (
       <div className="relative h-full">
         {/* 模板信息头部 - 增加顶部空间 */}
         <div className="flex gap-3 py-4 border-b border-white/[0.1] h-[300px]">
@@ -211,25 +230,67 @@ const RenderTemplateStoryMode = ({
                       listType="picture-card"
                       className="avatar-uploader [&_.ant-upload-select]:!w-32 [&_.ant-upload-select]:!h-32"
                       showUploadList={false}
-                      action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
+                      beforeUpload={(file) => {
-                      beforeUpload={() => false}
+                        // 验证文件类型
-                      onChange={(info) => {
+                        const isImage = file.type.startsWith("image/");
-                        if (info.file.status === "done") {
+                        if (!isImage) {
-                          handleRoleImageUpload(
+                          console.error("只能上传图片文件");
-                            activeRoleIndex,
+                          return false;
-                            info.file.originFileObj
+                        }
+
+                        // 验证文件大小 (5MB)
+                        const isLt5M = file.size / 1024 / 1024 < 10;
+                        if (!isLt5M) {
+                          console.error("图片大小不能超过10MB");
+                          return false;
+                        }
+
+                        return true; // 允许文件通过验证
+                      }}
+                      customRequest={async ({ file, onSuccess, onError }) => {
+                        try {
+                          const fileObj = file as File;
+                          console.log(
+                            "开始上传图片文件:",
+                            fileObj.name,
+                            fileObj.type,
+                            fileObj.size
                           );
+
+                          // 使用 hook 上传文件到七牛云
+                          const uploadedUrl = await uploadFile(
+                            fileObj,
+                            (progress) => {
+                              console.log(`上传进度: ${progress}%`);
+                            }
+                          );
+
+                          console.log("图片上传成功，URL:", uploadedUrl);
+
+                          // 上传成功后，更新角色图片
+                          setActiveRoleImage(uploadedUrl);
+
+                          // 调用成功回调
+                          onSuccess?.(uploadedUrl);
+                        } catch (error) {
+                          console.error("图片上传失败:", error);
+                          onError?.(error as Error);
                         }
                       }}
                     >
                       {activeRole?.photo_url ? (
                         <div className="relative w-32 h-32 rounded-lg overflow-hidden">
-                          <img
+                          <Image
                             src={activeRole.photo_url}
                             alt="Character Portrait"
                             className="w-full h-full object-cover"
+                            preview={{
+                              mask: null,
+                              maskClassName: "hidden",
+                            }}
+                            fallback="/assets/empty_video.png"
                           />
-                          <button
+                          {/* <button
                             onClick={(e) => {
                               e.stopPropagation();
                               handleDeleteRoleImage(activeRoleIndex);
@@ -238,7 +299,7 @@ const RenderTemplateStoryMode = ({
                             title="Delete Photo"
                           >
                             <Trash2 className="w-2.5 h-2.5" />
-                          </button>
+                          </button> */}
                           <div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity duration-200 flex items-center justify-center">
                             <div className="text-white text-center">
                               <UploadOutlined className="w-4 h-4 mb-1" />
@@ -248,8 +309,17 @@ const RenderTemplateStoryMode = ({
                         </div>
                       ) : (
                         <div className="w-32 h-32 flex flex-col items-center justify-center text-white/50 bg-white/[0.05] border border-white/[0.1] rounded-lg hover:bg-white/[0.08] transition-colors">
-                          <UploadOutlined className="w-6 h-6 mb-1" />
+                          {isUploading ? (
-                          <span className="text-xs">Upload Photo</span>
+                            <>
+                              <Loader2 className="w-6 h-6 mb-1 animate-spin" />
+                              <span className="text-xs">上传中...</span>
+                            </>
+                          ) : (
+                            <>
+                              <UploadOutlined className="w-6 h-6 mb-1" />
+                              <span className="text-xs">Upload Photo</span>
+                            </>
+                          )}
                         </div>
                       )}
                     </Upload>
@@ -280,11 +350,7 @@ const RenderTemplateStoryMode = ({
                 Characters
               </h4>
               {selectedTemplate.storyRole.map((role, index: number) => (
-                <Tooltip
+                <Tooltip key={index} title={role.role_name} placement="left">
-                  key={index}
-                  title={role.role_name}
-                  placement="left"
-                >
                   <button
                     data-alt={`character-thumbnail-${index}`}
                     className={`w-full aspect-square rounded-lg overflow-hidden border-2 transition-all duration-200 hover:scale-105 ${
@@ -294,10 +360,15 @@ const RenderTemplateStoryMode = ({
                     }`}
                     onClick={() => setActiveRoleIndex(index)}
                   >
-                    <img
+                    <Image
                       src={role.photo_url}
                       alt={role.role_name}
                       className="w-full h-full object-cover"
+                      preview={{
+                        mask: null,
+                        maskClassName: "hidden",
+                      }}
+                      fallback="/assets/empty_video.png"
                     />
                   </button>
                 </Tooltip>
@@ -305,7 +376,7 @@ const RenderTemplateStoryMode = ({
             </div>
           </div>
         </div>
-        <div className=" absolute bottom-0 right-0">
+        <div className=" absolute -bottom-4 right-0">
           <ActionButton
             isCreating={localLoading > 0}
             handleCreateVideo={handleConfirm}
@@ -321,7 +392,7 @@ const RenderTemplateStoryMode = ({
           <p className="text-sm">Please try again later</p>
         </div>
       </div>
-    )
+    );
   };
   return (
     <>
@@ -329,7 +400,7 @@ const RenderTemplateStoryMode = ({
         open={isOpen}
         onCancel={() => {
           // 清空所有选中的内容数据
-          clearData()
+          clearData();
           onClose();
         }}
         footer={null}
@@ -344,7 +415,7 @@ const RenderTemplateStoryMode = ({
           </div>
         }
       >
-        <div className="rounded-2xl">
+        <div className="rounded-2xl min-h-min transition-all duration-700 ease-out">
           {/* 弹窗头部 */}
           <div className="flex gap-4 p-4 border-b border-white/[0.1]">
             <h2 className="text-2xl font-bold text-white">
@@ -352,7 +423,7 @@ const RenderTemplateStoryMode = ({
             </h2>
           </div>
           <GlobalLoad show={isLoading} progress={0}>
-            <div className="flex gap-4">
+            <div className="flex gap-4 pb-4 ">
               {templateListRender()}
               <div className="flex-1">{storyEditorRender()}</div>
             </div>
@@ -871,22 +942,22 @@ const PhotoStoryModal = ({
             <div className="flex items-start gap-4">
               {/* 左侧：图片上传 */}
               <div className="flex-shrink-0">
-                <div
+                                 <div
-                  data-alt="image-upload-area"
+                   data-alt="image-upload-area"
-                  className={`w-24 h-24 rounded-lg flex flex-col items-center justify-center transition-all duration-300 cursor-pointer ${
+                   className={`w-32 h-32 rounded-lg flex flex-col items-center justify-center transition-all duration-300 cursor-pointer ${
-                    activeImageUrl
+                     activeImageUrl
-                      ? "border-2 border-white/20 bg-white/[0.05]"
+                       ? "border-2 border-white/20 bg-white/[0.05]"
-                      : "border-2 border-dashed border-white/20 bg-white/[0.02] hover:border-white/40 hover:bg-white/[0.05] hover:scale-105"
+                       : "border-2 border-dashed border-white/20 bg-white/[0.02] hover:border-white/40 hover:bg-white/[0.05] hover:scale-105"
-                  }`}
+                   }`}
                   onClick={handleImageUpload}
                 >
                   {activeImageUrl ? (
                     <div className="relative w-full h-full">
-                      <img
+                                             <img
-                        src={activeImageUrl}
+                         src={activeImageUrl}
-                        alt="Story inspiration"
+                         alt="Story inspiration"
-                        className="w-full h-full object-cover rounded-lg"
+                         className="w-full h-full object-cover rounded-lg bg-white/[0.05]"
-                      />
+                       />
                       <Popconfirm
                         title="Clear all content"
                         description="Are you sure you want to clear all content? This action cannot be undone."
@@ -932,17 +1003,17 @@ const PhotoStoryModal = ({
                         key={`${avatar.name}-${index}`}
                         className="flex flex-col items-center"
                       >
-                        <div className="relative w-14 h-14 rounded-sm overflow-hidden bg-white/[0.05] border border-white/[0.1] mb-2 group cursor-pointer">
+                                                 <div className="relative w-20 h-20 rounded-sm overflow-hidden bg-white/[0.05] border border-white/[0.1] mb-2 group cursor-pointer">
-                          <img
+                                                     <img
-                            src={avatar.url}
+                             src={avatar.url}
-                            alt={avatar.name}
+                             alt={avatar.name}
-                            className="w-full h-full object-cover"
+                             className="w-full h-full object-cover bg-white/[0.05]"
-                            onError={(e) => {
+                             onError={(e) => {
-                              // 如果裁剪的头像加载失败，回退到原图
+                               // 如果裁剪的头像加载失败，回退到原图
-                              const target = e.target as HTMLImageElement;
+                               const target = e.target as HTMLImageElement;
-                              target.src = activeImageUrl;
+                               target.src = activeImageUrl;
-                            }}
+                             }}
-                          />
+                           />
                           {/* 删除角色按钮 - 使用Tooltip并调整z-index避免被遮挡 */}
                           <Tooltip
                             title="Remove this character from the movie"