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:
parent
cdd72240ea
commit
a56400b4d2
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue