完成模特动态页面开发，移除标题和描述字段
This commit is contained in:
imeepos
265
apps/desktop/src/components/CreateDynamicModal.tsx
Normal file
265
apps/desktop/src/components/CreateDynamicModal.tsx
Normal file
@@ -0,0 +1,265 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Model, CreateDynamicRequest, AIModelOption } from '../types/model';
|
||||
import {
|
||||
XMarkIcon,
|
||||
PhotoIcon,
|
||||
SparklesIcon,
|
||||
CpuChipIcon,
|
||||
VideoCameraIcon
|
||||
} from '@heroicons/react/24/outline';
|
||||
|
||||
interface CreateDynamicModalProps {
|
||||
model: Model;
|
||||
onSubmit: (data: CreateDynamicRequest) => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
const CreateDynamicModal: React.FC<CreateDynamicModalProps> = ({
|
||||
model,
|
||||
onSubmit,
|
||||
onCancel
|
||||
}) => {
|
||||
const [formData, setFormData] = useState({
|
||||
prompt: '',
|
||||
source_image_path: '',
|
||||
ai_model: '极梦',
|
||||
video_count: 1
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// 可用的AI模型选项
|
||||
const aiModelOptions: AIModelOption[] = [
|
||||
{
|
||||
id: 'jimeng',
|
||||
name: '极梦',
|
||||
description: '高质量视频生成模型',
|
||||
is_available: true,
|
||||
max_video_count: 9
|
||||
}
|
||||
];
|
||||
|
||||
const handleInputChange = (field: string, value: any) => {
|
||||
setFormData(prev => ({ ...prev, [field]: value }));
|
||||
// 清除对应字段的错误
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({ ...prev, [field]: '' }));
|
||||
}
|
||||
};
|
||||
|
||||
const handleImageSelect = async () => {
|
||||
try {
|
||||
// TODO: 实现图片选择功能
|
||||
// const selectedPath = await systemService.selectImageFile();
|
||||
// if (selectedPath) {
|
||||
// handleInputChange('source_image_path', selectedPath);
|
||||
// }
|
||||
console.log('选择图片功能待实现');
|
||||
} catch (error) {
|
||||
console.error('选择图片失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const validateForm = () => {
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.prompt.trim()) {
|
||||
newErrors.prompt = '请输入提示词';
|
||||
}
|
||||
|
||||
if (!formData.source_image_path) {
|
||||
newErrors.source_image_path = '请选择源图片';
|
||||
}
|
||||
|
||||
if (formData.video_count < 1 || formData.video_count > 9) {
|
||||
newErrors.video_count = '视频个数必须在1-9之间';
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
return Object.keys(newErrors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
const submitData: CreateDynamicRequest = {
|
||||
model_id: model.id,
|
||||
title: undefined,
|
||||
description: '模特动态', // 使用默认描述
|
||||
prompt: formData.prompt.trim(),
|
||||
source_image_path: formData.source_image_path,
|
||||
ai_model: formData.ai_model,
|
||||
video_count: formData.video_count
|
||||
};
|
||||
|
||||
onSubmit(submitData);
|
||||
} catch (error) {
|
||||
console.error('提交失败:', error);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in">
|
||||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden animate-scale-in">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
|
||||
<SparklesIcon className="h-5 w-5 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-semibold text-gray-900">生成视频</h2>
|
||||
<p className="text-sm text-gray-500">为 {model.name} 生成AI视频</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onCancel}
|
||||
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
<XMarkIcon className="h-5 w-5 text-gray-500" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 表单内容 */}
|
||||
<form onSubmit={handleSubmit} className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-140px)]">
|
||||
|
||||
{/* 提示词 */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||
<SparklesIcon className="h-4 w-4" />
|
||||
AI提示词 *
|
||||
</label>
|
||||
<textarea
|
||||
value={formData.prompt}
|
||||
onChange={(e) => handleInputChange('prompt', e.target.value)}
|
||||
placeholder="描述您希望生成的视频内容..."
|
||||
rows={4}
|
||||
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none ${
|
||||
errors.prompt ? 'border-red-300' : 'border-gray-300'
|
||||
}`}
|
||||
/>
|
||||
{errors.prompt && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.prompt}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 源图片 */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||
<PhotoIcon className="h-4 w-4" />
|
||||
源图片 *
|
||||
</label>
|
||||
<div className="space-y-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleImageSelect}
|
||||
className={`w-full p-4 border-2 border-dashed rounded-lg transition-colors ${
|
||||
errors.source_image_path
|
||||
? 'border-red-300 bg-red-50'
|
||||
: 'border-gray-300 hover:border-primary-400 hover:bg-primary-50'
|
||||
}`}
|
||||
>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<PhotoIcon className="h-8 w-8 text-gray-400" />
|
||||
<span className="text-sm text-gray-600">点击选择图片</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
{formData.source_image_path && (
|
||||
<div className="relative">
|
||||
<img
|
||||
src={formData.source_image_path}
|
||||
alt="源图片预览"
|
||||
className="w-full h-48 object-contain bg-gray-50 rounded-lg"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleInputChange('source_image_path', '')}
|
||||
className="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errors.source_image_path && (
|
||||
<p className="text-sm text-red-600">{errors.source_image_path}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* AI模型选择 */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||
<CpuChipIcon className="h-4 w-4" />
|
||||
AI模型
|
||||
</label>
|
||||
<select
|
||||
value={formData.ai_model}
|
||||
onChange={(e) => handleInputChange('ai_model', e.target.value)}
|
||||
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
||||
>
|
||||
{aiModelOptions.map((option) => (
|
||||
<option key={option.id} value={option.name} disabled={!option.is_available}>
|
||||
{option.name} - {option.description}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 视频个数 */}
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
||||
<VideoCameraIcon className="h-4 w-4" />
|
||||
生成视频个数
|
||||
</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<input
|
||||
type="range"
|
||||
min="1"
|
||||
max="9"
|
||||
value={formData.video_count}
|
||||
onChange={(e) => handleInputChange('video_count', parseInt(e.target.value))}
|
||||
className="flex-1"
|
||||
/>
|
||||
<span className="text-sm font-medium text-gray-700 min-w-[2rem]">
|
||||
{formData.video_count}
|
||||
</span>
|
||||
</div>
|
||||
{errors.video_count && (
|
||||
<p className="mt-1 text-sm text-red-600">{errors.video_count}</p>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{/* 底部按钮 */}
|
||||
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
className="px-6 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-sm hover:shadow-md font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? '生成中...' : '开始生成'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateDynamicModal;
|
||||
Reference in New Issue
Block a user