feat(player-desktop): 优化注单侧栏面板折叠、隐藏首页滚动条、默认选中联赛、主页添加近期热门快速下注

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>