Initial commit: CarrotSkin project setup
This commit is contained in:
199
src/components/profile/UploadSkinModal.tsx
Normal file
199
src/components/profile/UploadSkinModal.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
'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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user