fix: 修复 AIVideoGenerator 组件中的 Store Hooks 使用错误

🔧 **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 进行状态管理!
This commit is contained in:
root 2025-07-10 14:12:23 +08:00
parent cdd72240ea
commit a56400b4d2
1 changed files with 9 additions and 4 deletions

View File

@ -1,6 +1,6 @@
import React, { useState } from 'react' import React, { useState } from 'react'
import { Play } from 'lucide-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 AIVideoResultPreview from './AIVideoResultPreview'
import VideoModeSelector from './ai-video/VideoModeSelector' import VideoModeSelector from './ai-video/VideoModeSelector'
import SingleVideoForm from './ai-video/SingleVideoForm' import SingleVideoForm from './ai-video/SingleVideoForm'
@ -36,10 +36,15 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
}) })
// Store hooks // Store hooks
const { jobs, isProcessing, clearCompletedJobs } = useAIVideoJobs() const jobs = useAIVideoJobs()
const { generateSingleVideo, generateBatchVideos } = useAIVideoProcessing() const isProcessing = useAIVideoProcessing()
const { defaultDuration, defaultModelType } = useAIVideoSettings() 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 // Initialize settings
React.useEffect(() => { React.useEffect(() => {
setDuration(defaultDuration) setDuration(defaultDuration)
@ -98,7 +103,7 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
? batchPrompts.filter(p => p.trim()) ? batchPrompts.filter(p => p.trim())
: ['默认提示词'] : ['默认提示词']
await generateBatchVideos({ await batchGenerateVideos({
image_folder: selectedFolder, image_folder: selectedFolder,
prompts, prompts,
output_folder: outputFolder, output_folder: outputFolder,