实现首页功能，添加体育项目和今日比赛数据的加载，更新国际化文本，新增选择和日历模态框组件

app/(tabs)/index.tsx

@@ -1,15 +1,168 @@
 import { HomeHeader } from "@/components/home-header";
+import { MatchCard } from "@/components/match-card";
+import { SelectionModal } from "@/components/selection-modal";
+import { CalendarModal } from "@/components/simple-calendar";
+import { ThemedText } from "@/components/themed-text";
 import { ThemedView } from "@/components/themed-view";
-import React from "react";
-import { ScrollView, StyleSheet } from "react-native";
+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 React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ActivityIndicator,
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
 
 export default function HomeScreen() {
+  const { theme } = useTheme();
+  const { t } = useTranslation();
+  const isDark = theme === "dark";
+  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
+  const filterBg = isDark ? "#2C2C2E" : "#F2F2F7";
+
+  const [sports, setSports] = useState<Sport[]>([]);
+  const [matches, setMatches] = useState<Match[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  // Selection States
+  const [selectedSportId, setSelectedSportId] = useState<number | null>(null);
+  const [selectedDate, setSelectedDate] = useState(new Date());
+
+  // Modal Visibilities
+  const [showSportModal, setShowSportModal] = useState(false);
+  const [showCalendarModal, setShowCalendarModal] = useState(false);
+
+  // Load Sports
+  useEffect(() => {
+    loadSports();
+  }, []);
+
+  // Load Matches when sport or date changes
+  useEffect(() => {
+    if (selectedSportId !== null) {
+      loadMatches(selectedSportId);
+    }
+  }, [selectedSportId, selectedDate]);
+
+  const loadSports = async () => {
+    try {
+      const list = await fetchSports();
+      setSports(list);
+      if (list.length > 0) {
+        setSelectedSportId(list[0].id);
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  const loadMatches = async (sportId: number) => {
+    setLoading(true);
+    try {
+      // Pass selectedDate if API supported it
+      const list = await fetchTodayMatches(sportId);
+      setMatches(list);
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const currentSport = sports.find((s) => s.id === selectedSportId);
+
+  const renderHeader = () => (
+    <View style={styles.filterContainer}>
+      {/* Time Filter (Mock) */}
+      <TouchableOpacity
+        style={[styles.filterBtn, { backgroundColor: filterBg }]}
+      >
+        <IconSymbol name="time-outline" size={18} color={iconColor} />
+        <ThemedText style={styles.filterText}>{t("home.time")}</ThemedText>
+      </TouchableOpacity>
+
+      {/* Sport Selector */}
+      <TouchableOpacity
+        style={[
+          styles.filterBtn,
+          styles.mainFilterBtn,
+          { backgroundColor: filterBg },
+        ]}
+        onPress={() => setShowSportModal(true)}
+      >
+        <IconSymbol name="football-outline" size={18} color={iconColor} />
+        <ThemedText style={styles.filterText}>
+          {currentSport ? currentSport.name : t("home.select_sport")}
+        </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>
+    </View>
+  );
+
   return (
     <ThemedView style={styles.container}>
       <HomeHeader />
-      <ScrollView contentContainerStyle={styles.content}>
-        {/* Placeholder for future content */}
-      </ScrollView>
+
+      {renderHeader()}
+
+      {loading ? (
+        <View style={styles.center}>
+          <ActivityIndicator size="large" color={Colors[theme].tint} />
+          <ThemedText style={{ marginTop: 10 }}>{t("home.loading")}</ThemedText>
+        </View>
+      ) : (
+        <FlatList
+          data={matches}
+          keyExtractor={(item) => item.id}
+          renderItem={({ item }) => <MatchCard match={item} />}
+          contentContainerStyle={styles.listContent}
+          ListEmptyComponent={
+            <View style={styles.center}>
+              <ThemedText>{t("home.no_matches")}</ThemedText>
+            </View>
+          }
+        />
+      )}
+
+      {/* Modals */}
+      <SelectionModal
+        visible={showSportModal}
+        onClose={() => setShowSportModal(false)}
+        title={t("home.select_sport")}
+        options={sports.map((s) => ({
+          id: s.id,
+          label: s.name,
+          value: s.id,
+        }))}
+        selectedValue={selectedSportId}
+        onSelect={setSelectedSportId}
+      />
+
+      <CalendarModal
+        visible={showCalendarModal}
+        onClose={() => setShowCalendarModal(false)}
+        selectedDate={selectedDate}
+        onSelectDate={setSelectedDate}
+      />
     </ThemedView>
   );
 }
@@ -18,7 +171,52 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  content: {
+  center: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingTop: 50,
+  },
+  filterContainer: {
+    flexDirection: "row",
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    gap: 12,
+  },
+  filterBtn: {
+    flex: 1,
+    height: 44, // Increased from 36
+    flexDirection: "column", // Stacked logic for Date, or Row for others
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 8, // Rounded corners
+    // iOS shadow
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 2,
+    // Android elevation
+    elevation: 2,
+  },
+  mainFilterBtn: {
+    flex: 2, // Wider for sport
+    flexDirection: "row",
+    gap: 8,
+  },
+  filterText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  dateDayText: {
+    fontSize: 16,
+    fontWeight: "bold",
+  },
+  dateMonthText: {
+    fontSize: 10,
+    opacity: 0.6,
+  },
+  listContent: {
     padding: 16,
+    paddingTop: 8,
   },
 });