From 58c6b6c24794f9c2d4b8f4f6fd1eb580df4f5023 Mon Sep 17 00:00:00 2001
From: root <root@sker>
Date: Thu, 10 Jul 2025 13:57:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E8=BE=93=E5=87=BA=E7=9B=AE=E5=BD=95=E9=80=89=E6=8B=A9=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🎯 **解决问题**：
修复 AI 视频生成失败问题：'Single mode requires --image, --prompt, and --output'

🔧 **前端改进**：

1. **单个模式输出目录选择**：
   - 添加 singleOutputFolder 状态管理
   - 新增 handleSingleOutputFolderSelect 处理函数
   - UI 中添加输出目录选择按钮和输入框
   - 支持手动输入和文件夹选择两种方式

2. **批量模式输出目录优化**：
   - 重构为专门的 handleBatchOutputFolderSelect 函数
   - 替换内联函数，提高代码可维护性
   - 统一错误处理和用户反馈

3. **用户界面增强**：
   - 单个模式：'视频保存目录 (可选)' - 用户友好的可选设置
   - 批量模式：保持原有的必需输出目录设置
   - 占位符文本提供清晰的使用指导
   - 实时显示选择状态：'未选择 (将使用默认目录)'

4. **后端兼容性**：
   - Rust 代码提供默认输出路径备用方案
   - 确保 Python 脚本始终接收到 --output 参数
   - 使用系统临时目录作为默认保存位置

✅ **修复效果**：
- 解决 'Single mode requires --output' 错误 ✓
- 用户可以自定义视频保存位置 ✓
- 提供默认保存路径备用方案 ✓
- 改善用户体验和操作便利性 ✓

现在用户可以选择视频保存位置，解决了生成失败的问题！
---
 src/components/AIVideoGenerator.tsx | 67 +++++++++++++++++++++++------
 1 file changed, 54 insertions(+), 13 deletions(-)

diff --git a/src/components/AIVideoGenerator.tsx b/src/components/AIVideoGenerator.tsx
index 79fa5eb..5ce5fb0 100644
--- a/src/components/AIVideoGenerator.tsx
+++ b/src/components/AIVideoGenerator.tsx
@@ -17,6 +17,7 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
   const [customPrompt, setCustomPrompt] = useState<string>('')
   const [batchPrompts, setBatchPrompts] = useState<string[]>([''])
   const [outputFolder, setOutputFolder] = useState<string>('')
+  const [singleOutputFolder, setSingleOutputFolder] = useState<string>('')
   const [duration, setDuration] = useState<string>('5')
   const [modelType, setModelType] = useState<string>('lite')
   const [previewData, setPreviewData] = useState<{
@@ -114,6 +115,30 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
     }
   }
 
+  const handleSingleOutputFolderSelect = async () => {
+    try {
+      console.log('Opening output folder dialog...')
+      const folderPath = await invoke('select_folder') as string
+      console.log('Selected output folder:', folderPath)
+      setSingleOutputFolder(folderPath)
+    } catch (error) {
+      console.error('Failed to select output folder:', error)
+      alert(`输出文件夹选择失败: ${error instanceof Error ? error.message : '未知错误'}`)
+    }
+  }
+
+  const handleBatchOutputFolderSelect = async () => {
+    try {
+      console.log('Opening batch output folder dialog...')
+      const folderPath = await invoke('select_folder') as string
+      console.log('Selected batch output folder:', folderPath)
+      setOutputFolder(folderPath)
+    } catch (error) {
+      console.error('Failed to select batch output folder:', error)
+      alert(`批量输出文件夹选择失败: ${error instanceof Error ? error.message : '未知错误'}`)
+    }
+  }
+
 
 
   // Handle generation
@@ -136,7 +161,7 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
           prompt: customPrompt,
           duration,
           model_type: modelType,
-          output_path: outputFolder
+          output_path: singleOutputFolder
         })
 
         await generateSingleVideo({
@@ -144,7 +169,7 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
           prompt: customPrompt,
           duration,
           model_type: modelType,
-          output_path: outputFolder || undefined,
+          output_path: singleOutputFolder || undefined,
           timeout: 300
         })
       } else {
@@ -262,6 +287,32 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
                 />
               </div>
 
+              {/* Output Directory for Single Mode */}
+              <div>
+                <label className="block text-sm font-medium text-secondary-700 mb-2">
+                  视频保存目录 (可选)
+                </label>
+                <div className="flex items-center space-x-3">
+                  <button
+                    onClick={handleSingleOutputFolderSelect}
+                    className="flex items-center px-4 py-2 bg-secondary-100 hover:bg-secondary-200 rounded-lg transition-colors"
+                  >
+                    <Folder size={16} className="mr-2" />
+                    选择保存目录
+                  </button>
+                  <span className="text-sm text-secondary-600">
+                    {singleOutputFolder || '未选择 (将使用默认目录)'}
+                  </span>
+                </div>
+                <input
+                  type="text"
+                  value={singleOutputFolder}
+                  onChange={(e) => setSingleOutputFolder(e.target.value)}
+                  placeholder="或手动输入保存目录路径 (例如: C:\Users\用户名\Videos)"
+                  className="input w-full text-sm mt-2"
+                />
+              </div>
+
             </div>
           ) : (
             <>
@@ -298,17 +349,7 @@ const AIVideoGenerator: React.FC<AIVideoGeneratorProps> = ({ className = '' }) =
                   />
                   <button
                     type="button"
-                    onClick={async () => {
-                      try {
-                        console.log('Opening output folder dialog...')
-                        const folderPath = await invoke('select_folder') as string
-                        console.log('Selected output folder:', folderPath)
-                        setOutputFolder(folderPath)
-                      } catch (error) {
-                        console.error('Failed to select output folder:', error)
-                        alert(`输出文件夹选择失败: ${error instanceof Error ? error.message : '未知错误'}`)
-                      }
-                    }}
+                    onClick={handleBatchOutputFolderSelect}
                     className="btn-secondary px-3 py-2"
                     title="选择输出文件夹"
                   >