formula project

frontend/src/views/Drivers.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="intro">
+    <h1 style="color:white;margin-left: 20px;">F1 Drivers</h1>
+    <p style="color:white;margin-left: 20px;">Find the Formula 1 drivers for the 2025 season</p>
+  </div>
+  <el-skeleton v-if="loading" :rows="4" animated />
+  <el-empty v-else-if="error || !drivers.length" description="暂无数据" />
+  <div v-else 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.nation" :num="driver.num" :image="getImage(driver.name)"
+          :color="getColor(driver.team)" :team="driver.team" />
+      </div>
+    </template>
+  </div>
+  
+</template>
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import DriverCard from '@/components/DriverCard.vue'
+import { getColor, getImage } from '@/assets/source'
+import { useDriversStore } from '@/store/SeasonDrivers'
+
+const router = useRouter()
+const loading = ref(true)
+const error = ref('')
+const drivers = ref<any[]>([])
+const driversStore = useDriversStore()
+
+onMounted(async () => {
+  try {
+    driversStore.ensureDriversLoaded()
+    drivers.value = driversStore.driversList.map((d: any) => ({
+      id: d.id,
+      name: d.name,
+      team: d.team,
+      nation: d.country,
+      num: d.carNum,
+      birth: d.birthday
+    }))
+  } catch (e) {
+    error.value = '加载失败'
+  } finally {
+    loading.value = false
+  }
+})
+
+const goDriver = (id: number) => {
+  router.push(`/drivers/${id}`)
+}
+
+/* import { drivers } from '@/assets/source' */
+</script>
+
+<style lang="scss" scoped>
+.intro h1 {
+  font-size: 40px;
+  font-weight: bolder;
+}
+
+.intro p {
+  font-size: 20px;
+  margin-bottom: 40px;
+}
+
+.showcase {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  column-gap: 20px;
+  width: 90%;
+  margin: 0 auto;
+}
+
+.card-wrapper:hover {
+  cursor: pointer;
+}
+</style>