feat(player-desktop): 优化桌面端首页布局与交互，支持悬停快速下注与优胜冠军侧栏

apps/player/src/components/MatchBetCard.vue

@@ -1,9 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { teamFlagUrl } from '../utils/teamFlag';
 import { matchPhaseLabel, type MatchPhase } from '../utils/matchPhase';
 import { formatLocalMatchDateTime } from '@thebet365/shared';
+import { useBetSlipStore } from '../stores/betSlip';
+import { useAuthStore } from '../stores/auth';
+import { useDesktopBetPopover } from '../composables/useDesktopBetPopover';
+import { resolveSelectionLabel } from '../utils/selectionLabel';
+import MarketSelectionsPanel from './match-detail/MarketSelectionsPanel.vue';
 
 const props = defineProps<{
   match: {
@@ -31,7 +37,9 @@ const props = defineProps<{
       homeCards?: number | null;
       awayCards?: number | null;
     } | null;
+    markets?: any[];
   };
+  noQuickBet?: boolean;
 }>();
 
 const emit = defineEmits<{ bet: [id: string] }>();
@@ -70,12 +78,95 @@ const liveScoreText = computed(() => {
   if (!s || s.ftHome == null || s.ftAway == null) return '';
   return `${s.ftHome} - ${s.ftAway}`;
 });
+
+const router = useRouter();
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { openAt } = useDesktopBetPopover();
+
+const activeMarketType = ref<string>('');
+
+const currentMarketType = computed(() => {
+  if (activeMarketType.value) return activeMarketType.value;
+  const available = getAvailableMarketsForMatch(props.match);
+  if (available.some((m: any) => m.marketType === 'FT_1X2')) {
+    return 'FT_1X2';
+  }
+  return available[0]?.marketType || 'FT_1X2';
+});
+
+function isSelected(id: string) {
+  return slip.isInSlip(id);
+}
+
+function getAvailableMarketsForMatch(match: any) {
+  const supported = ['FT_1X2', 'FT_HANDICAP', 'FT_OVER_UNDER'];
+  return (match.markets ?? []).filter((m: any) => supported.includes(m.marketType));
+}
+
+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 getSelLabel(sel: any, marketType: string, lineValue?: string | number | null) {
+  return resolveSelectionLabel(t, sel.selectionCode || '', sel.selectionName || '', { lineValue });
+}
+
+function handleOddsClick(match: any, 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: getSelLabel(sel, market.marketType, 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);
+}
+
+function isMarketLocked(match: any, 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 getActiveMarket() {
+  const type = currentMarketType.value;
+  return props.match.markets?.find((m: any) => m.marketType === type);
+}
+
+function goMatchDetail() {
+  router.push(`/match/${props.match.id}`);
+}
 </script>
 
 <template>
   <article
     class="match-card"
-    :class="{ 'match-card--phase': phase !== 'open' }"
+    :class="{ 'match-card--phase': phase !== 'open', 'no-quick-bet': noQuickBet }"
     @click="emit('bet', match.id)"
   >
     <span v-if="phase === 'open'" class="status-tag status-tag--open">{{ t('bet.status_open') }}</span>
@@ -124,6 +215,40 @@ const liveScoreText = computed(() => {
     >
       {{ bettingOpen ? t('bet.place_bet_short') : t('bet.view_match') }}
     </button>
+
+    <!-- Morphing Quick Bet panel (Desktop Only, disabled when noQuickBet=true) -->
+    <div v-if="!noQuickBet" class="card-quick-bet" @click.stop>
+      <div class="quick-bet-tabs" v-if="getAvailableMarketsForMatch(match).length">
+        <button
+          v-for="m in getAvailableMarketsForMatch(match)"
+          :key="m.marketType"
+          type="button"
+          class="quick-bet-tab-btn"
+          :class="{ active: currentMarketType === m.marketType }"
+          @click="activeMarketType = m.marketType"
+        >
+          {{ getMarketTabLabel(m.marketType) }}
+        </button>
+        <span class="quick-bet-all-link" @click="goMatchDetail">{{ t('bet.all') || '全部' }} →</span>
+      </div>
+
+      <div class="quick-bet-odds">
+        <template v-if="getActiveMarket()">
+          <MarketSelectionsPanel
+            desktop-card
+            compact
+            :locked="isMarketLocked(match, getActiveMarket())"
+            :line-value="getActiveMarket()?.lineValue"
+            :selections="getActiveMarket()?.selections || []"
+            :is-selected="isSelected"
+            @pick="(selId, ev) => handleOddsClick(match, getActiveMarket()!, selId, ev)"
+          />
+        </template>
+        <div v-else class="quick-bet-no-odds">
+          {{ t('bet.no_market_odds') || '暂无盘口' }}
+        </div>
+      </div>
+    </div>
   </article>
 </template>
 
@@ -139,6 +264,7 @@ const liveScoreText = computed(() => {
   align-items: center;
   gap: 8px;
   min-width: 0;
+  min-height: 130px;
   overflow: hidden;
   cursor: pointer;
 }
@@ -163,6 +289,7 @@ const liveScoreText = computed(() => {
   align-items: center;
   width: 100%;
   gap: 4px;
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), padding 0.3s ease;
 }
 
 .team {
@@ -173,6 +300,7 @@ const liveScoreText = computed(() => {
   gap: 6px;
   min-width: 0;
   transform: translateY(8px);
+  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 }
 
 .team-name {
@@ -189,6 +317,7 @@ const liveScoreText = computed(() => {
   text-align: center;
   padding: 0 6px;
   align-self: stretch;
+  transition: font-size 0.25s ease;
 }
 
 .match-card--phase .team-name {
@@ -201,12 +330,14 @@ const liveScoreText = computed(() => {
   object-fit: cover;
   border-radius: 3px;
   display: block;
+  transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease, margin 0.25s ease;
 }
 
 .team-flag.flag-logo {
   width: 48px;
   height: 48px;
   object-fit: contain;
+  transition: transform 0.25s ease, opacity 0.2s ease, height 0.25s ease, width 0.25s ease, margin 0.25s ease;
 }
 
 .center-col {
@@ -229,6 +360,7 @@ const liveScoreText = computed(() => {
   max-width: 96px;
   overflow-wrap: anywhere;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
+  transition: opacity 0.2s ease, height 0.2s ease, margin 0.2s ease;
 }
 
 .live-score {
@@ -237,6 +369,7 @@ const liveScoreText = computed(() => {
   color: #fff;
   line-height: 1;
   letter-spacing: 0.04em;
+  transition: font-size 0.25s ease;
 }
 
 .vs {
@@ -246,6 +379,7 @@ const liveScoreText = computed(() => {
   letter-spacing: 0.08em;
   line-height: 1;
   text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
+  transition: font-size 0.25s ease;
 }
 
 .status-tag {
@@ -292,6 +426,8 @@ const liveScoreText = computed(() => {
   font-size: 13px;
   letter-spacing: 0.04em;
   line-height: 1.2;
+  overflow: hidden;
+  transition: opacity 0.2s ease, transform 0.2s ease, height 0.25s ease, padding 0.25s ease, min-width 0.25s ease, min-height 0.25s ease, margin 0.25s ease;
 }
 
 .bet-btn--view {
@@ -299,4 +435,162 @@ const liveScoreText = computed(() => {
   border: 1px solid #444;
   color: #aaa;
 }
+
+/* --- Morphing Quick Bet panel --- */
+.card-quick-bet {
+  position: absolute;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(12px);
+  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
+  z-index: 5;
+}
+
+@media (hover: hover) {
+  .match-card:not(.no-quick-bet):hover {
+    border-color: var(--border-gold);
+    box-shadow: var(--shadow-gold);
+  }
+
+  /* 整行保持原位，间距自然 */
+  .match-card:not(.no-quick-bet):hover .teams-row {
+    transform: translateY(0);
+    padding: 0 40px;
+  }
+
+  /* .team 取消自身 translateY */
+  .match-card:not(.no-quick-bet):hover .team {
+    transform: translateY(0);
+    gap: 3px;
+  }
+
+  /* 旗帜缩小到 40×28 */
+  .match-card:not(.no-quick-bet):hover .team-flag {
+    width: 40px;
+    height: 28px;
+  }
+
+  .match-card:not(.no-quick-bet):hover .team-flag.flag-logo {
+    width: 28px;
+    height: 28px;
+  }
+
+  /* 队名缩小并禁止换行 */
+  .match-card:not(.no-quick-bet):hover .team-name {
+    font-size: 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  /* 隐藏开赛时间 */
+  .match-card:not(.no-quick-bet):hover .kickoff {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  /* VS / 比分 */
+  .match-card:not(.no-quick-bet):hover .vs,
+  .match-card:not(.no-quick-bet):hover .live-score {
+    font-size: 16px;
+  }
+
+  /* 下注按钮淡出（保留布局空间避免高度抖动） */
+  .match-card:not(.no-quick-bet):hover .bet-btn {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* 快速下注面板淡入 */
+  .match-card:not(.no-quick-bet):hover .card-quick-bet {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
+
+  /* sidebar 模式：hover 仍有金边，但不做复杂动画 */
+  .match-card.no-quick-bet:hover {
+    border-color: var(--border-gold);
+    box-shadow: var(--shadow-gold);
+  }
+}
+
+.quick-bet-tabs {
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 4px;
+  margin-bottom: 2px;
+}
+
+.quick-bet-tab-btn {
+  padding: 2px 6px;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  border-radius: 3px;
+  transition: all 0.15s;
+}
+
+.quick-bet-tab-btn:hover {
+  color: var(--primary-light);
+}
+
+.quick-bet-tab-btn.active {
+  color: var(--primary-light);
+  background: var(--border-gold-soft);
+}
+
+.quick-bet-all-link {
+  margin-left: auto;
+  font-size: 9px;
+  font-weight: 700;
+  color: var(--primary-light);
+  cursor: pointer;
+  padding: 2px 4px;
+  transition: opacity 0.15s;
+}
+
+.quick-bet-all-link:hover {
+  text-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
+}
+
+.quick-bet-odds {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
+.quick-bet-odds :deep(.odds-btn) {
+  min-height: 26px !important;
+  padding: 1px 4px !important;
+  gap: 1px !important;
+}
+
+.quick-bet-odds :deep(.odds) {
+  font-size: 11px !important;
+}
+
+.quick-bet-odds :deep(.label) {
+  font-size: 8px !important;
+}
+
+.quick-bet-no-odds {
+  font-size: 10px;
+  color: var(--text-muted);
+}
 </style>