添加收藏

2026-01-16 14:41:15 +08:00
parent 4bccf39a8b
commit d20080eaf3
11 changed files with 656 additions and 75 deletions
--- a/components/live-detail/live-score-header.tsx
+++ b/components/live-detail/live-score-header.tsx
@@ -1,9 +1,10 @@
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
+import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
 import { LiveScoreMatch } from "@/types/api";
 import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
-import React from "react";
+import React, { useState } from "react";
 import { Image, StyleSheet, TouchableOpacity, View } from "react-native";

 interface LiveScoreHeaderProps {
@@ -32,8 +33,49 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
  };

  const initial = getInitialTime();
-  const [minutes, setMinutes] = React.useState(initial.min);
-  const [seconds, setSeconds] = React.useState(initial.sec);
+  const [minutes, setMinutes] = useState(initial.min);
+  const [seconds, setSeconds] = useState(initial.sec);
+  const [isFav, setIsFav] = useState(false);
+  const [favLoading, setFavLoading] = useState(false);
+
+  // 检查收藏状态
+  React.useEffect(() => {
+    const loadFavStatus = async () => {
+      try {
+        const res = await checkFavorite("match", match.event_key.toString());
+        setIsFav(res.isFavorite);
+      } catch (error) {
+        console.error("Check favorite status error:", error);
+      }
+    };
+    loadFavStatus();
+  }, [match.event_key]);
+
+  const toggleFavorite = async () => {
+    if (favLoading) return;
+    setFavLoading(true);
+    const newFavState = !isFav;
+    try {
+      if (newFavState) {
+        await addFavorite({
+          matchId: match.event_key,
+          type: "match",
+          typeId: match.event_key.toString(),
+          notify: true,
+        });
+      } else {
+        await removeFavorite({
+          type: "match",
+          typeId: match.event_key.toString(),
+        });
+      }
+      setIsFav(newFavState);
+    } catch (error) {
+      console.error("Toggle favorite error:", error);
+    } finally {
+      setFavLoading(false);
+    }
+  };
  const lastServerMatchRef = React.useRef(
    `${match.event_status}-${match.event_time}`
  );
@@ -104,8 +146,16 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
          <TouchableOpacity style={styles.iconBtn}>
            <IconSymbol name="notifications-outline" size={24} color="#FFF" />
          </TouchableOpacity>
-          <TouchableOpacity style={styles.iconBtn}>
-            <IconSymbol name="star-outline" size={24} color="#FFF" />
+          <TouchableOpacity
+            style={styles.iconBtn}
+            onPress={toggleFavorite}
+            disabled={favLoading}
+          >
+            <IconSymbol
+              name={isFav ? "star" : "star-outline"}
+              size={24}
+              color={isFav ? "#FFD700" : "#FFF"}
+            />
          </TouchableOpacity>
        </View>
      </View>
@@ -179,7 +229,7 @@ const styles = StyleSheet.create({
    marginBottom: 20,
  },
  leftContainer: {
-     width: 60,
+    width: 60,
  },
  rightActions: {
    flexDirection: "row",
--- a/components/match-card.tsx
+++ b/components/match-card.tsx
@@ -2,19 +2,33 @@ 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 from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import React, { useState } from "react";
+import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";

 interface MatchCardProps {
  match: Match;
  onPress?: (match: Match) => void;
+  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
 }

-export function MatchCard({ match, onPress }: MatchCardProps) {
+export function MatchCard({
+  match,
+  onPress,
+  onFavoriteToggle,
+}: MatchCardProps) {
  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";
@@ -28,6 +42,35 @@ export function MatchCard({ match, onPress }: MatchCardProps) {
    }
  };

+  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}
@@ -58,11 +101,20 @@ export function MatchCard({ match, onPress }: MatchCardProps) {
          <ThemedText type="defaultSemiBold" style={styles.scoreText}>
            {match.scoreText}
          </ThemedText>
-          <IconSymbol
-            name={match.fav ? "star" : "star-outline"}
-            size={20}
-            color={match.fav ? "#FFD700" : iconColor}
-          />
+          <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>

--- a/components/match-detail/score-header.tsx
+++ b/components/match-detail/score-header.tsx
@@ -1,9 +1,10 @@
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
+import { addFavorite, checkFavorite, removeFavorite } from "@/lib/api";
 import { MatchDetailData } from "@/types/api";
 import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Image, StyleSheet, TouchableOpacity, View } from "react-native";

@@ -18,6 +19,50 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
  const { t } = useTranslation();
  const { match } = data;

+  const [isFav, setIsFav] = useState(false);
+  const [favLoading, setFavLoading] = useState(false);
+
+  // 检查收藏状态
+  React.useEffect(() => {
+    const loadFavStatus = async () => {
+      try {
+        const res = await checkFavorite("match", match.eventKey.toString());
+        setIsFav(res.isFavorite);
+      } catch (error) {
+        console.error("Check favorite status error:", error);
+      }
+    };
+    if (match.eventKey) {
+      loadFavStatus();
+    }
+  }, [match.eventKey]);
+
+  const toggleFavorite = async () => {
+    if (favLoading) return;
+    setFavLoading(true);
+    const newFavState = !isFav;
+    try {
+      if (newFavState) {
+        await addFavorite({
+          matchId: Number(match.eventKey), 
+          type: "match",
+          typeId: match.eventKey.toString(),
+          notify: true,
+        });
+      } else {
+        await removeFavorite({
+          type: "match",
+          typeId: match.eventKey.toString(),
+        });
+      }
+      setIsFav(newFavState);
+    } catch (error) {
+      console.error("Toggle favorite error:", error);
+    } finally {
+      setFavLoading(false);
+    }
+  };
+
  return (
    <LinearGradient
      colors={["#521e10", "#0e0e10"]}
@@ -46,8 +91,16 @@ export function ScoreHeader({ data, isDark, topInset }: ScoreHeaderProps) {
          <TouchableOpacity style={styles.iconBtn}>
            <IconSymbol name="notifications-outline" size={24} color="#FFF" />
          </TouchableOpacity>
-          <TouchableOpacity style={styles.iconBtn}>
-            <IconSymbol name="star-outline" size={24} color="#FFF" />
+          <TouchableOpacity
+            style={styles.iconBtn}
+            onPress={toggleFavorite}
+            disabled={favLoading}
+          >
+            <IconSymbol
+              name={isFav ? "star" : "star-outline"}
+              size={24}
+              color={isFav ? "#FFD700" : "#FFF"}
+            />
          </TouchableOpacity>
        </View>
      </View>
--- a/components/upcoming-match-card.tsx
+++ b/components/upcoming-match-card.tsx
@@ -2,23 +2,66 @@ 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 { UpcomingMatch } from "@/types/api";
 import { Image } from "expo-image";
 import { useRouter } from "expo-router";
-import React from "react";
-import { Pressable, StyleSheet, View } from "react-native";
+import React, { useEffect, useState } from "react";
+import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";

 interface UpcomingMatchCardProps {
  match: UpcomingMatch;
+  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
 }

-export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
+export function UpcomingMatchCard({
+  match,
+  onFavoriteToggle,
+}: UpcomingMatchCardProps) {
  const router = useRouter();
  const { theme } = useTheme();
+  const [isFav, setIsFav] = useState(match.fav || false);
+  const [loading, setLoading] = useState(false);
+
+  // 当外部传入的 match.fav 改变时，更新内部状态
+  useEffect(() => {
+    setIsFav(match.fav || false);
+  }, [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 toggleFavorite = async () => {
+    if (loading) return;
+    setLoading(true);
+    const newFavState = !isFav;
+    try {
+      if (newFavState) {
+        await addFavorite({
+          matchId: match.id,
+          type: "match",
+          typeId: match.id.toString(),
+          notify: true,
+        });
+      } else {
+        await removeFavorite({
+          type: "match",
+          typeId: match.id.toString(),
+        });
+      }
+      setIsFav(newFavState);
+      if (onFavoriteToggle) {
+        onFavoriteToggle(match.id.toString(), newFavState);
+      }
+    } catch (error) {
+      console.error("Toggle favorite error:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
  const handlePress = () => {
    router.push(`/match-detail/${match.id}`);
  };
@@ -57,7 +100,24 @@ export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
            {match.leagueName}
          </ThemedText>
        </View>
-        <ThemedText style={styles.timeText}>{formatDateTime()}</ThemedText>
+        <View style={{ flexDirection: "row", alignItems: "center" }}>
+          <ThemedText style={styles.timeText}>{formatDateTime()}</ThemedText>
+          <TouchableOpacity
+            onPress={(e) => {
+              e.stopPropagation();
+              toggleFavorite();
+            }}
+            disabled={loading}
+            style={{ marginLeft: 8 }}
+            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
+          >
+            <IconSymbol
+              name={isFav ? "star" : "star-outline"}
+              size={20}
+              color={isFav ? "#FFD700" : iconColor}
+            />
+          </TouchableOpacity>
+        </View>
      </View>

      <View style={styles.teamsContainer}>
@@ -69,7 +129,11 @@ export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
              contentFit="contain"
            />
          )}
-          <ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
+          <ThemedText
+            type="defaultSemiBold"
+            style={styles.teamName}
+            numberOfLines={1}
+          >
            {match.homeTeamName}
          </ThemedText>
        </View>
@@ -86,7 +150,11 @@ export function UpcomingMatchCard({ match }: UpcomingMatchCardProps) {
              contentFit="contain"
            />
          )}
-          <ThemedText type="defaultSemiBold" style={styles.teamName} numberOfLines={1}>
+          <ThemedText
+            type="defaultSemiBold"
+            style={styles.teamName}
+            numberOfLines={1}
+          >
            {match.awayTeamName}
          </ThemedText>
        </View>