200 lines
7.7 KiB
TypeScript
200 lines
7.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { XMarkIcon, CloudArrowUpIcon } from '@heroicons/react/24/outline';
|
|
import { messageManager } from '@/components/MessageNotification';
|
|
|
|
interface UploadSkinModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onUpload: (file: File, data: {
|
|
name: string;
|
|
description: string;
|
|
type: 'SKIN' | 'CAPE';
|
|
is_public: boolean;
|
|
is_slim: boolean;
|
|
}) => Promise<void>;
|
|
isUploading?: boolean;
|
|
uploadProgress?: number;
|
|
}
|
|
|
|
export default function UploadSkinModal({
|
|
isOpen,
|
|
onClose,
|
|
onUpload,
|
|
isUploading = false,
|
|
uploadProgress = 0
|
|
}: UploadSkinModalProps) {
|
|
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
|
const [skinData, setSkinData] = useState({
|
|
name: '',
|
|
description: '',
|
|
type: 'SKIN' as 'SKIN' | 'CAPE',
|
|
is_public: false,
|
|
is_slim: false
|
|
});
|
|
|
|
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setSelectedFile(file);
|
|
}
|
|
};
|
|
|
|
const handleSubmit = async () => {
|
|
if (!selectedFile || !skinData.name.trim()) {
|
|
messageManager.warning('请选择皮肤文件并输入皮肤名称', { duration: 3000 });
|
|
return;
|
|
}
|
|
|
|
await onUpload(selectedFile, skinData);
|
|
// 重置表单
|
|
setSelectedFile(null);
|
|
setSkinData({
|
|
name: '',
|
|
description: '',
|
|
type: 'SKIN',
|
|
is_public: false,
|
|
is_slim: false
|
|
});
|
|
};
|
|
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
className="fixed inset-0 bg-black/50 flex items-center justify-center z-[9999]"
|
|
>
|
|
<motion.div
|
|
initial={{ scale: 0.9, y: 20 }}
|
|
animate={{ scale: 1, y: 0 }}
|
|
exit={{ scale: 0.9, y: 20 }}
|
|
className="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto"
|
|
>
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-xl font-bold text-gray-900 dark:text-white">上传皮肤</h3>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
|
>
|
|
<XMarkIcon className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
皮肤文件
|
|
</label>
|
|
<div className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-6 text-center hover:border-orange-500 transition-colors">
|
|
<CloudArrowUpIcon className="w-12 h-12 text-gray-400 mx-auto mb-2" />
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mb-2">
|
|
点击选择文件或拖拽到此处
|
|
</p>
|
|
<input
|
|
type="file"
|
|
accept=".png"
|
|
onChange={handleFileSelect}
|
|
className="hidden"
|
|
id="skin-upload"
|
|
/>
|
|
<label
|
|
htmlFor="skin-upload"
|
|
className="cursor-pointer bg-gradient-to-r from-orange-500 to-amber-500 text-white px-4 py-2 rounded-lg hover:from-orange-600 hover:to-amber-600 transition-all"
|
|
>
|
|
选择文件
|
|
</label>
|
|
{selectedFile && (
|
|
<p className="text-sm text-green-600 dark:text-green-400 mt-2">
|
|
已选择: {selectedFile.name}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
皮肤名称
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={skinData.name}
|
|
onChange={(e) => setSkinData(prev => ({ ...prev, name: e.target.value }))}
|
|
className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
|
placeholder="请输入皮肤名称"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
描述
|
|
</label>
|
|
<textarea
|
|
value={skinData.description}
|
|
onChange={(e) => setSkinData(prev => ({ ...prev, description: e.target.value }))}
|
|
className="w-full px-4 py-3 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-transparent"
|
|
placeholder="请输入皮肤描述（可选）"
|
|
rows={3}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={skinData.is_public}
|
|
onChange={(e) => setSkinData(prev => ({ ...prev, is_public: e.target.checked }))}
|
|
className="w-4 h-4 text-orange-500 rounded focus:ring-orange-500"
|
|
/>
|
|
<span className="text-sm text-gray-700 dark:text-gray-300">公开</span>
|
|
</label>
|
|
</div>
|
|
<div>
|
|
<label className="flex items-center space-x-2">
|
|
<input
|
|
type="checkbox"
|
|
checked={skinData.is_slim}
|
|
onChange={(e) => setSkinData(prev => ({ ...prev, is_slim: e.target.checked }))}
|
|
className="w-4 h-4 text-orange-500 rounded focus:ring-orange-500"
|
|
/>
|
|
<span className="text-sm text-gray-700 dark:text-gray-300">细臂模型</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{isUploading && (
|
|
<div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
|
|
<div
|
|
className="bg-gradient-to-r from-orange-500 to-amber-500 h-2 rounded-full transition-all duration-300"
|
|
style={{ width: `${uploadProgress}%` }}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex space-x-3">
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={!selectedFile || !skinData.name.trim() || isUploading}
|
|
className="flex-1 px-4 py-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-xl hover:from-orange-600 hover:to-amber-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
>
|
|
{isUploading ? `上传中... ${uploadProgress}%` : '上传'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
}
|