无图片默认渐变色头像

components/matches-by-league.tsx

@@ -3,8 +3,10 @@ import { ThemedText } from "@/components/themed-text";
 import { Colors } from "@/constants/theme";
 import { useTheme } from "@/context/ThemeContext";
 import { fetchLeagues, fetchTodayMatches } from "@/lib/api";
+import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
 import { League, Match } from "@/types/api";
 import { Image } from "expo-image";
+import { LinearGradient } from "expo-linear-gradient";
 import React, { useState } from "react";
 import {
   ActivityIndicator,
@@ -208,12 +210,27 @@ export function MatchesByLeague({
               style={[styles.leagueHeaderWrapper, { backgroundColor: headerBg }]}
             >
               <View style={styles.leagueHeaderLeft}>
-                <Image
-                  source={{
-                    uri: league.logo || "https://placehold.co/40x40/png",
-                  }}
-                  style={[styles.leagueLogo, { backgroundColor: isDark ? "#3A3A3C" : "#E5E5E5" }]}
-                />
+                {(() => {
+                  const hasLogo = league.logo && league.logo.trim() !== "" && !league.logo.includes("placehold");
+                  const gradient = getLogoGradient(league.name || "");
+                  const initials = getInitials(league.name || "");
+
+                  return hasLogo ? (
+                    <Image
+                      source={{ uri: league.logo }}
+                      style={[styles.leagueLogo, { backgroundColor: isDark ? "#3A3A3C" : "#E5E5E5" }]}
+                    />
+                  ) : (
+                    <LinearGradient
+                      colors={[gradient.color1, gradient.color2]}
+                      start={{ x: 0, y: 0 }}
+                      end={{ x: 1, y: 1 }}
+                      style={styles.leagueLogoGradient}
+                    >
+                      <ThemedText style={styles.leagueLogoText}>{initials}</ThemedText>
+                    </LinearGradient>
+                  );
+                })()}
 
                 <View style={styles.leagueInfoText}>
                   <ThemedText
@@ -326,6 +343,20 @@ const styles = StyleSheet.create({
     marginRight: 12,
     marginLeft: 14,
   },
+  leagueLogoGradient: {
+    width: 24,
+    height: 24,
+    borderRadius: 8,
+    marginRight: 12,
+    marginLeft: 14,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  leagueLogoText: {
+    fontSize: 9,
+    fontWeight: "700",
+    color: "rgba(255, 255, 255, 0.92)",
+  },
   leagueInfoText: {
     justifyContent: "center",
   },