分离足球事件卡片

2026-01-14 14:32:59 +08:00
parent 98717b0716
commit d83ca038c7
6 changed files with 787 additions and 16 deletions
--- a/components/match-detail/football/lineups-card.tsx
+++ b/components/match-detail/football/lineups-card.tsx
@@ -0,0 +1,142 @@
+import { ThemedText } from "@/components/themed-text";
+import { MatchDetailData, Player } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface LineupsCardProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function LineupsCard({ data, isDark }: LineupsCardProps) {
+  const { t } = useTranslation();
+  const { match } = data;
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const borderColor = isDark ? "#2C2C2E" : "#EEE";
+
+  const players = (match as any).players || null;
+
+  if (!players || (!players.home_team && !players.away_team)) {
+    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);
+
+  if (!hasLineups) {
+    return null;
+  }
+
+  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 && (
+          <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}
+                </ThemedText>
+                <ThemedText style={styles.playerName} numberOfLines={1}>
+                  {player.player_name || player.player || player.name || ""}
+                </ThemedText>
+                {player.position && (
+                  <ThemedText style={styles.playerPosition}>
+                    {player.position}
+                  </ThemedText>
+                )}
+              </View>
+            ))}
+          </View>
+        )}
+        {players.away_team && Array.isArray(players.away_team) && players.away_team.length > 0 && (
+          <View style={[styles.teamLineup, { marginTop: 16 }]}>
+            <ThemedText style={styles.teamName}>
+              {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}
+                </ThemedText>
+                <ThemedText style={styles.playerName} numberOfLines={1}>
+                  {player.player_name || player.player || player.name || ""}
+                </ThemedText>
+                {player.position && (
+                  <ThemedText style={styles.playerPosition}>
+                    {player.position}
+                  </ThemedText>
+                )}
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    marginTop: 0,
+    borderRadius: 12,
+    padding: 16,
+    borderWidth: 1,
+    elevation: 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  title: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 12,
+    opacity: 0.7,
+  },
+  content: {
+    gap: 0,
+  },
+  teamLineup: {
+    marginTop: 8,
+  },
+  teamName: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginBottom: 8,
+    opacity: 0.8,
+  },
+  playerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 4,
+    gap: 8,
+  },
+  playerNumber: {
+    fontSize: 12,
+    fontWeight: "600",
+    width: 24,
+    textAlign: "center",
+    opacity: 0.6,
+  },
+  playerName: {
+    fontSize: 13,
+    fontWeight: "500",
+    flex: 1,
+  },
+  playerPosition: {
+    fontSize: 11,
+    fontWeight: "500",
+    opacity: 0.5,
+    textTransform: "uppercase",
+  },
+});