148 lines
4.1 KiB
Markdown
148 lines
4.1 KiB
Markdown
# 評分表單調試修復報告
|
||
|
||
## 問題分析
|
||
|
||
用戶反映手動評審評分表單無法選擇評審和團隊，經過分析發現以下問題：
|
||
|
||
### 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失敗導致的界面崩潰
|
||
- **用戶友好的加載狀態**：清楚顯示數據載入進度
|
||
- **詳細的調試信息**：便於問題排查和修復
|
||
- **測試工具**：提供多種方式驗證系統狀態
|
||
|
||
修復完成後，評分表單應該能夠正確載入和顯示評審及參賽者選項。
|