添加网球详情

components/live-detail/live-score-header.tsx

@@ -151,9 +151,24 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
   };
 
   const lastServerMatchRef = React.useRef(
-    `${match.event_status}-${match.event_time}`
+    `${match.event_status}-${match.event_time}`,
   );
 
+  // Tennis Logic
+  const isTennis =
+    !!match.event_first_player ||
+    (match.league_name &&
+      /ATP|WTA|ITF|Challenger/i.test(match.league_name || ""));
+
+  const homeName = isTennis ? match.event_first_player : match.event_home_team;
+  const awayName = isTennis ? match.event_second_player : match.event_away_team;
+  const homeLogo = isTennis
+    ? match.event_first_player_logo
+    : match.home_team_logo;
+  const awayLogo = isTennis
+    ? match.event_second_player_logo
+    : match.away_team_logo;
+
   // 服务器时间同步
   React.useEffect(() => {
     const currentKey = `${match.event_status}-${match.event_time}`;
@@ -251,13 +266,13 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
             </TouchableOpacity>
             <View style={styles.logoContainer}>
               <Image
-                source={{ uri: match.home_team_logo }}
-                style={styles.teamLogo}
+                source={{ uri: homeLogo }}
+                style={[styles.teamLogo, isTennis && styles.tennisAvatar]}
               />
             </View>
           </View>
           <ThemedText style={styles.teamName} numberOfLines={2}>
-            {match.event_home_team}
+            {homeName}
           </ThemedText>
         </View>
 
@@ -274,10 +289,12 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
                 {match.event_status}
               </ThemedText>
             )}
-            <ThemedText style={styles.timeText}>{displayTime}</ThemedText>
+            {!isTennis && (
+              <ThemedText style={styles.timeText}>{displayTime}</ThemedText>
+            )}
           </View>
 
-          {match.goalscorers && match.goalscorers.length > 0 && (
+          {!isTennis && match.goalscorers && match.goalscorers.length > 0 && (
             <View style={styles.lastGoalContainer}>
               <IconSymbol name="football-outline" size={12} color="#FFF" />
               <ThemedText style={styles.lastGoalText}>
@@ -286,14 +303,24 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
               </ThemedText>
             </View>
           )}
+
+          {isTennis && match.event_serve && (
+            <View style={styles.serveIndicator}>
+              <IconSymbol name="tennisball" size={12} color="#CCFF00" />
+              <ThemedText style={styles.serveText}>
+                {match.event_serve === "First Player" ? homeName : awayName}{" "}
+                Serving
+              </ThemedText>
+            </View>
+          )}
         </View>
 
         <View style={styles.teamInfo}>
           <View style={styles.teamLogoRow}>
             <View style={styles.logoContainer}>
               <Image
-                source={{ uri: match.away_team_logo }}
-                style={styles.teamLogo}
+                source={{ uri: awayLogo }}
+                style={[styles.teamLogo, isTennis && styles.tennisAvatar]}
               />
             </View>
             <TouchableOpacity
@@ -309,7 +336,7 @@ export function LiveScoreHeader({ match, topInset }: LiveScoreHeaderProps) {
             </TouchableOpacity>
           </View>
           <ThemedText style={styles.teamName} numberOfLines={2}>
-            {match.event_away_team}
+            {awayName}
           </ThemedText>
         </View>
       </View>
@@ -442,4 +469,21 @@ const styles = StyleSheet.create({
     fontSize: 10,
     marginLeft: 4,
   },
+  serveIndicator: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 6,
+    backgroundColor: "rgba(0,0,0,0.3)",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10,
+    gap: 4,
+  },
+  serveText: {
+    color: "#FFF",
+    fontSize: 10,
+  },
+  tennisAvatar: {
+    borderRadius: 30,
+  },
 });