切换联赛组件

app/(tabs)/index.tsx

@@ -1,6 +1,7 @@
 import { HomeHeader } from "@/components/home-header";
 import { LeagueModal } from "@/components/league-modal";
 import { MatchCard } from "@/components/match-card";
+import { MatchCardLeague } from "@/components/match-card-league";
 import { SelectionModal } from "@/components/selection-modal";
 import { CalendarModal } from "@/components/simple-calendar";
 import { ThemedText } from "@/components/themed-text";
@@ -495,9 +496,13 @@ export default function HomeScreen() {
         <FlatList
           data={matches}
           keyExtractor={(item) => item.id}
-          renderItem={({ item }) => (
-            <MatchCard match={item} onFavoriteToggle={handleFavoriteToggle} />
-          )}
+          renderItem={({ item }) =>
+            filterMode === "time" ? (
+              <MatchCard match={item} onFavoriteToggle={handleFavoriteToggle} />
+            ) : (
+              <MatchCardLeague match={item} onFavoriteToggle={handleFavoriteToggle} />
+            )
+          }
           contentContainerStyle={styles.listContent}
           ListEmptyComponent={
             <View style={styles.center}>

components/match-card-league.tsx

@@ -0,0 +1,179 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { addFavorite, removeFavorite } from "@/lib/api";
+import { Match } from "@/types/api";
+import { useRouter } from "expo-router";
+import React, { useState } from "react";
+import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
+
+interface MatchCardLeagueProps {
+  match: Match;
+  onPress?: (match: Match) => void;
+  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
+}
+
+export function MatchCardLeague({
+  match,
+  onPress,
+  onFavoriteToggle,
+}: MatchCardLeagueProps) {
+  const router = useRouter();
+  const { theme } = useTheme();
+  const [isFav, setIsFav] = useState(match.fav);
+  const [loading, setLoading] = useState(false);
+
+  // 当外部传入的 match.fav 改变时，更新内部状态
+  React.useEffect(() => {
+    setIsFav(match.fav);
+  }, [match.fav]);
+
+  const isDark = theme === "dark";
+  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
+  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const borderColor = isDark ? "#38383A" : "#E5E5EA";
+
+  const handlePress = () => {
+    if (onPress) {
+      onPress(match);
+    } else {
+      router.push(`/match-detail/${match.id}`);
+    }
+  };
+
+  const toggleFavorite = async () => {
+    if (loading) return;
+    setLoading(true);
+    const newFavState = !isFav;
+    try {
+      if (newFavState) {
+        await addFavorite({
+          matchId: parseInt(match.id),
+          type: "match",
+          typeId: match.id,
+          notify: true,
+        });
+      } else {
+        await removeFavorite({
+          type: "match",
+          typeId: match.id,
+        });
+      }
+      setIsFav(newFavState);
+      if (onFavoriteToggle) {
+        onFavoriteToggle(match.id, newFavState);
+      }
+    } catch (error) {
+      console.error("Toggle favorite error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Pressable
+      onPress={handlePress}
+      style={({ pressed }) => [
+        styles.card,
+        { backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
+      ]}
+    >
+      <View style={styles.header}>
+        <View
+          style={[
+            styles.leagueBadge,
+            { backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
+          ]}
+        >
+          <ThemedText style={styles.leagueText} numberOfLines={1}>
+            {match.league}
+          </ThemedText>
+        </View>
+        <ThemedText style={styles.timeText}>{match.time}</ThemedText>
+      </View>
+
+      <View style={styles.teamsContainer}>
+        <ThemedText type="defaultSemiBold" style={styles.teamsText}>
+          {match.home} vs2 {match.away}
+        </ThemedText>
+        <View style={styles.scoreContainer}>
+          <ThemedText type="defaultSemiBold" style={styles.scoreText}>
+            {match.scoreText}
+          </ThemedText>
+          <TouchableOpacity
+            onPress={(e) => {
+              e.stopPropagation();
+              toggleFavorite();
+            }}
+            disabled={loading}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+          >
+            <IconSymbol
+              name={isFav ? "star" : "star-outline"}
+              size={24}
+              color={isFav ? "#FFD700" : iconColor}
+            />
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      {match.meta && (
+        <ThemedText style={styles.metaText}>{match.meta}</ThemedText>
+      )}
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 12,
+    marginBottom: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  leagueBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    marginRight: 8,
+    maxWidth: "70%",
+  },
+  leagueText: {
+    fontSize: 12,
+    opacity: 0.7,
+  },
+  timeText: {
+    fontSize: 12,
+    opacity: 0.5,
+  },
+  teamsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  teamsText: {
+    fontSize: 16,
+    flex: 1,
+    marginRight: 8,
+  },
+  scoreContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  scoreText: {
+    fontSize: 16,
+  },
+  metaText: {
+    fontSize: 12,
+    opacity: 0.5,
+    marginTop: 4,
+  },
+});