shangfangjian
a00364d4a7
matches 列表:selectinload 加 load_only 限定列(League.code/Team.name,name_zh/ MatchStats.home_xg,away_xg),补 stats 加载消除 N+1(m.stats 此前懒加载)。 详情接口保持完整 options;游标分页/响应字段/空值语义不变。 Standings 改用 useLeagues() 统一数据源(API 优先,失败回退本地常量), LEAGUES 常量扩展 CL/EL;无数据联赛显示虚线 tab + 空态(非隐藏)。
239 lines
11 KiB
TypeScript
239 lines
11 KiB
TypeScript
/**
|
|
* 主站 - 联赛积分榜页
|
|
*
|
|
* 展示各联赛最新积分榜(位置/积分/净胜/xG差/近期走势/分区),
|
|
* 数据来自 bzzoiro /leagues/{id}/standings/ 管线采集。
|
|
*/
|
|
|
|
import { useEffect, useState, useCallback } from 'react'
|
|
import { fetchStandings } from '../admin/dal'
|
|
import type { StandingsLeague, StandingRow } from '../admin/dal'
|
|
import { useLeagues } from './matches/hooks/useLeagues'
|
|
import { Spinner } from '../admin/components'
|
|
|
|
const ZONE_META: Record<string, { label: string; cls: string }> = {
|
|
// 欧战资格
|
|
'Champions League': { label: '欧冠区', cls: 'bg-emerald-100 text-emerald-700' },
|
|
'Champions League Qualification': { label: '欧冠资格', cls: 'bg-emerald-100 text-emerald-700' },
|
|
'Europa League': { label: '欧联区', cls: 'bg-amber-100 text-amber-700' },
|
|
'Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
|
'Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
|
'Europa Conference League': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
|
'Europa Conference League Qualification': { label: '欧协杯', cls: 'bg-sky-100 text-sky-700' },
|
|
// 升级
|
|
'Championship': { label: '升级区', cls: 'bg-emerald-100 text-emerald-700' },
|
|
'Promotion': { label: '升级区', cls: 'bg-emerald-100 text-emerald-700' },
|
|
'Promotion Group': { label: '升级组', cls: 'bg-emerald-100 text-emerald-700' },
|
|
// 降级
|
|
'Relegation': { label: '降级区', cls: 'bg-rose-100 text-rose-700' },
|
|
'Relegation Playoffs': { label: '降级附加赛', cls: 'bg-orange-100 text-orange-700' },
|
|
'Relegation Group': { label: '降级组', cls: 'bg-rose-100 text-rose-700' },
|
|
// 附加赛
|
|
'Playoffs': { label: '附加赛', cls: 'bg-amber-100 text-amber-700' },
|
|
'Championship Playoffs': { label: '升级附加赛', cls: 'bg-amber-100 text-amber-700' },
|
|
'Qualification Playoffs': { label: '资格附加赛', cls: 'bg-sky-100 text-sky-700' },
|
|
'Qualification': { label: '资格赛', cls: 'bg-sky-100 text-sky-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={`whitespace-nowrap 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() {
|
|
// 统一数据源:复用 useLeagues hook(优先 API,失败回退本地常量)
|
|
const leagues = useLeagues()
|
|
const [standings, setStandings] = useState<StandingsLeague[]>([])
|
|
const [activeLeague, setActiveLeague] = useState<string>('')
|
|
const [loading, setLoading] = useState(true)
|
|
const [switching, setSwitching] = useState(false) // 切换联赛中
|
|
const [error, setError] = useState<string | null>(null)
|
|
const [showBackTop, setShowBackTop] = useState(false) // 回到顶部按钮显示态
|
|
|
|
// 监听滚动,超过 300px 显示回到顶部按钮
|
|
useEffect(() => {
|
|
const handleScroll = () => setShowBackTop(window.scrollY > 300)
|
|
window.addEventListener('scroll', handleScroll, { passive: true })
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
const scrollToTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
|
|
const load = useCallback(async (code?: string) => {
|
|
setLoading(true)
|
|
setError(null)
|
|
try {
|
|
const data = await fetchStandings(code)
|
|
setStandings(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
|
|
|
|
// 切换联赛(带加载态,禁用 tab 防重复点击)
|
|
const switchLeague = async (code: string) => {
|
|
if (code === activeLeague || switching) return
|
|
setSwitching(true)
|
|
setActiveLeague(code)
|
|
try {
|
|
await fetchStandings(code).then(data => setStandings(data.leagues))
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : '加载失败')
|
|
} finally {
|
|
setSwitching(false)
|
|
}
|
|
}
|
|
|
|
const active = standings.find(l => l.league_code === activeLeague) ?? standings[0]
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* 联赛切换 */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{leagues.map(l => {
|
|
// 标记该联赛是否有积分榜数据:有数据可正常切换,无数据也可选中但显示空态
|
|
const hasData = standings.some(s => s.league_code === l.code)
|
|
const isEmpty = activeLeague === l.code && !hasData
|
|
return (
|
|
<button
|
|
key={l.code}
|
|
onClick={() => switchLeague(l.code)}
|
|
disabled={switching}
|
|
title={hasData ? undefined : '暂无积分榜数据'}
|
|
className={`rounded border px-3 py-1.5 text-xs transition-colors disabled:opacity-50 ${
|
|
activeLeague === l.code
|
|
? 'border-ink-900 bg-ink-900 text-paper-50'
|
|
: 'border-ink-200 text-ink-500 hover:border-ink-300'
|
|
} ${!hasData ? 'border-dashed' : ''}`}
|
|
>
|
|
{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>
|
|
)}
|
|
|
|
{/* 切换联赛时的轻量加载指示 */}
|
|
{switching && !loading && (
|
|
<div className="flex items-center gap-2 border-b border-ink-200 px-1 py-2 text-xs text-ink-400">
|
|
<Spinner /> 切换联赛中…
|
|
</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 min-w-[640px] 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>
|
|
)}
|
|
|
|
{/* 回到顶部按钮 */}
|
|
<button
|
|
onClick={scrollToTop}
|
|
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-ink-200 bg-paper-50 text-ink-600 shadow-lg transition-all duration-300 hover:border-ink-400 hover:text-ink-900 ${
|
|
showBackTop ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
|
|
}`}
|
|
aria-label="回到顶部"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|