physical/physical-expo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

更新联赛

Browse Source
This commit is contained in:
xianyi
2026-01-20 11:58:43 +08:00
parent fa13b3c17d
commit ebb40ec8f9
4 changed files with 295 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
assets/down-light.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 600 B

1
assets/down.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 600 B

265
components/match-card-league.tsx
View File

@@ -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',
}

269
components/matches-by-league.tsx
View File

@@ -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,