推进一个版本

app/service/Interaction/ImageStoryService.ts

@@ -1,7 +1,13 @@
 import { ImageStoryEntity } from "../domain/Entities";
 import { useUploadFile } from "../domain/service";
 import { ImageStoryUseCase } from "../usecase/imageStoryUseCase";
-import { useState, useCallback, useMemo, Dispatch, SetStateAction } from "react";
+import {
+  useState,
+  useCallback,
+  useMemo,
+  Dispatch,
+  SetStateAction,
+} from "react";
 import { CharacterAnalysis } from "@/api/DTO/movie_start_dto";
 
 interface UseImageStoryService {
@@ -41,8 +47,12 @@ interface UseImageStoryService {
   syncRoleNameToContent: (oldName: string, newName: string) => void;
   /** 重置图片故事数据 */
   resetImageStory: (showAnalysisState?: boolean) => void;
-  setCharactersAnalysis: Dispatch<SetStateAction<CharacterAnalysis[]>>
+  /** 生成动作电影 */
-  setOriginalUserDescription: Dispatch<SetStateAction<string>>
+  actionMovie: () => Promise<void>;
+  /** 设置角色分析 */
+  setCharactersAnalysis: Dispatch<SetStateAction<CharacterAnalysis[]>>;
+  /** 设置原始用户描述 */
+  setOriginalUserDescription: Dispatch<SetStateAction<string>>;
 }
 
 export const useImageStoryServiceHook = (): UseImageStoryService => {
@@ -58,7 +68,8 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
   // 故事内容状态（统一管理用户输入和AI分析结果）
   const [storyContent, setStoryContent] = useState<string>("");
   // 原始用户描述
-  const [originalUserDescription, setOriginalUserDescription] = useState<string>("");
+  const [originalUserDescription, setOriginalUserDescription] =
+    useState<string>("");
 
   // 分析结果状态
   /** 角色头像及名称 */
@@ -88,7 +99,11 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
    */
   const generateAvatarFromRegion = useCallback(
     (character: CharacterAnalysis, imageUrl: string) => {
-      if (!character.region || !character.region.width || !character.region.height) {
+      if (
+        !character.region ||
+        !character.region.width ||
+        !character.region.height
+      ) {
         return;
       }
       // 创建图片对象
@@ -218,42 +233,45 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
    * 上传图片并分析
    * @param {string} imageUrl - 已上传的图片URL
    */
-  const uploadAndAnalyzeImage = useCallback(
+  const uploadAndAnalyzeImage = useCallback(async (): Promise<void> => {
-    async (): Promise<void> => {
+    try {
-      try {
+      setIsLoading(true);
-        setIsLoading(true);
 
-        // 调用用例处理图片上传和分析
+      // 调用用例处理图片上传和分析
-        const newImageStory = await imageStoryUseCase.handleImageUpload(activeImageUrl);
+      const newImageStory = await imageStoryUseCase.handleImageUpload(
-        setOriginalUserDescription(storyContent)
+        activeImageUrl
-        // 获取更新后的数据
+      );
-        const updatedStory = imageStoryUseCase.storyLogline;
+      setOriginalUserDescription(storyContent);
-        const updatedCharacters = imageStoryUseCase.charactersAnalysis;
+      // 获取更新后的数据
-        const updatedGenres = imageStoryUseCase.potentialGenres;
+      const updatedStory = imageStoryUseCase.storyLogline;
-        const updatedImageStory = imageStoryUseCase.imageStory;
+      const updatedCharacters = imageStoryUseCase.charactersAnalysis;
-        setSelectedCategory(imageStoryUseCase.potentialGenres[0]);
+      const updatedGenres = imageStoryUseCase.potentialGenres;
-        // 更新所有响应式状态
+      const updatedImageStory = imageStoryUseCase.imageStory;
-        setCharactersAnalysis(updatedCharacters);
+      setSelectedCategory(imageStoryUseCase.potentialGenres[0]);
-        setPotentialGenres(updatedGenres);
+      // 更新所有响应式状态
-        setImageStory(updatedImageStory);
+      setCharactersAnalysis(updatedCharacters);
+      setPotentialGenres(updatedGenres);
+      setImageStory(updatedImageStory);
 
-        // 将AI分析的故事内容直接更新到统一的故事内容字段
+      // 将AI分析的故事内容直接更新到统一的故事内容字段
-        updateStoryContent(updatedStory || "");
+      updateStoryContent(updatedStory || "");
 
+      // 标记已分析
+      setHasAnalyzed(true);
+    } catch (error) {
+      console.error("图片上传分析失败:", error);
+      setHasAnalyzed(false);
 
-        // 标记已分析
+      throw error;
-        setHasAnalyzed(true);
+    } finally {
-      } catch (error) {
+      setIsLoading(false);
-        console.error("图片上传分析失败:", error);
+    }
-        setHasAnalyzed(false);
+  }, [
-
+    activeImageUrl,
-        throw error;
+    imageStoryUseCase,
-      } finally {
+    storyContent,
-        setIsLoading(false);
+    setOriginalUserDescription,
-      }
+  ]);
-    },
-    [activeImageUrl, imageStoryUseCase,storyContent,setOriginalUserDescription]
-  );
 
   /**
    * 触发生成剧本函数
@@ -306,10 +324,13 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
    * 更新故事内容
    * @param {string} content - 新的故事内容
    */
-  const updateStoryContent = useCallback((content: string): void => {
+  const updateStoryContent = useCallback(
-    setStoryContent(content);
+    (content: string): void => {
-    imageStoryUseCase.updateStoryContent(content);
+      setStoryContent(content);
-  }, [imageStoryUseCase]);
+      imageStoryUseCase.updateStoryContent(content);
+    },
+    [imageStoryUseCase]
+  );
 
   /**
    * 同步角色名称到故事内容
@@ -326,7 +347,6 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
         imageStoryUseCase.updateStoryContent(content);
         return content;
       });
-
     },
     [imageStoryUseCase]
   );
@@ -384,57 +404,67 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
   /**
    * 触发文件选择并自动分析
    */
-  const triggerFileSelection =
+  const triggerFileSelection = useCallback(async (): Promise<void> => {
-    useCallback(async (): Promise<void> => {
+    return new Promise((resolve, reject) => {
-      return new Promise((resolve, reject) => {
+      // 创建文件输入元素
-        // 创建文件输入元素
+      const fileInput = document.createElement("input");
-        const fileInput = document.createElement("input");
+      fileInput.type = "file";
-        fileInput.type = "file";
+      fileInput.accept = "image/*";
-        fileInput.accept = "image/*";
+      fileInput.style.display = "none";
-        fileInput.style.display = "none";
 
-        fileInput.onchange = async (e) => {
+      fileInput.onchange = async (e) => {
-          try {
+        try {
-            const target = e.target as HTMLInputElement;
+          const target = e.target as HTMLInputElement;
-            if (target.files && target.files[0]) {
+          if (target.files && target.files[0]) {
-              setIsLoading(true);
+            setIsLoading(true);
 
-              // 使用传入的文件上传函数
+            // 使用传入的文件上传函数
-              const uploadedImageUrl = await uploadFile(
+            const uploadedImageUrl = await uploadFile(
-                target.files[0],
+              target.files[0],
-                (progress) => {
+              (progress) => {
-                  console.log("上传进度:", progress);
+                console.log("上传进度:", progress);
-                }
+              }
-              );
+            );
 
-              // 设置图片URL
+            // 设置图片URL
-              setActiveImageUrl(uploadedImageUrl);
+            setActiveImageUrl(uploadedImageUrl);
-              setImageStory((prev) => ({
+            setImageStory((prev) => ({
-                ...prev,
+              ...prev,
-                imageUrl: uploadedImageUrl,
+              imageUrl: uploadedImageUrl,
-              }));
+            }));
-
-            }
-            resolve();
-          } catch (error) {
-            reject(error);
-          } finally {
-            setIsLoading(false);
-            // 清理DOM
-            document.body.removeChild(fileInput);
           }
-        };
+          resolve();
-
+        } catch (error) {
-        fileInput.oncancel = () => {
+          reject(error);
+        } finally {
+          setIsLoading(false);
+          // 清理DOM
           document.body.removeChild(fileInput);
-          reject();
+        }
+      };
+
+      fileInput.oncancel = () => {
+        document.body.removeChild(fileInput);
+        reject();
+      };
+
+      document.body.appendChild(fileInput);
+      fileInput.click();
+    });
+  }, [uploadFile]);
+
+  const actionMovie = useCallback(async (): Promise<void> => {
+    try {
+      if (hasAnalyzed) {
+        const params = {
+          content: storyContent,
+          category: selectedCategory,
         };
-
+      }
-        document.body.appendChild(fileInput);
+    } catch (error) {
-        fileInput.click();
+      console.error("图片上传分析失败:", error);
-      });
+    }
-    }, [uploadFile]);
+  }, [activeImageUrl, imageStoryUseCase]);
-
   return {
     imageStory,
     activeImageUrl,
@@ -455,6 +485,7 @@ export const useImageStoryServiceHook = (): UseImageStoryService => {
     updateCharacterName,
     syncRoleNameToContent,
     resetImageStory,
-    setOriginalUserDescription
+    setOriginalUserDescription,
+    actionMovie,
   };
 };

app/service/Interaction/ShotService.ts

@@ -209,7 +209,6 @@ export const useShotService = (): UseShotService => {
             )
           );
         }
-
         // 返回当前选中的片段，因为现在API返回的是任务状态而不是完整的片段
         return selectedSegment!;
       } catch (error) {

app/service/uml/DDDLayer.md

@@ -0,0 +1,150 @@
+
+## 🎯 各层职责与内容
+
+### 1. Component (UI层)
+**职责**：纯展示逻辑，用户交互处理
+**内容**：
+- React组件（Modal、Form、Button等）
+- 样式和布局逻辑
+- 用户交互事件绑定
+- 通过props接收数据和回调函数
+
+**设计原则**：
+- 不包含业务逻辑
+- 不直接操作状态
+- 通过回调函数与上层通信
+- 可复用和可测试
+
+### 2. Hook (状态管理层)
+**职责**：状态管理、副作用处理、业务逻辑组合
+**内容**：
+- 状态管理Hook（useState、useReducer等）
+- 副作用处理（useEffect、useCallback等）
+- 业务逻辑组合（调用多个UseCase）
+- 提供统一的数据接口给组件
+
+**设计原则**：
+- 协调全局状态和本地状态
+- 处理异步操作和副作用
+- 组合多个UseCase的调用
+- 提供响应式的数据接口
+
+### 3. UseCase (业务逻辑层)
+**职责**：核心业务规则、业务流程编排、领域逻辑验证
+**内容**：
+- 业务用例类（ImageStoryUseCase、ScriptGenerationUseCase等）
+- 完整的业务流程方法
+- 业务规则验证逻辑
+- 业务实体构建和管理
+
+**设计原则**：
+- 包含完整的业务流程
+- 执行业务规则验证
+- 协调多个Service的调用
+- 返回领域实体，而不是原始数据
+- 无状态，方法调用间不依赖实例状态
+
+### 4. Service (外部服务层)
+**职责**：外部服务集成、技术实现细节、基础设施
+**内容**：
+- 外部API调用服务（ImageProcessingService、AIAnalysisService等）
+- 技术实现细节（图片处理、网络请求等）
+- 错误处理和重试逻辑
+- 可以被多个UseCase复用的服务
+
+**设计原则**：
+- 专注于技术实现细节
+- 处理外部API调用
+- 提供统一的错误处理
+- 实现接口隔离原则
+
+### 5. Repository (数据访问层)
+**职责**：数据持久化、数据查询、数据转换
+**内容**：
+- 数据访问类（ImageStoryRepository、CharacterRepository等）
+- 数据持久化逻辑
+- 数据查询和过滤
+- 数据转换（Entity ↔ Data）
+
+**设计原则**：
+- 封装数据访问细节
+- 提供统一的CRUD接口
+- 处理数据转换
+- 实现数据访问的抽象
+
+## 📊 状态管理策略
+
+**状态分类与存储位置**：
+- **业务核心状态** → Zustand Store（currentStory、storyList等）
+- **UI交互状态** → 组件useState（isModalOpen、localInput等）
+- **业务流程状态** → UseCase私有状态（analysisProgress等）
+- **用户偏好状态** → Zustand Store（selectedCategory、theme等）
+- **临时计算状态** → useMemo/useCallback（filteredStories等）
+
+## 数据流向
+
+**状态流转过程**：
+用户操作 → 组件本地状态 → Hook协调 → UseCase业务逻辑 → 全局状态更新 → 组件重新渲染
+**具体流程**：
+1. 用户在组件中触发操作
+2. 组件更新本地状态
+3. Hook协调多个UseCase调用
+4. UseCase执行业务逻辑和规则验证
+5. 更新全局状态
+6. 组件重新渲染显示结果
+
+## 设计模式应用
+
+**核心模式**：
+1. **依赖注入**：UseCase通过构造函数注入Service依赖
+2. **工厂模式**：创建UseCase实例，管理依赖关系
+3. **策略模式**：可插拔的业务策略（如不同的AI分析策略）
+4. **观察者模式**：状态变化通知，组件响应式更新
+
+## 🧪 测试策略
+
+**分层测试**：
+- **Component层**：组件渲染和交互测试
+- **Hook层**：状态管理和副作用测试
+- **UseCase层**：业务逻辑和规则验证测试
+- **Service层**：外部服务集成测试
+- **Repository层**：数据访问逻辑测试
+
+## 错误处理机制
+
+**错误分类**：
+- **领域错误**：业务规则验证失败（StoryValidationError）
+- **基础设施错误**：外部服务调用失败（ImageUploadError）
+- **应用错误**：应用逻辑错误（UseCaseError）
+
+**错误处理流程**：
+1. Service层捕获原始错误并转换为应用错误
+2. UseCase层抛出领域错误
+3. Hook层统一捕获和处理错误
+4. 组件层显示错误信息
+
+## 性能优化策略
+
+**状态优化**：
+- 使用useMemo优化计算属性
+- 使用useCallback优化函数引用
+- 合理使用React.memo包装组件
+
+**业务逻辑优化**：
+- UseCase方法设计为无状态，避免实例状态维护
+- Service层实现缓存和重试机制
+- Repository层实现数据分页和懒加载
+
+## 📋 开发检查清单
+
+**新增功能时**：
+- [ ] 是否在正确的层次添加代码？
+- [ ] 是否遵循单一职责原则？
+- [ ] 是否定义了清晰的接口？
+- [ ] 是否处理了错误情况？
+- [ ] 是否添加了相应的测试？
+
+**重构代码时**：
+- [ ] 是否保持了接口的向后兼容？
+- [ ] 是否更新了相关的测试？
+- [ ] 是否验证了功能完整性？

components/common/ChatInputBox.tsx

@@ -702,10 +702,6 @@ export function ChatInputBox() {
                   <PhotoStoryModal
                     isOpen={isPhotoStoryModalOpen}
                     onClose={() => setIsPhotoStoryModalOpen(false)}
-                    onConfirm={(storyContent, category) => {
-                      setScript(storyContent);
-                      setIsPhotoStoryModalOpen(false);
-                    }}
                   />
                 </div>
 
@@ -852,7 +848,7 @@ const ConfigOptions = ({
               onClick: ({ key }) => onConfigChange(item.key, key),
             }}
             trigger={["click"]}
-            placement="bottomLeft"
+            placement="topRight"
           >
             <button
               data-alt={`config-${item.key}`}
@@ -1007,17 +1003,14 @@ const RoleHighlightEditor = ({
 const PhotoStoryModal = ({
   isOpen,
   onClose,
-  onConfirm,
 }: {
   isOpen: boolean;
   onClose: () => void;
-  onConfirm: (storyContent: string, category: string) => void;
 }) => {
   // 使用图片故事服务hook管理状态
   const {
     activeImageUrl,
     storyContent,
-    charactersAnalysis,
     potentialGenres,
     selectedCategory,
     isLoading,
@@ -1050,8 +1043,7 @@ const PhotoStoryModal = ({
 
   // 处理确认
   const handleConfirm = () => {
-    if (storyContent.trim()) {
+    if (hasAnalyzed) {
-      onConfirm(storyContent, selectedCategory);
     }
   };
 
@@ -1172,7 +1164,7 @@ const PhotoStoryModal = ({
                                 // 更新状态
                                 updateStoryContent(updatedStory);
                               }}
-                              className="absolute top-1 right-1 w-4 h-4 bg-black/[0.05] border border-black/[0.1] text-white rounded-full flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100 z-10"
+                              className="absolute top-0.5 right-0.5 w-4 h-4 bg-black/[0.4] border border-black/[0.1] text-white rounded-full flex items-center justify-center transition-colors opacity-0 group-hover:opacity-100 z-10"
                             >
                               <Trash2 className="w-2.5 h-2.5" />
                             </button>