分离足球事件卡片

components/match-detail/football/goals-card.tsx

@@ -0,0 +1,164 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { GoalEvent, MatchDetailData } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StyleSheet, View } from "react-native";
+
+interface GoalsCardProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+export function GoalsCard({ data, isDark }: GoalsCardProps) {
+  const { t } = useTranslation();
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const borderColor = isDark ? "#2C2C2E" : "#EEE";
+
+  // events 可能在 data.events 或 match.events 中
+  const events = (data as any).events || (data.match as any).events;
+  if (!events || typeof events !== "object") {
+    return null;
+  }
+
+  // 处理数组格式的 events
+  let eventsObj = events;
+  if (Array.isArray(events) && events.length > 0) {
+    eventsObj = events[0];
+  }
+
+  const goalscorers = eventsObj?.goalscorers || [];
+  const filteredGoals = goalscorers.filter((goal: GoalEvent) => goal.home_scorer || goal.away_scorer);
+
+  if (filteredGoals.length === 0) {
+    return null;
+  }
+
+  const renderGoalEvent = (goal: GoalEvent, index: number) => {
+    const isHome = !!goal.home_scorer;
+    const scorerRaw = goal.home_scorer || goal.away_scorer || "";
+    const isPenalty = scorerRaw.includes("(pen.)");
+    const playerName = scorerRaw.replace("(pen.)", "").trim();
+
+    return (
+      <View key={index} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
+        <View style={styles.eventTime}>
+          <ThemedText style={styles.timeText}>
+            {goal.time ? `${goal.time}'` : ""}
+          </ThemedText>
+        </View>
+        <View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
+          <IconSymbol name="football" size={16} color={isDark ? "#4CAF50" : "#2E7D32"} />
+          <View style={styles.goalContent}>
+            {playerName && (
+              <ThemedText style={styles.eventText} numberOfLines={1}>
+                {playerName}
+              </ThemedText>
+            )}
+            {isPenalty && (
+              <View style={styles.penaltyBadge}>
+                <ThemedText style={styles.penaltyText}>P</ThemedText>
+              </View>
+            )}
+          </View>
+          {goal.score && (
+            <ThemedText style={styles.scoreText}>{goal.score}</ThemedText>
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
+      <ThemedText style={styles.title}>
+        {t("detail.events.goals")}
+      </ThemedText>
+      <View style={styles.content}>
+        {filteredGoals.map((goal: GoalEvent, index: number) => renderGoalEvent(goal, index))}
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    marginTop: 16,
+    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,
+  },
+  eventRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  eventTime: {
+    width: 40,
+    alignItems: "center",
+  },
+  timeText: {
+    fontSize: 12,
+    fontWeight: "500",
+    opacity: 0.6,
+  },
+  eventContent: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingLeft: 12,
+  },
+  homeEvent: {
+    justifyContent: "flex-start",
+  },
+  awayEvent: {
+    justifyContent: "flex-end",
+    flexDirection: "row-reverse",
+  },
+  eventText: {
+    fontSize: 13,
+    fontWeight: "500",
+    flex: 1,
+  },
+  scoreText: {
+    fontSize: 12,
+    fontWeight: "600",
+    opacity: 0.7,
+  },
+  goalContent: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+  },
+  penaltyBadge: {
+    width: 18,
+    height: 18,
+    borderRadius: 9,
+    backgroundColor: "#FF9800",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  penaltyText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: "#FFF",
+  },
+});