联赛筛选

components/match-card-league.tsx

@@ -1,12 +1,11 @@
 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";
 import { useRouter } from "expo-router";
 import React, { useState } from "react";
-import { Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
+import { Image, Pressable, StyleSheet, TouchableOpacity, View } from "react-native";
 
 interface MatchCardLeagueProps {
   match: Match;
@@ -24,15 +23,17 @@ export function MatchCardLeague({
   const [isFav, setIsFav] = useState(match.fav);
   const [loading, setLoading] = useState(false);
 
-  // 当外部传入的 match.fav 改变时，更新内部状态
   React.useEffect(() => {
     setIsFav(match.fav);
   }, [match.fav]);
 
   const isDark = theme === "dark";
-  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
+  // 截图中的卡片背景通常非常深，接近纯黑
   const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
-  const borderColor = isDark ? "#38383A" : "#E5E5EA";
+  const textColor = isDark ? "#FFFFFF" : "#000000";
+  // 赢家的高亮颜色 (截图中的橙黄色)
+  const winnerColor = "#FF9500";
+  const loserColor = isDark ? "#FFFFFF" : "#000000";
 
   const handlePress = () => {
     if (onPress) {
@@ -71,109 +72,210 @@ export function MatchCardLeague({
     }
   };
 
+  // --- 数据解析与样式逻辑 ---
+
+  // 假设 match 对象中有 homeScore 和 awayScore (数字或字符串)
+  // 如果 API 只有 "1 - 0" 这种 scoreText，你需要在这里拆分
+  // 这里为了演示，假设 match 对象已经扩展了这些字段，或者我们从 scoreText 简单解析
+  let homeScore = 0;
+  let awayScore = 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;
+
+  // 判断文字颜色和背景样式
+  let homeColor = loserColor;
+  let awayColor = loserColor;
+  let homeScoreBg = "#2C2C2E"; // 默认深灰背景
+  let awayScoreBg = "#2C2C2E";
+  let homeBorderColor = "transparent";
+  let awayBorderColor = "transparent";
+
+  if (homeScore > awayScore) {
+    homeColor = "#000000"; // 赢家黑色文字
+    homeScoreBg = winnerColor; // 金色背景
+    homeBorderColor = winnerColor;
+  } else if (awayScore > homeScore) {
+    awayColor = "#000000"; // 赢家黑色文字
+    awayScoreBg = winnerColor; // 金色背景
+    awayBorderColor = winnerColor;
+  }
+  // 如果相等，保持默认深灰背景
+
   return (
     <Pressable
       onPress={handlePress}
       style={({ pressed }) => [
         styles.card,
-        { backgroundColor: cardBg, borderColor, opacity: pressed ? 0.7 : 1 },
+        { backgroundColor: cardBg, opacity: pressed ? 0.8 : 1 },
       ]}
     >
-      <View style={styles.header}>
-        <View
-          style={[
-            styles.leagueBadge,
-            { backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
-          ]}
-        >
-          <ThemedText style={styles.leagueText} numberOfLines={1}>
-            {match.league}
-          </ThemedText>
-        </View>
-        <ThemedText style={styles.timeText}>{match.time}</ThemedText>
-      </View>
-
-      <View style={styles.teamsContainer}>
-        <ThemedText type="defaultSemiBold" style={styles.teamsText}>
-          {match.home} vs2 {match.away}
+      {/* 1. 左侧：时间/状态 */}
+      <View style={styles.leftColumn}>
+        {/* 如果有状态字段 match.meta (如 'FT', 'AET'), 优先显示，否则显示时间 */}
+        <ThemedText style={styles.statusText}>
+          {(match.meta || match.time || "").toUpperCase()}
         </ThemedText>
-        <View style={styles.scoreContainer}>
-          <ThemedText type="defaultSemiBold" style={styles.scoreText}>
-            {match.scoreText}
+      </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>
+
+        {/* 客队行 */}
+        <View style={[styles.teamRow, { marginTop: 6 }]}>
+          <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>
-          <TouchableOpacity
-            onPress={(e) => {
-              e.stopPropagation();
-              toggleFavorite();
-            }}
-            disabled={loading}
-            hitSlop={{ top: 12, bottom: 12, left: 12, right: 12 }}
-          >
-            <IconSymbol
-              name={isFav ? "star" : "star-outline"}
-              size={24}
-              color={isFav ? "#FFD700" : iconColor}
-            />
-          </TouchableOpacity>
         </View>
       </View>
 
-      {match.meta && (
-        <ThemedText style={styles.metaText}>{match.meta}</ThemedText>
-      )}
+      {/* 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}
+            </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>
+
+        {/* 收藏按钮 */}
+        <TouchableOpacity
+          onPress={(e) => {
+            e.stopPropagation();
+            toggleFavorite();
+          }}
+          disabled={loading}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          style={styles.favoriteButton}
+        >
+          <IconSymbol
+            name={isFav ? "star" : "star-outline"}
+            size={20}
+            color={isFav ? "#FFD700" : "#545458"}
+          />
+        </TouchableOpacity>
+      </View>
     </Pressable>
   );
 }
 
 const styles = StyleSheet.create({
   card: {
-    padding: 12,
-    marginBottom: 12,
+    flexDirection: "row",
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    marginHorizontal: 0,
+    marginBottom: 0,
     borderRadius: 12,
-    borderWidth: 1,
-  },
-  header: {
-    flexDirection: "row",
     alignItems: "center",
-    marginBottom: 8,
+    minHeight: 68,
   },
-  leagueBadge: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    marginRight: 8,
-    maxWidth: "70%",
+  // 左侧时间列
+  leftColumn: {
+    width: 52,
+    justifyContent: "center",
+    alignItems: "flex-start",
+    marginRight: 12,
   },
-  leagueText: {
+  statusText: {
     fontSize: 12,
-    opacity: 0.7,
+    color: "#8E8E93", // 次要文本颜色 (Grey)
+    fontWeight: "600",
   },
-  timeText: {
-    fontSize: 12,
-    opacity: 0.5,
-  },
-  teamsContainer: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 4,
-  },
-  teamsText: {
-    fontSize: 16,
+  // 中间球队列
+  teamsColumn: {
     flex: 1,
-    marginRight: 8,
+    justifyContent: "center",
+    paddingRight: 8,
   },
-  scoreContainer: {
+  teamRow: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 12,
+  },
+  teamLogo: {
+    width: 22,
+    height: 22,
+    borderRadius: 11, // 圆形图标
+    marginRight: 10,
+    backgroundColor: "#3A3A3C", // 图片加载占位
+  },
+  teamName: {
+    fontSize: 16,
+    fontWeight: "500",
+    flex: 1,
+  },
+  // 右侧整体包装
+  rightWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  // 比分列
+  scoresColumn: {
+    alignItems: "flex-end", // 数字右对齐
+    justifyContent: "center",
+    marginRight: 12,
+  },
+  scoreBox: {
+    minWidth: 32,
+    height: 28,
+    borderRadius: 6,
+    justifyContent: "center",
+    alignItems: "center",
+    paddingHorizontal: 8,
   },
   scoreText: {
     fontSize: 16,
+    fontWeight: "700",
+    lineHeight: 20,
   },
-  metaText: {
-    fontSize: 12,
-    opacity: 0.5,
-    marginTop: 4,
-  },
-});
+  // 收藏按钮
+  favoriteButton: {
+    paddingHorizontal: 4,
+    paddingVertical: 4,
+    justifyContent: 'center',
+    alignItems: 'center',
+  }
+});