shangfangjian
d3284c48c3
新增完整的后台管理系统 (/admin): - Dashboard: 系统概览、最近采集状态、预测统计 - Collection: 数据采集触发(bzzoiro/understat/injuries) - Predictions: 预测历史查看、触发新预测 - Backtest: 回测配置与结果查看 - Monitoring: 系统健康、错误日志、死色队列 - Config: API Key 与数据源配置 技术栈: React Router + Tailwind 暗色主题 + TypeScript 文件: 11 个新文件, +21KB JS / +5KB CSS
333 lines
12 KiB
TypeScript
333 lines
12 KiB
TypeScript
/**
|
|
* Admin 后台 - 回测管理页面
|
|
*
|
|
* 功能:
|
|
* - 配置回测参数(策略、联赛、日期范围、初始资金)
|
|
* - 触发回测任务
|
|
* - 查看回测结果(收益率、最大回撤、夏普比率等)
|
|
* - 交易记录明细
|
|
*/
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { triggerBacktest, fetchBacktestHistory, fetchLeagues } from '../dal'
|
|
import type { BacktestRequest, BacktestResult, BacktestTrade, League } from '../types'
|
|
import {
|
|
Card,
|
|
CardBody,
|
|
CardHeader,
|
|
Badge,
|
|
ProgressBar,
|
|
DataTable,
|
|
EmptyState,
|
|
} from '../components'
|
|
import { SectionHeader } from '../components'
|
|
|
|
const STRATEGIES = [
|
|
{ value: 'confidence_weighted', label: '置信度加权', desc: '按预测置信度调整仓位' },
|
|
{ value: 'kelly', label: 'Kelly 准则', desc: 'Kelly 公式优化投注比例' },
|
|
{ value: 'flat', label: '固定金额', desc: '每次固定金额投注' },
|
|
]
|
|
|
|
export default function BacktestPage() {
|
|
const [leagues, setLeagues] = useState<League[]>([])
|
|
const [tasks, setTasks] = useState<BacktestResult[]>([])
|
|
const [strategy, setStrategy] = useState('confidence_weighted')
|
|
const [selectedLeagues, setSelectedLeagues] = useState<string[]>(['E0'])
|
|
const [dateFrom, setDateFrom] = useState('')
|
|
const [dateTo, setDateTo] = useState('')
|
|
const [bankroll, setBankroll] = useState(1000)
|
|
const [loading, setLoading] = useState(false)
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [successMsg, setSuccessMsg] = useState<string | null>(null)
|
|
|
|
useEffect(() => {
|
|
Promise.all([fetchLeagues(), fetchBacktestHistory()]).then(([lg, ts]) => {
|
|
setLeagues(lg)
|
|
setTasks(ts)
|
|
})
|
|
}, [])
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault()
|
|
setError(null)
|
|
setSuccessMsg(null)
|
|
setLoading(true)
|
|
|
|
try {
|
|
const body: BacktestRequest = {
|
|
strategy,
|
|
league_codes: selectedLeagues,
|
|
date_from: dateFrom || '2024-01-01',
|
|
date_to: dateTo || new Date().toISOString().split('T')[0],
|
|
initial_bankroll: bankroll,
|
|
}
|
|
const res = await triggerBacktest(body)
|
|
setSuccessMsg(`回测任务已启动: ${res.task_id}`)
|
|
// 刷新列表
|
|
const ts = await fetchBacktestHistory()
|
|
setTasks(ts)
|
|
} catch (err: unknown) {
|
|
setError(err instanceof Error ? err.message : '回测触发失败')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
function toggleLeague(code: string) {
|
|
setSelectedLeagues(prev =>
|
|
prev.includes(code) ? prev.filter(c => c !== code) : [...prev, code],
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<SectionHeader
|
|
title="回测管理"
|
|
description="配置回测参数,验证预测策略在历史数据上的表现"
|
|
/>
|
|
|
|
<div className="grid gap-6 lg:grid-cols-5">
|
|
{/* ── 回测配置表单 ── */}
|
|
<div className="lg:col-span-2">
|
|
<Card>
|
|
<CardHeader title="回测配置" />
|
|
<CardBody>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{/* 策略选择 */}
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-medium text-gray-400">策略</label>
|
|
<div className="space-y-2">
|
|
{STRATEGIES.map(s => (
|
|
<label
|
|
key={s.value}
|
|
className={`flex cursor-pointer items-start gap-3 rounded-md border p-3 transition-colors ${
|
|
strategy === s.value
|
|
? 'border-blue-500/50 bg-blue-500/10'
|
|
: 'border-gray-700 hover:border-gray-600'
|
|
}`}
|
|
>
|
|
<input
|
|
type="radio"
|
|
name="strategy"
|
|
value={s.value}
|
|
checked={strategy === s.value}
|
|
onChange={e => setStrategy(e.target.value)}
|
|
className="mt-0.5 accent-blue-500"
|
|
/>
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-200">{s.label}</div>
|
|
<div className="text-xs text-gray-500">{s.desc}</div>
|
|
</div>
|
|
</label>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 联赛多选 */}
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-medium text-gray-400">
|
|
联赛(多选)
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{leagues.map(l => (
|
|
<button
|
|
key={l.code}
|
|
type="button"
|
|
onClick={() => toggleLeague(l.code)}
|
|
className={`rounded-md border px-2.5 py-1 text-xs transition-colors ${
|
|
selectedLeagues.includes(l.code)
|
|
? 'border-blue-500/50 bg-blue-500/10 text-blue-400'
|
|
: 'border-gray-700 text-gray-500 hover:border-gray-600'
|
|
}`}
|
|
>
|
|
{l.name_zh ?? l.code}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 日期范围 */}
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-medium text-gray-400">开始日期</label>
|
|
<input
|
|
type="date"
|
|
value={dateFrom}
|
|
onChange={e => setDateFrom(e.target.value)}
|
|
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-medium text-gray-400">结束日期</label>
|
|
<input
|
|
type="date"
|
|
value={dateTo}
|
|
onChange={e => setDateTo(e.target.value)}
|
|
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 初始资金 */}
|
|
<div>
|
|
<label className="mb-1.5 block text-xs font-medium text-gray-400">初始资金</label>
|
|
<input
|
|
type="number"
|
|
value={bankroll}
|
|
onChange={e => setBankroll(Number(e.target.value))}
|
|
min={100}
|
|
step={100}
|
|
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-sm text-gray-200 focus:border-blue-500 focus:outline-none"
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="rounded-md border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-400">
|
|
{error}
|
|
</div>
|
|
)}
|
|
{successMsg && (
|
|
<div className="rounded-md border border-emerald-500/30 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-400">
|
|
{successMsg}
|
|
</div>
|
|
)}
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading || selectedLeagues.length === 0}
|
|
className="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
|
|
>
|
|
{loading ? '提交中...' : '启动回测'}
|
|
</button>
|
|
</form>
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* ── 回测任务与结果 ── */}
|
|
<div className="lg:col-span-3">
|
|
<Card>
|
|
<CardHeader title="回测任务" />
|
|
<CardBody className="p-0">
|
|
{tasks.length === 0 ? (
|
|
<EmptyState text="暂无回测任务" />
|
|
) : (
|
|
<div className="divide-y divide-gray-800">
|
|
{tasks.map(task => (
|
|
<BacktestResultRow key={task.task_id} task={task} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function BacktestResultRow({ task }: { task: BacktestResult }) {
|
|
const m = task.metrics
|
|
return (
|
|
<div className="px-5 py-4">
|
|
{/* 头部 */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<span className="font-mono text-xs text-gray-500">{task.task_id.slice(0, 8)}</span>
|
|
<Badge status={task.status}>{task.status}</Badge>
|
|
</div>
|
|
{m && (
|
|
<span
|
|
className={`text-sm font-semibold tabular-nums ${
|
|
m.profit_loss >= 0 ? 'text-emerald-400' : 'text-red-400'
|
|
}`}
|
|
>
|
|
{m.profit_loss >= 0 ? '+' : ''}
|
|
{m.profit_loss.toFixed(0)} ({(m.roi * 100).toFixed(1)}%)
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* 进度条 */}
|
|
{task.status === 'running' && (
|
|
<div className="mt-2">
|
|
<ProgressBar value={task.progress} />
|
|
</div>
|
|
)}
|
|
|
|
{/* 指标网格 */}
|
|
{m && (
|
|
<div className="mt-3 grid grid-cols-3 gap-3 lg:grid-cols-5">
|
|
<MiniStat label="交易数" value={m.total_trades} />
|
|
<MiniStat label="胜率" value={`${(m.win_rate * 100).toFixed(1)}%`} />
|
|
<MiniStat label="ROI" value={`${(m.roi * 100).toFixed(1)}%`} />
|
|
<MiniStat label="最大回撤" value={`${(m.max_drawdown * 100).toFixed(1)}%`} />
|
|
<MiniStat label="夏普比率" value={m.sharpe_ratio?.toFixed(2) ?? '—'} />
|
|
</div>
|
|
)}
|
|
|
|
{/* 错误 */}
|
|
{task.error_message && (
|
|
<p className="mt-2 text-xs text-red-400">{task.error_message}</p>
|
|
)}
|
|
|
|
{/* 交易明细 */}
|
|
{task.trades && task.trades.length > 0 && (
|
|
<div className="mt-3">
|
|
<details>
|
|
<summary className="cursor-pointer text-xs text-gray-500 hover:text-gray-300">
|
|
查看交易明细 ({task.trades.length} 笔)
|
|
</summary>
|
|
<div className="mt-2">
|
|
<DataTable
|
|
columns={[
|
|
{
|
|
key: 'match',
|
|
label: '比赛',
|
|
render: (row: BacktestTrade) => `${row.home_team} vs ${row.away_team}`,
|
|
},
|
|
{ key: 'bet_type', label: '类型', width: '60px' },
|
|
{ key: 'stake', label: '投注', width: '70px' },
|
|
{ key: 'odds', label: '赔率', width: '60px' },
|
|
{
|
|
key: 'result',
|
|
label: '结果',
|
|
width: '60px',
|
|
render: (row: BacktestTrade) => <Badge status={row.result}>{row.result}</Badge>,
|
|
},
|
|
{
|
|
key: 'profit',
|
|
label: '盈亏',
|
|
width: '80px',
|
|
render: (row: BacktestTrade) => (
|
|
<span
|
|
className={
|
|
row.profit >= 0 ? 'text-emerald-400' : 'text-red-400'
|
|
}
|
|
>
|
|
{row.profit >= 0 ? '+' : ''}
|
|
{row.profit.toFixed(1)}
|
|
</span>
|
|
),
|
|
},
|
|
]}
|
|
data={task.trades}
|
|
rowKey={(row: BacktestTrade) => row.match_id}
|
|
/>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function MiniStat({ label, value }: { label: string; value: string | number }) {
|
|
return (
|
|
<div className="rounded border border-gray-800 px-2 py-1.5">
|
|
<div className="text-[10px] text-gray-600">{label}</div>
|
|
<div className="text-xs font-medium text-gray-300 tabular-nums">{value}</div>
|
|
</div>
|
|
)
|
|
}
|