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

优化详情显示

Browse Source
This commit is contained in:
xianyi
2026-01-13 16:46:16 +08:00
parent 74868f0288
commit c7c6585c7c
8 changed files with 564 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
app/match-detail/[id].tsx
View File

@@ -1,4 +1,5 @@
import { BasketballScoreTable } from "@/components/match-detail/basketball/basketball-score-table";
import { FootballEvents } from "@/components/match-detail/football/football-events";
import { FootballScoreTable } from "@/components/match-detail/football/football-score-table";
import { LeagueInfo } from "@/components/match-detail/league-info";
import { MatchInfoCard } from "@/components/match-detail/match-info-card";
@@ -71,6 +72,8 @@ export default function MatchDetailScreen() {
setError(null);
const result = await fetchMatchDetail(id as string);
setData(result);
console.log("首发阵容" , result.match.players?.away_team);
} catch (err: any) {
setError(err.message || t("detail.fetch_failed"));
} finally {
@@ -104,11 +107,12 @@ export default function MatchDetailScreen() {
case "info":
// 根据 sportId 显示不同的详情组件
if (sportId === 1) {
// 足球：显示 FootballScoreTable (半场/全场) 和 MatchInfoCard
// 足球：显示 FootballScoreTable (半场/全场)、MatchInfoCard 和 FootballEvents
return (
<>
<FootballScoreTable data={data} isDark={isDark} />
<MatchInfoCard data={data} isDark={isDark} />
<FootballEvents data={data} isDark={isDark} />
</>
);
} else if (sportId === 2) {
@@ -125,6 +129,7 @@ export default function MatchDetailScreen() {
<>
<FootballScoreTable data={data} isDark={isDark} />
<MatchInfoCard data={data} isDark={isDark} />
<FootballEvents data={data} isDark={isDark} />
</>
);
}

402
components/match-detail/football/football-events.tsx Normal file
View File

@@ -0,0 +1,402 @@
import { ThemedText } from "@/components/themed-text";
import { IconSymbol } from "@/components/ui/icon-symbol";
import { CardEvent, GoalEvent, MatchDetailData, Player, SubstituteEvent } from "@/types/api";
import React from "react";
import { useTranslation } from "react-i18next";
import { StyleSheet, View } from "react-native";
interface FootballEventsProps {
data: MatchDetailData;
isDark: boolean;
}
export function FootballEvents({ data, isDark }: FootballEventsProps) {
const { t } = useTranslation();
const { match } = data;
const bgColor = isDark ? "#1C1C1E" : "#FFF";
const borderColor = isDark ? "#2C2C2E" : "#EEE";
// events 可能在 data.events 或 match.events 中
const events = (data as any).events || (match as any).events;
// 调试：打印 events 数据
if (__DEV__) {
console.log("FootballEvents - events data:", events);
}
if (!events || typeof events !== "object") {
if (__DEV__) {
console.log("FootballEvents - No events data found");
}
return null;
}
// 处理数组格式的 events（如果 events 是数组）
let eventsObj = events;
if (Array.isArray(events) && events.length > 0) {
// 如果 events 是数组，取第一个元素
eventsObj = events[0];
}
const goalscorers = eventsObj?.goalscorers || [];
const cards = eventsObj?.cards || [];
const substitutes = eventsObj?.substitutes || [];
const players = (match as any).players || null;
if (__DEV__) {
console.log("FootballEvents - goalscorers:", goalscorers.length, "cards:", cards.length, "substitutes:", substitutes.length);
}
const hasEvents = goalscorers.length > 0 || cards.length > 0 || substitutes.length > 0;
if (!hasEvents) {
if (__DEV__) {
console.log("FootballEvents - No events to display");
}
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>
);
};
const renderCardEvent = (card: CardEvent, index: number) => {
const isHome = !!card.home_fault;
const cardType = card.card?.toLowerCase() || "";
const isRed = cardType.includes("red");
const isYellow = cardType.includes("yellow");
const cardColor = isRed ? "#F44336" : isYellow ? "#FFC107" : "#9E9E9E";
const playerName = card.home_fault || card.away_fault || "";
return (
<View key={`card-${index}`} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
<View style={styles.eventTime}>
<ThemedText style={styles.timeText}>
{card.time ? `${card.time}'` : ""}
</ThemedText>
</View>
<View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
<View style={[styles.cardIcon, { backgroundColor: cardColor }]} />
<ThemedText style={styles.eventText} numberOfLines={1}>
{playerName}
</ThemedText>
{card.card && (
<View style={[styles.cardBadge, { backgroundColor: cardColor + "20" }]}>
<ThemedText style={[styles.cardTypeText, { color: cardColor }]}>
{isRed ? t("detail.events.red_card") : isYellow ? t("detail.events.yellow_card") : card.card}
</ThemedText>
</View>
)}
</View>
</View>
);
};
const renderSubstituteEvent = (sub: SubstituteEvent, index: number) => {
const isHome = !!sub.home_scorer || !!sub.home_assist;
// 换人数据可能包含：home_scorer (换入), away_scorer (换出) 或相反
// 也可能有单独的字段如 home_assist, away_assist 等
const playerIn = sub.home_scorer || sub.home_assist || sub.away_scorer || "";
const playerOut = sub.away_scorer || sub.away_assist || sub.home_scorer_out || sub.away_scorer_out || "";
return (
<View key={`sub-${index}`} style={[styles.eventRow, { borderBottomColor: borderColor }]}>
<View style={styles.eventTime}>
<ThemedText style={styles.timeText}>
{sub.time ? `${sub.time}'` : ""}
</ThemedText>
</View>
<View style={[styles.eventContent, isHome ? styles.homeEvent : styles.awayEvent]}>
<IconSymbol name="swap-horizontal" size={16} color={isDark ? "#2196F3" : "#1976D2"} />
<View style={styles.substituteContent}>
{playerOut ? (
<>
<ThemedText style={[styles.substituteIn, { color: isDark ? "#4CAF50" : "#2E7D32" }]} numberOfLines={1}>
{playerIn}
</ThemedText>
<ThemedText style={styles.substituteArrow}>↔</ThemedText>
<ThemedText style={styles.substituteOut} numberOfLines={1}>
{playerOut}
</ThemedText>
</>
) : (
<ThemedText style={styles.eventText} numberOfLines={1}>
{playerIn}
</ThemedText>
)}
</View>
</View>
</View>
);
};
return (
<View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
{goalscorers.length > 0 && (
<View style={styles.section}>
<ThemedText style={styles.sectionTitle}>
{t("detail.events.goals")}
</ThemedText>
{goalscorers
.filter((goal: GoalEvent) => goal.home_scorer || goal.away_scorer)
.map((goal: GoalEvent, index: number) => renderGoalEvent(goal, index))}
</View>
)}
{cards.length > 0 && (
<View style={styles.section}>
<ThemedText style={styles.sectionTitle}>
{t("detail.events.cards")}
</ThemedText>
{cards
.filter((card: CardEvent) => card.home_fault || card.away_fault)
.map((card: CardEvent, index: number) => renderCardEvent(card, index))}
</View>
)}
{substitutes.length > 0 && (
<View style={styles.section}>
<ThemedText style={styles.sectionTitle}>
{t("detail.events.substitutes")}
</ThemedText>
{substitutes
.filter((sub: SubstituteEvent) => sub.home_scorer || sub.away_scorer || sub.home_assist || sub.away_assist)
.map((sub: SubstituteEvent, index: number) => renderSubstituteEvent(sub, index))}
</View>
)}
{players && (players.home_team || players.away_team) && (
<View style={styles.section}>
<ThemedText style={styles.sectionTitle}>
{t("detail.events.lineups")}
</ThemedText>
{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,
},
section: {
marginBottom: 20,
},
sectionTitle: {
fontSize: 14,
fontWeight: "600",
marginBottom: 12,
opacity: 0.7,
},
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,
},
cardIcon: {
width: 12,
height: 16,
borderRadius: 2,
},
cardTypeText: {
fontSize: 10,
fontWeight: "600",
textTransform: "uppercase",
},
cardBadge: {
paddingHorizontal: 6,
paddingVertical: 2,
borderRadius: 4,
},
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",
},
substituteContent: {
flex: 1,
flexDirection: "row",
alignItems: "center",
gap: 6,
},
substituteIn: {
fontSize: 13,
fontWeight: "500",
},
substituteArrow: {
fontSize: 12,
opacity: 0.5,
},
substituteOut: {
fontSize: 13,
fontWeight: "500",
opacity: 0.6,
textDecorationLine: "line-through",
},
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",
},
});

50
components/match-detail/football/football-score-table.tsx
View File

@@ -9,10 +9,11 @@ interface FootballScoreTableProps {
isDark: boolean;
}
// 解析足球比分字符串，例如 "2-1" 或 "1-0"
// 解析足球比分字符串，例如 "2 - 1" 或 "1-0"
function parseFootballScore(scoreString: string): number[] {
if (!scoreString || scoreString === "-") return [0, 0];
const parts = scoreString.split("-");
if (!scoreString || scoreString === "-" || scoreString.trim() === "") return [0, 0];
// 处理 "2 - 1" 或 "2-1" 格式
const parts = scoreString.replace(/\s+/g, "").split("-");
if (parts.length === 2) {
return [parseInt(parts[0]) || 0, parseInt(parts[1]) || 0];
}
@@ -25,27 +26,42 @@ export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
const bgColor = isDark ? "#1C1C1E" : "#FFF";
const headerTextColor = isDark ? "#666" : "#999";
// 解析足球比分
// 解析各种比分
const finalScore = parseFootballScore(match.eventFinalResult || "-");
const halftimeScore = parseFootballScore(match.eventHalftimeResult || "-");
const ftScore = parseFootballScore(match.eventFtResult || "-");
const penaltyScore = parseFootballScore(match.eventPenaltyResult || "-");
const headers = [
t("detail.score_table.team"),
t("detail.score_table.total"),
t("detail.score_table.halftime"),
];
// 判断是否有加时赛或点球
const hasExtraTime = ftScore[0] !== finalScore[0] || ftScore[1] !== finalScore[1];
const hasPenalty = penaltyScore[0] > 0 || penaltyScore[1] > 0;
// 动态生成表头
const headers = [t("detail.score_table.team")];
if (hasPenalty) {
headers.push(t("detail.score_table.penalty"));
}
if (hasExtraTime) {
headers.push(t("detail.score_table.extra_time"));
}
headers.push(t("detail.score_table.full_time"));
headers.push(t("detail.score_table.halftime"));
const rows = [
{
logo: match.homeTeamLogo,
name: match.eventHomeTeam,
total: finalScore[0],
penalty: hasPenalty ? penaltyScore[0] : null,
extraTime: hasExtraTime ? finalScore[0] : null,
fullTime: hasExtraTime ? ftScore[0] : finalScore[0],
halftime: halftimeScore[0],
},
{
logo: match.awayTeamLogo,
name: match.eventAwayTeam,
total: finalScore[1],
penalty: hasPenalty ? penaltyScore[1] : null,
extraTime: hasExtraTime ? finalScore[1] : null,
fullTime: hasExtraTime ? ftScore[1] : finalScore[1],
halftime: halftimeScore[1],
},
];
@@ -78,7 +94,17 @@ export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
{row.name}
</ThemedText>
</View>
<ThemedText style={styles.cellText}>{row.total}</ThemedText>
{hasPenalty && (
<ThemedText style={styles.cellText}>
{row.penalty !== null ? row.penalty : "-"}
</ThemedText>
)}
{hasExtraTime && (
<ThemedText style={styles.cellText}>
{row.extraTime !== null ? row.extraTime : "-"}
</ThemedText>
)}
<ThemedText style={styles.cellText}>{row.fullTime}</ThemedText>
<ThemedText style={styles.cellText}>{row.halftime}</ThemedText>
</View>
))}

49
components/match-detail/match-info-card.tsx
View File

@@ -13,6 +13,17 @@ export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
const { t } = useTranslation();
const { match } = data;
const bgColor = isDark ? "#1C1C1E" : "#FFF";
const labelColor = isDark ? "#999" : "#666";
const valueColor = isDark ? "#FFF" : "#000";
const infoItems = [
{ label: t("detail.info_card.country"), value: match.countryName },
{ label: t("detail.info_card.league"), value: match.leagueName },
{ label: t("detail.info_card.stage"), value: match.stageName },
{ label: t("detail.info_card.stadium"), value: match.eventStadium },
{ label: t("detail.info_card.referee"), value: match.eventReferee },
{ label: t("detail.info_card.date"), value: `${match.eventDate} ${match.eventTime}` },
].filter((item) => item.value && item.value.trim() !== "");
return (
<View style={[styles.container, { backgroundColor: bgColor }]}>
@@ -21,10 +32,16 @@ export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
</ThemedText>
<View style={styles.content}>
<ThemedText style={styles.leagueName}>{match.leagueName}</ThemedText>
<ThemedText style={styles.dateTime}>
{match.eventDate} • {match.eventTime}
</ThemedText>
{infoItems.map((item, index) => (
<View key={index} style={styles.infoRow}>
<ThemedText style={[styles.label, { color: labelColor }]}>
{item.label}
</ThemedText>
<ThemedText style={[styles.value, { color: valueColor }]} numberOfLines={2}>
{item.value}
</ThemedText>
</View>
))}
</View>
</View>
);
@@ -49,14 +66,24 @@ const styles = StyleSheet.create({
marginBottom: 16,
},
content: {
gap: 4,
gap: 12,
},
leagueName: {
fontSize: 16,
fontWeight: "600",
infoRow: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "flex-start",
gap: 12,
},
dateTime: {
fontSize: 14,
opacity: 0.6,
label: {
fontSize: 13,
fontWeight: "500",
opacity: 0.7,
minWidth: 80,
},
value: {
fontSize: 13,
fontWeight: "500",
flex: 1,
textAlign: "right",
},
});

2
constants/api.ts
View File

@@ -1,6 +1,6 @@
export const API_CONFIG = {
BASE_URL: "http://192.168.1.111:8000", // Update this with your machine IP if running on device ex: http://192.168.1.5:8000
TIMEOUT: 10000,
TIMEOUT: 100000,
};
export const API_ENDPOINTS = {

18
i18n/locales/en.json
View File

@@ -48,18 +48,30 @@
"league": "League",
"stage": "Stage",
"stadium": "Stadium",
"referee": "Referee"
"referee": "Referee",
"date": "Date & Time"
},
"score_table": {
"team": "Team",
"total": "Full Time",
"halftime": "Half Time"
"halftime": "Half Time",
"full_time": "90'",
"extra_time": "ET",
"penalty": "Pen"
},
"halftime": "Half: {{score}}",
"empty_stats": "No statistics data",
"empty_odds": "No odds data",
"empty_h2h": "No H2H data",
"empty_chat": "Chat is not available"
"empty_chat": "Chat is not available",
"events": {
"goals": "Goals",
"cards": "Cards",
"substitutes": "Substitutes",
"lineups": "Lineups",
"red_card": "RED",
"yellow_card": "YELLOW"
}
},
"selection": {
"selected": "Selected",

18
i18n/locales/zh.json
View File

@@ -48,18 +48,30 @@
"league": "赛事",
"stage": "阶段",
"stadium": "场馆",
"referee": "裁判"
"referee": "裁判",
"date": "日期时间"
},
"score_table": {
"team": "球队",
"total": "全场",
"halftime": "半场"
"halftime": "半场",
"full_time": "90分钟",
"extra_time": "加时",
"penalty": "点球"
},
"halftime": "半场: {{score}}",
"empty_stats": "暂无统计数据",
"empty_odds": "暂无赔率数据",
"empty_h2h": "暂无交锋数据",
"empty_chat": "聊天功能暂未开启"
"empty_chat": "聊天功能暂未开启",
"events": {
"goals": "进球",
"cards": "红黄牌",
"substitutes": "换人",
"lineups": "首发阵容",
"red_card": "红牌",
"yellow_card": "黄牌"
}
},
"selection": {
"selected": "已选择",

49
types/api.ts
View File

@@ -30,6 +30,50 @@ export interface ApiListResponse<T> {
total: number;
}
export interface GoalEvent {
time: string;
home_scorer?: string;
away_scorer?: string;
score?: string;
comment?: string;
}
export interface CardEvent {
time: string;
home_fault?: string;
away_fault?: string;
card?: string;
comment?: string;
}
export interface SubstituteEvent {
time: string;
home_scorer?: string;
away_scorer?: string;
home_assist?: string;
away_assist?: string;
home_scorer_out?: string;
away_scorer_out?: string;
comment?: string;
}
export interface MatchEvents {
goalscorers: GoalEvent[];
cards: CardEvent[];
substitutes: SubstituteEvent[];
}
export interface Player {
// AllSports API 常见字段
player?: string; // 有些接口用 player
player_name?: string; // 有些接口用 player_name
name?: string; // 兜底
player_number?: number | string;
number?: number | string;
player_type?: string; // 位置/角色，例如 Goalkeepers
position?: string; // 兜底位置字段
}
export interface MatchDetailData {
events: any[];
match: {
@@ -73,5 +117,10 @@ export interface MatchDetailData {
eventType: string;
eventToss: string;
eventManOfMatch: string;
events?: MatchEvents;
players?: {
home_team?: Player[];
away_team?: Player[];
};
};
}