-
⏳
- LLM 预测中,请稍候...
+ {/* ── 比赛列表 ── */}
+
+ {loading &&
}
+
+ {!loading && matches.length === 0 && (
+
+
+
暂无比赛数据
+
请先通过采集接口导入 {leagueName} 的赛程
+
+ )}
+
+ {!loading && matches.map(m => {
+ const st = STATUS_META[m.match_status] ?? { label: m.match_status, cls: 'bg-ink-100 text-ink-600' }
+ const homeName = m.home_team_zh || m.home_team
+ const awayName = m.away_team_zh || m.away_team
+ const busy = predictingId === m.id
+ const active = predictionFor?.id === m.id
+
+ return (
+
+
+ {/* 对阵 */}
+
+
+ {homeName}
+
+
+
+
+ {m.home_goals !== null && m.away_goals !== null ? (
+
+ {m.home_goals}:{m.away_goals}
+
+ ) : (
+ VS
+ )}
+ {m.home_xg !== null && m.away_xg !== null && (
+
+ xG {m.home_xg.toFixed(1)}-{m.away_xg.toFixed(1)}
+
+ )}
+
+
+
+
+ {awayName}
+
+
+
+
+ {/* 元信息:桌面端独立成列,移动端与按钮同排 */}
+
+
+
+ {st.label}
+
+
+ {m.league_code ?? '—'} · {fmtDate(m.match_date)}
+
+
+
+ {/* 操作:主功能提升为实心按钮 */}
+
+
+
+
+ )
+ })}
+
+ {!loading && nextCursor && (
+
+
+
+ )}
+
+
+ {/* ── 预测中:占位卡片(替代 emoji 提示条) ── */}
+ {predictingId && !prediction && (
+
+
+
+ 正在生成预测
+
+ {mode === 'multi' ? '· 5 个专家并行分析后由终裁汇总,约需 20-60 秒' : '· 单次调用,约需 5-15 秒'}
+
+
+
)}
- {/* 预测结果 */}
- {prediction && (
-
-
🤖 LLM 预测结果
-
-
-
主进球
-
{prediction.pred_home_goals ?? '-'}
-
-
-
客进球
-
{prediction.pred_away_goals ?? '-'}
-
-
-
胜平负
-
{prediction.pred_1x2 ?? '-'}
-
-
-
置信度
-
- {prediction.subjective_confidence !== null ? `${(prediction.subjective_confidence * 100).toFixed(0)}%` : '-'}
-
-
-
-
- {prediction.provider} / {prediction.model} · 耗时 {prediction.latency_ms}ms
- {prediction.mode === 'multi' && ' · 多 Agent 模式'}
-
+ {/* ── 预测结果 ── */}
+ {prediction && predictionFor && (
+
+ )}
+
+ )
+}
- {/* 各专家 agent 报告 */}
- {prediction.agent_outputs && prediction.agent_outputs.length > 0 && (
-
-
专家 Agent 报告
- {prediction.agent_outputs.map((r) => (
-
-
-
- {AGENT_LABELS[r.agent] || r.agent}
- {r.status !== 'ok' && (
-
- {r.status === 'no_data' ? '无数据' : '失败'}
-
- )}
-
-
- {r.home_edge !== null && (
- 0 ? 'text-blue-600' : r.home_edge < 0 ? 'text-amber-600' : ''}>
- 主队优势 {r.home_edge > 0 ? '+' : ''}{r.home_edge.toFixed(2)}
-
- )}
- {r.subjective_confidence !== null && 信心 {(r.subjective_confidence * 100).toFixed(0)}%}
- {r.probable_score && 比分 {r.probable_score}}
-
-
-
- {r.analysis &&
{r.analysis}
}
- {r.key_evidence.length > 0 && (
-
- {r.key_evidence.map((e, i) => - {e}
)}
-
- )}
- {r.exp_home_goals !== null && r.exp_away_goals !== null && (
-
- 进球期望: {r.exp_home_goals.toFixed(1)} - {r.exp_away_goals.toFixed(1)}
-
- )}
-
- 数据充分度 {r.data_sufficiency} · {r.model} · {r.latency_ms}ms
-
-
- ))}
-
- )}
+function Spinner({ className = '' }: { className?: string }) {
+ // 纯 SVG 转圈,替代 emoji ⏳(各平台渲染不一致)
+ return (
+
+ )
+}
- {prediction.reasoning && (
-
-
推理过程
-
{prediction.reasoning}
-
- )}
-
- 查看完整上下文
-
- {prediction.context}
-
-
+/** 胜平负概率条:LLM 只给主观置信度,这里把它按 1x2 结果做成单条高亮,
+ * 并显式标注「主观」避免用户误当概率 */
+function OutcomeCard({
+ pick,
+ confidence,
+}: {
+ pick: string | null
+ confidence: number | null
+}) {
+ const label = pick ? OUTCOME_LABEL[pick] ?? pick : '—'
+ const tone = pick === '1' ? 'brand' : pick === 'X' ? 'amber' : 'emerald'
+ const color =
+ tone === 'brand' ? 'text-brand-700' : tone === 'amber' ? 'text-amber-700' : 'text-emerald-700'
+ const bg = tone === 'brand' ? 'bg-brand-50' : tone === 'amber' ? 'bg-amber-50' : 'bg-emerald-50'
+ const border =
+ tone === 'brand' ? 'border-brand-100' : tone === 'amber' ? 'border-amber-100' : 'border-emerald-100'
+
+ return (
+
+
胜平负
+
{label}
+ {confidence !== null && (
+
+
+
主观置信度 {Math.round(confidence * 100)}%
)}
)
}
+
+function PredictionPanel({
+ prediction,
+ match,
+ mode,
+}: {
+ prediction: Prediction
+ match: Match
+ mode: 'single' | 'multi'
+}) {
+ const homeName = match.home_team_zh || match.home_team
+ const awayName = match.away_team_zh || match.away_team
+ const okReports = (prediction.agent_outputs ?? []).filter(r => r.status === 'ok')
+
+ return (
+
+ {/* 面板头 */}
+
+
+
+
+
+
LLM 预测结果
+ {prediction.mode === 'multi' && (
+
+ 多 Agent · {okReports.length}/{prediction.agent_outputs?.length ?? 0} 专家有效
+
+ )}
+
+
+ {prediction.provider} / {prediction.model}
+ {prediction.latency_ms !== null && ` · ${(prediction.latency_ms / 1000).toFixed(1)}s`}
+
+
+
+
+ {/* ── 对阵 + 预测比分(核心) ── */}
+
+
+ {homeName}
+
+
+
+
+
+
+ {prediction.pred_home_goals ?? '-'}
+
+ :
+
+ {prediction.pred_away_goals ?? '-'}
+
+
+
预测比分
+
+
+
+
+ {awayName}
+
+
+
+ {/* ── 指标卡 ── */}
+
+
+
+
预测模式
+
{mode === 'multi' ? '多 Agent' : '单次'}
+
+ prompt {prediction.prompt_version ?? '—'}
+
+
+
+
模型耗时
+
+ {prediction.latency_ms !== null ? (prediction.latency_ms / 1000).toFixed(1) : '—'}
+ s
+
+
含专家并行 + 终裁汇总
+
+
+
+ {/* ── 专家报告 ── */}
+ {prediction.agent_outputs && prediction.agent_outputs.length > 0 && (
+
+
+
专家 Agent 报告
+ {prediction.agent_weights && (
+
+ 终裁权重：
+ {Object.entries(prediction.agent_weights)
+ .sort((a, b) => b[1] - a[1])
+ .map(([k, v]) => `${AGENT_LABELS[k] ?? k} ${Math.round(v * 100)}%`)
+ .join(' · ')}
+
+ )}
+
+
+
+ {prediction.agent_outputs.map(r => (
+
+ ))}
+
+
+ )}
+
+ {/* ── 推理过程 ── */}
+ {prediction.reasoning && (
+
+
终裁推理
+
{prediction.reasoning}
+
+ )}
+
+ {/* ── 原始上下文 ── */}
+
+
+
+ 查看喂给模型的完整数据切片
+
+
+ {prediction.context}
+
+
+
+
+ )
+}
+
+const STATUS_BADGE: Record
= {
+ ok: { label: '正常', cls: 'bg-emerald-50 text-emerald-700 border-emerald-100' },
+ no_data: { label: '无数据', cls: 'bg-ink-100 text-ink-500 border-ink-200' },
+ error: { label: '调用失败', cls: 'bg-red-50 text-red-600 border-red-100' },
+ parse_error: { label: '解析失败', cls: 'bg-amber-50 text-amber-700 border-amber-100' },
+}
+
+const SUFFICIENCY_LABEL: Record = {
+ high: '充分',
+ medium: '一般',
+ low: '偏少',
+ none: '无',
+}
+
+function AgentCard({ report: r }: { report: AgentReport }) {
+ const badge = STATUS_BADGE[r.status] ?? { label: r.status, cls: 'bg-ink-100 text-ink-500 border-ink-200' }
+ const inactive = r.status !== 'ok'
+
+ return (
+
+
+
+
+ {AGENT_LABELS[r.agent] ?? r.agent}
+
+ {badge.label}
+
+
+ {r.status === 'ok' && r.subjective_confidence !== null && (
+ 信心 {Math.round(r.subjective_confidence * 100)}%
+ )}
+ {r.status === 'ok' && r.probable_score && (
+ {r.probable_score}
+ )}
+
+
+
+
+ {/* 无数据 / 失败时给出明确说明,避免用户以为是空白 bug */}
+ {inactive && (
+
+ {r.status === 'no_data' && '该维度没有可用数据,已跳过 LLM 分析以节省额度(不影响其他专家)。'}
+ {r.status === 'error' && '该专家调用失败,本次结论未纳入其视角(fail-open 设计,不阻断整体预测)。'}
+ {r.status === 'parse_error' && '模型输出未通过格式校验,该报告已丢弃。'}
+
+ )}
+
+ {!inactive && r.home_edge !== null && (
+
+
+ 主队优势
+ 0 ? 'text-brand-600' : r.home_edge < 0 ? 'text-amber-600' : 'text-ink-500'}`}>
+ {r.home_edge > 0 ? '+' : ''}{r.home_edge.toFixed(2)}
+
+
+
+
+ 利客队
+ 利主队
+
+
+ )}
+
+ {r.analysis && (
+
{r.analysis}
+ )}
+
+ {r.key_evidence.length > 0 && (
+
+ {r.key_evidence.map((e, i) => (
+ -
+
+ {e}
+
+ ))}
+
+ )}
+
+ {r.exp_home_goals !== null && r.exp_away_goals !== null && (
+
+ 进球期望
+
+ {r.exp_home_goals.toFixed(1)} - {r.exp_away_goals.toFixed(1)}
+
+
+ )}
+
+ {!inactive && (
+
+ 数据充分度 {SUFFICIENCY_LABEL[r.data_sufficiency] ?? r.data_sufficiency}
+ {r.model}
+ {r.latency_ms !== null && {r.latency_ms}ms}
+
+ )}
+
+ )
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 97ed72b..19b5424 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,6 +1,83 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{ts,tsx}'],
- theme: { extend: {} },
+ theme: {
+ extend: {
+ colors: {
+ // 品牌主色:偏冷的蓝,比默认 blue-600 更沉稳,适合数据产品
+ brand: {
+ 50: '#EFF6FF',
+ 100: '#DBEAFE',
+ 200: '#BFDBFE',
+ 300: '#93C5FD',
+ 400: '#60A5FA',
+ 500: '#3B82F6',
+ 600: '#2563EB',
+ 700: '#1D4ED8',
+ 800: '#1E40AF',
+ 900: '#1E3A8A',
+ 950: '#172554',
+ },
+ // 中性色:带一点冷调,避免纯灰显得脏
+ ink: {
+ 50: '#F8FAFC',
+ 100: '#F1F5F9',
+ 200: '#E2E8F0',
+ 300: '#CBD5E1',
+ 400: '#94A3B8',
+ 500: '#64748B',
+ 600: '#475569',
+ 700: '#334155',
+ 800: '#1E293B',
+ 900: '#0F172A',
+ },
+ // 语义色:状态徽章 / 提示条统一走这套
+ win: { bg: '#ECFDF5', fg: '#047857', line: '#A7F3D0' },
+ draw: { bg: '#FFFBEB', fg: '#B45309', line: '#FDE68A' },
+ loss: { bg: '#FEF2F2', fg: '#B91C1C', line: '#FECACA' },
+ },
+ fontFamily: {
+ sans: [
+ 'ui-sans-serif',
+ '-apple-system',
+ 'BlinkMacSystemFont',
+ '"Segoe UI"',
+ '"PingFang SC"',
+ '"Hiragino Sans GB"',
+ '"Microsoft YaHei"',
+ 'sans-serif',
+ ],
+ mono: ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Consolas', 'monospace'],
+ },
+ fontSize: {
+ // 多一档 2xs,给徽章/元信息用
+ '2xs': ['11px', { lineHeight: '16px' }],
+ },
+ borderRadius: {
+ card: '12px',
+ pill: '9999px',
+ },
+ boxShadow: {
+ // 卡片阴影:极浅,靠层次而非重影提升
+ card: '0 1px 2px 0 rgb(15 23 42 / 0.04), 0 1px 3px 0 rgb(15 23 42 / 0.06)',
+ raise: '0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 6px -2px rgb(15 23 42 / 0.04)',
+ focus: '0 0 0 3px rgb(37 99 235 / 0.15)',
+ },
+ keyframes: {
+ 'fade-up': {
+ '0%': { opacity: '0', transform: 'translateY(4px)' },
+ '100%': { opacity: '1', transform: 'translateY(0)' },
+ },
+ shimmer: {
+ '0%': { backgroundPosition: '-200% 0' },
+ '100%': { backgroundPosition: '200% 0' },
+ },
+ },
+ animation: {
+ 'fade-up': 'fade-up 0.22s ease-out both',
+ shimmer: 'shimmer 1.4s linear infinite',
+ },
+ },
+ },
plugins: [],
}