1
2026 年世界杯将在美加墨三国举办，中文用户查赛程时常遇到 FIFA 官网英文为主、时区换算麻烦、移动端浏览体验一般、信息分散在多个页面等问题。本项目面向「中文球迷临时查赛程」这一轻量场景，不做竞猜、社区或复杂数据后台，而是把小组赛对阵、北京时间、场馆、阶段、晋级路径和观赛入口整合到一个移动端优先的静态网站里，让用户比翻官网更快确认「下一场看什么、几点开、在哪踢、电视端去哪看」。项目已部署上线（https://ppshu2026-6hz4s01hv.maozi.io/），适合作为体育赛事信息展示类个人作品。
项目包含 5 个核心模块：首页展示下一场重点比赛倒计时、今日/近期赛程、观赛信息与收藏入口；赛程页支持按日期、阶段、小组筛选和球队搜索，可打开比赛详情弹窗；晋级树以占位结构展示淘汰赛路径，不预填未产生的胜者或冠军；来源页汇总 FIFA 官方赛程链接、CCTV-5 观赛信息与邮件反馈入口；安装页提供 PWA 添加到主屏幕说明。辅助能力包括：48 支球队本地 SVG 国旗、轻量球队名片（主教练、代表球星、FIFA 参赛次数）、浏览器本地收藏（localStorage）、比赛/结果/晋级分状态管理，以及 favicon 与 PWA 图标支持。
我独立完成了该产品从 0 到 1 的前端实现与数据整理：采用 Vite + React 19 + TypeScript + TailwindCSS 纯静态架构，数据层用 src/data/ 本地 TS 文件维护 72 场小组赛、48 支球队与晋级占位树，通过 services/worldCupData.ts 解耦组件与数据源。实现亮点包括：UTC 开球时间自动换算北京时间、多维度赛程筛选、matchInfoStatus/resultStatus/advancementStatus 分状态模型、PWA manifest + service worker、桌面端晋级树样式优化。难点在于按 FIFA 官方口径人工核对赛程与队名映射、保证 48 队国旗资源一一对应、以及在不接后端的前提下用 localStorage 实现收藏。项目已通过 npm run build，发布为 V1.0.0 并部署到静态托管平台。
评论