比赛

frontend/src/components/competition/CompetitionCard.jsx

@@ -4,7 +4,6 @@ import { CalendarOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
 import dayjs from 'dayjs';
 import ReactMarkdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 
 const { Title } = Typography;
 
@@ -65,9 +64,16 @@ const CompetitionCard = ({ competition }) => {
         display: '-webkit-box',
         WebkitLineClamp: 3,
         WebkitBoxOrient: 'vertical',
-        marginBottom: 0
+        marginBottom: 0,
+        fontSize: '14px'
       }}>
-        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+        <ReactMarkdown 
+          allowedElements={['p', 'text', 'strong', 'em', 'del']}
+          unwrapDisallowed={true}
+          components={{
+            p: (props) => <span {...props} />,
+          }}
+        >
           {competition.description}
         </ReactMarkdown>
       </div>

frontend/src/components/competition/CompetitionDetail.jsx

@@ -134,33 +134,66 @@ const CompetitionDetail = () => {
           </Descriptions>
           
           <Title level={4} style={{ marginTop: 32, color: '#fff' }}>比赛简介</Title>
-          <div style={{ color: '#ccc', lineHeight: '1.8' }}>
+          <div style={{ color: '#ccc', lineHeight: '1.8', fontSize: '16px' }} className="markdown-body">
             <ReactMarkdown 
               remarkPlugins={[remarkGfm]} 
               rehypePlugins={[rehypeRaw]}
-              components={{ code: CodeBlock }}
+              components={{ 
+                code: CodeBlock,
+                img: (props) => <img {...props} 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' }} />,
+                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' }} />,
+                th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333' }} />,
+                td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
+              }}
             >
               {competition.description}
             </ReactMarkdown>
           </div>
 
           <Title level={4} style={{ marginTop: 32, color: '#fff' }}>规则说明</Title>
-          <div style={{ color: '#ccc', lineHeight: '1.8' }}>
+          <div style={{ color: '#ccc', lineHeight: '1.8', fontSize: '16px' }} className="markdown-body">
             <ReactMarkdown 
               remarkPlugins={[remarkGfm]} 
               rehypePlugins={[rehypeRaw]}
-              components={{ code: CodeBlock }}
+              components={{ 
+                code: CodeBlock,
+                img: (props) => <img {...props} 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' }} />,
+                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' }} />,
+                th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333' }} />,
+                td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
+              }}
             >
               {competition.rule_description}
             </ReactMarkdown>
           </div>
 
           <Title level={4} style={{ marginTop: 32, color: '#fff' }}>参赛条件</Title>
-          <div style={{ color: '#ccc', lineHeight: '1.8' }}>
+          <div style={{ color: '#ccc', lineHeight: '1.8', fontSize: '16px' }} className="markdown-body">
             <ReactMarkdown 
               remarkPlugins={[remarkGfm]} 
               rehypePlugins={[rehypeRaw]}
-              components={{ code: CodeBlock }}
+              components={{ 
+                code: CodeBlock,
+                img: (props) => <img {...props} 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' }} />,
+                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' }} />,
+                th: (props) => <th {...props} style={{ border: '1px solid #444', padding: '8px', background: '#333' }} />,
+                td: (props) => <td {...props} style={{ border: '1px solid #444', padding: '8px' }} />,
+              }}
             >
               {competition.condition_description}
             </ReactMarkdown>

frontend/src/components/competition/CompetitionList.jsx

@@ -56,6 +56,7 @@ const CompetitionList = () => {
             onChange={handleStatusChange}
           >
             <Option value="all">全部状态</Option>
+            <Option value="published">即将开始</Option>
             <Option value="registration">报名中</Option>
             <Option value="submission">提交中</Option>
             <Option value="judging">评审中</Option>
@@ -73,7 +74,7 @@ const CompetitionList = () => {
           {data?.data?.results?.length > 0 ? (
             <Row gutter={[24, 24]}>
               {data.data.results.map((comp) => (
-                <Col key={comp.id} xs={24} sm={12} md={8} lg={6}>
+                <Col key={comp.id} xs={24} sm={12} md={8} lg={6} xl={6} xxl={4}>
                   <CompetitionCard competition={comp} />
                 </Col>
               ))}