modify team store and font

frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "formula1",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "dev": "vite --host=0.0.0.0",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build"
+  },
+  "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "element-plus": "^2.11.7",
+    "pinia": "^3.0.4",
+    "vue": "^3.5.22",
+    "vue-router": "^4.6.3"
+  },
+  "devDependencies": {
+    "@tsconfig/node22": "^22.0.2",
+    "@types/node": "^22.18.11",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "npm-run-all2": "^8.0.4",
+    "sass-embedded": "^1.93.3",
+    "typescript": "~5.9.0",
+    "vite": "^7.1.11",
+    "vite-plugin-vue-devtools": "^8.0.3",
+    "vue-tsc": "^3.1.1"
+  }
+}

frontend/src/App.vue

@@ -115,12 +115,23 @@ const hideHeader = computed(() => route.name === 'login' || route.name === 'regi
 .main {
   margin-top: 90px;
   padding: 0;
+  height: calc(100vh - 90px);
+  overflow-y: auto;
+  position: relative;
+}
+
+.main::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   background-image: url('@/assets/far.jpg');
   background-size: cover;
-  height: calc(100vh - 90px);
-  &>*{
-    backdrop-filter: blur(10px);
-  }
+  filter: blur(10px);
+  transform: scale(1.1);
+  z-index: -1;
 }
 
 .main-no-header {

frontend/src/store/Team.ts

@@ -0,0 +1,46 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useTeamsStore = defineStore('teams', () => {
+  const teamsList = ref<any[]>([])
+  const hasFetched = ref(false) 
+  const isLoading = ref(false)
+  
+  const fetchTeams = async (forceRefresh = false) => {
+    if (hasFetched.value && !forceRefresh) {
+      return teamsList.value
+    }
+    
+    isLoading.value = true
+    try {
+      const response = await fetch('/api/teams')
+      const data = await response.json()
+      
+      teamsList.value = Array.isArray(data) ? data : (data?.data ?? [])
+      
+      hasFetched.value = true  // 标记为已获取
+      return teamsList.value
+    } catch (error) {
+      console.error('获取teams失败:', error)
+      throw error
+    } finally {
+      isLoading.value = false
+    }
+  }
+  
+  const ensureTeamsLoaded = async () => {
+    if (!hasFetched.value) {        
+      await fetchTeams()
+    }
+  }
+  
+  fetchTeams(true).catch(() => {})
+  
+  return {
+    teamsList,
+    isLoading,
+    hasFetched,
+    fetchTeams,
+    ensureTeamsLoaded
+  }
+})

frontend/src/views/DriverDetail.vue

@@ -191,6 +191,14 @@ const goBack = () => {
 </script>
 
 <style scoped lang="scss">
+@font-face {
+  font-family: 'F1';
+  src: url('../assets/Formula1-Black.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 .driver-detail {
   padding: 20px;
 }
@@ -213,8 +221,13 @@ const goBack = () => {
   margin-top: 750px;
 }
 
+.info {
+  font-family: 'F1';
+}
+
 .info h1 {
   font-size: 36px;
+  font-family: 'F1';
 }
 
 .vertical-bar1 {

frontend/src/views/Drivers.vue

@@ -54,6 +54,14 @@ const goDriver = (id: number) => {
 </script>
 
 <style lang="scss" scoped>
+@font-face {
+  font-family: 'F1';
+  src: url('../assets/Formula1-Black.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 .intro h1 {
   font-size: 40px;
   font-weight: bolder;

frontend/src/views/RacePage.vue

@@ -54,7 +54,7 @@ const goResult = (type: string) => {
 <style lang="scss" scoped>
 .racepage {
     background-color: #f7f4f1;
-    height: 100%;
+    min-height: 100%;
 }
 
 .title {

frontend/src/views/TeamDetail.vue

@@ -219,6 +219,14 @@ const goResult = () => {
 </script>
 
 <style scoped lang="scss">
+@font-face {
+  font-family: 'F1';
+  src: url('../assets/Formula1-Black.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
 .team-detail {
   padding: 20px;
 }
@@ -257,6 +265,7 @@ const goResult = () => {
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  font-family: 'F1';
 }
 
 .logo {
@@ -267,6 +276,7 @@ const goResult = () => {
 
 .info h1 {
   font-size: 50px;
+  font-family: 'F1';
 }
 
 .meta {

frontend/src/views/Teams.vue

@@ -20,20 +20,21 @@ import { useRouter } from 'vue-router'
 import TeamCard from '@/components/TeamCard.vue'
 import { getColor, getCarImage, getLogo } from '@/assets/source'
 import { useDriversStore } from '@/store/SeasonDrivers'
+import { useTeamsStore } from '@/store/Team'
+import { te } from 'element-plus/es/locales.mjs'
 // import { teams } from '@/assets/source'
 
 const router = useRouter()
 const loading = ref(true)
 const error = ref('')
 const teams = ref<any[]>([])
+const teamsStore = useTeamsStore()
 const driversStore = useDriversStore()
 
 onMounted(async () => {
     try {
-        const res = await fetch('/api/teams')
-        const json = await res.json()
-        const list = Array.isArray(json) ? json : (json?.data ?? [])
-        teams.value = list.map((t: any) => ({
+        await teamsStore.ensureTeamsLoaded()
+        teams.value = teamsStore.teamsList.map((t: any) => ({
             id: t.id ?? t.teamId,
             name: t.name,
             nation: t.nation,

frontend/vite.config.ts

@@ -17,8 +17,8 @@ export default defineConfig({
   },
   server: {
     proxy: {
-      '/api': 'http://localhost:8080',
-      // '/api': 'http://10.128.50.6:8080',
+      // '/api': 'http://localhost:8080',
+      '/api': 'http://10.128.50.6:8080',
     },
   },
 })