比赛

2026-03-10 13:32:04 +08:00
parent 3ada996915
commit af763b1bee
7 changed files with 447 additions and 31 deletions
--- a/backend/competition/serializers.py
+++ b/backend/competition/serializers.py
@@ -10,12 +10,13 @@ class ScoreDimensionSerializer(serializers.ModelSerializer):
 class CompetitionSerializer(serializers.ModelSerializer):
    score_dimensions = ScoreDimensionSerializer(many=True, read_only=True)
    display_cover_image = serializers.SerializerMethodField()
+    status_display = serializers.CharField(source='get_status_display', read_only=True)
    
    class Meta:
        model = Competition
        fields = ['id', 'title', 'description', 'rule_description', 'condition_description', 
                  'cover_image', 'cover_image_url', 'display_cover_image',
-                  'start_time', 'end_time', 'status', 'is_active', 
+                  'start_time', 'end_time', 'status', 'status_display', 'is_active', 
                  'score_dimensions', 'created_at']

    def get_display_cover_image(self, obj):
--- a/backend/competition/views.py
+++ b/backend/competition/views.py
@@ -82,6 +82,17 @@ class CompetitionViewSet(viewsets.ReadOnlyModelViewSet):
        except CompetitionEnrollment.DoesNotExist:
            return Response({"detail": "未报名"}, status=status.HTTP_404_NOT_FOUND)

+    @action(detail=False, methods=['get'])
+    def my_enrollments(self, request):
+        """
+        获取我的所有报名信息
+        """
+        user = get_current_wechat_user(request)
+        if not user:
+            return Response([])
+        enrollments = CompetitionEnrollment.objects.filter(user=user)
+        return Response(CompetitionEnrollmentSerializer(enrollments, many=True).data)
+

 class ProjectViewSet(viewsets.ModelViewSet):
    """
--- a/frontend/src/components/competition/CompetitionDetail.jsx
+++ b/frontend/src/components/competition/CompetitionDetail.jsx
@@ -12,6 +12,16 @@ import dayjs from 'dayjs';
 import { getCompetitionDetail, getProjects, getMyCompetitionEnrollment, enrollCompetition } from '../../api';
 import ProjectSubmission from './ProjectSubmission';
 import { useAuth } from '../../context/AuthContext';
+import 'github-markdown-css/github-markdown-dark.css';
+
+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;

@@ -77,19 +87,19 @@ const CompetitionDetail = () => {
  // Fetch competition details
  const { data: competition, isLoading: loadingDetail } = useQuery({
    queryKey: ['competition', id],
-    queryFn: () => getCompetitionDetail(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' })
+    queryFn: () => getProjects({ competition: id, status: 'submitted' }).then(res => res.data)
  });

  // Check enrollment status
  const { data: enrollment, refetch: refetchEnrollment } = useQuery({
    queryKey: ['enrollment', id],
-    queryFn: () => getMyCompetitionEnrollment(id),
+    queryFn: () => getMyCompetitionEnrollment(id).then(res => res.data),
    enabled: !!user,
    retry: false
  });
@@ -140,7 +150,7 @@ const CompetitionDetail = () => {
              rehypePlugins={[rehypeRaw]}
              components={{ 
                code: CodeBlock,
-                img: (props) => <img {...props} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
+                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' }} />,
                h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em' }} />,
                h3: (props) => <h3 {...props} style={{ color: '#eee' }} />,
@@ -162,7 +172,7 @@ const CompetitionDetail = () => {
              rehypePlugins={[rehypeRaw]}
              components={{ 
                code: CodeBlock,
-                img: (props) => <img {...props} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
+                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' }} />,
                h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em' }} />,
                h3: (props) => <h3 {...props} style={{ color: '#eee' }} />,
@@ -184,7 +194,7 @@ const CompetitionDetail = () => {
              rehypePlugins={[rehypeRaw]}
              components={{ 
                code: CodeBlock,
-                img: (props) => <img {...props} style={{ maxWidth: '100%', borderRadius: '8px' }} />,
+                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' }} />,
                h2: (props) => <h2 {...props} style={{ color: '#fff', borderBottom: '1px solid #333', paddingBottom: '0.3em' }} />,
                h3: (props) => <h3 {...props} style={{ color: '#eee' }} />,
@@ -210,14 +220,18 @@ const CompetitionDetail = () => {
            <Col key={project.id} xs={24} sm={12} md={8}>
              <Card
                hoverable
-                cover={<img alt={project.title} src={project.display_cover_image || 'placeholder.jpg'} style={{ height: 180, objectFit: 'cover' }} />}
+                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>
                ]}
              >
                <Card.Meta
                  title={project.title}
-                  description={`得分: ${project.final_score || '待定'}`}
+                  description={
+                    enrollment && project.contestant === enrollment.id 
+                      ? `得分: ${project.final_score || '待定'}` 
+                      : null
+                  }
                  avatar={<UserOutlined />}
                />
              </Card>
@@ -245,7 +259,7 @@ const CompetitionDetail = () => {
                 <div style={{ color: '#888', fontSize: 12 }}>{project.contestant_info?.nickname}</div>
               </div>
               <div style={{ fontSize: 24, color: '#00b96b', fontWeight: 'bold' }}>
-                 {project.final_score}
+                {enrollment && project.contestant === enrollment.id ? project.final_score : '**'}
              </div>
             </div>
           ))}
@@ -258,7 +272,7 @@ const CompetitionDetail = () => {
    <div style={{ maxWidth: 1200, margin: '0 auto', padding: '24px' }}>
      <div style={{ 
        height: 300, 
-        backgroundImage: `url(${competition.display_cover_image})`, 
+        backgroundImage: `url(${getImageUrl(competition.display_cover_image)})`, 
        backgroundSize: 'cover', 
        backgroundPosition: 'center',
        borderRadius: 16,
--- a/miniprogram/src/api/index.ts
+++ b/miniprogram/src/api/index.ts
@@ -73,6 +73,7 @@ export const getCompetitions = (params?: any) => request({ url: '/competition/co
 export const getCompetitionDetail = (id: number) => request({ url: `/competition/competitions/${id}/` })
 export const enrollCompetition = (id: number, data: any) => request({ url: `/competition/competitions/${id}/enroll/`, method: 'POST', data })
 export const getMyCompetitionEnrollment = (id: number) => request({ url: `/competition/competitions/${id}/my_enrollment/` })
+export const getMyEnrollments = () => request({ url: '/competition/competitions/my_enrollments/' })
 export const getProjects = (params?: any) => request({ url: '/competition/projects/', data: params })
 export const getProjectDetail = (id: number) => request({ url: `/competition/projects/${id}/` })
 export const createProject = (data: any) => request({ url: '/competition/projects/', method: 'POST', data })
--- a/miniprogram/src/pages/competition/detail.scss
+++ b/miniprogram/src/pages/competition/detail.scss
@@ -46,6 +46,178 @@
      }
    }

+    .tabs {
+      display: flex;
+      margin-bottom: 24px;
+      border-bottom: 1px solid #333;
+      
+      .tab-item {
+        flex: 1;
+        text-align: center;
+        padding: 12px 0;
+        color: #999;
+        font-size: 16px;
+        position: relative;
+        
+        &.active {
+          color: #fff;
+          font-weight: bold;
+          
+          &:after {
+            content: '';
+            position: absolute;
+            bottom: -1px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 24px;
+            height: 3px;
+            background: #00b96b;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+
+    .project-list {
+      .project-card {
+        background: #1f1f1f;
+        border-radius: 12px;
+        overflow: hidden;
+        margin-bottom: 16px;
+        display: flex;
+        
+        .cover {
+          width: 120px;
+          height: 90px;
+          background: #333;
+          flex-shrink: 0;
+        }
+        
+        .info {
+          flex: 1;
+          padding: 12px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          overflow: hidden;
+          
+          .title {
+            font-size: 16px;
+            color: #fff;
+            font-weight: 500;
+            display: -webkit-box;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+            overflow: hidden;
+          }
+          
+          .author {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            
+            .user {
+              display: flex;
+              align-items: center;
+              font-size: 12px;
+              color: #999;
+              
+              .avatar {
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                margin-right: 6px;
+                background: #333;
+              }
+            }
+            
+            .score {
+              color: #faad14;
+              font-weight: bold;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+      .empty {
+          text-align: center;
+          color: #666;
+          padding: 40px 0;
+      }
+    }
+    
+    .ranking-list {
+       .rank-item {
+         display: flex;
+         align-items: center;
+         padding: 16px 0;
+         border-bottom: 1px solid #222;
+         
+         .rank-num {
+           width: 40px;
+           text-align: center;
+           font-size: 18px;
+           font-weight: bold;
+           color: #666;
+           
+           &.top1 { color: #ffd700; }
+           &.top2 { color: #c0c0c0; }
+           &.top3 { color: #cd7f32; }
+         }
+         
+         .info {
+           flex: 1;
+           display: flex;
+           align-items: center;
+           overflow: hidden;
+           
+           .avatar {
+             width: 40px;
+             height: 40px;
+             border-radius: 50%;
+             margin-right: 12px;
+             background: #333;
+             flex-shrink: 0;
+           }
+           
+           .detail {
+             flex: 1;
+             overflow: hidden;
+             
+             .nickname {
+               color: #fff;
+               font-size: 16px;
+               margin-bottom: 4px;
+               display: block;
+               white-space: nowrap;
+               overflow: hidden;
+               text-overflow: ellipsis;
+             }
+             
+             .project-title {
+               color: #666;
+               font-size: 12px;
+               white-space: nowrap;
+               overflow: hidden;
+               text-overflow: ellipsis;
+             }
+           }
+         }
+         
+         .score {
+           font-size: 18px;
+           font-weight: bold;
+           color: #00b96b;
+           margin-left: 12px;
+         }
+       }
+       .empty {
+          text-align: center;
+          color: #666;
+          padding: 40px 0;
+      }
+    }
+
    .section {
      margin-bottom: 32px;

@@ -59,11 +231,113 @@
        padding-left: 12px;
      }

-      rich-text {
+      /* Markdown styling borrowed from Forum */
      font-size: 16px;
-        color: #ccc;
-        line-height: 1.6;
-        white-space: pre-wrap;
+      line-height: 1.8;
+      color: #e0e0e0;
+      letter-spacing: 0.3px;
+      
+      image {
+        max-width: 100%;
+        border-radius: 12px;
+        margin: 16px 0;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+      }
+      
+      h1, h2, h3, h4, h5, h6 { margin-top: 24px; margin-bottom: 16px; color: #fff; font-weight: 700; line-height: 1.4; }
+      h1 { font-size: 24px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 12px; }
+      h2 { font-size: 20px; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
+      h3 { font-size: 18px; }
+      h4 { font-size: 17px; }
+      h5 { font-size: 16px; color: #ddd; }
+      
+      p { margin-bottom: 16px; }
+      
+      strong { font-weight: 800; color: #fff; }
+      em { font-style: italic; color: #aaa; }
+      del { text-decoration: line-through; color: #666; }
+      
+      ul, ol { margin-bottom: 16px; padding-left: 20px; }
+      li { margin-bottom: 6px; list-style-position: outside; }
+      ul li { list-style-type: disc; }
+      ol li { list-style-type: decimal; }
+      
+      li input[type="checkbox"] { margin-right: 8px; }
+
+      blockquote {
+          border-left: 4px solid #00b96b;
+          background: rgba(255, 255, 255, 0.05);
+          padding: 12px 16px;
+          margin: 16px 0;
+          border-radius: 4px;
+          color: #bbb;
+          font-size: 15px;
+          font-style: italic;
+          
+          p { margin-bottom: 0; }
+      }
+      
+      a { color: #00b96b; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.2s; }
+      
+      hr {
+          height: 1px;
+          background: rgba(255,255,255,0.1);
+          border: none;
+          margin: 24px 0;
+      }
+      
+      table {
+          width: 100%;
+          border-collapse: collapse;
+          margin: 16px 0;
+          font-size: 14px;
+          overflow-x: auto;
+          display: block;
+          
+          th, td {
+              border: 1px solid rgba(255,255,255,0.1);
+              padding: 10px;
+              text-align: left;
+          }
+          
+          th {
+              background: rgba(255,255,255,0.05);
+              font-weight: 700;
+              color: #fff;
+          }
+          
+          tr:nth-child(even) {
+              background: rgba(255,255,255,0.02);
+          }
+      }
+
+      code {
+          background: rgba(255,255,255,0.1);
+          padding: 2px 6px;
+          border-radius: 4px;
+          font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+          color: #ff7875;
+          font-size: 14px;
+          margin: 0 4px;
+      }
+      
+      pre {
+          background: #161616;
+          padding: 16px;
+          border-radius: 12px;
+          overflow-x: auto;
+          margin: 16px 0;
+          border: 1px solid #333;
+          box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
+          
+          code { 
+              background: transparent; 
+              color: #a6e22e; 
+              padding: 0; 
+              font-size: 13px; 
+              margin: 0;
+              white-space: pre;
+          }
      }
    }
  }
--- a/miniprogram/src/pages/competition/detail.tsx
+++ b/miniprogram/src/pages/competition/detail.tsx
@@ -1,12 +1,15 @@
-import { View, Text, Button, Image, ScrollView, RichText } from '@tarojs/components'
+import { View, Text, Button, Image, ScrollView } from '@tarojs/components'
 import Taro, { useLoad } from '@tarojs/taro'
 import { useState } from 'react'
-import { getCompetitionDetail, enrollCompetition, getMyCompetitionEnrollment } from '../../api'
+import { getCompetitionDetail, enrollCompetition, getMyCompetitionEnrollment, getProjects } from '../../api'
+import MarkdownReader from '../../components/MarkdownReader'
 import './detail.scss'

 export default function CompetitionDetail() {
  const [detail, setDetail] = useState<any>(null)
  const [enrollment, setEnrollment] = useState<any>(null)
+  const [projects, setProjects] = useState<any[]>([])
+  const [activeTab, setActiveTab] = useState(0)
  const [loading, setLoading] = useState(false)

  useLoad((options) => {
@@ -14,6 +17,7 @@ export default function CompetitionDetail() {
    if (id) {
      fetchDetail(id)
      fetchEnrollment(id)
+      fetchProjects(id)
    }
  })

@@ -38,6 +42,17 @@ export default function CompetitionDetail() {
    }
  }

+  const fetchProjects = async (id) => {
+    try {
+      const res = await getProjects({ competition: id, status: 'submitted' })
+      // 如果后端返回了分页结果 { results: [], ... }，则取 results，否则直接取 res
+      const list = res.results || res
+      setProjects(Array.isArray(list) ? list : [])
+    } catch (e) {
+      console.error('Fetch projects failed', e)
+    }
+  }
+
  const handleEnroll = async () => {
    if (!detail) return
    try {
@@ -75,20 +90,83 @@ export default function CompetitionDetail() {
          <Text className={`status ${detail.status}`}>{getStatusText(detail.status)}</Text>
        </View>
        
+        <View className='tabs'>
+          {['详情', '参赛项目', '排行榜'].map((tab, index) => (
+            <View 
+              key={index} 
+              className={`tab-item ${activeTab === index ? 'active' : ''}`}
+              onClick={() => setActiveTab(index)}
+            >
+              {tab}
+            </View>
+          ))}
+        </View>
+
+        {activeTab === 0 && (
+          <>
            <View className='section'>
              <Text className='section-title'>简介</Text>
-          <RichText nodes={detail.description} />
+              <MarkdownReader content={detail.description} />
            </View>

            <View className='section'>
              <Text className='section-title'>规则</Text>
-          <RichText nodes={detail.rule_description} />
+              <MarkdownReader content={detail.rule_description} />
            </View>

            <View className='section'>
              <Text className='section-title'>参赛条件</Text>
-          <RichText nodes={detail.condition_description} />
+              <MarkdownReader content={detail.condition_description} />
            </View>
+          </>
+        )}
+
+        {activeTab === 1 && (
+          <View className='project-list'>
+            {projects.map(project => (
+              <View className='project-card' key={project.id}>
+                <Image 
+                  className='cover' 
+                  mode='aspectFill' 
+                  src={project.display_cover_image || 'https://via.placeholder.com/120x90'} 
+                />
+                <View className='info'>
+                  <Text className='title'>{project.title}</Text>
+                  <View className='author'>
+                    <View className='user'>
+                      <Image className='avatar' src={project.contestant_info?.avatar_url || ''} />
+                      <Text>{project.contestant_info?.nickname || '参赛者'}</Text>
+                    </View>
+                    {project.final_score > 0 && <Text className='score'>{project.final_score}分</Text>}
+                  </View>
+                </View>
+              </View>
+            ))}
+            {projects.length === 0 && <View className='empty'>暂无参赛项目</View>}
+          </View>
+        )}
+
+        {activeTab === 2 && (
+          <View className='ranking-list'>
+            {projects
+              .filter(p => p.final_score > 0)
+              .sort((a, b) => b.final_score - a.final_score)
+              .map((project, index) => (
+              <View className='rank-item' key={project.id}>
+                <Text className={`rank-num top${index + 1}`}>{index + 1}</Text>
+                <View className='info'>
+                  <Image className='avatar' src={project.contestant_info?.avatar_url || ''} />
+                  <View className='detail'>
+                     <Text className='nickname'>{project.contestant_info?.nickname || '参赛者'}</Text>
+                     <Text className='project-title'>{project.title}</Text>
+                  </View>
+                </View>
+                <Text className='score'>{project.final_score}</Text>
+              </View>
+            ))}
+            {projects.filter(p => p.final_score > 0).length === 0 && <View className='empty'>暂无排名数据</View>}
+          </View>
+        )}
      </View>

      <View className='footer-action'>
--- a/miniprogram/src/pages/user/index.tsx
+++ b/miniprogram/src/pages/user/index.tsx
@@ -2,6 +2,7 @@ import { View, Text, Image, Button, Checkbox, CheckboxGroup, RichText } from '@t
 import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
 import { useState } from 'react'
 import { login as silentLogin } from '../../utils/request'
+import { getMyEnrollments } from '../../api'
 import './index.scss'

 export default function UserIndex() {
@@ -9,10 +10,14 @@ export default function UserIndex() {
  const [showLoginModal, setShowLoginModal] = useState(false)
  const [isAgreed, setIsAgreed] = useState(false)
  const [showAgreement, setShowAgreement] = useState(false) // For showing agreement content
+  const [myEnrollments, setMyEnrollments] = useState<any[]>([])

  useDidShow(() => {
    const info = Taro.getStorageSync('userInfo')
-    if (info) setUserInfo(info)
+    if (info) {
+        setUserInfo(info)
+        fetchEnrollments()
+    }
  })

  usePullDownRefresh(async () => {
@@ -20,6 +25,7 @@ export default function UserIndex() {
        const res = await silentLogin()
        if (res) {
            setUserInfo(res)
+            fetchEnrollments()
        }
        Taro.stopPullDownRefresh()
    } catch (e) {
@@ -28,6 +34,17 @@ export default function UserIndex() {
    }
  })

+  const fetchEnrollments = async () => {
+      try {
+          const res = await getMyEnrollments()
+          if (Array.isArray(res)) {
+              setMyEnrollments(res)
+          }
+      } catch (e) {
+          console.error('Fetch enrollments failed', e)
+      }
+  }
+
  const goOrders = () => Taro.navigateTo({ url: '/pages/order/list' })
  const goDistributor = () => Taro.navigateTo({ url: '/subpackages/distributor/index' })
  const goInvite = () => Taro.navigateTo({ url: '/subpackages/distributor/invite' })
@@ -36,6 +53,18 @@ export default function UserIndex() {
  const goActivityList = (tab = 'all') => Taro.navigateTo({ url: `/subpackages/forum/activity/index?tab=${tab}` })
  const goCompetitionList = () => Taro.navigateTo({ url: '/pages/competition/index' })
  
+  const goUploadProject = () => {
+    // 找到所有有效的选手报名
+    const contestantEnrollments = myEnrollments.filter(e => e.role === 'contestant')
+    if (contestantEnrollments.length === 1) {
+        // 如果只有一个，直接去详情页
+        Taro.navigateTo({ url: `/pages/competition/detail?id=${contestantEnrollments[0].competition}` })
+    } else {
+        // 否则去列表页
+        Taro.navigateTo({ url: '/pages/competition/index' })
+    }
+  }
+
  const handleAddress = async () => {
    try { 
        const res = await Taro.chooseAddress() 
@@ -254,6 +283,8 @@ export default function UserIndex() {
    }
  }

+  const isContestant = myEnrollments.some(e => e.role === 'contestant')
+
  const serviceGroups = [
    {
      title: '基础服务',
@@ -261,7 +292,13 @@ export default function UserIndex() {
        { title: '我的订单', icon: '📦', action: goOrders },
        { title: '地址管理', icon: '📝', action: handleAddress },
        { title: '活动管理', icon: '⌚️', action: () => goActivityList('mine') },
+      ]
+    },
+    {
+      title: '比赛服务',
+      items: [
        { title: '赛事中心', icon: '🏆', action: goCompetitionList },
+        ...(isContestant ? [{ title: '上传比赛资料', icon: '📤', action: goUploadProject }] : [])
      ]
    },
    {