ai-showcase-platform/SCORING-FORM-DEBUG.md

評分表單調試修復報告

問題分析

用戶反映手動評審評分表單無法選擇評審和團隊，經過分析發現以下問題：

1. 數據載入問題

• 前端組件嘗試從API載入數據，但API回應格式可能不正確
• 缺少適當的錯誤處理和加載狀態指示

2. 數據格式不匹配

• API回應的數據結構與前端期望的格式不一致
• 缺少對空數據的處理

修復內容

1. 增強錯誤處理 (components/admin/scoring-management.tsx)

添加調試日誌

console.log('🔍 開始載入競賽數據，競賽ID:', selectedCompetition.id)
console.log('評審API回應:', judgesData)
console.log('應用API回應:', appsData)
console.log('團隊API回應:', teamsData)

改善數據驗證

if (judgesData.success && judgesData.data && judgesData.data.judges) {
  setCompetitionJudges(judgesData.data.judges)
} else {
  console.error('❌ 評審數據載入失敗:', judgesData.message || 'API回應格式錯誤')
  setCompetitionJudges([])
}

2. 添加加載狀態指示

新增狀態管理

const [isLoadingData, setIsLoadingData] = useState(false)

加載狀態UI

{isLoadingData ? (
  <SelectItem value="" disabled>
    <div className="flex items-center space-x-2">
      <Loader2 className="w-4 h-4 animate-spin" />
      <span>載入評審中...</span>
    </div>
  </SelectItem>
) : competitionJudges.length > 0 ? (
  // 顯示評審選項
) : (
  <SelectItem value="" disabled>
    <span className="text-gray-500">暫無評審數據</span>
  </SelectItem>
)}

3. 改善數據映射

修正API數據結構

// 評審數據
if (judgesData.success && judgesData.data && judgesData.data.judges) {
  setCompetitionJudges(judgesData.data.judges)
}

// 應用數據
if (appsData.success && appsData.data && appsData.data.apps) {
  participants.push(...appsData.data.apps.map((app: any) => ({
    id: app.id,
    name: app.name,
    type: 'individual',
    creator: app.creator
  })))
}

// 團隊數據
if (teamsData.success && teamsData.data && teamsData.data.teams) {
  participants.push(...teamsData.data.teams.map((team: any) => ({
    id: team.id,
    name: team.name,
    type: 'team',
    creator: team.members && team.members.find((m: any) => m.role === '隊長')?.name || '未知隊長'
  })))
}

4. 創建測試工具

資料庫測試腳本 (scripts/test-data-loading.js)

• 直接測試資料庫連接
• 驗證競賽、評審、應用、團隊數據
• 檢查數據關聯性

API測試頁面 (app/test-api/page.tsx)

• 提供Web界面測試API端點
• 實時查看API回應
• 方便調試數據格式問題

測試結果

資料庫測試結果

🏆 競賽: AA (ID: be47d842-91f1-11f0-8595-bd825523ae01)
👨‍⚖️ 評審: 1 個 (aa - ITBU)
📱 應用: 0 個
👥 團隊: 1 個 (aaa - 隊長: Wu Petty)
📊 評分記錄: 0 個

發現的問題

1. 競賽有評審和團隊數據 ✅
2. 沒有應用數據 ⚠️ (這可能是正常的，如果競賽只允許團隊參賽)
3. API端點存在且正常 ✅

使用方式

1. 測試API端點

訪問 http://localhost:3000/test-api 來測試API回應

2. 查看調試日誌

打開瀏覽器開發者工具的Console，查看詳細的載入日誌

3. 檢查數據載入

• 選擇競賽後，查看Console中的載入日誌
• 確認API回應格式正確
• 檢查是否有錯誤訊息

下一步建議

1. 檢查競賽設置：確認競賽是否正確配置了評審和參賽者
2. 驗證API回應：使用測試頁面檢查API是否返回正確數據
3. 檢查網路請求：在瀏覽器Network標籤中查看API請求狀態
4. 添加更多調試信息：如果問題持續，可以添加更詳細的日誌

技術特點

• 完整的錯誤處理：防止因API失敗導致的界面崩潰
• 用戶友好的加載狀態：清楚顯示數據載入進度
• 詳細的調試信息：便於問題排查和修復
• 測試工具：提供多種方式驗證系統狀態

修復完成後，評分表單應該能夠正確載入和顯示評審及參賽者選項。