🏆 Enhanced Open Collaborator Award - Complete TypeScript Integration (90 TQT$ Bounty)

pages/article/open-collaborator-award.mdx

@@ -1,6 +1,40 @@
 # 开放协作人奖
 
-<div className="ratio ratio-16x9 border border-secondary">
+## 专用页面已上线
+
+我们为开放协作人奖创建了全新的专用页面，提供更丰富的功能和更好的用户体验。
+
+### 新功能特色
+
+- 📝 **在线推荐功能** - 直接在页面提交候选人推荐
+- 💾 **实时数据同步** - 与飞书多维表格无缝集成
+- 🎨 **现代化界面** - 响应式设计，支持各种设备
+- 📊 **统计信息** - 实时显示推荐数量和投票统计
+- 🔍 **候选人展示** - 完整的候选人信息和推荐理由
+
+### 立即访问
+
+<div style={{ textAlign: 'center', margin: '2rem 0' }}>
+  <a 
+    href="/award/open-collaborator-award" 
+    style={{ 
+      display: 'inline-block',
+      backgroundColor: '#667eea',
+      color: 'white',
+      padding: '12px 24px',
+      textDecoration: 'none',
+      borderRadius: '8px',
+      fontWeight: 'bold',
+      fontSize: '1.1rem'
+    }}
+  >
+    🏆 前往开放协作人奖专页
+  </a>
+</div>
+
+### 奖项介绍影片
+
+<div className="ratio ratio-16x9 border border-secondary" style={{ marginBottom: '2rem' }}>
   <iframe
     src="//player.bilibili.com/player.html?aid=978564817&bvid=BV1c44y1x7ij&cid=494424932&page=1&high_quality=1&danmaku=0"
     title="开放协作人奖提名倡议"
@@ -9,3 +43,13 @@
     framespacing="0"
   />
 </div>
+
+### 快速导航
+
+- [🏆 开放协作人奖专页](/award/open-collaborator-award) - 查看所有候选人和在线推荐
+- [🎖️ 所有奖项](/award) - 浏览开源市集所有奖项类别
+- [👥 推荐候选人](/award/open-collaborator-award#nominate) - 直接跳转到推荐表单
+
+---
+
+*如果您在使用过程中遇到任何问题，请通过官方渠道联系我们。*

pages/award/index.tsx

@@ -1,16 +1,309 @@
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Card, Col, Row, Badge, Button } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrophy, faUsers, faHeart, faEye, faArrowRight } from '@fortawesome/free-solid-svg-icons';
+import Link from 'next/link';
 
 import { Award, AwardModel } from '../../models/Award';
+import { MainLayout } from '../../components/Layout';
 
 export const getServerSideProps = compose(cache(), errorLogger, async () => {
-  const awards = await new AwardModel().getAll();
+  const awardModel = new AwardModel();
+  const awards = await awardModel.getAll();
 
-  return { props: { awards } };
+  // Group awards by type
+  const awardStats = awards.reduce((acc, award) => {
+    const awardName = award.awardName?.toString() || 'Unknown';
+    if (!acc[awardName]) {
+      acc[awardName] = {
+        name: awardName,
+        nominations: [],
+        totalVotes: 0
+      };
+    }
+    acc[awardName].nominations.push(award);
+    acc[awardName].totalVotes += Number(award.votes || 0);
+    return acc;
+  }, {} as Record<string, { name: string; nominations: Award[]; totalVotes: number }>);
+
+  const awardTypes = Object.values(awardStats);
+
+  return { 
+    props: { 
+      awards,
+      awardTypes,
+      totalNominations: awards.length
+    } 
+  };
 });
 
-const AwardPage: FC<{ awards: Award[] }> = ({ awards }) => {
-  return <></>;
+interface Props {
+  awards: Award[];
+  awardTypes: { name: string; nominations: Award[]; totalVotes: number }[];
+  totalNominations: number;
+}
+
+const AwardTypeCard: FC<{ 
+  awardType: { name: string; nominations: Award[]; totalVotes: number };
+  isOpenCollaborator?: boolean;
+}> = ({ awardType, isOpenCollaborator = false }) => {
+  const getAwardIcon = (name: string) => {
+    if (name.includes('协作') || name.includes('Collaborator')) return faUsers;
+    return faTrophy;
+  };
+
+  const getAwardColor = (name: string) => {
+    if (name.includes('协作') || name.includes('Collaborator')) return 'primary';
+    return 'warning';
+  };
+
+  const getAwardDescription = (name: string) => {
+    if (name.includes('协作') || name.includes('Collaborator')) {
+      return '表彰在開源領域展現卓越協作精神與傑出貢獻的個人與團隊';
+    }
+    return '表彰在各領域展現傑出成就的個人與項目';
+  };
+
+  return (
+    <Card className={`h-100 shadow-sm hover-shadow-lg transition-shadow ${isOpenCollaborator ? 'border-primary' : ''}`}>
+      <Card.Body>
+        <div className="d-flex align-items-center mb-3">
+          <div className={`bg-${getAwardColor(awardType.name)} bg-gradient text-white rounded-circle p-3 me-3`}>
+            <FontAwesomeIcon icon={getAwardIcon(awardType.name)} size="lg" />
+          </div>
+          <div className="flex-grow-1">
+            <h4 className="card-title mb-1">{awardType.name}</h4>
+            {isOpenCollaborator && (
+              <Badge bg="primary" className="mb-2">Featured Award</Badge>
+            )}
+          </div>
+        </div>
+
+        <p className="card-text text-muted mb-4">
+          {getAwardDescription(awardType.name)}
+        </p>
+
+        <div className="d-flex justify-content-between align-items-center mb-3">
+          <div className="d-flex gap-3">
+            <div className="text-center">
+              <div className="fw-bold text-primary fs-5">{awardType.nominations.length}</div>
+              <small className="text-muted">推薦數</small>
+            </div>
+            <div className="text-center">
+              <div className="fw-bold text-success fs-5">{awardType.totalVotes}</div>
+              <small className="text-muted">總票數</small>
+            </div>
+          </div>
+          <div className="text-end">
+            <small className="text-muted">
+              最新推薦: {awardType.nominations.length > 0 
+                ? new Date(Math.max(...awardType.nominations.map(n => 
+                    new Date(n.createdAt?.toString() || 0).getTime()
+                  ))).toLocaleDateString()
+                : '無'
+              }
+            </small>
+          </div>
+        </div>
+
+        {/* Recent nominations preview */}
+        {awardType.nominations.length > 0 && (
+          <div className="border-top pt-3 mb-3">
+            <small className="text-muted fw-bold">最新推薦:</small>
+            <div className="mt-2">
+              {awardType.nominations.slice(0, 2).map((nomination, index) => (
+                <div key={index} className="d-flex align-items-center mb-1">
+                  <FontAwesomeIcon icon={faUsers} className="text-muted me-2" size="sm" />
+                  <span className="small text-truncate">
+                    {nomination.nomineeName || '未具名候選人'}
+                  </span>
+                  {nomination.votes && Number(nomination.votes) > 0 && (
+                    <Badge bg="outline-success" className="ms-auto">
+                      <FontAwesomeIcon icon={faHeart} className="me-1" size="sm" />
+                      {nomination.votes}
+                    </Badge>
+                  )}
+                </div>
+              ))}
+              {awardType.nominations.length > 2 && (
+                <small className="text-muted">
+                  還有 {awardType.nominations.length - 2} 位候選人...
+                </small>
+              )}
+            </div>
+          </div>
+        )}
+
+        <div className="d-flex gap-2">
+          {isOpenCollaborator ? (
+            <Link href="/award/open-collaborator-award" passHref>
+              <Button variant="primary" size="sm" className="flex-grow-1">
+                <FontAwesomeIcon icon={faEye} className="me-2" />
+                查看詳情
+              </Button>
+            </Link>
+          ) : (
+            <Button variant="outline-primary" size="sm" className="flex-grow-1">
+              <FontAwesomeIcon icon={faEye} className="me-2" />
+              查看詳情
+            </Button>
+          )}
+        </div>
+      </Card.Body>
+    </Card>
+  );
 };
 
-export default AwardPage;
+const AwardPage: FC<Props> = observer(({ awards, awardTypes, totalNominations }) => {
+  const openCollaboratorAward = awardTypes.find(
+    type => type.name.includes('协作') || type.name.includes('Collaborator')
+  );
+
+  const otherAwards = awardTypes.filter(
+    type => !type.name.includes('协作') && !type.name.includes('Collaborator')
+  );
+
+  return (
+    <MainLayout>
+      <div className="container py-5">
+        {/* Hero Section */}
+        <div className="text-center mb-5">
+          <div className="bg-gradient-primary text-white py-5 px-4 rounded-3 mb-4" 
+               style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
+            <FontAwesomeIcon icon={faTrophy} size="4x" className="mb-4 text-warning" />
+            <h1 className="display-4 fw-bold mb-3">開源市集獎項</h1>
+            <p className="lead mb-4">
+              表彰開源社群中的傑出貢獻者與創新項目
+            </p>
+            <div className="d-flex justify-content-center gap-4 text-white-50">
+              <div>
+                <strong>{awardTypes.length}</strong>
+                <br />
+                <small>獎項類別</small>
+              </div>
+              <div className="vr"></div>
+              <div>
+                <strong>{totalNominations}</strong>
+                <br />
+                <small>總推薦數</small>
+              </div>
+              <div className="vr"></div>
+              <div>
+                <strong>{awardTypes.reduce((sum, type) => sum + type.totalVotes, 0)}</strong>
+                <br />
+                <small>總票數</small>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Featured Award - Open Collaborator Award */}
+        {openCollaboratorAward && (
+          <div className="mb-5">
+            <div className="d-flex align-items-center mb-3">
+              <h2 className="mb-0">
+                <FontAwesomeIcon icon={faUsers} className="me-2 text-primary" />
+                精選獎項
+              </h2>
+              <Badge bg="primary" className="ms-3">Featured</Badge>
+            </div>
+            <Row>
+              <Col lg={8} xl={6}>
+                <AwardTypeCard 
+                  awardType={openCollaboratorAward} 
+                  isOpenCollaborator={true}
+                />
+              </Col>
+              <Col lg={4} xl={6} className="d-flex align-items-center">
+                <div className="text-center w-100">
+                  <div className="mb-3">
+                    <FontAwesomeIcon icon={faHeart} size="2x" className="text-danger mb-2" />
+                    <h4>立即參與</h4>
+                    <p className="text-muted">
+                      推薦您認為值得表彰的開源協作者，讓更多人看見他們的貢獻！
+                    </p>
+                  </div>
+                  <Link href="/award/open-collaborator-award" passHref>
+                    <Button variant="primary" size="lg">
+                      前往推薦
+                      <FontAwesomeIcon icon={faArrowRight} className="ms-2" />
+                    </Button>
+                  </Link>
+                </div>
+              </Col>
+            </Row>
+          </div>
+        )}
+
+        {/* All Award Types */}
+        <div className="mb-5">
+          <h3 className="mb-4">
+            <FontAwesomeIcon icon={faTrophy} className="me-2 text-warning" />
+            所有獎項類別
+          </h3>
+
+          {awardTypes.length > 0 ? (
+            <Row xs={1} md={2} lg={3} xl={4} className="g-4">
+              {awardTypes.map((awardType, index) => (
+                <Col key={index}>
+                  <AwardTypeCard 
+                    awardType={awardType}
+                    isOpenCollaborator={
+                      awardType.name.includes('协作') || awardType.name.includes('Collaborator')
+                    }
+                  />
+                </Col>
+              ))}
+            </Row>
+          ) : (
+            <Card className="text-center py-5">
+              <Card.Body>
+                <FontAwesomeIcon icon={faTrophy} size="3x" className="text-muted mb-3" />
+                <h4 className="text-muted">尚無獎項</h4>
+                <p className="text-muted mb-4">
+                  目前還沒有任何獎項推薦，成為第一個推薦者吧！
+                </p>
+                <Link href="/award/open-collaborator-award" passHref>
+                  <Button variant="primary">
+                    <FontAwesomeIcon icon={faUsers} className="me-2" />
+                    推薦開放協作人獎
+                  </Button>
+                </Link>
+              </Card.Body>
+            </Card>
+          )}
+        </div>
+
+        {/* Statistics Section */}
+        <div className="bg-light rounded-3 p-4 mt-5">
+          <Row className="text-center">
+            <Col md={3} className="mb-3 mb-md-0">
+              <div className="h3 text-primary mb-1">{awardTypes.length}</div>
+              <div className="text-muted">獎項類別</div>
+            </Col>
+            <Col md={3} className="mb-3 mb-md-0">
+              <div className="h3 text-success mb-1">{totalNominations}</div>
+              <div className="text-muted">總推薦數</div>
+            </Col>
+            <Col md={3} className="mb-3 mb-md-0">
+              <div className="h3 text-warning mb-1">
+                {awardTypes.reduce((sum, type) => sum + type.totalVotes, 0)}
+              </div>
+              <div className="text-muted">總票數</div>
+            </Col>
+            <Col md={3}>
+              <div className="h3 text-info mb-1">
+                {new Date().getFullYear()}
+              </div>
+              <div className="text-muted">年度獎項</div>
+            </Col>
+          </Row>
+        </div>
+      </div>
+    </MainLayout>
+  );
+});
+
+export default AwardPage;