feat(player): theme-3 移动端/PC 双端拆分与桌面投注工作台

新增 DesktopShell 及桌面端首页、赛事、钱包、记录等页面，原 H5 视图迁移至 Mobile* 并由路由 wrapper 按视口切换。补齐右侧投注单栏、赔率快捷浮层、联赛/赛事侧栏、串关与定位能力；桌面下注成功改为全局 Toast，修复侧栏成功遮罩被裁剪与底部汇总黑底。同步悬浮客服、公告卡片、三语 i18n、桌面样式体系，以及 API 赛事与 shared 包相关调整。
2026-07-07 17:07:38 +08:00
parent fee34feee8
commit e7e2b77906
125 changed files with 26393 additions and 8687 deletions
--- a/apps/player/src/components/match-detail/CorrectScorePanel.vue
+++ b/apps/player/src/components/match-detail/CorrectScorePanel.vue
@@ -2,6 +2,7 @@
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { groupCorrectScoreSelections, type CsSelection } from '../../utils/correctScoreLayout';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';

 const props = defineProps<{
  marketType: string;
@@ -15,13 +16,16 @@ const props = defineProps<{
  }>;
  isSelected: (id: string) => boolean;
  locked?: boolean;
+  /** PC 全宽紧凑：更小单元格、三列均分 */
+  dense?: boolean;
 }>();

 const emit = defineEmits<{
-  pick: [id: string];
+  pick: [id: string, event?: MouseEvent];
 }>();

 const { t } = useI18n();
+const { cancelClose } = useDesktopBetPopover();

 const columns = computed(() =>
  groupCorrectScoreSelections(
@@ -34,9 +38,9 @@ const columns = computed(() =>
  ),
 );

-function onPick(sel: CsSelection) {
+function onPick(sel: CsSelection, event?: MouseEvent) {
  if (props.locked) return;
-  emit('pick', sel.id);
+  emit('pick', sel.id, event);
 }

 function formatOdds(odds: string) {
@@ -46,7 +50,11 @@ function formatOdds(odds: string) {
 </script>

 <template>
-  <div class="cs-panel" :class="{ 'cs-panel--locked': locked }">
+  <div
+    class="cs-panel"
+    :class="{ 'cs-panel--locked': locked, 'cs-panel--dense': dense }"
+    @mouseenter="cancelClose"
+  >
    <div class="cols-head">
      <span>{{ t('bet.col_home') }}</span>
      <span>{{ t('bet.col_draw') }}</span>
@@ -61,8 +69,10 @@ function formatOdds(odds: string) {
          type="button"
          class="score-card"
          :class="{ selected: isSelected(sel.id), 'score-card--locked': locked }"
+          :data-bet-selection-id="sel.id"
          :disabled="locked"
-          @click="onPick(sel)"
+          @mouseenter="onPick(sel, $event)"
+          @click="onPick(sel, $event)"
        >
          <span class="score-line">{{ sel.scoreDisplay }}</span>
          <span class="odds">{{ formatOdds(sel.odds) }}</span>
@@ -95,21 +105,24 @@ function formatOdds(odds: string) {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
-  color: var(--text-secondary);
+  color: var(--text-muted);
 }

 .cols-grid {
  display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
+  align-items: start;
 }

 .col {
  display: flex;
  flex-direction: column;
  gap: 4px;
+  align-self: start;
 }

+/* ── Score Card ── */
 .score-card {
  display: flex;
  flex-direction: column;
@@ -122,18 +135,33 @@ function formatOdds(odds: string) {
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: center;
+  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
 }

+.score-card:hover:not(.score-card--locked) {
+  border-color: var(--primary-light);
+  background: var(--bg-hover);
+}
+
 .score-card.selected {
  border-color: var(--primary);
  border-width: 2px;
  background: rgba(244, 162, 97, 0.08);
 }

+.score-card.selected .score-line {
+  color: var(--primary-light);
+}
+
+.score-card.selected .odds {
+  color: var(--primary);
+}
+
 .score-card--locked {
  background: var(--bg-elevated);
  border-color: var(--border);
+  cursor: not-allowed;
 }

 .score-card--locked .score-line,
@@ -152,4 +180,37 @@ function formatOdds(odds: string) {
  font-weight: 700;
  color: var(--warning);
 }
+
+/* ── Dense 紧凑模式 ── */
+.cs-panel--dense {
+  padding: 4px 6px 6px;
+}
+
+.cs-panel--dense .cols-head {
+  font-size: 9px;
+  margin-bottom: 3px;
+}
+
+.cs-panel--dense .cols-grid {
+  gap: 3px;
+}
+
+.cs-panel--dense .col {
+  gap: 3px;
+}
+
+.cs-panel--dense .score-card {
+  min-height: 34px;
+  padding: 4px 2px;
+  gap: 2px;
+  border-radius: 4px;
+}
+
+.cs-panel--dense .score-line {
+  font-size: 10px;
+}
+
+.cs-panel--dense .odds {
+  font-size: 9px;
+}
 </style>
--- a/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
+++ b/apps/player/src/components/match-detail/MarketSelectionsPanel.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
+import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { resolveSelectionLabel } from '../../utils/selectionLabel';
+import { useDesktopBetPopover } from '../../composables/useDesktopBetPopover';

 const props = defineProps<{
  selections: {
@@ -12,12 +14,17 @@ 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();
+const { cancelClose } = useDesktopBetPopover();

 function label(sel: (typeof props.selections)[number]) {
  if (sel.selectionDisplayName?.trim()) return sel.selectionDisplayName;
@@ -29,23 +36,41 @@ 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 }" @mouseenter="cancelClose">
+    <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)"
+        @mouseenter="onPick(sel.id, $event)"
+        @click="onPick(sel.id, $event)"
      >
        <span class="label">{{ label(sel) }}</span>
        <span class="odds">{{ sel.odds }}</span>
@@ -54,6 +79,7 @@ function onPick(id: string) {
  </div>
 </template>

+
 <style scoped>
 .wrap {
  padding: 6px 8px 8px;
@@ -61,16 +87,104 @@ function onPick(id: string) {
  border-top: 1px solid var(--border);
 }

+.wrap.compact {
+  padding: 2px 4px 4px;
+}
+
+.wrap.compact:not(.horizontal) {
+  padding: 2px 4px 4px;
+}
+
+.wrap.horizontal {
+  padding: 0;
+  background: transparent;
+}
+
+.wrap.desktopCard {
+  padding: 0;
+  background: transparent;
+}
+
 .wrap.locked {
  opacity: 0.78;
 }

+/* ── 基础网格 ── */
 .panel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
 }

+.wrap.compact .panel:not(.horizontal) {
+  gap: 2px;
+}
+
+.wrap.compact:not(.horizontal) .odds-btn {
+  min-height: 30px;
+  padding: 3px 2px;
+  font-size: 10px;
+}
+
+/* ── Horizontal 行内布局 ── */
+.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;
+}
+
+/* ── Desktop Card 紧凑布局 ── */
+.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: 34px;
+  padding: 3px 4px;
+  gap: 1px;
+}
+
+.panel.desktop-card .odds-btn .label {
+  font-size: 8px;
+  line-height: 1.15;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.panel.desktop-card .odds-btn .odds {
+  font-size: 12px;
+  line-height: 1.1;
+}
+
+/* ── Odds Button ── */
 .odds-btn {
  display: flex;
  flex-direction: column;
@@ -83,15 +197,29 @@ function onPick(id: string) {
  background: var(--bg-card);
  border: 1px solid var(--border);
  text-align: center;
+  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
 }

+.odds-btn:hover:not(.odds-btn--locked) {
+  border-color: var(--primary-light);
+  background: var(--bg-hover);
+}
+
 .odds-btn.selected {
  border-color: var(--primary);
  border-width: 2px;
  background: rgba(244, 162, 97, 0.08);
 }

+.odds-btn.selected .label {
+  color: var(--primary-light);
+}
+
+.odds-btn.selected .odds {
+  color: var(--primary);
+}
+
 .odds-btn--locked {
  background: var(--bg-elevated);
  border-color: var(--border);