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

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

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { OutrightEvent } from '../outright/OutrightEventSection.vue';
+import saishiImg from '../../assets/images/saishi.webp';
+
+const props = defineProps<{
+  event: OutrightEvent;
+}>();
+
+const emit = defineEmits<{ open: [] }>();
+
+const { t } = useI18n();
+
+const headTitle = computed(() => {
+  const raw = props.event.title.replace(/^\*+/, '').trim();
+  return raw || props.event.leagueName || t('bet.tab_outright');
+});
+
+const teamCount = computed(() => props.event.selectionCount ?? props.event.selections.length);
+
+const isSettled = computed(
+  () => props.event.bettingOpen === false || props.event.status === 'SETTLED',
+);
+</script>
+
+<template>
+  <button type="button" class="outright-event-card hover-bg" @click="emit('open')">
+    <div class="card-main">
+      <div class="title-row">
+        <span class="title">{{ headTitle }}</span>
+        <span v-if="isSettled" class="settled-tag">{{ t('bet.outright_settled') }}</span>
+      </div>
+      <p v-if="event.leagueName && event.leagueName !== headTitle" class="league">{{ event.leagueName }}</p>
+      <p class="meta">{{ t('bet.outright_teams_count', { n: teamCount }) }}</p>
+    </div>
+    <img :src="saishiImg" alt="" class="saishi" />
+  </button>
+</template>
+
+<style scoped>
+.outright-event-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: rgba(20, 20, 20, 0.95);
+  text-align: left;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.outright-event-card:hover {
+  border-color: var(--border-gold-soft);
+}
+
+.card-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  line-height: 1.35;
+}
+
+.settled-tag {
+  font-size: 10px;
+  font-weight: 800;
+  color: #c9a227;
+  border: 1px solid rgba(201, 162, 39, 0.45);
+  border-radius: 999px;
+  padding: 1px 7px;
+}
+
+.league {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+}
+
+.meta {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: #666;
+}
+
+.saishi {
+  flex-shrink: 0;
+  height: 44px;
+  width: auto;
+  max-width: 40px;
+  object-fit: contain;
+  opacity: 0.85;
+}
+</style>