添加实时比分功能，更新比赛数据结构，优化比赛卡片显示

components/match-card.tsx

@@ -4,6 +4,7 @@ import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { addFavorite, removeFavorite } from "@/lib/api";
 import { Match } from "@/types/api";
+import { LinearGradient } from "expo-linear-gradient";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
 import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
@@ -23,6 +24,7 @@ export function MatchCard({
   const { theme } = useTheme();
   const [isFav, setIsFav] = useState(match.fav);
   const [loading, setLoading] = useState(false);
+  // console.log("MatchCard render:", JSON.stringify(match));
 
   // 当外部传入的 match.fav 改变时，更新内部状态
   React.useEffect(() => {
@@ -32,7 +34,35 @@ export function MatchCard({
   const isDark = theme === "dark";
   const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
   const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
-  const borderColor = isDark ? "#38383A" : "#E5E5EA";
+  const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
+  const scoreBorder = isDark ? "rgba(255,255,255,0.18)" : "rgba(0,0,0,0.12)";
+  const scoreBg = isDark ? "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.6)";
+
+  const isLive = React.useMemo(() => {
+    return !!match.isLive;
+  }, [match.isLive]);
+
+  const timeLabel = React.useMemo(() => {
+    const raw = (match.time || "").trim();
+    if (!raw) return "";
+    if (/^\d{1,3}$/.test(raw)) return `${raw}'`;
+    return raw;
+  }, [match.time]);
+
+  const leagueShort = React.useMemo(() => {
+    const league = (match.league || "").trim();
+    if (!league) return "--";
+    const first = league.split(/[^A-Za-z0-9]+/).filter(Boolean)[0] || league;
+    return first.slice(0, 3).toUpperCase();
+  }, [match.league]);
+
+  const scoreParts = React.useMemo(() => {
+    const s = (match.scoreText || "").trim();
+    const m = s.match(/(\d+)\s*[-:]\s*(\d+)/);
+    if (m) return { home: m[1], away: m[2], hasScore: true };
+    if (s && s !== "-") return { home: s, away: "", hasScore: true };
+    return { home: "", away: "", hasScore: false };
+  }, [match.scoreText]);
 
   const handlePress = () => {
     if (onPress) {
@@ -79,28 +109,72 @@ export function MatchCard({
         { 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}
+      {isLive && (
+        <LinearGradient
+          colors={
+            isDark
+              ? ["rgba(255, 149, 0, 0.15)", "transparent"]
+              : ["rgba(255, 149, 0, 0.1)", "transparent"]
+          }
+          start={{ x: 0, y: 0 }}
+          end={{ x: 0.5, y: 0 }}
+          style={StyleSheet.absoluteFill}
+        />
+      )}
+      <View style={styles.row}>
+        {/* Left: League short + time */}
+        <View style={styles.left}>
+          <ThemedText style={styles.leagueShortText} numberOfLines={1}>
+            {leagueShort}
+          </ThemedText>
+          <ThemedText
+            style={[styles.timeText, isLive && styles.timeTextLive]}
+            numberOfLines={1}
+          >
+            {timeLabel}
           </ThemedText>
         </View>
-        <ThemedText style={styles.timeText}>{match.time}</ThemedText>
-      </View>
 
-      <View style={styles.teamsContainer}>
-        <ThemedText type="defaultSemiBold" style={styles.teamsText}>
-          {match.home} vs {match.away}
-        </ThemedText>
-        <View style={styles.scoreContainer}>
-          <ThemedText type="defaultSemiBold" style={styles.scoreText}>
-            {match.scoreText}
+        {/* Middle: Teams */}
+        <View style={styles.middle}>
+          <ThemedText
+            type="defaultSemiBold"
+            style={styles.teamLine}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {match.home}
           </ThemedText>
+          <ThemedText
+            type="defaultSemiBold"
+            style={styles.teamLine}
+            numberOfLines={1}
+            ellipsizeMode="tail"
+          >
+            {match.away}
+          </ThemedText>
+        </View>
+
+        {/* Right: Score box + favorite */}
+        <View style={styles.right}>
+          {scoreParts.hasScore ? (
+            <View
+              style={[
+                styles.scoreBox,
+                { borderColor: scoreBorder, backgroundColor: scoreBg },
+              ]}
+            >
+              <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+                {scoreParts.home}
+              </ThemedText>
+              <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+                {scoreParts.away}
+              </ThemedText>
+            </View>
+          ) : (
+            <View style={styles.scoreBoxPlaceholder} />
+          )}
+
           <TouchableOpacity
             onPress={(e) => {
               e.stopPropagation();
@@ -111,69 +185,90 @@ export function MatchCard({
           >
             <IconSymbol
               name={isFav ? "star" : "star-outline"}
-              size={24}
+              size={22}
               color={isFav ? "#FFD700" : iconColor}
             />
           </TouchableOpacity>
         </View>
       </View>
-
-      {match.meta && (
-        <ThemedText style={styles.metaText}>{match.meta}</ThemedText>
-      )}
     </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
   card: {
-    padding: 12,
+    height: 78,
+    paddingHorizontal: 14,
     marginBottom: 12,
-    borderRadius: 12,
+    borderRadius: 14,
     borderWidth: 1,
+    justifyContent: "center",
+    overflow: "hidden",
+    // iOS shadow
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 0.5 },
+    shadowOpacity: 0.03,
+    shadowRadius: 2,
+    // Android elevation
+    elevation: 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: {
+  row: {
     flexDirection: "row",
     alignItems: "center",
     gap: 12,
   },
-  scoreText: {
-    fontSize: 16,
+  left: {
+    width: 52,
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
   },
-  metaText: {
+  leagueShortText: {
     fontSize: 12,
-    opacity: 0.5,
-    marginTop: 4,
+    fontWeight: "700",
+    opacity: 0.85,
+  },
+  timeText: {
+    fontSize: 12,
+    opacity: 0.55,
+  },
+  timeTextLive: {
+    color: "#FF3B30",
+    opacity: 1,
+  },
+  middle: {
+    flex: 1,
+    justifyContent: "center",
+    gap: 6,
+    minWidth: 0,
+  },
+  teamLine: {
+    fontSize: 16,
+    lineHeight: 18,
+  },
+  right: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+  },
+  scoreBox: {
+    width: 44,
+    height: 56,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.12)",
+    backgroundColor: "rgba(255,255,255,0.6)",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+  },
+  scoreBoxText: {
+    fontSize: 16,
+    fontWeight: "700",
+    opacity: 0.9,
+  },
+  scoreBoxPlaceholder: {
+    width: 44,
+    height: 56,
   },
 });