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

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

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+/**
+ * Desktop Login View
+ * Reuses the existing LoginView form in a centered two-column auth layout.
+ */
+import LoginView from '../LoginView.vue';
+</script>
+
+<template>
+  <div class="desktop-auth-shell">
+    <div class="auth-brand">
+      <div class="brand-inner">
+        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
+        <h1 class="brand-name">THEBET365</h1>
+        <p class="brand-tagline">专业体育赛事投注平台</p>
+        <div class="brand-features">
+          <div class="feature-item">
+            <span class="feature-icon">⚡</span>
+            <span>实时赔率更新</span>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">🔒</span>
+            <span>安全稳定平台</span>
+          </div>
+          <div class="feature-item">
+            <span class="feature-icon">💰</span>
+            <span>快速充值提款</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="auth-card-wrap">
+      <div class="auth-card">
+        <LoginView />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.desktop-auth-shell {
+  display: flex;
+  min-height: 100vh;
+  background: var(--desktop-bg);
+}
+
+.auth-brand {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #0a0a0a 0%, #111 50%, #0d0d0d 100%);
+  border-right: 1px solid var(--desktop-border);
+  position: relative;
+  overflow: hidden;
+}
+
+.auth-brand::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(212,175,55,0.06) 0%, transparent 70%);
+  pointer-events: none;
+}
+
+.brand-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  text-align: center;
+  position: relative;
+  z-index: 1;
+  padding: 40px;
+}
+
+.brand-logo {
+  width: 64px;
+  height: 64px;
+  object-fit: contain;
+  filter: drop-shadow(0 4px 16px rgba(212,175,55,0.3));
+}
+
+.brand-name {
+  font-size: 28px;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  color: var(--primary-light);
+  margin: 0;
+  text-shadow: 0 2px 12px rgba(212,175,55,0.25);
+}
+
+.brand-tagline {
+  font-size: 14px;
+  color: var(--text-muted);
+  margin: 0;
+  font-weight: 600;
+}
+
+.brand-features {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 24px;
+}
+
+.feature-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--text-muted);
+  font-weight: 600;
+}
+
+.feature-icon {
+  font-size: 16px;
+}
+
+.auth-card-wrap {
+  width: 480px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+  background: var(--desktop-bg);
+}
+
+.auth-card {
+  width: 100%;
+  max-width: 380px;
+}
+</style>