添加收藏

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",