feat: split admin dashboard, improve match ops, and player closed-match UX

Admin: add match/player overview sub-nav; refine settlement flow and league match management UI; improve action button enabled/disabled styles; enhance logo upload and outright odds sync. API: expose matchPhase/bettingOpen for closed matches; league publish guards; settlement preview with auto score save; outright team auto-sync. Player: watermark for closed/settled states; keep match and bet details visible; remove default login credentials. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-10 13:00:14 +08:00
parent 6124313369
commit 03f54ca689
43 changed files with 2787 additions and 519 deletions
--- a/apps/player/src/components/BetHistoryCard.vue
+++ b/apps/player/src/components/BetHistoryCard.vue
@@ -3,6 +3,8 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { formatMoney } from '../utils/localeDisplay';
+import StatusWatermark from './StatusWatermark.vue';
+import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';

 export interface BetScore {
  ht: string | null;
@@ -24,6 +26,7 @@ export interface BetHistoryItem {
  isParlay?: boolean;
  legCount?: number;
  matchScore?: BetScore | null;
+  matchPhase?: MatchPhase | null;
  legs?: Array<{
    marketLabel: string;
    selectionName: string;
@@ -48,6 +51,22 @@ const statusKey = computed(() => {

 const statusLabel = computed(() => t(`history.status_${statusKey.value}`));

+const watermarkLabel = computed(() => {
+  if (statusKey.value === 'pending' && props.bet.matchPhase === 'closed_pending') {
+    return matchPhaseLabel(t, 'closed_pending');
+  }
+  if (statusKey.value === 'pending' && props.bet.matchPhase === 'settled') {
+    return matchPhaseLabel(t, 'settled');
+  }
+  return statusLabel.value;
+});
+
+const watermarkVariant = computed(() => {
+  if (statusKey.value === 'pending' && props.bet.matchPhase === 'closed_pending') return 'closed';
+  if (statusKey.value === 'pending' && props.bet.matchPhase === 'settled') return 'settled';
+  return statusKey.value;
+});
+
 const placedDate = computed(() =>
  new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
    month: 'short', day: 'numeric',
@@ -87,10 +106,7 @@ function goDetail() {

 <template>
  <article class="bet-card" @click="goDetail">
-    <span
-      class="watermark"
-      :class="statusKey"
-    >{{ statusLabel }}</span>
+    <StatusWatermark :label="watermarkLabel" :variant="watermarkVariant" />
    <div class="card-left">
      <span class="title">{{ title }}</span>
      <span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
@@ -125,28 +141,6 @@ function goDetail() {
  background: rgba(255, 255, 255, 0.02);
 }

-.watermark {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%) rotate(-35deg);
-  font-size: 28px;
-  font-weight: 900;
-  letter-spacing: 0.06em;
-  white-space: nowrap;
-  pointer-events: none;
-  text-transform: uppercase;
-  opacity: 0.18;
-  max-width: 90%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.watermark.won     { color: #3db865; }
-.watermark.lost    { color: #e05050; }
-.watermark.push    { color: #888; }
-.watermark.pending { color: #e8c84a; }
-
 .card-left {
  flex: 1;
  min-width: 0;
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -16,6 +16,14 @@ defineProps<{
    homeTeamLogoUrl?: string | null;
    awayTeamLogoUrl?: string | null;
    startTime: string;
+    bettingOpen?: boolean;
+    matchPhase?: import('../utils/matchPhase').MatchPhase;
+    score?: {
+      htHome: number;
+      htAway: number;
+      ftHome: number;
+      ftAway: number;
+    } | null;
  }[];
 }>();

--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -2,6 +2,8 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { teamFlagUrl } from '../utils/teamFlag';
+import StatusWatermark from './StatusWatermark.vue';
+import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../utils/matchPhase';

 const props = defineProps<{
  match: {
@@ -13,6 +15,14 @@ const props = defineProps<{
    homeTeamLogoUrl?: string | null;
    awayTeamLogoUrl?: string | null;
    startTime: string;
+    bettingOpen?: boolean;
+    matchPhase?: MatchPhase;
+    score?: {
+      htHome: number;
+      htAway: number;
+      ftHome: number;
+      ftAway: number;
+    } | null;
  };
 }>();

@@ -44,12 +54,36 @@ const awayFlagUrl = computed(() =>

 const homeIsLogo = computed(() => Boolean(props.match.homeTeamLogoUrl?.trim()));
 const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
+
+const bettingOpen = computed(() => props.match.bettingOpen !== false);
+
+const phase = computed(
+  () => props.match.matchPhase ?? (bettingOpen.value ? 'open' : 'closed_pending'),
+);
+
+const phaseLabel = computed(() => matchPhaseLabel(t, phase.value));
+
+const liveScoreText = computed(() => {
+  const s = props.match.score;
+  if (!s) return '';
+  return `${s.ftHome} - ${s.ftAway}`;
+});
 </script>

 <template>
-  <article class="match-card">
+  <article
+    class="match-card"
+    :class="{ 'match-card--phase': phase !== 'open' }"
+    @click="emit('bet', match.id)"
+  >
+    <StatusWatermark
+      v-if="phase !== 'open'"
+      :label="phaseLabel"
+      :variant="matchPhaseVariant(phase)"
+      size="sm"
+    />
+
    <div class="teams-row">
-      <!-- Home -->
      <div class="team">
        <span class="team-name">{{ match.homeTeamName }}</span>
        <img
@@ -61,13 +95,12 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
        />
      </div>

-      <!-- Center -->
      <div class="center-col">
        <span class="kickoff">{{ kickoffText }}</span>
-        <span class="vs">VS</span>
+        <span v-if="phase !== 'open' && liveScoreText" class="live-score">{{ liveScoreText }}</span>
+        <span v-else class="vs">VS</span>
      </div>

-      <!-- Away -->
      <div class="team">
        <span class="team-name">{{ match.awayTeamName }}</span>
        <img
@@ -80,14 +113,20 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
      </div>
    </div>

-    <button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
-      {{ t('bet.place_bet_short') }}
+    <button
+      type="button"
+      class="bet-btn"
+      :class="bettingOpen ? 'btn-gold-outline' : 'bet-btn--view'"
+      @click.stop="emit('bet', match.id)"
+    >
+      {{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
    </button>
  </article>
 </template>

 <style scoped>
 .match-card {
+  position: relative;
  background: #0d0d0d;
  border: 1px solid rgba(255, 215, 0, 0.25);
  border-radius: 6px;
@@ -97,9 +136,17 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
  align-items: center;
  gap: 8px;
  min-width: 0;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.match-card--phase {
+  border-color: rgba(140, 140, 140, 0.35);
 }

 .teams-row {
+  position: relative;
+  z-index: 2;
  display: flex;
  align-items: center;
  width: 100%;
@@ -132,6 +179,10 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
  align-self: stretch;
 }

+.match-card--phase .team-name {
+  color: #d8d8d8;
+}
+
 .team-flag {
  width: 72px;
  height: 48px;
@@ -165,6 +216,14 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }

+.live-score {
+  font-size: 20px;
+  font-weight: 900;
+  color: #fff;
+  line-height: 1;
+  letter-spacing: 0.04em;
+}
+
 .vs {
  font-size: 22px;
  font-weight: 900;
@@ -175,6 +234,8 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
 }

 .bet-btn {
+  position: relative;
+  z-index: 2;
  width: auto;
  min-width: 80px;
  padding: 5px 24px;
@@ -183,4 +244,10 @@ const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
  letter-spacing: 0.04em;
  line-height: 1.2;
 }
+
+.bet-btn--view {
+  background: #1a1a1a;
+  border: 1px solid #444;
+  color: #aaa;
+}
 </style>
--- a/apps/player/src/components/StatusWatermark.vue
+++ b/apps/player/src/components/StatusWatermark.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    label: string;
+    variant?: 'pending' | 'won' | 'lost' | 'push' | 'closed' | 'settled';
+    size?: 'sm' | 'md' | 'lg';
+  }>(),
+  { variant: 'pending', size: 'md' },
+);
+</script>
+
+<template>
+  <span class="status-watermark" :class="[variant, size]">{{ label }}</span>
+</template>
+
+<style scoped>
+.status-watermark {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-35deg);
+  font-weight: 900;
+  letter-spacing: 0.06em;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0.2;
+  max-width: 92%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  z-index: 1;
+}
+
+.status-watermark.sm {
+  font-size: 22px;
+}
+
+.status-watermark.md {
+  font-size: 28px;
+}
+
+.status-watermark.lg {
+  font-size: 34px;
+}
+
+.status-watermark.won {
+  color: #3db865;
+}
+
+.status-watermark.lost {
+  color: #e05050;
+}
+
+.status-watermark.push {
+  color: #888;
+}
+
+.status-watermark.pending {
+  color: #e8c84a;
+}
+
+.status-watermark.closed {
+  color: #c9a84a;
+}
+
+.status-watermark.settled {
+  color: #7a9ab8;
+}
+</style>
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -13,6 +13,7 @@ const props = defineProps<{
    oddsVersion: string;
  }>;
  stakes: Record<string, number>;
+  locked?: boolean;
 }>();

 const emit = defineEmits<{
@@ -26,6 +27,7 @@ const columns = computed(() =>
 );

 function setStake(sel: CsSelection, raw: string) {
+  if (props.locked) return;
  const n = Math.max(0, Number(raw) || 0);
  emit('update:stakes', { ...props.stakes, [sel.id]: n });
 }
@@ -37,7 +39,7 @@ function formatOdds(odds: string) {
 </script>

 <template>
-  <div class="cs-panel">
+  <div class="cs-panel" :class="{ 'cs-panel--locked': locked }">
    <div class="cols-head">
      <span>{{ t('bet.col_home') }}</span>
      <span>{{ t('bet.col_draw') }}</span>
@@ -57,6 +59,7 @@ function formatOdds(odds: string) {
            inputmode="decimal"
            :placeholder="t('bet.stake_placeholder')"
            :value="stakes[sel.id] ?? ''"
+            :disabled="locked"
            @input="setStake(sel, ($event.target as HTMLInputElement).value)"
          />
        </div>
@@ -70,6 +73,14 @@ function formatOdds(odds: string) {
  padding: 6px 8px 0;
 }

+.cs-panel--locked {
+  opacity: 0.72;
+}
+
+.cs-panel--locked .stake-input {
+  cursor: not-allowed;
+}
+
 .cols-head {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -11,6 +11,7 @@ const props = defineProps<{
  }[];
  isSelected: (id: string) => boolean;
  compact?: boolean;
+  locked?: boolean;
 }>();

 const emit = defineEmits<{ pick: [id: string] }>();
@@ -22,18 +23,24 @@ function label(sel: (typeof props.selections)[number]) {
  }
  return sel.selectionName;
 }
+
+function onPick(id: string) {
+  if (props.locked) return;
+  emit('pick', id);
+}
 </script>

 <template>
-  <div class="wrap" :class="{ compact }">
+  <div class="wrap" :class="{ compact, locked }">
    <div class="panel">
      <button
        v-for="sel in selections"
        :key="sel.id"
        type="button"
        class="odds-btn"
-        :class="{ selected: isSelected(sel.id) }"
-        @click="emit('pick', sel.id)"
+        :class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
+        :disabled="locked"
+        @click="onPick(sel.id)"
      >
        <span class="label">{{ label(sel) }}</span>
        <span class="odds">{{ sel.odds }}</span>
@@ -48,6 +55,10 @@ function label(sel: (typeof props.selections)[number]) {
  background: #0c0c0c;
 }

+.wrap.locked {
+  opacity: 0.78;
+}
+
 .panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
@@ -73,6 +84,17 @@ function label(sel: (typeof props.selections)[number]) {
  background: rgba(212, 175, 55, 0.1);
 }

+.odds-btn--locked {
+  background: #111;
+  border-color: #333;
+  cursor: not-allowed;
+}
+
+.odds-btn--locked .label,
+.odds-btn--locked .odds {
+  color: #666;
+}
+
 .label {
  font-size: 9px;
  color: var(--text-muted);
--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -8,6 +8,8 @@ import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from
 import BetGuideHelp from '../BetGuideHelp.vue';
 import GoldSpinner from '../GoldSpinner.vue';
 import TeamEmblem from '../TeamEmblem.vue';
+import StatusWatermark from '../StatusWatermark.vue';
+import { matchPhaseLabel, matchPhaseVariant, type MatchPhase } from '../../utils/matchPhase';
 import { useOnLocaleChange } from '../../composables/useOnLocaleChange';

 type TimeFilter = 'all' | 'today';
@@ -39,6 +41,14 @@ interface ParlayMatch {
  homeTeamLogoUrl?: string | null;
  awayTeamLogoUrl?: string | null;
  startTime: string;
+  bettingOpen?: boolean;
+  matchPhase?: MatchPhase;
+  score?: {
+    htHome: number;
+    htAway: number;
+    ftHome: number;
+    ftAway: number;
+  } | null;
  markets: Market[];
 }

@@ -213,6 +223,7 @@ function isPicked(selectionId: string) {
 const parlayHint = ref('');

 function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
+  if (match.bettingOpen === false) return;
  const err = slip.addParlayLeg({
    selectionId: sel.id,
    oddsVersion: String(sel.oddsVersion),
@@ -280,8 +291,22 @@ function toggleCollapse(id: string) {
    </div>

    <div v-else-if="filteredMatches.length" class="match-list">
-      <div v-for="match in filteredMatches" :key="match.id" class="match-card" :class="{ collapsed: collapsed.has(match.id) }">
+      <div
+        v-for="match in filteredMatches"
+        :key="match.id"
+        class="match-card"
+        :class="{
+          collapsed: collapsed.has(match.id),
+          'match-card--phase': (match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open',
+        }"
+      >
        <button type="button" class="match-head" @click="toggleCollapse(match.id)">
+          <StatusWatermark
+            v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open'"
+            :label="matchPhaseLabel(t, match.matchPhase ?? 'closed_pending')"
+            :variant="matchPhaseVariant(match.matchPhase ?? 'closed_pending')"
+            size="sm"
+          />
          <div class="match-head-top">
            <span class="m-league">{{ match.leagueName }}</span>
            <span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">
@@ -299,7 +324,13 @@ function toggleCollapse(id: string) {
              <span class="m-name">{{ match.homeTeamName }}</span>
            </div>
            <div class="m-center">
-              <span class="m-time">{{ formatKickoff(match.startTime) }}</span>
+              <span
+                v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) !== 'open' && match.score"
+                class="m-score"
+              >
+                {{ match.score.ftHome }} - {{ match.score.ftAway }}
+              </span>
+              <span v-else class="m-time">{{ formatKickoff(match.startTime) }}</span>
              <span class="m-vs">VS</span>
            </div>
            <div class="m-team away">
@@ -335,7 +366,11 @@ function toggleCollapse(id: string) {
                    :key="sel.id"
                    type="button"
                    class="odd-btn"
-                    :class="{ picked: isPicked(sel.id) }"
+                    :class="{
+                      picked: isPicked(sel.id),
+                      'odd-btn--locked': match.bettingOpen === false,
+                    }"
+                    :disabled="match.bettingOpen === false"
                    @click="pickSelection(match, getMarket(match, col.key)!, sel)"
                  >
                    <span class="odd-label">{{ selLabel(sel) }}</span>
@@ -467,6 +502,8 @@ function toggleCollapse(id: string) {
 }

 .match-head {
+  position: relative;
+  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
@@ -647,6 +684,27 @@ function toggleCollapse(id: string) {
  background: rgba(212, 175, 55, 0.15);
 }

+.odd-btn--locked {
+  opacity: 0.65;
+  cursor: not-allowed;
+  border-color: #333;
+}
+
+.odd-btn--locked .odd-label,
+.odd-btn--locked .odd-val {
+  color: #666;
+}
+
+.match-card--phase {
+  opacity: 0.94;
+}
+
+.m-score {
+  font-size: 12px;
+  font-weight: 800;
+  color: #fff;
+}
+
 .odd-label {
  font-size: 8.5px;
  font-weight: 700;