实现首页功能，添加体育项目和今日比赛数据的加载，更新国际化文本，新增选择和日历模态框组件

2026-01-12 15:49:52 +08:00
parent 34b89b54c4
commit 278ddf031a
10 changed files with 785 additions and 8 deletions
--- a/components/match-card.tsx
+++ b/components/match-card.tsx
@@ -0,0 +1,110 @@
+import { ThemedText } from "@/components/themed-text";
+import { IconSymbol } from "@/components/ui/icon-symbol";
+import { Colors } from "@/constants/theme";
+import { useTheme } from "@/context/ThemeContext";
+import { Match } from "@/types/api";
+import React from "react";
+import { StyleSheet, View } from "react-native";
+
+interface MatchCardProps {
+  match: Match;
+}
+
+export function MatchCard({ match }: MatchCardProps) {
+  const { theme } = useTheme();
+  const isDark = theme === "dark";
+  const iconColor = isDark ? Colors.dark.icon : Colors.light.icon;
+  const cardBg = isDark ? "#1C1C1E" : "#FFFFFF";
+  const borderColor = isDark ? "#38383A" : "#E5E5EA";
+
+  return (
+    <View style={[styles.card, { backgroundColor: cardBg, borderColor }]}>
+      <View style={styles.header}>
+        <View
+          style={[
+            styles.leagueBadge,
+            { backgroundColor: isDark ? "#2C2C2E" : "#F2F2F7" },
+          ]}
+        >
+          <ThemedText style={styles.leagueText} numberOfLines={1}>
+            {match.league}
+          </ThemedText>
+        </View>
+        <ThemedText style={styles.timeText}>{match.time}</ThemedText>
+      </View>
+
+      <View style={styles.teamsContainer}>
+        <ThemedText type="defaultSemiBold" style={styles.teamsText}>
+          {match.home} vs {match.away}
+        </ThemedText>
+        <View style={styles.scoreContainer}>
+          <ThemedText type="defaultSemiBold" style={styles.scoreText}>
+            {match.scoreText}
+          </ThemedText>
+          <IconSymbol
+            name={match.fav ? "star" : "star-outline"}
+            size={20}
+            color={match.fav ? "#FFD700" : iconColor}
+          />
+        </View>
+      </View>
+
+      {match.meta && (
+        <ThemedText style={styles.metaText}>{match.meta}</ThemedText>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  card: {
+    padding: 12,
+    marginBottom: 12,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 8,
+  },
+  leagueBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4,
+    marginRight: 8,
+    maxWidth: "70%",
+  },
+  leagueText: {
+    fontSize: 12,
+    opacity: 0.7,
+  },
+  timeText: {
+    fontSize: 12,
+    opacity: 0.5,
+  },
+  teamsContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: 4,
+  },
+  teamsText: {
+    fontSize: 16,
+    flex: 1,
+    marginRight: 8,
+  },
+  scoreContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  scoreText: {
+    fontSize: 16,
+  },
+  metaText: {
+    fontSize: 12,
+    opacity: 0.5,
+    marginTop: 4,
+  },
+});