304 lines
12 KiB
TypeScript
304 lines
12 KiB
TypeScript
/**
|
|
* Admin 后台 - 回测管理页面(报刊风)
|
|
*
|
|
* 功能:
|
|
* - 回测配置: 联赛(下拉)、日期范围、场数、模式
|
|
* - 结果汇总: 已评分数、1X2 准确率、比分 RMSE、平均置信度
|
|
* - 逐场明细: 实际比分 vs 预测比分,正误标记
|
|
* - 模型评估: 各模型历史准确率(/eval/summary)
|
|
*
|
|
* 注意: 回测会对每场完赛比赛各发起一次 LLM 预测,成本高,需管理员密钥。
|
|
*/
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { triggerBacktest, fetchEvalSummary, fetchLeagues } from '../dal'
|
|
import type { BacktestRequest, EvalSummary, League } from '../types'
|
|
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner } from '../components'
|
|
|
|
interface BacktestResultRow {
|
|
match_id: number
|
|
league_code?: string | null
|
|
home_team: string
|
|
away_team: string
|
|
match_date?: string | null
|
|
actual_score: string
|
|
actual_1x2?: string
|
|
pred_home?: number | null
|
|
pred_away?: number | null
|
|
pred_1x2?: string | null
|
|
subjective_confidence?: number | null
|
|
correct_1x2: boolean
|
|
}
|
|
|
|
interface BacktestResponse {
|
|
summary: {
|
|
total: number
|
|
scored: number
|
|
accuracy_1x2?: number
|
|
avg_score_rmse?: number
|
|
avg_subjective_confidence?: number
|
|
}
|
|
results: BacktestResultRow[]
|
|
}
|
|
|
|
const OUTCOME_LABEL: Record<string, string> = { '1': '主胜', X: '平局', '2': '客胜' }
|
|
|
|
function fmtDate(s?: string | null): string {
|
|
if (!s) return '—'
|
|
return s.slice(0, 10)
|
|
}
|
|
|
|
export default function BacktestPage() {
|
|
const [leagues, setLeagues] = useState<League[]>([])
|
|
const [leagueId, setLeagueId] = useState('')
|
|
const [dateFrom, setDateFrom] = useState('')
|
|
const [dateTo, setDateTo] = useState('')
|
|
const [limit, setLimit] = useState(20)
|
|
const [mode, setMode] = useState<'single' | 'multi'>('single')
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [result, setResult] = useState<BacktestResponse | null>(null)
|
|
const [evalSummary, setEvalSummary] = useState<EvalSummary | null>(null)
|
|
const [evalLoading, setEvalLoading] = useState(false)
|
|
|
|
useEffect(() => {
|
|
fetchLeagues().then(setLeagues)
|
|
loadEval()
|
|
}, [])
|
|
|
|
async function loadEval() {
|
|
setEvalLoading(true)
|
|
try {
|
|
setEvalSummary(await fetchEvalSummary())
|
|
} finally {
|
|
setEvalLoading(false)
|
|
}
|
|
}
|
|
|
|
async function handleBacktest(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setLoading(true)
|
|
setError(null)
|
|
setResult(null)
|
|
try {
|
|
const req: BacktestRequest = {
|
|
league_id: leagueId ? parseInt(leagueId) : undefined,
|
|
date_from: dateFrom || undefined,
|
|
date_to: dateTo || undefined,
|
|
limit,
|
|
mode,
|
|
}
|
|
const res = await triggerBacktest(req as BacktestRequest)
|
|
setResult(res as unknown as BacktestResponse)
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : '回测失败')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
const summary = result?.summary
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<SectionHeader
|
|
title="回测管理"
|
|
description="在历史数据上运行预测并评估准确率。逐场调用 LLM,成本高,建议先小场次试跑。"
|
|
/>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-2">
|
|
{/* 回测配置 */}
|
|
<Card>
|
|
<CardHeader title="回测配置" />
|
|
<CardBody>
|
|
<form onSubmit={handleBacktest} className="space-y-4">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-ink-500">联赛</label>
|
|
<select
|
|
value={leagueId}
|
|
onChange={e => setLeagueId(e.target.value)}
|
|
className="field w-full"
|
|
>
|
|
<option value="">全部联赛</option>
|
|
{leagues.map(l => (
|
|
<option key={l.id ?? l.code} value={String(l.id)}>
|
|
{l.name_zh || l.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-ink-500">起始日期</label>
|
|
<input
|
|
type="date"
|
|
value={dateFrom}
|
|
onChange={e => setDateFrom(e.target.value)}
|
|
className="field w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-ink-500">结束日期</label>
|
|
<input
|
|
type="date"
|
|
value={dateTo}
|
|
onChange={e => setDateTo(e.target.value)}
|
|
className="field w-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-ink-500">场数限制</label>
|
|
<input
|
|
type="number"
|
|
min={1}
|
|
max={200}
|
|
value={limit}
|
|
onChange={e => setLimit(parseInt(e.target.value) || 20)}
|
|
className="field w-full"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1.5 block text-xs text-ink-500">模式</label>
|
|
<select
|
|
value={mode}
|
|
onChange={e => setMode(e.target.value as 'single' | 'multi')}
|
|
className="field w-full"
|
|
>
|
|
<option value="single">单次调用 (快)</option>
|
|
<option value="multi">多专家 (慢,贵)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{error && <Alert kind="error" title="回测失败" message={error} onClose={() => setError(null)} />}
|
|
|
|
<button type="submit" disabled={loading} className="btn btn-solid w-full">
|
|
{loading ? (<><Spinner /> 回测中,逐场预测耗时较长</>) : '开始回测'}
|
|
</button>
|
|
</form>
|
|
</CardBody>
|
|
</Card>
|
|
|
|
{/* 结果汇总 */}
|
|
<div className="space-y-6">
|
|
{summary && (
|
|
<Card>
|
|
<CardHeader title="回测结果" />
|
|
<CardBody>
|
|
<div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
|
|
<div>
|
|
<div className="font-serif text-2xl font-bold tabular-nums text-ink-900">
|
|
{summary.scored}/{summary.total}
|
|
</div>
|
|
<div className="mt-1 text-2xs text-ink-400">已评分 / 总场数</div>
|
|
</div>
|
|
<div>
|
|
<div className="font-serif text-2xl font-bold tabular-nums text-press">
|
|
{summary.accuracy_1x2 !== undefined && summary.accuracy_1x2 !== null
|
|
? `${summary.accuracy_1x2.toFixed(1)}%`
|
|
: '—'}
|
|
</div>
|
|
<div className="mt-1 text-2xs text-ink-400">1X2 准确率</div>
|
|
</div>
|
|
<div>
|
|
<div className="font-serif text-2xl font-bold tabular-nums text-ink-900">
|
|
{summary.avg_score_rmse !== undefined && summary.avg_score_rmse !== null
|
|
? summary.avg_score_rmse.toFixed(2)
|
|
: '—'}
|
|
</div>
|
|
<div className="mt-1 text-2xs text-ink-400">比分 RMSE</div>
|
|
</div>
|
|
<div>
|
|
<div className="font-serif text-2xl font-bold tabular-nums text-ink-900">
|
|
{summary.avg_subjective_confidence !== undefined && summary.avg_subjective_confidence !== null
|
|
? `${Math.round(summary.avg_subjective_confidence * 100)}%`
|
|
: '—'}
|
|
</div>
|
|
<div className="mt-1 text-2xs text-ink-400">平均置信度</div>
|
|
</div>
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
)}
|
|
|
|
{/* 模型评估 */}
|
|
<Card>
|
|
<CardHeader
|
|
title="模型评估"
|
|
description="已结算预测的准确率统计"
|
|
action={
|
|
<button onClick={loadEval} disabled={evalLoading} className="btn btn-sm">
|
|
{evalLoading ? (<><Spinner /> 加载中</>) : '刷新'}
|
|
</button>
|
|
}
|
|
/>
|
|
<CardBody>
|
|
{evalSummary && evalSummary.summary?.length > 0 ? (
|
|
<div className="space-y-2.5">
|
|
{evalSummary.summary.map((s, i) => (
|
|
<div
|
|
key={i}
|
|
className="flex flex-col gap-1 border-b border-ink-200 pb-2.5 last:border-b-0 last:pb-0 sm:flex-row sm:items-center sm:justify-between"
|
|
>
|
|
<span className="font-mono text-xs text-ink-700">{s.provider}/{s.model}</span>
|
|
<span className="text-2xs tabular-nums text-ink-500">
|
|
准确率 <span className="font-serif text-sm font-bold text-ink-900">
|
|
{s.accuracy_1x2 !== undefined && s.accuracy_1x2 !== null ? `${s.accuracy_1x2.toFixed(1)}%` : '—'}
|
|
</span>
|
|
<span className="ml-2">{s.total} 场</span>
|
|
{s.avg_score_rmse != null && <span className="ml-2">RMSE {s.avg_score_rmse.toFixed(2)}</span>}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<p className="py-4 text-center text-xs text-ink-400">
|
|
暂无评估数据。到「预测管理」完成结算后,这里会给出各模型准确率。
|
|
</p>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 逐场明细 */}
|
|
{result && result.results?.length > 0 && (
|
|
<Card>
|
|
<CardHeader title="逐场明细" />
|
|
<CardBody className="px-0 sm:px-0">
|
|
<div>
|
|
{result.results.map(r => (
|
|
<div
|
|
key={r.match_id}
|
|
className="flex flex-col gap-1.5 border-b border-ink-200 px-4 py-3 last:border-b-0 sm:flex-row sm:items-center sm:gap-3 sm:px-5"
|
|
>
|
|
<span className="w-24 flex-shrink-0 text-2xs tabular-nums text-ink-400">
|
|
{fmtDate(r.match_date)}
|
|
</span>
|
|
<span className="min-w-0 flex-1 truncate text-sm text-ink-800">
|
|
{r.home_team} vs {r.away_team}
|
|
</span>
|
|
<span className="flex-shrink-0 text-xs tabular-nums text-ink-500">
|
|
实际 <span className="font-serif font-bold text-ink-900">{r.actual_score}</span>
|
|
<span className="mx-2 text-ink-200">|</span>
|
|
预测 <span className={`font-serif font-bold ${r.correct_1x2 ? 'text-ink-900' : 'text-ink-400'}`}>
|
|
{r.pred_home ?? '-'}:{r.pred_away ?? '-'}
|
|
</span>
|
|
</span>
|
|
<span className="flex-shrink-0 sm:w-16 sm:text-right">
|
|
{r.correct_1x2 ? <Badge status="success">命中</Badge> : <Badge status="loss">未中</Badge>}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardBody>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|