From 178787e89aef02b02aad090d0ab02cc173ca4ad6 Mon Sep 17 00:00:00 2001
From: Mars <3361409208a@gmail.com>
Date: Tue, 30 Jun 2026 17:42:50 +0800
Subject: [PATCH] =?UTF-8?q?feat(player-desktop):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E6=B3=A8=E5=8D=95=E4=BE=A7=E6=A0=8F=E9=9D=A2=E6=9D=BF=E6=8A=98?=
 =?UTF-8?q?=E5=8F=A0=E3=80=81=E9=9A=90=E8=97=8F=E9=A6=96=E9=A1=B5=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E3=80=81=E9=BB=98=E8=AE=A4=E9=80=89=E4=B8=AD?=
 =?UTF-8?q?=E8=81=94=E8=B5=9B=E3=80=81=E4=B8=BB=E9=A1=B5=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E8=BF=91=E6=9C=9F=E7=83=AD=E9=97=A8=E5=BF=AB=E9=80=9F=E4=B8=8B?=
 =?UTF-8?q?=E6=B3=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/desktop/BetSlipPanel.vue   |  28 ++
 .../components/desktop/DesktopBetSlipRail.vue | 163 ++++++++
 .../src/components/desktop/DesktopShell.vue   |  30 +-
 .../src/components/desktop/LeagueSidebar.vue  |   4 +-
 apps/player/src/composables/usePlayerHome.ts  |  23 ++
 apps/player/src/stores/betSlip.ts             |  38 ++
 apps/player/src/styles/desktop/layout.css     |  30 +-
 apps/player/src/styles/desktop/tokens.css     |   7 +
 .../src/views/desktop/DesktopHomeView.vue     | 350 ++++++++++++++----
 9 files changed, 583 insertions(+), 90 deletions(-)
 create mode 100644 apps/player/src/components/desktop/DesktopBetSlipRail.vue

diff --git a/apps/player/src/components/desktop/BetSlipPanel.vue b/apps/player/src/components/desktop/BetSlipPanel.vue
index 6f364ec..a39bfc1 100644
--- a/apps/player/src/components/desktop/BetSlipPanel.vue
+++ b/apps/player/src/components/desktop/BetSlipPanel.vue
@@ -857,6 +857,16 @@ onUnmounted(() => {
   <div class="betslip-panel">
     <div class="panel-head">
       <h3>{{ t('bet.bet_slip') || '投注单' }}</h3>
+      <button
+        type="button"
+        class="panel-close-btn"
+        @click="slip.collapsePanel()"
+        :aria-label="t('common.collapse') || '折叠'"
+      >
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
+          <path d="M13 17l5-5-5-5M6 17l5-5-5-5" stroke-linecap="round" stroke-linejoin="round"/>
+        </svg>
+      </button>
     </div>
 
     <div class="panel-tabs">
@@ -1173,6 +1183,24 @@ onUnmounted(() => {
   color: var(--primary-light);
 }
 
+.panel-close-btn {
+  border: none;
+  background: transparent;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+  transition: background 0.2s, color 0.2s;
+}
+
+.panel-close-btn:hover {
+  background: var(--bg-hover);
+  color: var(--primary);
+}
+
 .clear-slip-btn {
   background: transparent;
   border: 1px solid var(--border);
diff --git a/apps/player/src/components/desktop/DesktopBetSlipRail.vue b/apps/player/src/components/desktop/DesktopBetSlipRail.vue
new file mode 100644
index 0000000..6ba9a76
--- /dev/null
+++ b/apps/player/src/components/desktop/DesktopBetSlipRail.vue
@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import BetSlipPanel from './BetSlipPanel.vue';
+import { useBetSlipStore } from '../../stores/betSlip';
+
+const { t } = useI18n();
+const slip = useBetSlipStore();
+
+watch(
+  () => slip.totalCount,
+  (next, prev) => {
+    if (next > prev) slip.expandPanel();
+  },
+);
+</script>
+
+<template>
+  <aside
+    class="desktop-betslip-rail"
+    :class="{ 'is-collapsed': !slip.panelExpanded }"
+    :aria-expanded="slip.panelExpanded"
+  >
+
+
+    <button
+      v-if="!slip.panelExpanded"
+      type="button"
+      class="rail-collapsed-hint"
+      :aria-label="t('bet.bet_slip')"
+      @click="slip.expandPanel()"
+    >
+      <span v-if="slip.totalCount" class="rail-badge">{{ slip.totalCount > 99 ? '99+' : slip.totalCount }}</span>
+      <span class="rail-label">{{ t('bet.bet_slip') }}</span>
+    </button>
+
+    <div class="rail-content" :hidden="!slip.panelExpanded">
+      <BetSlipPanel />
+    </div>
+  </aside>
+</template>
+
+<style scoped>
+.desktop-betslip-rail {
+  position: relative;
+  flex-shrink: 0;
+  width: var(--desktop-right-betslip-w);
+  min-width: 0;
+  border-left: 1px solid var(--border);
+  background: var(--bg-card);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow: visible;
+}
+
+.rail-toggle {
+  position: absolute;
+  left: -18px;
+  top: 50%;
+  z-index: 30;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 50%;
+  background: var(--bg-card);
+  color: var(--primary-light);
+  cursor: pointer;
+  display: grid;
+  place-items: center;
+  transform: translateY(-50%);
+  box-shadow:
+    0 2px 10px rgba(0, 0, 0, 0.5),
+    0 0 0 3px rgba(20, 20, 20, 0.92);
+  transition:
+    transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
+    background 0.2s,
+    color 0.2s,
+    border-color 0.2s,
+    box-shadow 0.2s;
+}
+
+.rail-toggle-icon {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.rail-toggle.is-collapsed .rail-toggle-icon {
+  transform: rotate(180deg);
+}
+
+.rail-toggle:hover {
+  border-color: var(--border-gold);
+  background: var(--primary);
+  color: #111;
+  box-shadow:
+    0 4px 14px rgba(0, 0, 0, 0.6),
+    0 0 0 3px rgba(212, 175, 55, 0.15);
+}
+
+.rail-toggle:active {
+  transform: translateY(-50%) scale(0.94);
+}
+
+.rail-toggle:focus-visible {
+  outline: 2px solid var(--border-gold);
+  outline-offset: 2px;
+}
+
+.rail-content {
+  flex: 1;
+  min-height: 0;
+  width: var(--desktop-right-betslip-expanded-w, 288px);
+  overflow: hidden;
+}
+
+.desktop-betslip-rail.is-collapsed .rail-content {
+  visibility: hidden;
+}
+
+.rail-collapsed-hint {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  padding: 16px 0;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.rail-collapsed-hint:hover {
+  background: var(--bg-hover);
+}
+
+.rail-label {
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary);
+  letter-spacing: 0.12em;
+}
+
+.rail-badge {
+  min-width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 10px;
+  background: var(--primary, #D4AF37);
+  color: #111;
+  font-size: 10px;
+  font-weight: 800;
+  line-height: 20px;
+  text-align: center;
+}
+</style>
diff --git a/apps/player/src/components/desktop/DesktopShell.vue b/apps/player/src/components/desktop/DesktopShell.vue
index 1ed6b87..3e7d9e3 100644
--- a/apps/player/src/components/desktop/DesktopShell.vue
+++ b/apps/player/src/components/desktop/DesktopShell.vue
@@ -7,16 +7,28 @@ import DesktopOddsBetPopover from './DesktopOddsBetPopover.vue';
 import SportsCategoryBar from './SportsCategoryBar.vue';
 import LeagueSidebar from './LeagueSidebar.vue';
 import MatchSidebar from './MatchSidebar.vue';
-import BetSlipPanel from './BetSlipPanel.vue';
+import DesktopBetSlipRail from './DesktopBetSlipRail.vue';
 import FloatingMailbox from '../FloatingMailbox.vue';
 import { usePlayerHome } from '../../composables/usePlayerHome';
 import { useAuthStore } from '../../stores/auth';
+import { useBetSlipStore } from '../../stores/betSlip';
 
 const route = useRoute();
 const { locale } = useI18n();
 const auth = useAuthStore();
+const slip = useBetSlipStore();
 const { load: loadPlayerHome } = usePlayerHome();
 
+const showBetSlipRail = computed(() => {
+  const p = route.path;
+  if (p === '/bets' || p.startsWith('/bets/')) return false;
+  if (p.startsWith('/wallet') || p.startsWith('/profile')) return false;
+  if (route.params.id && (p.startsWith('/announcements/') || p.startsWith('/messages/'))) {
+    return false;
+  }
+  return true;
+});
+
 const layoutMode = computed<'betting' | 'account' | 'hub' | 'marketing'>(() => {
   const p = route.path;
   if (p === '/bet' || p.startsWith('/match/') || p.startsWith('/outright/')) {
@@ -61,11 +73,18 @@ watch(
 </script>
 
 <template>
-  <div class="desktop-shell">
+  <div
+    class="desktop-shell"
+    :class="{
+      'betslip-collapsed': showBetSlipRail && !slip.panelExpanded,
+      'betslip-hidden': !showBetSlipRail,
+    }"
+  >
     <header class="desktop-header-wrap">
       <DesktopTopNav />
     </header>
 
+    <div class="desktop-body">
     <div class="desktop-main-container">
       <!-- Betting Layout -->
       <div v-if="layoutMode === 'betting'" class="desktop-layout-betting-wrap">
@@ -85,9 +104,6 @@ watch(
               <component v-else :is="Component" :key="viewRoute.fullPath" />
             </RouterView>
           </main>
-          <aside class="desktop-betting-right">
-            <BetSlipPanel />
-          </aside>
         </div>
       </div>
 
@@ -114,7 +130,7 @@ watch(
       </div>
 
       <!-- Marketing/Single Column Layout -->
-      <div v-else class="desktop-layout-marketing">
+      <div v-else class="desktop-layout-marketing no-scrollbar">
         <main class="desktop-marketing-content">
           <RouterView v-slot="{ Component, route: viewRoute }">
             <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">
@@ -125,6 +141,8 @@ watch(
         </main>
       </div>
     </div>
+    <DesktopBetSlipRail v-if="showBetSlipRail" />
+    </div>
     <FloatingMailbox />
     <DesktopOddsBetPopover />
   </div>
diff --git a/apps/player/src/components/desktop/LeagueSidebar.vue b/apps/player/src/components/desktop/LeagueSidebar.vue
index fec7edf..41dbd7a 100644
--- a/apps/player/src/components/desktop/LeagueSidebar.vue
+++ b/apps/player/src/components/desktop/LeagueSidebar.vue
@@ -62,7 +62,9 @@ const availableLeagues = computed(() => {
   return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
 });
 
-const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(leagueId);
+const isSelected = (leagueId: string) => {
+  return filterState.value.leagueIds.length === 0 || filterState.value.leagueIds.includes(leagueId);
+};
 </script>
 
 <template>
diff --git a/apps/player/src/composables/usePlayerHome.ts b/apps/player/src/composables/usePlayerHome.ts
index fdcf5aa..1329afd 100644
--- a/apps/player/src/composables/usePlayerHome.ts
+++ b/apps/player/src/composables/usePlayerHome.ts
@@ -6,6 +6,27 @@ import { resolveBanners } from '../constants/defaultBanner';
 import { resolveAnnouncements } from '../constants/defaultAnnouncement';
 import { stripHtml } from '../utils/html';
 
+export interface PlayerHomeMatchSelection {
+  id: string;
+  selectionCode?: string;
+  selectionName: string;
+  selectionDisplayName?: string;
+  odds: string;
+  status?: string;
+  oddsVersion?: string;
+}
+
+export interface PlayerHomeMatchMarket {
+  id: string;
+  marketType: string;
+  marketDisplayName?: string;
+  lineValue?: number | null;
+  status: string;
+  allowSingle?: boolean;
+  allowParlay?: boolean;
+  selections: PlayerHomeMatchSelection[];
+}
+
 export interface PlayerHomeMatch {
   id: string;
   leagueName?: string;
@@ -19,6 +40,8 @@ export interface PlayerHomeMatch {
   startTime: string;
   isHot?: boolean;
   displayOrder?: number;
+  bettingOpen?: boolean;
+  markets?: PlayerHomeMatchMarket[];
 }
 
 export interface PlayerContentItem {
diff --git a/apps/player/src/stores/betSlip.ts b/apps/player/src/stores/betSlip.ts
index 4470346..f30aac6 100644
--- a/apps/player/src/stores/betSlip.ts
+++ b/apps/player/src/stores/betSlip.ts
@@ -27,6 +27,23 @@ export type SlipMode = 'single' | 'parlay';
 export type ParlaySlipError = ParlayRejectReason | 'MAX_LEGS' | 'SAME_MATCH';
 
 const BET_SLIP_STORAGE_PREFIX = 'player:betSlip:v1';
+const DESKTOP_PANEL_EXPANDED_KEY = 'player:desktopBetSlipExpanded:v1';
+
+function readDesktopPanelExpanded() {
+  try {
+    return localStorage.getItem(DESKTOP_PANEL_EXPANDED_KEY) !== '0';
+  } catch {
+    return true;
+  }
+}
+
+function writeDesktopPanelExpanded(expanded: boolean) {
+  try {
+    localStorage.setItem(DESKTOP_PANEL_EXPANDED_KEY, expanded ? '1' : '0');
+  } catch {
+    // ignore quota / private mode errors
+  }
+}
 
 interface BetSlipPersisted {
   singleItem: SlipItem | null;
@@ -370,6 +387,11 @@ export const useBetSlipStore = defineStore('betSlip', () => {
   );
 
   const drawerOpen = ref(false);
+  const panelExpanded = ref(readDesktopPanelExpanded());
+
+  watch(panelExpanded, (expanded) => {
+    writeDesktopPanelExpanded(expanded);
+  });
 
   function openDrawer() {
     drawerOpen.value = true;
@@ -379,6 +401,18 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     drawerOpen.value = false;
   }
 
+  function expandPanel() {
+    panelExpanded.value = true;
+  }
+
+  function collapsePanel() {
+    panelExpanded.value = false;
+  }
+
+  function togglePanelExpanded() {
+    panelExpanded.value = !panelExpanded.value;
+  }
+
   function updateSelectionOdds(selectionId: string, odds: number, oddsVersion: string) {
     if (singleItem.value?.selectionId === selectionId) {
       singleItem.value = { ...singleItem.value, odds, oddsVersion };
@@ -414,6 +448,7 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     canSubmit,
     lastParlayError,
     drawerOpen,
+    panelExpanded,
     setMode,
     setSingleItem,
     addItem,
@@ -428,6 +463,9 @@ export const useBetSlipStore = defineStore('betSlip', () => {
     clearAll,
     openDrawer,
     closeDrawer,
+    expandPanel,
+    collapsePanel,
+    togglePanelExpanded,
     updateSelectionOdds,
     getItemStake,
     setItemStake,
diff --git a/apps/player/src/styles/desktop/layout.css b/apps/player/src/styles/desktop/layout.css
index 89a0b9b..7af9827 100644
--- a/apps/player/src/styles/desktop/layout.css
+++ b/apps/player/src/styles/desktop/layout.css
@@ -31,10 +31,26 @@
   background: #111;
 }
 
+.desktop-shell.betslip-hidden {
+  --desktop-right-betslip-w: 0px;
+}
+
+.desktop-shell.betslip-collapsed {
+  --desktop-right-betslip-w: var(--desktop-right-betslip-collapsed-w);
+}
+
+.desktop-body {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+
 .desktop-main-container {
   flex: 1;
   display: flex;
   min-height: 0;
+  min-width: 0;
   overflow: hidden;
   position: relative;
 }
@@ -58,7 +74,7 @@
 
 .desktop-layout-betting {
   display: grid;
-  grid-template-columns: var(--desktop-left-sidebar-w) 1fr var(--desktop-right-betslip-w);
+  grid-template-columns: var(--desktop-left-sidebar-w) 1fr;
   flex: 1;
   width: 100%;
   min-height: 0;
@@ -80,12 +96,6 @@
   padding: 0;
 }
 
-.desktop-betting-right {
-  border-left: 1px solid var(--border);
-  background: rgba(14, 14, 14, 0.85);
-  overflow-y: auto;
-}
-
 /* Account Layout: full-width records center */
 .desktop-layout-account {
   display: flex;
@@ -133,6 +143,12 @@
   overflow-y: auto;
   align-items: center;
   padding: 20px;
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.desktop-layout-marketing::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, Opera */
 }
 
 .desktop-marketing-content {
diff --git a/apps/player/src/styles/desktop/tokens.css b/apps/player/src/styles/desktop/tokens.css
index 3e34b5f..e8ffcc2 100644
--- a/apps/player/src/styles/desktop/tokens.css
+++ b/apps/player/src/styles/desktop/tokens.css
@@ -28,6 +28,13 @@
   --desktop-header-h: 56px;
   --desktop-left-sidebar-w: 220px;
   --desktop-right-betslip-w: 288px;
+  --desktop-right-betslip-expanded-w: 288px;
+  --desktop-right-betslip-collapsed-w: 40px;
+
+  /* Desktop specific added vars */
+  --desktop-bg: #050505;
+  --desktop-border: #262626;
+  --desktop-sidebar-bg: rgba(20, 20, 20, 0.95);
   
   /* Reset typography inside desktop */
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
diff --git a/apps/player/src/views/desktop/DesktopHomeView.vue b/apps/player/src/views/desktop/DesktopHomeView.vue
index 6792a46..12197bb 100644
--- a/apps/player/src/views/desktop/DesktopHomeView.vue
+++ b/apps/player/src/views/desktop/DesktopHomeView.vue
@@ -9,6 +9,11 @@ import TeamEmblem from '../../components/TeamEmblem.vue';
 import GoldSpinner from '../../components/GoldSpinner.vue';
 import { formatLocalMatchDateTime } from '@thebet365/shared';
 import type { PlayerHomeMatch } from '../../composables/usePlayerHome';
+import { useBetSlipStore } from '../../stores/betSlip';
+import { useAuthStore } from '../../stores/auth';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';
+import { resolveSelectionLabel } from '../../utils/selectionLabel';
+import MarketSelectionsPanel from '../../components/match-detail/MarketSelectionsPanel.vue';
 
 type HotTab = 'hot' | 'upcoming';
 
@@ -17,6 +22,12 @@ const router = useRouter();
 const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
 const activeTab = ref<HotTab>('hot');
 
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { openAt } = useDesktopBetPopover();
+
+const activeMarketTypes = ref<Record<string, string>>({});
+
 const bannerFallbackTo = computed(() => {
   const id = announcementItems.value[0]?.id;
   return id ? `/announcements/${id}` : '/announcements';
@@ -39,7 +50,85 @@ function goMatch(id: string) {
 }
 
 function formatKickoff(startTime: string) {
-  return formatLocalMatchDateTime(startTime, locale.value, { variant: 'full' });
+  return formatLocalMatchDateTime(startTime, locale.value, {
+    variant: 'compact',
+    includeTimeZone: false,
+  });
+}
+
+function getActiveMarketType(match: PlayerHomeMatch) {
+  const matchId = match.id;
+  if (activeMarketTypes.value[matchId]) {
+    return activeMarketTypes.value[matchId];
+  }
+  if (match.markets?.some(m => m.marketType === 'FT_1X2')) {
+    return 'FT_1X2';
+  }
+  return match.markets?.[0]?.marketType || 'FT_1X2';
+}
+
+function setActiveMarketType(matchId: string, marketType: string) {
+  activeMarketTypes.value[matchId] = marketType;
+}
+
+function getAvailableMarketsForMatch(match: PlayerHomeMatch) {
+  const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
+  return (match.markets ?? []).filter(m => supported.includes(m.marketType));
+}
+
+function getActiveMarket(match: PlayerHomeMatch) {
+  const activeType = getActiveMarketType(match);
+  return match.markets?.find(m => m.marketType === activeType);
+}
+
+function getMarketTabLabel(type: string) {
+  const raw = (() => {
+    if (type === 'FT_1X2') return t('bet.market_ft_1x2');
+    if (type === 'FT_HANDICAP') return t('bet.market_ft_handicap');
+    if (type === 'FT_OVER_UNDER') return t('bet.market_ft_ou');
+    return type;
+  })();
+  return raw.replace(/全场\s*|FT\s*|Penuh\s*/ig, '').trim();
+}
+function isMarketLocked(match: PlayerHomeMatch, market?: { status: string; allowSingle?: boolean; allowParlay?: boolean }) {
+  if (!market) return true;
+  if (match.bettingOpen === false) return true;
+  const status = (market.status ?? 'OPEN').toUpperCase();
+  if (status !== 'OPEN') return true;
+  return market.allowSingle !== true && market.allowParlay !== true;
+}
+
+function isSelected(id: string) {
+  return slip.isInSlip(id);
+}
+
+function handleOddsClick(match: PlayerHomeMatch, market: any, selId: string, event?: MouseEvent) {
+  if (isMarketLocked(match, market)) return;
+  if (!auth.token) {
+    auth.showLoginPrompt(router.currentRoute.value.fullPath);
+    return;
+  }
+  const sel = market.selections?.find((s: any) => s.id === selId);
+  if (!sel || !event) return;
+  
+  const item = {
+    selectionId: sel.id,
+    oddsVersion: String(sel.oddsVersion),
+    matchId: match.id,
+    matchName: `${match.homeTeamName} vs ${match.awayTeamName}`,
+    marketId: market.id,
+    marketName: market.marketDisplayName?.trim() || market.marketType || '',
+    selectionName: resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName, {
+      lineValue: market.lineValue,
+    }),
+    odds: parseFloat(sel.odds),
+    marketType: market.marketType,
+    lineValue: market.lineValue != null && market.lineValue !== '' ? parseFloat(String(market.lineValue)) : null,
+    allowSingle: market.allowSingle,
+    allowParlay: market.allowParlay,
+  };
+  
+  openAt(event, item);
 }
 </script>
 
@@ -90,39 +179,72 @@ function formatKickoff(startTime: string) {
           <div
             v-for="match in displayedMatches"
             :key="match.id"
-            class="match-card clickable"
-            @click="goMatch(match.id)"
+            class="match-card"
           >
-            <div class="card-top">
-              <span class="league-tag">{{ match.leagueName }}</span>
-              <span class="live-indicator" v-if="(match as any).status === 'LIVE'">LIVE</span>
-            </div>
-
-            <div class="teams-versus">
-              <div class="team-side home">
-                <TeamEmblem
-                  size="md"
-                  :team-code="match.homeTeamCode"
-                  :team-name="match.homeTeamName"
-                  :logo-url="match.homeTeamLogoUrl"
-                />
-                <span class="team-name">{{ match.homeTeamName }}</span>
+            <!-- Left Side: Match Details (Clickable to go to match details page) -->
+            <div class="match-info-side" @click="goMatch(match.id)">
+              <div class="card-top">
+                <span class="league-tag">{{ match.leagueName }}</span>
+                <div class="top-meta">
+                  <span class="live-indicator" v-if="(match as any).status === 'LIVE'">LIVE</span>
+                  <span class="match-time">{{ formatKickoff(match.startTime) }}</span>
+                </div>
               </div>
-              <div class="vs-divider">VS</div>
-              <div class="team-side away">
-                <TeamEmblem
-                  size="md"
-                  :team-code="match.awayTeamCode"
-                  :team-name="match.awayTeamName"
-                  :logo-url="match.awayTeamLogoUrl"
-                />
-                <span class="team-name">{{ match.awayTeamName }}</span>
+
+              <div class="teams-versus-compact">
+                <div class="team-row">
+                  <TeamEmblem
+                    size="sm"
+                    :team-code="match.homeTeamCode"
+                    :team-name="match.homeTeamName"
+                    :logo-url="match.homeTeamLogoUrl"
+                  />
+                  <span class="team-name">{{ match.homeTeamName }}</span>
+                </div>
+                <div class="vs-text">VS</div>
+                <div class="team-row">
+                  <TeamEmblem
+                    size="sm"
+                    :team-code="match.awayTeamCode"
+                    :team-name="match.awayTeamName"
+                    :logo-url="match.awayTeamLogoUrl"
+                  />
+                  <span class="team-name">{{ match.awayTeamName }}</span>
+                </div>
               </div>
             </div>
 
-            <div class="card-footer">
-              <span class="match-time">{{ formatKickoff(match.startTime) }}</span>
-              <button type="button" class="bet-action-btn">{{ t('nav.bet') || '投注' }}</button>
+            <!-- Right Side: Market Selections & Switcher -->
+            <div class="match-market-side">
+              <div class="market-tabs">
+                <button
+                  v-for="m in getAvailableMarketsForMatch(match)"
+                  :key="m.marketType"
+                  type="button"
+                  class="market-tab-btn"
+                  :class="{ active: getActiveMarketType(match) === m.marketType }"
+                  @click="setActiveMarketType(match.id, m.marketType)"
+                >
+                  {{ getMarketTabLabel(m.marketType) }}
+                </button>
+              </div>
+
+              <div class="market-odds-area">
+                <template v-if="getActiveMarket(match)">
+                  <MarketSelectionsPanel
+                    desktop-card
+                    compact
+                    :locked="isMarketLocked(match, getActiveMarket(match))"
+                    :line-value="getActiveMarket(match)?.lineValue"
+                    :selections="getActiveMarket(match)?.selections || []"
+                    :is-selected="isSelected"
+                    @pick="(selId, ev) => handleOddsClick(match, getActiveMarket(match)!, selId, ev)"
+                  />
+                </template>
+                <div v-else class="no-market-odds">
+                  {{ t('bet.no_market_odds') || '暂无盘口赔率' }}
+                </div>
+              </div>
             </div>
           </div>
         </div>
@@ -237,106 +359,181 @@ function formatKickoff(startTime: string) {
 
 .matches-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 14px;
+  grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
+  gap: 12px;
 }
 
 .match-card {
-  background: #141414;
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 14px;
   display: flex;
-  flex-direction: column;
-  gap: 12px;
-  transition: all 0.2s;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  transition: border-color 0.2s, box-shadow 0.2s;
+  min-height: 76px;
 }
 
 .match-card:hover {
-  border-color: var(--border-gold-soft);
+  border-color: var(--border-gold);
   box-shadow: var(--shadow-gold);
 }
 
+.match-info-side {
+  flex: 1;
+  padding: 8px 12px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  border-right: 1px solid var(--border);
+  min-width: 0;
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.01);
+  transition: background-color 0.2s;
+}
+
+.match-info-side:hover {
+  background: var(--bg-hover);
+}
+
+.match-market-side {
+  width: 290px;
+  flex-shrink: 0;
+  padding: 8px 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
+  background: var(--bg-card);
+}
+
 .card-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  gap: 8px;
+}
+
+.top-meta {
+  display: flex;
+  align-items: center;
+  gap: 6px;
 }
 
 .league-tag {
-  font-size: 11px;
+  font-size: 10px;
   font-weight: 700;
   color: var(--primary-light);
-  background: rgba(212, 175, 55, 0.08);
-  padding: 2px 6px;
-  border-radius: 4px;
-  max-width: 100%;
+  background: var(--border-gold-soft);
+  padding: 1px 4px;
+  border-radius: 3px;
+  max-width: 120px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .live-indicator {
-  font-size: 10px;
+  font-size: 9px;
   font-weight: 800;
   background: var(--danger);
   color: #fff;
-  padding: 1px 4px;
+  padding: 1px 3px;
   border-radius: 2px;
+  line-height: 1;
 }
 
-.teams-versus {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+.match-time {
+  font-size: 10px;
+  color: var(--text-muted);
+  font-weight: 600;
+  white-space: nowrap;
 }
 
-.team-side {
+.teams-versus-compact {
   display: flex;
   flex-direction: column;
+  gap: 4px;
+}
+
+.vs-text {
+  font-size: 10px;
+  font-weight: 800;
+  color: var(--text-muted);
+  font-style: italic;
+  padding-left: 36px;
+  line-height: 1;
+  margin: -2px 0;
+}
+
+.team-row {
+  display: flex;
   align-items: center;
-  gap: 6px;
-  flex: 1;
+  gap: 8px;
 }
 
 .team-name {
   font-size: 12px;
   font-weight: 700;
-  color: #eee;
-  text-align: center;
-  max-width: 100px;
+  color: var(--text);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.vs-divider {
-  font-size: 11px;
-  font-weight: 800;
+.market-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 4px;
+  margin-bottom: 4px;
+}
+
+.market-tab-btn {
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: 4px;
+  background: transparent;
   color: var(--text-muted);
-  background: #222;
-  width: 22px;
-  height: 22px;
+  border: none;
+  cursor: pointer;
+  transition: all 0.15s;
+  white-space: nowrap;
+}
+
+.market-tab-btn:hover {
+  background: var(--bg-hover);
+  color: var(--primary-light);
+}
+
+.market-tab-btn.active {
+  background: var(--border-gold-soft);
+  color: var(--primary-light);
+}
+
+.market-odds-area {
+  flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  width: 100%;
 }
 
-.card-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.match-time {
-  font-size: 11px;
+.no-market-odds {
+  font-size: 10px;
   color: var(--text-muted);
+  text-align: center;
 }
 
-.bet-action-btn {
+.no-markets-fallback {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.go-detail-btn {
   padding: 4px 12px;
   border-radius: 4px;
   border: 1px solid var(--border-gold-soft);
@@ -345,11 +542,12 @@ function formatKickoff(startTime: string) {
   font-size: 11px;
   font-weight: 700;
   transition: all 0.2s;
+  cursor: pointer;
 }
 
-.match-card:hover .bet-action-btn {
+.go-detail-btn:hover {
   background: var(--primary);
-  color: #3D2800;
+  color: #111;
   border-color: var(--primary);
 }
 </style>