{children}
);
};
/**
* Main component for displaying competition details.
* Includes tabs for overview, projects, and leaderboard.
* Responsive design for mobile and desktop.
*/
const CompetitionDetail = () => {
const { id } = useParams();
const navigate = useNavigate();
const queryClient = useQueryClient();
const { user, showLoginModal } = useAuth();
const [activeTab, setActiveTab] = useState('details');
const [submissionModalVisible, setSubmissionModalVisible] = useState(false);
const [editingProject, setEditingProject] = useState(null);
const [commentsModalVisible, setCommentsModalVisible] = useState(false);
const [currentProjectComments, setCurrentProjectComments] = useState([]);
const [commentsLoading, setCommentsLoading] = useState(false);
const screens = useBreakpoint();
const isMobile = !screens.md;
// Fetch competition details
const { data: competition, isLoading: loadingDetail } = useQuery({
queryKey: ['competition', id],
queryFn: () => getCompetitionDetail(id).then(res => res.data)
});
// Fetch projects (for leaderboard/display)
const { data: projects } = useQuery({
queryKey: ['projects', id],
queryFn: () => getProjects({ competition: id, status: 'submitted', page_size: 100 }).then(res => res.data)
});
// Check enrollment status
const { data: enrollment, refetch: refetchEnrollment } = useQuery({
queryKey: ['enrollment', id],
queryFn: () => getMyCompetitionEnrollment(id).then(res => res.data),
enabled: !!user,
retry: false
});
// Fetch my project if enrolled
const { data: myProjects, isLoading: loadingMyProject } = useQuery({
queryKey: ['myProject', id, enrollment?.id],
queryFn: () => getProjects({ competition: id, contestant: enrollment.id }).then(res => res.data),
enabled: !!enrollment?.id
});
const myProject = myProjects?.results?.[0];
/**
* Handle competition enrollment.
* Checks login status and submits enrollment request.
*/
const handleEnroll = async () => {
if (!user) {
showLoginModal();
return;
}
try {
await enrollCompetition(id, { role: 'contestant' });
message.success('报名申请已提交，请等待审核');
refetchEnrollment();
} catch (error) {
message.error(error.response?.data?.detail || '报名失败');
}
};
/**
* Fetch and display judge comments for a project.
* @param {Object} project - The project object
*/
const handleViewComments = async (project) => {
if (!project) return;
setCommentsLoading(true);
setCommentsModalVisible(true);
try {
const res = await getComments({ project: project.id });
// Support pagination result or list result
setCurrentProjectComments(res.data?.results || res.data || []);
} catch (error) {
console.error(error);
message.error('获取评语失败');
} finally {
setCommentsLoading(false);
}
};
if (loadingDetail) return