优化比赛卡片组件，增加比分领先状态和额外统计信息的显示逻辑

components/match-card.tsx

@@ -123,12 +123,42 @@ export function MatchCard({
   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 (m) {
-    if (s && s !== "-" && s !== "0 - 0")
+      const h = parseInt(m[1]);
-      return { home: s, away: "", hasScore: true };
+      const a = parseInt(m[2]);
-    if (s === "0 - 0" || s === "0-0")
+      return {
-      return { home: "0", away: "0", hasScore: true };
+        home: m[1],
-    return { home: "", away: "", hasScore: false };
+        away: m[2],
+        hasScore: true,
+        homeLead: h > a,
+        awayLead: a > h,
+      };
+    }
+    if (s && s !== "-" && s !== "0 - 0") {
+      return {
+        home: s,
+        away: "",
+        hasScore: true,
+        homeLead: false,
+        awayLead: false,
+      };
+    }
+    if (s === "0 - 0" || s === "0-0") {
+      return {
+        home: "0",
+        away: "0",
+        hasScore: true,
+        homeLead: false,
+        awayLead: false,
+      };
+    }
+    return {
+      home: "",
+      away: "",
+      hasScore: false,
+      homeLead: false,
+      awayLead: false,
+    };
   }, [match.scoreText]);
 
   const cardsCount = React.useMemo(() => {
@@ -242,17 +272,19 @@ export function MatchCard({
   };
 
   const renderOddsRow = (bookmakerName: string, isHighlight: boolean) => {
-    if (!oddsSettings.enabled || !bookmakerName || odds.length === 0)
+    if (!oddsSettings.enabled || !bookmakerName) return null;
-      return null;
-    const item = odds.find((o) => o.odd_bookmakers === bookmakerName);
-    if (!item) return null;
 
-    const val1 = item.odd_1 || item.ah0_1 || "-";
+    const item = odds.find((o) => o.odd_bookmakers === bookmakerName);
-    const val2 = item.odd_x || "0" || "-";
+    const hasOdds = !!item;
-    const val3 = item.odd_2 || item.ah0_2 || "-";
+
+    const val1 = item?.odd_1 || item?.ah0_1 || "-";
+    const val2 = item?.odd_x || "0" || "-";
+    const val3 = item?.odd_2 || item?.ah0_2 || "-";
 
     return (
       <View style={styles.bookmakerOddsRow}>
+        {hasOdds ? (
+          <>
             <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
               <ThemedText
                 style={[
@@ -286,6 +318,10 @@ export function MatchCard({
                 {val3}
               </ThemedText>
             </View>
+          </>
+        ) : (
+          <View style={{ width: 98 }} />
+        )}
       </View>
     );
   };
@@ -395,31 +431,63 @@ export function MatchCard({
           </View>
         </View>
 
-        {/* Right: Score box + favorite */}
+        {/* Right: Score box + extra stats + favorite */}
         <View style={styles.right}>
+          <View style={styles.scoreContainer}>
             {scoreParts.hasScore ? (
               <View
                 style={[
                   styles.scoreBox,
                   {
-                  borderColor: isLive ? "#FF9500" : scoreBorder,
+                    borderColor:
+                      scoreParts.homeLead || scoreParts.awayLead
+                        ? "#FF9500"
+                        : scoreBorder,
                     backgroundColor: scoreBg,
                   },
                 ]}
               >
-              <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+                <View
+                  style={[
+                    styles.scoreHalf,
+                    scoreParts.homeLead && styles.scoreHalfLead,
+                  ]}
+                >
+                  <ThemedText
+                    style={[
+                      styles.scoreBoxText,
+                      scoreParts.homeLead && styles.scoreTextLead,
+                    ]}
+                    numberOfLines={1}
+                  >
                     {scoreParts.home}
                   </ThemedText>
+                </View>
                 <View style={styles.scoreDivider} />
-              <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+                <View
+                  style={[
+                    styles.scoreHalf,
+                    scoreParts.awayLead && styles.scoreHalfLead,
+                  ]}
+                >
+                  <ThemedText
+                    style={[
+                      styles.scoreBoxText,
+                      scoreParts.awayLead && styles.scoreTextLead,
+                    ]}
+                    numberOfLines={1}
+                  >
                     {scoreParts.away}
                   </ThemedText>
                 </View>
+              </View>
             ) : (
               <View style={styles.scoreBoxPlaceholder} />
             )}
+          </View>
 
-          {(extraStats.home !== "" || extraStats.away !== "") && (
+          <View style={styles.extraStatsContainer}>
+            {extraStats.home !== "" || extraStats.away !== "" ? (
               <View style={styles.extraStatsColumn}>
                 <ThemedText style={styles.extraStatText}>
                   {extraStats.home}
@@ -428,8 +496,10 @@ export function MatchCard({
                   {extraStats.away}
                 </ThemedText>
               </View>
-          )}
+            ) : null}
+          </View>
 
+          <View style={styles.favoriteContainer}>
             <TouchableOpacity
               onPress={(e) => {
                 e.stopPropagation();
@@ -446,6 +516,7 @@ export function MatchCard({
             </TouchableOpacity>
           </View>
         </View>
+      </View>
     </Pressable>
   );
 }
@@ -505,6 +576,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     flex: 1,
     minWidth: 0,
+    marginRight: 8,
   },
   teamLogo: {
     width: 18,
@@ -514,13 +586,14 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: "600",
     marginLeft: 6,
-    flex: 1,
+    flexShrink: 1,
     minWidth: 0,
   },
   bookmakerOddsRow: {
-    marginLeft: 4,
+    width: 98,
     flexDirection: "row",
     gap: 4,
+    justifyContent: "flex-end",
   },
   oddBadge: {
     paddingHorizontal: 5,
@@ -540,35 +613,58 @@ const styles = StyleSheet.create({
   right: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 6,
+  },
+  scoreContainer: {
+    width: 25,
+    alignItems: "center",
+  },
+  extraStatsContainer: {
+    width: 18,
+    alignItems: "center",
+    marginHorizontal: 4,
+  },
+  favoriteContainer: {
+    width: 25,
+    alignItems: "center",
   },
   scoreBox: {
-    width: 30,
+    width: 28,
-    height: 54,
+    height: 55,
     borderRadius: 8,
-    borderWidth: 1.5,
+    borderWidth: 1.2,
+    alignItems: "stretch",
+    justifyContent: "center",
+    overflow: "hidden",
+  },
+  scoreHalf: {
+    flex: 1,
     alignItems: "center",
     justifyContent: "center",
   },
+  scoreHalfLead: {
+    backgroundColor: "rgba(255, 149, 0, 0.08)",
+  },
   scoreBoxText: {
-    fontSize: 20,
+    fontSize: 15,
     fontWeight: "900",
   },
+  scoreTextLead: {
+    color: "#FF9500",
+  },
   scoreDivider: {
-    width: "60%",
+    width: "100%",
     height: 1,
     backgroundColor: "rgba(0,0,0,0.06)",
-    marginVertical: 1,
   },
   scoreBoxPlaceholder: {
-    width: 36,
+    width: 28,
-    height: 54,
+    height: 48,
   },
   cardsInline: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 4,
+    gap: 6,
-    marginLeft: 6,
+    marginLeft: 8,
     flexShrink: 0,
   },
   cardBadge: {
@@ -577,7 +673,7 @@ const styles = StyleSheet.create({
     borderRadius: 3,
     alignItems: "center",
     justifyContent: "center",
-    paddingHorizontal: 3,
+    paddingHorizontal: 4,
   },
   cardBadgeYellow: {
     backgroundColor: "#FFC400",
@@ -588,13 +684,13 @@ const styles = StyleSheet.create({
   extraStatsColumn: {
     alignItems: "center",
     justifyContent: "space-between",
-    height: 48,
+    height: 55,
     paddingVertical: 2,
   },
   extraStatText: {
-    fontSize: 12,
+    fontSize: 11,
     fontWeight: "500",
-    opacity: 0.6,
+    opacity: 0.4,
   },
   cardBadgeText: {
     fontSize: 10,