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

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

apps/player/src/components/match-detail/MarketSelectionsPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { resolveSelectionLabel } from '../../utils/selectionLabel';
 
@@ -12,11 +13,15 @@ const props = defineProps<{
   }[];
   isSelected: (id: string) => boolean;
   compact?: boolean;
+  /** PC 行内横排：左标签右赔率，适合详情页全宽行 */
+  horizontal?: boolean;
+  /** PC 卡片内：上标签下赔率，列数随选项数量 */
+  desktopCard?: boolean;
   locked?: boolean;
   lineValue?: string | number | null;
 }>();
 
-const emit = defineEmits<{ pick: [id: string] }>();
+const emit = defineEmits<{ pick: [id: string, event?: MouseEvent] }>();
 const { t } = useI18n();
 
 function label(sel: (typeof props.selections)[number]) {
@@ -29,23 +34,40 @@ function label(sel: (typeof props.selections)[number]) {
   return sel.selectionName;
 }
 
-function onPick(id: string) {
+function onPick(id: string, event?: MouseEvent) {
   if (props.locked) return;
-  emit('pick', id);
+  emit('pick', id, event);
 }
+
+const gridCols = computed(() => {
+  const n = props.selections.length;
+  if (n <= 1) return 1;
+  if (n === 2) return 2;
+  if (n === 3) return 3;
+  return 4;
+});
+
+const panelStyle = computed(() =>
+  props.desktopCard ? { '--market-cols': String(gridCols.value) } : undefined,
+);
 </script>
 
 <template>
-  <div class="wrap" :class="{ compact, locked }">
-    <div class="panel">
+  <div class="wrap" :class="{ compact, horizontal, desktopCard, locked }">
+    <div
+      class="panel"
+      :class="{ horizontal, 'desktop-card': desktopCard }"
+      :style="panelStyle"
+    >
       <button
         v-for="sel in selections"
         :key="sel.id"
         type="button"
         class="odds-btn"
         :class="{ selected: isSelected(sel.id), 'odds-btn--locked': locked }"
+        :data-bet-selection-id="sel.id"
         :disabled="locked"
-        @click="onPick(sel.id)"
+        @click="onPick(sel.id, $event)"
       >
         <span class="label">{{ label(sel) }}</span>
         <span class="odds">{{ sel.odds }}</span>
@@ -60,6 +82,90 @@ function onPick(id: string) {
   background: #0c0c0c;
 }
 
+.wrap.compact {
+  padding: 2px 4px 4px;
+}
+
+.wrap.compact:not(.horizontal) {
+  padding: 2px 4px 4px;
+}
+
+.wrap.horizontal {
+  padding: 0;
+  background: transparent;
+}
+
+.wrap.compact .panel:not(.horizontal) {
+  gap: 2px;
+}
+
+.wrap.compact:not(.horizontal) .odds-btn {
+  min-height: 30px;
+  padding: 3px 2px;
+  font-size: 10px;
+}
+
+.panel.horizontal {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+
+.panel.horizontal .odds-btn {
+  flex: 1 1 72px;
+  min-width: 72px;
+  max-width: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 32px;
+  padding: 4px 10px;
+}
+
+.panel.horizontal .odds-btn .label {
+  font-size: 10px;
+  text-align: left;
+}
+
+.panel.horizontal .odds-btn .odds {
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.wrap.desktopCard {
+  padding: 0;
+  background: transparent;
+}
+
+.panel.desktop-card {
+  display: grid;
+  grid-template-columns: repeat(var(--market-cols, 3), minmax(0, 1fr));
+  gap: 4px;
+  width: 100%;
+}
+
+.panel.desktop-card .odds-btn {
+  min-height: 38px;
+  padding: 4px 6px;
+  gap: 2px;
+}
+
+.panel.desktop-card .odds-btn .label {
+  font-size: 9px;
+  line-height: 1.2;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panel.desktop-card .odds-btn .odds {
+  font-size: 13px;
+  line-height: 1.1;
+}
+
 .wrap.locked {
   opacity: 0.78;
 }
@@ -86,7 +192,16 @@ function onPick(id: string) {
 
 .odds-btn.selected {
   border-color: var(--primary);
-  background: rgba(212, 175, 55, 0.1);
+  background: rgba(212, 175, 55, 0.14);
+  box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35), 0 0 0 1px rgba(212, 175, 55, 0.2);
+}
+
+.odds-btn.selected .label {
+  color: #e8d48a;
+}
+
+.odds-btn.selected .odds {
+  color: #f0d875;
 }
 
 .odds-btn--locked {