优化首发阵容显示
This commit is contained in:
xianyi
@@ -21,62 +21,379 @@ export function LineupsCard({ data, isDark }: LineupsCardProps) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hasLineups =
|
||||
(players.home_team && Array.isArray(players.home_team) && players.home_team.length > 0) ||
|
||||
(players.away_team && Array.isArray(players.away_team) && players.away_team.length > 0);
|
||||
// 兼容两种结构：
|
||||
// 1) home_team/away_team 直接是球员数组
|
||||
// 2) home_team/away_team 是对象，包含 starting_lineups/substitutes/coaches 等
|
||||
const getTeamData = (team: any) => {
|
||||
const starting: any[] = [];
|
||||
const subs: any[] = [];
|
||||
let coachName: string | undefined;
|
||||
let coachCountry: string | undefined;
|
||||
|
||||
if (!team) {
|
||||
return { starting, subs, coachName, coachCountry };
|
||||
}
|
||||
|
||||
if (Array.isArray(team)) {
|
||||
// 旧结构：直接数组 = 首发
|
||||
return { starting: team, subs, coachName, coachCountry };
|
||||
}
|
||||
|
||||
if (Array.isArray(team.starting_lineups)) {
|
||||
starting.push(...team.starting_lineups);
|
||||
}
|
||||
if (Array.isArray(team.substitutes)) {
|
||||
subs.push(...team.substitutes);
|
||||
}
|
||||
if (Array.isArray(team.coaches) && team.coaches.length > 0) {
|
||||
const c = team.coaches[0];
|
||||
coachName = c?.coache || c?.name;
|
||||
coachCountry = c?.coache_country || c?.country;
|
||||
}
|
||||
|
||||
return { starting, subs, coachName, coachCountry };
|
||||
};
|
||||
|
||||
const home = getTeamData(players.home_team);
|
||||
const away = getTeamData(players.away_team);
|
||||
|
||||
const hasLineups = home.starting.length > 0 || away.starting.length > 0;
|
||||
|
||||
if (!hasLineups) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const getPlayerNumber = (p: any, idx: number) =>
|
||||
p?.player_number ?? p?.number ?? p?.playerNumber ?? idx + 1;
|
||||
|
||||
const getPlayerName = (p: any) =>
|
||||
p?.player_name ?? p?.player ?? p?.name ?? p?.playerName ?? "";
|
||||
|
||||
const getPlayerPosition = (p: any) =>
|
||||
p?.position ?? p?.player_type ?? p?.player_position ?? "";
|
||||
|
||||
const splitByPosition = (list: any[]) => {
|
||||
const gk: any[] = [];
|
||||
const def: any[] = [];
|
||||
const mid: any[] = [];
|
||||
const fwd: any[] = [];
|
||||
|
||||
list.forEach((p) => {
|
||||
const pos = Number(p?.player_position ?? p?.positionCode ?? 0);
|
||||
if (pos === 1) {
|
||||
gk.push(p);
|
||||
} else if (pos >= 2 && pos <= 5) {
|
||||
def.push(p);
|
||||
} else if (pos >= 6 && pos <= 8) {
|
||||
mid.push(p);
|
||||
} else if (pos >= 9 && pos <= 11) {
|
||||
fwd.push(p);
|
||||
} else {
|
||||
// 没有合理编号的，放到中场组兜底
|
||||
mid.push(p);
|
||||
}
|
||||
});
|
||||
|
||||
return { gk, def, mid, fwd };
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
|
||||
<ThemedText style={styles.title}>
|
||||
{t("detail.events.lineups")}
|
||||
</ThemedText>
|
||||
<View style={styles.content}>
|
||||
{players.home_team && Array.isArray(players.home_team) && players.home_team.length > 0 && (
|
||||
{/* 主队首发 */}
|
||||
{home.starting.length > 0 && (
|
||||
<View style={styles.teamLineup}>
|
||||
<ThemedText style={styles.teamName}>
|
||||
{match.eventHomeTeam}
|
||||
</ThemedText>
|
||||
{players.home_team.slice(0, 11).map((player: Player, idx: number) => (
|
||||
<View key={idx} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{player.player_number || player.number || idx + 1}
|
||||
{(() => {
|
||||
const groups = splitByPosition(home.starting.slice(0, 11));
|
||||
return (
|
||||
<>
|
||||
{groups.gk.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={styles.lineGroupTitle}>
|
||||
{t("detail.events.lineups_goalkeepers")}
|
||||
</ThemedText>
|
||||
{groups.gk.map((player: Player, idx: number) => (
|
||||
<View key={`home-gk-${idx}`} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={styles.playerPosition}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{groups.def.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={styles.lineGroupTitle}>
|
||||
{t("detail.events.lineups_defenders")}
|
||||
</ThemedText>
|
||||
{groups.def.map((player: Player, idx: number) => (
|
||||
<View key={`home-def-${idx}`} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={styles.playerPosition}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{groups.mid.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={styles.lineGroupTitle}>
|
||||
{t("detail.events.lineups_midfielders")}
|
||||
</ThemedText>
|
||||
{groups.mid.map((player: Player, idx: number) => (
|
||||
<View key={`home-mid-${idx}`} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={styles.playerPosition}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{groups.fwd.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={styles.lineGroupTitle}>
|
||||
{t("detail.events.lineups_forwards")}
|
||||
</ThemedText>
|
||||
{groups.fwd.map((player: Player, idx: number) => (
|
||||
<View key={`home-fwd-${idx}`} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={styles.playerPosition}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
|
||||
{home.coachName && (
|
||||
<View style={styles.coachRow}>
|
||||
<ThemedText style={styles.coachLabel}>
|
||||
{t("detail.events.lineups_coach")}:
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{player.player_name || player.player || player.name || ""}
|
||||
<ThemedText style={styles.coachValue}>
|
||||
{home.coachName}
|
||||
{home.coachCountry ? ` (${home.coachCountry})` : ""}
|
||||
</ThemedText>
|
||||
{player.position && (
|
||||
<ThemedText style={styles.playerPosition}>
|
||||
{player.position}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
)}
|
||||
|
||||
{Array.isArray(home.subs) && home.subs.length > 0 && (
|
||||
<View style={styles.subsSection}>
|
||||
<ThemedText style={styles.subsTitle}>
|
||||
{t("detail.events.lineups_subs")}
|
||||
</ThemedText>
|
||||
{home.subs.map((p: any, idx: number) => (
|
||||
<View key={`home-sub-${idx}`} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{getPlayerNumber(p, idx)}
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{getPlayerName(p)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
{players.away_team && Array.isArray(players.away_team) && players.away_team.length > 0 && (
|
||||
{/* 客队首发 */}
|
||||
{away.starting.length > 0 && (
|
||||
<View style={[styles.teamLineup, { marginTop: 16 }]}>
|
||||
<ThemedText style={styles.teamName}>
|
||||
<ThemedText style={[styles.teamName, styles.awayTeamName]}>
|
||||
{match.eventAwayTeam}
|
||||
</ThemedText>
|
||||
{players.away_team.slice(0, 11).map((player: Player, idx: number) => (
|
||||
<View key={idx} style={styles.playerRow}>
|
||||
<ThemedText style={styles.playerNumber}>
|
||||
{player.player_number || player.number || idx + 1}
|
||||
{(() => {
|
||||
const groups = splitByPosition(away.starting.slice(0, 11));
|
||||
return (
|
||||
<>
|
||||
{groups.gk.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
||||
{t("detail.events.lineups_goalkeepers")}
|
||||
</ThemedText>
|
||||
{groups.gk.map((player: Player, idx: number) => (
|
||||
<View
|
||||
key={`away-gk-${idx}`}
|
||||
style={[styles.playerRow, styles.awayPlayerRow]}
|
||||
>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
<ThemedText
|
||||
style={[styles.playerName, styles.awayText]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{groups.def.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
||||
{t("detail.events.lineups_defenders")}
|
||||
</ThemedText>
|
||||
{groups.def.map((player: Player, idx: number) => (
|
||||
<View
|
||||
key={`away-def-${idx}`}
|
||||
style={[styles.playerRow, styles.awayPlayerRow]}
|
||||
>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
<ThemedText
|
||||
style={[styles.playerName, styles.awayText]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{groups.mid.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
||||
{t("detail.events.lineups_midfielders")}
|
||||
</ThemedText>
|
||||
{groups.mid.map((player: Player, idx: number) => (
|
||||
<View
|
||||
key={`away-mid-${idx}`}
|
||||
style={[styles.playerRow, styles.awayPlayerRow]}
|
||||
>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
<ThemedText
|
||||
style={[styles.playerName, styles.awayText]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
{groups.fwd.length > 0 && (
|
||||
<View style={styles.lineGroup}>
|
||||
<ThemedText style={[styles.lineGroupTitle, styles.awayText]}>
|
||||
{t("detail.events.lineups_forwards")}
|
||||
</ThemedText>
|
||||
{groups.fwd.map((player: Player, idx: number) => (
|
||||
<View
|
||||
key={`away-fwd-${idx}`}
|
||||
style={[styles.playerRow, styles.awayPlayerRow]}
|
||||
>
|
||||
{!!getPlayerPosition(player) && (
|
||||
<ThemedText style={[styles.playerPosition, styles.awayText]}>
|
||||
{String(getPlayerPosition(player))}
|
||||
</ThemedText>
|
||||
)}
|
||||
<ThemedText
|
||||
style={[styles.playerName, styles.awayText]}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{getPlayerName(player)}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
||||
{getPlayerNumber(player, idx)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
|
||||
{away.coachName && (
|
||||
<View style={styles.coachRow}>
|
||||
<ThemedText style={styles.coachLabel}>
|
||||
{t("detail.events.lineups_coach")}:
|
||||
</ThemedText>
|
||||
<ThemedText style={styles.playerName} numberOfLines={1}>
|
||||
{player.player_name || player.player || player.name || ""}
|
||||
<ThemedText style={styles.coachValue}>
|
||||
{away.coachName}
|
||||
{away.coachCountry ? ` (${away.coachCountry})` : ""}
|
||||
</ThemedText>
|
||||
{player.position && (
|
||||
<ThemedText style={styles.playerPosition}>
|
||||
{player.position}
|
||||
</ThemedText>
|
||||
)}
|
||||
</View>
|
||||
))}
|
||||
)}
|
||||
|
||||
{Array.isArray(away.subs) && away.subs.length > 0 && (
|
||||
<View style={styles.subsSection}>
|
||||
<ThemedText style={[styles.subsTitle, styles.awayText]}>
|
||||
{t("detail.events.lineups_subs")}
|
||||
</ThemedText>
|
||||
{away.subs.map((p: any, idx: number) => (
|
||||
<View
|
||||
key={`away-sub-${idx}`}
|
||||
style={[styles.playerRow, styles.awayPlayerRow]}
|
||||
>
|
||||
<ThemedText style={[styles.playerName, styles.awayText]} numberOfLines={1}>
|
||||
{getPlayerName(p)}
|
||||
</ThemedText>
|
||||
<ThemedText style={[styles.playerNumber, styles.awayNumber]}>
|
||||
{getPlayerNumber(p, idx)}
|
||||
</ThemedText>
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
@@ -100,11 +417,11 @@ const styles = StyleSheet.create({
|
||||
title: {
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
marginBottom: 12,
|
||||
marginBottom: 14,
|
||||
opacity: 0.7,
|
||||
},
|
||||
content: {
|
||||
gap: 0,
|
||||
gap: 6,
|
||||
},
|
||||
teamLineup: {
|
||||
marginTop: 8,
|
||||
@@ -115,12 +432,19 @@ const styles = StyleSheet.create({
|
||||
marginBottom: 8,
|
||||
opacity: 0.8,
|
||||
},
|
||||
awayTeamName: {
|
||||
textAlign: "right",
|
||||
},
|
||||
playerRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingVertical: 4,
|
||||
gap: 8,
|
||||
},
|
||||
awayPlayerRow: {
|
||||
flexDirection: "row",
|
||||
justifyContent: "flex-end",
|
||||
},
|
||||
playerNumber: {
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
@@ -139,4 +463,44 @@ const styles = StyleSheet.create({
|
||||
opacity: 0.5,
|
||||
textTransform: "uppercase",
|
||||
},
|
||||
awayText: {
|
||||
textAlign: "right",
|
||||
},
|
||||
awayNumber: {
|
||||
textAlign: "right",
|
||||
},
|
||||
// 每条线（守门员/后卫/中场/前锋）的容器
|
||||
lineGroup: {
|
||||
marginBottom: 8,
|
||||
},
|
||||
lineGroupTitle: {
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
opacity: 0.7,
|
||||
marginBottom: 6,
|
||||
},
|
||||
// 主/客队教练行
|
||||
coachRow: {
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
marginTop: 12,
|
||||
gap: 6,
|
||||
},
|
||||
coachLabel: {
|
||||
fontSize: 12,
|
||||
opacity: 0.7,
|
||||
},
|
||||
coachValue: {
|
||||
fontSize: 12,
|
||||
fontWeight: "500",
|
||||
},
|
||||
// 替补区
|
||||
subsSection: {
|
||||
marginTop: 12,
|
||||
},
|
||||
subsTitle: {
|
||||
fontSize: 12,
|
||||
opacity: 0.7,
|
||||
marginBottom: 6,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user