加载样式的优化

app/service/Interaction/templateStoryService.ts

@@ -70,21 +70,24 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
             {
               id: '1',
               name: '奇幻冒险故事',
-              imageUrl: ['/assets/3dr_howlcastle.png', '/assets/3dr_spirited.jpg'],
+              image_url: ['/assets/3dr_howlcastle.png', '/assets/3dr_spirited.jpg'],
               generateText: '一个关于勇气与友谊的奇幻冒险故事，主角在神秘世界中寻找失落的宝藏，结识了各种奇特的生物和伙伴。',
               storyRole: [
                 {
                   role_name: '艾莉娅',
+                  role_description: '一个勇敢的女孩，拥有强大的魔法力量，她的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_chihiro.png',
                   voice_url:""
                 },
                 {
                   role_name: '魔法师梅林',
+                  role_description: '一个智慧的魔法师，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_mono.png',
                   voice_url:""
                 },
                 {
                   role_name: '守护者龙',
+                  role_description: '一个强大的守护者，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_howlbg.jpg',
                   voice_url:""
                 }
@@ -93,39 +96,44 @@ export const useTemplateStoryServiceHook = (): UseTemplateStoryService => {
             {
               id: '2',
               name: '科幻探索之旅',
-              imageUrl: ['/assets/3dr_monobg.jpg'],
+              image_url: ['/assets/3dr_monobg.jpg'],
               generateText: '未来世界的太空探索故事，人类在浩瀚宇宙中寻找新的家园，面对未知的挑战和外星文明的接触。',
               storyRole: [
                 {
                   role_name: '船长凯特',
+                  role_description: '一个勇敢的船长，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_chihiro.png',
                   voice_url:""
                 },
                 {
                   role_name: 'AI助手诺娃',
+                  role_description: '一个强大的AI助手，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_mono.png',
-                  voice_url:""
+                  voice_url: ''
                 }
               ]
             },
             {
               id: '3',
               name: '温馨家庭喜剧',
-              imageUrl: ['/assets/3dr_spirited.jpg'],
+              image_url: ['/assets/3dr_spirited.jpg'],
               generateText: '一个充满欢笑和温情的家庭故事，讲述家庭成员之间的日常趣事，以及如何一起面对生活中的小挑战。',
               storyRole: [
                 {
                   role_name: '妈妈莉莉',
+                  role_description: '一个温柔的妈妈，拥有强大的魔法力量，她的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_chihiro.png',
                   voice_url:""
                 },
                 {
                   role_name: '爸爸汤姆',
+                  role_description: '一个勇敢的爸爸，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_mono.png',
                   voice_url:""
                 },
                 {
                   role_name: '孩子小杰',
+                  role_description: '一个聪明的孩子，拥有强大的魔法力量，他的冒险旅程充满了危险和挑战。',
                   photo_url: '/assets/3dr_howlbg.jpg',
                   voice_url:""
                 }

app/service/domain/Entities.ts

@@ -137,13 +137,15 @@ export interface StoryTemplateEntity {
   /** 故事模板名称 */
   name: string;
   /** 故事模板图片 */
-  imageUrl: string[];
+  image_url: string[];
   /** 故事模板概览*/
   generateText: string;
   /**故事角色 */
   storyRole: {
     /**角色名 */
     role_name: string;
+    /**角色描述 */
+    role_description: string;
     /**照片URL */
     photo_url: string;
     /**声音URL */

components/ChatInputBox/ChatInputBox.tsx

@@ -18,7 +18,7 @@ import {
   Sparkles,
   Settings,
 } from "lucide-react";
-import { Dropdown, Modal, Tooltip, Upload, Spin } from "antd";
+import { Dropdown, Modal, Tooltip, Upload, Spin, Popconfirm } from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import { StoryTemplateEntity } from "@/app/service/domain/Entities";
 import { useImageStoryServiceHook } from "@/app/service/Interaction/ImageStoryService";
@@ -30,6 +30,7 @@ import { createMovieProjectV1 } from "@/api/video_flow";
 import { useLoadScriptText, useUploadFile } from "@/app/service/domain/service";
 import { ActionButton } from "../common/ActionButton";
 import { HighlightEditor } from "../common/HighlightEditor";
+import GlobalLoad from "../common/GlobalLoad";
 
 /**模板故事模式弹窗组件 */
 const RenderTemplateStoryMode = ({
@@ -55,7 +56,7 @@ const RenderTemplateStoryMode = ({
   } = useTemplateStoryServiceHook();
 
   // 本地加载状态，用于 UI 反馈
-  const [localLoading, setLocalLoading] = useState(false);
+  const [localLoading, setLocalLoading] = useState(0);
 
   // 组件挂载时获取模板列表
   useEffect(() => {
@@ -73,9 +74,19 @@ const RenderTemplateStoryMode = ({
   // 处理确认操作
   const handleConfirm = async () => {
     if (!selectedTemplate) return;
-
+    let timer = setInterval(() => {
+      setLocalLoading((prev) => {
+        if (prev >= 95) {
+          clearInterval(timer);
+          return 95;
+        }
+        return prev + 1;
+      });
+    }, 100);
     try {
-      setLocalLoading(true);
+      setLocalLoading(1);
+      // 假性的增加进度条
+
       const projectId = await actionStory();
       console.log("Story action created:", projectId);
       onClose();
@@ -86,7 +97,8 @@ const RenderTemplateStoryMode = ({
       console.error("Failed to create story action:", error);
       // 这里可以添加 toast 提示
     } finally {
-      setLocalLoading(false);
+      setLocalLoading(0);
+      clearInterval(timer);
     }
   };
 
@@ -119,7 +131,7 @@ const RenderTemplateStoryMode = ({
               onClick={() => handleTemplateSelect(template)}
             >
               <TemplateCard
-                imageUrl={template.imageUrl[0]}
+                imageUrl={template.image_url[0]}
                 imageAlt={template.name}
                 title={template.name}
                 description={template.generateText}
@@ -150,7 +162,7 @@ const RenderTemplateStoryMode = ({
               className="relative w-full aspect-square rounded-xl overflow-hidden group cursor-pointer"
             >
               <img
-                src={selectedTemplate.imageUrl[0]}
+                src={selectedTemplate.image_url[0]}
                 alt={selectedTemplate.name}
                 className="w-full h-full object-cover transition-all duration-500 group-hover:scale-105 group-hover:rotate-1"
               />
@@ -322,7 +334,7 @@ const RenderTemplateStoryMode = ({
         </div> */}
         <div className=" absolute bottom-0 right-0">
           <ActionButton
-            isCreating={localLoading}
+            isCreating={localLoading>0}
             handleCreateVideo={handleConfirm}
             icon={<Clapperboard className="w-5 h-5" />}
           />
@@ -775,15 +787,21 @@ const PhotoStoryModal = ({
     uploadCharacterAvatarAndAnalyzeFeatures,
   } = useImageStoryServiceHook();
   const { loadingText } = useLoadScriptText(isLoading);
-  const { uploadFile } = useUploadFile();
+  const [localLoading, setLocalLoading] = useState(0);
   // 重置状态
   const handleClose = () => {
-    resetImageStory();
+    // resetImageStory();
     onClose();
   };
   const router = useRouter();
   // 处理图片上传
-  const handleImageUpload = async () => {
+  const handleImageUpload = async (e: any) => {
+    const target = e.target as HTMLImageElement;
+    if (!(target.tagName == "IMG" || e.target.dataset.alt =="image-upload-area")) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
     try {
       await triggerFileSelection();
     } catch (error) {
@@ -820,6 +838,35 @@ const PhotoStoryModal = ({
     }
   };
 
+  const handleAnalyzeImage = async () => {
+    let timeout = 100
+    let timer: NodeJS.Timeout;
+    timer = setInterval(() => {
+      setLocalLoading((prev) => {
+        if (prev >= 95) {
+          return 95;
+        }
+        return prev + 0.1;
+      });
+    }, timeout);
+    try {
+      await uploadAndAnalyzeImage();
+    }  finally {
+      timeout=10
+      clearInterval(timer);
+      timer = setInterval(() => {
+        setLocalLoading((prev) => {
+          if (prev >= 100) {
+            clearInterval(timer);
+            return 0;
+          }
+          return prev + 1;
+        });
+      }, timeout);
+
+    }
+  };
+
   return (
     <Modal
       open={isOpen}
@@ -836,7 +883,7 @@ const PhotoStoryModal = ({
         </div>
       }
     >
-      <Spin spinning={isLoading} tip={loadingText}>
+      <GlobalLoad show={localLoading>0} progress={localLoading}>
         <div className="rounded-2xl">
           {/* 弹窗头部 */}
           <div className="flex items-center gap-3 p-2 border-b border-white/[0.1]">
@@ -865,18 +912,33 @@ const PhotoStoryModal = ({
                         alt="Story inspiration"
                         className="w-full h-full object-cover rounded-lg"
                       />
-                      <Tooltip title="Clear all content !!! " placement="top">
+                      <Popconfirm
+                        title="Clear all content"
+                        description="Are you sure you want to clear all content? This action cannot be undone."
+                        onConfirm={() => {
+                          resetImageStory();
+                        }}
+                        okText="Yes"
+                        cancelText="No"
+                        showCancel={false}
+                        okType="default"
+                        placement="top"
+                        classNames={{
+                          root: "text-white event-pointer",
+                          body: "text-white border rounded-lg bg-white/[0.04] [&_.ant-popconfirm-description]:!text-white [&_.ant-popconfirm-title]:!text-white [&_.ant-btn]:!text-white",
+                        }}
+                      >
                         <button
                           onClick={(e) => {
+                            e.preventDefault();
                             e.stopPropagation();
-                            resetImageStory();
                           }}
-                          className="absolute top-1 right-1 w-4 h-4 bg-black/60 hover:bg-black/80 rounded-full flex items-center justify-center text-white/80 hover:text-white transition-colors"
+                          className="absolute top-1 right-1 w-4 h-4 bg-white/20 hover:bg-white/30 backdrop-blur-sm rounded-md flex items-center justify-center text-white/90 hover:text-white border border-white/20 hover:border-white/30 transition-all duration-200 z-10 shadow-sm hover:shadow-md"
                           data-alt="clear-all-button"
                         >
-                          <Trash2 className="w-2.5 h-2.5" />
+                          <Trash2 className="w-3 h-3" />
                         </button>
-                      </Tooltip>
+                      </Popconfirm>
                     </div>
                   ) : (
                     <div className="text-center text-white/60">
@@ -1035,7 +1097,7 @@ const PhotoStoryModal = ({
                   >
                     <ActionButton
                       isCreating={isLoading}
-                      handleCreateVideo={uploadAndAnalyzeImage}
+                      handleCreateVideo={handleAnalyzeImage}
                       icon={<Sparkles className="w-5 h-5" />}
                     />
                   </Tooltip>
@@ -1055,7 +1117,7 @@ const PhotoStoryModal = ({
             </div>
           </div>
         </div>
-      </Spin>
+      </GlobalLoad>
     </Modal>
   );
 };

components/common/GlobalLoad.tsx

@@ -0,0 +1,138 @@
+import { Spin } from "antd";
+import { ReactNode } from "react";
+
+interface GlobalLoadProps {
+  /** 是否显示加载状态 */
+  show: boolean;
+  /** 子元素内容 */
+  children: ReactNode;
+  /** 进度条数值 0-100，非必须 */
+  progress?: number;
+  /** 旋转圆环直径，非必须 */
+  spinnerDiameter?: number;
+  /** 进度条宽度，非必须 */
+  progressWidth?: number;
+  /** 是否显示旋转圆圈，默认显示 */
+  showSpinner?: boolean;
+}
+
+/**
+ * 全局加载组件，支持标签包裹形式渲染子元素
+ * @param props - 组件属性
+ * @returns 加载组件
+ */
+export default function GlobalLoad({
+  show,
+  children,
+  progress,
+  spinnerDiameter,
+  progressWidth,
+  showSpinner = true,
+}: GlobalLoadProps) {
+  if (!show) {
+    return <>{children}</>;
+  }
+
+  // 自定义加载图标：组合两个组件
+  const customIndicator = (
+    <div
+      data-alt="custom-loading-indicator"
+      className="!w-max !h-max !flex flex-col items-center justify-center gap-4 -translate-x-1/2 -translate-y-1/2"
+    >
+      {showSpinner && <TailwindSpinner diameter={spinnerDiameter} />}
+      {progress && <TailwindLinearLoader progress={progress} width={progressWidth} />}
+    </div>
+  );
+
+  return (
+    <div data-alt="loading-container" className="relative">
+      <Spin spinning={true} tip="" indicator={customIndicator}>
+        {children}
+      </Spin>
+    </div>
+  );
+}
+
+/**
+ * Tailwind CSS loading spinner component for global loading overlay.
+ * @param diameter - Diameter of the spinner in pixels
+ * @returns {JSX.Element} - Spinner visual.
+ */
+export const TailwindSpinner = ({ diameter = 50 }: { diameter?: number }) => {
+  const radius = diameter / 2;
+
+  return (
+    <div data-alt="loading-spinner" className="relative" style={{ width: `${diameter}px`, height: `${diameter}px` }}>
+      {/* 主旋转圆环 */}
+      <div
+        className="w-full h-full animate-spin"
+        style={{
+          width: `${diameter}px`,
+          height: `${diameter}px`,
+          borderRadius: `${radius}px`,
+          backgroundImage:
+            "linear-gradient(rgb(186, 66, 255) 35%, rgb(0, 225, 255))",
+          filter: "blur(1px)",
+          boxShadow:
+            "0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255)",
+          animation: "spinning82341 1.7s linear infinite",
+        }}
+        data-alt="spinner-main"
+      />
+      {/* 背景模糊圆环 */}
+      <div
+        className="absolute inset-0"
+        style={{
+          width: `${diameter}px`,
+          height: `${diameter}px`,
+          borderRadius: `${radius}px`,
+          backgroundColor: "rgb(36, 36, 36)",
+          filter: "blur(10px)",
+        }}
+        data-alt="spinner-blur-bg"
+      />
+      {/* 自定义动画关键帧 */}
+      <style>
+        {`
+          @keyframes spinning82341 {
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        `}
+      </style>
+    </div>
+  );
+};
+
+/**
+ * Tailwind CSS linear progress bar loader with animated light sweep.
+ * @param progress - Progress value from 0 to 100
+ * @param width - Width of the progress bar in pixels
+ * @returns {JSX.Element} - Linear loader visual.
+ */
+export const TailwindLinearLoader = ({
+  progress,
+  width = 160
+}: {
+  progress: number;
+  width?: number;
+}) => (
+  <div
+    data-alt="linear-loader-container"
+    className="relative h-[2px] bg-gray-200 dark:bg-gray-700 overflow-hidden rounded-full"
+    style={{ width: `${width}px` }}
+  >
+    {/* Animated light sweep - position controlled by progress */}
+    <div
+      data-alt="linear-loader-light"
+      className="absolute top-0 h-full w-[70px]"
+      style={{
+        background:
+          "linear-gradient(87deg, rgba(0, 0, 0, 0) 0%, rgb(0, 204, 255) 40%, rgb(0, 204, 255) 60%, rgba(0, 0, 0, 0) 100%)",
+        left: `${progress - 10}%`,
+      }}
+    />
+    {/* Keyframes for light sweep - no longer needed since position is controlled by progress */}
+  </div>
+);