企业官网建设流程全解析

f1-dash：把 F1 实时数据搬上副屏的开源仪表盘

【免费下载链接】f1-dashA real-time F1 dashboard项目地址: https://gitcode.com/GitHub_Trending/f1/f1-dash

f1-dash是一个开源的F1 实时数据仪表盘：后端直接订阅 F1 官方直播计时接口，前端把排名、圈速差距、轮胎、迷你赛段、天气、赛事消息、车队无线电全部摊在一张看板上。整套系统由 Next.js 前端和一个 Rust 工作区组成，还附带数据录制与回放工具，非比赛日也能完整复现一场赛事的数据流。

项目定位 🏁

看直播时你可能已经注意到几个问题：官方画面比真实比赛慢上几秒；解说只会报前三；你想盯自己的车队换胎时机、某个赛段被对手拿走多少，却没有任何渠道。f1-dash 的思路很直接——既然 F1 官方本来就对浏览器开放直播计时流，那就把它接回来，重组成一块"自己说了算"的副屏。它读取的是livetiming.formula1.com的 SignalR WebSocket 数据，前端负责呈现，中间不经过任何第三方转发。

仪表盘能力全景

按页面模块划分，看板覆盖四类信息，对应 dash/src/components/ 下的组件目录：

• 计时与排名：LeaderBoard 实时排名、LapCount 圈数、Qualifying 排位成绩与分段详情；
• 单台赛车细节：DriverCarMetrics.tsx 的油门/刹车踏板、DriverDRS.tsx 的 DRS 开关、DriverTire.tsx 的当前轮胎与 DriverHistoryTires.tsx 的换胎历史、DriverGap 的圈速差距；
• 赛道与事件：Map.tsx 上的车手位置点、RaceControl.tsx 赛事消息、TeamRadios.tsx 车队无线电、WeatherInfo.tsx 天气与 TrackStatus 赛道旗语；
• 赛事安排：dash/src/app/(nav)/schedule//schedule/) 的赛季日程、下一轮倒计时、赛周末时间表。

数据更新由 ConnectionStatus.tsx 显示连接状态，SessionInfo.tsx 标注当前场次。

架构拆解：一条 SSE 管道串起前后端

前端

dash/package.json 里能看清栈：Next.js 15、React 18、Zustand 管状态、Tailwind 写样式。浏览器不直连 F1 官方，而是订阅后端live服务推的 SSE 流：先推一份 deflate 压缩的初始全量状态（前端用 pako 解压，见 inflate.ts），之后只推增量消息，另有 10 秒心跳保活。

后端

Rust 工作区定义在 Cargo.toml，六个 crate 各司其职：

• crates/live/：核心服务。连上 F1 官方 WebSocket（或指向 simulator），持续合并消息、维护全量状态，再以 SSE 吐给浏览器，实现见 live.rs；
• crates/api/：解析 ical 赛程文件，输出当前赛季日程的 JSON；
• crates/data/：消息模型、压缩与合并逻辑，compression.rs 与 merge.rs；
• crates/client/：共享的 SignalR 客户端，consts.rs 里列出了订阅的 18 个数据主题，包括 CarData、Position、TimingData、WeatherData、TrackStatus、RaceControlMessages、TeamRadio、SessionInfo 等。

一句话概括数据链路：F1 官方 WebSocket →live合并维护状态 → SSE 推给浏览器；赛程走独立的api服务。前端只消费 HTTP/SSE，两条通道互不干扰。

三种落地场景

1. 观赛副屏：电视播比赛，另一块屏跑 f1-dash，投屏给一起看车的朋友——差距是 0.2 秒还是 1.5 秒，一眼可见；
2. 赛后复盘：用saver录下的比赛文件配合simulator回放（下文有讲），逐段回看某次进站前后的节奏变化；
3. 学习素材：一条"WebSocket 接入 → 状态合并 → SSE 下发"的完整管道，代码量不大，适合照着读懂真实遥测数据是怎么落地的。

三步跑通本地环境

环境要求：Node（推荐 nvm）、yarn（corepack）、Rust（推荐 rustup）。本地开发要开 4 个终端（前端、live、api、可选的 simulator），yarn dev、cargo r -p live、cargo r -p api分别启动。嫌麻烦可以直接上容器：

docker compose up

docker-compose.yaml 会把三个服务一次拉起：前端 3000、live 4000、api 4001。完整步骤（含 .env 配置与构建命令）见 CONTRIBUTING.md。

非比赛时段如何模拟数据源

比赛一周只有一两天，剩下的日子怎么调页面？项目内置了一对"录制 + 回放"工具，见 crates/saver/ 与 crates/simulator/：

• saver：连接 F1 官方 WebSocket，把消息逐条写进本地文件（cargo r -p saver 文件名），一场赛事录下来就是一个.data.txt；
• simulator：读取录制文件，逐行还原成 WebSocket 流对外提供。live服务可以直接连它，前端无感知地"重新比赛"。

这套组合的意义在于：任何依赖实时数据的改动作，都可以拿到确定、可重复的输入。

参与社区

项目是社区作品，与 F1 官方无关联（见 README.md 的声明）。想动手的话，GitHub issues 里标记为 "Good First Issue" 的问题是推荐入口；分支走 git flow 风格命名，提交信息遵循 conventional commits，具体流程在 CONTRIBUTING.md 里有完整说明。

【免费下载链接】f1-dashA real-time F1 dashboard项目地址: https://gitcode.com/GitHub_Trending/f1/f1-dash