详情区分运动

components/match-detail/basketball/basketball-score-table.tsx

@@ -4,45 +4,55 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Image, StyleSheet, View } from "react-native";
 
-interface ScoreTableProps {
+interface BasketballScoreTableProps {
   data: MatchDetailData;
   isDark: boolean;
 }
 
-export function ScoreTable({ data, isDark }: ScoreTableProps) {
+export function BasketballScoreTable({ data, isDark }: BasketballScoreTableProps) {
   const { t } = useTranslation();
   const { match } = data;
   const bgColor = isDark ? "#1C1C1E" : "#FFF";
   const headerTextColor = isDark ? "#666" : "#999";
 
-  // Mock quarters for demo purposes as seen in screenshot
-  // In real app, these would come from the API (e.g. match.eventQuarter or specific fields)
+  // 解析比分 - 篮球通常是 4 节
+  const parseScore = (scoreString: string) => {
+    if (!scoreString || scoreString === "-") return [0, 0, 0, 0, 0];
+    // 假设格式可能是 "25-20,30-28,22-25,28-26" 或类似
+    // 这里简化处理，实际需要根据 API 返回格式解析
+    return [0, 0, 0, 0, 0]; // total, q1, q2, q3, q4
+  };
+
+  const homeScores = parseScore(match.eventFinalResult || "-");
+  const awayScores = parseScore(match.eventFinalResult || "-");
+
   const headers = [
     t("detail.score_table.team"),
     t("detail.score_table.total"),
-    "1",
-    "2",
-    "3",
-    "4",
+    "Q1",
+    "Q2",
+    "Q3",
+    "Q4",
   ];
+
   const rows = [
     {
       logo: match.homeTeamLogo,
       name: match.eventHomeTeam,
-      total: 0,
-      q1: 0,
-      q2: 0,
-      q3: 0,
-      q4: 0,
+      total: homeScores[0],
+      q1: homeScores[1],
+      q2: homeScores[2],
+      q3: homeScores[3],
+      q4: homeScores[4],
     },
     {
       logo: match.awayTeamLogo,
       name: match.eventAwayTeam,
-      total: 0,
-      q1: 0,
-      q2: 0,
-      q3: 0,
-      q4: 0,
+      total: awayScores[0],
+      q1: awayScores[1],
+      q2: awayScores[2],
+      q3: awayScores[3],
+      q4: awayScores[4],
     },
   ];
 
@@ -70,6 +80,9 @@ export function ScoreTable({ data, isDark }: ScoreTableProps) {
         <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
           <View style={styles.teamCell}>
             <Image source={{ uri: row.logo }} style={styles.teamLogo} />
+            <ThemedText style={styles.teamName} numberOfLines={1}>
+              {row.name}
+            </ThemedText>
           </View>
           <ThemedText style={styles.cellText}>{row.total}</ThemedText>
           <ThemedText style={styles.cellText}>{row.q1}</ThemedText>
@@ -87,7 +100,6 @@ const styles = StyleSheet.create({
     margin: 16,
     borderRadius: 12,
     padding: 16,
-    // Shadow
     elevation: 2,
     shadowColor: "#000",
     shadowOffset: { width: 0, height: 2 },
@@ -117,12 +129,18 @@ const styles = StyleSheet.create({
     flex: 3,
     flexDirection: "row",
     alignItems: "center",
+    gap: 8,
   },
   teamLogo: {
     width: 24,
     height: 24,
     resizeMode: "contain",
   },
+  teamName: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500",
+  },
   cellText: {
     flex: 1,
     textAlign: "center",

components/match-detail/football/football-score-table.tsx

@@ -0,0 +1,141 @@
+import { ThemedText } from "@/components/themed-text";
+import { MatchDetailData } from "@/types/api";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Image, StyleSheet, View } from "react-native";
+
+interface FootballScoreTableProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+// 解析足球比分字符串，例如 "2-1" 或 "1-0"
+function parseFootballScore(scoreString: string): number[] {
+  if (!scoreString || scoreString === "-") return [0, 0];
+  const parts = scoreString.split("-");
+  if (parts.length === 2) {
+    return [parseInt(parts[0]) || 0, parseInt(parts[1]) || 0];
+  }
+  return [0, 0];
+}
+
+export function FootballScoreTable({ data, isDark }: FootballScoreTableProps) {
+  const { t } = useTranslation();
+  const { match } = data;
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const headerTextColor = isDark ? "#666" : "#999";
+
+  // 解析足球比分
+  const finalScore = parseFootballScore(match.eventFinalResult || "-");
+  const halftimeScore = parseFootballScore(match.eventHalftimeResult || "-");
+
+  const headers = [
+    t("detail.score_table.team"),
+    t("detail.score_table.total"),
+    t("detail.score_table.halftime"),
+  ];
+
+  const rows = [
+    {
+      logo: match.homeTeamLogo,
+      name: match.eventHomeTeam,
+      total: finalScore[0],
+      halftime: halftimeScore[0],
+    },
+    {
+      logo: match.awayTeamLogo,
+      name: match.eventAwayTeam,
+      total: finalScore[1],
+      halftime: halftimeScore[1],
+    },
+  ];
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      <View style={styles.header}>
+        {headers.map((h, i) => (
+          <ThemedText
+            key={h}
+            style={[
+              styles.headerText,
+              {
+                color: headerTextColor,
+                flex: i === 0 ? 3 : 1,
+                textAlign: i === 0 ? "left" : "center",
+              },
+            ]}
+          >
+            {h}
+          </ThemedText>
+        ))}
+      </View>
+
+      {rows.map((row, idx) => (
+        <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
+          <View style={styles.teamCell}>
+            <Image source={{ uri: row.logo }} style={styles.teamLogo} />
+            <ThemedText style={styles.teamName} numberOfLines={1}>
+              {row.name}
+            </ThemedText>
+          </View>
+          <ThemedText style={styles.cellText}>{row.total}</ThemedText>
+          <ThemedText style={styles.cellText}>{row.halftime}</ThemedText>
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    margin: 16,
+    borderRadius: 12,
+    padding: 16,
+    elevation: 2,
+    shadowColor: "#000",
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+  },
+  header: {
+    flexDirection: "row",
+    paddingBottom: 12,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(150,150,150,0.2)",
+  },
+  headerText: {
+    fontSize: 12,
+    fontWeight: "500",
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+  },
+  rowBorder: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: "rgba(150,150,150,0.1)",
+  },
+  teamCell: {
+    flex: 3,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+  teamLogo: {
+    width: 24,
+    height: 24,
+    resizeMode: "contain",
+  },
+  teamName: {
+    flex: 1,
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  cellText: {
+    flex: 1,
+    textAlign: "center",
+    fontSize: 14,
+    fontWeight: "500",
+  },
+});

components/match-detail/match-tabs.tsx

@@ -7,17 +7,41 @@ interface MatchTabsProps {
   activeTab: string;
   onTabChange: (tab: string) => void;
   isDark: boolean;
+  sportId: number;
 }
 
-export function MatchTabs({ activeTab, onTabChange, isDark }: MatchTabsProps) {
+export function MatchTabs({ activeTab, onTabChange, isDark, sportId }: MatchTabsProps) {
   const { t } = useTranslation();
   const containerBg = isDark ? "#121212" : "#F8F8F8";
 
-  const tabs = [
-    { id: "info", label: t("detail.tabs.info") },
-    { id: "h2h", label: t("detail.tabs.h2h") },
-    { id: "chat", label: t("detail.tabs.chat") },
-  ];
+  // 根据 sportId 动态生成标签
+  const getTabs = () => {
+    if (sportId === 1) {
+      // 足球: 详情、统计数据、赔率、交锋往绩、聊天
+      return [
+        { id: "info", label: t("detail.tabs.info") },
+        { id: "stats", label: t("detail.tabs.stats") },
+        { id: "odds", label: t("detail.tabs.odds") },
+        { id: "h2h", label: t("detail.tabs.h2h") },
+        { id: "chat", label: t("detail.tabs.chat") },
+      ];
+    } else if (sportId === 2) {
+      // 篮球: 详情、交锋往绩、聊天
+      return [
+        { id: "info", label: t("detail.tabs.info") },
+        { id: "h2h", label: t("detail.tabs.h2h") },
+        { id: "chat", label: t("detail.tabs.chat") },
+      ];
+    }
+    // 默认: 详情、交锋往绩、聊天
+    return [
+      { id: "info", label: t("detail.tabs.info") },
+      { id: "h2h", label: t("detail.tabs.h2h") },
+      { id: "chat", label: t("detail.tabs.chat") },
+    ];
+  };
+
+  const tabs = getTabs();
 
   return (
     <View style={[styles.container, { backgroundColor: containerBg }]}>