feat(player-desktop): 优化主页赛事卡片布局、统一注单按钮颜色、添加置顶精简走马灯

apps/player/src/views/desktop/DesktopHomeView.vue

@@ -9,12 +9,99 @@ 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';
 
 const { t, locale } = useI18n();
 const router = useRouter();
 const { banners, hotMatches, upcomingMatches, loading, load, announcementItems } = usePlayerHome();
 const activeFeaturedIndex = ref(0);
 
+const slip = useBetSlipStore();
+const auth = useAuthStore();
+const { openAt } = useDesktopBetPopover();
+
+const activeMarketTypes = ref<Record<string, string>>({});
+
+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 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 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 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);
+}
+
 let rotateInterval: number | undefined;
 
 function startFeaturedRotation() {
@@ -59,7 +146,10 @@ 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 setFeaturedIndex(index: number) {
@@ -203,39 +293,81 @@ function setFeaturedIndex(index: number) {
           <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 Switcher & Selections (For Quick Betting) -->
+            <div class="match-market-side">
+              <template v-if="getAvailableMarketsForMatch(match).length > 0">
+                <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.stop="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.market_status_closed') }}
+                  </div>
+                </div>
+              </template>
+
+              <!-- Fallback to View Details if no markets available -->
+              <div v-else class="no-markets-fallback">
+                <button type="button" class="go-detail-btn" @click.stop="goMatch(match.id)">
+                  {{ t('bet.view_match') || '查看赛况' }}
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -612,106 +744,181 @@ function setFeaturedIndex(index: number) {
 
 .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: var(--bg-body);
-  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-active);
-  box-shadow: var(--shadow);
+  box-shadow: 0 4px 12px rgba(0, 61, 107, 0.08);
+}
+
+.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: #FCFDFE;
+  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(0, 102, 204, 0.08);
-  padding: 2px 6px;
-  border-radius: 4px;
-  max-width: 100%;
+  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(0, 0, 0, 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: var(--text);
-  text-align: center;
-  max-width: 100px;
   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: var(--bg-body);
-  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);
+}
+
+.market-tab-btn.active {
+  background: rgba(0, 61, 107, 0.08);
+  color: var(--primary);
+}
+
+.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-active);
@@ -720,9 +927,10 @@ function setFeaturedIndex(index: number) {
   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: #FFFFFF;
   border-color: var(--primary);