shangfangjian/Profeto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

预测历史:实际比分自动填充 + 显示比赛日/队伍/主客徽标

Browse Source 
- 实际比分自动从比赛赛果填充,无需手动输入
- 比赛列显示:比赛日(M/D) + 主客队徽标 + 队伍中文名
- 状态分三类:待赛果(灰)/可结算(蓝)/已结算(绿)
- 一键结算按钮:仅当比赛有赛果且未结算时显示
- 结算后1X2自动判断命中(绿✓/红✗)
- 顶部新增统计概览:已结算数/命中数/1X2准确率

Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
)
This commit is contained in:
shangfangjian
2026-09-21 01:21:05 +08:00
parent f08fef8a22
commit 1fc799a5b0
1 changed files with 120 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/admin/pages/PredictionHistory.tsx
+113 -119
View File
@@ -2,23 +2,23 @@
* Admin 后台 - 预测历史页面(报刊风)
*
* 功能:
* - 查看预测记录列表(支持联赛/状态筛选)
* - 赛后标注实际比分,供准确率评估
* - 展开查看终裁理由与专家摘要
* - 查看预测记录列表(支持状态筛选)
* - 实际比分自动从比赛赛果填充
* - 赛后一键结算,供准确率评估
*/
import { useCallback, useEffect, useState } from 'react'
import { fetchPredictions, settlePrediction, fetchMatches } from '../dal'
import type { Prediction, Match } from '../types'
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner } from '../components'
import { useState as useStateRef } from 'react'
import TeamSideTag from '../../components/TeamSideTag'
const OUTCOME_LABEL: Record<string, string> = { '1': '主胜', X: '平局', '2': '客胜' }
function fmtTime(s?: string | null): string {
function fmtDate(s?: string | null): string {
if (!s) return '—'
const d = new Date(s)
return isNaN(d.getTime()) ? s : d.toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' })
return isNaN(d.getTime()) ? s : `${d.getMonth() + 1}/${d.getDate()}`
}
export default function PredictionHistoryPage() {
@@ -28,13 +28,7 @@ export default function PredictionHistoryPage() {
const [error, setError] = useState<string | null>(null)
const [filter, setFilter] = useState<'all' | 'settled' | 'unsettled'>('all')
const [expandedId, setExpandedId] = useState<number | null>(null)
// 标注实际比分表单
const [editingId, setEditingId] = useState<number | null>(null)
const [homeGoals, setHomeGoals] = useState('')
const [awayGoals, setAwayGoals] = useState('')
const [saving, setSaving] = useState(false)
const [saveMsg, setSaveMsg] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null)
const [settlingId, setSettlingId] = useState<number | null>(null)
const load = useCallback(async () => {
setLoading(true)
@@ -42,10 +36,9 @@ export default function PredictionHistoryPage() {
try {
const list = await fetchPredictions(100)
setPredictions(list)
// 获取相关比赛信息
const matchIds = [...new Set(list.map(p => p.match_id))]
if (matchIds.length > 0) {
const matchesData = await fetchMatches({ limit: 200 })
const matchesData = await fetchMatches({ limit: 500 })
const matchMap = new Map<number, Match>()
matchesData.items.forEach(m => matchMap.set(m.id, m))
setMatches(matchMap)
@@ -59,68 +52,70 @@ export default function PredictionHistoryPage() {
useEffect(() => { load() }, [load])
const handleSettle = async (p: Prediction) => {
const match = matches.get(p.match_id)
if (!match || match.home_goals == null || match.away_goals == null) return
setSettlingId(p.id)
try {
await settlePrediction(p.id, match.home_goals, match.away_goals)
await load()
} catch (err) {
console.error('结算失败:', err)
} finally {
setSettlingId(null)
}
}
const filtered = predictions.filter(p => {
if (filter === 'settled') return p.settled
if (filter === 'unsettled') return !p.settled
return true
})
const startEdit = (p: Prediction) => {
setEditingId(p.id)
setHomeGoals(p.actual_home_goals?.toString() ?? '')
setAwayGoals(p.actual_away_goals?.toString() ?? '')
setSaveMsg(null)
}
const cancelEdit = () => {
setEditingId(null)
setHomeGoals('')
setAwayGoals('')
setSaveMsg(null)
}
const saveScore = async () => {
if (!editingId) return
const hg = parseInt(homeGoals)
const ag = parseInt(awayGoals)
if (isNaN(hg) || isNaN(ag)) {
setSaveMsg({ kind: 'error', text: '请输入有效比分' })
return
}
setSaving(true)
setSaveMsg(null)
try {
await settlePrediction(editingId, hg, ag)
setSaveMsg({ kind: 'ok', text: '已标注实际比分' })
await load()
setEditingId(null)
setHomeGoals('')
setAwayGoals('')
} catch (err) {
setSaveMsg({ kind: 'error', text: err instanceof Error ? err.message : '保存失败' })
} finally {
setSaving(false)
}
}
const unsettledCount = predictions.filter(p => !p.settled).length
const settledWithScore = predictions.filter(p => p.settled && p.actual_home_goals != null && p.actual_away_goals != null)
const hitCount = settledWithScore.filter(p => {
const actual = p.actual_home_goals! > p.actual_away_goals! ? '1' : p.actual_home_goals! < p.actual_away_goals! ? '2' : 'X'
return actual === p.pred_1x2
}).length
const accuracy = settledWithScore.length > 0 ? Math.round(hitCount / settledWithScore.length * 100) : 0
return (
<div className="space-y-6">
<SectionHeader
title="预测历史"
description={`共 ${predictions.length} 条预测记录${unsettledCount > 0 ? `, ${unsettledCount} 条待标注` : ''}`}
description={`共 ${predictions.length} 条记录${unsettledCount > 0 ? `, ${unsettledCount} 条待结算` : ''}`}
/>
{saveMsg && (
<Alert kind={saveMsg.kind} title={saveMsg.text} onClose={() => setSaveMsg(null)} />
{/* 统计概览 */}
{settledWithScore.length > 0 && (
<div className="grid gap-4 sm:grid-cols-3">
<Card>
<CardBody className="text-center">
<p className="text-2xl font-bold text-ink-900">{settledWithScore.length}</p>
<p className="text-xs text-ink-500">已结算</p>
</CardBody>
</Card>
<Card>
<CardBody className="text-center">
<p className="text-2xl font-bold text-emerald-700">{hitCount}</p>
<p className="text-xs text-ink-500">命中</p>
</CardBody>
</Card>
<Card>
<CardBody className="text-center">
<p className="text-2xl font-bold text-press">{accuracy}%</p>
<p className="text-xs text-ink-500">1X2 准确率</p>
</CardBody>
</Card>
</div>
)}
{/* 筛选 */}
<div className="flex gap-2">
{([
{ v: 'all', label: '全部' },
{ v: 'unsettled', label: '待标注' },
{ v: 'unsettled', label: '待结算' },
{ v: 'settled', label: '已结算' },
] as const).map(opt => (
<button
@@ -153,12 +148,13 @@ export default function PredictionHistoryPage() {
<Card>
<CardBody className="px-0 sm:px-0">
<div className="overflow-x-auto">
<table className="w-full min-w-[640px] text-sm">
<table className="w-full min-w-[700px] text-sm">
<thead>
<tr className="border-b border-ink-200 text-left text-ink-500">
<th className="px-4 py-2 font-medium">比赛日</th>
<th className="px-4 py-2 font-medium">比赛</th>
<th className="px-4 py-2 font-medium">预测比分</th>
<th className="px-4 py-2 font-medium">实际比分</th>
<th className="px-4 py-2 font-medium">预测</th>
<th className="px-4 py-2 font-medium">实际</th>
<th className="px-4 py-2 font-medium">1X2</th>
<th className="px-4 py-2 font-medium">状态</th>
<th className="px-4 py-2 font-medium">操作</th>
@@ -166,86 +162,74 @@ export default function PredictionHistoryPage() {
</thead>
<tbody>
{filtered.map(p => {
const match = matches.get(p.match_id)
const matchDate = match?.match_date
const homeName = match?.home_team_zh || match?.home_team || '?'
const awayName = match?.away_team_zh || match?.away_team || '?'
const actualHome = match?.home_goals
const actualAway = match?.away_goals
const hasActual = actualHome != null && actualAway != null
const isExpanded = expandedId === p.id
const isEditing = editingId === p.id
const matchInfo = matches.get(p.match_id)
const homeName = matchInfo?.home_team_zh || matchInfo?.home_team || `比赛 #${p.match_id}`
const awayName = matchInfo?.away_team_zh || matchInfo?.away_team || '?'
const predHit = p.settled && hasActual
? (actualHome! > actualAway! ? '1' : actualHome! < actualAway! ? '2' : 'X') === p.pred_1x2
: null
return (
<tr key={p.id} className="border-b border-ink-100 hover:bg-paper-100">
<td className="px-4 py-3 text-2xs text-ink-400">{fmtDate(matchDate)}</td>
<td className="px-4 py-3">
<div className="text-xs text-ink-800">{homeName} vs {awayName}</div>
<div className="text-2xs text-ink-400">{fmtTime(p.created_at)}</div>
<div className="flex items-center gap-1 text-xs text-ink-800">
<TeamSideTag side="home" />
<span className="truncate max-w-[100px]">{homeName}</span>
</div>
<div className="flex items-center gap-1 text-xs text-ink-600 mt-0.5">
<TeamSideTag side="away" />
<span className="truncate max-w-[100px]">{awayName}</span>
</div>
</td>
<td className="px-4 py-3 font-serif font-bold text-ink-900">
{p.pred_home_goals != null && p.pred_away_goals != null
? `${p.pred_home_goals} : ${p.pred_away_goals}`
: '—'}
? `${p.pred_home_goals} : ${p.pred_away_goals}` : '—'}
</td>
<td className="px-4 py-3">
{isEditing ? (
<div className="flex items-center gap-1">
<input
type="number"
min={0}
max={20}
value={homeGoals}
onChange={e => setHomeGoals(e.target.value)}
className="field w-12 px-1 py-0.5 text-center text-xs"
/>
<span className="text-xs text-ink-400">:</span>
<input
type="number"
min={0}
max={20}
value={awayGoals}
onChange={e => setAwayGoals(e.target.value)}
className="field w-12 px-1 py-0.5 text-center text-xs"
/>
</div>
) : (
<span className={`font-serif ${p.settled ? 'font-bold text-ink-900' : 'text-ink-400'}`}>
{p.actual_home_goals != null && p.actual_away_goals != null
? `${p.actual_home_goals} : ${p.actual_away_goals}`
: '—'}
{hasActual ? (
<span className={`font-serif font-bold ${p.settled ? 'text-ink-900' : 'text-ink-400'}`}>
{actualHome} : {actualAway}
</span>
) : (
<span className="text-2xs text-ink-300">暂无赛果</span>
)}
</td>
<td className="px-4 py-3">
{p.pred_1x2 ? (
<span className={`inline-block border px-1.5 py-0.5 text-2xs ${
p.settled && p.actual_home_goals != null && p.actual_away_goals != null
? (() => {
const actual = p.actual_home_goals > p.actual_away_goals ? '1' : p.actual_home_goals < p.actual_away_goals ? '2' : 'X'
return actual === p.pred_1x2 ? 'border-emerald-300 text-emerald-700' : 'border-press text-press'
})()
: 'border-ink-200 text-ink-600'
predHit === true ? 'border-emerald-300 text-emerald-700 bg-emerald-50' :
predHit === false ? 'border-press text-press bg-press-wash' :
'border-ink-200 text-ink-600'
}`}>
{OUTCOME_LABEL[p.pred_1x2] ?? p.pred_1x2}
{predHit === true && ' ✓'}
{predHit === false && ' ✗'}
</span>
) : '—'}
</td>
<td className="px-4 py-3">
{p.settled ? (
<Badge status="success">已结算</Badge>
) : hasActual ? (
<Badge status="info">可结算</Badge>
) : (
<Badge status="warning">待标注</Badge>
<Badge status="warning">待赛果</Badge>
)}
</td>
<td className="px-4 py-3">
<div className="flex gap-2">
{isEditing ? (
<>
<button onClick={saveScore} disabled={saving} className="btn btn-sm btn-solid">
{saving ? <Spinner /> : '保存'}
</button>
<button onClick={cancelEdit} className="btn btn-sm">取消</button>
</>
) : (
<>
{!p.settled && (
<button onClick={() => startEdit(p)} className="btn btn-sm">
标注
{!p.settled && hasActual && (
<button
onClick={() => handleSettle(p)}
disabled={settlingId === p.id}
className="btn btn-sm btn-solid"
>
{settlingId === p.id ? <Spinner /> : '结算'}
</button>
)}
<button
@@ -254,8 +238,6 @@ export default function PredictionHistoryPage() {
>
{isExpanded ? '收起' : '详情'}
</button>
</>
)}
</div>
</td>
</tr>
@@ -272,11 +254,22 @@ export default function PredictionHistoryPage() {
{expandedId && (() => {
const p = predictions.find(pr => pr.id === expandedId)
if (!p) return null
const match = matches.get(p.match_id)
const reports = p.agent_outputs ?? []
return (
<Card>
<CardHeader title="预测详情" />
<CardBody className="space-y-4">
<div className="flex items-center gap-2 text-sm text-ink-700">
<span>{fmtDate(match?.match_date)}</span>
<span className="text-ink-300">|</span>
<TeamSideTag side="home" />
<span>{match?.home_team_zh || match?.home_team || '?'}</span>
<span className="text-ink-400">vs</span>
<TeamSideTag side="away" />
<span>{match?.away_team_zh || match?.away_team || '?'}</span>
</div>
<div className="grid gap-4 sm:grid-cols-3">
<div className="border-t-2 border-ink-900 pt-3">
<p className="text-2xs text-ink-400">预测比分</p>
@@ -286,15 +279,16 @@ export default function PredictionHistoryPage() {
</p>
</div>
<div className="border-t-2 border-ink-900 pt-3">
<p className="text-2xs text-ink-400">置信度</p>
<p className="text-2xs text-ink-400">实际比分</p>
<p className="mt-1 font-serif text-xl font-bold text-ink-900">
{p.subjective_confidence != null ? `${(p.subjective_confidence * 100).toFixed(0)}%` : '—'}
{match?.home_goals != null && match?.away_goals != null
? `${match.home_goals} : ${match.away_goals}` : '—'}
</p>
</div>
<div className="border-t-2 border-ink-900 pt-3">
<p className="text-2xs text-ink-400">1X2</p>
<p className="text-2xs text-ink-400">置信度</p>
<p className="mt-1 font-serif text-xl font-bold text-ink-900">
{OUTCOME_LABEL[p.pred_1x2 ?? ''] ?? '—'}
{p.subjective_confidence != null ? `${(p.subjective_confidence * 100).toFixed(0)}%` : '—'}
</p>
</div>
</div>
@@ -312,7 +306,7 @@ export default function PredictionHistoryPage() {
<div>
<h4 className="section-head mb-2">专家意见</h4>
<div className="space-y-2">
{reports.map((r, i) => (
{reports.map((r) => (
<div key={r.agent} className="border-b border-ink-100 pb-2 last:border-b-0">
<p className="text-xs font-medium text-ink-700">{r.agent}</p>
<p className="mt-0.5 text-xs text-ink-500">{r.analysis || '—'}</p>