2026世界杯实时看板, 支持AI聊天/竞猜/预测等

先看一下效果

它能做什么

• 3D 地球仪：48 支参赛队标注在地球上，按小组着色，点击球队查看积分和战绩；今日赛事双方用金色弧线连接，点击弧线直接跳到比赛详情
• 实时赛程：覆盖最近 ±4 天比赛，点击任意场次展开完整时间线（进球 / 换人 / 黄红牌）
• 12 小组积分榜：每 30 分钟自动更新，完整积分 / 净胜球 / 近期状态
• 赛事预测：结合 DraftKings 赔率和积分数据生成胜负概率，带详细分析
• AI 助手：内置 Claude 聊天，用你自己的 Anthropic API Key，Key 只存本地浏览器

中英文双语，一键切换。

技术架构

整个项目没有后端，没有构建工具，没有 npm install。

浏览器 ─── 读取 data/*.json ──── GitHub Pages（静态文件） ↑ GitHub Actions（每 30 分钟） │ sports-skills CLI （ESPN API，无需 Key）

核心技术选型

为什么不用框架

纯 HTML + ES Modules，加载速度极快，也方便任何人 fork 后直接改。Three.js 通过 importmap 从 CDN 加载，页面打开就能用，没有任何构建步骤。

数据更新机制

# .github/workflows/fetch-data.yml on: schedule: - cron: '*/30 * * * *' # 每 30 分钟

Action 跑 Python 脚本，调用 sports-skills CLI 抓 ESPN 数据，写入data/*.json，commit 后触发 Pages 重新部署。比赛期间数据延迟不超过 30 分钟。

3D 地球仪实现要点

地球仪基于 Three.js，核心是用经纬度坐标把球队标注到球面：

function latLonToVec(lat, lon, r = 1.02) { const phi = (90 - lat) * Math.PI / 180; const theta = (lon + 180) * Math.PI / 180; return new THREE.Vector3( Math.sin(phi) * Math.cos(theta) * r, Math.cos(phi) * r, Math.sin(phi) * Math.sin(theta) * r ); }

今日赛事连线用二次贝塞尔曲线生成弧线，拱起高度根据两点中点距球心的距离自动计算，视觉上有自然的弧度感：

function makeArc(p1, p2, color) { const mid = p1.clone().add(p2).multiplyScalar(0.5); const lift = 1 + 0.35 * (1 - mid.length()); mid.normalize().multiplyScalar(lift + 0.2); // 二次贝塞尔采样 const pts = []; for (let t = 0; t <= 1; t += 0.02) { pts.push( p1.clone().multiplyScalar((1-t)*(1-t)) .add(mid.clone().multiplyScalar(2*t*(1-t))) .add(p2.clone().multiplyScalar(t*t)) ); } return new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), ...); }

AI 助手的实现细节