更新联赛

components/match-card-league.tsx

@@ -1,5 +1,6 @@
 import { ThemedText } from "@/components/themed-text";
 import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { addFavorite, removeFavorite } from "@/lib/api";
 import { Match } from "@/types/api";
@@ -13,6 +14,14 @@ interface MatchCardLeagueProps {
   onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
 }
 
+const WINNER_BORDER = "#D4A84B";
+const WINNER_BG_LIGHT = "#FFF8E7";
+const WINNER_BG_DARK = "#3D3422";
+const NEUTRAL_BG_LIGHT = "#F5F5F5";
+const NEUTRAL_BG_DARK = "#2C2C2E";
+const RED_CARD_COLOR = "#C53030";
+const YELLOW_CARD_COLOR = "#F59E0B";
+
 export function MatchCardLeague({
   match,
   onPress,
@@ -28,12 +37,14 @@ export function MatchCardLeague({
   }, [match.fav]);
 
   const isDark = theme === "dark";
-  // 截图中的卡片背景通常非常深，接近纯黑
-  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
-  const textColor = isDark ? "#FFFFFF" : "#000000";
-  // 赢家的高亮颜色 (截图中的橙黄色)
-  const winnerColor = "#FF9500";
-  const loserColor = isDark ? "#FFFFFF" : "#000000";
+  const textColor = isDark ? Colors.dark.text : Colors.light.text;
+  const secondaryText = isDark ? "#8E8E93" : "#6B7280";
+  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 handlePress = () => {
     if (onPress) {
@@ -72,116 +83,117 @@ export function MatchCardLeague({
     }
   };
 
-  // --- 数据解析与样式逻辑 ---
+  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 !== "-" && s !== "0 - 0")
+      return { home: s, away: "", hasScore: true };
+    if (s === "0 - 0") return { home: "0", away: "0", hasScore: true };
+    return { home: "", away: "", hasScore: false };
+  }, [match.scoreText]);
 
-  // 假设 match 对象中有 homeScore 和 awayScore (数字或字符串)
-  // 如果 API 只有 "1 - 0" 这种 scoreText，你需要在这里拆分
-  // 这里为了演示，假设 match 对象已经扩展了这些字段，或者我们从 scoreText 简单解析
-  let homeScore = 0;
-  let awayScore = 0;
+  const { homeRedCards, awayRedCards, homeYellowCards, awayYellowCards } = React.useMemo(() => {
+    let homeRed = (match as any).homeRedCards || 0;
+    let awayRed = (match as any).awayRedCards || 0;
+    let homeYellow = (match as any).homeYellowCards || 0;
+    let awayYellow = (match as any).awayYellowCards || 0;
 
-  // 简单的解析逻辑 demo (根据你的实际数据结构调整)
-  if (match.scoreText && match.scoreText.includes("-")) {
-    const parts = match.scoreText.split("-");
-    homeScore = parseInt(parts[0].trim()) || 0;
-    awayScore = parseInt(parts[1].trim()) || 0;
-  }
-  // 如果 match 对象里直接有 match.homeScore 最好:
-  // homeScore = match.homeScore;
-  // awayScore = match.awayScore;
+    const matchStats = (match as any).stats;
+    if (matchStats) {
+      try {
+        const stats = typeof matchStats === 'string' ? JSON.parse(matchStats) : matchStats;
+        const redCardsStat = stats.find((s: any) => s.type === "Red Cards");
+        const yellowCardsStat = stats.find((s: any) => s.type === "Yellow Cards");
 
-  // 判断文字颜色和背景样式
-  let homeColor = loserColor;
-  let awayColor = loserColor;
-  let homeScoreBg = "#2C2C2E"; // 默认深灰背景
-  let awayScoreBg = "#2C2C2E";
-  let homeBorderColor = "transparent";
-  let awayBorderColor = "transparent";
+        if (redCardsStat) {
+          homeRed = parseInt(redCardsStat.home) || 0;
+          awayRed = parseInt(redCardsStat.away) || 0;
+        }
+        if (yellowCardsStat) {
+          homeYellow = parseInt(yellowCardsStat.home) || 0;
+          awayYellow = parseInt(yellowCardsStat.away) || 0;
+        }
+      } catch (e) {
+        console.error("Parse stats error:", e);
+      }
+    }
 
-  if (homeScore > awayScore) {
-    homeColor = "#000000"; // 赢家黑色文字
-    homeScoreBg = winnerColor; // 金色背景
-    homeBorderColor = winnerColor;
-  } else if (awayScore > homeScore) {
-    awayColor = "#000000"; // 赢家黑色文字
-    awayScoreBg = winnerColor; // 金色背景
-    awayBorderColor = winnerColor;
-  }
-  // 如果相等，保持默认深灰背景
+    return { homeRedCards: homeRed, awayRedCards: awayRed, homeYellowCards: homeYellow, awayYellowCards: awayYellow };
+  }, [(match as any).stats, (match as any).homeRedCards, (match as any).awayRedCards]);
+
+  const cardBg = isDark ? "#1C1C1E" : "#F5F5F5";
 
   return (
     <Pressable
       onPress={handlePress}
       style={({ pressed }) => [
         styles.card,
-        { backgroundColor: cardBg, opacity: pressed ? 0.8 : 1 },
+        {
+          backgroundColor: cardBg,
+          opacity: pressed ? 0.7 : 1
+        },
       ]}
     >
-      {/* 1. 左侧：时间/状态 */}
       <View style={styles.leftColumn}>
-        {/* 如果有状态字段 match.meta (如 'FT', 'AET'), 优先显示，否则显示时间 */}
-        <ThemedText style={styles.statusText}>
+        <ThemedText style={[styles.statusText, { color: secondaryText }]}>
           {(match.time || "").toUpperCase()}
         </ThemedText>
       </View>
 
-      {/* 2. 中间：球队信息 (上下排布) */}
       <View style={styles.teamsColumn}>
-        {/* 主队行 */}
         <View style={styles.teamRow}>
           <Image
             source={{ uri: (match as any).homeLogo || match.homeTeamLogo || "https://placehold.co/24x24/png" }}
             style={styles.teamLogo}
           />
-          <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
-            {match.home || match.homeTeamName}
-          </ThemedText>
+          <View style={styles.teamNameContainer}>
+            <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
+              {match.home || match.homeTeamName}
+            </ThemedText>
+            {homeYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
+            {homeRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
+          </View>
         </View>
 
-        {/* 客队行 */}
-        <View style={[styles.teamRow, { marginTop: 6 }]}>
+        <View style={[styles.teamRow, { marginTop: 10 }]}>
           <Image
             source={{ uri: (match as any).awayLogo || match.awayTeamLogo || "https://placehold.co/24x24/png" }}
             style={styles.teamLogo}
           />
-          <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
-            {match.away || match.awayTeamName}
-          </ThemedText>
+          <View style={styles.teamNameContainer}>
+            <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
+              {match.away || match.awayTeamName}
+            </ThemedText>
+            {awayYellowCards > 0 && <View style={[styles.cardBadge, styles.yellowCard]} />}
+            {awayRedCards > 0 && <View style={[styles.cardBadge, styles.redCard]} />}
+          </View>
         </View>
       </View>
 
-      {/* 3. 右侧：比分与铃铛 */}
       <View style={styles.rightWrapper}>
-        {/* 比分列 (上下排布) */}
-        <View style={styles.scoresColumn}>
-          <View style={[
-            styles.scoreBox,
-            {
-              backgroundColor: homeScoreBg,
-              borderColor: homeBorderColor,
-              borderWidth: homeBorderColor !== "transparent" ? 1.5 : 0,
-            }
-          ]}>
-            <ThemedText style={[styles.scoreText, { color: homeColor }]}>
-              {homeScore}
+        {scoreParts.hasScore ? (
+          <View
+            style={[
+              styles.scoreBox,
+              {
+                borderColor: isLive ? "#FF9500" : scoreBorder,
+                backgroundColor: scoreBg,
+              },
+            ]}
+          >
+            <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+              {scoreParts.home}
+            </ThemedText>
+            <View style={[styles.scoreDivider, { backgroundColor: isDark ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)" }]} />
+            <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
+              {scoreParts.away}
             </ThemedText>
           </View>
-          <View style={[
-            styles.scoreBox,
-            {
-              backgroundColor: awayScoreBg,
-              borderColor: awayBorderColor,
-              borderWidth: awayBorderColor !== "transparent" ? 1.5 : 0,
-              marginTop: 6,
-            }
-          ]}>
-            <ThemedText style={[styles.scoreText, { color: awayColor }]}>
-              {awayScore}
-            </ThemedText>
-          </View>
-        </View>
+        ) : (
+          <View style={styles.scoreBoxPlaceholder} />
+        )}
 
-        {/* 收藏按钮 */}
         <TouchableOpacity
           onPress={(e) => {
             e.stopPropagation();
@@ -194,7 +206,7 @@ export function MatchCardLeague({
           <IconSymbol
             name={isFav ? "star" : "star-outline"}
             size={20}
-            color={isFav ? "#FFD700" : "#545458"}
+            color={isFav ? "#FFD700" : (isDark ? "#545458" : "#9CA3AF")}
           />
         </TouchableOpacity>
       </View>
@@ -205,76 +217,87 @@ export function MatchCardLeague({
 const styles = StyleSheet.create({
   card: {
     flexDirection: "row",
-    paddingVertical: 14,
+    paddingVertical: 16,
     paddingHorizontal: 16,
-    marginHorizontal: 0,
-    marginBottom: 0,
-    borderRadius: 12,
     alignItems: "center",
-    minHeight: 68,
+    borderRadius: 12,
+    marginBottom: 8,
   },
-  // 左侧时间列
   leftColumn: {
-    width: 52,
+    width: 48,
     justifyContent: "center",
-    alignItems: "flex-start",
-    marginRight: 12,
+    alignItems: "center",
+    marginRight: 8,
   },
   statusText: {
-    fontSize: 12,
-    color: "#8E8E93", // 次要文本颜色 (Grey)
+    fontSize: 14,
     fontWeight: "600",
   },
-  // 中间球队列
   teamsColumn: {
     flex: 1,
     justifyContent: "center",
-    paddingRight: 8,
+    paddingRight: 12,
   },
   teamRow: {
     flexDirection: "row",
     alignItems: "center",
   },
   teamLogo: {
-    width: 22,
-    height: 22,
-    borderRadius: 11, // 圆形图标
-    marginRight: 10,
-    backgroundColor: "#3A3A3C", // 图片加载占位
+    width: 24,
+    height: 24,
+    borderRadius: 14,
+    marginRight: 12,
+    backgroundColor: "#E5E5E5",
   },
-  teamName: {
-    fontSize: 16,
-    fontWeight: "500",
+  teamNameContainer: {
+    flexDirection: "row",
+    alignItems: "center",
     flex: 1,
   },
-  // 右侧整体包装
+  teamName: {
+    fontSize: 15,
+    fontWeight: "500",
+  },
+  cardBadge: {
+    width: 14,
+    height: 18,
+    borderRadius: 2,
+    marginLeft: 8,
+  },
+  redCard: {
+    backgroundColor: RED_CARD_COLOR,
+  },
+  yellowCard: {
+    backgroundColor: YELLOW_CARD_COLOR,
+  },
   rightWrapper: {
     flexDirection: "row",
     alignItems: "center",
-  },
-  // 比分列
-  scoresColumn: {
-    alignItems: "flex-end", // 数字右对齐
-    justifyContent: "center",
-    marginRight: 12,
+    gap: 6,
   },
   scoreBox: {
-    minWidth: 32,
-    height: 28,
-    borderRadius: 6,
-    justifyContent: "center",
+    width: 36,
+    height: 54,
+    borderRadius: 8,
+    borderWidth: 1.5,
     alignItems: "center",
-    paddingHorizontal: 8,
+    justifyContent: "center",
   },
-  scoreText: {
-    fontSize: 16,
-    fontWeight: "700",
-    lineHeight: 20,
+  scoreBoxText: {
+    fontSize: 20,
+    fontWeight: "900",
+  },
+  scoreDivider: {
+    width: "60%",
+    height: 1,
+    marginVertical: 1,
+  },
+  scoreBoxPlaceholder: {
+    width: 36,
+    height: 54,
   },
-  // 收藏按钮
   favoriteButton: {
-    paddingHorizontal: 4,
-    paddingVertical: 4,
+    padding: 4,
     justifyContent: 'center',
     alignItems: 'center',
   }