篮球统计数据

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

@@ -16,22 +16,81 @@ export function BasketballScoreTable({
   const { t } = useTranslation();
   const { match } = data;
   const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
   const headerTextColor = isDark ? "#666" : "#999";
+  const textColor = isDark ? "#FFF" : "#000";
 
-  // 解析比分 - 篮球通常是 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
+  // 解析篮球比分 - 从 scores 对象获取四节比分
+  const parseBasketballScores = () => {
+    const scores = match.scores as any;
+    if (!scores || typeof scores !== "object") {
+      // 如果没有 scores 对象，尝试从 eventFinalResult 解析
+      const finalResult = match.eventFinalResult || "-";
+      const matchResult = finalResult.match(/(\d+)\s*[-–]\s*(\d+)/);
+      if (matchResult) {
+        return {
+          home: {
+            total: parseInt(matchResult[1], 10),
+            q1: 0,
+            q2: 0,
+            q3: 0,
+            q4: 0,
+          },
+          away: {
+            total: parseInt(matchResult[2], 10),
+            q1: 0,
+            q2: 0,
+            q3: 0,
+            q4: 0,
+          },
+        };
+      }
+      return {
+        home: { total: 0, q1: 0, q2: 0, q3: 0, q4: 0 },
+        away: { total: 0, q1: 0, q2: 0, q3: 0, q4: 0 },
+      };
+    }
+
+    const q1 = scores["1stQuarter"]?.[0] || { score_home: "0", score_away: "0" };
+    const q2 = scores["2ndQuarter"]?.[0] || { score_home: "0", score_away: "0" };
+    const q3 = scores["3rdQuarter"]?.[0] || { score_home: "0", score_away: "0" };
+    const q4 = scores["4thQuarter"]?.[0] || { score_home: "0", score_away: "0" };
+
+    const homeQ1 = parseInt(q1.score_home || "0", 10);
+    const homeQ2 = parseInt(q2.score_home || "0", 10);
+    const homeQ3 = parseInt(q3.score_home || "0", 10);
+    const homeQ4 = parseInt(q4.score_home || "0", 10);
+    const homeTotal = homeQ1 + homeQ2 + homeQ3 + homeQ4;
+
+    const awayQ1 = parseInt(q1.score_away || "0", 10);
+    const awayQ2 = parseInt(q2.score_away || "0", 10);
+    const awayQ3 = parseInt(q3.score_away || "0", 10);
+    const awayQ4 = parseInt(q4.score_away || "0", 10);
+    const awayTotal = awayQ1 + awayQ2 + awayQ3 + awayQ4;
+
+    return {
+      home: {
+        total: homeTotal,
+        q1: homeQ1,
+        q2: homeQ2,
+        q3: homeQ3,
+        q4: homeQ4,
+      },
+      away: {
+        total: awayTotal,
+        q1: awayQ1,
+        q2: awayQ2,
+        q3: awayQ3,
+        q4: awayQ4,
+      },
+    };
   };
 
-  const homeScores = parseScore(match.eventFinalResult || "-");
-  const awayScores = parseScore(match.eventFinalResult || "-");
+  const scoreData = parseBasketballScores();
 
   const headers = [
-    t("detail.score_table.team"),
-    t("detail.score_table.total"),
+    t("detail.score_table.team") || "Team",
+    t("detail.score_table.total") || "Total",
     "1",
     "2",
     "3",
@@ -42,26 +101,26 @@ export function BasketballScoreTable({
     {
       logo: match.homeTeamLogo,
       name: match.eventHomeTeam,
-      total: homeScores[0],
-      q1: homeScores[1],
-      q2: homeScores[2],
-      q3: homeScores[3],
-      q4: homeScores[4],
+      total: scoreData.home.total,
+      q1: scoreData.home.q1,
+      q2: scoreData.home.q2,
+      q3: scoreData.home.q3,
+      q4: scoreData.home.q4,
     },
     {
       logo: match.awayTeamLogo,
       name: match.eventAwayTeam,
-      total: awayScores[0],
-      q1: awayScores[1],
-      q2: awayScores[2],
-      q3: awayScores[3],
-      q4: awayScores[4],
+      total: scoreData.away.total,
+      q1: scoreData.away.q1,
+      q2: scoreData.away.q2,
+      q3: scoreData.away.q3,
+      q4: scoreData.away.q4,
     },
   ];
 
   return (
-    <View style={[styles.container, { backgroundColor: bgColor }]}>
-      <View style={styles.header}>
+    <View style={[styles.container, { backgroundColor: bgColor, borderColor }]}>
+      <View style={[styles.header, { borderBottomColor: borderColor }]}>
         {headers.map((h, i) => (
           <ThemedText
             key={h}
@@ -80,20 +139,22 @@ export function BasketballScoreTable({
       </View>
 
       {rows.map((row, idx) => (
-        <View key={idx} style={[styles.row, idx === 0 && styles.rowBorder]}>
+        <View key={idx} style={[styles.row, idx === 0 && { borderBottomColor: borderColor, borderBottomWidth: 1 }]}>
           <View style={styles.teamCell}>
-            <Image source={{ uri: row.logo }} style={styles.teamLogo} />
-            <ThemedText style={styles.teamName} numberOfLines={1}>
+            {row.logo && row.logo.trim() !== "" && !row.logo.includes("placehold") ? (
+              <Image source={{ uri: row.logo }} style={styles.teamLogo} />
+            ) : null}
+            <ThemedText style={[styles.teamName, { color: textColor }]} numberOfLines={1}>
               {row.name}
             </ThemedText>
           </View>
-          <ThemedText style={[styles.cellText, styles.totalText]}>
+          <ThemedText style={[styles.cellText, styles.totalText, { color: textColor }]}>
             {row.total}
           </ThemedText>
-          <ThemedText style={styles.cellText}>{row.q1}</ThemedText>
-          <ThemedText style={styles.cellText}>{row.q2}</ThemedText>
-          <ThemedText style={styles.cellText}>{row.q3}</ThemedText>
-          <ThemedText style={styles.cellText}>{row.q4}</ThemedText>
+          <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q1}</ThemedText>
+          <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q2}</ThemedText>
+          <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q3}</ThemedText>
+          <ThemedText style={[styles.cellText, { color: textColor }]}>{row.q4}</ThemedText>
         </View>
       ))}
     </View>
@@ -103,20 +164,16 @@ export function BasketballScoreTable({
 const styles = StyleSheet.create({
   container: {
     marginHorizontal: 16,
-    marginBottom: 16,
+    marginTop: 12,
     borderRadius: 16,
     padding: 20,
-    elevation: 2,
-    shadowColor: "#000",
-    shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.05,
-    shadowRadius: 8,
+    borderWidth: 1,
+    overflow: "hidden",
   },
   header: {
     flexDirection: "row",
     paddingBottom: 16,
     borderBottomWidth: 1,
-    borderBottomColor: "rgba(150,150,150,0.1)",
   },
   headerText: {
     fontSize: 12,
@@ -128,10 +185,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     paddingVertical: 14,
   },
-  rowBorder: {
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(150,150,150,0.1)",
-  },
   teamCell: {
     flex: 3,
     flexDirection: "row",
@@ -146,7 +199,7 @@ const styles = StyleSheet.create({
   teamName: {
     flex: 1,
     fontSize: 14,
-    fontWeight: "700",
+    fontWeight: "600",
   },
   cellText: {
     flex: 1,

components/match-detail/basketball/basketball-stats.tsx

@@ -0,0 +1,407 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { getInitials, getLogoGradient } from "@/lib/avatar-utils";
+import { MatchDetailData } from "@/types/api";
+import { Image } from "expo-image";
+import { LinearGradient } from "expo-linear-gradient";
+import React, { useMemo, useState } from "react";
+import {
+  ScrollView,
+  StyleSheet,
+  Switch,
+  TouchableOpacity,
+  View
+} from "react-native";
+
+interface BasketballStatsProps {
+  data: MatchDetailData;
+  isDark: boolean;
+}
+
+// 定义固定高度以保证左右对齐
+const HEADER_HEIGHT = 40;
+const ROW_HEIGHT = 60;
+const LEFT_COLUMN_WIDTH = 150;
+
+const COLUMNS_BASIC = [
+  { key: "pts", label: "PTS", width: 50 },
+  { key: "reb", label: "REB", width: 50 },
+  { key: "ast", label: "AST", width: 50 },
+];
+
+const COLUMNS_DETAILED = [
+  { key: "min", label: "MIN", width: 50 },
+  { key: "pts", label: "PTS", width: 50 },
+  { key: "reb", label: "REB", width: 50 },
+  { key: "ast", label: "AST", width: 50 },
+  { key: "blk", label: "BLK", width: 50 },
+  { key: "stl", label: "STL", width: 50 },
+  { key: "to", label: "TO", width: 50 },
+  { key: "pf", label: "PF", width: 50 },
+];
+
+export function BasketballStats({ data, isDark }: BasketballStatsProps) {
+  const { match } = data;
+  const [activeTab, setActiveTab] = useState<"home" | "away">("home");
+  const [isDetailed, setIsDetailed] = useState(false);
+
+  // 获取当前展示的球员列表
+  const currentPlayers = useMemo(() => {
+    if (!match.players) return [];
+    return activeTab === "home"
+      ? match.players.home_team
+      : match.players.away_team;
+  }, [match.players, activeTab]);
+
+  const columns = isDetailed ? COLUMNS_DETAILED : COLUMNS_BASIC;
+
+  const getPlayerStat = (player: any, statKey: string): string => {
+    const statMap: Record<string, string> = {
+      pts: player.player_points || "0",
+      reb: player.player_total_rebounds || "0",
+      ast: player.player_assists || "0",
+      min: player.player_minutes || "0",
+      blk: player.player_blocks || "0",
+      stl: player.player_steals || "0",
+      to: player.player_turnovers || "0",
+      pf: player.player_personal_fouls || "0",
+    };
+    const value = statMap[statKey] || "0";
+    return value === "-" || value === "" ? "0" : value;
+  };
+
+  const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const borderColor = isDark ? "#2C2C2E" : "rgba(0,0,0,0.06)";
+  const textColor = isDark ? "#FFF" : "#000";
+  const secondaryText = isDark ? "#8E8E93" : "#6B7280";
+
+  // --- 渲染组件 ---
+
+  // 1. 左上角：Player 表头
+  const renderLeftHeader = () => (
+    <View style={[styles.headerCell, { height: HEADER_HEIGHT, borderBottomColor: borderColor }]}>
+      <ThemedText style={[styles.headerText, { color: secondaryText }]}>
+        Player
+      </ThemedText>
+      <IconSymbol
+        name="information-circle-outline"
+        size={14}
+        color={secondaryText}
+        style={{ marginLeft: 4 }}
+      />
+    </View>
+  );
+
+  // 2. 左侧列：球员信息行
+  const renderLeftPlayerRow = (player: any) => {
+    const playerName = player.player || "";
+    const playerPosition = player.player_position || "";
+    const gradient = getLogoGradient(playerName);
+    const initials = getInitials(playerName);
+
+    return (
+      <View style={[styles.playerRow, { height: ROW_HEIGHT, borderBottomColor: borderColor }]}>
+        <View style={styles.avatarContainer}>
+          <LinearGradient
+            colors={[gradient.color1, gradient.color2]}
+            start={{ x: 0, y: 0 }}
+            end={{ x: 1, y: 1 }}
+            style={styles.avatarGradient}
+          >
+            <ThemedText style={styles.avatarText}>{initials}</ThemedText>
+          </LinearGradient>
+        </View>
+        <View style={styles.playerInfo}>
+          <ThemedText
+            style={[styles.playerName, { color: textColor }]}
+            numberOfLines={1}
+          >
+            {playerName}
+          </ThemedText>
+          {playerPosition && (
+            <ThemedText style={[styles.playerNumPos, { color: secondaryText }]}>
+              {playerPosition}
+            </ThemedText>
+          )}
+        </View>
+      </View>
+    );
+  };
+
+  // 3. 右上角：数据表头
+  const renderRightHeader = () => (
+    <View style={[styles.dataHeaderRow, { height: HEADER_HEIGHT, borderBottomColor: borderColor }]}>
+      {columns.map((col) => (
+        <View key={col.key} style={{ width: col.width, alignItems: "center" }}>
+          <ThemedText style={[styles.headerText, { color: secondaryText }]}>
+            {col.label}
+          </ThemedText>
+        </View>
+      ))}
+    </View>
+  );
+
+  // 4. 右侧列：数据行
+  const renderRightDataRow = (player: any) => (
+    <View style={[styles.dataRow, { height: ROW_HEIGHT, borderBottomColor: borderColor }]}>
+      {columns.map((col) => (
+        <View key={col.key} style={{ width: col.width, alignItems: "center" }}>
+          <ThemedText style={[styles.statText, { color: textColor }]}>
+            {getPlayerStat(player, col.key)}
+          </ThemedText>
+        </View>
+      ))}
+    </View>
+  );
+
+  // 队名/Logo逻辑
+  const homeTeamName = match.eventHomeTeam || "";
+  const awayTeamName = match.eventAwayTeam || "";
+  const homeTeamLogo = match.homeTeamLogo || "";
+  const awayTeamLogo = match.awayTeamLogo || "";
+  const hasHomeLogo = homeTeamLogo && homeTeamLogo.trim() !== "" && !homeTeamLogo.includes("placehold");
+  const hasAwayLogo = awayTeamLogo && awayTeamLogo.trim() !== "" && !awayTeamLogo.includes("placehold");
+  const homeGradient = getLogoGradient(homeTeamName);
+  const awayGradient = getLogoGradient(awayTeamName);
+  const homeInitials = getInitials(homeTeamName);
+  const awayInitials = getInitials(awayTeamName);
+
+  return (
+    <View style={[styles.container, { backgroundColor: bgColor }]}>
+      {/* 顶部控制栏 */}
+      <View style={styles.controlsHeader}>
+        <View>
+          <ThemedText style={[styles.controlTitle, { color: textColor }]}>
+            统计外观
+          </ThemedText>
+          <ThemedText style={[styles.controlSubtitle, { color: secondaryText }]}>
+            详细视图
+          </ThemedText>
+        </View>
+        <Switch
+          value={isDetailed}
+          onValueChange={setIsDetailed}
+          trackColor={{ false: isDark ? "#3e3e3e" : "#E5E5E5", true: "#FF9500" }}
+          thumbColor={"#fff"}
+        />
+      </View>
+
+      {/* 队伍切换 Tab */}
+      <View style={[styles.teamTabsContainer, { backgroundColor: isDark ? "#2C2C2E" : "#F5F5F5" }]}>
+        <TouchableOpacity
+          style={[
+            styles.teamTab,
+            activeTab === "home" && { backgroundColor: isDark ? "#1C1C1E" : "#FFF" },
+            { borderTopLeftRadius: 8, borderBottomLeftRadius: 8 },
+          ]}
+          onPress={() => setActiveTab("home")}
+        >
+          {hasHomeLogo ? (
+            <Image source={{ uri: homeTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
+          ) : (
+            <LinearGradient
+              colors={[homeGradient.color1, homeGradient.color2]}
+              style={styles.teamTabLogoGradient}
+            >
+              <ThemedText style={styles.teamTabLogoText}>{homeInitials}</ThemedText>
+            </LinearGradient>
+          )}
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.teamTab,
+            activeTab === "away" && { backgroundColor: isDark ? "#1C1C1E" : "#FFF" },
+            { borderTopRightRadius: 8, borderBottomRightRadius: 8 },
+          ]}
+          onPress={() => setActiveTab("away")}
+        >
+          {hasAwayLogo ? (
+            <Image source={{ uri: awayTeamLogo }} style={styles.teamTabLogo} contentFit="contain" />
+          ) : (
+            <LinearGradient
+              colors={[awayGradient.color1, awayGradient.color2]}
+              style={styles.teamTabLogoGradient}
+            >
+              <ThemedText style={styles.teamTabLogoText}>{awayInitials}</ThemedText>
+            </LinearGradient>
+          )}
+        </TouchableOpacity>
+      </View>
+
+      {/* 核心表格区域：Vertical ScrollView 包裹整个表格 */}
+      <ScrollView
+        style={[styles.tableContainer, { borderColor }]}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={{ flexDirection: "row" }}>
+
+          {/* 左侧区域：固定不横向滚动 */}
+          <View style={{ width: LEFT_COLUMN_WIDTH, borderRightWidth: StyleSheet.hairlineWidth, borderColor }}>
+            {/* Header */}
+            {renderLeftHeader()}
+            {/* Players List */}
+            <View>
+              {currentPlayers?.map((player, index) => (
+                <View key={`left-${player.player_id || index}`}>
+                  {renderLeftPlayerRow(player)}
+                </View>
+              ))}
+            </View>
+          </View>
+
+          {/* 右侧区域：整体横向滚动 */}
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <View>
+              {/* Header */}
+              {renderRightHeader()}
+              {/* Data List */}
+              <View>
+                {currentPlayers?.map((player, index) => (
+                  <View key={`right-${player.player_id || index}`}>
+                    {renderRightDataRow(player)}
+                  </View>
+                ))}
+              </View>
+            </View>
+          </ScrollView>
+
+        </View>
+
+        {/* Empty State */}
+        {(!currentPlayers || currentPlayers.length === 0) && (
+          <View style={styles.emptyState}>
+            <ThemedText style={{ color: secondaryText }}>暂无球员数据</ThemedText>
+          </View>
+        )}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 12,
+  },
+  controlsHeader: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    marginBottom: 12,
+  },
+  controlTitle: {
+    fontSize: 14,
+    fontWeight: "600",
+  },
+  controlSubtitle: {
+    fontSize: 12,
+    marginTop: 2,
+  },
+  teamTabsContainer: {
+    flexDirection: "row",
+    marginHorizontal: 16,
+    marginBottom: 12,
+    borderRadius: 12,
+    height: 44,
+    borderWidth: 1,
+    overflow: "hidden",
+  },
+  teamTab: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  teamTabLogo: {
+    width: 24,
+    height: 24,
+  },
+  teamTabLogoGradient: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  teamTabLogoText: {
+    fontSize: 10,
+    fontWeight: "700",
+    color: "rgba(255, 255, 255, 0.92)",
+  },
+  tableContainer: {
+    marginHorizontal: 16,
+    marginBottom: 20,
+    borderRadius: 16,
+    borderWidth: 1,
+    overflow: "hidden", // 确保圆角生效
+  },
+  // 左侧样式
+  headerCell: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 12,
+    width: "100%",
+  },
+  playerRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 8,
+    width: "100%",
+  },
+  // 右侧样式
+  dataHeaderRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 16, // 给右侧表头一些左右padding，美观
+  },
+  dataRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    paddingHorizontal: 16,
+  },
+  // 通用文本
+  headerText: {
+    fontSize: 12,
+    fontWeight: "700",
+  },
+  statText: {
+    fontSize: 14,
+    fontWeight: "500",
+  },
+  // 球员头像与信息
+  avatarContainer: {
+    marginRight: 8,
+  },
+  avatarGradient: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  avatarText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: "rgba(255, 255, 255, 0.92)",
+  },
+  playerInfo: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  playerName: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginBottom: 2,
+  },
+  playerNumPos: {
+    fontSize: 11,
+  },
+  emptyState: {
+    padding: 40,
+    alignItems: "center",
+  },
+});

components/match-detail/match-tabs.tsx

@@ -63,8 +63,29 @@ export function MatchTabs({
         },
       ];
     } else if (sportId === 2) {
-      // 篮球
-      return commonTabs;
+      // 篮球: 详情、统计数据、交锋往绩、聊天
+      return [
+        {
+          id: "info",
+          label: t("detail.tabs.info"),
+          icon: "document-text-outline",
+        },
+        {
+          id: "stats",
+          label: t("detail.tabs.stats"),
+          icon: "stats-chart-outline",
+        },
+        {
+          id: "h2h",
+          label: t("detail.tabs.h2h"),
+          icon: "swap-horizontal-outline",
+        },
+        {
+          id: "chat",
+          label: t("detail.tabs.chat"),
+          icon: "chatbubbles-outline",
+        },
+      ];
     } else if (sportId === 3) {
       // 网球: 详情、聊天
       return [