refactor: 以 bzzoiro 为唯一数据源的全面重构
数据源统一为 bzzoiro,移除 Understat 与 injuries:
- 删除 src/data/understat.py / injuries.py 及相关测试
- 删除 injuries 模型与表;扩展 match_stats(xG 之外增加 big_chances/fouls)
- 新增 standings 表(联赛积分榜:位置/积分/xG/走势/分区)
- matches 表增加 source_event_id 血缘列,支撑统计回填
采集管线(bzzoiro 三条管线):
- events:赛程/比分(/events/),记录 source_event_id
- standings:积分榜快照(/leagues/{id}/standings/)
- stats:已完赛比赛详细统计回填(/events/{id}/stats/)
预测增强:
- standings_slice 替代 injuries_slice;积分榜专家替代阵容完整性专家
- AGENT_META runtime_config 同步更新
管理后台:
- ingest 路由重写为单一 bzzoiro 入口 + task 参数(events/standings/stats/all)
- 新增 /admin/data-completeness 数据完整性分析 API
- 数据源状态页简化为 bzzoiro 单源
前端:
- 采集页重构为任务驱动(比赛/积分榜/统计回填/全量)
- 新增「数据完整性」可视化页(覆盖率矩阵/字段完整率/健康摘要)
- 新增主站积分榜页(/standings)与比赛详情完整统计面板
- agent 名称同步更新(injuries→standings)
迁移 0015_bzzoiro_single_source 已在容器内验证通过,后端测试全部通过。
Co-Authored-By: new-provider/LongCat-2.0 <<EMAIL>>
This commit is contained in:
co-authored by
new-provider/LongCat-2.0 <
parent
ec8f36abb2
commit
f05dc1ae15
@@ -14,6 +14,7 @@
|
||||
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
|
||||
import { ErrorBoundary } from './components/ErrorBoundary'
|
||||
import Matches from './pages/Matches'
|
||||
import Standings from './pages/Standings'
|
||||
import { adminRoutes } from './admin/routes'
|
||||
|
||||
/** 报眉日期行 */
|
||||
@@ -26,6 +27,52 @@ function dateLine(): string {
|
||||
})
|
||||
}
|
||||
|
||||
function StandingsLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-paper-50">
|
||||
<header className="masthead-rule">
|
||||
<div className="mx-auto max-w-5xl px-5 sm:px-8">
|
||||
<div className="border-b border-ink-900 py-5 text-center sm:py-6">
|
||||
<h1 className="font-serif text-4xl font-bold tracking-widest text-ink-900">
|
||||
先知
|
||||
<span className="ml-3 align-baseline font-serif text-base font-normal italic tracking-normal text-ink-500">
|
||||
Profeto
|
||||
</span>
|
||||
</h1>
|
||||
<p className="mt-2 text-2xs tracking-[0.4em] text-ink-500">
|
||||
联赛积分榜 · 积分 / 净胜 / xG差 / 近期走势
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b border-ink-200 py-2 text-2xs text-ink-500">
|
||||
<span>{dateLine()}</span>
|
||||
<nav className="flex items-center gap-4" aria-label="页面导航">
|
||||
<a href="/" className="text-ink-500 hover:text-press transition-colors">
|
||||
比赛 / 预测
|
||||
</a>
|
||||
<a href="/admin/eval" className="text-ink-500 hover:text-press transition-colors">
|
||||
评估
|
||||
</a>
|
||||
<a href="/admin" className="flex items-center gap-1 text-ink-500 hover:text-press transition-colors">
|
||||
<span aria-hidden="true">⚙</span> 管理
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="mx-auto max-w-5xl px-5 py-6 sm:px-8 sm:py-8">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<footer className="mx-auto max-w-5xl px-5 pb-10 sm:px-8">
|
||||
<div className="border-t border-ink-200 pt-3 text-center text-2xs leading-relaxed text-ink-400">
|
||||
数据由 bzzoiro 提供 · 仅供研究参考
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-paper-50">
|
||||
@@ -46,6 +93,9 @@ function HomePage() {
|
||||
<div className="flex items-center justify-between border-b border-ink-200 py-2 text-2xs text-ink-500">
|
||||
<span>{dateLine()}</span>
|
||||
<nav className="flex items-center gap-4" aria-label="页面导航">
|
||||
<a href="/standings" className="text-ink-500 hover:text-press transition-colors">
|
||||
积分榜
|
||||
</a>
|
||||
<a href="/admin/eval" className="text-ink-500 hover:text-press transition-colors">
|
||||
评估
|
||||
</a>
|
||||
@@ -76,6 +126,7 @@ export default function App() {
|
||||
<BrowserRouter>
|
||||
<Routes>
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/standings" element={<StandingsLayout><Standings /></StandingsLayout>} />
|
||||
{adminRoutes.map(route => (
|
||||
<Route key={route.path} path={route.path} element={route.element}>
|
||||
{route.children.map(child => (
|
||||
|
||||
@@ -16,6 +16,7 @@ const NAV_SECTIONS: { title: string; items: { to: string; label: string; icon: s
|
||||
title: '数据流水线',
|
||||
items: [
|
||||
{ to: '/admin/collection', label: '数据采集', icon: '◈' },
|
||||
{ to: '/admin/data-completeness', label: '数据完整性', icon: '◫' },
|
||||
{ to: '/admin/predictions', label: '预测管理', icon: '◆' },
|
||||
{ to: '/admin/backtest', label: '回测', icon: '◉' },
|
||||
],
|
||||
|
||||
@@ -166,12 +166,12 @@ export function DataTable<T = any>({
|
||||
|
||||
// ── 进度条:同前台置信度细线 ────────────────────────────────────
|
||||
|
||||
export function ProgressBar({ value }: { value: number }) {
|
||||
export function ProgressBar({ value, className = '' }: { value: number; className?: string }) {
|
||||
const clamped = Math.max(0, Math.min(100, value))
|
||||
return (
|
||||
<div className="h-px w-full bg-ink-200" role="progressbar" aria-valuenow={clamped}>
|
||||
<div className={`h-2 w-full overflow-hidden rounded-full bg-ink-200 ${className}`} role="progressbar" aria-valuenow={clamped}>
|
||||
<div
|
||||
className="h-px bg-press transition-[width] duration-500"
|
||||
className="h-full rounded-full bg-press transition-[width] duration-500"
|
||||
style={{ width: `${clamped}%` }}
|
||||
/>
|
||||
</div>
|
||||
@@ -253,14 +253,19 @@ export function ResponsiveTable<T = any>({
|
||||
export function SectionHeader({
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
}: {
|
||||
title: string
|
||||
description?: string
|
||||
action?: ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="mb-5">
|
||||
<h2 className="section-head text-base">{title}</h2>
|
||||
{description && <p className="mt-1.5 text-xs text-ink-500">{description}</p>}
|
||||
<div className="mb-5 flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<h2 className="section-head text-base">{title}</h2>
|
||||
{description && <p className="mt-1.5 text-xs text-ink-500">{description}</p>}
|
||||
</div>
|
||||
{action}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
+68
-26
@@ -61,33 +61,16 @@ export async function fetchDashboard(): Promise<DashboardStats> {
|
||||
// ── 数据采集 ────────────────────────────────────────────────────
|
||||
|
||||
export async function triggerCollection(req: CollectionRequest): Promise<any> {
|
||||
const sourceMap: Record<string, { path: string; body: any }> = {
|
||||
bzzoiro: {
|
||||
path: `${API_BASE}/ingest/bzzoiro`,
|
||||
body: {
|
||||
leagues: req.leagues,
|
||||
date_from: req.date_from,
|
||||
date_to: req.date_to,
|
||||
status: req.status || undefined, // 空 = 已完赛 + 未开赛都采集
|
||||
},
|
||||
},
|
||||
understat: {
|
||||
path: `${API_BASE}/ingest/understat`,
|
||||
body: {
|
||||
league: req.league,
|
||||
season: req.season ? parseInt(req.season) : new Date().getFullYear(),
|
||||
},
|
||||
},
|
||||
injuries: {
|
||||
path: `${API_BASE}/ingest/injuries`,
|
||||
body: {
|
||||
date: req.date_from || new Date().toLocaleDateString('sv-SE'),
|
||||
},
|
||||
},
|
||||
const body: Record<string, any> = {
|
||||
leagues: req.leagues,
|
||||
date_from: req.date_from,
|
||||
date_to: req.date_to,
|
||||
status: req.status || undefined,
|
||||
task: req.task || 'events',
|
||||
limit: req.limit || 100,
|
||||
season: req.season || undefined,
|
||||
}
|
||||
const cfg = sourceMap[req.source]
|
||||
if (!cfg) throw new Error(`未知数据源: ${req.source}`)
|
||||
return api.post(cfg.path, cfg.body)
|
||||
return api.post(`${API_BASE}/ingest/bzzoiro`, body)
|
||||
}
|
||||
|
||||
// ── 预测管理 ────────────────────────────────────────────────────
|
||||
@@ -183,6 +166,65 @@ export async function fetchHealth(): Promise<any> {
|
||||
}
|
||||
}
|
||||
|
||||
// ── 数据完整性 ──────────────────────────────────────────────────
|
||||
|
||||
export interface DataCompletenessResponse {
|
||||
generated_at: string
|
||||
totals: { finished_matches: number; stats_rows: number; stats_coverage_pct: number }
|
||||
issues: string[]
|
||||
leagues: Array<{
|
||||
code: string
|
||||
name: string
|
||||
country?: string
|
||||
matches: { total: number; finished: number; scheduled: number; with_source_id: number; earliest_match?: string; latest_match?: string }
|
||||
stats: {
|
||||
rows: number
|
||||
fields: Record<string, { count: number; pct: number }>
|
||||
}
|
||||
standings: { rows: number; latest_retrieved?: string }
|
||||
}>
|
||||
}
|
||||
|
||||
export async function fetchDataCompleteness(): Promise<DataCompletenessResponse> {
|
||||
return api.get<DataCompletenessResponse>(`${API_BASE}/admin/data-completeness`)
|
||||
}
|
||||
|
||||
// ── 积分榜(主站 + 管理后台共用) ─────────────────────────────────
|
||||
|
||||
export interface StandingRow {
|
||||
position: number
|
||||
team: string
|
||||
team_en: string
|
||||
played: number
|
||||
won: number
|
||||
drawn: number
|
||||
lost: number
|
||||
goals_for: number
|
||||
goals_against: number
|
||||
goal_diff: number
|
||||
points: number
|
||||
xg_for: number | null
|
||||
xg_against: number | null
|
||||
form: string | null
|
||||
zone: string | null
|
||||
}
|
||||
|
||||
export interface StandingsLeague {
|
||||
league_code: string
|
||||
league_name: string
|
||||
season: string
|
||||
retrieved_at: string | null
|
||||
rows: StandingRow[]
|
||||
}
|
||||
|
||||
export async function fetchStandings(league?: string, season?: string): Promise<{ leagues: StandingsLeague[] }> {
|
||||
const sp = new URLSearchParams()
|
||||
if (league) sp.set('league', league)
|
||||
if (season) sp.set('season', season)
|
||||
const qs = sp.toString()
|
||||
return api.get<{ leagues: StandingsLeague[] }>(`${API_BASE}/standings${qs ? `?${qs}` : ''}`)
|
||||
}
|
||||
|
||||
// ── 数据源管理 ──────────────────────────────────────────────────
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
/**
|
||||
* Admin 后台 - 数据采集页面(报刊风)
|
||||
* Admin 后台 - 数据采集页面(bzzoiro 单一数据源)
|
||||
*
|
||||
* 三个采集任务:
|
||||
* events — 比赛日程与比分
|
||||
* standings — 联赛积分榜
|
||||
* stats — 已完赛比赛详细统计回填(xG/射门/控球等)
|
||||
* all — 依次执行以上三项
|
||||
*
|
||||
* 响应式布局: 移动端单列,桌面端双列
|
||||
*/
|
||||
@@ -9,45 +15,22 @@ import { triggerCollection, fetchLeagues } from '../dal'
|
||||
import type { CollectionRequest, League } from '../types'
|
||||
import { Card, CardBody, CardHeader, Badge, SectionHeader, Alert, Spinner } from '../components'
|
||||
|
||||
const SOURCES = [
|
||||
{ value: 'bzzoiro', label: 'Bzzoiro', desc: '历史赛程与比分' },
|
||||
{ value: 'understat', label: 'Understat', desc: 'xG 进阶数据' },
|
||||
{ value: 'injuries', label: 'Injuries', desc: '球员伤停' },
|
||||
const TASKS = [
|
||||
{ value: 'events', label: '比赛数据', desc: '赛程 / 比分 / 未开赛安排', icon: '⚽' },
|
||||
{ value: 'standings', label: '积分榜', desc: '联赛排名 / 积分 / xG差 / 近期走势', icon: '🏆' },
|
||||
{ value: 'stats', label: '统计回填', desc: '已完赛比赛的 xG / 射门 / 控球等详细统计', icon: '📊' },
|
||||
{ value: 'all', label: '全量采集', desc: '依次采集比赛 + 积分榜 + 统计回填', icon: '⏵⏵' },
|
||||
] 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')
|
||||
const [task, setTask] = useState<string>('events')
|
||||
const [leagueCode, setLeagueCode] = useState('')
|
||||
const [dateFrom, setDateFrom] = useState('')
|
||||
const [dateTo, setDateTo] = useState('')
|
||||
const [season, setSeason] = useState('')
|
||||
const [ingestStatus, setIngestStatus] = useState('') // 空 = 已完赛+未开赛
|
||||
const [limit, setLimit] = useState(100)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [result, setResult] = useState<{ title: string; detail: string } | null>(null)
|
||||
@@ -59,6 +42,8 @@ export default function CollectionPage() {
|
||||
|
||||
useEffect(() => { loadLeagues() }, [loadLeagues])
|
||||
|
||||
const isEventsTask = task === 'events' || task === 'all'
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault()
|
||||
setError(null)
|
||||
@@ -67,18 +52,20 @@ export default function CollectionPage() {
|
||||
|
||||
try {
|
||||
const body: CollectionRequest = {
|
||||
source: source as CollectionRequest['source'],
|
||||
source: 'bzzoiro',
|
||||
leagues: leagueCode ? [leagueCode] : undefined,
|
||||
league: leagueCode || undefined,
|
||||
task: task as CollectionRequest['task'],
|
||||
limit,
|
||||
season: season || undefined,
|
||||
status: ingestStatus || undefined,
|
||||
date_from: dateFrom || undefined,
|
||||
date_to: dateTo || undefined,
|
||||
// 仅 events/all 任务生效
|
||||
date_from: isEventsTask ? dateFrom || undefined : undefined,
|
||||
date_to: isEventsTask ? dateTo || undefined : undefined,
|
||||
}
|
||||
await triggerCollection(body)
|
||||
setResult({
|
||||
title: '采集任务已启动',
|
||||
detail: '正在后台执行(上游限速时可能需要几分钟)。完成结果与错误请到「系统日志」页查看(支持自动刷新)。',
|
||||
detail: '正在后台执行(上游限速时可能需要数分钟)。完成结果与错误请到「系统日志」页查看(支持自动刷新)。',
|
||||
})
|
||||
} catch (err: unknown) {
|
||||
setError(err instanceof Error ? err.message : '采集触发失败')
|
||||
@@ -91,7 +78,7 @@ export default function CollectionPage() {
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="数据采集"
|
||||
description="触发数据源采集,支持联赛筛选和日期范围。采集为同步执行,大范围日期耗时较长。"
|
||||
description="bzzoiro 单一数据源:比赛数据、积分榜、比赛统计三条管线。采集为后台异步执行。"
|
||||
/>
|
||||
|
||||
<div className="grid gap-6 lg:grid-cols-2">
|
||||
@@ -100,20 +87,26 @@ export default function CollectionPage() {
|
||||
<CardHeader title="新建采集任务" />
|
||||
<CardBody>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
{/* 数据源选择 */}
|
||||
{/* 任务类型 */}
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">数据源</label>
|
||||
<select
|
||||
value={source}
|
||||
onChange={e => setSource(e.target.value)}
|
||||
className="field w-full"
|
||||
>
|
||||
{SOURCES.map(s => (
|
||||
<option key={s.value} value={s.value}>
|
||||
{s.label} — {s.desc}
|
||||
</option>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">采集任务</label>
|
||||
<div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
|
||||
{TASKS.map(t => (
|
||||
<button
|
||||
key={t.value}
|
||||
type="button"
|
||||
onClick={() => setTask(t.value)}
|
||||
className={`rounded-lg border px-3 py-2 text-left text-xs transition-colors ${
|
||||
task === t.value
|
||||
? 'border-brand-500 bg-brand-50 text-brand-700'
|
||||
: 'border-ink-200 text-ink-600 hover:border-ink-300'
|
||||
}`}
|
||||
>
|
||||
<span className="mr-1">{t.icon}</span>
|
||||
<span className="font-medium">{t.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 联赛选择 */}
|
||||
@@ -131,57 +124,73 @@ export default function CollectionPage() {
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Bzzoiro 专用: 比赛状态 */}
|
||||
{source === 'bzzoiro' && (
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">比赛状态</label>
|
||||
<select
|
||||
value={ingestStatus}
|
||||
onChange={e => setIngestStatus(e.target.value)}
|
||||
className="field w-full"
|
||||
>
|
||||
<option value="">全部(已完赛 + 未开赛)</option>
|
||||
<option value="finished">仅已完赛</option>
|
||||
<option value="scheduled">仅未开赛</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* events/all 任务专用: 比赛状态 + 日期 */}
|
||||
{isEventsTask && (
|
||||
<>
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">比赛状态</label>
|
||||
<select
|
||||
value={ingestStatus}
|
||||
onChange={e => setIngestStatus(e.target.value)}
|
||||
className="field w-full"
|
||||
>
|
||||
<option value="">全部(已完赛 + 未开赛)</option>
|
||||
<option value="finished">仅已完赛</option>
|
||||
<option value="scheduled">仅未开赛</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">起始日期</label>
|
||||
<input
|
||||
type="date"
|
||||
value={dateFrom}
|
||||
onChange={e => setDateFrom(e.target.value)}
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">结束日期</label>
|
||||
<input
|
||||
type="date"
|
||||
value={dateTo}
|
||||
onChange={e => setDateTo(e.target.value)}
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Understat 专用: 赛季 */}
|
||||
{source === 'understat' && (
|
||||
{/* standings 任务专用: 赛季 */}
|
||||
{(task === 'standings') && (
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">赛季(起始年)</label>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">赛季(留空取当前赛季)</label>
|
||||
<input
|
||||
type="number"
|
||||
type="text"
|
||||
value={season}
|
||||
onChange={e => setSeason(e.target.value)}
|
||||
placeholder="2025"
|
||||
placeholder="如 2026-2027"
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 日期范围 */}
|
||||
{source !== 'injuries' && (
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">起始日期</label>
|
||||
<input
|
||||
type="date"
|
||||
value={dateFrom}
|
||||
onChange={e => setDateFrom(e.target.value)}
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">结束日期</label>
|
||||
<input
|
||||
type="date"
|
||||
value={dateTo}
|
||||
onChange={e => setDateTo(e.target.value)}
|
||||
className="field w-full"
|
||||
/>
|
||||
</div>
|
||||
{/* stats 任务专用: 回填数量 */}
|
||||
{(task === 'stats') && (
|
||||
<div>
|
||||
<label className="mb-1.5 block text-xs text-ink-500">单次最大回填比赛数(1-500)</label>
|
||||
<input
|
||||
type="number"
|
||||
min={1}
|
||||
max={500}
|
||||
value={limit}
|
||||
onChange={e => setLimit(parseInt(e.target.value) || 100)}
|
||||
className="field w-full"
|
||||
/>
|
||||
<p className="mt-1 text-2xs text-ink-400">
|
||||
仅回填已有 source_event_id 且无统计的比赛(增量),上游限速约 1.2 秒/次。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -206,22 +215,24 @@ export default function CollectionPage() {
|
||||
|
||||
{/* 数据源说明 */}
|
||||
<Card>
|
||||
<CardHeader title="数据源说明" />
|
||||
<CardHeader title="采集任务说明" />
|
||||
<CardBody>
|
||||
<div className="space-y-3">
|
||||
{SOURCES.map(s => (
|
||||
<div key={s.value} className="border-b border-ink-200 px-1 py-3 last:border-b-0">
|
||||
{TASKS.map(t => (
|
||||
<div key={t.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>
|
||||
<span>{t.icon}</span>
|
||||
<Badge status="info">{t.label}</Badge>
|
||||
<p className="text-xs text-ink-600">{t.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<p className="mt-4 border-l-2 border-ink-300 pl-3 text-2xs leading-relaxed text-ink-500">
|
||||
采集接口需要管理员登录。
|
||||
遇到 401 表示登录已过期,请重新登录。
|
||||
采集接口需要管理员登录(401 表示登录已过期)。
|
||||
各管线基于 bzzoiro 单一数据源(Understat / injuries 已移除)。
|
||||
「统计回填」依赖「比赛数据」管线写入的 source_event_id,请先完成比赛采集。
|
||||
</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
@@ -14,7 +14,7 @@ import { Card, CardBody, CardHeader, Alert, SkeletonBlock } from '../components'
|
||||
|
||||
/** 工作流步骤卡片 */
|
||||
const STEPS = [
|
||||
{ to: '/admin/collection', step: '1', title: '采集数据', desc: '从 bzzoiro / understat 获取赛程与 xG', icon: '◈' },
|
||||
{ to: '/admin/collection', step: '1', title: '采集数据', desc: 'bzzoiro: 赛程 / 积分榜 / 比赛统计(xG、射门、控球等)', icon: '◈' },
|
||||
{ to: '/admin/predictions', step: '2', title: '运行预测', desc: '调 LLM 多专家生成比分预测', icon: '◆' },
|
||||
{ to: '/admin/eval', step: '3', title: '评估准确率', desc: '结算后查看 1X2 命中率与校准度', icon: '◈' },
|
||||
]
|
||||
@@ -42,8 +42,6 @@ export default function Dashboard() {
|
||||
|
||||
const sourceByName = Object.fromEntries(ingest.map(s => [s.name, s]))
|
||||
const bzzoiro = sourceByName['bzzoiro']
|
||||
const understat = sourceByName['understat']
|
||||
const injuries = sourceByName['injuries']
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -83,8 +81,6 @@ export default function Dashboard() {
|
||||
<div>
|
||||
{[
|
||||
{ name: 'bzzoiro', label: 'Bzzoiro', st: bzzoiro },
|
||||
{ name: 'understat', label: 'Understat (xG)', st: understat },
|
||||
{ name: 'injuries', label: 'Injuries (伤停)', st: injuries },
|
||||
].map(({ name, label, st }) => {
|
||||
const hasData = st && st.recent_count > 0
|
||||
const keyOk = st?.key_configured !== false
|
||||
|
||||
@@ -0,0 +1,183 @@
|
||||
/**
|
||||
* Admin 后台 - 数据完整性分析页
|
||||
*
|
||||
* 回答三个问题:
|
||||
* 1. 数据是否齐全(各联赛比赛/统计/积分榜量级)
|
||||
* 2. 字段是否齐全(每张统计表各字段非空率)
|
||||
* 3. 覆盖是否新鲜(最近一场/最近一次采集)
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { fetchDataCompleteness } from '../dal'
|
||||
import type { DataCompletenessResponse } from '../dal'
|
||||
import {
|
||||
Card, CardBody, CardHeader, SectionHeader, Alert,
|
||||
ProgressBar, Spinner, EmptyState,
|
||||
} from '../components'
|
||||
|
||||
const FIELD_LABELS: Record<string, string> = {
|
||||
xg: 'xG 预期进球',
|
||||
shots: '射门',
|
||||
possession: '控球率',
|
||||
corners: '角球',
|
||||
fouls: '犯规',
|
||||
big_chances: '绝佳机会',
|
||||
cards: '红黄牌',
|
||||
}
|
||||
|
||||
function pctColor(pct: number): string {
|
||||
if (pct >= 80) return 'bg-emerald-500'
|
||||
if (pct >= 50) return 'bg-amber-500'
|
||||
return 'bg-rose-500'
|
||||
}
|
||||
|
||||
export default function DataCompletenessPage() {
|
||||
const [data, setData] = useState<DataCompletenessResponse | null>(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const load = useCallback(async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const d = await fetchDataCompleteness()
|
||||
setData(d)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { load() }, [load])
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<SectionHeader
|
||||
title="数据完整性"
|
||||
description="按联赛统计 bzzoiro 数据采集覆盖度。每 5 秒自动刷新,或点击右上角按钮手动刷新。"
|
||||
action={
|
||||
<button onClick={load} disabled={loading} className="btn-sm btn-outline">
|
||||
{loading ? <><Spinner /> 刷新中</> : '刷新'}
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
{error && <Alert kind="error" title="加载失败" message={error} onClose={() => setError(null)} />}
|
||||
|
||||
{loading && !data && (
|
||||
<div className="flex justify-center py-12"><Spinner /></div>
|
||||
)}
|
||||
|
||||
{data && (
|
||||
<>
|
||||
{/* 全局概览 */}
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
<Card>
|
||||
<CardBody className="text-center">
|
||||
<p className="text-2xl font-bold text-ink-900">{data.totals.finished_matches}</p>
|
||||
<p className="text-xs text-ink-500">已完赛比赛(总计)</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardBody className="text-center">
|
||||
<p className="text-2xl font-bold text-ink-900">{data.totals.stats_rows}</p>
|
||||
<p className="text-xs text-ink-500">统计行数</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardBody className="text-center">
|
||||
<p className="text-2xl font-bold text-ink-900">
|
||||
{data.totals.stats_coverage_pct}%
|
||||
</p>
|
||||
<p className="text-xs text-ink-500">统计覆盖率(有统计 / 已完赛)</p>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* 健康问题 */}
|
||||
<Card>
|
||||
<CardHeader title="健康摘要" />
|
||||
<CardBody>
|
||||
<div className="space-y-2">
|
||||
{data.issues.map((issue, i) => (
|
||||
<Alert
|
||||
key={i}
|
||||
kind={issue.includes('良好') ? 'ok' : issue.includes('建议') || issue.includes('仅') ? 'warning' : 'error'}
|
||||
title={issue.includes('良好') ? '数据良好' : '需要关注'}
|
||||
message={issue}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
||||
{/* 各联赛详情 */}
|
||||
<div className="space-y-4">
|
||||
{data.leagues.map(league => {
|
||||
const finished = league.matches.finished
|
||||
const statsPct = finished > 0 ? Math.round((league.stats.rows / finished) * 100) : 0
|
||||
return (
|
||||
<Card key={league.code}>
|
||||
<CardHeader
|
||||
title={league.name}
|
||||
description={[
|
||||
league.country,
|
||||
`已完赛 ${finished} 场 / 未开赛 ${league.matches.scheduled} 场`,
|
||||
league.matches.latest_match ? `最近: ${league.matches.latest_match.slice(0, 10)}` : '',
|
||||
league.standings.rows > 0 ? `积分榜 ${league.standings.rows} 队` : '',
|
||||
].filter(Boolean).join(' · ')}
|
||||
/>
|
||||
<CardBody className="space-y-4">
|
||||
{/* 统计覆盖率进度条 */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between text-xs">
|
||||
<span className="text-ink-600">统计回填覆盖率</span>
|
||||
<span className="font-medium text-ink-900">
|
||||
{league.stats.rows} / {finished} ({statsPct}%)
|
||||
</span>
|
||||
</div>
|
||||
<ProgressBar value={statsPct} />
|
||||
</div>
|
||||
|
||||
{/* 字段覆盖率矩阵 */}
|
||||
{league.stats.rows > 0 ? (
|
||||
<div>
|
||||
<p className="mb-2 text-xs font-medium text-ink-600">字段覆盖率(有值行数 / 总行数)</p>
|
||||
<div className="grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{Object.entries(league.stats.fields).map(([key, info]) => (
|
||||
<div key={key} className="rounded border border-ink-100 px-3 py-2">
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-xs text-ink-600">{FIELD_LABELS[key] ?? key}</span>
|
||||
<span className="text-xs font-medium text-ink-900">{info.pct}%</span>
|
||||
</div>
|
||||
<div className="h-1.5 w-full overflow-hidden rounded-full bg-ink-100">
|
||||
<div
|
||||
className={`h-full rounded-full ${pctColor(info.pct)}`}
|
||||
style={{ width: `${info.pct}%` }}
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-0.5 text-2xs text-ink-400">{info.count} / {league.stats.rows} 行</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : finished > 0 ? (
|
||||
<Alert kind="warning" title="缺少统计数据" message="该联赛有已完赛比赛但无统计行,请运行「统计回填」采集。" />
|
||||
) : (
|
||||
<Alert kind="warning" title="缺少比赛数据" message="该联赛暂无已完赛比赛,请运行「比赛数据」采集。" />
|
||||
)}
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<p className="text-center text-2xs text-ink-400">
|
||||
生成时间: {new Date(data.generated_at).toLocaleString('zh-CN', { hour12: false })}
|
||||
</p>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -20,7 +20,7 @@ const AGENT_LABELS: Record<string, string> = {
|
||||
form: '近期状态分析专家',
|
||||
stats: '攻防数据分析专家',
|
||||
home_away: '主客因素分析专家',
|
||||
injuries: '阵容完整性分析专家',
|
||||
standings: '联赛排名分析专家',
|
||||
}
|
||||
|
||||
const OUTCOME_LABEL: Record<string, string> = { '1': '主胜', X: '平局', '2': '客胜' }
|
||||
|
||||
@@ -9,6 +9,7 @@ import { Navigate } from 'react-router-dom'
|
||||
import AdminLayout from './AdminLayout'
|
||||
import Dashboard from './pages/Dashboard'
|
||||
import CollectionPage from './pages/Collection'
|
||||
import DataCompletenessPage from './pages/DataCompleteness'
|
||||
import PredictionsPage from './pages/Predictions'
|
||||
import BacktestPage from './pages/Backtest'
|
||||
import MonitoringPage from './pages/Monitoring'
|
||||
@@ -25,6 +26,7 @@ export const adminRoutes = [
|
||||
children: [
|
||||
{ index: true, element: <Dashboard /> },
|
||||
{ path: 'collection', element: <CollectionPage /> },
|
||||
{ path: 'data-completeness', element: <DataCompletenessPage /> },
|
||||
{ path: 'predictions', element: <PredictionsPage /> },
|
||||
{ path: 'backtest', element: <BacktestPage /> },
|
||||
{ path: 'monitoring', element: <MonitoringPage /> },
|
||||
|
||||
@@ -91,9 +91,10 @@ export interface PredictRequest {
|
||||
|
||||
export interface CollectionRequest {
|
||||
status?: string
|
||||
source: 'bzzoiro' | 'understat' | 'injuries'
|
||||
source: 'bzzoiro'
|
||||
leagues?: string[]
|
||||
league?: string
|
||||
task?: 'events' | 'standings' | 'stats' | 'all'
|
||||
limit?: number
|
||||
season?: string
|
||||
date_from?: string
|
||||
date_to?: string
|
||||
@@ -318,9 +319,31 @@ export interface MatchDetailOut {
|
||||
match_stage: string | null
|
||||
home_xg: number | null
|
||||
away_xg: number | null
|
||||
stats: MatchStatsDetail | null
|
||||
recent_predictions: MatchRecentPrediction[]
|
||||
}
|
||||
|
||||
/** bzzoiro /events/{id}/stats/ 返回的详细比赛统计 */
|
||||
export interface MatchStatsDetail {
|
||||
home_xg: number | null
|
||||
away_xg: number | null
|
||||
home_shots: number | null
|
||||
away_shots: number | null
|
||||
home_shots_on_target: number | null
|
||||
away_shots_on_target: number | null
|
||||
home_corners: number | null
|
||||
away_corners: number | null
|
||||
home_possession: number | null
|
||||
home_yellow_cards: number | null
|
||||
away_yellow_cards: number | null
|
||||
home_red_cards: number | null
|
||||
away_red_cards: number | null
|
||||
home_big_chances: number | null
|
||||
away_big_chances: number | null
|
||||
home_fouls: number | null
|
||||
away_fouls: number | null
|
||||
}
|
||||
|
||||
export interface TeamRecentMatch {
|
||||
match_date: string | null
|
||||
home_team: string | null
|
||||
|
||||
@@ -2,6 +2,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import TeamSideTag from '../components/TeamSideTag'
|
||||
import { fetchMatchDetail, fetchMatchContext } from '../admin/dal'
|
||||
import type { MatchDetailOut, MatchContextOut, MatchRecentPrediction, TeamRecentMatch } from '../admin/types'
|
||||
import type { MatchStatsDetail } from '../admin/types'
|
||||
|
||||
interface Match {
|
||||
id: number
|
||||
@@ -63,7 +64,7 @@ const AGENT_LABELS: Record<string, string> = {
|
||||
form: '近期状态分析专家',
|
||||
stats: '攻防数据分析专家',
|
||||
home_away: '主客因素分析专家',
|
||||
injuries: '阵容完整性分析专家',
|
||||
standings: '联赛排名分析专家',
|
||||
}
|
||||
|
||||
const LEAGUES = [
|
||||
@@ -679,7 +680,7 @@ function PredictProgress() {
|
||||
const AGENT_START = 4
|
||||
const AGENT_STEP = 8 // 每路专家约 8s 点亮一路
|
||||
const AGG_START = AGENT_START + AGENT_STEP * 5
|
||||
const agents = ['form', 'stats', 'home_away', 'injuries', 'h2h']
|
||||
const agents = ['form', 'stats', 'home_away', 'standings', 'h2h']
|
||||
|
||||
const phase = elapsed < SLICE_END ? 'slice'
|
||||
: elapsed < AGG_START ? 'agents' : 'agg'
|
||||
@@ -1114,6 +1115,11 @@ function MatchDetailPanel({
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 比赛详细统计(bzzoiro /events/{id}/stats/) */}
|
||||
{detail?.stats && (
|
||||
<MatchStatsPanel stats={detail.stats} homeName={homeName} awayName={awayName} />
|
||||
)}
|
||||
|
||||
{/* 双方近况 + H2H */}
|
||||
{(ctx?.home_recent?.length || ctx?.away_recent?.length || ctx?.h2h?.length) ? (
|
||||
<div className="grid gap-4 sm:grid-cols-3">
|
||||
@@ -1144,6 +1150,80 @@ function MatchDetailPanel({
|
||||
)
|
||||
}
|
||||
|
||||
/** 比赛详细统计面板(bzzoiro /events/{id}/stats/) */
|
||||
function MatchStatsPanel({
|
||||
stats, homeName, awayName,
|
||||
}: { stats: MatchStatsDetail; homeName: string; awayName: string }) {
|
||||
const rows: Array<{ label: string; home: number | null; away: number | null; highlight?: 'high' | 'low' }> = [
|
||||
{ label: '预期进球(xG)', home: stats.home_xg, away: stats.away_xg },
|
||||
{ label: '射门', home: stats.home_shots, away: stats.away_shots },
|
||||
{ label: '射正', home: stats.home_shots_on_target, away: stats.away_shots_on_target },
|
||||
{ label: '角球', home: stats.home_corners, away: stats.away_corners },
|
||||
{ label: '犯规', home: stats.home_fouls, away: stats.away_fouls },
|
||||
{ label: '绝佳机会', home: stats.home_big_chances, away: stats.away_big_chances },
|
||||
{ label: '黄牌', home: stats.home_yellow_cards, away: stats.away_yellow_cards },
|
||||
{ label: '红牌', home: stats.home_red_cards, away: stats.away_red_cards },
|
||||
]
|
||||
const hasAny = rows.some(r => r.home != null || r.away != null)
|
||||
if (!hasAny) return null
|
||||
|
||||
// 控球率用横条展示
|
||||
const possHome = stats.home_possession
|
||||
const possAway = possHome != null ? Math.max(0, 100 - possHome) : null
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h4 className="section-head mb-2">比赛统计</h4>
|
||||
|
||||
{/* 控球率横条 */}
|
||||
{possHome != null && possAway != null && (
|
||||
<div className="mb-3">
|
||||
<div className="mb-1 flex justify-between text-2xs text-ink-500">
|
||||
<span>{possHome.toFixed(0)}%</span>
|
||||
<span className="text-ink-400">控球率</span>
|
||||
<span>{possAway.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="flex h-1.5 overflow-hidden rounded-full bg-ink-200">
|
||||
<div className="bg-ink-700 transition-[width] duration-500" style={{ width: `${possHome}%` }} />
|
||||
<div className="bg-ink-300 transition-[width] duration-500" style={{ width: `${possAway}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 主客对比表 */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-ink-200 text-ink-400">
|
||||
<th className="py-1.5 text-left font-medium">{homeName}</th>
|
||||
<th className="py-1.5 text-center font-medium text-ink-500">统计项</th>
|
||||
<th className="py-1.5 text-right font-medium">{awayName}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.filter(r => r.home != null || r.away != null).map(r => {
|
||||
const h = r.home ?? 0
|
||||
const a = r.away ?? 0
|
||||
const winner = h > a ? 'home' : h < a ? 'away' : 'tie'
|
||||
return (
|
||||
<tr key={r.label} className="border-b border-ink-100">
|
||||
<td className={`py-1.5 text-right tabular-nums ${winner === 'home' ? 'font-bold text-ink-900' : 'text-ink-500'}`}>
|
||||
{r.home ?? '—'}
|
||||
</td>
|
||||
<td className="py-1.5 text-center text-ink-500">{r.label}</td>
|
||||
<td className={`py-1.5 text-left tabular-nums ${winner === 'away' ? 'font-bold text-ink-900' : 'text-ink-500'}`}>
|
||||
{r.away ?? '—'}
|
||||
</td>
|
||||
</tr>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
/** 近况/H2H 单区块 */
|
||||
function RecentBlock({ title, rows, side }: { title: string; rows?: TeamRecentMatch[]; side: 'home' | 'away' | 'h2h' }) {
|
||||
return (
|
||||
|
||||
@@ -0,0 +1,174 @@
|
||||
/**
|
||||
* 主站 - 联赛积分榜页
|
||||
*
|
||||
* 展示各联赛最新积分榜(位置/积分/净胜/xG差/近期走势/分区),
|
||||
* 数据来自 bzzoiro /leagues/{id}/standings/ 管线采集。
|
||||
*/
|
||||
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { fetchStandings } from '../admin/dal'
|
||||
import type { StandingsLeague, StandingRow } from '../admin/dal'
|
||||
|
||||
const LEAGUES = [
|
||||
{ code: 'E0', name: '英超' },
|
||||
{ code: 'SP1', name: '西甲' },
|
||||
{ code: 'D1', name: '德甲' },
|
||||
{ code: 'I1', name: '意甲' },
|
||||
{ code: 'F1', name: '法甲' },
|
||||
{ code: 'CL', name: '欧冠' },
|
||||
{ code: 'EL', name: '欧联' },
|
||||
]
|
||||
|
||||
const ZONE_META: Record<string, { label: string; cls: string }> = {
|
||||
'Champions League': { label: '欧冠区', cls: 'bg-emerald-100 text-emerald-700' },
|
||||
'Europa League': { label: '欧联区', cls: 'bg-amber-100 text-amber-700' },
|
||||
'Relegation': { label: '降级区', cls: 'bg-rose-100 text-rose-700' },
|
||||
}
|
||||
|
||||
function zoneBadge(zone?: string | null) {
|
||||
if (!zone) return null
|
||||
const meta = ZONE_META[zone] ?? { label: zone, cls: 'bg-ink-100 text-ink-600' }
|
||||
return <span className={`rounded px-1.5 py-0.5 text-2xs font-medium ${meta.cls}`}>{meta.label}</span>
|
||||
}
|
||||
|
||||
/** 近期走势串(W/D/L) → 彩色圆点 */
|
||||
function FormDots({ form }: { form?: string | null }) {
|
||||
if (!form) return <span className="text-2xs text-ink-400">—</span>
|
||||
const colorMap: Record<string, string> = { W: 'bg-emerald-500', D: 'bg-ink-300', L: 'bg-rose-500' }
|
||||
return (
|
||||
<span className="inline-flex gap-0.5">
|
||||
{form.slice(0, 5).split('').map((c, i) => (
|
||||
<span key={i} className={`inline-block h-1.5 w-1.5 rounded-full ${colorMap[c] ?? 'bg-ink-200'}`} />
|
||||
))}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
|
||||
export default function StandingsPage() {
|
||||
const [leagues, setLeagues] = useState<StandingsLeague[]>([])
|
||||
const [activeLeague, setActiveLeague] = useState<string>('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
const load = useCallback(async (code?: string) => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
try {
|
||||
const data = await fetchStandings(code)
|
||||
setLeagues(data.leagues)
|
||||
if (!activeLeague && data.leagues.length > 0) {
|
||||
setActiveLeague(data.leagues[0].league_code)
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : '加载失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [activeLeague])
|
||||
|
||||
useEffect(() => { load() }, []) // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const active = leagues.find(l => l.league_code === activeLeague) ?? leagues[0]
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{/* 联赛切换 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{LEAGUES.map(l => (
|
||||
<button
|
||||
key={l.code}
|
||||
onClick={() => { setActiveLeague(l.code); load(l.code) }}
|
||||
className={`rounded border px-3 py-1.5 text-xs transition-colors ${
|
||||
activeLeague === l.code
|
||||
? 'border-ink-900 bg-ink-900 text-paper-50'
|
||||
: 'border-ink-200 text-ink-500 hover:border-ink-300'
|
||||
}`}
|
||||
>
|
||||
{l.name}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div className="border border-rose-300 bg-rose-50 px-4 py-3 text-sm text-rose-700">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading && (
|
||||
<div className="flex justify-center py-12 text-xs text-ink-400">加载中…</div>
|
||||
)}
|
||||
|
||||
{!loading && !active && (
|
||||
<div className="border-y border-ink-200 py-12 text-center">
|
||||
<p className="font-serif text-sm text-ink-600">暂无积分榜数据</p>
|
||||
<p className="mt-1.5 text-xs text-ink-400">
|
||||
请先在管理后台「数据采集」页运行「积分榜」任务。
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{active && (
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between border-b border-ink-200 pb-2">
|
||||
<div>
|
||||
<h2 className="font-serif text-lg font-bold text-ink-900">
|
||||
{active.league_name}
|
||||
</h2>
|
||||
<p className="text-xs text-ink-400">
|
||||
{active.season} 赛季 · {active.rows.length} 队
|
||||
{active.retrieved_at && ` · 更新于 ${new Date(active.retrieved_at).toLocaleDateString('zh-CN')}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 积分榜表格 */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="border-b border-ink-200 text-left text-ink-400">
|
||||
<th className="w-8 py-2 font-medium">#</th>
|
||||
<th className="py-2 font-medium">球队</th>
|
||||
<th className="w-10 text-center py-2 font-medium">赛</th>
|
||||
<th className="w-10 text-center py-2 font-medium">胜</th>
|
||||
<th className="w-10 text-center py-2 font-medium">平</th>
|
||||
<th className="w-10 text-center py-2 font-medium">负</th>
|
||||
<th className="w-12 text-center py-2 font-medium">进/失</th>
|
||||
<th className="w-12 text-center py-2 font-medium">净</th>
|
||||
<th className="w-14 text-center py-2 font-medium">积分</th>
|
||||
<th className="w-16 text-center py-2 font-medium">xG±</th>
|
||||
<th className="w-20 text-center py-2 font-medium">走势</th>
|
||||
<th className="w-16 text-right py-2 font-medium">区</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{active.rows.map((r: StandingRow) => (
|
||||
<tr key={r.position} className="border-b border-ink-100 hover:bg-paper-100">
|
||||
<td className="py-2 font-medium text-ink-700">{r.position}</td>
|
||||
<td className="py-2 font-medium text-ink-900">{r.team}</td>
|
||||
<td className="text-center py-2 text-ink-500">{r.played}</td>
|
||||
<td className="text-center py-2 text-ink-500">{r.won}</td>
|
||||
<td className="text-center py-2 text-ink-500">{r.drawn}</td>
|
||||
<td className="text-center py-2 text-ink-500">{r.lost}</td>
|
||||
<td className="text-center py-2 text-ink-500">{r.goals_for}/{r.goals_against}</td>
|
||||
<td className={`text-center py-2 ${r.goal_diff > 0 ? 'text-emerald-600' : r.goal_diff < 0 ? 'text-rose-600' : 'text-ink-500'}`}>
|
||||
{r.goal_diff > 0 ? `+${r.goal_diff}` : r.goal_diff}
|
||||
</td>
|
||||
<td className="text-center py-2 font-bold text-ink-900">{r.points}</td>
|
||||
<td className="text-center py-2 text-ink-500">
|
||||
{r.xg_for != null && r.xg_against != null
|
||||
? `${(r.xg_for - r.xg_against).toFixed(1)}`
|
||||
: '—'}
|
||||
</td>
|
||||
<td className="py-2"><div className="flex justify-center"><FormDots form={r.form} /></div></td>
|
||||
<td className="py-2 text-right">{zoneBadge(r.zone)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user