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

apps/player/src/components/desktop/LeagueSidebar.vue

@@ -1,21 +1,38 @@
 <script setup lang="ts">
-import { computed, onMounted } from 'vue';
+import { computed, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import { useMatchFilters } from '../../composables/useMatchFilters';
 import { useDesktopParlayMatches } from '../../composables/useDesktopParlayMatches';
+import { useOutrightEvents } from '../../composables/useOutrightEvents';
 import {
   isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
   isInLocalTodayMatchWindow as isInTodayMatchWindow,
 } from '@thebet365/shared';
 
 const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
 const { parlayMatches, loadParlayMatches } = useDesktopParlayMatches();
 const { searchQuery, filterState, toggleLeague, clearFilters } = useMatchFilters();
+const { events: outrightEvents, load: loadOutrightEvents } = useOutrightEvents();
 
-onMounted(() => {
-  void loadParlayMatches();
+const isOutrightMode = computed(() => {
+  return route.query.tab === 'outright';
 });
 
+watch(
+  isOutrightMode,
+  (outright) => {
+    if (outright) {
+      void loadOutrightEvents({ silent: outrightEvents.value.length > 0 });
+    } else {
+      void loadParlayMatches();
+    }
+  },
+  { immediate: true },
+);
+
 function normalizeLeagueName(name: string): string {
   return name
     .replace(/\.unit$/i, '')
@@ -26,36 +43,57 @@ function normalizeLeagueName(name: string): string {
 
 const availableLeagues = computed(() => {
   const map = new Map<string, { id: string; name: string; count: number }>();
-  const now = new Date();
   const keyword = searchQuery.value.trim().toLowerCase();
 
-  for (const m of parlayMatches.value) {
-    if (keyword) {
-      const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
-      if (!haystack.includes(keyword)) continue;
+  if (isOutrightMode.value) {
+    for (const e of outrightEvents.value) {
+      if (keyword) {
+        const haystack = `${e.title} ${e.leagueName || ''}`.toLowerCase();
+        if (!haystack.includes(keyword)) continue;
+      }
+
+      const id = e.leagueId ?? e.leagueName ?? 'unknown';
+      const existing = map.get(id);
+      if (existing) {
+        existing.count += 1;
+      } else {
+        map.set(id, {
+          id,
+          name: normalizeLeagueName(e.leagueName || e.title),
+          count: 1,
+        });
+      }
     }
+  } else {
+    const now = new Date();
+    for (const m of parlayMatches.value) {
+      if (keyword) {
+        const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
+        if (!haystack.includes(keyword)) continue;
+      }
 
-    let timeMatch = true;
-    if (filterState.value.time === 'today') {
-      timeMatch = isInTodayMatchWindow(m.startTime, now);
-    } else if (filterState.value.time === 'early') {
-      timeMatch = isAfterTodayMatchWindow(m.startTime, now);
-    }
-    if (!timeMatch) continue;
+      let timeMatch = true;
+      if (filterState.value.time === 'today') {
+        timeMatch = isInTodayMatchWindow(m.startTime, now);
+      } else if (filterState.value.time === 'early') {
+        timeMatch = isAfterTodayMatchWindow(m.startTime, now);
+      }
+      if (!timeMatch) continue;
 
-    if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
-    if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;
+      if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
+      if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;
 
-    const id = m.leagueId ?? m.leagueName;
-    const existing = map.get(id);
-    if (existing) {
-      existing.count += 1;
-    } else {
-      map.set(id, {
-        id,
-        name: normalizeLeagueName(m.leagueName),
-        count: 1,
-      });
+      const id = m.leagueId ?? m.leagueName;
+      const existing = map.get(id);
+      if (existing) {
+        existing.count += 1;
+      } else {
+        map.set(id, {
+          id,
+          name: normalizeLeagueName(m.leagueName),
+          count: 1,
+        });
+      }
     }
   }
 
@@ -65,6 +103,10 @@ const availableLeagues = computed(() => {
 const isSelected = (leagueId: string) => {
   return filterState.value.leagueIds.length === 0 || filterState.value.leagueIds.includes(leagueId);
 };
+
+const handleLeagueClick = (leagueId: string) => {
+  toggleLeague(leagueId);
+};
 </script>
 
 <template>
@@ -78,7 +120,7 @@ const isSelected = (leagueId: string) => {
       />
     </div>
 
-    <div class="sidebar-section">
+    <div v-if="!isOutrightMode" class="sidebar-section">
       <div class="section-hdr">{{ t('bet.filter_time') }}</div>
       <div class="time-filters">
         <button
@@ -126,14 +168,14 @@ const isSelected = (leagueId: string) => {
           :key="lg.id"
           class="league-item"
           :class="{ active: isSelected(lg.id) }"
-          @click="toggleLeague(lg.id)"
+          @click="handleLeagueClick(lg.id)"
         >
           <div class="checkbox" :class="{ checked: isSelected(lg.id) }"></div>
           <span class="league-name" :title="lg.name">{{ lg.name }}</span>
           <span class="league-count">{{ lg.count }}</span>
         </div>
         <div v-if="availableLeagues.length === 0" class="empty-leagues">
-          {{ t('bet.no_matches') }}
+          {{ isOutrightMode ? t('bet.no_outright') : t('bet.no_matches') }}
         </div>
       </div>
     </div>