优化 MatchCard 组件，简化赔率数据处理逻辑，添加占位符以提升用户体验

components/match-card.tsx

@@ -275,7 +275,8 @@ export function MatchCard({
     if (!oddsSettings.enabled || !bookmakerName) return null;
 
     const item = odds.find((o) => o.odd_bookmakers === bookmakerName);
-    const hasOdds = !!item;
+    // 如果没有找到该博彩公司的赔率数据，直接返回 null，不进行占位
+    if (!item) return null;
 
     const val1 = item?.odd_1 || item?.ah0_1 || "-";
     const val2 = item?.odd_x || "0" || "-";
@@ -283,8 +284,6 @@ export function MatchCard({
 
     return (
       <View style={styles.bookmakerOddsRow}>
-        {hasOdds ? (
-          <>
         <View style={[styles.oddBadge, { backgroundColor: oddBadgeBg }]}>
           <ThemedText
             style={[
@@ -318,10 +317,6 @@ export function MatchCard({
             {val3}
           </ThemedText>
         </View>
-          </>
-        ) : (
-          <View style={{ width: 98 }} />
-        )}
       </View>
     );
   };
@@ -388,13 +383,15 @@ export function MatchCard({
         <View style={styles.middle}>
           <View style={styles.contentRow}>
             <View style={styles.teamInfo}>
-              {match.homeTeamLogo && (
+              <View style={styles.teamLogoPlaceholder}>
                 <Image
-                  source={{ uri: match.homeTeamLogo }}
+                  source={{
+                    uri: match.homeTeamLogo,
+                  }}
                   style={styles.teamLogo}
                   contentFit="contain"
                 />
-              )}
+              </View>
               <ThemedText
                 type="defaultSemiBold"
                 style={styles.teamName}
@@ -410,13 +407,15 @@ export function MatchCard({
 
           <View style={styles.contentRow}>
             <View style={styles.teamInfo}>
-              {match.awayTeamLogo && (
+              <View style={styles.teamLogoPlaceholder}>
                 <Image
-                  source={{ uri: match.awayTeamLogo }}
+                  source={{
+                    uri: match.awayTeamLogo,
+                  }}
                   style={styles.teamLogo}
                   contentFit="contain"
                 />
-              )}
+              </View>
               <ThemedText
                 type="defaultSemiBold"
                 style={styles.teamName}
@@ -433,8 +432,8 @@ export function MatchCard({
 
         {/* Right: Score box + extra stats + favorite */}
         <View style={styles.right}>
-          <View style={styles.scoreContainer}>
           {scoreParts.hasScore ? (
+            <View style={styles.scoreContainer}>
               <View
                 style={[
                   styles.scoreBox,
@@ -481,13 +480,15 @@ export function MatchCard({
                   </ThemedText>
                 </View>
               </View>
-            ) : (
-              <View style={styles.scoreBoxPlaceholder} />
-            )}
             </View>
+          ) : (
+            <View style={styles.scoreContainer}>
+              <View style={styles.scoreBoxPlaceholder} />
+            </View>
+          )}
 
-          <View style={styles.extraStatsContainer}>
           {extraStats.home !== "" || extraStats.away !== "" ? (
+            <View style={styles.extraStatsContainer}>
               <View style={styles.extraStatsColumn}>
                 <ThemedText style={styles.extraStatText}>
                   {extraStats.home}
@@ -496,8 +497,10 @@ export function MatchCard({
                   {extraStats.away}
                 </ThemedText>
               </View>
-            ) : null}
             </View>
+          ) : (
+            <View style={styles.extraStatsContainer} />
+          )}
 
           <View style={styles.favoriteContainer}>
             <TouchableOpacity
@@ -582,6 +585,12 @@ const styles = StyleSheet.create({
     width: 18,
     height: 18,
   },
+  teamLogoPlaceholder: {
+    width: 18,
+    height: 18,
+    justifyContent: "center",
+    alignItems: "center",
+  },
   teamName: {
     fontSize: 12,
     fontWeight: "600",