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

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

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

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { RouterLink, useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const isWalletSection = computed(
+  () => route.path.startsWith('/wallet') || route.path === '/profile/cashbacks',
+);
+
+const hubTitleKey = computed(() => (isWalletSection.value ? 'nav.wallet' : 'nav.bet_history'));
+
+const menuItems = computed(() => {
+  if (isWalletSection.value) {
+    return [
+      {
+        path: '/wallet',
+        labelKey: 'nav.wallet',
+        match: (p: string) =>
+          p === '/wallet' ||
+          p === '/wallet/detail' ||
+          p === '/wallet/recharge' ||
+          p.startsWith('/wallet/transactions'),
+      },
+      {
+        path: '/wallet/recharge/history',
+        labelKey: 'wallet.recharge_history',
+        match: (p: string) => p.startsWith('/wallet/recharge/history'),
+      },
+      {
+        path: '/wallet/cashbacks',
+        labelKey: 'wallet.cashbacks_tab',
+        match: (p: string) => p === '/wallet/cashbacks' || p === '/profile/cashbacks',
+      },
+    ];
+  }
+
+  return [
+    {
+      path: '/bets',
+      labelKey: 'nav.bet_history',
+      match: (p: string) => p === '/bets' || p.startsWith('/bets/'),
+    },
+  ];
+});
+</script>
+
+<template>
+  <nav class="account-side-nav">
+    <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
+    <RouterLink
+      v-for="item in menuItems"
+      :key="item.path"
+      :to="item.path"
+      class="nav-item hover-bg"
+      :class="{ active: item.match(route.path) }"
+    >
+      <span class="dot"></span>
+      <span class="label">{{ t(item.labelKey) || item.path }}</span>
+    </RouterLink>
+  </nav>
+</template>
+
+<style scoped>
+.account-side-nav {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 10px;
+}
+
+.hub-nav-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 14px 10px;
+}
+
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 14px;
+  border-radius: 4px;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  transition: all 0.2s;
+  position: relative;
+}
+
+.nav-item:hover {
+  color: #fff;
+}
+
+.nav-item.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.nav-item.active .dot {
+  background: var(--primary);
+  box-shadow: 0 0 8px var(--primary);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #333;
+  transition: all 0.2s;
+}
+
+.label {
+  line-height: 1;
+}
+</style>