269 lines
13 KiB
TypeScript
269 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import React, { useState, useEffect } from 'react';
|
||
import { motion, AnimatePresence } from 'framer-motion';
|
||
import { X, CheckCircle2, Search, FileText, Users, Calendar, Clock, ArrowRight, Loader2 } from 'lucide-react';
|
||
import { ExamDto, ClassDto } from '../../../../UI_DTO';
|
||
import { examService, orgService, assignmentService } from '@/services/api';
|
||
import { useToast } from '@/components/ui/Toast';
|
||
|
||
interface CreateAssignmentModalProps {
|
||
onClose: () => void;
|
||
onSuccess: () => void;
|
||
}
|
||
|
||
export const CreateAssignmentModal: React.FC<CreateAssignmentModalProps> = ({ onClose, onSuccess }) => {
|
||
const [step, setStep] = useState(1);
|
||
const [loading, setLoading] = useState(false);
|
||
const { showToast } = useToast();
|
||
|
||
const [exams, setExams] = useState<ExamDto[]>([]);
|
||
const [classes, setClasses] = useState<ClassDto[]>([]);
|
||
|
||
const [selectedExam, setSelectedExam] = useState<ExamDto | null>(null);
|
||
const [selectedClassIds, setSelectedClassIds] = useState<string[]>([]);
|
||
const [config, setConfig] = useState({
|
||
title: '',
|
||
startDate: new Date().toISOString().split('T')[0],
|
||
dueDate: new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0]
|
||
});
|
||
|
||
useEffect(() => {
|
||
examService.getMyExams().then(res => setExams(res.items));
|
||
orgService.getClasses().then(setClasses);
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (selectedExam && !config.title) {
|
||
setConfig(prev => ({ ...prev, title: selectedExam.title + ' - 作业' }));
|
||
}
|
||
}, [selectedExam]);
|
||
|
||
const handlePublish = async () => {
|
||
setLoading(true);
|
||
try {
|
||
await assignmentService.publishAssignment({
|
||
examId: selectedExam?.id,
|
||
classIds: selectedClassIds,
|
||
...config
|
||
});
|
||
showToast('作业发布成功！', 'success');
|
||
onSuccess();
|
||
} catch (e) {
|
||
showToast('发布失败，请重试', 'error');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const steps = [
|
||
{ num: 1, label: '选择试卷' },
|
||
{ num: 2, label: '选择班级' },
|
||
{ num: 3, label: '发布设置' }
|
||
];
|
||
|
||
return (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||
<div className="absolute inset-0 bg-black/30 backdrop-blur-sm" onClick={onClose} />
|
||
{/* Fix: cast props to any to avoid framer-motion type errors */}
|
||
<motion.div
|
||
{...({
|
||
initial: { opacity: 0, scale: 0.95, y: 20 },
|
||
animate: { opacity: 1, scale: 1, y: 0 }
|
||
} as any)}
|
||
className="bg-white w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden relative z-10 flex flex-col max-h-[90vh]"
|
||
>
|
||
<div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50 backdrop-blur">
|
||
<h3 className="font-bold text-lg text-gray-900">发布新作业</h3>
|
||
<button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full text-gray-500"><X size={20}/></button>
|
||
</div>
|
||
|
||
<div className="px-8 py-6">
|
||
<div className="flex items-center justify-between relative">
|
||
<div className="absolute top-1/2 left-0 w-full h-0.5 bg-gray-100 -z-10" />
|
||
{steps.map((s) => (
|
||
<div key={s.num} className="flex flex-col items-center gap-2 bg-white px-2">
|
||
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold transition-all border-2 ${step >= s.num ? 'bg-blue-600 border-blue-600 text-white' : 'bg-white border-gray-200 text-gray-400'}`}>
|
||
{step > s.num ? <CheckCircle2 size={18} /> : s.num}
|
||
</div>
|
||
<span className={`text-xs font-bold ${step >= s.num ? 'text-blue-600' : 'text-gray-400'}`}>{s.label}</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex-1 overflow-y-auto p-6 min-h-[300px]">
|
||
<AnimatePresence mode='wait'>
|
||
{step === 1 && (
|
||
// Fix: cast props to any to avoid framer-motion type errors
|
||
<motion.div
|
||
key="step1"
|
||
{...({
|
||
initial: { x: 20, opacity: 0 },
|
||
animate: { x: 0, opacity: 1 },
|
||
exit: { x: -20, opacity: 0 }
|
||
} as any)}
|
||
className="space-y-4"
|
||
>
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||
<input placeholder="搜索试卷..." className="w-full pl-10 pr-4 py-3 bg-gray-50 rounded-xl border-none outline-none focus:ring-2 focus:ring-blue-500/20" />
|
||
</div>
|
||
<div className="space-y-2 max-h-[400px] overflow-y-auto custom-scrollbar">
|
||
{exams.map(exam => (
|
||
<div
|
||
key={exam.id}
|
||
onClick={() => setSelectedExam(exam)}
|
||
className={`p-4 rounded-xl border cursor-pointer transition-all flex items-center gap-4
|
||
${selectedExam?.id === exam.id ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500' : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'}
|
||
`}
|
||
>
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${selectedExam?.id === exam.id ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-500'}`}>
|
||
<FileText size={20} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h4 className={`font-bold ${selectedExam?.id === exam.id ? 'text-blue-800' : 'text-gray-900'}`}>{exam.title}</h4>
|
||
<div className="flex gap-3 mt-1 text-xs text-gray-500">
|
||
<span>{exam.questionCount} 题</span>
|
||
<span>{exam.duration} 分钟</span>
|
||
<span>总分 {exam.totalScore}</span>
|
||
</div>
|
||
</div>
|
||
{selectedExam?.id === exam.id && <CheckCircle2 className="text-blue-600" />}
|
||
</div>
|
||
))}
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{step === 2 && (
|
||
// Fix: cast props to any to avoid framer-motion type errors
|
||
<motion.div
|
||
key="step2"
|
||
{...({
|
||
initial: { x: 20, opacity: 0 },
|
||
animate: { x: 0, opacity: 1 },
|
||
exit: { x: -20, opacity: 0 }
|
||
} as any)}
|
||
className="grid grid-cols-1 sm:grid-cols-2 gap-4"
|
||
>
|
||
{classes.map(cls => {
|
||
const isSelected = selectedClassIds.includes(cls.id);
|
||
return (
|
||
<div
|
||
key={cls.id}
|
||
onClick={() => {
|
||
setSelectedClassIds(prev =>
|
||
isSelected ? prev.filter(id => id !== cls.id) : [...prev, cls.id]
|
||
);
|
||
}}
|
||
className={`p-4 rounded-xl border cursor-pointer transition-all flex items-start gap-4
|
||
${isSelected ? 'border-blue-500 bg-blue-50 ring-1 ring-blue-500' : 'border-gray-200 hover:border-blue-300 hover:bg-gray-50'}
|
||
`}
|
||
>
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${isSelected ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-500'}`}>
|
||
<Users size={20} />
|
||
</div>
|
||
<div className="flex-1">
|
||
<h4 className={`font-bold ${isSelected ? 'text-blue-800' : 'text-gray-900'}`}>{cls.name}</h4>
|
||
<p className="text-xs text-gray-500 mt-1">{cls.studentCount} 名学生</p>
|
||
</div>
|
||
<div className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${isSelected ? 'border-blue-500 bg-blue-500 text-white' : 'border-gray-300'}`}>
|
||
{isSelected && <CheckCircle2 size={12} />}
|
||
</div>
|
||
</div>
|
||
)
|
||
})}
|
||
</motion.div>
|
||
)}
|
||
|
||
{step === 3 && (
|
||
// Fix: cast props to any to avoid framer-motion type errors
|
||
<motion.div
|
||
key="step3"
|
||
{...({
|
||
initial: { x: 20, opacity: 0 },
|
||
animate: { x: 0, opacity: 1 },
|
||
exit: { x: -20, opacity: 0 }
|
||
} as any)}
|
||
className="space-y-6"
|
||
>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-bold text-gray-700">作业标题</label>
|
||
<input
|
||
value={config.title}
|
||
onChange={e => setConfig({...config, title: e.target.value})}
|
||
className="w-full p-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-500 transition-colors"
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-6">
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-bold text-gray-700">开始时间</label>
|
||
<div className="relative">
|
||
<Calendar className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18}/>
|
||
<input
|
||
type="date"
|
||
value={config.startDate}
|
||
onChange={e => setConfig({...config, startDate: e.target.value})}
|
||
className="w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-500 transition-colors"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<label className="text-sm font-bold text-gray-700">截止时间</label>
|
||
<div className="relative">
|
||
<Clock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18}/>
|
||
<input
|
||
type="date"
|
||
value={config.dueDate}
|
||
onChange={e => setConfig({...config, dueDate: e.target.value})}
|
||
className="w-full pl-10 pr-3 py-3 bg-gray-50 border border-gray-200 rounded-xl outline-none focus:border-blue-500 transition-colors"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="bg-blue-50 p-4 rounded-xl border border-blue-100">
|
||
<h4 className="font-bold text-blue-800 mb-2">发布预览</h4>
|
||
<ul className="space-y-2 text-sm text-blue-600/80">
|
||
<li>• 试卷：{selectedExam?.title}</li>
|
||
<li>• 对象：共选中 {selectedClassIds.length} 个班级</li>
|
||
<li>• 时长：{selectedExam?.duration} 分钟</li>
|
||
</ul>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
</div>
|
||
|
||
<div className="p-6 border-t border-gray-100 bg-gray-50/50 backdrop-blur flex justify-between items-center">
|
||
{step > 1 ? (
|
||
<button onClick={() => setStep(step - 1)} className="text-gray-500 font-bold hover:text-gray-900 px-4 py-2">上一步</button>
|
||
) : (
|
||
<div />
|
||
)}
|
||
|
||
{step < 3 ? (
|
||
<button
|
||
onClick={() => setStep(step + 1)}
|
||
disabled={step === 1 && !selectedExam || step === 2 && selectedClassIds.length === 0}
|
||
className="bg-gray-900 text-white px-6 py-3 rounded-xl font-bold shadow-lg hover:bg-black disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-all"
|
||
>
|
||
下一步 <ArrowRight size={18} />
|
||
</button>
|
||
) : (
|
||
<button
|
||
onClick={handlePublish}
|
||
disabled={loading}
|
||
className="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold shadow-lg shadow-blue-500/30 hover:bg-blue-700 disabled:opacity-70 flex items-center gap-2 transition-all"
|
||
>
|
||
{loading ? <Loader2 className="animate-spin" /> : <CheckCircle2 size={18} />}
|
||
确认发布
|
||
</button>
|
||
)}
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
);
|
||
}; |