重构

apps/player/src/components/match-detail/CorrectScorePanel.vue

@@ -9,27 +9,34 @@ const props = defineProps<{
     id: string;
     selectionCode: string;
     selectionName: string;
+    selectionDisplayName?: string;
     odds: string;
     oddsVersion: string;
   }>;
-  stakes: Record<string, number>;
+  isSelected: (id: string) => boolean;
   locked?: boolean;
 }>();
 
 const emit = defineEmits<{
-  'update:stakes': [Record<string, number>];
+  pick: [id: string];
 }>();
 
 const { t } = useI18n();
 
 const columns = computed(() =>
-  groupCorrectScoreSelections(props.selections, props.marketType, t),
+  groupCorrectScoreSelections(
+    props.selections.map((s) => ({
+      ...s,
+      selectionName: s.selectionDisplayName?.trim() || s.selectionName,
+    })),
+    props.marketType,
+    t,
+  ),
 );
 
-function setStake(sel: CsSelection, raw: string) {
+function onPick(sel: CsSelection) {
   if (props.locked) return;
-  const n = Math.max(0, Number(raw) || 0);
-  emit('update:stakes', { ...props.stakes, [sel.id]: n });
+  emit('pick', sel.id);
 }
 
 function formatOdds(odds: string) {
@@ -48,21 +55,18 @@ function formatOdds(odds: string) {
 
     <div class="cols-grid">
       <div v-for="colKey in ['home', 'draw', 'away'] as const" :key="colKey" class="col">
-        <div v-for="sel in columns[colKey]" :key="sel.id" class="score-card">
+        <button
+          v-for="sel in columns[colKey]"
+          :key="sel.id"
+          type="button"
+          class="score-card"
+          :class="{ selected: isSelected(sel.id), 'score-card--locked': locked }"
+          :disabled="locked"
+          @click="onPick(sel)"
+        >
           <span class="score-line">{{ sel.scoreDisplay }}</span>
           <span class="odds">{{ formatOdds(sel.odds) }}</span>
-          <input
-            type="number"
-            class="stake-input"
-            min="0"
-            step="1"
-            inputmode="decimal"
-            :placeholder="t('bet.stake_placeholder')"
-            :value="stakes[sel.id] ?? ''"
-            :disabled="locked"
-            @input="setStake(sel, ($event.target as HTMLInputElement).value)"
-          />
-        </div>
+        </button>
       </div>
     </div>
   </div>
@@ -77,7 +81,7 @@ function formatOdds(odds: string) {
   opacity: 0.72;
 }
 
-.cs-panel--locked .stake-input {
+.cs-panel--locked .score-card {
   cursor: not-allowed;
 }
 
@@ -108,10 +112,29 @@ function formatOdds(odds: string) {
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 2px;
-  padding: 4px 3px;
+  justify-content: center;
+  gap: 3px;
+  min-height: 42px;
+  padding: 6px 3px;
   background: #161616;
+  border: 1px solid #282828;
   border-radius: 3px;
+  text-align: center;
+}
+
+.score-card.selected {
+  border-color: var(--primary);
+  background: rgba(212, 175, 55, 0.1);
+}
+
+.score-card--locked {
+  background: #111;
+  border-color: #333;
+}
+
+.score-card--locked .score-line,
+.score-card--locked .odds {
+  color: #666;
 }
 
 .score-line {
@@ -125,27 +148,4 @@ function formatOdds(odds: string) {
   font-weight: 700;
   color: var(--primary-light);
 }
-
-.stake-input {
-  width: 100%;
-  padding: 4px 2px;
-  border-radius: 2px;
-  border: 1px solid #2a2a2a;
-  background: #0a0a0a;
-  color: var(--text);
-  font-size: 12px;
-  text-align: center;
-  outline: none;
-  -moz-appearance: textfield;
-}
-
-.stake-input:focus {
-  border-color: var(--border-gold-soft);
-}
-
-.stake-input::-webkit-outer-spin-button,
-.stake-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
 </style>

apps/player/src/components/match-detail/MarketSelectionsPanel.vue

@@ -7,19 +7,24 @@ const props = defineProps<{
     id: string;
     selectionCode?: string;
     selectionName: string;
+    selectionDisplayName?: string;
     odds: string;
   }[];
   isSelected: (id: string) => boolean;
   compact?: boolean;
   locked?: boolean;
+  lineValue?: string | number | null;
 }>();
 
 const emit = defineEmits<{ pick: [id: string] }>();
 const { t } = useI18n();
 
 function label(sel: (typeof props.selections)[number]) {
+  if (sel.selectionDisplayName?.trim()) return sel.selectionDisplayName;
   if (sel.selectionCode) {
-    return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName);
+    return resolveSelectionLabel(t, sel.selectionCode, sel.selectionName, {
+      lineValue: props.lineValue,
+    });
   }
   return sel.selectionName;
 }