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

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

@@ -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,