Merge branch 'main' of https://git.ambigrat.com/shenyan/physical-expo

2026-01-20 09:15:42 +08:00
parent 85c9b666d7 f81cc2f7e6
commit 97f61e68bd
5 changed files with 332 additions and 133 deletions
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index.tsx
@@ -49,6 +49,9 @@ export default function HomeScreen() {
  const [liveLeagueIdByMatchId, setLiveLeagueIdByMatchId] = useState<
    Record<string, number>
  >({});
+  const [page, setPage] = useState(1);
+  const [total, setTotal] = useState(0);
+  const [loadingMore, setLoadingMore] = useState(false);

  const deviceTimeZone = useMemo(() => {
    try {
@@ -96,6 +99,11 @@ export default function HomeScreen() {
    }
  }, [selectedSportId, selectedDate]);

+  useEffect(() => {
+    setPage(1);
+    setTotal(0);
+  }, [selectedSportId, selectedDate, state.selectedLeagueKey]);
+
  const timezoneLabel = useMemo(() => {
    // 仅展示 UTC 偏移（不展示时区名）
    const offsetMin = -now.getTimezoneOffset();
@@ -303,8 +311,8 @@ export default function HomeScreen() {
    try {
      if (selectedSportId !== null) {
        setLoadingLeagues(true);
-        const list = await fetchLeagues(selectedSportId, "");
-        setLeagues(list);
+        const res = await fetchLeagues({ sportId: selectedSportId });
+        setLeagues(res.list);
      }
    } catch (e) {
      console.error(e);
@@ -316,11 +324,16 @@ export default function HomeScreen() {
  const loadMatches = async (sportId: number) => {
    setLoading(true);
    try {
-      const list = await fetchTodayMatches(
+      const res = await fetchTodayMatches({
        sportId,
-        selectedDate,
-        deviceTimeZone,
-      );
+        date: selectedDate,
+        timezone: deviceTimeZone,
+        leagueKey: state.selectedLeagueKey || "",
+        page: 1,
+        pageSize: 50,
+      });
+      setPage(1);
+      setTotal(res.total);

      const normalizeDate = (d: Date) => {
        const year = d.getFullYear();
@@ -333,7 +346,7 @@ export default function HomeScreen() {
      const selectedStr = normalizeDate(selectedDate);
      const shouldMergeLive = selectedStr === todayStr;

-      let merged: Match[] = list.map((m) => ({
+      let merged: Match[] = res.list.map((m) => ({
        ...m,
        date: m.date || selectedStr,
        sportId: m.sportId ?? sportId,
@@ -402,11 +415,9 @@ export default function HomeScreen() {
      let listWithFavStatus = merged;

      if (token) {
-        // 直接传递 match.id 查询是否收藏，并更新列表状态
        listWithFavStatus = await Promise.all(
          merged.map(async (m) => {
            try {
-              // 查询比赛是否已被收藏
              const favRes = await checkFavorite("match", m.id);
              return { ...m, fav: favRes.isFavorite };
            } catch (error) {
@@ -434,6 +445,41 @@ export default function HomeScreen() {
    }
  };

+  const loadMoreMatches = async () => {
+    if (loadingMore || loading) return;
+    if (!selectedSportId) return;
+    if (matches.length >= total) return;
+
+    setLoadingMore(true);
+    try {
+      const nextPage = page + 1;
+      const res = await fetchTodayMatches({
+        sportId: selectedSportId,
+        date: selectedDate,
+        timezone: deviceTimeZone,
+        leagueKey: state.selectedLeagueKey || "",
+        page: nextPage,
+        pageSize: 50,
+      });
+
+      setPage(nextPage);
+      setTotal(res.total);
+
+      setMatches((prev) => {
+        const byId = new Map<string, Match>();
+        prev.forEach((m) => byId.set(m.id, m));
+        res.list.forEach((m) => {
+          if (!byId.has(m.id)) byId.set(m.id, m);
+        });
+        return Array.from(byId.values());
+      });
+    } catch (e) {
+      console.error(e);
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
  const handleFavoriteToggle = (matchId: string, isFav: boolean) => {
    setMatches((prev) => {
      const updated = prev.map((m) =>
@@ -558,6 +604,15 @@ export default function HomeScreen() {
          renderItem={({ item }) => (
            <MatchCard match={item} onFavoriteToggle={handleFavoriteToggle} />
          )}
+          onEndReached={loadMoreMatches}
+          onEndReachedThreshold={0.4}
+          ListFooterComponent={
+            loadingMore ? (
+              <View style={styles.footer}>
+                <ActivityIndicator size="small" color={Colors[theme].tint} />
+              </View>
+            ) : null
+          }
          contentContainerStyle={styles.listContent}
          ListEmptyComponent={
            <View style={styles.center}>
@@ -567,7 +622,9 @@ export default function HomeScreen() {
        />
      ) : (
        <MatchesByLeague
-          matches={matches}
+          sportId={selectedSportId || 1}
+          date={selectedDate}
+          timezone={deviceTimeZone}
          onFavoriteToggle={handleFavoriteToggle}
        />
      )}
@@ -650,4 +707,9 @@ const styles = StyleSheet.create({
    padding: 16,
    paddingTop: 8,
  },
+  footer: {
+    paddingVertical: 16,
+    alignItems: "center",
+    justifyContent: "center",
+  },
 });
--- a/components/match-card-league.tsx
+++ b/components/match-card-league.tsx
@@ -121,7 +121,7 @@ export function MatchCardLeague({
      <View style={styles.leftColumn}>
        {/* 如果有状态字段 match.meta (如 'FT', 'AET'), 优先显示，否则显示时间 */}
        <ThemedText style={styles.statusText}>
-          {(match.meta || match.time || "").toUpperCase()}
+          {(match.time || "").toUpperCase()}
        </ThemedText>
      </View>

--- a/components/matches-by-league.tsx
+++ b/components/matches-by-league.tsx
@@ -1,7 +1,8 @@
 import { MatchCardLeague } from "@/components/match-card-league";
 import { ThemedText } from "@/components/themed-text";
 import { useTheme } from "@/context/ThemeContext";
-import { Match } from "@/types/api";
+import { fetchLeagues, fetchTodayMatches } from "@/lib/api";
+import { League, Match } from "@/types/api";
 import React, { useState } from "react";
 import {
  Image,
@@ -23,70 +24,97 @@ if (
 }

 interface MatchesByLeagueProps {
-  matches: Match[];
+  sportId: number;
+  date: Date;
+  timezone: string;
  onFavoriteToggle?: (matchId: string, isFav: boolean) => void;
-  /**
-   * 是否支持折叠收起
-   * @default true
-   */
  enableCollapsible?: boolean;
 }

-
 export function MatchesByLeague({
-  matches,
+  sportId,
+  date,
+  timezone,
  onFavoriteToggle,
  enableCollapsible = true,
 }: MatchesByLeagueProps) {
  const { theme } = useTheme();
  const isDark = theme === "dark";

-  // 数据分组逻辑
-  const matchesByLeague = React.useMemo(() => {
-    const grouped: Record<string, Match[]> = {};
-    matches.forEach((match) => {
-      const league = match.league || match.leagueName || "其他";
-      if (!grouped[league]) {
-        grouped[league] = [];
-      }
-      grouped[league].push(match);
-    });
-    return grouped;
-  }, [matches]);
-
-  const leagueNames = Object.keys(matchesByLeague);
-
-  // 状态：记录哪些联赛被折叠了 (Key 为联赛名称)，默认全部收起
-  const [collapsedSections, setCollapsedSections] = useState<
+  const [leagues, setLeagues] = useState<League[]>([]);
+  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  const [matchesByLeagueKey, setMatchesByLeagueKey] = useState<
+    Record<string, Match[]>
+  >({});
+  const [loadingLeagueKey, setLoadingLeagueKey] = useState<
    Record<string, boolean>
  >({});

-  // 当联赛列表变化时，确保所有联赛默认都是收起状态
+  const dateStr = React.useMemo(() => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }, [date]);
+
  React.useEffect(() => {
-    setCollapsedSections((prev) => {
-      const updated: Record<string, boolean> = {};
-      leagueNames.forEach((name) => {
-        updated[name] = prev[name] !== undefined ? prev[name] : true;
-      });
-      return updated;
-    });
-  }, [leagueNames.join(",")]);
+    let mounted = true;
+    fetchLeagues({
+      sportId,
+      date: dateStr,
+      page: 1,
+      pageSize: 200,
+      sortBy: "matchCount",
+      sortOrder: "desc",
+    })
+      .then((res) => {
+        if (!mounted) return;
+        setLeagues(res.list);
+        setCollapsed((prev) => {
+          const next: Record<string, boolean> = {};
+          res.list.forEach((l) => {
+            next[l.key] = prev[l.key] !== undefined ? prev[l.key] : true;
+          });
+          return next;
+        });
+        setMatchesByLeagueKey({});
+        setLoadingLeagueKey({});
+      })
+      .catch(() => { });
+    return () => {
+      mounted = false;
+    };
+  }, [sportId, dateStr]);

-  // 切换折叠状态
-  const toggleCollapse = (leagueName: string) => {
+  const toggleCollapse = async (leagueKey: string) => {
    if (!enableCollapsible) return;
-
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
-    setCollapsedSections((prev) => ({
-      ...prev,
-      [leagueName]: !prev[leagueName],
-    }));
+    setCollapsed((prev) => ({ ...prev, [leagueKey]: !prev[leagueKey] }));
+
+    const nextCollapsed = !collapsed[leagueKey];
+    if (nextCollapsed) return;
+    if (matchesByLeagueKey[leagueKey]) return;
+
+    setLoadingLeagueKey((prev) => ({ ...prev, [leagueKey]: true }));
+    try {
+      const res = await fetchTodayMatches({
+        sportId,
+        date: dateStr,
+        timezone,
+        leagueKey,
+        page: 1,
+        pageSize: 50,
+      });
+      setMatchesByLeagueKey((prev) => ({ ...prev, [leagueKey]: res.list }));
+    } finally {
+      setLoadingLeagueKey((prev) => ({ ...prev, [leagueKey]: false }));
+    }
  };

-  if (leagueNames.length === 0) {
+  if (leagues.length === 0) {
    return (
      <View style={styles.emptyContainer}>
-        <ThemedText>暂无比赛</ThemedText>
+        <ThemedText>暂无联赛</ThemedText>
      </View>
    );
  }
@@ -99,54 +127,51 @@ export function MatchesByLeague({
      ]}
      contentContainerStyle={{ paddingBottom: 40 }}
    >
-      {leagueNames.map((leagueName) => {
-        const leagueMatches = matchesByLeague[leagueName];
-        // 取该组第一场比赛的数据作为头部信息的来源（图标、国家等）
-        const firstMatch = leagueMatches[0];
-        const isCollapsed = collapsedSections[leagueName];
+      {leagues.map((league) => {
+        const isCollapsed = collapsed[league.key] !== false;
+        const leagueMatches = matchesByLeagueKey[league.key] || [];
+        const isLoading = !!loadingLeagueKey[league.key];

        return (
-          <View key={leagueName} style={styles.leagueSection}>
-            {/* 联赛头部 */}
+          <View key={league.key} style={styles.leagueSection}>
            <TouchableOpacity
-              activeOpacity={enableCollapsible ? 0.7 : 1}
-              onPress={() => toggleCollapse(leagueName)}
+              activeOpacity={enableCollapsible && league.matchCount > 0 ? 0.7 : 1}
+              onPress={() => {
+                if (enableCollapsible && league.matchCount > 0) {
+                  toggleCollapse(league.key);
+                }
+              }}
              style={styles.leagueHeaderWrapper}
            >
              <View style={styles.leagueHeaderLeft}>
-                {/* 联赛 Logo */}
                <Image
                  source={{
-                    uri: firstMatch.leagueLogo || (firstMatch as any).leagueLogoUrl || "https://placehold.co/40x40/png",
+                    uri: league.logo || "https://placehold.co/40x40/png",
                  }}
                  style={styles.leagueLogo}
                />

                <View style={styles.leagueInfoText}>
-                  {/* 联赛名称 */}
-                  <ThemedText style={styles.leagueTitle}>{leagueName}</ThemedText>
+                  <ThemedText style={styles.leagueTitle}>{league.name}</ThemedText>

-                  {/* 国家信息行 */}
                  <View style={styles.countryRow}>
                    <Image
-                      source={{ uri: firstMatch.countryLogo || (firstMatch as any).countryFlagUrl || "https://placehold.co/20x20/png" }}
+                      source={{ uri: league.countryLogo || "https://placehold.co/20x20/png" }}
                      style={styles.countryFlag}
                    />
                    <ThemedText style={styles.countryName}>
-                      {firstMatch.countryName || (firstMatch as any).countryName || "International"}
+                      {league.countryName || "International"}
                    </ThemedText>
                  </View>
                </View>
              </View>

              <View style={styles.leagueHeaderRight}>
-                {/* 比赛数量 */}
                <ThemedText style={styles.matchCount}>
-                  {leagueMatches.length}
+                  {league.matchCount}
                </ThemedText>

-                {/* 折叠箭头 (仅当支持折叠时显示) */}
-                {enableCollapsible && (
+                {enableCollapsible && league.matchCount > 0 && (
                  <ThemedText style={styles.chevron}>
                    {isCollapsed ? "⌄" : "⌃"}
                  </ThemedText>
@@ -154,23 +179,74 @@ export function MatchesByLeague({
              </View>
            </TouchableOpacity>

-            {/* 比赛列表内容 (根据状态显示/隐藏) */}
            {!isCollapsed && (
              <View style={styles.matchListContainer}>
-                {leagueMatches.map((match, index) => (
-                  <View
-                    key={match.id}
-                    style={[
-                      styles.matchCardWrapper,
-                      index < leagueMatches.length - 1 && styles.matchCardDivider
-                    ]}
-                  >
-                    <MatchCardLeague
-                      match={match}
-                      onFavoriteToggle={onFavoriteToggle}
-                    />
-                  </View>
-                ))}
+                {isLoading ? (
+                  <>
+                    {[0, 1, 2].map((i) => (
+                      <View
+                        key={i}
+                        style={[
+                          styles.matchCardWrapper,
+                          i < 2 && styles.matchCardDivider,
+                        ]}
+                      >
+                        <View style={styles.skeletonRow}>
+                          <View style={styles.leftColumn}>
+                            <View
+                              style={[styles.skeletonLine, { width: 30, marginBottom: 6 }]}
+                            />
+                            <View
+                              style={[styles.skeletonLine, { width: 24 }]}
+                            />
+                          </View>
+                          <View style={styles.teamsColumn}>
+                            <View style={styles.skeletonTeamRow}>
+                              <View style={styles.skeletonAvatar} />
+                              <View
+                                style={[
+                                  styles.skeletonLine,
+                                  { flex: 1 },
+                                ]}
+                              />
+                            </View>
+                            <View style={[styles.skeletonTeamRow, { marginTop: 8 }]}>
+                              <View style={styles.skeletonAvatar} />
+                              <View
+                                style={[
+                                  styles.skeletonLine,
+                                  { flex: 1 },
+                                ]}
+                              />
+                            </View>
+                          </View>
+                          <View style={styles.rightWrapper}>
+                            <View style={styles.skeletonScoreBox} />
+                            <View style={styles.favoriteButton}>
+                              <View style={styles.skeletonCircle} />
+                            </View>
+                          </View>
+                        </View>
+                      </View>
+                    ))}
+                  </>
+                ) : (
+                  leagueMatches.map((match, index) => (
+                    <View
+                      key={match.id}
+                      style={[
+                        styles.matchCardWrapper,
+                        index < leagueMatches.length - 1 &&
+                        styles.matchCardDivider,
+                      ]}
+                    >
+                      <MatchCardLeague
+                        match={match}
+                        onFavoriteToggle={onFavoriteToggle}
+                      />
+                    </View>
+                  ))
+                )}
              </View>
            )}
          </View>
@@ -252,13 +328,67 @@ const styles = StyleSheet.create({
    marginHorizontal: 16,
    overflow: "hidden",
  },
+  // 布局与 MatchCardLeague 保持一致，便于骨架对齐
+  leftColumn: {
+    width: 50,
+    justifyContent: "center",
+    alignItems: "flex-start",
+    marginRight: 8,
+  },
+  teamsColumn: {
+    flex: 1,
+    justifyContent: "center",
+    paddingRight: 8,
+  },
+  rightWrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
  matchCardWrapper: {
-    // 卡片包装器
  },
  matchCardDivider: {
    borderBottomWidth: 0.5,
    borderBottomColor: "#3A3A3C",
  },
+  favoriteButton: {
+    paddingLeft: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  skeletonRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  skeletonLine: {
+    height: 8,
+    borderRadius: 4,
+    backgroundColor: "#2C2C2E",
+  },
+  skeletonAvatar: {
+    width: 20,
+    height: 20,
+    borderRadius: 10,
+    backgroundColor: "#2C2C2E",
+    marginRight: 10,
+  },
+  skeletonTeamRow: {
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  skeletonScoreBox: {
+    width: 24,
+    height: 32,
+    borderRadius: 8,
+    backgroundColor: "#2C2C2E",
+  },
+  skeletonCircle: {
+    width: 16,
+    height: 16,
+    borderRadius: 8,
+    backgroundColor: "#2C2C2E",
+  },
  emptyContainer: {
    flex: 1,
    justifyContent: "center",
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -115,22 +115,22 @@ export const fetchCountries = async (): Promise<Country[]> => {
  }
 };

-export const fetchLeagues = async (
-  sportId: number,
-  countryKey: string
-): Promise<League[]> => {
+export const fetchLeagues = async (params: {
+  sportId?: number;
+  countryKey?: string;
+  date?: string;
+  page?: number;
+  pageSize?: number;
+  sortBy?: "name" | "matchCount" | "createdAt";
+  sortOrder?: "asc" | "desc";
+}): Promise<ApiListResponse<League>> => {
  try {
    const response = await apiClient.get<ApiResponse<ApiListResponse<League>>>(
      API_ENDPOINTS.LEAGUES,
-      {
-        params: {
-          sportId,
-          countryKey,
-        },
-      }
+      { params }
    );
    if (response.data.code === 0) {
-      return response.data.data.list;
+      return response.data.data;
    }
    throw new Error(response.data.message);
  } catch (error) {
@@ -139,48 +139,54 @@ export const fetchLeagues = async (
  }
 };

-export const fetchTodayMatches = async (
-  sportId: number,
-  date?: Date | string,
-  timezone?: string
-): Promise<Match[]> => {
+export const fetchTodayMatches = async (options: {
+  sportId: number;
+  date?: Date | string;
+  timezone?: string;
+  leagueKey?: string;
+  page?: number;
+  pageSize?: number;
+}): Promise<ApiListResponse<Match>> => {
  try {
-    const params: { sportId: number; date?: string; timezone?: string } = {
-      sportId,
+    const params: {
+      sportId: number;
+      date?: string;
+      timezone?: string;
+      leagueKey?: string;
+      page?: number;
+      pageSize?: number;
+    } = {
+      sportId: options.sportId,
+      leagueKey: options.leagueKey,
+      page: options.page,
+      pageSize: options.pageSize,
    };

-    // 如果提供了日期，格式化为 YYYY-MM-DD 格式
-    if (date) {
-      let dateStr: string;
-      if (date instanceof Date) {
-        const year = date.getFullYear();
-        const month = String(date.getMonth() + 1).padStart(2, "0");
-        const day = String(date.getDate()).padStart(2, "0");
-        dateStr = `${year}-${month}-${day}`;
+    if (options.date) {
+      if (options.date instanceof Date) {
+        const year = options.date.getFullYear();
+        const month = String(options.date.getMonth() + 1).padStart(2, "0");
+        const day = String(options.date.getDate()).padStart(2, "0");
+        params.date = `${year}-${month}-${day}`;
      } else {
-        dateStr = date;
+        params.date = options.date;
      }
-      params.date = dateStr;
    }

-    // 如果提供了时区，传给后端；不传则由后端使用本地时区
-    if (timezone) {
-      params.timezone = timezone;
+    if (options.timezone) {
+      params.timezone = options.timezone;
    }

    const response = await apiClient.get<ApiResponse<ApiListResponse<Match>>>(
      API_ENDPOINTS.MATCHES_TODAY,
-      {
-        params,
-      }
+      { params }
    );
    if (response.data.code === 0) {
-      return response.data.data.list;
+      return response.data.data;
    }
    throw new Error(response.data.message);
  } catch (error) {
    console.error("Fetch matches error:", error);
-    // Let the caller handle errors; rethrow the original error
    throw error;
  }
 };
@@ -214,9 +220,9 @@ export const fetchLiveScore = async (
  // });
  try {
    const params: { sport_id: number; league_id?: number; timezone?: string } =
-      {
-        sport_id: sportId,
-      };
+    {
+      sport_id: sportId,
+    };

    if (leagueId) {
      params.league_id = leagueId;
--- a/types/api.ts
+++ b/types/api.ts
@@ -88,11 +88,11 @@ export interface LiveScoreMatch {
  substitutes?: {
    time: string;
    home_scorer:
-      | { in: string; out: string; in_id: number; out_id: number }
-      | any[];
+    | { in: string; out: string; in_id: number; out_id: number }
+    | any[];
    away_scorer:
-      | { in: string; out: string; in_id: number; out_id: number }
-      | any[];
+    | { in: string; out: string; in_id: number; out_id: number }
+    | any[];
    info: string;
    info_time: string;
    score: string;
@@ -153,6 +153,7 @@ export interface League {
  isActive: boolean;
  createdAt: string;
  updatedAt: string;
+  matchCount: number;
 }

 export interface GoalEvent {