更新联赛
This commit is contained in:
xianyi
@@ -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',
|
||||
}
|
||||
|
||||
@@ -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}>
|
||||
<ThemedText style={styles.matchCount}>
|
||||
{league.matchCount}
|
||||
</ThemedText>
|
||||
|
||||
{enableCollapsible && league.matchCount > 0 && (
|
||||
<ThemedText style={styles.chevron}>
|
||||
{isCollapsed ? "⌄" : "⌃"}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
{enableCollapsible && league.matchCount > 0 && (
|
||||
<ChevronIcon isCollapsed={isCollapsed} isDark={isDark} />
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
|
||||
{!isCollapsed && (
|
||||
<View style={styles.matchListContainer}>
|
||||
<View
|
||||
style={[
|
||||
styles.matchListContainer,
|
||||
{ backgroundColor: cardBg, marginTop: 8 },
|
||||
]}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
{[0, 1, 2].map((i) => (
|
||||
<View
|
||||
key={i}
|
||||
style={[
|
||||
styles.matchCardWrapper,
|
||||
i < 2 && styles.matchCardDivider,
|
||||
]}
|
||||
>
|
||||
<View style={styles.skeletonRow}>
|
||||
<View style={styles.leftColumn}>
|
||||
<View
|
||||
style={[styles.skeletonLine, { width: 30, marginBottom: 6 }]}
|
||||
/>
|
||||
<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 style={styles.matchCardWrapper}>
|
||||
<View style={styles.skeletonRow}>
|
||||
<View style={styles.leftColumn}>
|
||||
<View style={[styles.skeletonLine, { width: 30, backgroundColor: skeletonBg }]} />
|
||||
</View>
|
||||
<View style={styles.teamsColumn}>
|
||||
<View style={styles.skeletonTeamRow}>
|
||||
<View style={[styles.skeletonAvatar, { backgroundColor: skeletonBg }]} />
|
||||
<View style={[styles.skeletonLine, { flex: 1, backgroundColor: skeletonBg }]} />
|
||||
</View>
|
||||
<View style={[styles.skeletonTeamRow, { marginTop: 10 }]}>
|
||||
<View style={[styles.skeletonAvatar, { backgroundColor: skeletonBg }]} />
|
||||
<View style={[styles.skeletonLine, { flex: 1, backgroundColor: skeletonBg }]} />
|
||||
</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 &&
|
||||
styles.matchCardDivider,
|
||||
index < leagueMatches.length - 1 && [styles.matchCardDivider, { borderBottomColor: dividerColor }],
|
||||
]}
|
||||
>
|
||||
<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,
|
||||
backgroundColor: "transparent",
|
||||
paddingVertical: 14,
|
||||
borderRadius: 12,
|
||||
marginHorizontal: 16,
|
||||
},
|
||||
leagueHeaderLeft: {
|
||||
flexDirection: "row",
|
||||
@@ -277,81 +315,76 @@ const styles = StyleSheet.create({
|
||||
flex: 1,
|
||||
},
|
||||
leagueLogo: {
|
||||
width: 36,
|
||||
height: 36,
|
||||
borderRadius: 6,
|
||||
width: 24,
|
||||
height: 24,
|
||||
borderRadius: 8,
|
||||
marginRight: 12,
|
||||
backgroundColor: "#3A3A3C",
|
||||
marginLeft: 14,
|
||||
},
|
||||
leagueInfoText: {
|
||||
justifyContent: "center",
|
||||
},
|
||||
leagueTitle: {
|
||||
fontSize: 17,
|
||||
fontWeight: "600",
|
||||
color: "#FFFFFF",
|
||||
marginBottom: 3,
|
||||
fontSize: 14,
|
||||
fontWeight: "700",
|
||||
marginBottom: 4,
|
||||
lineHeight: 16,
|
||||
},
|
||||
countryRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
countryFlag: {
|
||||
width: 16,
|
||||
height: 12,
|
||||
marginRight: 5,
|
||||
width: 14,
|
||||
height: 14,
|
||||
marginRight: 6,
|
||||
borderRadius: 2,
|
||||
},
|
||||
countryName: {
|
||||
fontSize: 13,
|
||||
color: "#8E8E93",
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
lineHeight: 12,
|
||||
},
|
||||
leagueHeaderRight: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
gap: 8,
|
||||
},
|
||||
matchCount: {
|
||||
fontSize: 15,
|
||||
color: "#8E8E93",
|
||||
fontWeight: "600",
|
||||
chevronContainer: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
chevron: {
|
||||
fontSize: 16,
|
||||
color: "#8E8E93",
|
||||
fontWeight: '600',
|
||||
chevronIcon: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
},
|
||||
matchListContainer: {
|
||||
backgroundColor: "#1C1C1E",
|
||||
borderRadius: 12,
|
||||
borderRadius: 16,
|
||||
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,
|
||||
borderBottomColor: "#3A3A3C",
|
||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||
},
|
||||
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,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "#2C2C2E",
|
||||
height: 10,
|
||||
borderRadius: 5,
|
||||
},
|
||||
skeletonAvatar: {
|
||||
width: 20,
|
||||
height: 20,
|
||||
borderRadius: 10,
|
||||
backgroundColor: "#2C2C2E",
|
||||
marginRight: 10,
|
||||
width: 28,
|
||||
height: 28,
|
||||
borderRadius: 14,
|
||||
marginRight: 12,
|
||||
},
|
||||
skeletonTeamRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
},
|
||||
skeletonScoreBox: {
|
||||
width: 24,
|
||||
height: 32,
|
||||
width: 40,
|
||||
height: 64,
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#2C2C2E",
|
||||
},
|
||||
skeletonCircle: {
|
||||
width: 16,
|
||||
height: 16,
|
||||
borderRadius: 8,
|
||||
backgroundColor: "#2C2C2E",
|
||||
width: 22,
|
||||
height: 22,
|
||||
borderRadius: 11,
|
||||
},
|
||||
emptyContainer: {
|
||||
flex: 1,
|
||||
|
||||
Reference in New Issue
Block a user