feat: 核心模块增强 — 加密 + 运行时配置 + 日志缓冲

- crypto.py: API Key 加密/解密工具
- runtime_config.py: 运行时动态配置管理
- log_buffer.py: 内存日志缓冲区
- config.py: 新增加密配置项
- http_client.py: 增强重试和错误处理

frontend/src/pages/Matches.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
+import TeamSideTag from '../components/TeamSideTag'
 
 interface Match {
   id: number
@@ -25,6 +26,8 @@ interface Prediction {
   mode: string
   pred_home_goals: number | null
   pred_away_goals: number | null
+  alt_pred_home_goals: number | null
+  alt_pred_away_goals: number | null
   pred_1x2: string | null
   subjective_confidence: number | null
   reasoning: string | null
@@ -50,11 +53,11 @@ interface AgentReport {
 }
 
 const AGENT_LABELS: Record<string, string> = {
-  h2h: '历史交锋',
-  form: '近期状态',
-  stats: '攻防数据',
-  home_away: '主客因素',
-  injuries: '阵容完整性',
+  h2h: '历史交锋分析专家',
+  form: '近期状态分析专家',
+  stats: '攻防数据分析专家',
+  home_away: '主客因素分析专家',
+  injuries: '阵容完整性分析专家',
 }
 
 const LEAGUES = [
@@ -193,6 +196,17 @@ export default function Matches() {
   // 把旧结果覆盖到新筛选上。用递增序号只认最后一次请求的响应。
   const loadSeq = useRef(0)
   const predictSeq = useRef(0)
+  // 预测请求控制器:关闭弹窗时中止
+  const predictAbort = useRef<AbortController | null>(null)
+
+  function closePredict() {
+    predictAbort.current?.abort()
+    predictSeq.current++  // 令中止请求的 catch/then 全部失效,不再写入错误
+    setPredictingId(null)
+    setPrediction(null)
+    setPredictionFor(null)
+    setError(null)
+  }
 
   const load = useCallback(async () => {
     const seq = ++loadSeq.current
@@ -247,11 +261,16 @@ export default function Matches() {
     setError(null)
     setPrediction(null)
     setPredictionFor(m)
+    // LLM 多专家预测耗时可达数分钟,给足超时(与 nginx 代理 300s 对齐)
+    const controller = new AbortController()
+    predictAbort.current = controller
+    const timer = setTimeout(() => controller.abort(), 300_000)
     try {
       const res = await fetch('/api/v1/predict', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ match_id: m.id, mode }),
+        signal: controller.signal,
       })
       if (seq !== predictSeq.current) return
       if (!res.ok) {
@@ -263,8 +282,15 @@ export default function Matches() {
       setPrediction(data)
     } catch (e) {
       if (seq !== predictSeq.current) return
-      setError(e instanceof Error ? e.message : String(e))
+      setError(
+        e instanceof DOMException && e.name === 'AbortError'
+          ? '预测超时(5 分钟),请稍后重试或改用单次模式'
+          : e instanceof Error
+            ? e.message
+            : String(e),
+      )
     } finally {
+      clearTimeout(timer)
       if (seq === predictSeq.current) setPredictingId(null)
     }
   }
@@ -363,6 +389,18 @@ export default function Matches() {
         </div>
       )}
 
+      {/* ── 预测弹窗:进行中可视化 / 结果面板 ── */}
+      {predictionFor && (
+        <PredictModal
+          match={predictionFor}
+          mode={mode}
+          predicting={predictingId === predictionFor.id}
+          prediction={predictingId === predictionFor.id ? null : prediction}
+          error={predictingId === predictionFor.id ? null : error}
+          onClose={closePredict}
+        />
+      )}
+
       {/* ── 赛程栏:表格化,行间细线 ── */}
       <section aria-label="赛程">
         {loading && <SkeletonRows n={4} />}
@@ -380,6 +418,7 @@ export default function Matches() {
           const awayName = m.away_team_zh || m.away_team
           const busy = predictingId === m.id
           const active = predictionFor?.id === m.id
+          const finished = m.match_status === 'finished'
 
           return (
             <div
@@ -398,7 +437,8 @@ export default function Matches() {
                 {/* 对阵:移动端主队/比分/客队同一行,桌面端 sm:contents 拆回 grid 列 */}
                 <div className="flex items-center gap-2 sm:contents">
                   {/* 主队(右对齐) */}
-                  <div className="flex min-w-0 flex-1 items-center justify-end">
+                  <div className="flex min-w-0 flex-1 items-center justify-end gap-1.5">
+                    <TeamSideTag side="home" />
                     <span className="truncate text-sm font-medium text-ink-900">{homeName}</span>
                   </div>
 
@@ -419,7 +459,8 @@ export default function Matches() {
                   </div>
 
                   {/* 客队(左对齐) */}
-                  <div className="flex min-w-0 flex-1 items-center">
+                  <div className="flex min-w-0 flex-1 items-center gap-1.5">
+                    <TeamSideTag side="away" />
                     <span className="truncate text-sm font-medium text-ink-900">{awayName}</span>
                   </div>
                 </div>
@@ -429,14 +470,16 @@ export default function Matches() {
 
                 {/* 预测按钮 */}
                 <div className="flex justify-end">
-                  <button
-                    onClick={() => predict(m)}
-                    disabled={busy}
-                    className="btn btn-sm w-[76px]"
-                    title={`以${mode === 'multi' ? '多专家' : '单次'}模式预测这场`}
-                  >
-                    {busy ? (<><Spinner /> 预测中</>) : '预测'}
-                  </button>
+                  {!finished && (
+                    <button
+                      onClick={() => predict(m)}
+                      disabled={busy}
+                      className="btn btn-sm w-[76px]"
+                      title={`以${mode === 'multi' ? '多专家' : '单次'}模式预测这场`}
+                    >
+                      {busy ? (<><Spinner /> 预测中</>) : '预测'}
+                    </button>
+                  )}
                 </div>
               </div>
             </div>
@@ -452,32 +495,164 @@ export default function Matches() {
         )}
       </section>
 
-      {/* ── 预测中占位 ── */}
-      {predictingId && !prediction && (
-        <div className="border border-ink-900">
-          <div className="flex items-center gap-2 border-b border-ink-900 bg-paper-100 px-4 py-2.5">
-            <Spinner className="text-press" />
-            <span className="text-sm font-medium text-ink-800">正在生成预测</span>
-            <span className="text-2xs text-ink-500">
-              {mode === 'multi' ? '五路专家并行分析后终裁,约需 20-60 秒' : '单次调用,约需 5-15 秒'}
-            </span>
-          </div>
-          <div className="space-y-4 px-4 py-6">
-            <div className="flex items-center justify-center gap-6">
-              <div className="skeleton h-4 w-20" />
-              <div className="skeleton h-10 w-24" />
-              <div className="skeleton h-4 w-20" />
-            </div>
-            <div className="skeleton mx-auto h-px w-64" />
-            <div className="skeleton h-16 w-full" />
-          </div>
-        </div>
+    </div>
+  )
+}
+
+
+/** 预测过程阶段(按时长模拟;结果到达即跳到完成) */
+function PredictProgress({ mode }: { mode: 'single' | 'multi' }) {
+  const [elapsed, setElapsed] = useState(0)
+  useEffect(() => {
+    const t = setInterval(() => setElapsed(e => e + 0.5), 500)
+    return () => clearInterval(t)
+  }, [])
+
+  // 阶段阈值(秒): 切片 → 专家(各路依次点亮) → 终裁
+  const SLICE_END = mode === 'multi' ? 3 : 3
+  const AGENT_START = 4
+  const AGENT_STEP = 8        // 每路专家约 8s 点亮一路
+  const AGG_START = mode === 'multi' ? AGENT_START + AGENT_STEP * 5 : SLICE_END + 1
+  const agents = ['form', 'stats', 'home_away', 'injuries', 'h2h']
+
+  const phase = elapsed < SLICE_END ? 'slice'
+    : mode === 'single'
+      ? 'model'
+      : elapsed < AGG_START ? 'agents' : 'agg'
+
+  const pct = Math.min(95, Math.round((elapsed / (mode === 'multi' ? 70 : 20)) * 100))
+
+  return (
+    <div className="px-5 py-8 sm:px-8">
+      {/* 阶段标题 */}
+      <div className="flex items-center justify-center gap-2">
+        <Spinner className="text-press" />
+        <span className="font-serif text-sm font-bold text-ink-900">
+          {phase === 'slice' && '正在组装比赛数据切片'}
+          {phase === 'agents' && '五路专家并行分析中'}
+          {phase === 'model' && '模型分析中'}
+          {phase === 'agg' && '终裁专家汇总裁定中'}
+        </span>
+        <span className="text-2xs tabular-nums text-ink-400">{elapsed.toFixed(0)}s</span>
+      </div>
+
+      {/* 进度条:渐进式,不封顶到 100% */}
+      <div className="mx-auto mt-5 h-1 w-full max-w-md overflow-hidden bg-ink-100" role="progressbar" aria-valuenow={pct}>
+        <div
+          className={`h-full bg-press transition-all duration-500 ${phase === 'agg' || phase === 'model' ? 'animate-pulse' : ''}`}
+          style={{ width: `${pct}%` }}
+        />
+      </div>
+
+      {/* 专家灯序(多专家模式) */}
+      {mode === 'multi' && (
+        <ul className="mx-auto mt-6 max-w-md space-y-1.5">
+          {agents.map((a, i) => {
+            const lit = elapsed >= AGENT_START + AGENT_STEP * (i + 1)
+            const activeNow = !lit && elapsed >= AGENT_START + AGENT_STEP * i
+            return (
+              <li
+                key={a}
+                className={`flex items-center justify-between border-b border-ink-200 pb-1.5 text-xs transition-colors ${
+                  lit ? 'text-ink-800' : activeNow ? 'text-ink-900' : 'text-ink-300'
+                }`}
+              >
+                <span className="flex items-center gap-2">
+                  <span
+                    aria-hidden="true"
+                    className={`inline-block h-1.5 w-1.5 ${lit ? 'bg-ink-900' : activeNow ? 'bg-press animate-pulse' : 'bg-ink-200'}`}
+                  />
+                  {AGENT_LABELS[a] ?? a}
+                </span>
+                {lit && <span className="text-2xs text-ink-400">✓ 完成</span>}
+                {activeNow && <span className="text-2xs text-press">分析中…</span>}
+              </li>
+            )
+          })}
+        </ul>
       )}
 
-      {/* ── 预测版 ── */}
-      {prediction && predictionFor && (
-        <PredictionPanel prediction={prediction} match={predictionFor} mode={mode} />
-      )}
+      <p className="mt-6 text-center text-2xs text-ink-400">
+        {mode === 'multi' ? '五路专家并行分析后终裁,约需 30-90 秒;关闭窗口即取消' : '单次调用,约需 5-20 秒;关闭窗口即取消'}
+      </p>
+    </div>
+  )
+}
+
+/** 预测弹窗:进行中显示过程可视化,完成后显示预测版,失败显示原因 */
+function PredictModal({
+  match,
+  mode,
+  predicting,
+  prediction,
+  error,
+  onClose,
+}: {
+  match: Match
+  mode: 'single' | 'multi'
+  predicting: boolean
+  prediction: Prediction | null
+  error: string | null
+  onClose: () => void
+}) {
+  const homeName = match.home_team_zh || match.home_team
+  const awayName = match.away_team_zh || match.away_team
+
+  useEffect(() => {
+    const h = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+    }
+    document.addEventListener('keydown', h)
+    return () => document.removeEventListener('keydown', h)
+  }, [onClose])
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-start justify-center overflow-y-auto bg-ink-900/50 p-4 sm:items-center"
+      role="dialog"
+      aria-modal="true"
+      aria-label={`预测 ${homeName} 对 ${awayName}`}
+      onClick={e => {
+        if (e.target === e.currentTarget) onClose()
+      }}
+    >
+      <div className="relative w-full max-w-2xl bg-paper-50 shadow-2xl">
+        {/* 弹窗报头 */}
+        <div className="flex items-center justify-between border-b border-ink-900 bg-paper-100 px-4 py-2.5 sm:px-5">
+          <h3 className="flex flex-wrap items-center gap-1.5 font-serif text-sm font-bold text-ink-900">
+            预测版 ·
+            <TeamSideTag side="home" />
+            {homeName}
+            <span>对</span>
+            <TeamSideTag side="away" />
+            {awayName}
+          </h3>
+          <button
+            onClick={onClose}
+            className="flex h-7 w-7 items-center justify-center text-ink-400 transition-colors hover:text-ink-900"
+            aria-label="关闭"
+          >
+            <svg className="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path d="M6.3 5.3a1 1 0 011.4 0L10 7.6l2.3-2.3a1 1 0 111.4 1.4L11.4 9l2.3 2.3a1 1 0 01-1.4 1.4L10 10.4l-2.3 2.3a1 1 0 01-1.4-1.4L8.6 9 6.3 6.7a1 1 0 010-1.4z" />
+            </svg>
+          </button>
+        </div>
+
+        {/* 弹窗体 */}
+        {predicting ? (
+          <PredictProgress mode={mode} />
+        ) : error ? (
+          <div className="px-5 py-10 text-center sm:px-8">
+            <p className="font-serif text-sm font-bold text-press">预测失败</p>
+            <p className="mx-auto mt-3 max-w-md whitespace-pre-wrap text-left text-xs leading-relaxed text-ink-600">
+              {error}
+            </p>
+            <button onClick={onClose} className="btn btn-sm mt-6">关闭</button>
+          </div>
+        ) : prediction ? (
+          <PredictionPanel prediction={prediction} match={match} mode={mode} embedded />
+        ) : null}
+      </div>
     </div>
   )
 }
@@ -486,27 +661,37 @@ function PredictionPanel({
   prediction,
   match,
   mode,
+  embedded = false,
 }: {
   prediction: Prediction
   match: Match
   mode: 'single' | 'multi'
+  /** 弹窗嵌入模式:弹窗已提供报头,这里省略自带版头 */
+  embedded?: boolean
 }) {
   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 (
-    <article className="border border-ink-900 bg-paper-50">
-      {/* 版头 */}
+    <article className={embedded ? 'bg-paper-50' : 'border border-ink-900 bg-paper-50'}>
+      {/* 版头(嵌入模式由弹窗报头承担) */}
+      {!embedded && (
       <div className="flex flex-wrap items-baseline justify-between gap-2 border-b border-ink-900 bg-paper-100 px-4 py-2.5 sm:px-5">
-        <h3 className="font-serif text-sm font-bold text-ink-900">
-          预测版 · {homeName} 对 {awayName}
+        <h3 className="flex flex-wrap items-center gap-1.5 font-serif text-sm font-bold text-ink-900">
+          预测版 ·
+          <TeamSideTag side="home" />
+          {homeName}
+          <span>对</span>
+          <TeamSideTag side="away" />
+          {awayName}
         </h3>
         <span className="text-2xs tabular-nums text-ink-500">
           {prediction.provider} / {prediction.model}
           {prediction.latency_ms !== null && ` · ${(prediction.latency_ms / 1000).toFixed(1)}s`}
         </span>
       </div>
+      )}
 
       <div className="space-y-7 px-4 py-6 sm:px-5">
         {/* ── 预测比分:版面核心,大号宋体 ── */}
@@ -517,6 +702,14 @@ function PredictionPanel({
             {prediction.pred_away_goals ?? '-'}
           </p>
           <p className="mt-3 text-2xs tracking-[0.5em] text-ink-400">预测比分</p>
+          {prediction.alt_pred_home_goals !== null && prediction.alt_pred_away_goals !== null && (
+            <p className="mt-2 text-2xs tabular-nums text-ink-400">
+              备选{' '}
+              <span className="font-serif text-sm font-bold tabular-nums text-ink-600">
+                {prediction.alt_pred_home_goals}<span className="mx-0.5 font-normal text-ink-300">:</span>{prediction.alt_pred_away_goals}
+              </span>
+            </p>
+          )}
         </div>
 
         {/* ── 胜平负 ── */}
@@ -566,18 +759,6 @@ function PredictionPanel({
           </section>
         )}
 
-        {/* ── 原始上下文 ── */}
-        <details className="group">
-          <summary className="flex cursor-pointer list-none items-center gap-1.5 text-xs text-ink-500 transition-colors hover:text-ink-800">
-            <svg viewBox="0 0 20 20" className="h-3 w-3 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>
-            查看喂给模型的完整数据切片
-          </summary>
-          <pre className="mt-2 max-h-80 overflow-auto border border-ink-200 bg-paper-100 p-3 font-mono text-2xs leading-relaxed text-ink-600">
-            {prediction.context}
-          </pre>
-        </details>
       </div>
     </article>
   )