From a56400b4d29a72e79bd15e26c78f8372e7dd5011 Mon Sep 17 00:00:00 2001
From: root <root@sker>
Date: Thu, 10 Jul 2025 14:12:23 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20AIVideoGenerator=20?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=AD=E7=9A=84=20Store=20Hooks=20?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=E9=94=99=E8=AF=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🔧 **Store Hooks 修复**：

1. **问题识别**：
   - useAIVideoJobs, useAIVideoProcessing, useAIVideoSettings 使用方式错误
   - 缺少 useAIVideoStore 主 store 的导入
   - 函数名不匹配：generateBatchVideos vs batchGenerateVideos

2. **修复内容**：
   - 添加 useAIVideoStore 导入
   - 正确使用 selector hooks：
     * useAIVideoJobs() → 返回 jobs 数组
     * useAIVideoProcessing() → 返回 isProcessing 布尔值
     * useAIVideoSettings() → 返回设置对象
   - 通过主 store 获取 actions：
     * generateSingleVideo
     * batchGenerateVideos
     * clearCompletedJobs

3. **Store 架构理解**：
   - **Selector Hooks**: 用于获取特定状态片段
   - **Main Store**: 用于获取 actions 和复杂操作
   - **类型安全**: 所有 hooks 都有正确的 TypeScript 类型

4. **函数调用修复**：
   - generateBatchVideos → batchGenerateVideos
   - 保持与 store 定义的一致性

✅ **修复效果**：
- 编译错误消除 ✓
- Store 状态正确访问 ✓
- Actions 函数正常调用 ✓
- TypeScript 类型检查通过 ✓

现在组件可以正确使用 Zustand store 进行状态管理！
---
 src/components/AIVideoGenerator.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/AIVideoGenerator.tsx b/src/components/AIVideoGenerator.tsx
index 45a2fe2..45390a3 100644
--- a/src/components/AIVideoGenerator.tsx
+++ b/src/components/AIVideoGenerator.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { Play } from 'lucide-react'
-import { useAIVideoJobs, useAIVideoProcessing, useAIVideoSettings } from '../stores/useAIVideoStore'
+import { useAIVideoStore, useAIVideoJobs, useAIVideoProcessing, useAIVideoSettings } from '../stores/useAIVideoStore'
 import AIVideoResultPreview from './AIVideoResultPreview'
 import VideoModeSelector from './ai-video/VideoModeSelector'
 import SingleVideoForm from './ai-video/SingleVideoForm'
@@ -36,10 +36,15 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
   })
   
   // Store hooks
-  const { jobs, isProcessing, clearCompletedJobs } = useAIVideoJobs()
-  const { generateSingleVideo, generateBatchVideos } = useAIVideoProcessing()
+  const jobs = useAIVideoJobs()
+  const isProcessing = useAIVideoProcessing()
   const { defaultDuration, defaultModelType } = useAIVideoSettings()
 
+  // Store actions
+  const generateSingleVideo = useAIVideoStore(state => state.generateSingleVideo)
+  const batchGenerateVideos = useAIVideoStore(state => state.batchGenerateVideos)
+  const clearCompletedJobs = useAIVideoStore(state => state.clearCompletedJobs)
+
   // Initialize settings
   React.useEffect(() => {
     setDuration(defaultDuration)
@@ -98,7 +103,7 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
           ? batchPrompts.filter(p => p.trim())
           : ['默认提示词']
 
-        await generateBatchVideos({
+        await batchGenerateVideos({
           image_folder: selectedFolder,
           prompts,
           output_folder: outputFolder,