feat: multi-tier agent hierarchy, wallet ledger, and player UX polish

Add configurable agent max level and default sub-agent credit ratio, per-agent block direct player login on suspend, admin/agent wallet transaction views, and match detail my-bets section with refreshed player card styling. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-10 16:15:34 +08:00
parent 641c92a5f5
commit ef6b15f119
39 changed files with 2398 additions and 410 deletions
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -1,8 +1,12 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import MatchBetCard from './MatchBetCard.vue';
 import saishiImg from '../assets/images/saishi.png';
+import cardBg from '../assets/images/card-bg.png';

-defineProps<{
+const matchCardBg = `url(${cardBg})`;
+
+const props = defineProps<{
  leagueId: string;
  leagueName: string;
  leagueLogoUrl?: string | null;
@@ -28,6 +32,10 @@ defineProps<{
 }>();

 const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
+
+const totalCount = computed(() => props.matches.length);
+const liveCount = computed(() => props.matches.filter(m => m.matchPhase === 'closed_pending').length);
+const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'open').length);
 </script>

 <template>
@@ -36,7 +44,14 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
      <span class="toggle-icon" :class="{ open: expanded }" aria-hidden="true">
        <span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
      </span>
-      <span class="league-title">*{{ leagueName }}</span>
+      <span class="league-info">
+        <span class="league-title">*{{ leagueName }}</span>
+        <span class="league-stats">
+          <span class="stat-item">{{ totalCount }}场</span>
+          <span v-if="liveCount > 0" class="stat-item stat-live">{{ liveCount }}进行中</span>
+          <span v-if="openCount > 0" class="stat-item stat-open">{{ openCount }}待开赛</span>
+        </span>
+      </span>
      <img
        :src="leagueLogoUrl || saishiImg"
        alt=""
@@ -59,19 +74,23 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();

 <style scoped>
 .league-block {
-  margin-bottom: 10px;
-  border: 1px solid #2e2e2e;
-  border-radius: 6px;
+  position: relative;
+  isolation: isolate;
+  margin-bottom: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
  overflow: hidden;
-  background: #141414;
 }

 .league-row {
+  position: relative;
+  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
-  padding: 12px 12px;
+  padding: 12px 16px;
  background: none;
  border: none;
  border-radius: 0;
@@ -79,6 +98,16 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
  cursor: pointer;
 }

+.league-row::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(matchCardBg) center top / 100% auto no-repeat;
+  opacity: 0.25;
+  z-index: -1;
+  pointer-events: none;
+}
+
 .league-row:active {
  opacity: 0.92;
 }
@@ -103,15 +132,39 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
  margin-top: -1px;
 }

-.league-title {
+.league-info {
  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.league-title {
  font-size: 13px;
  font-weight: 800;
-  color: var(--primary-light);
+  color: #fff;
  line-height: 1.35;
  min-width: 0;
 }

+.league-stats {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: #ccc;
+  line-height: 1.2;
+}
+
+.stat-live {
+  color: #3db865;
+}
+
+.stat-open {
+  color: #c8a84e;
+}
+
 .league-saishi {
  flex-shrink: 0;
  height: 44px;
--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -2,8 +2,7 @@
 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';
+import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';

 const props = defineProps<{
  match: {
@@ -76,12 +75,9 @@ const liveScoreText = computed(() => {
    :class="{ 'match-card--phase': phase !== 'open' }"
    @click="emit('bet', match.id)"
  >
-    <StatusWatermark
-      v-if="phase !== 'open'"
-      :label="phaseLabel"
-      :variant="matchPhaseVariant(phase)"
-      size="sm"
-    />
+    <span v-if="phase === 'open'" class="status-tag status-tag--open">待开赛</span>
+    <span v-else-if="phase === 'settled'" class="status-tag status-tag--settled">{{ phaseLabel }}</span>
+    <span v-else class="status-tag status-tag--pending">{{ phaseLabel }}</span>

    <div class="teams-row">
      <div class="team">
@@ -127,8 +123,8 @@ const liveScoreText = computed(() => {
 <style scoped>
 .match-card {
  position: relative;
-  background: #0d0d0d;
-  border: 1px solid rgba(255, 215, 0, 0.25);
+  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  border: 1px solid rgba(140, 140, 140, 0.35);
  border-radius: 6px;
  padding: 10px 8px 10px;
  display: flex;
@@ -140,8 +136,17 @@ const liveScoreText = computed(() => {
  cursor: pointer;
 }

+.match-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
 .match-card--phase {
-  border-color: rgba(140, 140, 140, 0.35);
+  /* inherits base dark style */
 }

 .teams-row {
@@ -170,7 +175,7 @@ const liveScoreText = computed(() => {
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
-  color: var(--primary-light);
+  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
  word-break: break-word;
@@ -210,7 +215,7 @@ const liveScoreText = computed(() => {
 .kickoff {
  font-size: 13px;
  font-weight: 700;
-  color: #b0a060;
+  color: #fff;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
@@ -233,6 +238,40 @@ const liveScoreText = computed(() => {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
 }

+.status-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 3;
+  font-size: 10px;
+  font-weight: 800;
+  padding: 3px 10px;
+  border-radius: 0 6px 0 8px;
+  line-height: 1.3;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.status-tag--open {
+  background: linear-gradient(135deg, #e8c84a, #d4a017);
+  color: #1a1a1a;
+  box-shadow: 0 2px 6px rgba(212, 160, 23, 0.4);
+}
+
+.status-tag--settled {
+  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
+  color: #8a9ab8;
+  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
+  border-left: 1px solid rgba(120, 140, 180, 0.3);
+}
+
+.status-tag--pending {
+  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
+  color: #c8a84e;
+  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
+  border-left: 1px solid rgba(200, 168, 78, 0.3);
+}
+
 .bet-btn {
  position: relative;
  z-index: 2;
--- a/apps/player/src/components/StatusWatermark.vue
+++ b/apps/player/src/components/StatusWatermark.vue
@@ -27,7 +27,7 @@ withDefaults(
  max-width: 92%;
  overflow: hidden;
  text-overflow: ellipsis;
-  z-index: 1;
+  z-index: 100;
 }

 .status-watermark.sm {
--- a/apps/player/src/components/outright/OutrightEventSection.vue
+++ b/apps/player/src/components/outright/OutrightEventSection.vue
@@ -3,6 +3,9 @@ import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import OutrightOptionCard from './OutrightOptionCard.vue';
 import saishiImg from '../../assets/images/saishi.png';
+import cardBg from '../../assets/images/card-bg.png';
+
+const matchCardBg = `url(${cardBg})`;

 export interface OutrightSelection {
  id: string;
@@ -80,22 +83,38 @@ const headMeta = computed(() => {

 <style scoped>
 .event-block {
-  margin-bottom: 10px;
-  border: 1px solid #2e2e2e;
-  border-radius: 6px;
+  position: relative;
+  isolation: isolate;
+  margin-bottom: 12px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
  overflow: hidden;
 }

 .event-head {
+  position: relative;
+  z-index: 1;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
-  padding: 12px 10px;
-  background: #141414;
+  padding: 12px 16px;
+  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
+  cursor: pointer;
+}
+
+.event-head::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(matchCardBg) center top / 100% auto no-repeat;
+  opacity: 0.25;
+  z-index: -1;
+  pointer-events: none;
 }

 .toggle-icon {
--- a/apps/player/src/components/outright/OutrightOptionCard.vue
+++ b/apps/player/src/components/outright/OutrightOptionCard.vue
@@ -72,21 +72,30 @@ onUnmounted(() => {

 <style scoped>
 .option-card {
+  position: relative;
  width: 100%;
  min-width: 0;
  padding: 8px 4px 6px;
  border-radius: 6px;
-  background: #1c1c1c;
-  border: 1px solid #333;
+  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  border: 1px solid rgba(140, 140, 140, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
+  overflow: hidden;
+}
+
+.option-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
+  pointer-events: none;
 }

 .option-card:active {
-  background: #252525;
  border-color: var(--border-gold-soft);
 }

--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -8,8 +8,10 @@ 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 cardBg from '../../assets/images/card-bg.png';
+import { matchPhaseLabel, type MatchPhase } from '../../utils/matchPhase';
+
+const matchCardBg = `url(${cardBg})`;
 import { useOnLocaleChange } from '../../composables/useOnLocaleChange';

 type TimeFilter = 'all' | 'today';
@@ -301,18 +303,22 @@ function toggleCollapse(id: string) {
        }"
      >
        <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"
-          />
+          <span
+            v-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) === 'settled'"
+            class="status-tag status-tag--settled"
+          >{{ matchPhaseLabel(t, 'settled') }}</span>
+          <span
+            v-else-if="(match.matchPhase ?? (match.bettingOpen === false ? 'closed_pending' : 'open')) === 'closed_pending'"
+            class="status-tag status-tag--pending"
+          >{{ matchPhaseLabel(t, 'closed_pending') }}</span>
+
          <div class="match-head-top">
-            <span class="m-league">{{ match.leagueName }}</span>
-            <span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">
-              {{ collapsed.has(match.id) ? '+' : '−' }}
+            <span class="toggle-icon" :class="{ open: !collapsed.has(match.id) }" aria-hidden="true">
+              <span class="toggle-mark">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
            </span>
+            <span class="m-league">{{ match.leagueName }}</span>
          </div>
+
          <div class="match-head-teams">
            <div class="m-team home">
              <TeamEmblem
@@ -331,7 +337,6 @@ function toggleCollapse(id: string) {
                {{ 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">
              <span class="m-name">{{ match.awayTeamName }}</span>
@@ -491,25 +496,36 @@ function toggleCollapse(id: string) {
 }

 .match-card {
-  background: #141414;
-  border: 1px solid #2a2a2a;
+  position: relative;
+  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
+  border: 1px solid rgba(140, 140, 140, 0.35);
  border-radius: 8px;
  overflow: hidden;
 }

+.match-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(135deg, rgba(100, 100, 100, 0.08) 0%, transparent 50%, rgba(80, 80, 80, 0.05) 100%);
+  pointer-events: none;
+  z-index: 0;
+}
+
 .match-card.collapsed {
  border-color: #222;
 }

 .match-head {
  position: relative;
+  z-index: 1;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
-  gap: 4px;
-  padding: 8px 10px;
+  gap: 8px;
+  padding: 10px 12px 12px;
  background: none;
  border: none;
  color: inherit;
@@ -518,6 +534,16 @@ function toggleCollapse(id: string) {
  text-align: left;
 }

+.match-head::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(matchCardBg) center top / 100% auto no-repeat;
+  opacity: 0.25;
+  z-index: -1;
+  pointer-events: none;
+}
+
 .match-head:active {
  background: rgba(255, 255, 255, 0.015);
 }
@@ -525,22 +551,22 @@ function toggleCollapse(id: string) {
 .match-head-top {
  display: flex;
  align-items: center;
-  justify-content: space-between;
+  gap: 8px;
  min-width: 0;
 }

-.match-head-teams {
+.toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
-  gap: 6px;
+  gap: 8px;
  min-width: 0;
 }

 .m-team {
  display: flex;
  align-items: center;
-  gap: 4px;
+  gap: 6px;
  flex: 1;
  min-width: 0;
 }
@@ -553,15 +579,15 @@ function toggleCollapse(id: string) {
  display: flex;
  flex-direction: column;
  align-items: center;
-  gap: 1px;
  flex-shrink: 0;
-  padding: 0 4px;
+  min-width: 50px;
+  padding: 0 2px;
 }

 .m-name {
-  font-size: 12px;
+  font-size: 13px;
  font-weight: 800;
-  color: var(--primary-light);
+  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -575,40 +601,45 @@ function toggleCollapse(id: string) {
 }

 .m-time {
-  font-size: 10px;
+  font-size: 11px;
+  font-weight: 600;
  color: var(--text-muted);
 }

-.toggle-dot {
+.toggle-icon {
  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
+  width: 26px;
+  height: 26px;
  border-radius: 50%;
-  background: #1a1a1a;
-  border: 1px solid #333;
+  background: #141414;
+  border: 1px solid var(--border-gold-soft);
  display: flex;
  align-items: center;
  justify-content: center;
-  font-size: 13px;
-  font-weight: 900;
-  color: #666;
-  line-height: 1;
-  transition: all 0.15s;
 }

-.toggle-dot.open {
+.toggle-icon.open {
  border-color: var(--border-gold-soft);
+}
+
+.toggle-mark {
  color: var(--primary-light);
+  font-size: 17px;
+  font-weight: 900;
+  line-height: 1;
+  margin-top: -1px;
 }

 .m-league {
-  font-size: 10px;
+  flex: 1;
+  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+  text-align: center;
 }

 .match-head :deep(.team-emblem) {
@@ -618,11 +649,13 @@ function toggleCollapse(id: string) {
 }

 .market-blocks {
+  position: relative;
+  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
-  border-top: 1px solid #1e1e1e;
+  border-top: 1px solid rgba(140, 140, 140, 0.15);
 }

 .market-group {
@@ -699,10 +732,39 @@ function toggleCollapse(id: string) {
  opacity: 0.94;
 }

-.m-score {
-  font-size: 12px;
+.status-tag {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 5;
+  font-size: 10px;
  font-weight: 800;
+  padding: 3px 10px;
+  border-radius: 0 6px 0 8px;
+  line-height: 1.3;
+  white-space: nowrap;
+  letter-spacing: 0.02em;
+}
+
+.status-tag--settled {
+  background: linear-gradient(180deg, #2a2a3a 0%, #1a1a28 100%);
+  color: #8a9ab8;
+  border-bottom: 1px solid rgba(120, 140, 180, 0.3);
+  border-left: 1px solid rgba(120, 140, 180, 0.3);
+}
+
+.status-tag--pending {
+  background: linear-gradient(180deg, #3a3a2a 0%, #28251a 100%);
+  color: #c8a84e;
+  border-bottom: 1px solid rgba(200, 168, 78, 0.3);
+  border-left: 1px solid rgba(200, 168, 78, 0.3);
+}
+
+.m-score {
+  font-size: 15px;
+  font-weight: 900;
  color: #fff;
+  letter-spacing: 0.04em;
 }

 .odd-label {
--- a/apps/player/src/main.ts
+++ b/apps/player/src/main.ts
@@ -49,6 +49,7 @@ const i18n = createI18n({
        back: '返回',
        not_found: '注单不存在',
        my_pick: '我的选择',
+        my_bets: '我的投注',
        legs: '串关明细',
        summary: '投注摘要',
        bet_no: '注单号',
@@ -358,6 +359,7 @@ const i18n = createI18n({
        back: 'Back',
        not_found: 'Bet not found',
        my_pick: 'My pick',
+        my_bets: 'My bets',
        legs: 'Parlay legs',
        summary: 'Summary',
        bet_no: 'Bet ID',
@@ -673,6 +675,7 @@ const i18n = createI18n({
        back: 'Kembali',
        not_found: 'Pertaruhan tidak dijumpai',
        my_pick: 'Pilihan saya',
+        my_bets: 'Pertaruhan saya',
        legs: 'Butiran berganda',
        summary: 'Ringkasan',
        bet_no: 'ID Pertaruhan',
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/apps/player/src/views/MatchDetailView.vue
@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
 import { useBetSlipStore } from '../stores/betSlip';
 import TeamEmblem from '../components/TeamEmblem.vue';
 import { DETAIL_MARKET_TYPES, MARKET_I18N_KEY } from '../utils/marketCatalog';
@@ -82,6 +83,53 @@ const csMessage = ref('');
 const showCsSuccess = ref(false);
 const csConfirmOpen = ref(false);
 const csConfirmMarketType = ref<string | null>(null);
+
+interface MyBet {
+  betNo: string;
+  betType: string;
+  stake: string;
+  totalOdds: string;
+  potentialReturn: string;
+  actualReturn: string;
+  status: string;
+  placedAt: string;
+  pickLabel: string;
+  matchTitle: string;
+}
+const myBets = ref<MyBet[]>([]);
+const loadingMyBets = ref(false);
+
+async function loadMyBets() {
+  if (!match.value) return;
+  loadingMyBets.value = true;
+  try {
+    const { data } = await api.get('/player/bets?page=1');
+    const items = (data.data?.items ?? data.data ?? []) as MyBet[];
+    const matchTitle = `${match.value.homeTeamName} vs ${match.value.awayTeamName}`;
+    myBets.value = items.filter(
+      (b) => b.matchTitle === matchTitle || b.matchTitle === `${match.value!.awayTeamName} vs ${match.value!.homeTeamName}`,
+    );
+  } catch {
+    myBets.value = [];
+  } finally {
+    loadingMyBets.value = false;
+  }
+}
+
+const statusLabel = (status: string) => {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return t('history.status_won');
+  if (s === 'LOST' || s === 'LOSE') return t('history.status_lost');
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return t('history.status_push');
+  return t('history.status_pending');
+};
+
+const statusClass = (status: string) => {
+  const s = status.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'bet-status-won';
+  if (s === 'LOST' || s === 'LOSE') return 'bet-status-lost';
+  return 'bet-status-pending';
+};
 const marketsByType = computed(() => {
  const map = new Map<string, Market>();
  for (const m of match.value?.markets ?? []) {
@@ -237,6 +285,7 @@ async function loadMatch() {
  } finally {
    loading.value = false;
  }
+  loadMyBets();
 }

 useOnLocaleChange(loadMatch);
@@ -384,6 +433,25 @@ function hasSlipPickForMarket(marketType: string) {
        <p v-if="liveScoreText" class="live-score">{{ liveScoreText }}</p>
      </section>

+      <!-- 我的投注 -->
+      <section v-if="myBets.length" class="my-bets-section">
+        <h3 class="my-bets-title">{{ t('history.my_bets') || '我的投注' }}</h3>
+        <div class="my-bets-list">
+          <div v-for="bet in myBets" :key="bet.betNo" class="my-bet-card" @click="router.push(`/bets/${bet.betNo}`)">
+            <div class="bet-header">
+              <span class="bet-type">{{ bet.betType === 'PARLAY' ? t('history.parlay_league') : bet.pickLabel }}</span>
+              <span class="bet-status" :class="statusClass(bet.status)">{{ statusLabel(bet.status) }}</span>
+            </div>
+            <div class="bet-footer">
+              <span class="bet-stake">{{ t('history.stake') }} {{ formatMoney(bet.stake, locale) }}</span>
+              <span class="bet-return" :class="statusClass(bet.status)">
+                {{ statusClass(bet.status) === 'bet-status-won' ? '+' : '' }}{{ formatMoney(bet.actualReturn || bet.potentialReturn, locale) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
      <section class="markets-section">
        <CorrectScoreConfirmModal
          :open="csConfirmOpen"
@@ -777,4 +845,93 @@ function hasSlipPickForMarket(marketType: string) {
  padding: 2px 0 6px;
 }

+/* ── 我的投注 ── */
+.my-bets-section {
+  padding: 0 12px;
+  margin-bottom: 12px;
+}
+
+.my-bets-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: #ccc;
+  margin: 0 0 8px;
+}
+
+.my-bets-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.my-bet-card {
+  background: #1c1c1c;
+  border: 1px solid #2e2e2e;
+  border-radius: 8px;
+  padding: 10px 12px;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+
+.my-bet-card:active {
+  background: #252525;
+}
+
+.bet-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.bet-type {
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  margin-right: 8px;
+}
+
+.bet-status {
+  font-size: 11px;
+  font-weight: 700;
+  padding: 2px 8px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.bet-status-won {
+  background: rgba(61, 184, 101, 0.15);
+  color: #3db865;
+}
+
+.bet-status-lost {
+  background: rgba(224, 80, 80, 0.15);
+  color: #e05050;
+}
+
+.bet-status-pending {
+  background: rgba(232, 200, 74, 0.15);
+  color: #e8c84a;
+}
+
+.bet-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.bet-stake {
+  font-size: 11px;
+  color: #888;
+}
+
+.bet-return {
+  font-size: 13px;
+  font-weight: 800;
+}
+
 </style>