feat: 管理界面报刊风统一改造 — 移除独立暗色主题,预测/回测/监控/配置页增强
This commit is contained in:
shangfangjian
@@ -1,16 +1,55 @@
|
||||
/**
|
||||
* Admin 后台 - 回测管理页面
|
||||
* Admin 后台 - 回测管理页面(报刊风)
|
||||
*
|
||||
* 响应式布局: 移动端单列,桌面端双列
|
||||
* 触摸友好: 按钮最小 44px 高度
|
||||
* 功能:
|
||||
* - 回测配置: 联赛(下拉)、日期范围、场数、模式
|
||||
* - 结果汇总: 已评分数、1X2 准确率、比分 RMSE、平均置信度
|
||||
* - 逐场明细: 实际比分 vs 预测比分,正误标记
|
||||
* - 模型评估: 各模型历史准确率(/eval/summary)
|
||||
*
|
||||
* 注意: 回测会对每场完赛比赛各发起一次 LLM 预测,成本高,需管理员密钥。
|
||||
*/
|
||||
|
||||
import { useState } from 'react'
|
||||
import { triggerBacktest, fetchEvalSummary } from '../dal'
|
||||
import type { BacktestRequest, EvalSummary } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader } from '../components'
|
||||
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('')
|
||||
@@ -18,8 +57,23 @@ export default function BacktestPage() {
|
||||
const [mode, setMode] = useState<'single' | 'multi'>('single')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [result, setResult] = useState<any>(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()
|
||||
@@ -34,8 +88,8 @@ export default function BacktestPage() {
|
||||
limit,
|
||||
mode,
|
||||
}
|
||||
const res = await triggerBacktest(req)
|
||||
setResult(res)
|
||||
const res = await triggerBacktest(req as BacktestRequest)
|
||||
setResult(res as unknown as BacktestResponse)
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : '回测失败')
|
||||
} finally {
|
||||
@@ -43,16 +97,13 @@ export default function BacktestPage() {
|
||||
}
|
||||
}
|
||||
|
||||
async function loadEval() {
|
||||
const summary = await fetchEvalSummary()
|
||||
setEvalSummary(summary)
|
||||
}
|
||||
const summary = result?.summary
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="回测管理"
|
||||
description="在历史数据上运行预测并评估准确率"
|
||||
description="在历史数据上运行预测并评估准确率。逐场调用 LLM,成本高,建议先小场次试跑。"
|
||||
/>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
@@ -62,138 +113,191 @@ export default function BacktestPage() {
|
||||
<CardBody>
|
||||
<form onSubmit={handleBacktest} className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">联赛 ID (可选)</label>
|
||||
<input
|
||||
type="number"
|
||||
<label className="mb-1.5 block text-xs text-ink-500">联赛</label>
|
||||
<select
|
||||
value={leagueId}
|
||||
onChange={e => setLeagueId(e.target.value)}
|
||||
placeholder="留空=全部"
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
/>
|
||||
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 font-medium text-gray-400">起始日期</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">起始日期</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.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">结束日期</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">结束日期</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.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">场数限制</label>
|
||||
<input
|
||||
type="number"
|
||||
value={limit}
|
||||
onChange={e => setLimit(parseInt(e.target.value) || 20)}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">模式</label>
|
||||
<select
|
||||
value={mode}
|
||||
onChange={e => setMode(e.target.value as 'single' | 'multi')}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
>
|
||||
<option value="single">单次调用 (快)</option>
|
||||
<option value="multi">多 Agent (慢)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-500/10 p-3 text-sm text-red-400 border border-red-500/30">
|
||||
{error}
|
||||
<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>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full rounded-md bg-blue-600 px-4 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50 transition-colors min-h-[44px]"
|
||||
>
|
||||
{loading ? '回测中...' : '开始回测'}
|
||||
{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">
|
||||
{result && (
|
||||
{summary && (
|
||||
<Card>
|
||||
<CardHeader title="回测结果" />
|
||||
<CardBody>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-lg bg-gray-800 p-4 text-center">
|
||||
<div className="text-2xl font-bold text-white">{result.scored}/{result.total}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">已评分</div>
|
||||
</div>
|
||||
<div className="rounded-lg bg-gray-800 p-4 text-center">
|
||||
<div className="text-2xl font-bold text-blue-400">
|
||||
{result.accuracy_1x2?.toFixed(1) ?? '—'}%
|
||||
<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="text-xs text-gray-400 mt-1">1X2 准确率</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}
|
||||
className="rounded px-2 py-1 text-xs text-blue-400 hover:bg-gray-800 min-h-[44px] min-w-[44px]"
|
||||
>
|
||||
刷新
|
||||
<button onClick={loadEval} disabled={evalLoading} className="btn btn-sm">
|
||||
{evalLoading ? (<><Spinner /> 加载中</>) : '刷新'}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<CardBody>
|
||||
{!evalSummary ? (
|
||||
<div className="text-center py-8 text-sm text-gray-500">
|
||||
<p>点击"刷新"加载评估数据</p>
|
||||
</div>
|
||||
) : evalSummary.summary?.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
{evalSummary.summary.map((s: any, i: number) => (
|
||||
{evalSummary && evalSummary.summary?.length > 0 ? (
|
||||
<div className="space-y-2.5">
|
||||
{evalSummary.summary.map((s, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex flex-col sm:flex-row sm:items-center justify-between rounded-lg border border-gray-800 p-3 gap-2"
|
||||
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="text-sm text-gray-300">{s.provider}/{s.model}</span>
|
||||
<Badge status="info">
|
||||
{s.accuracy?.toFixed(1)}% ({s.correct}/{s.total})
|
||||
</Badge>
|
||||
<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>
|
||||
) : (
|
||||
<div className="text-center py-8 text-sm text-gray-500">
|
||||
<p>暂无评估数据</p>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
/**
|
||||
* Admin 后台 - 数据采集页面
|
||||
* Admin 后台 - 数据采集页面(报刊风)
|
||||
*
|
||||
* 响应式布局: 移动端单列,桌面端双列
|
||||
* 触摸友好: 按钮最小 44px 高度
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { triggerCollection, fetchLeagues } from '../dal'
|
||||
import type { CollectionRequest, League } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader } from '../components'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner } from '../components'
|
||||
|
||||
const SOURCES = [
|
||||
{ value: 'bzzoiro', label: 'Bzzoiro', desc: '历史赛程与比分' },
|
||||
@@ -16,6 +15,31 @@ const SOURCES = [
|
||||
{ value: 'injuries', label: 'Injuries', desc: '球员伤停' },
|
||||
] as const
|
||||
|
||||
/** 把采集接口返回摘要成一两行可读文字 */
|
||||
function summarizeResult(res: any, source: string): { title: string; detail: string } {
|
||||
if (res && typeof res === 'object') {
|
||||
if (source === 'bzzoiro' && ('total_inserted' in res || 'total_updated' in res)) {
|
||||
return {
|
||||
title: `采集完成:新增 ${res.total_inserted ?? 0} 条,更新 ${res.total_updated ?? 0} 条`,
|
||||
detail: Array.isArray(res.errors) && res.errors.length > 0 ? res.errors.join('\n') : '',
|
||||
}
|
||||
}
|
||||
if ('count' in res || 'updated' in res) {
|
||||
const parts = [
|
||||
`新增 ${res.count ?? 0}`,
|
||||
`更新 ${res.updated ?? 0}`,
|
||||
`跳过 ${res.skipped ?? 0}`,
|
||||
`未匹配 ${res.unmatched ?? 0}`,
|
||||
]
|
||||
return {
|
||||
title: `采集完成:${parts.join(' / ')}`,
|
||||
detail: Array.isArray(res.errors) && res.errors.length > 0 ? res.errors.join('\n') : '',
|
||||
}
|
||||
}
|
||||
}
|
||||
return { title: '采集完成', detail: JSON.stringify(res)?.slice(0, 300) ?? '' }
|
||||
}
|
||||
|
||||
export default function CollectionPage() {
|
||||
const [leagues, setLeagues] = useState<League[]>([])
|
||||
const [source, setSource] = useState<string>('bzzoiro')
|
||||
@@ -25,7 +49,7 @@ export default function CollectionPage() {
|
||||
const [season, setSeason] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [successMsg, setSuccessMsg] = useState<string | null>(null)
|
||||
const [result, setResult] = useState<{ title: string; detail: string } | null>(null)
|
||||
|
||||
const loadLeagues = useCallback(async () => {
|
||||
const lg = await fetchLeagues()
|
||||
@@ -37,7 +61,7 @@ export default function CollectionPage() {
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
setSuccessMsg(null)
|
||||
setResult(null)
|
||||
setLoading(true)
|
||||
|
||||
try {
|
||||
@@ -50,7 +74,7 @@ export default function CollectionPage() {
|
||||
date_to: dateTo || undefined,
|
||||
}
|
||||
const res = await triggerCollection(body)
|
||||
setSuccessMsg(`采集完成: ${JSON.stringify(res).slice(0, 200)}`)
|
||||
setResult(summarizeResult(res, source))
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : '采集触发失败')
|
||||
} finally {
|
||||
@@ -62,7 +86,7 @@ export default function CollectionPage() {
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="数据采集"
|
||||
description="触发数据源采集,支持联赛筛选和日期范围"
|
||||
description="触发数据源采集,支持联赛筛选和日期范围。采集为同步执行,大范围日期耗时较长。"
|
||||
/>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
@@ -73,11 +97,11 @@ export default function CollectionPage() {
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* 数据源选择 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">数据源</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">数据源</label>
|
||||
<select
|
||||
value={source}
|
||||
onChange={e => setSource(e.target.value)}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
>
|
||||
{SOURCES.map(s => (
|
||||
<option key={s.value} value={s.value}>
|
||||
@@ -89,11 +113,11 @@ export default function CollectionPage() {
|
||||
|
||||
{/* 联赛选择 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">联赛</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">联赛</label>
|
||||
<select
|
||||
value={leagueCode}
|
||||
onChange={e => setLeagueCode(e.target.value)}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
>
|
||||
<option value="">全部联赛</option>
|
||||
{leagues.map(l => (
|
||||
@@ -105,13 +129,13 @@ export default function CollectionPage() {
|
||||
{/* Understat 专用: 赛季 */}
|
||||
{source === 'understat' && (
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">赛季(起始年)</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">赛季(起始年)</label>
|
||||
<input
|
||||
type="number"
|
||||
value={season}
|
||||
onChange={e => setSeason(e.target.value)}
|
||||
placeholder="2025"
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -120,45 +144,40 @@ export default function CollectionPage() {
|
||||
{source !== 'injuries' && (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">起始日期</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">起始日期</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.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">结束日期</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">结束日期</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.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 消息提示 */}
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-500/10 p-3 text-sm text-red-400 border border-red-500/30">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{successMsg && (
|
||||
<div className="rounded-md bg-emerald-500/10 p-3 text-sm text-emerald-400 border border-emerald-500/30">
|
||||
{successMsg}
|
||||
</div>
|
||||
{error && <Alert kind="error" title="采集失败" message={error} onClose={() => setError(null)} />}
|
||||
{result && (
|
||||
<Alert
|
||||
kind="ok"
|
||||
title={result.title}
|
||||
message={result.detail || undefined}
|
||||
onClose={() => setResult(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 提交按钮 */}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="w-full rounded-md bg-blue-600 px-4 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50 transition-colors min-h-[44px]"
|
||||
>
|
||||
{loading ? '采集中...' : '触发采集'}
|
||||
<button type="submit" disabled={loading} className="btn btn-solid w-full">
|
||||
{loading ? (<><Spinner /> 采集中</>) : '触发采集'}
|
||||
</button>
|
||||
</form>
|
||||
</CardBody>
|
||||
@@ -170,21 +189,19 @@ export default function CollectionPage() {
|
||||
<CardBody>
|
||||
<div className="space-y-3">
|
||||
{SOURCES.map(s => (
|
||||
<div key={s.value} className="rounded-lg border border-gray-800 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div key={s.value} className="border-b border-ink-200 px-1 py-3 last:border-b-0">
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge status="info">{s.label}</Badge>
|
||||
<p className="text-xs text-ink-600">{s.desc}</p>
|
||||
</div>
|
||||
<p className="text-sm text-gray-400">{s.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 移动端提示 */}
|
||||
<div className="mt-4 rounded-lg border border-blue-500/30 bg-blue-500/5 p-3">
|
||||
<p className="text-xs text-blue-300">
|
||||
💡 在移动端,采集任务将在后台运行,完成后会显示结果通知。
|
||||
</p>
|
||||
</div>
|
||||
<p className="mt-4 border-l-2 border-ink-300 pl-3 text-2xs leading-relaxed text-ink-500">
|
||||
若后端配置了 ADMIN_API_KEY,采集接口需要管理员密钥。
|
||||
遇到 401 请到「系统配置」页填写密钥。
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,26 @@
|
||||
/**
|
||||
* Admin 后台 - 系统配置管理页面
|
||||
* Admin 后台 - 系统配置管理页面(报刊风)
|
||||
*
|
||||
* 功能:
|
||||
* - 显示当前 .env 配置（脱敏）
|
||||
* - 提供配置修改指南
|
||||
* - 快速导航到数据源和 LLM 配置
|
||||
* - 管理员密钥(X-API-Key):存本机浏览器,自动附带到采集/回测/结算等受保护接口
|
||||
* - 显示当前 .env 配置(脱敏;后端暂无配置端点,为静态说明)
|
||||
* - 配置修改指南
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { fetchSystemConfig } from '../dal'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader } from '../components'
|
||||
import { getAdminKey, setAdminKey } from '../api'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
|
||||
|
||||
export default function ConfigPage() {
|
||||
const [config, setConfig] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
|
||||
// 管理员密钥
|
||||
const [adminKey, setAdminKeyInput] = useState('')
|
||||
const [keySaved, setKeySaved] = useState(false)
|
||||
const [keyExists, setKeyExists] = useState(false)
|
||||
|
||||
const loadConfig = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
@@ -27,54 +33,102 @@ export default function ConfigPage() {
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadConfig() }, [loadConfig])
|
||||
useEffect(() => {
|
||||
loadConfig()
|
||||
const stored = getAdminKey()
|
||||
setKeyExists(stored !== '')
|
||||
}, [loadConfig])
|
||||
|
||||
function handleSaveKey(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setAdminKey(adminKey.trim())
|
||||
setKeyExists(adminKey.trim() !== '')
|
||||
setKeySaved(true)
|
||||
setAdminKeyInput('')
|
||||
setTimeout(() => setKeySaved(false), 3000)
|
||||
}
|
||||
|
||||
function handleClearKey() {
|
||||
setAdminKey('')
|
||||
setAdminKeyInput('')
|
||||
setKeyExists(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="系统配置"
|
||||
description="查看当前系统配置参数(通过 .env 文件管理)"
|
||||
description="管理员密钥管理与系统参数查看。敏感配置一律通过服务器 .env 文件管理。"
|
||||
/>
|
||||
|
||||
{/* 配置警告 */}
|
||||
<div className="rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<span className="text-yellow-400 text-lg">⚠️</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-yellow-300">安全提示</p>
|
||||
<p className="mt-1 text-xs text-yellow-300/80">
|
||||
所有敏感配置(API Key、数据库连接等)通过后端 <code className="rounded bg-gray-800/50 px-1">.env</code> 文件管理。
|
||||
前端仅显示脱敏后的状态信息。如需修改,请通过 SSH 连接到服务器编辑配置文件。
|
||||
{/* 管理员密钥 */}
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="管理员密钥 (X-API-Key)"
|
||||
description="后端设置 ADMIN_API_KEY 后,采集 / 回测 / 结算等接口需要此密钥"
|
||||
/>
|
||||
<CardBody>
|
||||
<form onSubmit={handleSaveKey} className="space-y-4">
|
||||
<div className="flex flex-col gap-3 sm:flex-row">
|
||||
<input
|
||||
type="password"
|
||||
value={adminKey}
|
||||
onChange={e => setAdminKeyInput(e.target.value)}
|
||||
placeholder={keyExists ? '••••••••(已保存,输入新值可更换)' : '粘贴 ADMIN_API_KEY'}
|
||||
autoComplete="off"
|
||||
className="field flex-1"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<button type="submit" disabled={!adminKey.trim()} className="btn btn-solid">
|
||||
保存
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClearKey}
|
||||
disabled={!keyExists}
|
||||
className="btn btn-sm"
|
||||
>
|
||||
清除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{keySaved && <Alert kind="ok" title="密钥已保存,后续请求将自动附带" />}
|
||||
{keyExists && !keySaved && (
|
||||
<p className="text-2xs text-ink-500">
|
||||
当前状态:<Badge status="success">已保存密钥</Badge>
|
||||
<span className="ml-2">密钥仅保存在本机浏览器,不会上传到任何第三方。</span>
|
||||
</p>
|
||||
)}
|
||||
<p className="border-l-2 border-ink-300 pl-3 text-2xs leading-relaxed text-ink-500">
|
||||
密钥与服务器 .env 中 ADMIN_API_KEY 一致即可。留空时后端默认不鉴权(本地开发模式)。
|
||||
遇到 401 错误通常就是缺这个密钥。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 快速导航 */}
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<a
|
||||
href="/admin/data-sources"
|
||||
className="flex items-center gap-3 rounded-lg border border-gray-800 bg-gray-900 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800/50"
|
||||
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
||||
>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10 text-blue-400 text-lg">
|
||||
◫
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-200">数据源配置</div>
|
||||
<div className="text-xs text-gray-500">管理采集源 API Key</div>
|
||||
<div className="font-serif text-sm font-bold text-ink-900">数据源配置</div>
|
||||
<div className="mt-0.5 text-2xs text-ink-500">管理采集源 API Key</div>
|
||||
</div>
|
||||
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">→</span>
|
||||
</a>
|
||||
<a
|
||||
href="/admin/llm-config"
|
||||
className="flex items-center gap-3 rounded-lg border border-gray-800 bg-gray-900 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800/50"
|
||||
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
||||
>
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-emerald-500/10 text-emerald-400 text-lg">
|
||||
◬
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-200">LLM 配置</div>
|
||||
<div className="text-xs text-gray-500">管理模型连接与统计</div>
|
||||
<div className="font-serif text-sm font-bold text-ink-900">LLM 配置</div>
|
||||
<div className="mt-0.5 text-2xs text-ink-500">管理模型连接与统计</div>
|
||||
</div>
|
||||
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -82,53 +136,38 @@ export default function ConfigPage() {
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="当前配置"
|
||||
description="脱敏展示,实际值在服务器 .env 文件中"
|
||||
action={
|
||||
<button
|
||||
onClick={loadConfig}
|
||||
className="rounded px-2 py-1 text-xs text-blue-400 hover:bg-gray-800 min-h-[44px] min-w-[44px]"
|
||||
>
|
||||
刷新
|
||||
<button onClick={loadConfig} disabled={loading} className="btn btn-sm">
|
||||
{loading ? (<><Spinner /> 加载中</>) : '刷新'}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<CardBody>
|
||||
<CardBody className="px-0 sm:px-0">
|
||||
{loading ? (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-3 px-4 sm:px-5">
|
||||
{[1, 2, 3, 4, 5].map(i => (
|
||||
<div key={i} className="h-10 animate-pulse rounded bg-gray-800" />
|
||||
<SkeletonBlock key={i} className="h-9 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : config.length > 0 ? (
|
||||
<div className="space-y-1">
|
||||
{/* 桌面端表头 */}
|
||||
<div className="hidden sm:grid sm:grid-cols-3 gap-4 border-b border-gray-800 px-3 py-2 text-xs text-gray-500">
|
||||
<span>配置项</span>
|
||||
<span>当前值</span>
|
||||
<span>说明</span>
|
||||
</div>
|
||||
{/* 配置行 */}
|
||||
<div>
|
||||
{config.map(item => (
|
||||
<div
|
||||
key={item.key}
|
||||
className="flex flex-col sm:grid sm:grid-cols-3 gap-2 sm:gap-4 border-b border-gray-800/50 px-3 py-3 hover:bg-gray-800/30 rounded-lg sm:rounded-none"
|
||||
className="flex flex-col gap-1 border-b border-ink-200 px-4 py-2.5 last:border-b-0 sm:grid sm:grid-cols-[minmax(0,2fr)_minmax(0,3fr)_minmax(0,2fr)] sm:items-baseline sm:gap-4 sm:px-5"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs text-gray-300">{item.key}</span>
|
||||
{item.is_sensitive && (
|
||||
<Badge status="warning">敏感</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="font-mono text-xs text-gray-400 break-all">
|
||||
{item.value_masked}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">
|
||||
{item.description}
|
||||
<span className="font-mono text-xs text-ink-800">{item.key}</span>
|
||||
{item.is_sensitive && <Badge status="warning">敏感</Badge>}
|
||||
</div>
|
||||
<div className="break-all font-mono text-2xs text-ink-500">{item.value_masked}</div>
|
||||
<div className="text-2xs text-ink-400">{item.description}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-sm text-gray-500">无法加载配置信息</div>
|
||||
<p className="py-8 text-center text-xs text-ink-400">无法加载配置信息</p>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -136,12 +175,12 @@ export default function ConfigPage() {
|
||||
{/* 修改指南 */}
|
||||
<Card>
|
||||
<CardHeader title="修改配置指南" />
|
||||
<CardBody className="space-y-4">
|
||||
<div className="rounded-lg border border-gray-800 p-4">
|
||||
<h4 className="text-sm font-medium text-gray-200 mb-2">通过 SSH 修改 .env</h4>
|
||||
<pre className="overflow-x-auto rounded bg-gray-950 p-3 text-xs text-green-400 leading-relaxed">
|
||||
{`# 连接到 NAS
|
||||
ssh user@your-nas-ip
|
||||
<CardBody className="space-y-5">
|
||||
<div>
|
||||
<h4 className="mb-2 font-serif text-sm font-bold text-ink-900">通过 SSH 修改 .env</h4>
|
||||
<pre className="overflow-x-auto border border-ink-200 bg-paper-100 p-3 font-mono text-2xs leading-relaxed text-ink-700">
|
||||
{`# 连接到部署主机
|
||||
ssh user@your-server-ip
|
||||
|
||||
# 进入项目目录
|
||||
cd /vol2/1000/Docker/Profeto
|
||||
@@ -157,29 +196,24 @@ docker compose logs -f api`}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg border border-gray-800 p-4">
|
||||
<h4 className="text-sm font-medium text-gray-200 mb-2">常用配置项说明</h4>
|
||||
<div className="space-y-2 text-xs">
|
||||
<div className="flex items-start gap-2">
|
||||
<code className="flex-shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-blue-400">LLM_API_KEY</code>
|
||||
<span className="text-gray-400">LLM 服务商的 API 密钥,用于调用大模型</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<code className="flex-shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-blue-400">LLM_MODEL</code>
|
||||
<span className="text-gray-400">使用的模型名称,如 gpt-4o、claude-3-5-sonnet</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<code className="flex-shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-blue-400">LLM_BASE_URL</code>
|
||||
<span className="text-gray-400">API 基础地址,支持兼容 OpenAI 协议的服务商</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<code className="flex-shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-blue-400">BZZOIRO_KEY</code>
|
||||
<span className="text-gray-400">Bzzoiro 数据源 API 密钥</span>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<code className="flex-shrink-0 rounded bg-gray-800 px-1.5 py-0.5 text-blue-400">DATABASE_URL</code>
|
||||
<span className="text-gray-400">PostgreSQL 数据库连接字符串</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="mb-2 font-serif text-sm font-bold text-ink-900">常用配置项说明</h4>
|
||||
<div className="space-y-2">
|
||||
{[
|
||||
['LLM_API_KEY', 'LLM 服务商的 API 密钥,用于调用大模型'],
|
||||
['LLM_MODEL', '使用的模型名称,如 gpt-4o、claude-3-5-sonnet'],
|
||||
['LLM_BASE_URL', 'API 基础地址,支持兼容 OpenAI 协议的服务商'],
|
||||
['ADMIN_API_KEY', '管理后台写接口的鉴权密钥,配置后需在本页保存到浏览器'],
|
||||
['BZZOIRO_KEY', 'Bzzoiro 数据源 API 密钥'],
|
||||
['DATABASE_URL', 'PostgreSQL 数据库连接字符串'],
|
||||
].map(([key, desc]) => (
|
||||
<div key={key} className="flex items-start gap-2.5">
|
||||
<code className="flex-shrink-0 border border-ink-200 bg-paper-100 px-1.5 py-0.5 font-mono text-2xs text-ink-800">
|
||||
{key}
|
||||
</code>
|
||||
<span className="text-xs leading-relaxed text-ink-600">{desc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
/**
|
||||
* Admin 后台 - 仪表盘
|
||||
* Admin 后台 - 仪表盘(报刊风)
|
||||
*
|
||||
* 响应式布局: 移动端 1 列 → 平板 2 列 → 桌面 4 列
|
||||
* 响应式: 移动端 1 列 → 平板 2 列 → 桌面 4 列
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { fetchDashboard, fetchHealth } from '../dal'
|
||||
import type { DashboardStats } from '../types'
|
||||
import { Card, CardBody, CardHeader, StatCard, Badge } from '../components'
|
||||
import { Card, CardBody, CardHeader, StatCard, Alert, SkeletonBlock } from '../components'
|
||||
|
||||
export default function Dashboard() {
|
||||
const [data, setData] = useState<DashboardStats | null>(null)
|
||||
@@ -36,65 +36,58 @@ export default function Dashboard() {
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-500/10 p-6 text-center text-red-400">
|
||||
<p className="text-lg font-medium">加载仪表盘失败</p>
|
||||
<p className="mt-1 text-sm">{error}</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-3 rounded-md bg-red-500/20 px-4 py-2 text-sm hover:bg-red-500/30 min-h-[44px]"
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<Alert kind="error" title="加载仪表盘失败" message={error} />
|
||||
<button onClick={() => window.location.reload()} className="btn btn-sm">
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
const healthText =
|
||||
health?.status === 'healthy' || health?.status === 'ok' ? '正常' : '异常'
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 统计卡片: 移动端 1 列 → 平板 2 列 → 桌面 4 列 */}
|
||||
{/* 统计:报纸数字版式 */}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<StatCard
|
||||
label="健康状态"
|
||||
value={loading ? '—' : (health?.status === 'healthy' ? '✅ 正常' : '⚠️ 异常')}
|
||||
icon="●"
|
||||
/>
|
||||
<StatCard
|
||||
label="联赛数"
|
||||
value={loading ? '—' : data?.leagues.length ?? 0}
|
||||
icon="◫"
|
||||
/>
|
||||
<StatCard
|
||||
label="比赛数"
|
||||
value={loading ? '—' : data?.total_matches ?? 0}
|
||||
icon="◆"
|
||||
/>
|
||||
<StatCard
|
||||
label="预测数"
|
||||
value={loading ? '—' : data?.total_predictions ?? 0}
|
||||
icon="◇"
|
||||
value={loading ? '—' : healthText}
|
||||
hint={loading ? undefined : '每 60 秒随报眉自动复检'}
|
||||
/>
|
||||
<StatCard label="联赛数" value={loading ? '—' : data?.leagues.length ?? 0} />
|
||||
<StatCard label="比赛数" value={loading ? '—' : data?.total_matches ?? 0} />
|
||||
<StatCard label="预测数" value={loading ? '—' : data?.total_predictions ?? 0} />
|
||||
</div>
|
||||
|
||||
{/* 联赛列表 */}
|
||||
<Card>
|
||||
<CardHeader title="最近联赛" />
|
||||
<CardHeader title="已入库联赛" />
|
||||
<CardBody>
|
||||
{loading ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{[1, 2, 3, 4].map(i => (
|
||||
<div key={i} className="h-6 w-20 animate-pulse rounded bg-gray-800" />
|
||||
<SkeletonBlock key={i} className="h-6 w-24" />
|
||||
))}
|
||||
</div>
|
||||
) : data && data.leagues.length > 0 ? (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{data.leagues.map(l => (
|
||||
<Badge key={l.code} status="info">
|
||||
{l.name_zh || l.name} ({l.code})
|
||||
</Badge>
|
||||
<span
|
||||
key={l.code}
|
||||
className="border border-ink-200 px-2.5 py-1 text-xs text-ink-700"
|
||||
>
|
||||
{l.name_zh || l.name}
|
||||
<span className="ml-1.5 font-mono text-2xs text-ink-400">{l.code}</span>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-gray-400">暂无联赛数据,请先触发采集</p>
|
||||
<p className="text-xs text-ink-500">
|
||||
暂无联赛数据,请先到「数据采集」导入比赛数据。
|
||||
</p>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -106,33 +99,39 @@ export default function Dashboard() {
|
||||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<a
|
||||
href="/admin/collection"
|
||||
className="flex items-center gap-3 rounded-lg border border-gray-800 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800/50"
|
||||
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
||||
>
|
||||
<span className="text-xl">◈</span>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-200">触发采集</div>
|
||||
<div className="text-xs text-gray-500">从数据源获取最新数据</div>
|
||||
<div className="font-serif text-sm font-bold text-ink-900">触发采集</div>
|
||||
<div className="mt-0.5 text-2xs text-ink-500">从数据源获取最新赛程与比分</div>
|
||||
</div>
|
||||
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="/admin/predictions"
|
||||
className="flex items-center gap-3 rounded-lg border border-gray-800 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800/50"
|
||||
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
||||
>
|
||||
<span className="text-xl">◆</span>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-200">新建预测</div>
|
||||
<div className="text-xs text-gray-500">使用 LLM 预测比赛结果</div>
|
||||
<div className="font-serif text-sm font-bold text-ink-900">新建预测</div>
|
||||
<div className="mt-0.5 text-2xs text-ink-500">调 LLM 生成比赛预测</div>
|
||||
</div>
|
||||
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
href="/admin/backtest"
|
||||
className="flex items-center gap-3 rounded-lg border border-gray-800 p-4 transition-colors hover:border-gray-700 hover:bg-gray-800/50"
|
||||
className="group flex items-center justify-between border border-ink-300 p-4 transition-colors hover:border-ink-900 hover:bg-paper-100"
|
||||
>
|
||||
<span className="text-xl">◉</span>
|
||||
<div>
|
||||
<div className="text-sm font-medium text-gray-200">运行回测</div>
|
||||
<div className="text-xs text-gray-500">在历史数据上验证策略</div>
|
||||
<div className="font-serif text-sm font-bold text-ink-900">运行回测</div>
|
||||
<div className="mt-0.5 text-2xs text-ink-500">在历史数据上检验准确率</div>
|
||||
</div>
|
||||
<span className="text-ink-300 transition-colors group-hover:text-press" aria-hidden="true">
|
||||
→
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</CardBody>
|
||||
|
||||
@@ -1,17 +1,17 @@
|
||||
/**
|
||||
* Admin 后台 - 数据源管理页面
|
||||
* Admin 后台 - 数据源管理页面(报刊风)
|
||||
*
|
||||
* 功能:
|
||||
* - 显示当前数据源状态 (bzzoiro / understat / injuries)
|
||||
* - 显示 API Key 配置状态（脱敏显示）
|
||||
* - 测试连接按钮（调用采集 API 测试）
|
||||
* - 采集历史记录
|
||||
* - 显示 API Key 配置状态(脱敏显示)
|
||||
* - 测试连接按钮(调用采集 API 验证)
|
||||
* - 数据源说明
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { fetchDataSourceStatuses, testDataSource } from '../dal'
|
||||
import type { DataSourceStatus } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader } from '../components'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
|
||||
|
||||
export default function DataSourcesPage() {
|
||||
const [sources, setSources] = useState<DataSourceStatus[]>([])
|
||||
@@ -37,7 +37,7 @@ export default function DataSourcesPage() {
|
||||
setTestingSource(sourceName)
|
||||
setTestResults(prev => ({ ...prev, [sourceName]: { success: false, message: '测试中...' } }))
|
||||
try {
|
||||
await testDataSource(sourceName as any)
|
||||
await testDataSource(sourceName as 'bzzoiro' | 'understat' | 'injuries')
|
||||
setTestResults(prev => ({ ...prev, [sourceName]: { success: true, message: '连接成功' } }))
|
||||
} catch (err: unknown) {
|
||||
const msg = err instanceof Error ? err.message : '连接失败'
|
||||
@@ -51,7 +51,7 @@ export default function DataSourcesPage() {
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="数据源管理"
|
||||
description="管理数据采集源配置与连接状态"
|
||||
description="数据采集源的配置状态与连通性测试。"
|
||||
/>
|
||||
|
||||
{/* 数据源卡片 */}
|
||||
@@ -60,10 +60,10 @@ export default function DataSourcesPage() {
|
||||
{[1, 2, 3].map(i => (
|
||||
<Card key={i}>
|
||||
<CardBody>
|
||||
<div className="animate-pulse space-y-3">
|
||||
<div className="h-4 w-24 rounded bg-gray-800" />
|
||||
<div className="h-3 w-32 rounded bg-gray-800" />
|
||||
<div className="h-8 w-full rounded bg-gray-800" />
|
||||
<div className="space-y-3">
|
||||
<SkeletonBlock className="h-4 w-24" />
|
||||
<SkeletonBlock className="h-3 w-32" />
|
||||
<SkeletonBlock className="h-8 w-full" />
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -77,47 +77,41 @@ export default function DataSourcesPage() {
|
||||
<Card key={source.name}>
|
||||
<CardBody className="space-y-4">
|
||||
{/* 头部 */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<h3 className="text-sm font-medium text-white">{source.label}</h3>
|
||||
<Badge status={source.keyConfigured ? 'success' : 'failed'}>
|
||||
{source.keyConfigured ? '已配置' : '未配置'}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b border-ink-200 pb-3">
|
||||
<h3 className="font-serif text-sm font-bold text-ink-900">{source.label}</h3>
|
||||
<Badge status={source.keyConfigured ? 'success' : 'error'}>
|
||||
{source.keyConfigured ? '已配置' : '未配置'}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* API Key 状态 */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">API Key</span>
|
||||
<span className="font-mono text-gray-400">{source.maskedKey}</span>
|
||||
<span className="text-ink-400">API Key</span>
|
||||
<span className="font-mono text-ink-600">{source.maskedKey}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<span className="text-gray-500">最近采集</span>
|
||||
<span className="text-gray-400">{source.lastIngestion || '暂无记录'}</span>
|
||||
<span className="text-ink-400">最近采集</span>
|
||||
<span className="text-ink-600">{source.lastIngestion || '暂无记录'}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 测试结果 */}
|
||||
{result && (
|
||||
<div
|
||||
className={`rounded p-2 text-xs ${
|
||||
result.success
|
||||
? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/30'
|
||||
}`}
|
||||
>
|
||||
{result.message}
|
||||
</div>
|
||||
<Alert
|
||||
kind={result.success ? 'ok' : 'error'}
|
||||
title={result.success ? '连接成功' : '连接失败'}
|
||||
message={result.success ? undefined : result.message}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<button
|
||||
onClick={() => handleTest(source.name)}
|
||||
disabled={testingSource === source.name}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-4 py-2.5 text-sm text-gray-300 transition-colors hover:bg-gray-700 hover:text-white disabled:opacity-50 min-h-[44px]"
|
||||
className="btn btn-sm w-full"
|
||||
>
|
||||
{testingSource === source.name ? '测试中...' : '测试连接'}
|
||||
{testingSource === source.name ? (<><Spinner /> 测试中</>) : '测试连接'}
|
||||
</button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
@@ -130,45 +124,28 @@ export default function DataSourcesPage() {
|
||||
<Card>
|
||||
<CardHeader title="数据源说明" />
|
||||
<CardBody>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div className="rounded-lg border border-gray-800 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge status="info">Bzzoiro</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
<div className="grid gap-x-6 gap-y-3 sm:grid-cols-3">
|
||||
<div className="border-t border-ink-200 pt-3">
|
||||
<Badge status="info">Bzzoiro</Badge>
|
||||
<p className="mt-2 text-xs leading-relaxed text-ink-600">
|
||||
历史赛程与比分数据,覆盖全球主要联赛。需要 API Key 配置。
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-800 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge status="info">Understat</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
xG (预期进球) 进阶数据,无需 API Key,通过网页抓取获取。
|
||||
<div className="border-t border-ink-200 pt-3">
|
||||
<Badge status="info">Understat</Badge>
|
||||
<p className="mt-2 text-xs leading-relaxed text-ink-600">
|
||||
xG(预期进球)进阶数据,无需 API Key,通过网页抓取获取。
|
||||
</p>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-800 p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Badge status="info">Injuries</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-gray-400">
|
||||
<div className="border-t border-ink-200 pt-3">
|
||||
<Badge status="info">Injuries</Badge>
|
||||
<p className="mt-2 text-xs leading-relaxed text-ink-600">
|
||||
球员伤停信息,用于预测时考虑阵容完整性。需要 API Key 配置。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 采集历史 */}
|
||||
<Card>
|
||||
<CardHeader title="采集历史" />
|
||||
<CardBody>
|
||||
<div className="text-center py-8 text-sm text-gray-500">
|
||||
<p>暂无采集历史记录</p>
|
||||
<p className="mt-1 text-xs">后端暂无采集历史端点,采集任务完成后将在此显示</p>
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
/**
|
||||
* Admin 后台 - LLM 配置管理页面
|
||||
* Admin 后台 - LLM 配置管理页面(报刊风)
|
||||
*
|
||||
* 功能:
|
||||
* - 显示当前 LLM 配置（provider, model, base_url）
|
||||
* - 测试 LLM 连接（调用 /predict 测试）
|
||||
* - 显示 LLM 使用统计（预测次数、平均延迟、成功率）
|
||||
* - 模型切换（显示可用模型列表）
|
||||
* - 显示当前 LLM 配置(provider, model, base_url;后端暂无配置端点,当前值取自 .env 约定)
|
||||
* - 测试 LLM 连接(会真实调用一次 /predict,产生 LLM 调用费用)
|
||||
* - 显示 LLM 使用统计(从预测记录聚合)
|
||||
* - 可用模型列表
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { testLLMConnection, fetchLLMUsageStats } from '../dal'
|
||||
import type { LLMUsageStats } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader } from '../components'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner, SkeletonBlock } from '../components'
|
||||
|
||||
// 可用模型列表
|
||||
const AVAILABLE_MODELS = [
|
||||
{ id: 'gpt-4o', label: 'GPT-4o', provider: 'openai', description: '最强大模型,适合复杂分析' },
|
||||
{ id: 'gpt-4o', label: 'GPT-4o', provider: 'openai', description: '综合能力最强,适合复杂分析' },
|
||||
{ id: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'openai', description: '快速经济,适合批量预测' },
|
||||
{ id: 'claude-3-5-sonnet', label: 'Claude 3.5 Sonnet', provider: 'anthropic', description: '长上下文分析能力强' },
|
||||
{ id: 'deepseek-chat', label: 'DeepSeek V3', provider: 'deepseek', description: '高性价比中文优化' },
|
||||
{ id: 'deepseek-chat', label: 'DeepSeek V3', provider: 'deepseek', description: '高性价比,中文优化' },
|
||||
]
|
||||
|
||||
export default function LLMConfigPage() {
|
||||
@@ -27,7 +27,7 @@ export default function LLMConfigPage() {
|
||||
const [testing, setTesting] = useState(false)
|
||||
const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null)
|
||||
|
||||
// 当前配置（模拟，后端暂无配置端点）
|
||||
// 当前配置(后端暂无配置端点,取 .env 约定值展示)
|
||||
const currentConfig = {
|
||||
provider: 'openai',
|
||||
model: 'gpt-4o',
|
||||
@@ -68,62 +68,51 @@ export default function LLMConfigPage() {
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="LLM 配置"
|
||||
description="管理大语言模型连接与使用统计"
|
||||
description="大语言模型连接状态与使用统计。模型切换通过修改 .env 并重启服务完成。"
|
||||
/>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
{/* 当前配置 */}
|
||||
<Card>
|
||||
<CardHeader title="当前配置" />
|
||||
<CardBody className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between border-b border-gray-800 pb-3">
|
||||
<span className="text-xs text-gray-500">提供商</span>
|
||||
<Badge status="info">{currentConfig.provider}</Badge>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b border-gray-800 pb-3">
|
||||
<span className="text-xs text-gray-500">模型</span>
|
||||
<span className="text-sm text-gray-200">{currentConfig.model}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b border-gray-800 pb-3">
|
||||
<span className="text-xs text-gray-500">API 地址</span>
|
||||
<span className="text-xs font-mono text-gray-400">{currentConfig.base_url}</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b border-gray-800 pb-3">
|
||||
<span className="text-xs text-gray-500">API Key</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono text-xs text-gray-400">{currentConfig.api_key_masked}</span>
|
||||
<Badge status={currentConfig.api_key_configured ? 'success' : 'failed'}>
|
||||
{currentConfig.api_key_configured ? '已配置' : '未配置'}
|
||||
</Badge>
|
||||
<CardBody>
|
||||
<div className="space-y-0">
|
||||
{[
|
||||
{ label: '提供商', value: currentConfig.provider, mono: false },
|
||||
{ label: '模型', value: currentConfig.model, mono: true },
|
||||
{ label: 'API 地址', value: currentConfig.base_url, mono: true },
|
||||
{ label: 'API Key', value: currentConfig.api_key_masked, mono: true },
|
||||
{ label: '模式', value: '多专家 (5 路 + 终裁)', mono: false },
|
||||
].map(row => (
|
||||
<div
|
||||
key={row.label}
|
||||
className="flex items-center justify-between gap-4 border-b border-ink-200 py-2.5 last:border-b-0"
|
||||
>
|
||||
<span className="text-xs text-ink-400">{row.label}</span>
|
||||
<span className={`text-xs text-ink-800 ${row.mono ? 'break-all font-mono' : ''}`}>
|
||||
{row.value}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-gray-500">模式</span>
|
||||
<span className="text-sm text-gray-200">多 Agent (5 专家 + 终裁)</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 测试连接 */}
|
||||
{testResult && (
|
||||
<div
|
||||
className={`rounded p-3 text-xs ${
|
||||
testResult.success
|
||||
? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/30'
|
||||
: 'bg-red-500/10 text-red-400 border border-red-500/30'
|
||||
}`}
|
||||
>
|
||||
{testResult.message}
|
||||
<div className="mt-4">
|
||||
<Alert
|
||||
kind={testResult.success ? 'ok' : 'error'}
|
||||
title={testResult.success ? '连接正常' : '连接失败'}
|
||||
message={testResult.success ? undefined : testResult.message}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={handleTest}
|
||||
disabled={testing}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-4 py-2.5 text-sm text-gray-300 transition-colors hover:bg-gray-700 hover:text-white disabled:opacity-50 min-h-[44px]"
|
||||
>
|
||||
{testing ? '测试中...' : '测试 LLM 连接'}
|
||||
<button onClick={handleTest} disabled={testing} className="btn btn-sm mt-4 w-full">
|
||||
{testing ? (<><Spinner /> 测试中</>) : '测试 LLM 连接'}
|
||||
</button>
|
||||
<p className="mt-2 text-center text-2xs text-ink-400">
|
||||
测试会真实调用一次单次模式预测,产生 LLM 费用。
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -131,126 +120,110 @@ export default function LLMConfigPage() {
|
||||
<Card>
|
||||
<CardHeader
|
||||
title="使用统计"
|
||||
description="从最近预测记录聚合"
|
||||
action={
|
||||
<button
|
||||
onClick={loadStats}
|
||||
className="rounded px-2 py-1 text-xs text-blue-400 hover:bg-gray-800 min-h-[44px] min-w-[44px]"
|
||||
>
|
||||
刷新
|
||||
<button onClick={loadStats} disabled={loading} className="btn btn-sm">
|
||||
{loading ? (<><Spinner /> 加载中</>) : '刷新'}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<CardBody>
|
||||
{loading ? (
|
||||
<div className="animate-pulse space-y-3">
|
||||
<div className="h-16 rounded bg-gray-800" />
|
||||
<div className="h-16 rounded bg-gray-800" />
|
||||
<div className="h-16 rounded bg-gray-800" />
|
||||
<div className="space-y-3">
|
||||
<SkeletonBlock className="h-16 w-full" />
|
||||
<SkeletonBlock className="h-16 w-full" />
|
||||
</div>
|
||||
) : stats ? (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-3 text-center">
|
||||
<div className="text-xl font-bold text-white tabular-nums">{stats.total_predictions}</div>
|
||||
<div className="text-xs text-gray-500 mt-1">总预测数</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-3 text-center">
|
||||
<div className="text-xl font-bold text-blue-400 tabular-nums">{stats.avg_latency_ms}ms</div>
|
||||
<div className="text-xs text-gray-500 mt-1">平均延迟</div>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<div className="border-t-2 border-ink-900 pt-3 text-center">
|
||||
<div className="font-serif text-2xl font-bold tabular-nums text-ink-900">
|
||||
{stats.total_predictions}
|
||||
</div>
|
||||
<div className="mt-1 text-2xs text-ink-400">总预测数</div>
|
||||
</div>
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-800/50 p-3 text-center">
|
||||
<div className="text-xl font-bold text-emerald-400 tabular-nums">
|
||||
{stats.success_rate.toFixed(1)}%
|
||||
<div className="border-t-2 border-ink-900 pt-3 text-center">
|
||||
<div className="font-serif text-2xl font-bold tabular-nums text-ink-900">
|
||||
{stats.avg_latency_ms > 0 ? `${(stats.avg_latency_ms / 1000).toFixed(1)}s` : '—'}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 mt-1">成功率</div>
|
||||
<div className="mt-1 text-2xs text-ink-400">平均延迟</div>
|
||||
</div>
|
||||
<div className="border-t-2 border-press pt-3 text-center">
|
||||
<div className="font-serif text-2xl font-bold tabular-nums text-press">
|
||||
{stats.success_rate.toFixed(0)}%
|
||||
</div>
|
||||
<div className="mt-1 text-2xs text-ink-400">有效率</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-sm text-gray-500">暂无使用统计数据</div>
|
||||
<p className="py-6 text-center text-xs text-ink-400">暂无使用统计数据</p>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 模型切换 */}
|
||||
{/* 可用模型 */}
|
||||
<Card>
|
||||
<CardHeader title="可用模型" description="切换预测使用的 LLM 模型(通过修改 .env 文件)" />
|
||||
<CardBody>
|
||||
<div className="space-y-3">
|
||||
{AVAILABLE_MODELS.map(model => {
|
||||
const isCurrent = model.id === currentConfig.model
|
||||
return (
|
||||
<div
|
||||
key={model.id}
|
||||
className={`flex flex-col sm:flex-row sm:items-center justify-between rounded-lg border p-4 gap-3 ${
|
||||
isCurrent
|
||||
? 'border-blue-500/30 bg-blue-500/5'
|
||||
: 'border-gray-800 hover:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-200">{model.label}</span>
|
||||
{isCurrent && <Badge status="success">当前</Badge>}
|
||||
</div>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{model.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader title="可用模型" description="在 .env 中修改 LLM_MODEL 后重启服务生效" />
|
||||
<CardBody className="px-0 sm:px-0">
|
||||
{AVAILABLE_MODELS.map(model => {
|
||||
const isCurrent = model.id === currentConfig.model
|
||||
return (
|
||||
<div
|
||||
key={model.id}
|
||||
className={`flex flex-col gap-2 border-b border-ink-200 px-4 py-3 last:border-b-0 sm:flex-row sm:items-center sm:justify-between sm:px-5 ${
|
||||
isCurrent ? 'bg-press-wash/50' : ''
|
||||
}`}
|
||||
>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge status="info">{model.provider}</Badge>
|
||||
{!isCurrent && (
|
||||
<span className="text-xs text-gray-500 whitespace-nowrap">
|
||||
编辑 .env 切换
|
||||
</span>
|
||||
)}
|
||||
<span className="text-sm font-medium text-ink-900">{model.label}</span>
|
||||
{isCurrent && <Badge status="success">当前</Badge>}
|
||||
</div>
|
||||
<p className="mt-0.5 text-2xs text-ink-500">{model.description}</p>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="font-mono text-2xs text-ink-400">{model.provider}</span>
|
||||
{!isCurrent && <span className="text-2xs text-ink-400">编辑 .env 切换</span>}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 最近预测 */}
|
||||
<Card>
|
||||
<CardHeader title="最近预测记录" />
|
||||
<CardBody>
|
||||
<CardBody className="px-0 sm:px-0">
|
||||
{loading ? (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-2 px-4 sm:px-5">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-12 animate-pulse rounded bg-gray-800" />
|
||||
<SkeletonBlock key={i} className="h-10 w-full" />
|
||||
))}
|
||||
</div>
|
||||
) : stats && stats.recent_predictions.length > 0 ? (
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
{stats.recent_predictions.map(p => (
|
||||
<div
|
||||
key={p.id}
|
||||
className="flex flex-col sm:flex-row sm:items-center justify-between rounded-lg border border-gray-800 p-3 gap-2"
|
||||
className="flex flex-col gap-1.5 border-b border-ink-200 px-4 py-2.5 last:border-b-0 sm:flex-row sm:items-center sm:justify-between sm:px-5"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-gray-500">#{p.id}</span>
|
||||
<span className="text-sm text-gray-300">Match #{p.match_id}</span>
|
||||
<span className="text-xs font-mono text-gray-500">{p.model}</span>
|
||||
<div className="flex items-baseline gap-3">
|
||||
<span className="text-2xs tabular-nums text-ink-400">#{p.id}</span>
|
||||
<span className="text-xs text-ink-800">比赛 #{p.match_id}</span>
|
||||
<span className="font-mono text-2xs text-ink-500">{p.model}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">
|
||||
{p.created_at ? new Date(p.created_at).toLocaleString() : '—'}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-2xs tabular-nums text-ink-400">
|
||||
{p.created_at ? new Date(p.created_at).toLocaleString('zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—'}
|
||||
</span>
|
||||
<Badge status={p.status === 'success' ? 'success' : 'failed'}>
|
||||
{p.status === 'success' ? '成功' : '失败'}
|
||||
</Badge>
|
||||
{p.status === 'success' ? <Badge status="success">成功</Badge> : <Badge status="error">失败</Badge>}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-8 text-sm text-gray-500">
|
||||
<p>暂无预测记录</p>
|
||||
<p className="mt-1 text-xs">触发预测后将在此显示记录</p>
|
||||
</div>
|
||||
<p className="py-8 text-center text-xs text-ink-400">暂无预测记录</p>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -1,105 +1,152 @@
|
||||
/**
|
||||
* Admin 后台 - 监控面板
|
||||
* Admin 后台 - 监控面板(报刊风)
|
||||
*
|
||||
* 响应式布局: 移动端单列,桌面端三列
|
||||
* 触摸友好: 卡片可点击查看详情
|
||||
* 功能:
|
||||
* - /health 存活检查(自动:30 秒一轮;可手动刷新)
|
||||
* - /health/ready 数据库就绪检查
|
||||
* - 服务名 / 版本 / 运行时间 / 检查项(后端返回什么就展示什么)
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { fetchHealth } from '../dal'
|
||||
import { SectionHeader } from '../components'
|
||||
import { api } from '../api'
|
||||
import { Card, CardBody, CardHeader, SectionHeader, Alert, Spinner, Badge } from '../components'
|
||||
|
||||
export default function MonitoringPage() {
|
||||
const [health, setHealth] = useState<any>(null)
|
||||
const [ready, setReady] = useState<'ready' | 'not_ready' | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [lastCheck, setLastCheck] = useState<string>('')
|
||||
|
||||
const refresh = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const [h, r] = await Promise.allSettled([
|
||||
fetchHealth(),
|
||||
api.get<{ status: string }>('/health/ready'),
|
||||
])
|
||||
setHealth(h.status === 'fulfilled' ? h.value : null)
|
||||
setReady(r.status === 'fulfilled' ? (r.value?.status as 'ready' | 'not_ready') : null)
|
||||
if (h.status === 'rejected') {
|
||||
setError(h.reason instanceof Error ? h.reason.message : '无法连接到后端')
|
||||
}
|
||||
setLastCheck(new Date().toLocaleTimeString('zh-CN', { hour12: false }))
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchHealth().then(setHealth).finally(() => setLoading(false))
|
||||
}, [])
|
||||
refresh()
|
||||
const t = setInterval(refresh, 30_000)
|
||||
return () => clearInterval(t)
|
||||
}, [refresh])
|
||||
|
||||
const alive = health?.status === 'healthy' || health?.status === 'ok'
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="系统监控"
|
||||
description="查看服务健康状态"
|
||||
description="存活与数据库就绪检查,每 30 秒自动巡检一次。"
|
||||
/>
|
||||
|
||||
{loading ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{[1, 2, 3].map(i => (
|
||||
<div key={i} className="h-24 animate-pulse rounded-lg bg-gray-800" />
|
||||
))}
|
||||
</div>
|
||||
) : health ? (
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{/* 服务状态 */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||||
<div className="text-xs text-gray-500 mb-2">状态</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="inline-block h-3 w-3 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="text-lg font-bold text-emerald-400">{health.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-2xs text-ink-400">
|
||||
{lastCheck && `最近巡检 ${lastCheck}`}
|
||||
</span>
|
||||
<button onClick={refresh} disabled={loading} className="btn btn-sm">
|
||||
{loading ? (<><Spinner /> 检查中</>) : '立即巡检'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 服务名称 */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||||
<div className="text-xs text-gray-500 mb-2">服务</div>
|
||||
<div className="text-lg font-bold text-white">{health.service || 'profeto'}</div>
|
||||
</div>
|
||||
|
||||
{/* 数据库 */}
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||||
<div className="text-xs text-gray-500 mb-2">数据库</div>
|
||||
<div className="text-lg font-bold text-blue-400">11 张表</div>
|
||||
</div>
|
||||
|
||||
{/* 版本 */}
|
||||
{health.version && (
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||||
<div className="text-xs text-gray-500 mb-2">版本</div>
|
||||
<div className="text-lg font-bold text-gray-200">{health.version}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 运行时间 */}
|
||||
{health.uptime_seconds && (
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||||
<div className="text-xs text-gray-500 mb-2">运行时间</div>
|
||||
<div className="text-lg font-bold text-gray-200">
|
||||
{Math.floor(health.uptime_seconds / 3600)}h {Math.floor((health.uptime_seconds % 3600) / 60)}m
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 检查项 */}
|
||||
{health.checks && Object.keys(health.checks).length > 0 && (
|
||||
<div className="rounded-lg border border-gray-800 bg-gray-900 p-5">
|
||||
<div className="text-xs text-gray-500 mb-2">健康检查</div>
|
||||
<div className="space-y-1">
|
||||
{Object.entries(health.checks).map(([key, val]) => (
|
||||
<div key={key} className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-400 text-xs">{key}</span>
|
||||
<span className={`text-xs font-medium ${val === 'pass' ? 'text-emerald-400' : 'text-red-400'}`}>
|
||||
{String(val)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="rounded-lg border border-red-500/30 bg-red-500/10 p-6 text-center">
|
||||
<p className="text-red-400 text-lg font-medium">无法连接到后端</p>
|
||||
<p className="text-red-400/70 text-sm mt-1">请检查服务是否正常运行</p>
|
||||
<button
|
||||
onClick={() => window.location.reload()}
|
||||
className="mt-4 rounded-md bg-red-500/20 px-4 py-2 text-sm text-red-300 hover:bg-red-500/30 min-h-[44px]"
|
||||
>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
{error && (
|
||||
<Alert
|
||||
kind="error"
|
||||
title="无法连接到后端"
|
||||
message={`${error}\n请确认服务是否正常运行,以及管理员密钥是否需要配置。`}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{/* 存活状态 */}
|
||||
<div className="border border-ink-900 bg-paper-50 p-5">
|
||||
<div className="text-2xs tracking-[0.2em] text-ink-400">存活状态</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 ${alive ? 'bg-ink-900' : 'bg-press'}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span className={`font-serif text-xl font-bold ${alive ? 'text-ink-900' : 'text-press'}`}>
|
||||
{health ? (alive ? '正常' : String(health.status)) : '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 数据库就绪 */}
|
||||
<div className="border border-ink-900 bg-paper-50 p-5">
|
||||
<div className="text-2xs tracking-[0.2em] text-ink-400">数据库就绪</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<span
|
||||
className={`inline-block h-2 w-2 ${ready === 'ready' ? 'bg-ink-900' : ready === null ? 'bg-ink-300' : 'bg-press'}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
<span
|
||||
className={`font-serif text-xl font-bold ${ready === 'not_ready' ? 'text-press' : 'text-ink-900'}`}
|
||||
>
|
||||
{ready === 'ready' ? '就绪' : ready === 'not_ready' ? '未就绪' : '—'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 服务名 */}
|
||||
<div className="border border-ink-900 bg-paper-50 p-5">
|
||||
<div className="text-2xs tracking-[0.2em] text-ink-400">服务</div>
|
||||
<div className="mt-2 font-serif text-xl font-bold text-ink-900">
|
||||
{health?.service || 'profeto'}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 版本 */}
|
||||
{health?.version && (
|
||||
<div className="border border-ink-900 bg-paper-50 p-5">
|
||||
<div className="text-2xs tracking-[0.2em] text-ink-400">版本</div>
|
||||
<div className="mt-2 font-serif text-xl font-bold tabular-nums text-ink-900">
|
||||
{health.version}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 运行时间 */}
|
||||
{health?.uptime_seconds != null && (
|
||||
<div className="border border-ink-900 bg-paper-50 p-5">
|
||||
<div className="text-2xs tracking-[0.2em] text-ink-400">运行时间</div>
|
||||
<div className="mt-2 font-serif text-xl font-bold tabular-nums text-ink-900">
|
||||
{Math.floor(health.uptime_seconds / 3600)}h{' '}
|
||||
{Math.floor((health.uptime_seconds % 3600) / 60)}m
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 检查项 */}
|
||||
{health?.checks && Object.keys(health.checks).length > 0 && (
|
||||
<div className="border border-ink-900 bg-paper-50 p-5 sm:col-span-2 lg:col-span-1">
|
||||
<div className="text-2xs tracking-[0.2em] text-ink-400">健康检查</div>
|
||||
<div className="mt-2 space-y-1">
|
||||
{Object.entries(health.checks).map(([key, val]) => (
|
||||
<div key={key} className="flex items-center justify-between text-sm">
|
||||
<span className="text-2xs text-ink-500">{key}</span>
|
||||
<Badge status={String(val) === 'pass' ? 'success' : 'error'}>
|
||||
{String(val)}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,14 +1,36 @@
|
||||
/**
|
||||
* Admin 后台 - 预测管理页面
|
||||
* Admin 后台 - 预测管理页面(报刊风)
|
||||
*
|
||||
* 功能:
|
||||
* - 触发预测(选择比赛 + 模式)
|
||||
* - 结算:录入实际比分,写入评估(接 /eval/settle)
|
||||
* - 预测记录列表:可展开查看终裁理由与专家摘要
|
||||
*
|
||||
* 响应式布局: 移动端单列,桌面端双列
|
||||
* 触摸友好: 按钮最小 44px 高度
|
||||
*/
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { triggerPrediction, fetchPredictions, fetchMatches } from '../dal'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { triggerPrediction, fetchPredictions, fetchMatches, settlePrediction } from '../dal'
|
||||
import type { Match, Prediction } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader } from '../components'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner } from '../components'
|
||||
|
||||
const AGENT_LABELS: Record<string, string> = {
|
||||
h2h: '历史交锋',
|
||||
form: '近期状态',
|
||||
stats: '攻防数据',
|
||||
home_away: '主客因素',
|
||||
injuries: '阵容完整性',
|
||||
}
|
||||
|
||||
const OUTCOME_LABEL: Record<string, string> = { '1': '主胜', X: '平局', '2': '客胜' }
|
||||
|
||||
function fmtTime(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' })
|
||||
}
|
||||
|
||||
export default function PredictionsPage() {
|
||||
const [matches, setMatches] = useState<Match[]>([])
|
||||
@@ -19,11 +41,36 @@ export default function PredictionsPage() {
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [successMsg, setSuccessMsg] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchPredictions(20).then(setPredictions)
|
||||
fetchMatches({ status: 'scheduled', limit: 20 }).then(d => setMatches(d.items))
|
||||
// 结算表单
|
||||
const [settleId, setSettleId] = useState('')
|
||||
const [homeGoals, setHomeGoals] = useState('')
|
||||
const [awayGoals, setAwayGoals] = useState('')
|
||||
const [settling, setSettling] = useState(false)
|
||||
const [settleMsg, setSettleMsg] = useState<{ kind: 'error' | 'ok'; text: string } | null>(null)
|
||||
|
||||
const refreshPredictions = useCallback(async () => {
|
||||
const list = await fetchPredictions(50)
|
||||
setPredictions(list)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
refreshPredictions()
|
||||
fetchMatches({ limit: 100 }).then(d => setMatches(d.items))
|
||||
}, [refreshPredictions])
|
||||
|
||||
/** match_id → 中文名对阵 */
|
||||
const matchName = useMemo(() => {
|
||||
const map = new Map<number, string>()
|
||||
for (const m of matches) {
|
||||
const home = m.home_team_zh || m.home_team
|
||||
const away = m.away_team_zh || m.away_team
|
||||
map.set(m.id, `${home} vs ${away}`)
|
||||
}
|
||||
return map
|
||||
}, [matches])
|
||||
|
||||
const nameOf = (id: number) => matchName.get(id) ?? `比赛 #${id}`
|
||||
|
||||
async function handlePredict(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
if (!matchId) return
|
||||
@@ -32,8 +79,8 @@ export default function PredictionsPage() {
|
||||
setSuccessMsg(null)
|
||||
try {
|
||||
await triggerPrediction({ match_id: parseInt(matchId), mode })
|
||||
setSuccessMsg('预测任务已提交')
|
||||
fetchPredictions(20).then(setPredictions)
|
||||
setSuccessMsg('预测任务已完成,记录已更新')
|
||||
await refreshPredictions()
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : '预测失败')
|
||||
} finally {
|
||||
@@ -41,11 +88,40 @@ export default function PredictionsPage() {
|
||||
}
|
||||
}
|
||||
|
||||
const unsettled = predictions.filter(p => !p.settled)
|
||||
|
||||
async function handleSettle(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
const pid = parseInt(settleId)
|
||||
const hg = parseInt(homeGoals)
|
||||
const ag = parseInt(awayGoals)
|
||||
if (!pid || isNaN(hg) || isNaN(ag)) return
|
||||
setSettling(true)
|
||||
setSettleMsg(null)
|
||||
try {
|
||||
await settlePrediction(pid, hg, ag)
|
||||
setSettleMsg({ kind: 'ok', text: '结算完成,准确率统计已更新' })
|
||||
setSettleId('')
|
||||
setHomeGoals('')
|
||||
setAwayGoals('')
|
||||
await refreshPredictions()
|
||||
} catch (err: unknown) {
|
||||
setSettleMsg({
|
||||
kind: 'error',
|
||||
text: err instanceof Error ? err.message : '结算失败',
|
||||
})
|
||||
} finally {
|
||||
setSettling(false)
|
||||
}
|
||||
}
|
||||
|
||||
const settleTarget = predictions.find(p => p.id === parseInt(settleId))
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="预测管理"
|
||||
description="触发 LLM 足球预测"
|
||||
description="触发 LLM 预测;赛后录入实际比分完成结算,供准确率统计使用。"
|
||||
/>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
@@ -55,84 +131,221 @@ export default function PredictionsPage() {
|
||||
<CardBody>
|
||||
<form onSubmit={handlePredict} className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">比赛</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">比赛</label>
|
||||
<select
|
||||
value={matchId}
|
||||
onChange={e => setMatchId(e.target.value)}
|
||||
className="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
>
|
||||
<option value="">选择比赛</option>
|
||||
{matches.map(m => (
|
||||
<option key={m.id} value={m.id}>
|
||||
{m.home_team} vs {m.away_team} ({m.match_date?.slice(0, 10)})
|
||||
{(m.home_team_zh || m.home_team)} vs {(m.away_team_zh || m.away_team)}
|
||||
({m.match_date?.slice(5, 10)})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs font-medium text-gray-400">模式</label>
|
||||
<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="w-full rounded-md border border-gray-700 bg-gray-800 px-3 py-2.5 text-white min-h-[44px]"
|
||||
className="field w-full"
|
||||
>
|
||||
<option value="multi">多 Agent (5 专家 + 终裁)</option>
|
||||
<option value="single">单次调用</option>
|
||||
<option value="multi">多专家 (5 路 + 终裁,慢而稳)</option>
|
||||
<option value="single">单次调用 (快)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-red-500/10 p-3 text-sm text-red-400 border border-red-500/30">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{error && <Alert kind="error" title="预测失败" message={error} onClose={() => setError(null)} />}
|
||||
{successMsg && (
|
||||
<div className="rounded-md bg-emerald-500/10 p-3 text-sm text-emerald-400 border border-emerald-500/30">
|
||||
{successMsg}
|
||||
</div>
|
||||
<Alert kind="ok" title={successMsg} onClose={() => setSuccessMsg(null)} />
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !matchId}
|
||||
className="w-full rounded-md bg-blue-600 px-4 py-2.5 text-white hover:bg-blue-700 disabled:opacity-50 transition-colors min-h-[44px]"
|
||||
className="btn btn-solid w-full"
|
||||
>
|
||||
{loading ? '预测中...' : '触发预测'}
|
||||
{loading ? (<><Spinner /> 预测中,多专家模式约需 20-60 秒</>) : '触发预测'}
|
||||
</button>
|
||||
</form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 最近预测 */}
|
||||
{/* 结算 */}
|
||||
<Card>
|
||||
<CardHeader title="最近预测" />
|
||||
<CardHeader
|
||||
title="预测结算"
|
||||
description="录入实际比分,系统据此统计 1X2 准确率与比分 RMSE"
|
||||
/>
|
||||
<CardBody>
|
||||
{predictions.length === 0 ? (
|
||||
<div className="text-center py-8 text-sm text-gray-500">
|
||||
<p>暂无预测记录</p>
|
||||
<p className="mt-1 text-xs">触发预测后将在此显示</p>
|
||||
</div>
|
||||
{unsettled.length === 0 ? (
|
||||
<p className="py-6 text-center text-xs text-ink-400">
|
||||
没有待结算的预测记录。预测完成后可在此录入实际比分。
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{predictions.slice(0, 10).map(p => (
|
||||
<div
|
||||
key={p.id}
|
||||
className="flex flex-col sm:flex-row sm:items-center justify-between rounded-lg border border-gray-800 p-3 gap-2"
|
||||
<form onSubmit={handleSettle} className="space-y-4">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">预测记录</label>
|
||||
<select
|
||||
value={settleId}
|
||||
onChange={e => setSettleId(e.target.value)}
|
||||
className="field w-full"
|
||||
>
|
||||
<span className="text-sm text-gray-300">
|
||||
Match #{p.match_id} · {p.model}
|
||||
</span>
|
||||
<Badge status={p.settled ? 'success' : 'warning'}>
|
||||
{p.pred_1x2 || '?'} · {p.subjective_confidence ? `${(p.subjective_confidence * 100).toFixed(0)}%` : '—'}
|
||||
</Badge>
|
||||
<option value="">选择待结算预测({unsettled.length} 条)</option>
|
||||
{unsettled.map(p => (
|
||||
<option key={p.id} value={p.id}>
|
||||
#{p.id} {nameOf(p.match_id)} · 预测 {p.pred_home_goals ?? '-'}:{p.pred_away_goals ?? '-'}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{settleTarget && (
|
||||
<p className="border-l-2 border-ink-300 pl-3 text-2xs text-ink-500">
|
||||
预测:{settleTarget.pred_home_goals ?? '-'} : {settleTarget.pred_away_goals ?? '-'}
|
||||
({OUTCOME_LABEL[settleTarget.pred_1x2 ?? ''] ?? '?'})
|
||||
<span className="ml-2">{fmtTime(settleTarget.created_at)}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<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={0}
|
||||
max={30}
|
||||
value={homeGoals}
|
||||
onChange={e => setHomeGoals(e.target.value)}
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">客队实际进球</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0}
|
||||
max={30}
|
||||
value={awayGoals}
|
||||
onChange={e => setAwayGoals(e.target.value)}
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{settleMsg && (
|
||||
<Alert
|
||||
kind={settleMsg.kind}
|
||||
title={settleMsg.kind === 'ok' ? '结算完成' : '结算失败'}
|
||||
message={settleMsg.kind === 'error' ? settleMsg.text : undefined}
|
||||
onClose={() => setSettleMsg(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={settling || !settleId || homeGoals === '' || awayGoals === ''}
|
||||
className="btn btn-solid w-full"
|
||||
>
|
||||
{settling ? (<><Spinner /> 结算中</>) : '提交结算'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 最近预测 */}
|
||||
<Card>
|
||||
<CardHeader title="预测记录" description="点击行可展开终裁理由与专家摘要" />
|
||||
<CardBody className="px-0 sm:px-0">
|
||||
{predictions.length === 0 ? (
|
||||
<p className="py-10 text-center text-xs text-ink-400">
|
||||
暂无预测记录,触发预测后将在此显示
|
||||
</p>
|
||||
) : (
|
||||
<div>
|
||||
{predictions.map(p => {
|
||||
const okAgents = (p.agent_outputs ?? []).filter(a => a.status === 'ok')
|
||||
return (
|
||||
<details key={p.id} className="group border-b border-ink-200 last:border-b-0">
|
||||
<summary className="flex cursor-pointer list-none flex-wrap items-baseline gap-x-3 gap-y-1 px-4 py-3 transition-colors hover:bg-paper-100 sm:px-5">
|
||||
<span className="text-2xs tabular-nums text-ink-400">#{p.id}</span>
|
||||
<span className="text-sm font-medium text-ink-900">{nameOf(p.match_id)}</span>
|
||||
<span className="font-serif text-sm font-bold tabular-nums text-ink-900">
|
||||
{p.pred_home_goals ?? '-'}<span className="mx-0.5 font-normal text-ink-300">:</span>{p.pred_away_goals ?? '-'}
|
||||
</span>
|
||||
<span className="text-2xs text-ink-500">
|
||||
{OUTCOME_LABEL[p.pred_1x2 ?? ''] ?? '—'}
|
||||
{p.subjective_confidence !== null && p.subjective_confidence !== undefined &&
|
||||
` · ${Math.round(p.subjective_confidence * 100)}%`}
|
||||
</span>
|
||||
<span className="ml-auto flex items-baseline gap-3">
|
||||
{p.settled ? (
|
||||
<Badge status="success">已结算</Badge>
|
||||
) : (
|
||||
<Badge status="pending">未结算</Badge>
|
||||
)}
|
||||
<span className="text-2xs tabular-nums text-ink-400">{fmtTime(p.created_at)}</span>
|
||||
<svg
|
||||
viewBox="0 0 20 20"
|
||||
className="h-3 w-3 self-center text-ink-300 transition-transform group-open:rotate-90"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M7.3 5.3a1 1 0 011.4 0l4 4a1 1 0 010 1.4l-4 4a1 1 0 01-1.4-1.4L10.6 10 7.3 6.7a1 1 0 010-1.4z" />
|
||||
</svg>
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div className="space-y-3 px-4 pb-4 pl-8 sm:px-6 sm:pl-9">
|
||||
<p className="text-2xs text-ink-500">
|
||||
{p.mode === 'multi' ? `多专家 · ${okAgents.length}/${p.agent_outputs?.length ?? 0} 路有效` : '单次模式'}
|
||||
{p.model && <span className="ml-2 font-mono">{p.model}</span>}
|
||||
</p>
|
||||
|
||||
{p.reasoning && (
|
||||
<blockquote className="border-l-2 border-press pl-4">
|
||||
<p className="whitespace-pre-wrap font-serif text-sm leading-loose text-ink-700">
|
||||
{p.reasoning}
|
||||
</p>
|
||||
</blockquote>
|
||||
)}
|
||||
|
||||
{p.agent_outputs && p.agent_outputs.length > 0 && (
|
||||
<ul className="space-y-1">
|
||||
{p.agent_outputs.map((a, i) => (
|
||||
<li key={i} className="flex items-baseline gap-2.5 text-xs">
|
||||
<span className={`inline-block h-1.5 w-1.5 flex-shrink-0 self-center ${a.status === 'ok' ? 'bg-ink-900' : 'bg-ink-300'}`} aria-hidden="true" />
|
||||
<span className="text-ink-800">{AGENT_LABELS[a.agent] ?? a.agent}</span>
|
||||
{a.probable_score && (
|
||||
<span className="font-serif font-bold tabular-nums text-ink-800">{a.probable_score}</span>
|
||||
)}
|
||||
<span className="text-2xs text-ink-400">
|
||||
{a.status === 'ok' ? '' : a.status === 'no_data' ? '无数据' : '失败'}
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{p.settled && (
|
||||
<p className="border-t border-ink-100 pt-2.5 text-2xs text-ink-500">
|
||||
实际比分 {p.actual_home_goals ?? '-'} : {p.actual_away_goals ?? '-'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user