更新联赛

assets/down-light.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768876941545" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4855" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M346.453333 396.373333L512 561.92l165.546667-165.546667a42.496 42.496 0 1 1 60.16 60.16l-195.84 195.84a42.496 42.496 0 0 1-60.16 0L285.866667 456.533333a42.496 42.496 0 0 1 0-60.16c16.64-16.213333 43.946667-16.64 60.586666 0z" fill="#515151" p-id="4856"></path></svg>

assets/down.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1768876662032" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4702" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M346.453333 396.373333L512 561.92l165.546667-165.546667a42.496 42.496 0 1 1 60.16 60.16l-195.84 195.84a42.496 42.496 0 0 1-60.16 0L285.866667 456.533333a42.496 42.496 0 0 1 0-60.16c16.64-16.213333 43.946667-16.64 60.586666 0z" fill="#959BA7" p-id="4703"></path></svg>

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 textColor = isDark ? Colors.dark.text : Colors.light.text;
-  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const secondaryText = isDark ? "#8E8E93" : "#6B7280";
-  const textColor = isDark ? "#FFFFFF" : "#000000";
+  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 winnerColor = "#FF9500";
+
-  const loserColor = isDark ? "#FFFFFF" : "#000000";
+  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 (数字或字符串)
+  const { homeRedCards, awayRedCards, homeYellowCards, awayYellowCards } = React.useMemo(() => {
-  // 如果 API 只有 "1 - 0" 这种 scoreText，你需要在这里拆分
+    let homeRed = (match as any).homeRedCards || 0;
-  // 这里为了演示，假设 match 对象已经扩展了这些字段，或者我们从 scoreText 简单解析
+    let awayRed = (match as any).awayRedCards || 0;
-  let homeScore = 0;
+    let homeYellow = (match as any).homeYellowCards || 0;
-  let awayScore = 0;
+    let awayYellow = (match as any).awayYellowCards || 0;
 
-  // 简单的解析逻辑 demo (根据你的实际数据结构调整)
+    const matchStats = (match as any).stats;
-  if (match.scoreText && match.scoreText.includes("-")) {
+    if (matchStats) {
-    const parts = match.scoreText.split("-");
+      try {
-    homeScore = parseInt(parts[0].trim()) || 0;
+        const stats = typeof matchStats === 'string' ? JSON.parse(matchStats) : matchStats;
-    awayScore = parseInt(parts[1].trim()) || 0;
+        const redCardsStat = stats.find((s: any) => s.type === "Red Cards");
-  }
+        const yellowCardsStat = stats.find((s: any) => s.type === "Yellow Cards");
-  // 如果 match 对象里直接有 match.homeScore 最好:
-  // homeScore = match.homeScore;
-  // awayScore = match.awayScore;
 
-  // 判断文字颜色和背景样式
+        if (redCardsStat) {
-  let homeColor = loserColor;
+          homeRed = parseInt(redCardsStat.home) || 0;
-  let awayColor = loserColor;
+          awayRed = parseInt(redCardsStat.away) || 0;
-  let homeScoreBg = "#2C2C2E"; // 默认深灰背景
+        }
-  let awayScoreBg = "#2C2C2E";
+        if (yellowCardsStat) {
-  let homeBorderColor = "transparent";
+          homeYellow = parseInt(yellowCardsStat.home) || 0;
-  let awayBorderColor = "transparent";
+          awayYellow = parseInt(yellowCardsStat.away) || 0;
+        }
+      } catch (e) {
+        console.error("Parse stats error:", e);
+      }
+    }
 
-  if (homeScore > awayScore) {
+    return { homeRedCards: homeRed, awayRedCards: awayRed, homeYellowCards: homeYellow, awayYellowCards: awayYellow };
-    homeColor = "#000000"; // 赢家黑色文字
+  }, [(match as any).stats, (match as any).homeRedCards, (match as any).awayRedCards]);
-    homeScoreBg = winnerColor; // 金色背景
+
-    homeBorderColor = winnerColor;
+  const cardBg = isDark ? "#1C1C1E" : "#F5F5F5";
-  } else if (awayScore > homeScore) {
-    awayColor = "#000000"; // 赢家黑色文字
-    awayScoreBg = winnerColor; // 金色背景
-    awayBorderColor = winnerColor;
-  }
-  // 如果相等，保持默认深灰背景
 
   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, { color: secondaryText }]}>
-        <ThemedText style={styles.statusText}>
           {(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}>
+          <View style={styles.teamNameContainer}>
-            {match.home || match.homeTeamName}
+            <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
-          </ThemedText>
+              {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: 10 }]}>
-        <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}>
+          <View style={styles.teamNameContainer}>
-            {match.away || match.awayTeamName}
+            <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
-          </ThemedText>
+              {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}>
-        {/* 比分列 (上下排布) */}
+        {scoreParts.hasScore ? (
-        <View style={styles.scoresColumn}>
+          <View
-          <View style={[
+            style={[
-            styles.scoreBox,
+              styles.scoreBox,
-            {
+              {
-              backgroundColor: homeScoreBg,
+                borderColor: isLive ? "#FF9500" : scoreBorder,
-              borderColor: homeBorderColor,
+                backgroundColor: scoreBg,
-              borderWidth: homeBorderColor !== "transparent" ? 1.5 : 0,
+              },
-            }
+            ]}
-          ]}>
+          >
-            <ThemedText style={[styles.scoreText, { color: homeColor }]}>
+            <ThemedText style={styles.scoreBoxText} numberOfLines={1}>
-              {homeScore}
+              {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,
+          <View style={styles.scoreBoxPlaceholder} />
-            {
+        )}
-              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();
@@ -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",
+    alignItems: "center",
-    marginRight: 12,
+    marginRight: 8,
   },
   statusText: {
-    fontSize: 12,
+    fontSize: 14,
-    color: "#8E8E93", // 次要文本颜色 (Grey)
     fontWeight: "600",
   },
-  // 中间球队列
   teamsColumn: {
     flex: 1,
     justifyContent: "center",
-    paddingRight: 8,
+    paddingRight: 12,
   },
   teamRow: {
     flexDirection: "row",
     alignItems: "center",
   },
   teamLogo: {
-    width: 22,
+    width: 24,
-    height: 22,
+    height: 24,
-    borderRadius: 11, // 圆形图标
+    borderRadius: 14,
-    marginRight: 10,
+    marginRight: 12,
-    backgroundColor: "#3A3A3C", // 图片加载占位
+    backgroundColor: "#E5E5E5",
   },
-  teamName: {
+  teamNameContainer: {
-    fontSize: 16,
+    flexDirection: "row",
-    fontWeight: "500",
+    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",
-  },
+    gap: 6,
-  // 比分列
-  scoresColumn: {
-    alignItems: "flex-end", // 数字右对齐
-    justifyContent: "center",
-    marginRight: 12,
   },
   scoreBox: {
-    minWidth: 32,
+    width: 36,
-    height: 28,
+    height: 54,
-    borderRadius: 6,
+    borderRadius: 8,
-    justifyContent: "center",
+    borderWidth: 1.5,
     alignItems: "center",
-    paddingHorizontal: 8,
+    justifyContent: "center",
   },
-  scoreText: {
+  scoreBoxText: {
-    fontSize: 16,
+    fontSize: 20,
-    fontWeight: "700",
+    fontWeight: "900",
-    lineHeight: 20,
+  },
+  scoreDivider: {
+    width: "60%",
+    height: 1,
+    marginVertical: 1,
+  },
+  scoreBoxPlaceholder: {
+    width: 36,
+    height: 54,
   },
-  // 收藏按钮
   favoriteButton: {
-    paddingHorizontal: 4,
+    padding: 4,
-    paddingVertical: 4,
     justifyContent: 'center',
     alignItems: 'center',
   }

components/matches-by-league.tsx

@@ -1,11 +1,13 @@
 import { MatchCardLeague } from "@/components/match-card-league";
 import { ThemedText } from "@/components/themed-text";
+import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { fetchLeagues, fetchTodayMatches } from "@/lib/api";
 import { League, Match } from "@/types/api";
+import { Image } from "expo-image";
 import React, { useState } from "react";
 import {
-  Image,
+  ActivityIndicator,
   LayoutAnimation,
   Platform,
   ScrollView,
@@ -14,6 +16,11 @@ import {
   UIManager,
   View,
 } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
 
 // 开启 Android 上的 LayoutAnimation
 if (
@@ -41,6 +48,34 @@ export function MatchesByLeague({
   const { theme } = useTheme();
   const isDark = theme === "dark";
 
+  function ChevronIcon({ isCollapsed, isDark }: { isCollapsed: boolean; isDark: boolean }) {
+    const rotation = useSharedValue(isCollapsed ? 0 : 180);
+
+    React.useEffect(() => {
+      rotation.value = withTiming(isCollapsed ? 0 : 180, { duration: 200 });
+    }, [isCollapsed, rotation]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+      transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+
+    return (
+      <View style={styles.leagueHeaderRight}>
+        <Animated.View style={[styles.chevronContainer, animatedStyle]}>
+          <Image
+            source={
+              isDark
+                ? require("@/assets/down.svg")
+                : require("@/assets/down-light.svg")
+            }
+            style={styles.chevronIcon}
+            contentFit="contain"
+          />
+        </Animated.View>
+      </View>
+    );
+  }
+
   const [leagues, setLeagues] = useState<League[]>([]);
   const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
   const [matchesByLeagueKey, setMatchesByLeagueKey] = useState<
@@ -49,6 +84,7 @@ export function MatchesByLeague({
   const [loadingLeagueKey, setLoadingLeagueKey] = useState<
     Record<string, boolean>
   >({});
+  const [loadingLeagues, setLoadingLeagues] = useState(true);
 
   const dateStr = React.useMemo(() => {
     const year = date.getFullYear();
@@ -59,6 +95,7 @@ export function MatchesByLeague({
 
   React.useEffect(() => {
     let mounted = true;
+    setLoadingLeagues(true);
     fetchLeagues({
       sportId,
       date: dateStr,
@@ -79,8 +116,12 @@ export function MatchesByLeague({
         });
         setMatchesByLeagueKey({});
         setLoadingLeagueKey({});
+        setLoadingLeagues(false);
       })
-      .catch(() => { });
+      .catch(() => {
+        if (!mounted) return;
+        setLoadingLeagues(false);
+      });
     return () => {
       mounted = false;
     };
@@ -105,12 +146,25 @@ export function MatchesByLeague({
         page: 1,
         pageSize: 50,
       });
+      console.log("choose", res);
       setMatchesByLeagueKey((prev) => ({ ...prev, [leagueKey]: res.list }));
     } finally {
       setLoadingLeagueKey((prev) => ({ ...prev, [leagueKey]: false }));
     }
   };
 
+  if (loadingLeagues) {
+    return (
+      <View style={styles.emptyContainer}>
+        <ActivityIndicator
+          size="large"
+          color={isDark ? Colors.dark.tint : Colors.light.tint}
+        />
+        <ThemedText style={{ marginTop: 10 }}>加载中...</ThemedText>
+      </View>
+    );
+  }
+
   if (leagues.length === 0) {
     return (
       <View style={styles.emptyContainer}>
@@ -119,13 +173,18 @@ export function MatchesByLeague({
     );
   }
 
+  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const dividerColor = isDark ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
+  const skeletonBg = isDark ? "#2C2C2E" : "#E5E5E5";
+  const headerBg = isDark ? "#1C1C1E" : "#FBFBFB";
+
   return (
     <ScrollView
       style={[
         styles.container,
-        { backgroundColor: isDark ? "#000000" : "#F2F2F7" }
+        { backgroundColor: isDark ? Colors.dark.background : "#FFFFFF" },
       ]}
-      contentContainerStyle={{ paddingBottom: 40 }}
+      contentContainerStyle={{ paddingBottom: 40, paddingTop: 8 }}
     >
       {leagues.map((league) => {
         const isCollapsed = collapsed[league.key] !== false;
@@ -141,103 +200,81 @@ export function MatchesByLeague({
                   toggleCollapse(league.key);
                 }
               }}
-              style={styles.leagueHeaderWrapper}
+              style={[styles.leagueHeaderWrapper, { backgroundColor: headerBg }]}
             >
               <View style={styles.leagueHeaderLeft}>
                 <Image
                   source={{
                     uri: league.logo || "https://placehold.co/40x40/png",
                   }}
-                  style={styles.leagueLogo}
+                  style={[styles.leagueLogo, { backgroundColor: isDark ? "#3A3A3C" : "#E5E5E5" }]}
                 />
 
                 <View style={styles.leagueInfoText}>
-                  <ThemedText style={styles.leagueTitle}>{league.name}</ThemedText>
+                  <ThemedText
+                    style={[
+                      styles.leagueTitle,
+                      { color: isDark ? Colors.dark.text : Colors.light.text },
+                    ]}
+                  >
+                    {league.name}
+                  </ThemedText>
 
                   <View style={styles.countryRow}>
                     <Image
                       source={{ uri: league.countryLogo || "https://placehold.co/20x20/png" }}
                       style={styles.countryFlag}
                     />
-                    <ThemedText style={styles.countryName}>
+                    <ThemedText style={[styles.countryName, { color: isDark ? Colors.dark.text : Colors.light.text }]}>
                       {league.countryName || "International"}
                     </ThemedText>
                   </View>
                 </View>
               </View>
 
-              <View style={styles.leagueHeaderRight}>
+              {enableCollapsible && league.matchCount > 0 && (
-                <ThemedText style={styles.matchCount}>
+                <ChevronIcon isCollapsed={isCollapsed} isDark={isDark} />
-                  {league.matchCount}
+              )}
-                </ThemedText>
-
-                {enableCollapsible && league.matchCount > 0 && (
-                  <ThemedText style={styles.chevron}>
-                    {isCollapsed ? "⌄" : "⌃"}
-                  </ThemedText>
-                )}
-              </View>
             </TouchableOpacity>
 
             {!isCollapsed && (
-              <View style={styles.matchListContainer}>
+              <View
+                style={[
+                  styles.matchListContainer,
+                  { backgroundColor: cardBg, marginTop: 8 },
+                ]}
+              >
                 {isLoading ? (
-                  <>
+                  <View style={styles.matchCardWrapper}>
-                    {[0, 1, 2].map((i) => (
+                    <View style={styles.skeletonRow}>
-                      <View
+                      <View style={styles.leftColumn}>
-                        key={i}
+                        <View style={[styles.skeletonLine, { width: 30, backgroundColor: skeletonBg }]} />
-                        style={[
+                      </View>
-                          styles.matchCardWrapper,
+                      <View style={styles.teamsColumn}>
-                          i < 2 && styles.matchCardDivider,
+                        <View style={styles.skeletonTeamRow}>
-                        ]}
+                          <View style={[styles.skeletonAvatar, { backgroundColor: skeletonBg }]} />
-                      >
+                          <View style={[styles.skeletonLine, { flex: 1, backgroundColor: skeletonBg }]} />
-                        <View style={styles.skeletonRow}>
+                        </View>
-                          <View style={styles.leftColumn}>
+                        <View style={[styles.skeletonTeamRow, { marginTop: 10 }]}>
-                            <View
+                          <View style={[styles.skeletonAvatar, { backgroundColor: skeletonBg }]} />
-                              style={[styles.skeletonLine, { width: 30, marginBottom: 6 }]}
+                          <View style={[styles.skeletonLine, { flex: 1, backgroundColor: skeletonBg }]} />
-                            />
-                            <View
-                              style={[styles.skeletonLine, { width: 24 }]}
-                            />
-                          </View>
-                          <View style={styles.teamsColumn}>
-                            <View style={styles.skeletonTeamRow}>
-                              <View style={styles.skeletonAvatar} />
-                              <View
-                                style={[
-                                  styles.skeletonLine,
-                                  { flex: 1 },
-                                ]}
-                              />
-                            </View>
-                            <View style={[styles.skeletonTeamRow, { marginTop: 8 }]}>
-                              <View style={styles.skeletonAvatar} />
-                              <View
-                                style={[
-                                  styles.skeletonLine,
-                                  { flex: 1 },
-                                ]}
-                              />
-                            </View>
-                          </View>
-                          <View style={styles.rightWrapper}>
-                            <View style={styles.skeletonScoreBox} />
-                            <View style={styles.favoriteButton}>
-                              <View style={styles.skeletonCircle} />
-                            </View>
-                          </View>
                         </View>
                       </View>
-                    ))}
+                      <View style={styles.rightWrapper}>
-                  </>
+                        <View style={[styles.skeletonScoreBox, { backgroundColor: skeletonBg }]} />
+                        <View style={styles.favoriteButton}>
+                          <View style={[styles.skeletonCircle, { backgroundColor: skeletonBg }]} />
+                        </View>
+                      </View>
+                    </View>
+                  </View>
                 ) : (
                   leagueMatches.map((match, index) => (
                     <View
                       key={match.id}
                       style={[
                         styles.matchCardWrapper,
-                        index < leagueMatches.length - 1 &&
+                        index < leagueMatches.length - 1 && [styles.matchCardDivider, { borderBottomColor: dividerColor }],
-                        styles.matchCardDivider,
                       ]}
                     >
                       <MatchCardLeague
@@ -261,15 +298,16 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   leagueSection: {
-    marginBottom: 16,
+    marginBottom: 8,
   },
   leagueHeaderWrapper: {
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
     paddingHorizontal: 16,
-    paddingVertical: 12,
+    paddingVertical: 14,
-    backgroundColor: "transparent",
+    borderRadius: 12,
+    marginHorizontal: 16,
   },
   leagueHeaderLeft: {
     flexDirection: "row",
@@ -277,81 +315,76 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   leagueLogo: {
-    width: 36,
+    width: 24,
-    height: 36,
+    height: 24,
-    borderRadius: 6,
+    borderRadius: 8,
     marginRight: 12,
-    backgroundColor: "#3A3A3C",
+    marginLeft: 14,
   },
   leagueInfoText: {
     justifyContent: "center",
   },
   leagueTitle: {
-    fontSize: 17,
+    fontSize: 14,
-    fontWeight: "600",
+    fontWeight: "700",
-    color: "#FFFFFF",
+    marginBottom: 4,
-    marginBottom: 3,
+    lineHeight: 16,
   },
   countryRow: {
     flexDirection: "row",
     alignItems: "center",
   },
   countryFlag: {
-    width: 16,
+    width: 14,
-    height: 12,
+    height: 14,
-    marginRight: 5,
+    marginRight: 6,
     borderRadius: 2,
   },
   countryName: {
-    fontSize: 13,
+    fontSize: 12,
-    color: "#8E8E93",
     fontWeight: "500",
+    lineHeight: 12,
   },
   leagueHeaderRight: {
     flexDirection: "row",
     alignItems: "center",
-    gap: 8,
   },
-  matchCount: {
+  chevronContainer: {
-    fontSize: 15,
+    width: 16,
-    color: "#8E8E93",
+    height: 16,
-    fontWeight: "600",
+    justifyContent: "center",
+    alignItems: "center",
   },
-  chevron: {
+  chevronIcon: {
-    fontSize: 16,
+    width: 16,
-    color: "#8E8E93",
+    height: 16,
-    fontWeight: '600',
   },
   matchListContainer: {
-    backgroundColor: "#1C1C1E",
+    borderRadius: 16,
-    borderRadius: 12,
     marginHorizontal: 16,
     overflow: "hidden",
   },
-  // 布局与 MatchCardLeague 保持一致，便于骨架对齐
   leftColumn: {
-    width: 50,
+    width: 48,
     justifyContent: "center",
-    alignItems: "flex-start",
+    alignItems: "center",
     marginRight: 8,
   },
   teamsColumn: {
     flex: 1,
     justifyContent: "center",
-    paddingRight: 8,
+    paddingRight: 12,
   },
   rightWrapper: {
     flexDirection: "row",
     alignItems: "center",
   },
-  matchCardWrapper: {
+  matchCardWrapper: {},
-  },
   matchCardDivider: {
-    borderBottomWidth: 0.5,
+    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: "#3A3A3C",
   },
   favoriteButton: {
-    paddingLeft: 12,
+    paddingLeft: 16,
     justifyContent: "center",
     alignItems: "center",
   },
@@ -359,35 +392,31 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     paddingHorizontal: 16,
-    paddingVertical: 14,
+    paddingVertical: 16,
   },
   skeletonLine: {
-    height: 8,
+    height: 10,
-    borderRadius: 4,
+    borderRadius: 5,
-    backgroundColor: "#2C2C2E",
   },
   skeletonAvatar: {
-    width: 20,
+    width: 28,
-    height: 20,
+    height: 28,
-    borderRadius: 10,
+    borderRadius: 14,
-    backgroundColor: "#2C2C2E",
+    marginRight: 12,
-    marginRight: 10,
   },
   skeletonTeamRow: {
     flexDirection: "row",
     alignItems: "center",
   },
   skeletonScoreBox: {
-    width: 24,
+    width: 40,
-    height: 32,
+    height: 64,
     borderRadius: 8,
-    backgroundColor: "#2C2C2E",
   },
   skeletonCircle: {
-    width: 16,
+    width: 22,
-    height: 16,
+    height: 22,
-    borderRadius: 8,
+    borderRadius: 11,
-    backgroundColor: "#2C2C2E",
   },
   emptyContainer: {
     flex: 1,