优化比赛详情页面和网球力量图组件的代码格式

app/live-detail/[id].tsx

@@ -54,14 +54,14 @@ export default function LiveDetailScreen() {
         CreatedAt: "",
         UpdatedAt: "",
         DeletedAt: null,
-        eventKey: match.event_key.toString(),
+        eventKey: match.event_key?.toString() || "",
         eventDate: match.event_date,
         eventTime: match.event_time,
         eventHomeTeam: match.event_home_team,
-        homeTeamKey: match.home_team_key.toString(),
+        homeTeamKey: match.home_team_key?.toString() || "",
         homeTeamLogo: match.home_team_logo || "",
         eventAwayTeam: match.event_away_team,
-        awayTeamKey: match.away_team_key.toString(),
+        awayTeamKey: match.away_team_key?.toString() || "",
         awayTeamLogo: match.away_team_logo || "",
         eventHalftimeResult: match.event_halftime_result || "",
         eventFinalResult: match.event_final_result,
@@ -70,7 +70,7 @@ export default function LiveDetailScreen() {
         eventStatus: match.event_status,
         countryName: match.country_name,
         leagueName: match.league_name,
-        leagueKey: match.league_key.toString(),
+        leagueKey: match.league_key?.toString() || "",
         leagueRound: match.league_round,
         leagueSeason: match.league_season,
         eventLive: match.event_live,
@@ -92,16 +92,18 @@ export default function LiveDetailScreen() {
         eventManOfMatch: "",
         scores: match.scores,
         stats: match.statistics,
-        players: match.player_statistics ? {
+        players: match.player_statistics
-          home_team: (match.player_statistics.home_team || []).map(p => ({
+          ? {
+              home_team: (match.player_statistics.home_team || []).map((p) => ({
                 ...p,
                 player_oncourt: p.player_oncourt || undefined,
               })),
-          away_team: (match.player_statistics.away_team || []).map(p => ({
+              away_team: (match.player_statistics.away_team || []).map((p) => ({
                 ...p,
                 player_oncourt: p.player_oncourt || undefined,
               })),
-        } : undefined,
+            }
+          : undefined,
       },
     };
   }, [match, sport_id]);
@@ -134,7 +136,7 @@ export default function LiveDetailScreen() {
 
       if (liveData && Array.isArray(liveData)) {
         const found = liveData.find((m) => m.event_key.toString() === id);
-        console.log("found", JSON.stringify(found, null, 2));
+        // console.log("found", JSON.stringify(found, null, 2));
         if (found) {
           setMatch(found);
         }
@@ -176,9 +178,16 @@ export default function LiveDetailScreen() {
     if (numericSportId === 2 && convertToMatchDetailData) {
       switch (activeTab) {
         case "stats":
-          return <BasketballStats data={convertToMatchDetailData} isDark={isDark} />;
+          return (
+            <BasketballStats data={convertToMatchDetailData} isDark={isDark} />
+          );
         case "overall":
-          return <BasketballOverallStats data={convertToMatchDetailData} isDark={isDark} />;
+          return (
+            <BasketballOverallStats
+              data={convertToMatchDetailData}
+              isDark={isDark}
+            />
+          );
         case "odds":
           return (
             <OddsCard match={match} isDark={isDark} sportId={numericSportId} />
@@ -186,7 +195,10 @@ export default function LiveDetailScreen() {
         case "detail":
           return (
             <>
-              <BasketballScoreTable data={convertToMatchDetailData} isDark={isDark} />
+              <BasketballScoreTable
+                data={convertToMatchDetailData}
+                isDark={isDark}
+              />
             </>
           );
         default:

components/live-detail/tennis-power-graph.tsx

@@ -110,7 +110,8 @@ export function TennisPowerGraph({ match, isDark }: TennisPowerGraphProps) {
       <View style={styles.contentRow}>
         {/* Sidebar - Avatars */}
         <View style={styles.sidebar}>
-          <View style={{ flex: 1 }} /> {/* Spacer top */}
+          {/* Spacer top */}
+          <View style={{ flex: 1 }} />
           <View style={styles.avatarContainer}>
             {p1Logo ? (
               <Image source={{ uri: p1Logo }} style={styles.avatar} />
@@ -118,7 +119,7 @@ export function TennisPowerGraph({ match, isDark }: TennisPowerGraphProps) {
               <View style={[styles.avatar, { backgroundColor: "#ccc" }]} />
             )}
           </View>
-          <View style={{ height: 10 }} />{" "}
+          <View style={{ height: 10 }} />
           {/* Gap corresponding to center line if needed, but styling is easier with even spacing */}
           <View style={styles.avatarContainer}>
             {p2Logo ? (
@@ -127,7 +128,8 @@ export function TennisPowerGraph({ match, isDark }: TennisPowerGraphProps) {
               <View style={[styles.avatar, { backgroundColor: "#ccc" }]} />
             )}
           </View>
-          <View style={{ flex: 1 }} /> {/* Spacer bottom */}
+          {/* Spacer bottom */}
+          <View style={{ flex: 1 }} />
         </View>
 
         {/* Scrollable Graph */}