From 28f83ae87107400cc2e6ad682d7fd26cba70d45b Mon Sep 17 00:00:00 2001
From: yuchenglong <yclworks@gmail.com>
Date: Wed, 21 Jan 2026 10:04:07 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BA=8B=E4=BB=B6=E6=97=B6?=
 =?UTF-8?q?=E9=97=B4=E7=BA=BF=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=A2=9E=E5=BC=BA?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E4=BF=A1=E6=81=AF=E5=B1=95=E7=A4=BA=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F=E4=BB=A5=E6=8F=90=E5=8D=87?=
 =?UTF-8?q?=E5=8F=AF=E8=AF=BB=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/live-detail/events-timeline.tsx | 278 ++++++++++++++-------
 1 file changed, 189 insertions(+), 89 deletions(-)

diff --git a/components/live-detail/events-timeline.tsx b/components/live-detail/events-timeline.tsx
index 2452fc6..93cca05 100644
--- a/components/live-detail/events-timeline.tsx
+++ b/components/live-detail/events-timeline.tsx
@@ -127,16 +127,26 @@ export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
                 <View style={[styles.eventContent, styles.homeContent]}>
                   {event.type === "goal" && (
                     <View style={styles.goalBox}>
-                      <ThemedText style={styles.eventLabel}>
-                        {event.isPenalty
-                          ? t("detail.events.penalty_goal")
-                          : t("detail.events.goal")}
-                      </ThemedText>
+                      <View style={styles.eventInfo}>
+                        <ThemedText
+                          style={[styles.playerName, isDark && styles.darkText]}
+                          numberOfLines={1}
+                        >
+                          {event.player || t("detail.events.goal")}
+                        </ThemedText>
+                        {event.detail ? (
+                          <ThemedText
+                            style={styles.eventDetail}
+                            numberOfLines={1}
+                          >
+                            {event.detail}
+                          </ThemedText>
+                        ) : null}
+                      </View>
                       <View
                         style={[
                           styles.playerIconPlaceholder,
                           isDark && styles.darkItem,
-                          isDark && { borderColor: "#333" },
                         ]}
                       >
                         <IconSymbol
@@ -162,16 +172,26 @@ export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
                     </View>
                   )}
                   {event.type === "card" && (
-                    <View
-                      style={[
-                        styles.cardPill,
-                        isDark && styles.darkItem,
-                        { borderColor: isDark ? "#333" : "#EEE" },
-                      ]}
-                    >
+                    <View style={styles.goalBox}>
+                      <View style={styles.eventInfo}>
+                        <ThemedText
+                          style={[styles.playerName, isDark && styles.darkText]}
+                          numberOfLines={1}
+                        >
+                          {event.player}
+                        </ThemedText>
+                        <ThemedText
+                          style={styles.eventDetail}
+                          numberOfLines={1}
+                        >
+                          {event.detail?.includes("yellow")
+                            ? t("detail.events.yellow_card")
+                            : t("detail.events.red_card")}
+                        </ThemedText>
+                      </View>
                       <View
                         style={[
-                          styles.miniCard,
+                          styles.cardIconBox,
                           {
                             backgroundColor: event.detail?.includes("yellow")
                               ? "#FFD700"
@@ -182,15 +202,33 @@ export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
                     </View>
                   )}
                   {event.type === "sub" && (
-                    <View style={styles.subBox}>
-                      <ThemedText
-                        style={[styles.subInText, isDark && styles.darkText]}
+                    <View style={styles.goalBox}>
+                      <View style={styles.eventInfo}>
+                        <ThemedText
+                          style={[styles.playerName, isDark && styles.darkText]}
+                          numberOfLines={1}
+                        >
+                          {event.playerIn}
+                        </ThemedText>
+                        <ThemedText
+                          style={styles.eventDetail}
+                          numberOfLines={1}
+                        >
+                          {`↓ ${event.playerOut}`}
+                        </ThemedText>
+                      </View>
+                      <View
+                        style={[
+                          styles.subIconBox,
+                          isDark && { backgroundColor: "#1B5E20" },
+                        ]}
                       >
-                        {event.playerIn}
-                      </ThemedText>
-                      <ThemedText style={styles.subOutText}>
-                        {event.playerOut}
-                      </ThemedText>
+                        <IconSymbol
+                          name="swap-vertical"
+                          size={14}
+                          color="#4CD964"
+                        />
+                      </View>
                     </View>
                   )}
                 </View>
@@ -248,7 +286,6 @@ export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
                         style={[
                           styles.playerIconPlaceholder,
                           isDark && styles.darkItem,
-                          isDark && { borderColor: "#333" },
                         ]}
                       >
                         <IconSymbol
@@ -257,24 +294,31 @@ export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
                           color={isDark ? "#666" : "#BBB"}
                         />
                       </View>
-                      <ThemedText style={styles.eventLabel}>
-                        {event.isPenalty
-                          ? t("detail.events.penalty_goal")
-                          : t("detail.events.goal")}
-                      </ThemedText>
+                      <View
+                        style={[styles.eventInfo, { alignItems: "flex-start" }]}
+                      >
+                        <ThemedText
+                          style={[styles.playerName, isDark && styles.darkText]}
+                          numberOfLines={1}
+                        >
+                          {event.player || t("detail.events.goal")}
+                        </ThemedText>
+                        {event.detail ? (
+                          <ThemedText
+                            style={styles.eventDetail}
+                            numberOfLines={1}
+                          >
+                            {event.detail}
+                          </ThemedText>
+                        ) : null}
+                      </View>
                     </View>
                   )}
                   {event.type === "card" && (
-                    <View
-                      style={[
-                        styles.cardPill,
-                        isDark && styles.darkItem,
-                        { borderColor: isDark ? "#333" : "#EEE" },
-                      ]}
-                    >
+                    <View style={styles.goalBox}>
                       <View
                         style={[
-                          styles.miniCard,
+                          styles.cardIconBox,
                           {
                             backgroundColor: event.detail?.includes("yellow")
                               ? "#FFD700"
@@ -282,24 +326,56 @@ export function EventsTimeline({ match, isDark }: EventsTimelineProps) {
                           },
                         ]}
                       />
+                      <View
+                        style={[styles.eventInfo, { alignItems: "flex-start" }]}
+                      >
+                        <ThemedText
+                          style={[styles.playerName, isDark && styles.darkText]}
+                          numberOfLines={1}
+                        >
+                          {event.player}
+                        </ThemedText>
+                        <ThemedText
+                          style={styles.eventDetail}
+                          numberOfLines={1}
+                        >
+                          {event.detail?.includes("yellow")
+                            ? t("detail.events.yellow_card")
+                            : t("detail.events.red_card")}
+                        </ThemedText>
+                      </View>
                     </View>
                   )}
                   {event.type === "sub" && (
-                    <View style={styles.subBox}>
-                      <ThemedText
+                    <View style={styles.goalBox}>
+                      <View
                         style={[
-                          styles.subInText,
-                          isDark && styles.darkText,
-                          { textAlign: "left" },
+                          styles.subIconBox,
+                          isDark && { backgroundColor: "#1B5E20" },
                         ]}
                       >
-                        {event.playerIn}
-                      </ThemedText>
-                      <ThemedText
-                        style={[styles.subOutText, { textAlign: "left" }]}
+                        <IconSymbol
+                          name="swap-vertical"
+                          size={14}
+                          color="#4CD964"
+                        />
+                      </View>
+                      <View
+                        style={[styles.eventInfo, { alignItems: "flex-start" }]}
                       >
-                        {event.playerOut}
-                      </ThemedText>
+                        <ThemedText
+                          style={[styles.playerName, isDark && styles.darkText]}
+                          numberOfLines={1}
+                        >
+                          {event.playerIn}
+                        </ThemedText>
+                        <ThemedText
+                          style={styles.eventDetail}
+                          numberOfLines={1}
+                        >
+                          {`↓ ${event.playerOut}`}
+                        </ThemedText>
+                      </View>
                     </View>
                   )}
                 </View>
@@ -388,45 +464,47 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     width: "100%",
     alignItems: "center",
-    marginVertical: 12,
+    marginVertical: 18,
   },
   sideContainer: {
     flex: 1,
   },
   timePointContainer: {
-    width: 60,
+    width: 50,
     alignItems: "center",
     justifyContent: "center",
   },
   timeCircle: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    backgroundColor: "#FFF",
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: "#F8F9FA",
     justifyContent: "center",
     alignItems: "center",
     zIndex: 1,
     borderWidth: 1,
-    borderColor: "#F0F0F0",
+    borderColor: "#E9ECEF",
   },
   timeText: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: "#333",
+    fontSize: 11,
+    fontWeight: "600",
+    color: "#666",
   },
   statusPill: {
-    position: "absolute",
-    backgroundColor: "#FFF",
+    backgroundColor: "#F0F0F0",
     borderWidth: 1,
     borderColor: "#E0E0E0",
-    paddingHorizontal: 12,
-    paddingVertical: 4,
-    borderRadius: 15,
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    borderRadius: 20,
     zIndex: 2,
+    minWidth: 100,
+    alignItems: "center",
   },
   statusText: {
-    fontSize: 14,
+    fontSize: 13,
     fontWeight: "bold",
+    color: "#333",
   },
   eventContent: {
     flexDirection: "row",
@@ -434,11 +512,11 @@ const styles = StyleSheet.create({
   },
   homeContent: {
     justifyContent: "flex-end",
-    paddingRight: 10,
+    paddingRight: 12,
   },
   awayContent: {
     justifyContent: "flex-start",
-    paddingLeft: 10,
+    paddingLeft: 12,
   },
   scorePill: {
     flexDirection: "row",
@@ -446,15 +524,30 @@ const styles = StyleSheet.create({
     backgroundColor: "#FFF",
     borderWidth: 1.5,
     borderColor: "#FFD700",
-    borderRadius: 12,
-    paddingHorizontal: 6,
-    paddingVertical: 2,
+    borderRadius: 14,
+    paddingHorizontal: 8,
+    paddingVertical: 3,
     gap: 4,
   },
   scoreLabel: {
     fontSize: 14,
     fontWeight: "bold",
   },
+  eventInfo: {
+    flex: 1,
+    alignItems: "flex-end",
+    justifyContent: "center",
+    marginHorizontal: 8,
+  },
+  playerName: {
+    fontSize: 13,
+    fontWeight: "600",
+    color: "#333",
+  },
+  eventDetail: {
+    fontSize: 11,
+    color: "#999",
+  },
   eventLabel: {
     fontSize: 12,
     color: "#999",
@@ -463,40 +556,47 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: 8,
+    flex: 1,
   },
   playerIconPlaceholder: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    backgroundColor: "#EEE",
-    borderWidth: 1,
-    borderColor: "#DDD",
-  },
-  cardPill: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "#F0F0F0",
     borderWidth: 1,
+    borderColor: "#E0E0E0",
     justifyContent: "center",
     alignItems: "center",
-    backgroundColor: "#FFF",
   },
-  miniCard: {
-    width: 10,
-    height: 14,
-    borderRadius: 2,
+  cardIconBox: {
+    width: 20,
+    height: 26,
+    borderRadius: 3,
+    borderWidth: 1,
+    borderColor: "rgba(0,0,0,0.1)",
   },
-  subBox: {
-    alignItems: "flex-end",
+  subIconBox: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: "#E8F5E9",
+    justifyContent: "center",
+    alignItems: "center",
   },
   subInText: {
-    fontSize: 12,
+    fontSize: 13,
+    fontWeight: "600",
     color: "#333",
-    fontWeight: "500",
   },
   subOutText: {
-    fontSize: 10,
+    fontSize: 11,
     color: "#999",
+    marginTop: 1,
+  },
+  miniCard: {
+    width: 6,
+    height: 9,
+    borderRadius: 1,
   },
   penaltyIcon: {
     width: 12,