feat(player): 新增桌面端 UI 与响应式双端路由架构

- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系
- 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端
- 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌
- 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n
- 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页

apps/player/src/layouts/MainLayout.vue

@@ -7,10 +7,11 @@ import CashBalanceChip from '../components/CashBalanceChip.vue';
 import UserAvatarMenu from '../components/UserAvatarMenu.vue';
 import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import { useAppLocale } from '../composables/useAppLocale';
-import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
 import BottomNavIcon from '../components/BottomNavIcon.vue';
 import BackToTopButton from '../components/BackToTopButton.vue';
 import { computed, defineAsyncComponent, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useViewport } from '../composables/useViewport';
+import DesktopShell from '../components/desktop/DesktopShell.vue';
 
 const BetSlipDrawer = defineAsyncComponent(() => import('../components/BetSlipDrawer.vue'));
 import { usePlayerHome } from '../composables/usePlayerHome';
@@ -20,6 +21,7 @@ import { useDepositNotifications } from '../composables/useDepositNotifications'
 import { usePlayerMessages } from '../composables/usePlayerMessages';
 import { startPresencePing, stopPresencePing } from '../composables/usePresencePing';
 
+const { isDesktop } = useViewport();
 const { t, locale } = useI18n();
 const auth = useAuthStore();
 const { initFromUser } = useAppLocale();
@@ -41,9 +43,6 @@ const isDetailPage = computed(() => {
 });
 
 const showHeader = computed(() => !isDetailPage.value);
-const showAnnouncement = computed(
-  () => !isDetailPage.value && !route.path.startsWith('/profile') && !route.path.startsWith('/announcements'),
-);
 
 const showBottomNav = computed(() => {
   const p = route.path;
@@ -61,8 +60,7 @@ const showBottomNav = computed(() => {
   if (!inboxEnabled.value && p === '/messages') return true;
   return false;
 });
-const { announcements, announcementItems, load: loadPlayerHome } = usePlayerHome();
-const primaryAnnouncementId = computed(() => announcementItems.value[0]?.id ?? '');
+const { load: loadPlayerHome } = usePlayerHome();
 const { loadProfile, refreshProfile, bindProfileVisibilityRefresh } = usePlayerProfile();
 const { startPolling, stopPolling } = useDepositNotifications();
 const { unreadCount, refreshUnreadCount, resetMessagesState } = usePlayerMessages();
@@ -159,7 +157,8 @@ watch(
 </script>
 
 <template>
-  <div class="layout">
+  <DesktopShell v-if="isDesktop" />
+  <div v-else class="layout">
     <header v-if="showHeader" class="header">
       <img src="/logo.png" alt="TheBet365" class="logo" />
       <div class="header-actions">
@@ -193,14 +192,6 @@ watch(
       </div>
     </header>
 
-    <div v-if="showAnnouncement" class="announce-strip">
-      <AnnouncementMarquee
-        :items="announcements"
-        :target-id="primaryAnnouncementId"
-        embedded
-      />
-    </div>
-
     <main ref="mainRef" :class="['main', { 'has-nav': showBottomNav }]">
       <RouterView v-slot="{ Component, route: viewRoute }">
         <KeepAlive v-if="viewRoute.meta.keepAlive" :max="10">