增加联赛选择模态框

app/(tabs)/index.tsx

@@ -1,4 +1,5 @@
 import { HomeHeader } from "@/components/home-header";
+import { LeagueModal } from "@/components/league-modal";
 import { MatchCard } from "@/components/match-card";
 import { SelectionModal } from "@/components/selection-modal";
 import { CalendarModal } from "@/components/simple-calendar";
@@ -7,8 +8,8 @@ import { ThemedView } from "@/components/themed-view";
 import { IconSymbol } from "@/components/ui/icon-symbol";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
-import { fetchSports, fetchTodayMatches } from "@/lib/api";
-import { Match, Sport } from "@/types/api";
+import { fetchLeagues, fetchSports, fetchTodayMatches } from "@/lib/api";
+import { League, Match, Sport } from "@/types/api";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -27,6 +28,7 @@ export default function HomeScreen() {
   const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
 
   const [sports, setSports] = useState<Sport[]>([]);
+  const [leagues, setLeagues] = useState<League[]>([]);
   const [matches, setMatches] = useState<Match[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -34,14 +36,18 @@ export default function HomeScreen() {
   // 默认足球
   const [selectedSportId, setSelectedSportId] = useState<number | null>(1);
   const [selectedDate, setSelectedDate] = useState(new Date());
+  const [selectedLeagueKey, setSelectedLeagueKey] = useState<string | null>(null);
+  const [filterMode, setFilterMode] = useState<"time" | "league">("time"); // 时间或联赛模式
 
   // Modal Visibilities
   const [showSportModal, setShowSportModal] = useState(false);
   const [showCalendarModal, setShowCalendarModal] = useState(false);
+  const [showLeagueModal, setShowLeagueModal] = useState(false);
 
-  // Load Sports
+  // Load Sports and Leagues
   useEffect(() => {
     loadSports();
+    loadLeagues();
   }, []);
 
   // Load Matches when sport or date changes
@@ -51,6 +57,13 @@ export default function HomeScreen() {
     }
   }, [selectedSportId, selectedDate]);
 
+  // Load Leagues when sport changes
+  useEffect(() => {
+    if (selectedSportId !== null) {
+      loadLeagues();
+    }
+  }, [selectedSportId]);
+
   const loadSports = async () => {
     try {
       const apiList = await fetchSports();
@@ -102,6 +115,18 @@ export default function HomeScreen() {
     }
   };
 
+  // 加载联赛
+  const loadLeagues = async () => {
+    try {
+      if (selectedSportId !== null) {
+        const list = await fetchLeagues(selectedSportId, "");
+        setLeagues(list);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
   const loadMatches = async (sportId: number) => {
     setLoading(true);
     try {
@@ -134,14 +159,26 @@ export default function HomeScreen() {
     return t(`sports.${sportKey}`, { defaultValue: sport.name });
   };
 
+  const handleLeagueSelect = (leagueKey: string) => {
+    setSelectedLeagueKey(leagueKey);
+    console.log("Selected league:", leagueKey);
+  };
+
   const renderHeader = () => (
     <View style={styles.filterContainer}>
-      {/* Time Filter (Mock) */}
+      {/* Time/League Filter Toggle */}
       <TouchableOpacity
         style={[styles.filterBtn, { backgroundColor: filterBg }]}
+        onPress={() => setFilterMode(filterMode === "time" ? "league" : "time")}
       >
-        <IconSymbol name="time-outline" size={18} color={iconColor} />
-        <ThemedText style={styles.filterText}>{t("home.time")}</ThemedText>
+        <IconSymbol 
+          name={filterMode === "time" ? "time-outline" : "trophy-outline"} 
+          size={18} 
+          color={iconColor} 
+        />
+        <ThemedText style={styles.filterText}>
+          {filterMode === "time" ? t("home.time") : t("home.league")}
+        </ThemedText>
       </TouchableOpacity>
 
       {/* Sport Selector */}
@@ -159,19 +196,33 @@ export default function HomeScreen() {
         </ThemedText>
       </TouchableOpacity>
 
-      {/* Date Selector */}
-      <TouchableOpacity
-        style={[styles.filterBtn, { backgroundColor: filterBg }]}
-        onPress={() => setShowCalendarModal(true)}
-      >
-        <ThemedText style={styles.dateDayText}>
-          {selectedDate.getDate()}
-        </ThemedText>
-        <ThemedText style={styles.dateMonthText}>
-          {selectedDate.getHours()}:
-          {selectedDate.getMinutes().toString().padStart(2, "0")}
-        </ThemedText>
-      </TouchableOpacity>
+      {/* Date/League Selector */}
+      {filterMode === "time" ? (
+        <TouchableOpacity
+          style={[styles.filterBtn, { backgroundColor: filterBg }]}
+          onPress={() => setShowCalendarModal(true)}
+        >
+          <ThemedText style={styles.dateDayText}>
+            {selectedDate.getDate()}
+          </ThemedText>
+          <ThemedText style={styles.dateMonthText}>
+            {selectedDate.getHours()}:
+            {selectedDate.getMinutes().toString().padStart(2, "0")}
+          </ThemedText>
+        </TouchableOpacity>
+      ) : (
+        <TouchableOpacity
+          style={[styles.filterBtn, { backgroundColor: filterBg }]}
+          onPress={() => setShowLeagueModal(true)}
+        >
+          <IconSymbol name="trophy-outline" size={18} color={iconColor} />
+          <ThemedText style={styles.filterText} numberOfLines={1}>
+            {selectedLeagueKey 
+              ? leagues.find(l => l.key === selectedLeagueKey)?.name || t("home.select_league")
+              : t("home.select_league")}
+          </ThemedText>
+        </TouchableOpacity>
+      )}
     </View>
   );
 
@@ -234,6 +285,14 @@ export default function HomeScreen() {
         selectedDate={selectedDate}
         onSelectDate={setSelectedDate}
       />
+
+      <LeagueModal
+        visible={showLeagueModal}
+        onClose={() => setShowLeagueModal(false)}
+        leagues={leagues}
+        selectedLeagueKey={selectedLeagueKey}
+        onSelect={handleLeagueSelect}
+      />
     </ThemedView>
   );
 }