445 lines
19 KiB
JavaScript
445 lines
19 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useParams, useNavigate } from 'react-router-dom';
|
|
import { useQuery, useQueryClient } from '@tanstack/react-query';
|
|
import { Typography, Tabs, Button, Row, Col, Card, Statistic, Tag, Descriptions, Empty, message, Spin, Modal, List, Avatar, Grid } from 'antd';
|
|
import { CalendarOutlined, TrophyOutlined, UserOutlined, FileTextOutlined, CloudUploadOutlined, CopyOutlined, CheckOutlined, MessageOutlined } from '@ant-design/icons';
|
|
import ReactMarkdown from 'react-markdown';
|
|
import remarkGfm from 'remark-gfm';
|
|
import rehypeRaw from 'rehype-raw';
|
|
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
import dayjs from 'dayjs';
|
|
import { getCompetitionDetail, getProjects, getMyCompetitionEnrollment, enrollCompetition, getComments } from '../../api';
|
|
import ProjectSubmission from './ProjectSubmission';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
import 'github-markdown-css/github-markdown-dark.css';
|
|
|
|
/**
|
|
* Get the full URL for an image.
|
|
* Handles relative paths and ensures correct API base URL is used.
|
|
* @param {string} url - The image URL path
|
|
* @returns {string} The full absolute URL
|
|
*/
|
|
const getImageUrl = (url) => {
|
|
if (!url) return '';
|
|
if (url.startsWith('http') || url.startsWith('//')) return url;
|
|
const apiUrl = import.meta.env.VITE_API_URL || 'http://localhost:8000/api';
|
|
// Remove /api suffix if present to get the root URL for media files
|
|
const baseUrl = apiUrl.replace(/\/api\/?$/, '');
|
|
return `${baseUrl}${url}`;
|
|
};
|
|
|
|
const { Title, Paragraph } = Typography;
|
|
const { useBreakpoint } = Grid;
|
|
|
|
/**
|
|
* Code block component for markdown rendering with syntax highlighting and copy functionality.
|
|
*/
|
|
const CodeBlock = ({ inline, className, children, ...props }) => {
|
|
const [copied, setCopied] = useState(false);
|
|
const match = /language-(\w+)/.exec(className || '');
|
|
const codeString = String(children).replace(/\n$/, '');
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(codeString);
|
|
setCopied(true);
|
|
message.success('代码已复制');
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return !inline && match ? (
|
|
<div style={{ position: 'relative', margin: '1em 0' }}>
|
|
<div
|
|
onClick={handleCopy}
|
|
style={{
|
|
position: 'absolute',
|
|
top: 8,
|
|
right: 8,
|
|
color: '#ccc',
|
|
cursor: 'pointer',
|
|
zIndex: 1,
|
|
background: 'rgba(0,0,0,0.5)',
|
|
padding: '4px 8px',
|
|
borderRadius: 4,
|
|
fontSize: 12,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 4
|
|
}}
|
|
>
|
|
{copied ? <CheckOutlined /> : <CopyOutlined />}
|
|
<span>{copied ? '已复制' : '复制'}</span>
|
|
</div>
|
|
<SyntaxHighlighter
|
|
style={vscDarkPlus}
|
|
language={match[1]}
|
|
PreTag="div"
|
|
{...props}
|
|
>
|
|
{codeString}
|
|
</SyntaxHighlighter>
|
|
</div>
|
|
) : (
|
|
<code className={className} {...props}>
|
|
{children}
|
|
</code>
|
|
);
|
|
};
|
|
|
|
/**
|
|
* 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 <Spin size="large" style={{ display: 'block', margin: '100px auto' }} />;
|
|
if (!competition) return <Empty description="比赛不存在" />;
|
|
|
|
const isContestant = enrollment?.role === 'contestant' && enrollment?.status === 'approved';
|
|
|
|
const items = [
|
|
{
|
|
key: 'details',
|
|
label: '比赛详情',
|
|
children: (
|
|
<div style={{ padding: isMobile ? 12 : 24, background: '#1f1f1f', borderRadius: 8 }}>
|
|
<Descriptions title="基本信息" bordered column={{ xs: 1, sm: 2, md: 3 }} size={isMobile ? 'small' : 'default'}>
|
|
<Descriptions.Item label="状态">
|
|
<Tag color={competition.status === 'registration' ? 'green' : 'default'}>
|
|
{competition.status_display}
|
|
</Tag>
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="报名时间">
|
|
{dayjs(competition.start_time).format('YYYY-MM-DD')}
|
|
</Descriptions.Item>
|
|
<Descriptions.Item label="结束时间">
|
|
{dayjs(competition.end_time).format('YYYY-MM-DD')}
|
|
</Descriptions.Item>
|
|
</Descriptions>
|
|
|
|
<Title level={isMobile ? 5 : 4} style={{ marginTop: isMobile ? 24 : 32, color: '#fff' }}>比赛简介</Title>
|
|
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px' }} className="markdown-body">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeRaw]}
|
|
components={{
|
|
code: CodeBlock,
|
|
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
|
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
|
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
|
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
|
a: (props) => <a {...props} style={{ color: '#00b96b' }} target="_blank" rel="noopener noreferrer" />,
|
|
blockquote: (props) => <blockquote {...props} style={{ borderLeft: '4px solid #00b96b', color: '#999', paddingLeft: '1em', margin: '1em 0' }} />,
|
|
table: (props) => <table {...props} style={{ borderCollapse: 'collapse', width: '100%', margin: '1em 0', display: 'block', overflowX: 'auto' }} />,
|
|
th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333', whiteSpace: 'nowrap' }} />,
|
|
td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
|
|
}}
|
|
>
|
|
{competition.description}
|
|
</ReactMarkdown>
|
|
</div>
|
|
|
|
<Title level={isMobile ? 5 : 4} style={{ marginTop: isMobile ? 24 : 32, color: '#fff' }}>规则说明</Title>
|
|
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px' }} className="markdown-body">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeRaw]}
|
|
components={{
|
|
code: CodeBlock,
|
|
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
|
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
|
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
|
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
|
a: (props) => <a {...props} style={{ color: '#00b96b' }} target="_blank" rel="noopener noreferrer" />,
|
|
blockquote: (props) => <blockquote {...props} style={{ borderLeft: '4px solid #00b96b', color: '#999', paddingLeft: '1em', margin: '1em 0' }} />,
|
|
table: (props) => <table {...props} style={{ borderCollapse: 'collapse', width: '100%', margin: '1em 0', display: 'block', overflowX: 'auto' }} />,
|
|
th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333', whiteSpace: 'nowrap' }} />,
|
|
td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
|
|
}}
|
|
>
|
|
{competition.rule_description}
|
|
</ReactMarkdown>
|
|
</div>
|
|
|
|
<Title level={isMobile ? 5 : 4} style={{ marginTop: isMobile ? 24 : 32, color: '#fff' }}>参赛条件</Title>
|
|
<div style={{ color: '#ccc', lineHeight: '1.8', fontSize: isMobile ? '14px' : '16px' }} className="markdown-body">
|
|
<ReactMarkdown
|
|
remarkPlugins={[remarkGfm]}
|
|
rehypePlugins={[rehypeRaw]}
|
|
components={{
|
|
code: CodeBlock,
|
|
img: (props) => <img {...props} src={getImageUrl(props.src)} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
|
|
h1: (props) => <h1 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.5em' : '2em' }} />,
|
|
h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em', fontSize: isMobile ? '1.3em' : '1.5em' }} />,
|
|
h3: (props) => <h3 {...props} style={{ color: '#eee', fontSize: isMobile ? '1.1em' : '1.25em' }} />,
|
|
a: (props) => <a {...props} style={{ color: '#00b96b' }} target="_blank" rel="noopener noreferrer" />,
|
|
blockquote: (props) => <blockquote {...props} style={{ borderLeft: '4px solid #00b96b', color: '#999', paddingLeft: '1em', margin: '1em 0' }} />,
|
|
table: (props) => <table {...props} style={{ borderCollapse: 'collapse', width: '100%', margin: '1em 0', display: 'block', overflowX: 'auto' }} />,
|
|
th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333', whiteSpace: 'nowrap' }} />,
|
|
td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
|
|
}}
|
|
>
|
|
{competition.condition_description}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
key: 'projects',
|
|
label: '参赛项目',
|
|
children: (
|
|
<Row gutter={[isMobile ? 16 : 24, isMobile ? 16 : 24]}>
|
|
{projects?.results?.map(project => (
|
|
<Col key={project.id} xs={24} sm={12} md={8}>
|
|
<Card
|
|
hoverable
|
|
cover={<img alt={project.title} src={getImageUrl(project.display_cover_image) || 'placeholder.jpg'} style={{ height: 180, objectFit: 'cover' }} />}
|
|
actions={[
|
|
<Button type="link" onClick={() => navigate(`/projects/${project.id}`)}>查看详情</Button>,
|
|
<Button type="link" icon={<MessageOutlined />} onClick={() => handleViewComments(project)}>评语</Button>
|
|
]}
|
|
>
|
|
<Card.Meta
|
|
title={project.title}
|
|
description={
|
|
enrollment && project.contestant === enrollment.id
|
|
? `得分: ${project.final_score || '待定'}`
|
|
: null
|
|
}
|
|
avatar={<UserOutlined />}
|
|
/>
|
|
</Card>
|
|
</Col>
|
|
))}
|
|
{(!projects?.results || projects.results.length === 0) && (
|
|
<Col span={24}><Empty description="暂无已提交项目" /></Col>
|
|
)}
|
|
</Row>
|
|
)
|
|
},
|
|
{
|
|
key: 'leaderboard',
|
|
label: '排行榜',
|
|
children: (
|
|
<Card title="实时排名" variant="borderless" style={{ background: 'transparent' }} headStyle={{ color: '#fff', fontSize: isMobile ? '16px' : '18px' }} bodyStyle={{ padding: isMobile ? '0 12px' : '24px' }}>
|
|
{/* Leaderboard Logic: sort by final_score descending */}
|
|
{[...(projects?.results || [])].sort((a, b) => b.final_score - a.final_score).map((project, index) => (
|
|
<div key={project.id} style={{ display: 'flex', alignItems: 'center', padding: isMobile ? '8px 0' : '12px 0', borderBottom: '1px solid #333' }}>
|
|
<div style={{ width: isMobile ? 30 : 40, fontSize: isMobile ? 16 : 20, fontWeight: 'bold', color: index < 3 ? '#ffd700' : '#fff' }}>
|
|
#{index + 1}
|
|
</div>
|
|
<div style={{ flex: 1, paddingRight: 8 }}>
|
|
<div style={{ color: '#fff', fontSize: isMobile ? 14 : 16, wordBreak: 'break-all' }}>{project.title}</div>
|
|
<div style={{ color: '#888', fontSize: 12 }}>{project.contestant_info?.nickname}</div>
|
|
</div>
|
|
<div style={{ fontSize: isMobile ? 18 : 24, color: '#00b96b', fontWeight: 'bold' }}>
|
|
{project.final_score || 0}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Card>
|
|
)
|
|
}
|
|
];
|
|
|
|
return (
|
|
<div style={{ maxWidth: 1200, margin: '0 auto', padding: isMobile ? '12px' : '24px' }}>
|
|
<div style={{
|
|
height: isMobile ? 240 : 300,
|
|
backgroundImage: `url(${getImageUrl(competition.display_cover_image)})`,
|
|
backgroundSize: 'cover',
|
|
backgroundPosition: 'center',
|
|
borderRadius: 16,
|
|
marginBottom: isMobile ? 16 : 32,
|
|
position: 'relative',
|
|
overflow: 'hidden'
|
|
}}>
|
|
<div style={{
|
|
position: 'absolute',
|
|
bottom: 0,
|
|
left: 0,
|
|
right: 0,
|
|
padding: isMobile ? 16 : 32,
|
|
background: 'linear-gradient(to top, rgba(0,0,0,0.9), transparent)'
|
|
}}>
|
|
<Title level={isMobile ? 3 : 1} style={{ color: '#fff', margin: 0, fontSize: isMobile ? '24px' : undefined }}>{competition.title}</Title>
|
|
<div style={{ marginTop: isMobile ? 12 : 16, display: 'flex', flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 8 : 16, flexWrap: 'wrap' }}>
|
|
{enrollment ? (
|
|
<Button type="primary" disabled size={isMobile ? 'middle' : 'large'}>{enrollment.status === 'approved' ? '已报名' : '审核中'}</Button>
|
|
) : (
|
|
<Button type="primary" size={isMobile ? 'middle' : 'large'} onClick={handleEnroll} disabled={competition.status !== 'registration'}>
|
|
{competition.status === 'registration' ? '立即报名' : '报名未开始/已结束'}
|
|
</Button>
|
|
)}
|
|
{isContestant && (
|
|
<>
|
|
<Button
|
|
icon={<CloudUploadOutlined />}
|
|
loading={loadingMyProject}
|
|
size={isMobile ? 'middle' : 'large'}
|
|
onClick={() => {
|
|
setEditingProject(myProject || null);
|
|
setSubmissionModalVisible(true);
|
|
}}
|
|
>
|
|
{myProject ? '管理/修改作品' : '提交作品'}
|
|
</Button>
|
|
{myProject && (
|
|
<Button
|
|
icon={<MessageOutlined />}
|
|
style={{ marginLeft: isMobile ? 0 : 8 }}
|
|
size={isMobile ? 'middle' : 'large'}
|
|
onClick={() => handleViewComments(myProject)}
|
|
>
|
|
查看评语
|
|
</Button>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Tabs
|
|
activeKey={activeTab}
|
|
onChange={setActiveTab}
|
|
items={items}
|
|
type="card"
|
|
size={isMobile ? 'small' : 'large'}
|
|
tabBarGutter={isMobile ? 8 : undefined}
|
|
/>
|
|
|
|
{submissionModalVisible && (
|
|
<ProjectSubmission
|
|
competitionId={id}
|
|
initialValues={editingProject}
|
|
onCancel={() => {
|
|
setSubmissionModalVisible(false);
|
|
setEditingProject(null);
|
|
}}
|
|
onSuccess={() => {
|
|
setSubmissionModalVisible(false);
|
|
setEditingProject(null);
|
|
// Refetch projects
|
|
queryClient.invalidateQueries(['projects']);
|
|
queryClient.invalidateQueries(['myProject']);
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
<Modal
|
|
title="评委评语"
|
|
open={commentsModalVisible}
|
|
onCancel={() => setCommentsModalVisible(false)}
|
|
footer={null}
|
|
>
|
|
<List
|
|
loading={commentsLoading}
|
|
itemLayout="horizontal"
|
|
dataSource={currentProjectComments}
|
|
renderItem={item => (
|
|
<List.Item>
|
|
<List.Item.Meta
|
|
avatar={<Avatar icon={<UserOutlined />} />}
|
|
title={item.judge_name || '评委'}
|
|
description={
|
|
<div>
|
|
<div style={{ color: 'inherit' }}>{item.content}</div>
|
|
<div style={{ fontSize: 12, color: '#999', marginTop: 4 }}>
|
|
{dayjs(item.created_at).format('YYYY-MM-DD HH:mm')}
|
|
</div>
|
|
</div>
|
|
}
|
|
/>
|
|
</List.Item>
|
|
)}
|
|
locale={{ emptyText: '暂无评语' }}
|
|
/>
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CompetitionDetail; |