f1-dash轮胎历史：DriverHistoryTires.tsx更换记录追踪

f1-dash轮胎历史：DriverHistoryTires.tsx更换记录追踪

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

轮胎数据结构与组件定位

F1赛事中，轮胎策略是影响比赛结果的关键因素之一。f1-dash项目通过DriverHistoryTires.tsx组件实现了对车手轮胎更换记录的可视化追踪。该组件位于前端组件目录下的driver子文件夹中，专门负责展示单个车手的轮胎使用历史。

轮胎数据来源于state.type.ts中定义的Stint类型，包含以下核心字段：

• totalLaps: 该套轮胎使用的圈数
• compound: 轮胎类型（SOFT/MEDIUM/HARD/INTERMEDIATE/WET）
• new: 是否为新胎标记

轮胎类型与视觉表示

f1-dash支持五种轮胎类型及一种未知类型的展示，每种类型对应不同的SVG图标文件，存储在dash/public/tires/目录下：

轮胎类型	文件名	用途
SOFT	soft.svg	软胎，抓地力最强但磨损最快
MEDIUM	medium.svg	中性胎，平衡性能与耐久性
HARD	hard.svg	硬胎，耐久性最好但抓地力较弱
INTERMEDIATE	intermediate.svg	半雨胎，适用于湿滑但无积水赛道
WET	wet.svg	全雨胎，适用于明显积水赛道
UNKNOWN	unknown.svg	未知类型轮胎

组件通过unknownCompound函数判断轮胎类型是否有效：

const unknownCompound = (stint: Stint) =>
  !["soft", "medium", "hard", "intermediate", "wet"].includes(stint.compound?.toLowerCase() ?? "");

组件渲染逻辑

DriverHistoryTires.tsx采用Flex布局横向排列轮胎记录，每个轮胎项包含图标和圈数信息：

return (
  <div className="flex flex-row items-center justify-start gap-1">
    {stints &&
      stints.map((stint, i) => (
        <div className="flex flex-col items-center gap-1" key={`driver.${i}`}>
          {unknownCompound(stint) && <Image src={"/tires/unknown.svg"} width={32} height={32} alt="unknown" />}
          {!unknownCompound(stint) && stint.compound && (
            <Image
              src={`/tires/${stint.compound.toLowerCase()}.svg`} 
              width={32} 
              height={32} 
              alt={stint.compound} 
            />
          )}
          <p className="whitespace-nowrap text-sm font-medium leading-none text-zinc-600">{stint.totalLaps}L</p>
        </div>
      ))}
    {/* 加载状态处理 */}
  </div>
);

当没有轮胎数据时，组件会显示加载状态，通过LoadingTire组件渲染占位元素：

function LoadingTire() {
  return (
    <div className="flex flex-col items-center gap-1">
      <div className="h-8 w-8 animate-pulse rounded-full bg-zinc-800" />
      <div className="h-4 w-8 animate-pulse rounded-md bg-zinc-800" />
    </div>
  );
}

实际应用场景

该组件主要用于以下功能模块：

• 车手详情卡片：展示当前车手的轮胎更换历史
• 比赛策略分析：通过不同颜色的轮胎图标直观比较不同车手的策略差异
• 历史数据回顾：在比赛回放模式中追踪轮胎变化对圈速的影响

轮胎历史记录为观众提供了理解比赛策略的关键视角，特别是在天气变化频繁的比赛中，通过DriverHistoryTires.tsx展示的轮胎更换记录，可以清晰看到车队如何根据赛道条件调整策略。

扩展与定制

如果需要扩展轮胎类型或修改视觉样式，可以：

1. 在dash/public/tires/目录添加新的轮胎图标
2. 修改unknownCompound函数添加新的轮胎类型判断
3. 调整组件的CSS类来自定义布局和样式
4. 在state.type.ts的Stint类型中添加新的轮胎属性

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