优化详情显示

components/match-detail/match-info-card.tsx

@@ -13,6 +13,17 @@ export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
   const { t } = useTranslation();
   const { match } = data;
   const bgColor = isDark ? "#1C1C1E" : "#FFF";
+  const labelColor = isDark ? "#999" : "#666";
+  const valueColor = isDark ? "#FFF" : "#000";
+
+  const infoItems = [
+    { label: t("detail.info_card.country"), value: match.countryName },
+    { label: t("detail.info_card.league"), value: match.leagueName },
+    { label: t("detail.info_card.stage"), value: match.stageName },
+    { label: t("detail.info_card.stadium"), value: match.eventStadium },
+    { label: t("detail.info_card.referee"), value: match.eventReferee },
+    { label: t("detail.info_card.date"), value: `${match.eventDate} ${match.eventTime}` },
+  ].filter((item) => item.value && item.value.trim() !== "");
 
   return (
     <View style={[styles.container, { backgroundColor: bgColor }]}>
@@ -21,10 +32,16 @@ export function MatchInfoCard({ data, isDark }: MatchInfoCardProps) {
       </ThemedText>
 
       <View style={styles.content}>
-        <ThemedText style={styles.leagueName}>{match.leagueName}</ThemedText>
-        <ThemedText style={styles.dateTime}>
-          {match.eventDate} • {match.eventTime}
-        </ThemedText>
+        {infoItems.map((item, index) => (
+          <View key={index} style={styles.infoRow}>
+            <ThemedText style={[styles.label, { color: labelColor }]}>
+              {item.label}
+            </ThemedText>
+            <ThemedText style={[styles.value, { color: valueColor }]} numberOfLines={2}>
+              {item.value}
+            </ThemedText>
+          </View>
+        ))}
       </View>
     </View>
   );
@@ -49,14 +66,24 @@ const styles = StyleSheet.create({
     marginBottom: 16,
   },
   content: {
-    gap: 4,
+    gap: 12,
   },
-  leagueName: {
-    fontSize: 16,
-    fontWeight: "600",
+  infoRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    gap: 12,
   },
-  dateTime: {
-    fontSize: 14,
-    opacity: 0.6,
+  label: {
+    fontSize: 13,
+    fontWeight: "500",
+    opacity: 0.7,
+    minWidth: 80,
+  },
+  value: {
+    fontSize: 13,
+    fontWeight: "500",
+    flex: 1,
+    textAlign: "right",
   },
 });