feat(player): 优化赛事详情与串关下注交互

- 合并玩法列表、单选投注单与玩法内确认下单
- 波胆底部确认与核对弹窗；串关底栏固定
- 帮助弹窗与投注单逻辑拆分（详情单关/串关页串关）

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/player/src/components/BetSlipDrawer.vue

@@ -29,7 +29,6 @@ async function placeBet() {
   success.value = '';
 
   try {
-    const requestId = genId();
     if (slip.mode === 'parlay' && slip.items.length >= 2) {
       if (slip.hasSameMatch) {
         error.value = t('bet.parlay_same_match');
@@ -41,7 +40,7 @@ async function placeBet() {
           oddsVersion: i.oddsVersion,
         })),
         stake: slip.stake,
-        requestId,
+        requestId: genId(),
       });
     } else if (slip.items.length === 1) {
       const item = slip.items[0];
@@ -49,17 +48,21 @@ async function placeBet() {
         selectionId: item.selectionId,
         oddsVersion: item.oddsVersion,
         stake: slip.stake,
-        requestId,
+        requestId: genId(),
       });
     } else {
-      error.value = t('bet.parlay_need_more');
       return;
     }
-    success.value = '下注成功！';
+    success.value = t('bet.place_success');
     slip.clear();
-    setTimeout(() => { show.value = false; success.value = ''; }, 1500);
+    setTimeout(() => {
+      show.value = false;
+      success.value = '';
+    }, 1500);
   } catch (e: unknown) {
-    error.value = (e as { response?: { data?: { error?: string } } })?.response?.data?.error || '下注失败';
+    error.value =
+      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
+      t('bet.place_failed');
   } finally {
     loading.value = false;
   }
@@ -71,31 +74,46 @@ async function placeBet() {
     <div class="drawer">
       <div class="drawer-header">
         <h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
-        <button class="close-btn" @click="show = false">✕</button>
+        <button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
+          ✕
+        </button>
       </div>
 
-      <div v-if="!slip.items.length" class="empty">点击赔率添加投注</div>
+      <div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
 
       <div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
         <div class="item-name">{{ item.matchName }}</div>
-        <div class="item-sel">{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span></div>
+        <div class="item-sel">
-        <button class="remove" @click="slip.removeItem(item.selectionId)">移除</button>
+          {{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
+        </div>
+        <button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
+          {{ t('bet.slip_remove') }}
+        </button>
       </div>
 
-      <div v-if="slip.hasSameMatch" class="warn">同场比赛不能串关，可作为单关分别投注</div>
+      <p v-if="slip.isParlay" class="mode-hint mode-hint--parlay">
+        {{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
+      </p>
 
       <div v-if="slip.items.length" class="stake-area">
         <label>{{ t('bet.stake') }}</label>
         <input v-model.number="slip.stake" type="number" min="1" />
-        <div v-if="slip.isParlay" class="mode-tag">{{ t('bet.parlay') }} · 赔率 {{ slip.totalOdds.toFixed(2) }}</div>
+        <div class="return">
-        <div class="return">预计返还: <strong>{{ slip.potentialReturn.toFixed(2) }}</strong></div>
+          {{ t('bet.slip_est_return') }}:
+          <strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
+        </div>
       </div>
 
       <p v-if="error" class="error">{{ error }}</p>
       <p v-if="success" class="success">{{ success }}</p>
 
-      <button class="btn-primary" :disabled="loading || !slip.items.length" @click="placeBet">
+      <button
-        {{ t('bet.place_bet') }}
+        type="button"
+        class="btn-primary"
+        :disabled="loading || !slip.items.length"
+        @click="placeBet"
+      >
+        {{ loading ? t('bet.placing') : t('bet.place_bet') }}
       </button>
     </div>
   </div>
@@ -103,48 +121,130 @@ async function placeBet() {
 
 <style scoped>
 .overlay {
-  position: fixed; inset: 0;
+  position: fixed;
+  inset: 0;
   background: rgba(0, 0, 0, 0.75);
   z-index: 200;
-  display: flex; align-items: flex-end;
+  display: flex;
+  align-items: flex-end;
 }
+
 .drawer {
   background: linear-gradient(180deg, #222 0%, #141414 100%);
   width: 100%;
   max-height: 80vh;
-  border-radius: 20px 20px 0 0;
+  border-radius: 16px 16px 0 0;
-  padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0));
+  padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
   overflow-y: auto;
   border-top: 1px solid var(--border);
-  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.35);
 }
-.drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
+
-.drawer-header h3 { font-size: 18px; font-weight: 800; letter-spacing: 0.04em; }
+.drawer-header {
-.count { color: var(--primary-light); font-size: 20px; font-weight: 800; }
+  display: flex;
-.close-btn { background: none; color: var(--text-muted); font-size: 22px; padding: 4px; font-weight: 700; }
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.drawer-header h3 {
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.count {
+  color: var(--primary-light);
+}
+
+.close-btn {
+  background: none;
+  color: var(--text-muted);
+  font-size: 20px;
+  padding: 4px;
+}
+
 .slip-item {
-  padding: 14px;
+  padding: 10px 12px;
   background: #111;
   border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
+  border-radius: 6px;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
-.item-name { font-size: 14px; font-weight: 800; }
+
-.item-sel { font-size: 13px; color: var(--text-muted); margin-top: 6px; font-weight: 500; }
+.item-name {
-.odds { color: var(--primary-light); font-weight: 800; }
+  font-size: 13px;
-.remove { background: none; color: var(--danger); font-size: 13px; margin-top: 8px; font-weight: 700; }
+  font-weight: 800;
-.stake-area { margin: 18px 0; }
+}
-.stake-area label { font-size: 13px; color: var(--primary-light); display: block; margin-bottom: 8px; font-weight: 700; letter-spacing: 0.04em; }
+
-.return { font-size: 15px; color: var(--text-muted); margin-top: 12px; font-weight: 600; }
+.item-sel {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-top: 4px;
+}
+
+.odds {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.remove {
+  background: none;
+  color: var(--danger);
+  font-size: 12px;
+  margin-top: 6px;
+  font-weight: 700;
+}
+
+.mode-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 8px;
+}
+
+.mode-hint--parlay {
+  color: var(--primary-light);
+  font-weight: 700;
+}
+
+.stake-area {
+  margin: 12px 0;
+}
+
+.stake-area label {
+  font-size: 12px;
+  color: var(--primary-light);
+  display: block;
+  margin-bottom: 6px;
+  font-weight: 700;
+}
+
+.return {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 8px;
+}
+
 .return strong {
   color: var(--primary-light);
-  font-size: 22px;
+  font-size: 18px;
   font-weight: 800;
-  text-shadow: none;
 }
-.mode-tag { font-size: 13px; color: var(--primary-light); font-weight: 700; margin-top: 8px; }
+
-.warn { color: var(--primary-light); font-size: 13px; margin-bottom: 10px; font-weight: 600; }
+.error {
-.error { color: var(--danger); font-size: 14px; margin-bottom: 8px; font-weight: 600; }
+  color: var(--danger);
-.success { color: var(--primary-light); font-size: 14px; font-weight: 700; margin-bottom: 8px; }
+  font-size: 13px;
-.empty { text-align: center; color: var(--text-muted); padding: 32px; font-weight: 600; }
+  margin-bottom: 8px;
+}
+
+.success {
+  color: var(--primary-light);
+  font-size: 13px;
+  margin-bottom: 8px;
+}
+
+.empty {
+  text-align: center;
+  color: var(--text-muted);
+  padding: 24px;
+  font-size: 13px;
+}
 </style>

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

@@ -0,0 +1,253 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { formatMoney } from '../../utils/localeDisplay';
+
+export interface CsConfirmLine {
+  scoreDisplay: string;
+  odds: string;
+  stake: number;
+}
+
+const props = defineProps<{
+  open: boolean;
+  marketLabel: string;
+  homeTeamName: string;
+  awayTeamName: string;
+  lines: CsConfirmLine[];
+  loading?: boolean;
+}>();
+
+const emit = defineEmits<{ confirm: []; close: [] }>();
+
+const { t, locale } = useI18n();
+
+const totalStake = computed(() =>
+  props.lines.reduce((sum, line) => sum + line.stake, 0),
+);
+
+const totalReturn = computed(() =>
+  props.lines.reduce((sum, line) => {
+    const odds = parseFloat(line.odds);
+    return sum + line.stake * (Number.isFinite(odds) ? odds : 0);
+  }, 0),
+);
+
+function formatOdds(odds: string) {
+  const n = parseFloat(odds);
+  return Number.isFinite(n) ? n.toFixed(2) : odds;
+}
+</script>
+
+<template>
+  <div v-if="open && lines.length" class="overlay" @click.self="emit('close')">
+    <div class="modal" role="dialog" aria-modal="true">
+      <button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="emit('close')">✕</button>
+
+      <h3 class="title">{{ t('bet.cs_confirm_title') }}</h3>
+      <p class="match-line">{{ homeTeamName }} vs {{ awayTeamName }}</p>
+      <p class="market-tag">{{ marketLabel }}</p>
+      <p class="count">{{ t('bet.cs_confirm_count', { n: lines.length }) }}</p>
+
+      <ul class="line-list">
+        <li v-for="(line, idx) in lines" :key="idx" class="line-item">
+          <span class="score">{{ line.scoreDisplay }}</span>
+          <span class="odds">@ {{ formatOdds(line.odds) }}</span>
+          <span class="stake">{{ formatMoney(line.stake, locale) }}</span>
+        </li>
+      </ul>
+
+      <div class="totals">
+        <div class="total-row">
+          <span>{{ t('bet.cs_confirm_total_stake') }}</span>
+          <span class="gold">{{ formatMoney(totalStake, locale) }}</span>
+        </div>
+        <div class="total-row">
+          <span>{{ t('history.est_return') }}</span>
+          <span class="gold">{{ formatMoney(totalReturn, locale) }}</span>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button type="button" class="btn-cancel" :disabled="loading" @click="emit('close')">
+          {{ t('bet.cancel') }}
+        </button>
+        <button
+          type="button"
+          class="btn-confirm btn-gold-outline"
+          :disabled="loading"
+          @click="emit('confirm')"
+        >
+          {{ loading ? t('bet.placing') : t('bet.place_bet_short') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 210;
+  background: rgba(0, 0, 0, 0.72);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 320px;
+  max-height: 85vh;
+  overflow-y: auto;
+  background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: var(--radius);
+  padding: 16px 14px 14px;
+  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
+}
+
+.close-x {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-align: center;
+  margin-bottom: 6px;
+  padding-right: 24px;
+}
+
+.match-line {
+  text-align: center;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+  margin-bottom: 4px;
+}
+
+.market-tag {
+  text-align: center;
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 4px;
+}
+
+.count {
+  text-align: center;
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 12px;
+}
+
+.line-list {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  max-height: 220px;
+  overflow-y: auto;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.line-item {
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  gap: 8px;
+  align-items: center;
+  padding: 9px 10px;
+  font-size: 13px;
+  border-bottom: 1px solid var(--border);
+}
+
+.line-item:last-child {
+  border-bottom: none;
+}
+
+.score {
+  font-weight: 800;
+  color: var(--primary-light);
+}
+
+.odds {
+  color: var(--text-muted);
+  font-weight: 600;
+  font-size: 12px;
+}
+
+.stake {
+  font-weight: 800;
+  color: var(--text);
+  text-align: right;
+  min-width: 56px;
+}
+
+.totals {
+  padding: 10px;
+  margin-bottom: 12px;
+  background: rgba(212, 175, 55, 0.06);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: 6px;
+}
+
+.total-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.total-row + .total-row {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--border);
+}
+
+.gold {
+  color: var(--primary-light);
+  font-weight: 800;
+}
+
+.actions {
+  display: grid;
+  grid-template-columns: 1fr 1.2fr;
+  gap: 8px;
+}
+
+.btn-cancel {
+  padding: 10px;
+  border-radius: 6px;
+  background: #1a1a1a;
+  border: 1px solid var(--border);
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.btn-confirm {
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+.btn-confirm:disabled {
+  opacity: 0.45;
+}
+</style>

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

@@ -5,8 +5,6 @@ import { groupCorrectScoreSelections, type CsSelection } from '../../utils/corre
 
 const props = defineProps<{
   marketType: string;
-  homeTeamName: string;
-  awayTeamName: string;
   selections: Array<{
     id: string;
     selectionCode: string;
@@ -38,11 +36,6 @@ function formatOdds(odds: string) {
 
 <template>
   <div class="cs-panel">
-    <div class="teams-bar">
-      <div class="team-box">{{ homeTeamName }}</div>
-      <div class="team-box">{{ awayTeamName }}</div>
-    </div>
-
     <div class="cols-head">
       <span>{{ t('bet.col_home') }}</span>
       <span>{{ t('bet.col_draw') }}</span>
@@ -51,20 +44,17 @@ function formatOdds(odds: string) {
 
     <div class="cols-grid">
       <div v-for="colKey in ['home', 'draw', 'away'] as const" :key="colKey" class="col">
-        <div
+        <div v-for="sel in columns[colKey]" :key="sel.id" class="score-card">
-          v-for="sel in columns[colKey]"
+          <span class="score-line">{{ sel.scoreDisplay }}</span>
-          :key="sel.id"
+          <span class="odds">{{ formatOdds(sel.odds) }}</span>
-          class="score-card"
-        >
-          <div class="score-line">{{ sel.scoreDisplay }}</div>
-          <div class="odds-box">{{ formatOdds(sel.odds) }}</div>
           <input
             type="number"
             class="stake-input"
             min="0"
             step="1"
             inputmode="decimal"
-            :value="stakes[sel.id] ?? 0"
+            :placeholder="t('bet.stake_placeholder')"
+            :value="stakes[sel.id] ?? ''"
             @input="setStake(sel, ($event.target as HTMLInputElement).value)"
           />
         </div>
@@ -75,92 +65,71 @@ function formatOdds(odds: string) {
 
 <style scoped>
 .cs-panel {
-  padding: 0 10px 14px;
+  padding: 6px 8px 0;
-}
-
-.teams-bar {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 8px;
-  margin-bottom: 12px;
-}
-
-.team-box {
-  padding: 10px 8px;
-  text-align: center;
-  font-size: 14px;
-  font-weight: 800;
-  color: var(--primary-light);
-  background: #0d0d0d;
-  border: 1px solid #333;
-  border-radius: 4px;
 }
 
 .cols-head {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
+  gap: 4px;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   text-align: center;
-  font-size: 13px;
+  font-size: 10px;
-  font-weight: 800;
+  font-weight: 700;
-  color: var(--primary-light);
+  color: var(--text-muted);
 }
 
 .cols-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: 6px;
+  gap: 4px;
-  align-items: start;
 }
 
 .col {
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
 }
 
 .score-card {
-  background: #1c1c1c;
+  display: flex;
-  border: 1px solid #333;
+  flex-direction: column;
-  border-radius: 4px;
+  align-items: center;
-  padding: 8px 6px 6px;
+  gap: 2px;
-  text-align: center;
+  padding: 4px 3px;
+  background: #161616;
+  border-radius: 3px;
 }
 
 .score-line {
-  font-size: 15px;
+  font-size: 11px;
   font-weight: 800;
   color: var(--text);
-  margin-bottom: 6px;
 }
 
-.odds-box {
+.odds {
-  display: inline-block;
+  font-size: 10px;
-  min-width: 52px;
+  font-weight: 700;
-  padding: 3px 8px;
-  margin-bottom: 6px;
-  border: 1px solid var(--primary);
-  border-radius: 3px;
-  font-size: 12px;
-  font-weight: 800;
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
 }
 
 .stake-input {
   width: 100%;
-  padding: 6px 4px;
+  padding: 4px 2px;
-  border-radius: 3px;
+  border-radius: 2px;
-  border: none;
+  border: 1px solid #2a2a2a;
-  background: #f2f2f2;
+  background: #0a0a0a;
-  color: #111;
+  color: var(--text);
-  font-size: 14px;
+  font-size: 12px;
-  font-weight: 700;
   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;

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

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-
-const props = defineProps<{
-  label: string;
-  expanded: boolean;
-  hasMarket: boolean;
-  rewardActive?: boolean;
-}>();
-
-const emit = defineEmits<{
-  bet: [];
-  expand: [];
-  collapse: [];
-}>();
-
-const { t } = useI18n();
-
-function onBet() {
-  if (!props.hasMarket) return;
-  emit('bet');
-}
-
-function onExpand() {
-  if (!props.hasMarket) return;
-  emit('expand');
-}
-
-function onCollapse() {
-  emit('collapse');
-}
-</script>
-
-<template>
-  <div class="featured-wrap" :class="{ expanded, disabled: !hasMarket }">
-    <div class="featured-row">
-      <div class="featured-main">
-        <span class="market-name">{{ label }}</span>
-        <span v-if="rewardActive && hasMarket" class="reward-badge">
-          🏆 {{ t('bet.reward_active') }}
-        </span>
-        <span v-else-if="!hasMarket" class="closed-tag">{{ t('bet.market_closed') }}</span>
-      </div>
-      <div class="featured-actions">
-        <button type="button" class="btn-bet btn-gold-outline" :disabled="!hasMarket" @click="onBet">
-          {{ t('bet.place_bet_short') }}
-        </button>
-        <button
-          type="button"
-          class="btn-icon btn-gold-outline"
-          :disabled="!hasMarket"
-          :aria-label="expanded ? t('bet.collapse_market') : t('bet.expand_market')"
-          @click="expanded ? onCollapse() : onExpand()"
-        >
-          {{ expanded ? '−' : '+' }}
-        </button>
-        <button
-          type="button"
-          class="btn-icon btn-gold-outline"
-          :aria-label="t('bet.collapse_market')"
-          @click="onCollapse"
-        >
-          ×
-        </button>
-      </div>
-    </div>
-    <div v-if="expanded && hasMarket" class="panel-slot">
-      <slot />
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.featured-wrap {
-  margin-bottom: 10px;
-  border-radius: 6px;
-  border: 1px solid #3a3218;
-  background: #121212;
-  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12);
-}
-
-.featured-wrap.expanded {
-  box-shadow:
-    0 0 0 1px rgba(212, 175, 55, 0.35),
-    0 0 12px rgba(212, 175, 55, 0.15);
-}
-
-.featured-wrap.disabled {
-  opacity: 0.55;
-}
-
-.featured-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 12px 10px;
-}
-
-.featured-main {
-  flex: 1;
-  min-width: 0;
-}
-
-.market-name {
-  display: block;
-  font-size: 15px;
-  font-weight: 800;
-  color: var(--primary-light);
-  margin-bottom: 4px;
-}
-
-.reward-badge {
-  display: inline-block;
-  font-size: 11px;
-  font-weight: 700;
-  color: #e8c84a;
-  background: rgba(212, 175, 55, 0.12);
-  padding: 2px 8px;
-  border-radius: 4px;
-}
-
-.closed-tag {
-  font-size: 11px;
-  color: var(--text-muted);
-}
-
-.featured-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.btn-bet {
-  padding: 8px 14px;
-  border-radius: 6px;
-  font-size: 13px;
-}
-
-.btn-bet:disabled {
-  opacity: 0.45;
-}
-
-.btn-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 6px;
-  font-size: 18px;
-  font-weight: 900;
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-icon:disabled {
-  opacity: 0.45;
-}
-</style>

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

@@ -6,60 +6,69 @@ defineProps<{
     odds: string;
   }[];
   isSelected: (id: string) => boolean;
+  compact?: boolean;
 }>();
 
 const emit = defineEmits<{ pick: [id: string] }>();
 </script>
 
 <template>
-  <div class="panel">
+  <div class="wrap" :class="{ compact }">
-    <button
+    <div class="panel">
-      v-for="sel in selections"
+      <button
-      :key="sel.id"
+        v-for="sel in selections"
-      type="button"
+        :key="sel.id"
-      class="odds-btn"
+        type="button"
-      :class="{ selected: isSelected(sel.id) }"
+        class="odds-btn"
-      @click="emit('pick', sel.id)"
+        :class="{ selected: isSelected(sel.id) }"
-    >
+        @click="emit('pick', sel.id)"
-      <span class="label">{{ sel.selectionName }}</span>
+      >
-      <span class="odds">{{ sel.odds }}</span>
+        <span class="label">{{ sel.selectionName }}</span>
-    </button>
+        <span class="odds">{{ sel.odds }}</span>
+      </button>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.wrap {
+  padding: 6px 8px 8px;
+  background: #0c0c0c;
+}
+
 .panel {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(3, 1fr);
-  gap: 8px;
+  gap: 4px;
-  padding: 0 10px 12px;
 }
 
 .odds-btn {
-  min-width: calc(33.33% - 6px);
+  display: flex;
-  flex: 1 1 calc(33.33% - 6px);
+  flex-direction: column;
-  max-width: calc(50% - 4px);
+  align-items: center;
-  padding: 10px 8px;
+  justify-content: center;
-  border-radius: 6px;
+  gap: 2px;
-  background: #0d0d0d;
+  min-height: 44px;
-  border: 1px solid #333;
+  padding: 6px 4px;
+  border-radius: 4px;
+  background: #141414;
+  border: 1px solid #262626;
   text-align: center;
 }
 
 .odds-btn.selected {
   border-color: var(--primary);
-  background: rgba(212, 175, 55, 0.12);
+  background: rgba(212, 175, 55, 0.1);
 }
 
 .label {
-  display: block;
+  font-size: 9px;
-  font-size: 11px;
   color: var(--text-muted);
-  margin-bottom: 4px;
+  line-height: 1.15;
 }
 
 .odds {
-  font-size: 15px;
+  font-size: 14px;
   font-weight: 800;
   color: var(--primary-light);
 }

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

@@ -3,82 +3,71 @@ import { useI18n } from 'vue-i18n';
 
 defineProps<{
   label: string;
-  active: boolean;
+  expanded: boolean;
   hasMarket: boolean;
 }>();
 
-const emit = defineEmits<{ expand: []; collapse: [] }>();
+const emit = defineEmits<{ toggle: [] }>();
 const { t } = useI18n();
 </script>
 
 <template>
-  <div class="tile" :class="{ active, disabled: !hasMarket }">
+  <button
-    <span class="tile-label">{{ label }}</span>
+    type="button"
-    <div class="tile-actions">
+    class="row"
-      <button
+    :class="{ expanded, disabled: !hasMarket }"
-        type="button"
+    :disabled="!hasMarket"
-        class="btn-icon btn-gold-outline"
+    @click="emit('toggle')"
-        :disabled="!hasMarket"
+  >
-        :aria-label="t('bet.expand_market')"
+    <span class="row-label">{{ label }}</span>
-        @click="emit('expand')"
+    <span v-if="!hasMarket" class="row-muted">{{ t('bet.market_closed') }}</span>
-      >
+    <span v-else class="row-chevron" aria-hidden="true">{{ expanded ? '▾' : '▸' }}</span>
-        +
+  </button>
-      </button>
-      <button
-        type="button"
-        class="btn-icon btn-gold-outline"
-        :aria-label="t('bet.collapse_market')"
-        @click="emit('collapse')"
-      >
-        ×
-      </button>
-    </div>
-  </div>
 </template>
 
 <style scoped>
-.tile {
+.row {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  gap: 8px;
-  gap: 6px;
+  width: 100%;
-  padding: 12px 10px;
+  padding: 10px 12px;
-  background: #141414;
+  background: transparent;
-  border: 1px solid #2a2a2a;
+  border: none;
-  border-radius: 6px;
+  text-align: left;
-  min-height: 48px;
 }
 
-.tile.active {
+.row.expanded {
-  border-color: var(--primary);
+  background: rgba(255, 255, 255, 0.03);
-  box-shadow: 0 0 8px rgba(212, 175, 55, 0.2);
 }
 
-.tile.disabled {
+.row.disabled {
-  opacity: 0.5;
+  opacity: 0.4;
 }
 
-.tile-label {
+.row-label {
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--primary-light);
-  line-height: 1.25;
   flex: 1;
   min-width: 0;
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--text);
 }
 
-.tile-actions {
+.row.expanded .row-label {
-  display: flex;
+  color: var(--primary-light);
-  gap: 4px;
-  flex-shrink: 0;
 }
 
-.btn-icon {
+.row-muted {
-  width: 26px;
+  font-size: 10px;
-  height: 26px;
+  color: var(--text-muted);
-  border-radius: 5px;
+}
-  font-size: 16px;
+
-  font-weight: 900;
+.row-chevron {
-  line-height: 1;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.row.expanded .row-chevron {
+  color: var(--primary-light);
 }
 </style>

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

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const open = ref(false);
+
+function close() {
+  open.value = false;
+}
+</script>
+
+<template>
+  <button
+    type="button"
+    class="help-btn"
+    :aria-label="t('bet.guide_help_aria')"
+    :title="t('bet.guide_help_aria')"
+    @click="open = true"
+  >
+    ?
+  </button>
+
+  <Teleport to="body">
+    <div v-if="open" class="overlay" @click.self="close">
+      <div class="modal" role="dialog" aria-modal="true" :aria-label="t('bet.guide_title')">
+        <button type="button" class="close-x" :aria-label="t('bet.cancel')" @click="close">✕</button>
+
+        <h3 class="title">{{ t('bet.guide_title') }}</h3>
+
+        <div class="guide-body">
+          <div class="flow">
+            <p class="flow-name">{{ t('bet.guide_flow_normal') }}</p>
+            <ol>
+              <li>{{ t('bet.guide_normal_1') }}</li>
+              <li>{{ t('bet.guide_normal_2') }}</li>
+              <li>{{ t('bet.guide_normal_3') }}</li>
+            </ol>
+          </div>
+          <div class="flow flow--cs">
+            <p class="flow-name">{{ t('bet.guide_flow_cs') }}</p>
+            <ol>
+              <li>{{ t('bet.guide_cs_1') }}</li>
+              <li>{{ t('bet.guide_cs_2') }}</li>
+              <li>{{ t('bet.guide_cs_3') }}</li>
+            </ol>
+          </div>
+        </div>
+
+        <button type="button" class="btn-ok btn-gold-outline" @click="close">
+          {{ t('bet.guide_got_it') }}
+        </button>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.help-btn {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--primary-light);
+  font-size: 14px;
+  font-weight: 800;
+  line-height: 1;
+  padding: 0;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 205;
+  background: rgba(0, 0, 0, 0.72);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  backdrop-filter: blur(4px);
+}
+
+.modal {
+  position: relative;
+  width: 100%;
+  max-width: 340px;
+  max-height: 85vh;
+  overflow-y: auto;
+  background: linear-gradient(165deg, #1a1810 0%, #121212 45%, #0a0a0a 100%);
+  border: 1px solid var(--border-gold-soft);
+  border-radius: var(--radius);
+  padding: 16px 14px 14px;
+  box-shadow: var(--shadow), 0 0 24px rgba(212, 175, 55, 0.08);
+}
+
+.close-x {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.06);
+  color: var(--text-muted);
+  font-size: 14px;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 800;
+  color: var(--primary-light);
+  text-align: center;
+  margin-bottom: 12px;
+  padding-right: 24px;
+}
+
+.guide-body {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 14px;
+}
+
+.flow-name {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  margin-bottom: 8px;
+}
+
+.flow ol {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 13px;
+  color: var(--text-muted);
+  line-height: 1.55;
+}
+
+.flow li + li {
+  margin-top: 6px;
+}
+
+.flow--cs {
+  padding-top: 10px;
+  border-top: 1px solid var(--border);
+}
+
+.btn-ok {
+  width: 100%;
+  padding: 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 800;
+}
+</style>

apps/player/src/components/parlay/ParlayPanel.vue

@@ -120,20 +120,18 @@ function pickSelection(match: ParlayMatch, market: Market, sel: Selection) {
 function openSlip() {
   slip.openDrawer();
 }
+
+const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
 </script>
 
 <template>
-  <div class="parlay-panel">
+  <div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
     <header class="panel-head">
       <div class="head-title">
         <span class="layers-icon" aria-hidden="true" />
         <h2>{{ t('bet.parlay_title') }}</h2>
       </div>
       <p class="head-desc">{{ t('bet.parlay_desc') }}</p>
-      <button type="button" class="slip-link btn-gold-outline" @click="openSlip">
-        {{ t('bet.bet_slip') }}
-        <span v-if="slip.count" class="slip-count">({{ slip.count }})</span>
-      </button>
     </header>
 
     <div class="toolbar">
@@ -184,6 +182,24 @@ function openSlip() {
       <span class="empty-icon" aria-hidden="true">📅</span>
       <p>{{ t('bet.parlay_empty') }}</p>
     </div>
+
+    <Teleport to="body">
+      <div v-if="showParlayFoot" class="parlay-foot-fixed">
+        <p v-if="slip.count < 2" class="foot-hint">{{ t('bet.parlay_need_more') }}</p>
+        <p v-else class="foot-meta">
+          {{ t('bet.bet_slip') }} ({{ slip.count }}) · {{ t('bet.parlay') }}
+          {{ slip.totalOdds.toFixed(2) }}
+        </p>
+        <button
+          type="button"
+          class="market-foot-btn"
+          :disabled="slip.count < 2"
+          @click="openSlip"
+        >
+          {{ t('bet.cs_confirm_cell') }}
+        </button>
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -192,6 +208,10 @@ function openSlip() {
   padding: 0 12px 16px;
 }
 
+.parlay-panel.has-fixed-foot {
+  padding-bottom: 100px;
+}
+
 .panel-head {
   background: #141414;
   border: 1px solid #2a2a2a;
@@ -231,15 +251,45 @@ function openSlip() {
   margin-bottom: 10px;
 }
 
-.slip-link {
+.parlay-foot-fixed {
-  padding: 6px 12px;
+  position: fixed;
-  border-radius: 6px;
+  left: 0;
-  font-size: 12px;
+  right: 0;
+  bottom: calc(50px + env(safe-area-inset-bottom, 0px));
+  z-index: 95;
+  padding: 10px 12px 10px;
+  background: rgba(14, 14, 14, 0.98);
+  border-top: 1px solid var(--border-gold-soft);
+  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
 }
 
-.slip-count {
+.foot-hint,
-  margin-left: 4px;
+.foot-meta {
+  margin: 0 0 8px;
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.foot-meta {
   color: var(--primary-light);
+  font-weight: 600;
+}
+
+.market-foot-btn {
+  display: block;
+  width: 100%;
+  padding: 9px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.market-foot-btn:disabled {
+  opacity: 0.45;
 }
 
 .toolbar {

apps/player/src/main.ts

@@ -61,6 +61,11 @@ const i18n = createI18n({
         outright_success: '下注成功',
         outright_done: '完毕',
         outright_bet_failed: '下注失败',
+        outright_insufficient: '余额不足',
+        stake_label: '投注金额',
+        stake_placeholder: '输入金额',
+        stake_max: '全部',
+        placing: '提交中…',
         no_outright: '暂无冠军盘口',
         cancel: '取消',
         parlay_title: '串关投注',
@@ -90,8 +95,43 @@ const i18n = createI18n({
         col_draw: '平',
         col_away: '客场',
         cs_stake_required: '请至少在一个比分输入投注金额',
+        cs_confirm_title: '确认波胆下注',
+        cs_confirm_count: '共 {n} 注',
+        cs_confirm_total_stake: '总投注额',
         cs_place_success: '下注成功',
         cs_place_failed: '下注失败',
+        guide_title: '怎么下注？',
+        guide_help_aria: '查看下注说明',
+        guide_got_it: '知道了',
+        guide_flow_normal: '让球 / 大小 / 独赢等',
+        guide_normal_1: '点「展开玩法」打开赔率',
+        guide_normal_2: '点一项赔率选中（金边），再点同一项可取消',
+        guide_normal_3: '选中后在当前玩法底部点「确认下单」填金额并提交',
+        guide_flow_cs: '波胆（猜比分）',
+        guide_cs_1: '点「展开玩法」在表格里填各比分金额',
+        guide_cs_2: '填好金额后点该玩法底部「确认下单」，核对后提交',
+        guide_cs_3: '可一次填多个比分，会拆成多笔注单',
+        mode_cs_tag: '本页直接下注',
+        mode_slip_tag: '加入投注单',
+        cs_confirm_btn: '确认下注',
+        cs_confirm_cell: '确认下单',
+        cs_panel_hint: '在下方表格填写金额，填好后点上方「确认下注」',
+        slip_panel_hint: '点赔率加入投注单，选好后用页面底部入口打开投注单',
+        slip_pick_hint: '点选项加入投注单；金边表示已选，再点一次可取消',
+        picked_tag: '已选',
+        pick_added: '已加入投注单',
+        pick_removed: '已从投注单移除',
+        slip_bar_ready: '已选一项',
+        slip_bar_go: '投注单',
+        cs_top_hint: '① 在比分格填金额  ② 点上方「确认下注」',
+        slip_empty_hint: '点击赔率加入投注单',
+        slip_remove: '移除',
+        slip_singles_hint: '共 {n} 笔单关（串关请用「串关投注」页）',
+        slip_stake_per_bet: '每笔投注金额',
+        slip_est_return: '预计总返还',
+        slip_parlay_odds: '组合赔率 {odds}',
+        place_success: '下注成功',
+        place_failed: '下注失败',
       },
       profile: {
         edit: '修改资料',
@@ -168,6 +208,11 @@ const i18n = createI18n({
         outright_success: 'Bet placed',
         outright_done: 'Done',
         outright_bet_failed: 'Bet failed',
+        outright_insufficient: 'Insufficient balance',
+        stake_label: 'Stake',
+        stake_placeholder: 'Enter amount',
+        stake_max: 'Max',
+        placing: 'Placing…',
         no_outright: 'No outright markets',
         cancel: 'Cancel',
         parlay_title: 'Parlay',
@@ -197,8 +242,43 @@ const i18n = createI18n({
         col_draw: 'Draw',
         col_away: 'Away',
         cs_stake_required: 'Enter stake on at least one score',
+        cs_confirm_title: 'Confirm correct score bets',
+        cs_confirm_count: '{n} bet(s)',
+        cs_confirm_total_stake: 'Total stake',
         cs_place_success: 'Bet placed',
         cs_place_failed: 'Bet failed',
+        guide_title: 'How to bet',
+        guide_help_aria: 'Betting help',
+        guide_got_it: 'Got it',
+        guide_flow_normal: 'Handicap / O-U / 1X2 etc.',
+        guide_normal_1: 'Tap Expand to show odds',
+        guide_normal_2: 'Tap one odds to select (gold border); tap again to cancel',
+        guide_normal_3: 'Tap Place order under that market, enter stake and confirm',
+        guide_flow_cs: 'Correct score',
+        guide_cs_1: 'Expand and enter stake on each score',
+        guide_cs_2: 'Enter stakes, then tap Place order at the bottom of that market',
+        guide_cs_3: 'Multiple scores = multiple bets',
+        mode_cs_tag: 'Bet here',
+        mode_slip_tag: 'Add to slip',
+        cs_confirm_btn: 'Confirm bet',
+        cs_confirm_cell: 'Place order',
+        cs_panel_hint: 'Enter stakes below, then tap Confirm bet above',
+        slip_panel_hint: 'Tap odds to add; use the bottom bar when done',
+        slip_pick_hint: 'Tap to add/remove from slip; gold border = selected',
+        picked_tag: 'Selected',
+        pick_added: 'Added to bet slip',
+        pick_removed: 'Removed from bet slip',
+        slip_bar_ready: '1 selection',
+        slip_bar_go: 'Bet slip',
+        cs_top_hint: '① Enter stake  ② Tap Confirm bet above',
+        slip_empty_hint: 'Tap odds to add to bet slip',
+        slip_remove: 'Remove',
+        slip_singles_hint: '{n} single bet(s). Use Parlay tab for parlays.',
+        slip_stake_per_bet: 'Stake per bet',
+        slip_est_return: 'Est. total return',
+        slip_parlay_odds: 'Combined odds {odds}',
+        place_success: 'Bet placed',
+        place_failed: 'Bet failed',
       },
       profile: {
         edit: 'Edit Profile',
@@ -281,6 +361,11 @@ const i18n = createI18n({
         outright_success: 'Pertaruhan berjaya',
         outright_done: 'Selesai',
         outright_bet_failed: 'Pertaruhan gagal',
+        outright_insufficient: 'Baki tidak mencukupi',
+        stake_label: 'Jumlah',
+        stake_placeholder: 'Masukkan jumlah',
+        stake_max: 'Maks',
+        placing: 'Memproses…',
         no_outright: 'Tiada pasaran juara',
         cancel: 'Batal',
         parlay_title: 'Pertaruhan Berganda',
@@ -310,8 +395,43 @@ const i18n = createI18n({
         col_draw: 'Seri',
         col_away: 'Away',
         cs_stake_required: 'Masukkan jumlah pada sekurang-kurangnya satu skor',
+        cs_confirm_title: 'Sahkan pertaruhan skor tepat',
+        cs_confirm_count: '{n} pertaruhan',
+        cs_confirm_total_stake: 'Jumlah pertaruhan',
         cs_place_success: 'Pertaruhan berjaya',
         cs_place_failed: 'Pertaruhan gagal',
+        guide_title: 'Cara pertaruhan',
+        guide_help_aria: 'Bantuan pertaruhan',
+        guide_got_it: 'Faham',
+        guide_flow_normal: 'Handicap / O-U / 1X2',
+        guide_normal_1: 'Ketik Kembang untuk lihat odds',
+        guide_normal_2: 'Pilih satu odds (sisi emas); ketik lagi untuk batal',
+        guide_normal_3: 'Ketik Sahkan pesanan di bawah pasaran, isi jumlah dan sahkan',
+        guide_flow_cs: 'Skor tepat',
+        guide_cs_1: 'Kembang dan isi jumlah setiap skor',
+        guide_cs_2: 'Isi jumlah, kemudian Sahkan pesanan di bawah pasaran itu',
+        guide_cs_3: 'Beberapa skor = beberapa pertaruhan',
+        mode_cs_tag: 'Pertaruhan di sini',
+        mode_slip_tag: 'Tambah ke slip',
+        cs_confirm_btn: 'Sahkan pertaruhan',
+        cs_confirm_cell: 'Sahkan pesanan',
+        cs_panel_hint: 'Isi jumlah di bawah, kemudian Sahkan di atas',
+        slip_panel_hint: 'Ketik odds; guna bar bawah apabila siap',
+        slip_pick_hint: 'Ketik untuk tambah/buang; sisi emas = dipilih',
+        picked_tag: 'Dipilih',
+        pick_added: 'Ditambah ke slip',
+        pick_removed: 'Dikeluarkan dari slip',
+        slip_bar_ready: '1 pilihan',
+        slip_bar_go: 'Buka slip',
+        cs_top_hint: '① Isi jumlah  ② Ketik Sahkan di atas',
+        slip_empty_hint: 'Ketik odds untuk tambah ke slip',
+        slip_remove: 'Buang',
+        slip_singles_hint: '{n} pertaruhan tunggal. Guna tab Berganda untuk parlay.',
+        slip_stake_per_bet: 'Jumlah setiap pertaruhan',
+        slip_est_return: 'Anggaran pulangan',
+        slip_parlay_odds: 'Odds gabungan {odds}',
+        place_success: 'Pertaruhan berjaya',
+        place_failed: 'Pertaruhan gagal',
       },
       profile: {
         edit: 'Edit Profil',

apps/player/src/stores/betSlip.ts

@@ -17,37 +17,40 @@ export const useBetSlipStore = defineStore('betSlip', () => {
   const mode = ref<'single' | 'parlay'>('single');
 
   const count = computed(() => items.value.length);
-  const isParlay = computed(() => items.value.length >= 2);
+  const isParlay = computed(() => mode.value === 'parlay' && items.value.length >= 2);
 
+  /** 球赛/详情页：仅单关，且投注单同时只能有 1 项 */
   function addItem(item: SlipItem) {
+    if (mode.value === 'parlay') items.value = [];
+    mode.value = 'single';
+
     const existing = items.value.findIndex(
       (i) => i.selectionId === item.selectionId,
     );
     if (existing >= 0) {
-      items.value.splice(existing, 1);
+      items.value = [];
-      if (items.value.length < 2) mode.value = 'single';
       return;
     }
-    items.value.push(item);
+    items.value = [item];
-    if (items.value.length >= 2) mode.value = 'parlay';
   }
 
-  /** 串关：同场只保留一个选项；再次点击已选项则取消 */
+  /** 串关页专用：跨场组合，同场只保留一个选项 */
   function addParlayLeg(item: SlipItem) {
+    if (mode.value === 'single') items.value = [];
+    mode.value = 'parlay';
+
     const samePick = items.value.findIndex((i) => i.selectionId === item.selectionId);
     if (samePick >= 0) {
       items.value.splice(samePick, 1);
-      if (items.value.length < 2) mode.value = 'single';
       return;
     }
     items.value = items.value.filter((i) => i.matchId !== item.matchId);
     items.value.push(item);
-    mode.value = items.value.length >= 2 ? 'parlay' : 'single';
   }
 
   function removeItem(selectionId: string) {
     items.value = items.value.filter((i) => i.selectionId !== selectionId);
-    if (items.value.length < 2) mode.value = 'single';
+    if (!items.value.length) mode.value = 'single';
   }
 
   function clear() {
@@ -59,13 +62,13 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     items.value.reduce((acc, i) => acc * i.odds, 1),
   );
 
-  const potentialReturn = computed(() =>
+  const potentialReturn = computed(() => {
-    mode.value === 'parlay'
+    if (!items.value.length) return 0;
-      ? stake.value * totalOdds.value
+    if (mode.value === 'parlay' && items.value.length >= 2) {
-      : items.value.length === 1
+      return stake.value * totalOdds.value;
-        ? stake.value * items.value[0].odds
+    }
-        : 0,
+    return stake.value * items.value[0].odds;
-  );
+  });
 
   const hasSameMatch = computed(() => {
     const matchIds = items.value.map((i) => i.matchId);

apps/player/src/utils/marketCatalog.ts

@@ -5,6 +5,18 @@ export const FEATURED_MARKET_TYPES = [
   'SH_CORRECT_SCORE',
 ] as const;
 
+/** 详情页统一列表顺序：波胆在前，其余玩法在后 */
+export const DETAIL_MARKET_TYPES = [
+  ...FEATURED_MARKET_TYPES,
+  'FT_HANDICAP',
+  'FT_OVER_UNDER',
+  'FT_1X2',
+  'FT_ODD_EVEN',
+  'HT_HANDICAP',
+  'HT_OVER_UNDER',
+  'HT_1X2',
+] as const;
+
 export const GRID_MARKET_TYPES = [
   'FT_HANDICAP',
   'FT_OVER_UNDER',

apps/player/src/views/MatchDetailView.vue

@@ -5,16 +5,15 @@ import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { useBetSlipStore } from '../stores/betSlip';
 import { teamFlagUrl } from '../utils/teamFlag';
-import {
+import { DETAIL_MARKET_TYPES, MARKET_I18N_KEY } from '../utils/marketCatalog';
-  FEATURED_MARKET_TYPES,
+import MatchBetGuide from '../components/match-detail/MatchBetGuide.vue';
-  GRID_MARKET_TYPES,
-  MARKET_I18N_KEY,
-} from '../utils/marketCatalog';
-import FeaturedMarketRow from '../components/match-detail/FeaturedMarketRow.vue';
 import MarketTypeTile from '../components/match-detail/MarketTypeTile.vue';
 import MarketSelectionsPanel from '../components/match-detail/MarketSelectionsPanel.vue';
 import CorrectScorePanel from '../components/match-detail/CorrectScorePanel.vue';
-import { isCorrectScoreMarket } from '../utils/correctScoreLayout';
+import CorrectScoreConfirmModal, {
+  type CsConfirmLine,
+} from '../components/match-detail/CorrectScoreConfirmModal.vue';
+import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
 
 const route = useRoute();
 const router = useRouter();
@@ -53,7 +52,8 @@ const expandedKey = ref<string | null>(null);
 const correctScoreStakes = ref<Record<string, number>>({});
 const placingCs = ref(false);
 const csMessage = ref('');
-
+const csConfirmOpen = ref(false);
+const csConfirmMarketType = ref<string | null>(null);
 const marketsByType = computed(() => {
   const map = new Map<string, Market>();
   for (const m of match.value?.markets ?? []) {
@@ -103,27 +103,57 @@ function closeMarket() {
   expandedKey.value = null;
 }
 
-function clearMarketSlip(marketType: string) {
+function toggleMarket(marketType: string) {
-  if (!match.value) return;
+  if (!marketsByType.value.has(marketType)) return;
-  const toRemove = slip.items.filter(
+  if (isExpanded(marketType)) closeMarket();
-    (i) => i.matchId === match.value!.id && i.marketType === marketType,
+  else openMarket(marketType);
-  );
-  for (const item of toRemove) slip.removeItem(item.selectionId);
-  if (isCorrectScoreMarket(marketType)) {
-    const market = marketsByType.value.get(marketType);
-    if (market) {
-      const next = { ...correctScoreStakes.value };
-      for (const s of market.selections) delete next[s.id];
-      correctScoreStakes.value = next;
-    }
-  }
-  if (expandedKey.value === expandKey(marketType)) expandedKey.value = null;
 }
 
 function genRequestId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
 }
 
+const csConfirmLines = computed((): CsConfirmLine[] => {
+  const marketType = csConfirmMarketType.value;
+  if (!marketType) return [];
+  const market = marketsByType.value.get(marketType);
+  if (!market) return [];
+  return market.selections
+    .filter((s) => (correctScoreStakes.value[s.id] ?? 0) > 0)
+    .map((s) => {
+      const parsed = parseScoreCode(s.selectionCode);
+      return {
+        scoreDisplay: parsed?.display ?? s.selectionName,
+        odds: s.odds,
+        stake: correctScoreStakes.value[s.id],
+      };
+    });
+});
+
+function openCorrectScoreConfirm(marketType: string) {
+  const market = marketsByType.value.get(marketType);
+  if (!market || !match.value) return;
+  const hasStake = market.selections.some((s) => (correctScoreStakes.value[s.id] ?? 0) > 0);
+  if (!hasStake) {
+    csMessage.value = t('bet.cs_stake_required');
+    return;
+  }
+  csMessage.value = '';
+  csConfirmMarketType.value = marketType;
+  csConfirmOpen.value = true;
+}
+
+function closeCorrectScoreConfirm() {
+  csConfirmOpen.value = false;
+}
+
+async function confirmCorrectScoreBets() {
+  const marketType = csConfirmMarketType.value;
+  if (!marketType) return;
+  csConfirmOpen.value = false;
+  await placeCorrectScoreBets(marketType);
+}
+
 async function placeCorrectScoreBets(marketType: string) {
   const market = marketsByType.value.get(marketType);
   if (!market || !match.value) return;
@@ -188,20 +218,37 @@ function toggleSelection(sel: Selection, market: Market) {
 function onPickSelection(selId: string, marketType: string) {
   const market = marketsByType.value.get(marketType);
   const sel = market?.selections.find((s) => s.id === selId);
-  if (market && sel) toggleSelection(sel, market);
+  if (!market || !sel) return;
+  toggleSelection(sel, market);
+}
+
+function openBetSlipDrawer() {
+  slip.openDrawer();
+}
+
+/** 当前玩法是否已选入投注单（单关、仅一项） */
+function hasSlipPickForMarket(marketType: string) {
+  if (!match.value || slip.mode !== 'single' || slip.items.length !== 1) return false;
+  const item = slip.items[0];
+  return item.matchId === match.value.id && item.marketType === marketType;
 }
 </script>
 
 <template>
   <div class="detail-page">
     <header class="toolbar">
-      <button type="button" class="btn-back btn-gold-outline" @click="router.back()">{{ t('bet.back') }}</button>
+      <button type="button" class="icon-btn" :aria-label="t('bet.back')" @click="router.back()">←</button>
-      <div class="toolbar-right">
+      <div class="toolbar-actions">
-        <button type="button" class="btn-tool btn-gold-outline" :aria-label="t('bet.refresh')" @click="loadMatch">
+        <MatchBetGuide />
+        <button
+          type="button"
+          class="icon-btn"
+          :aria-label="t('bet.refresh')"
+          :disabled="loading"
+          @click="loadMatch"
+        >
           ↻
         </button>
-        <button type="button" class="btn-tool btn-gold-outline" :aria-label="t('bet.download')">↓</button>
-        <span class="fifa-badge">FIFA</span>
       </div>
     </header>
 
@@ -210,65 +257,76 @@ function onPickSelection(selId: string, marketType: string) {
     <template v-else-if="match">
       <section class="match-hero">
         <p class="kickoff">{{ kickoff }}</p>
-        <div class="flags-row">
+        <div class="match-line">
-          <img v-if="homeFlag" :src="homeFlag" alt="" class="flag-lg" />
+          <img v-if="homeFlag" :src="homeFlag" alt="" class="flag" />
-          <span class="vs-pill">vs</span>
+          <div class="names">
-          <img v-if="awayFlag" :src="awayFlag" alt="" class="flag-lg" />
+            <span class="team">{{ match.homeTeamName }}</span>
-        </div>
+            <span class="vs">vs</span>
-        <div class="teams-row">
+            <span class="team">{{ match.awayTeamName }}</span>
-          <span class="team-name">{{ match.homeTeamName }}</span>
+          </div>
-          <span class="vs-text">VS</span>
+          <img v-if="awayFlag" :src="awayFlag" alt="" class="flag" />
-          <span class="team-name">{{ match.awayTeamName }}</span>
         </div>
       </section>
 
       <section class="markets-section">
-        <FeaturedMarketRow
+        <CorrectScoreConfirmModal
-          v-for="marketType in FEATURED_MARKET_TYPES"
+          :open="csConfirmOpen"
-          :key="marketType"
+          :market-label="csConfirmMarketType ? marketLabel(csConfirmMarketType) : ''"
-          :label="marketLabel(marketType)"
+          :home-team-name="match.homeTeamName"
-          :has-market="marketsByType.has(marketType)"
+          :away-team-name="match.awayTeamName"
-          :expanded="isExpanded(marketType)"
+          :lines="csConfirmLines"
-          :reward-active="marketsByType.has(marketType)"
+          :loading="placingCs"
-          @bet="isCorrectScoreMarket(marketType) ? placeCorrectScoreBets(marketType) : openMarket(marketType)"
+          @close="closeCorrectScoreConfirm"
-          @expand="openMarket(marketType)"
+          @confirm="confirmCorrectScoreBets"
-          @collapse="clearMarketSlip(marketType)"
+        />
-        >
-          <CorrectScorePanel
-            v-if="marketsByType.get(marketType) && isCorrectScoreMarket(marketType)"
-            :market-type="marketType"
-            :home-team-name="match.homeTeamName"
-            :away-team-name="match.awayTeamName"
-            :selections="marketsByType.get(marketType)!.selections"
-            v-model:stakes="correctScoreStakes"
-          />
-          <MarketSelectionsPanel
-            v-else-if="marketsByType.get(marketType)"
-            :selections="marketsByType.get(marketType)!.selections"
-            :is-selected="isSelected"
-            @pick="onPickSelection($event, marketType)"
-          />
-        </FeaturedMarketRow>
 
         <p v-if="csMessage" class="cs-toast">{{ csMessage }}</p>
 
-        <div class="market-grid">
+        <div class="market-list">
-          <template v-for="marketType in GRID_MARKET_TYPES" :key="marketType">
+          <div
+            v-for="marketType in DETAIL_MARKET_TYPES"
+            :key="marketType"
+            class="market-group"
+            :class="{ open: isExpanded(marketType) }"
+          >
             <MarketTypeTile
               :label="marketLabel(marketType)"
               :has-market="marketsByType.has(marketType)"
-              :active="isExpanded(marketType)"
+              :expanded="isExpanded(marketType)"
-              @expand="openMarket(marketType)"
+              @toggle="toggleMarket(marketType)"
-              @collapse="clearMarketSlip(marketType)"
             />
-            <MarketSelectionsPanel
+            <template v-if="isExpanded(marketType) && marketsByType.get(marketType)">
-              v-if="isExpanded(marketType) && marketsByType.get(marketType)"
+              <CorrectScorePanel
-              class="grid-panel"
+                v-if="isCorrectScoreMarket(marketType)"
-              :selections="marketsByType.get(marketType)!.selections"
+                :market-type="marketType"
-              :is-selected="isSelected"
+                :selections="marketsByType.get(marketType)!.selections"
-              @pick="onPickSelection($event, marketType)"
+                v-model:stakes="correctScoreStakes"
-            />
+              />
-          </template>
+              <button
+                v-if="isCorrectScoreMarket(marketType)"
+                type="button"
+                class="market-foot-btn"
+                @click="openCorrectScoreConfirm(marketType)"
+              >
+                {{ t('bet.cs_confirm_cell') }}
+              </button>
+              <MarketSelectionsPanel
+                v-else
+                compact
+                :selections="marketsByType.get(marketType)!.selections"
+                :is-selected="isSelected"
+                @pick="onPickSelection($event, marketType)"
+              />
+              <button
+                v-if="!isCorrectScoreMarket(marketType) && hasSlipPickForMarket(marketType)"
+                type="button"
+                class="market-foot-btn"
+                @click="openBetSlipDrawer"
+              >
+                {{ t('bet.cs_confirm_cell') }}
+              </button>
+            </template>
+          </div>
         </div>
       </section>
     </template>
@@ -278,120 +336,110 @@ function onPickSelection(selId: string, marketType: string) {
 <style scoped>
 .detail-page {
   margin: 0 -16px;
-  padding-bottom: 24px;
+  padding-bottom: 16px;
 }
 
 .toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 8px 12px 12px;
+  padding: 4px 12px 8px;
-  gap: 12px;
+  gap: 8px;
 }
 
-.btn-back {
+.toolbar-actions {
-  padding: 8px 16px;
+  display: flex;
-  border-radius: 6px;
+  align-items: center;
-  font-size: 14px;
+  gap: 6px;
 }
 
-.toolbar-right {
+.icon-btn {
+  flex-shrink: 0;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--primary-light);
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 1;
+  padding: 0;
+}
+
+.icon-btn:disabled {
+  opacity: 0.45;
+}
+
+.match-hero {
+  padding: 2px 12px 10px;
+}
+
+.kickoff {
+  font-size: 11px;
+  color: var(--text-muted);
+  text-align: center;
+  margin-bottom: 6px;
+}
+
+.match-line {
   display: flex;
   align-items: center;
   gap: 8px;
 }
 
-.btn-tool {
+.flag {
   width: 36px;
-  height: 36px;
+  height: 24px;
-  border-radius: 6px;
-  font-size: 18px;
-  line-height: 1;
-}
-
-.fifa-badge {
-  font-size: 10px;
-  font-weight: 800;
-  letter-spacing: 0.1em;
-  color: var(--text-muted);
-  margin-left: 4px;
-}
-
-.match-hero {
-  text-align: center;
-  padding: 8px 16px 20px;
-}
-
-.kickoff {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--primary-light);
-  margin-bottom: 14px;
-}
-
-.flags-row {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
-  margin-bottom: 12px;
-}
-
-.flag-lg {
-  width: 72px;
-  height: 48px;
   object-fit: cover;
-  border-radius: 4px;
+  border-radius: 2px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  flex-shrink: 0;
 }
 
-.vs-pill {
+.names {
-  font-size: 12px;
+  flex: 1;
-  font-weight: 800;
+  min-width: 0;
-  color: var(--text-muted);
+  text-align: center;
-  text-transform: lowercase;
+  line-height: 1.35;
 }
 
-.teams-row {
+.team {
-  display: flex;
+  display: block;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.team-name {
-  font-size: 22px;
-  font-weight: 900;
-  color: var(--primary-light);
-  letter-spacing: 0.04em;
-}
-
-.vs-text {
   font-size: 14px;
   font-weight: 800;
+  color: var(--primary-light);
+}
+
+.vs {
+  font-size: 10px;
   color: var(--text-muted);
 }
 
 .markets-section {
-  padding: 0 12px;
+  padding: 0 10px 8px;
 }
 
-.market-grid {
+.market-list {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 8px;
-  margin-top: 6px;
-}
-
-.grid-panel {
-  grid-column: 1 / -1;
-  margin-top: -4px;
-  margin-bottom: 4px;
-  padding: 0 4px 8px;
-  background: #101010;
   border-radius: 6px;
-  border: 1px solid #2a2a2a;
+  overflow: hidden;
+  background: #111;
+}
+
+.market-group + .market-group {
+  border-top: 1px solid #252525;
+}
+
+.market-foot-btn {
+  display: block;
+  width: calc(100% - 16px);
+  margin: 0 8px 10px;
+  padding: 9px;
+  border-radius: 4px;
+  border: 1px solid var(--border-gold-soft);
+  background: rgba(212, 175, 55, 0.1);
+  color: var(--primary-light);
+  font-size: 13px;
+  font-weight: 800;
 }
 
 .state {
@@ -402,9 +450,9 @@ function onPickSelection(selId: string, marketType: string) {
 
 .cs-toast {
   text-align: center;
-  font-size: 13px;
+  font-size: 12px;
-  font-weight: 700;
   color: var(--primary-light);
-  padding: 4px 12px 8px;
+  padding: 2px 0 6px;
 }
+
 </style>