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

优化事件时间线组件，增强事件信息展示，调整样式以提升可读性

Browse Source
This commit is contained in:
yuchenglong
2026-01-21 10:04:07 +08:00
parent 9fcc7eebd3
commit 28f83ae871
1 changed files with 189 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

256
components/live-detail/events-timeline.tsx
View File

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