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

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

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

@@ -0,0 +1,182 @@
+<script setup lang="ts">
+import { computed, onActivated, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import MessageListPanel from '../../components/MessageListPanel.vue';
+import CustomerServicePanel from '../../components/CustomerServicePanel.vue';
+import { usePlayerMessages } from '../../composables/usePlayerMessages';
+import { useInboxFeature } from '../../composables/useInboxFeature';
+
+const route = useRoute();
+const router = useRouter();
+const { t } = useI18n();
+const { inboxEnabled, hubTitleKey } = useInboxFeature();
+const { messages, refreshUnreadCount } = usePlayerMessages();
+
+type HubTab = 'messages' | 'support';
+
+const activeTab = computed<HubTab>(() => {
+  if (!inboxEnabled.value) return 'support';
+  return route.query.tab === 'support' ? 'support' : 'messages';
+});
+
+const unreadInList = computed(() => messages.value.filter((item) => !item.isRead).length);
+const isDetailRoute = computed(() => route.path.startsWith('/messages/') && route.params.id);
+const showPlaceholder = computed(
+  () => !isDetailRoute.value && activeTab.value === 'messages' && inboxEnabled.value,
+);
+const showSupportPanel = computed(() => !isDetailRoute.value && activeTab.value === 'support');
+
+function switchTab(tab: HubTab) {
+  if (!inboxEnabled.value || tab === activeTab.value) return;
+  router.replace({ path: '/messages', query: tab === 'support' ? { tab: 'support' } : {} });
+}
+
+onMounted(refreshUnreadCount);
+onActivated(refreshUnreadCount);
+</script>
+
+<template>
+  <div class="desktop-layout-hub desktop-hub-page">
+    <aside class="desktop-hub-left hub-aside">
+      <nav class="hub-nav">
+        <div class="hub-nav-title">{{ t(hubTitleKey) }}</div>
+        <button
+          v-if="inboxEnabled"
+          type="button"
+          class="hub-tab hover-bg"
+          :class="{ active: activeTab === 'messages' }"
+          @click="switchTab('messages')"
+        >
+          <span class="dot" />
+          <span>{{ t('messages.tab_inbox') }}</span>
+          <span v-if="unreadInList > 0" class="badge">{{ unreadInList }}</span>
+        </button>
+        <button
+          type="button"
+          class="hub-tab hover-bg"
+          :class="{ active: activeTab === 'support' }"
+          @click="switchTab('support')"
+        >
+          <span class="dot" />
+          <span>{{ t('messages.tab_support') }}
+          </span>
+        </button>
+      </nav>
+      <MessageListPanel v-if="activeTab === 'messages' && inboxEnabled" class="hub-list" @click-message="id => $router.push('/messages/' + id)" />
+    </aside>
+
+    <main class="desktop-hub-right">
+      <slot v-if="isDetailRoute" />
+      <CustomerServicePanel v-else-if="showSupportPanel" class="hub-support" />
+      <div v-else-if="showPlaceholder" class="hub-placeholder">
+        {{ t('messages.select_hint') }}
+      </div>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.desktop-hub-page {
+  flex: 1;
+  min-height: 0;
+}
+
+.hub-aside {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  height: 100%;
+}
+
+.hub-nav {
+  flex-shrink: 0;
+  padding: 10px;
+  border-bottom: 1px solid var(--desktop-border);
+}
+
+.hub-nav-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 6px 14px 10px;
+}
+
+.hub-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px 14px;
+  border-radius: 4px;
+  border: none;
+  background: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  text-align: left;
+  transition: color 0.2s, background 0.2s;
+}
+
+.hub-tab:hover {
+  color: #fff;
+}
+
+.hub-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.08);
+}
+
+.hub-tab.active .dot {
+  background: var(--primary);
+  box-shadow: 0 0 8px var(--primary);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #333;
+  flex-shrink: 0;
+}
+
+.badge {
+  margin-left: auto;
+  background: rgba(255, 69, 58, 0.85);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 800;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+}
+
+.hub-list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.hub-support {
+  flex: 1;
+  min-height: 0;
+}
+
+.hub-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 280px;
+  color: var(--text-muted);
+  font-size: 14px;
+  font-weight: 600;
+}
+</style>