# 評分表單調試修復報告

## 問題分析

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

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

### 2. 數據格式不匹配
- API回應的數據結構與前端期望的格式不一致
- 缺少對空數據的處理

## 修復內容

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

#### 添加調試日誌
```typescript
console.log('🔍 開始載入競賽數據，競賽ID:', selectedCompetition.id)
console.log('評審API回應:', judgesData)
console.log('應用API回應:', appsData)
console.log('團隊API回應:', teamsData)
```

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

### 2. 添加加載狀態指示

#### 新增狀態管理
```typescript
const [isLoadingData, setIsLoadingData] = useState(false)
```

#### 加載狀態UI
```typescript
{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數據結構
```typescript
// 評審數據
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失敗導致的界面崩潰
- **用戶友好的加載狀態**：清楚顯示數據載入進度
- **詳細的調試信息**：便於問題排查和修復
- **測試工具**：提供多種方式驗證系統狀態

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