重构

apps/player/src/components/MatchBetCard.vue

@@ -3,6 +3,7 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { teamFlagUrl } from '../utils/teamFlag';
 import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
+import { formatLocalMatchDateTime } from '@thebet365/shared';
 
 const props = defineProps<{
   match: {
@@ -17,10 +18,18 @@ const props = defineProps<{
     bettingOpen?: boolean;
     matchPhase?: MatchPhase;
     score?: {
-      htHome: number;
-      htAway: number;
-      ftHome: number;
-      ftAway: number;
+      htHome: number | null;
+      htAway: number | null;
+      ftHome: number | null;
+      ftAway: number | null;
+      homeCorners?: number | null;
+      awayCorners?: number | null;
+      homeYellowCards?: number | null;
+      awayYellowCards?: number | null;
+      homeRedCards?: number | null;
+      awayRedCards?: number | null;
+      homeCards?: number | null;
+      awayCards?: number | null;
     } | null;
   };
 }>();
@@ -30,16 +39,10 @@ const emit = defineEmits<{ bet: [id: string] }>();
 const { t, locale } = useI18n();
 
 function formatKickoff(startTime: string) {
-  const d = new Date(startTime);
-  const now = new Date();
-  const isToday =
-    d.getFullYear() === now.getFullYear() &&
-    d.getMonth() === now.getMonth() &&
-    d.getDate() === now.getDate();
-  const timeStr = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
-  if (isToday) return `${t('bet.today')} ${timeStr}`;
-  const dateStr = d.toLocaleDateString(locale.value, { month: 'numeric', day: 'numeric' });
-  return `${dateStr} ${timeStr}`;
+  return formatLocalMatchDateTime(startTime, locale.value, {
+    variant: 'compact',
+    todayLabel: t('bet.today'),
+  });
 }
 
 const kickoffText = computed(() => formatKickoff(props.match.startTime));
@@ -64,7 +67,7 @@ const phaseLabel = computed(() => matchPhaseLabel(t, phase.value));
 
 const liveScoreText = computed(() => {
   const s = props.match.score;
-  if (!s) return '';
+  if (!s || s.ftHome == null || s.ftAway == null) return '';
   return `${s.ftHome} - ${s.ftAway}`;
 });
 </script>
@@ -216,8 +219,11 @@ const liveScoreText = computed(() => {
   font-size: 13px;
   font-weight: 700;
   color: #fff;
-  line-height: 1;
-  white-space: nowrap;
+  line-height: 1.15;
+  white-space: normal;
+  text-align: center;
+  max-width: 96px;
+  overflow-wrap: anywhere;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }