预见足球 AI — 世界杯赛事 AI 智能预测小程序

一、项目概述

2026 年 FIFA 世界杯即将来临，球迷和竞猜爱好者需要一款能整合赛事数据、AI 预测与赔率信息的一站式工具。然而现有应用要么仅有赛程展示，要么预测维度单一，缺少将 AI 预测、市场预期、博彩赔率进行多维度对比的综合平台。

预见足球 AI 是一款基于 uni-app + Vue 3 构建的微信小程序，接入 BSD Sports Data API 获取赛事与预测数据，为用户提供 48 支参赛球队的赛程浏览、积分榜排名、AI 智能预测推荐、Polymarket 市场预期与多公司赔率对比，帮助用户从多个角度评估比赛走向。

项目形态：微信小程序（主力）+ 多端适配
核心能力：赛事数据展示、AI 预测推荐、赔率对比、市场预期、积分榜计算、微信一键登录
适用场景：世界杯赛事追踪、AI 预测参考、竞猜策略辅助

二、业务痛点与目标

痛点

赛事信息分散在官网、体育 App、社交媒体，缺乏聚合展示
AI 预测、市场预期、博彩赔率三个维度各自独立，无法同屏对比
积分榜数据需手动计算，小组出线形势判断困难
48 支参赛队伍，赛程密集，用户难以快速找到关注球队的比赛

目标

将赛事赛程、AI 预测、市场预期、赔率信息整合在同一应用
提供多维度对比：AI 推荐概率 vs 市场预期概率 vs 博彩赔率，辅助决策
自动计算积分榜，支持按球队筛选查看所有比赛
提供48 队全量中文名映射与队徽加载，降低认知门槛

三、技术方案与架构

技术栈

层级	技术	说明
跨平台框架	uni-app (DCloud)	微信小程序为主力平台
前端框架	Vue 3（Composition API）	`<script setup>` 模式
样式方案	SCSS + rpx 响应式	uni.scss 全局变量
云服务	uniCloud 阿里云	用户认证 + 云函数 + 云数据库
数据源	BSD Sports Data API v2	赛事、预测、赔率、场馆
认证方案	微信一键登录（openid）	Token SHA-256 签发
构建工具	Vite + @dcloudio/vite-plugin-uni	HBuilderX 管理
图标方案	jk-icon (iconify)	SVG 图标自定义字体

数据流架构

BSD Sports Data API (UTC)
        │
        ▼
   API 封装层 (api/)
   ├── client.js      # uni.request + Token 注入 + 超时处理
   ├── events.js      # 赛事列表 + 单场详情
   ├── predictions.js # AI 预测列表 + 单场预测
   ├── standings.js   # 积分榜计算逻辑
   ├── team-names.js  # 48 队英→中映射 + 队徽 CDN
   └── time.js        # UTC ↔ 北京时间转换
        │
        ▼
   页面层 (pages/)
   ├── 首页        # 今日赛事 + AI 预测卡片
   ├── 赛事页      # 积分榜 + 分类浏览 + 球队筛选
   ├── AI 预测页   # 日期筛选 + 预测统计
   ├── 详情页      # AI 预测 + 市场预期 + 赔率对比
   └── 我的        # 登录/注销/使用说明
        │
        ▼
   uniCloud 阿里云
   ├── user 云函数  # 登录/验证/退出/注销
   └── users 表    # openid + Token + 注册时间

项目组织

预见足球AI/
├── api/                           # API 封装层
│   ├── config.js                  # API Token + Base URL + 世界杯联赛 ID
│   ├── client.js                  # uni.request 封装（Token 注入、超时、错误处理）
│   ├── events.js                  # 赛事列表 + 单场详情接口
│   ├── predictions.js             # AI 预测列表 + 单场预测接口
│   ├── team-names.js              # 48 队英→中映射 + 队徽 CDN URL
│   ├── time.js                    # UTC ↔ 北京时间转换工具
│   ├── standings.js               # 积分榜计算逻辑
│   └── user.js                    # 用户登录/Token 管理/注销
├── pages/                         # 页面
│   ├── index/index.vue            # 首页（世界杯横幅 + 今日赛事 + 数据洞察）
│   ├── matches/index.vue          # 赛事页（积分榜 + 分类浏览 + 球队筛选）
│   ├── ai-predict/index.vue       # AI 预测页（日期筛选 + 预测统计 + 准确率）
│   ├── detail/index.vue           # 比赛详情页（AI 预测 + 市场预期 + 赔率对比）
│   ├── profile/index.vue          # 我的页面（微信登录 + 使用说明 + 注销）
│   └── login/index.vue            # 独立登录页（备用入口）
├── components/
│   └── CustomTabBar/              # 自定义胶囊样式底部导航
├── uniCloud-aliyun/               # uniCloud 云服务
│   ├── cloudfunctions/user/       # 用户认证云函数
│   └── database/users.schema.json # 用户表 Schema
└── static/                        # 静态资源 + 图标字体

四、核心功能实现

1）首页 — 今日赛事与 AI 预测

世界杯横幅：纯 CSS 绘制足球场线条（中圈、点球区、球门），深绿色背景 + "进行中"徽章
今日赛事卡片：小组/轮次标签、北京时间、主客队名 + 圆形队徽、比分（完赛/进行中）
AI 预测进度条：主胜/平局/客胜概率可视化 + 推荐标签（主胜/平局/客胜）
预测结果缎带：完赛后对比 AI 预测与实际结果，45° 旋转显示"已中"（绿色）/ "未中"（红色）
数据洞察卡片：今日赛事场数 + 预测准确率统计
支持下拉刷新和错误重试

2）赛事页 — 积分榜与分类浏览

两行 Tab 导航：积分榜、全部比赛、小组赛、1/16 决赛、1/8 决赛、1/4 决赛、半决赛、季军赛、决赛
积分榜：按字母分组的 48 队积分表（排名、队徽、场次、胜/平/负、净胜球、积分），支持组别筛选
比赛列表：按分组头（如"小组赛·第一轮 3 场"）分类展示
日期筛选：横向滚动芯片选择器，支持"全部"和具体日期
球队筛选：点击积分榜队伍自动跳转查看该队所有比赛

3）AI 预测页 — 多维度预测分析

日期筛选：双日滚动（全部 + 今天 + 未来天数），切换日期自动拉取对应预测
统计卡片：已预测场次数 + 预测准确率
预测卡片：与首页一致的 AI 推荐展示 + 进度条 + 百分比
预测字段：
- 胜平负概率（prob_home / prob_draw / prob_away）
- 预期进球（expected_goals）
- 大小球概率（over_under：1.5/2.5/3.5）
- 双方进球概率（btts）
- 最可能比分（most_likely）
- 模型置信度（confidence）

4）比赛详情页 — 多维度对比

沉浸式头部：深色背景 + 自定义导航栏 + 对阵信息（队徽 + 队名 + 比分 + 半场比分）
AI 预测区：主胜/平局/客胜三进度条 + 推荐标签 + 预期进球 + 进球概率 + 最可能比分 + 大球概率 + 置信度
市场预期（Polymarket）：1x2 胜率、半场结果、大小球、让球、双方进球、精确比分 Top 10、进球球员预测
赔率对比：博彩公司最佳赔率（主胜/平局/客胜/大小球/双方进球）+ 多公司赔率详细列表

5）用户认证系统

基于 uniCloud 阿里云 + 微信 openid
云函数处理 login / checkToken / logout / deleteAccount
Token SHA-256 生成，30 天有效期
App.vue 在 onLaunch 中静默验证已有 Token
已登录用户显示彩色头像（基于 openid hash 计算颜色）+ ID + 注册时间

6）自定义胶囊 TabBar

禁用原生 TabBar，使用 CustomTabBar 组件实现圆角胶囊样式
四个 Tab：首页（足球图标）、赛事（奖杯）、AI 预测（机器人）、我的（用户）
选中项绿色填充 + 白色图标，未选中灰色
支持安全区适配

五、项目效果

将赛事信息、AI 预测、市场预期、博彩赔率整合在同一界面，免去多平台切换
通过 AI 预测概率进度条和推荐标签，用户可快速获取预测结论
积分榜自动计算 + 球队筛选，帮助用户快速定位关注球队的比赛
预测结果缎带直观展示 AI 预测准确率，建立用户信任

六、技术亮点

时区处理

API 全部使用 UTC 时间，前端展示使用北京时间（UTC+8）
utcWindowForBeijing() 生成精确 UTC 窗口，避免跨日边界问题
toBeijingTime() / toBeijingLabel() 统一转换展示格式

48 队全量映射

api/team-names.js 包含全部 48 支世界杯参赛队英文到中文映射
队徽通过 CDN 加载（https://sports.bzzoiro.com/img/team/{team_id}/）
图片加载失败时显示中文队名首字兜底（如"中"代表"中国"）

空值兜底

预测数据在比赛临近时才生成，代码已做"暂无预测"空值处理
API 请求封装统一超时和错误处理，网络异常时展示重试按钮

七、可扩展与复盘

实时比分推送：接入 WebSocket 实现实时比分更新
用户预测竞猜：支持用户提交自己的预测，与 AI 对比排名
历史赛事分析：积累完赛数据后提供球队/联赛维度的历史统计
社交分享：分享预测结果到微信好友/朋友圈
多语言支持：扩展英文、日文等国际化版本
多联赛覆盖：除世界杯外支持欧洲杯、英超、西甲等主流联赛