formula1/frontend/src/views/TeamDetail.vue

<template>
  <div class="team-detail" v-if="team">
    <div class="header" :style="{ background: getColor(team.name) }">
      <div class="horizontal-bar1">
        <svg viewBox="0 0 1000 500" preserveAspectRatio="none">
          <rect x="0" y="0" width="350" height="15" fill="white" opacity="1" />
          <rect x="0" y="18" width="350" height="15" fill="white" opacity="1" />
        </svg>
      </div>
      <div class="horizontal-bar2">
        <svg viewBox="0 0 1000 500" preserveAspectRatio="none">
          <rect x="0" y="0" width="350" height="15" fill="white" opacity="1" />
          <rect x="0" y="18" width="350" height="15" fill="white" opacity="1" />
        </svg>
      </div>
      <div class="car">
        <img :src="getCarImage(team.name)" alt="car">
      </div>
      <div class="info">
        <h1>{{ team.name }}</h1>
        <div class="meta">{{ team.country }}</div>
        <div class="drivers"><span>{{ team_sttt.drivers[0] }}</span><span> | </span><span>{{ team_sttt.drivers[1] }}</span></div>
        <img :src="getLogo(team.name)" alt="logo" class="logo">
      </div>
    </div>
    <div class="stat">
      <div class="drivershow">
        <h2>车手</h2>
        <div class="showcase">
          <template v-for="driver in drivers" :key="driver.id">
            <div class="card-wrapper" @click="goDriver(driver.id)">
              <DriverCard :name="driver.name" :nation="driver.country" :num="driver.carNum" :image="getImage(driver.name)"
                :color="getColor(team.name)" :team="team.name" />
            </div>
          </template>
        </div>
        <div class="redgap"></div>
        <div class="redgap"></div>
      </div>
      <div class="bio">
        <div class="intro">
          <h2>简介<br></br>2025赛季</h2>
          <div class="content">
            <div class="content-row line">
              <div class="content-col">
                <span class="label">赛季排名</span><br>
                <span class="value">{{ team_sttt.rank }}</span>
              </div>
              <div class="content-col">
                <span class="label">赛季得分</span><br>
                <span class="value">{{ team_sttt.total_score }}</span>
              </div>
            </div>
            <div class="content-row">
              <div class="content-col">
                <span class="label">正赛次数</span><br>
                <span class="value">{{ team_sttt.formal.totalCnt }}</span>
              </div>
              <div class="content-col">
                <span class="label">正赛积分</span><br>
                <span class="value">{{ team_sttt.formal.scoreSum }}</span>
              </div>
            </div>
            <div class="content-row">
              <div class="content-col">
                <span class="label">正赛胜场</span><br>
                <span class="value">{{ team_sttt.formal.gold }}</span>
              </div>
              <div class="content-col">
                <span class="label">正赛领奖台</span><br>
                <span class="value">{{ team_sttt.formal.medal }}</span>
              </div>
            </div>
            <div class="content-row">
              <div class="content-col">
                <span class="label">正赛杆位</span><br>
                <span class="value">{{ team_sttt.formal.pole }}</span>
              </div>
              <div class="content-col">
                <span class="label">正赛前十</span><br>
                <span class="value">{{ team_sttt.formal.topTen }}</span>
              </div>
            </div>
            <div class="content-row line">
              <div class="content-col">
                <span class="label">最快单圈</span><br>
                <span class="value">{{ team_sttt.formal.fastestLap }}</span>
              </div>
              <div class="content-col">
                <span class="label">未完赛</span><br>
                <span class="value">{{ team_sttt.formal.unfinished }}</span>
              </div>
            </div>
            <div class="content-row">
              <div class="content-col">
                <span class="label">冲刺赛次数</span><br>
                <span class="value">{{ team_sttt.sprint.totalCnt }}</span>
              </div>
              <div class="content-col">
                <span class="label">冲刺赛积分</span><br>
                <span class="value">{{ team_sttt.sprint.scoreSum }}</span>
              </div>
            </div>
            <div class="content-row">
              <div class="content-col">
                <span class="label">冲刺赛胜场</span><br>
                <span class="value">{{ team_sttt.sprint.gold }}</span>
              </div>
              <div class="content-col">
                <span class="label">冲刺赛领奖台</span><br>
                <span class="value">{{ team_sttt.sprint.medal }}</span>
              </div>
            </div>
            <div class="content-row line">
              <div class="content-col">
                <span class="label">冲刺赛杆位</span><br>
                <span class="value">{{ team_sttt.sprint.pole }}</span>
              </div>
              <div class="content-col">
                <span class="label">冲刺赛前十</span><br>
                <span class="value">{{ team_sttt.sprint.topTen }}</span>
              </div>
            </div>
          </div>
          <div class="toresult">
            <el-button type="primary" @click="goResult">详细比赛结果</el-button>
          </div>
        </div>
        <div class="statics">
          <h2>生涯数据</h2>
          <div class="content">
            <div class="statics-row line">
              <span class="item">参加比赛场次</span>
              <span class="itemvalue">{{ tc?.races }}</span>
            </div>
            <div class="statics-row line">
              <span class="item">历史积分</span>
              <span class="itemvalue">{{ tc?.points }}</span>
            </div>
            <div class="statics-row line">
              <span class="item">最佳完赛成绩</span>
              <span class="itemvalue">{{ tc?.hf }}</span>
            </div>
            <div class="statics-row line">
              <span class="item">领奖台数</span>
              <span class="itemvalue">{{ tc?.podiums }}</span>
            </div>
            <div class="statics-row line">
              <span class="item">最佳发车位次</span>
              <span class="itemvalue">{{ tc?.hg }}</span>
            </div>
            <div class="statics-row line">
              <span class="item">杆位数</span>
              <span class="itemvalue">{{ tc?.polepositions }}</span>
            </div>
            <div class="statics-row">
              <span class="item">世界冠军数</span>
              <span class="itemvalue">{{ tc?.wc }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="actions">
      <el-button @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getColor, getCarImage, getLogo, getImage } from '@/assets/source'
import DriverCard from '@/components/DriverCard.vue'
import { team_career } from '@/assets/source'

const route = useRoute()
const router = useRouter()

const team = ref<any>()
const drivers = ref<any[]>([])
const team_sttt = ref<any>()
const tc = computed(() => team_career.find((t: any) => t.name === team.value.name))

onMounted(async () => {
  const id = Number(route.params.id)
  try {
    const [teamRes, driverRes] = await Promise.all([
      fetch('/api/teams'),
      fetch('/api/season-drivers?season=2025')
    ])
    const teamJson = await teamRes.json()
    const driverJson = await driverRes.json()
    const teamList = Array.isArray(teamJson) ? teamJson : (teamJson?.data ?? [])
    const driverList = Array.isArray(driverJson) ? driverJson : (driverJson?.data ?? [])
    team.value = teamList.find((t: any) => (t.id ?? t.teamId) === id)
    const sttRes = await fetch(`/api/teams/${id}/statistics?season=2025`)
    team_sttt.value = await sttRes.json()
    drivers.value = driverList.filter((d: any) => team_sttt.value.drivers.includes(d.name))
  } catch (e) {
    team.value = undefined
    drivers.value = []
  }
})

const goDriver = (id: number) => {
  router.push(`/drivers/${id}`)
}

const goBack = () => {
  router.push('/teams')
}

const goResult = () => {
  const t = team.value
  if (!t) return
  router.push(`/teams/${t.id}/results`)
}
</script>

<style scoped lang="scss">
.team-detail {
  padding: 20px;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  border-radius: 20px 20px 0 0;
  position: relative;
  height: 600px;
  overflow: hidden;
}

.horizontal-bar1,
.horizontal-bar2 {
  position: absolute;
  width: 100%;
  height: 100%;
}

.horizontal-bar1 {
  top: 350px;
  left: 0;
}

.horizontal-bar2 {
  top: 350px;
  left: 65%;

}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.logo {
  width: 50px;
  height: 50px;
  margin-top: 50px;
}

.info h1 {
  font-size: 50px;
}

.meta {
  color: #666;
}

.drivers {
  margin-top: 6px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0 10px;
}

.drivers span:first-child {
  justify-self: end;
}

.car {
  margin-top: 60px;
}

.car img {
  display: block;
  width: 60vw;
  margin: 0 auto;
}

.stat {
  background-color: #1c1c25;
  color: #fff;
  padding: 20px;
  border-radius: 0 0 20px 20px;
}

.drivershow {
  width: 90%;
  margin: 0 auto;
}

.drivershow h2 {
  font-size: 40px;
}

.showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 20px;
}

.redgap {
  height: 10px;
  background-color: red;
  margin-bottom: 5px;
}

.bio {
  background-color: #1c1c25;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding-bottom: 30px;
  border-radius: 0 0 20px 20px;
}

.intro {
  width: 45%;
}

.statics {
  width: 45%;
  border-radius: 20px;
  background-color: #303037;
  margin-top: 150px;
}

.intro h2,
.statics h2 {
  font-size: 40px;
  margin-top: 0;
  padding-top: 40px;
}

.statics h2 {
  text-align: center;
}

.content-row {
  display: flex;
  margin-bottom: 20px;
}

.content-col {
  width: 50%;
  padding: 0;
}

.label {
  font-size: 14px;
  color: #aaaaaa;
}

.value {
  font-weight: bold;
  font-size: 25px;
  display: block;
  margin-top: 10px;
}

.line {
  border-bottom: 2px solid gray;
}

.statics .content {
  width: 90%;
  margin: 0 auto;
}

.statics-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20px;
  align-items: center;
}

.item {
  font-size: 14px;
  color: #aaaaaa;
}

.itemvalue {
  font-weight: bold;
  font-size: 25px;
}

.actions {
  margin-top: 20px;
}
</style>