939efd70d4
新增功能: - 添加详细的模板导入日志系统 - 实现全局进度存储机制 - 完善模板状态管理 修复问题: - 修复进度监控无限轮询问题 - 修复模板列表状态显示不正确问题 - 修复所有unwrap()导致的panic错误 - 修复外键约束失败问题 改进: - 优化素材上传逻辑，只上传视频/音频/图片 - 上传失败时自动跳过而不是中断导入 - 缺失文件时继续导入而不是失败 - 改进错误处理机制
274 lines
9.9 KiB
TypeScript
274 lines
9.9 KiB
TypeScript
import React, { useState } from 'react';
|
||
import { X, FolderOpen, AlertCircle, CheckCircle, Settings } from 'lucide-react';
|
||
import { BatchImportRequest } from '../../types/template';
|
||
import { CustomSelect } from '../CustomSelect';
|
||
import { useProjectStore } from '../../store/projectStore';
|
||
import { invoke } from '@tauri-apps/api/core';
|
||
|
||
interface BatchImportModalProps {
|
||
onClose: () => void;
|
||
onImport: (request: BatchImportRequest) => Promise<void>;
|
||
isLoading: boolean;
|
||
}
|
||
|
||
export const BatchImportModal: React.FC<BatchImportModalProps> = ({
|
||
onClose,
|
||
onImport,
|
||
isLoading,
|
||
}) => {
|
||
const [formData, setFormData] = useState<Partial<BatchImportRequest>>({
|
||
folder_path: '',
|
||
project_id: '',
|
||
auto_upload: true,
|
||
max_concurrent: 3,
|
||
});
|
||
const [selectedFolder, setSelectedFolder] = useState<string>('');
|
||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||
const [showAdvanced, setShowAdvanced] = useState(false);
|
||
|
||
const { projects } = useProjectStore();
|
||
|
||
// 处理文件夹选择
|
||
const handleFolderSelect = async () => {
|
||
try {
|
||
// 使用 Tauri 的文件夹选择对话框
|
||
const selected = await invoke<string | null>('select_directory');
|
||
if (selected) {
|
||
setSelectedFolder(selected);
|
||
setFormData(prev => ({
|
||
...prev,
|
||
folder_path: selected,
|
||
}));
|
||
setErrors(prev => ({ ...prev, folder_path: '' }));
|
||
}
|
||
} catch (error) {
|
||
console.error('文件夹选择失败:', error);
|
||
}
|
||
};
|
||
|
||
// 表单验证
|
||
const validateForm = () => {
|
||
const newErrors: Record<string, string> = {};
|
||
|
||
if (!formData.folder_path) {
|
||
newErrors.folder_path = '请选择包含剪映草稿的文件夹';
|
||
}
|
||
|
||
if (formData.max_concurrent && (formData.max_concurrent < 1 || formData.max_concurrent > 10)) {
|
||
newErrors.max_concurrent = '并发数量应在 1-10 之间';
|
||
}
|
||
|
||
setErrors(newErrors);
|
||
return Object.keys(newErrors).length === 0;
|
||
};
|
||
|
||
// 处理提交
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (!validateForm()) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
await onImport(formData as BatchImportRequest);
|
||
} catch (error) {
|
||
console.error('批量导入失败:', error);
|
||
}
|
||
};
|
||
|
||
const projectOptions = [
|
||
{ value: '', label: '不关联项目' },
|
||
...projects.map(project => ({
|
||
value: project.id,
|
||
label: project.name,
|
||
})),
|
||
];
|
||
|
||
const concurrentOptions = [
|
||
{ value: `1`, label: '1 个（慢速）' },
|
||
{ value: `2`, label: '2 个' },
|
||
{ value: `3`, label: '3 个（推荐）' },
|
||
{ value: `5`, label: '5 个' },
|
||
{ value: `10`, label: '10 个（快速）' },
|
||
];
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||
<div className="bg-white rounded-lg shadow-xl w-full max-w-lg mx-4">
|
||
{/* 模态框头部 */}
|
||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||
<h2 className="text-xl font-semibold text-gray-900">批量导入模板</h2>
|
||
<button
|
||
onClick={onClose}
|
||
className="p-1 rounded-full hover:bg-gray-100 transition-colors"
|
||
>
|
||
<X className="w-5 h-5 text-gray-500" />
|
||
</button>
|
||
</div>
|
||
|
||
{/* 模态框内容 */}
|
||
<form onSubmit={handleSubmit} className="p-6">
|
||
{/* 文件夹选择区域 */}
|
||
<div className="mb-6">
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
选择文件夹 *
|
||
</label>
|
||
|
||
<div
|
||
className={`border-2 border-dashed rounded-lg p-6 text-center transition-colors ${
|
||
errors.folder_path
|
||
? 'border-red-300 bg-red-50'
|
||
: 'border-gray-300 hover:border-gray-400'
|
||
}`}
|
||
>
|
||
{selectedFolder ? (
|
||
<div className="flex items-center justify-center">
|
||
<CheckCircle className="w-8 h-8 text-green-500 mr-3" />
|
||
<div className="text-left">
|
||
<div className="text-sm font-medium text-gray-900">
|
||
已选择文件夹
|
||
</div>
|
||
<div className="text-xs text-gray-500 break-all">
|
||
{selectedFolder}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<>
|
||
<FolderOpen className="w-8 h-8 text-gray-400 mx-auto mb-2" />
|
||
<div className="text-sm text-gray-600 mb-2">
|
||
选择包含剪映草稿文件的文件夹
|
||
</div>
|
||
<div className="text-xs text-gray-500 mb-3">
|
||
系统将自动扫描文件夹中的所有 draft_content.json 文件
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
<button
|
||
type="button"
|
||
onClick={handleFolderSelect}
|
||
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 transition-colors"
|
||
>
|
||
<FolderOpen className="w-4 h-4 mr-2" />
|
||
选择文件夹
|
||
</button>
|
||
</div>
|
||
|
||
{errors.folder_path && (
|
||
<div className="flex items-center mt-2 text-sm text-red-600">
|
||
<AlertCircle className="w-4 h-4 mr-1" />
|
||
{errors.folder_path}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 关联项目 */}
|
||
<div className="mb-6">
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
关联项目
|
||
</label>
|
||
<CustomSelect
|
||
value={formData.project_id || ''}
|
||
onChange={(value) => setFormData(prev => ({ ...prev, project_id: value }))}
|
||
options={projectOptions}
|
||
placeholder="选择项目（可选）"
|
||
className="w-full"
|
||
/>
|
||
</div>
|
||
|
||
{/* 自动上传选项 */}
|
||
<div className="mb-6">
|
||
<label className="flex items-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={formData.auto_upload}
|
||
onChange={(e) => setFormData(prev => ({ ...prev, auto_upload: e.target.checked }))}
|
||
className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
|
||
/>
|
||
<span className="ml-2 text-sm text-gray-700">
|
||
自动上传素材到云端存储
|
||
</span>
|
||
</label>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
启用后将自动上传所有模板中的素材文件到云端
|
||
</p>
|
||
</div>
|
||
|
||
{/* 高级设置 */}
|
||
<div className="mb-6">
|
||
<button
|
||
type="button"
|
||
onClick={() => setShowAdvanced(!showAdvanced)}
|
||
className="flex items-center text-sm text-blue-600 hover:text-blue-700 transition-colors"
|
||
>
|
||
<Settings className="w-4 h-4 mr-1" />
|
||
高级设置
|
||
</button>
|
||
|
||
{showAdvanced && (
|
||
<div className="mt-4 p-4 bg-gray-50 rounded-lg">
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||
最大并发数
|
||
</label>
|
||
<CustomSelect
|
||
value={`${formData.max_concurrent || 3}`}
|
||
onChange={(value) => setFormData(prev => ({ ...prev, max_concurrent: parseInt(value) }))}
|
||
options={concurrentOptions}
|
||
className="w-full"
|
||
/>
|
||
<p className="text-xs text-gray-500 mt-1">
|
||
同时处理的模板数量，数值越大速度越快但占用资源越多
|
||
</p>
|
||
{errors.max_concurrent && (
|
||
<div className="flex items-center mt-1 text-sm text-red-600">
|
||
<AlertCircle className="w-4 h-4 mr-1" />
|
||
{errors.max_concurrent}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* 提示信息 */}
|
||
<div className="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
|
||
<div className="flex items-start">
|
||
<AlertCircle className="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" />
|
||
<div className="text-sm text-blue-800">
|
||
<div className="font-medium mb-1">批量导入说明：</div>
|
||
<ul className="text-xs space-y-1">
|
||
<li>• 系统将递归扫描选定文件夹中的所有 draft_content.json 文件</li>
|
||
<li>• 每个文件将作为一个独立的模板进行导入</li>
|
||
<li>• 导入过程中可以在模板管理页面查看进度</li>
|
||
<li>• 如果某个模板导入失败，不会影响其他模板的导入</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 操作按钮 */}
|
||
<div className="flex items-center justify-end space-x-3">
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
|
||
>
|
||
取消
|
||
</button>
|
||
<button
|
||
type="submit"
|
||
disabled={isLoading}
|
||
className="px-4 py-2 text-sm font-medium text-white bg-green-600 rounded-lg hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||
>
|
||
{isLoading ? '导入中...' : '开始批量导入'}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|