perf(player): 优化 Tab 切换性能并改进投注历史展示

- 主 Tab 启用 keep-alive，恢复各页滚动位置，避免切页重复加载与重复请求 - 首页数据缓存、余额/头像共用 profile 缓存，冠军盘与串关面板按需加载 - 球赛与串关列表新增「仅显示待开赛」筛选 - 重构历史注单卡片，展示注单类型、赔率与日期 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-10 17:33:06 +08:00
parent a8ee28fcce
commit 785fa4416d
10 changed files with 212 additions and 53 deletions
--- a/apps/player/src/components/BetHistoryCard.vue
+++ b/apps/player/src/components/BetHistoryCard.vue
@@ -88,6 +88,18 @@ const subtitle = computed(() => {

 const stakeAmount = computed(() => formatMoney(props.bet.stake, locale.value));

+const oddsText = computed(() => {
+  const o = props.bet.totalOdds;
+  if (o == null || o === '' || o === 0) return '';
+  const n = parseFloat(String(o));
+  return Number.isFinite(n) ? n.toFixed(2) : String(o);
+});
+
+const betTypeLabel = computed(() => {
+  if (props.bet.isParlay) return t('bet.parlay');
+  return props.bet.betType || '';
+});
+
 const returnAmount = computed(() => {
  if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
  if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
@@ -107,17 +119,22 @@ function goDetail() {
 <template>
  <article class="bet-card" @click="goDetail">
    <StatusWatermark :label="watermarkLabel" :variant="watermarkVariant" />
-    <div class="card-left">
+    <div class="card-body">
+      <div class="card-header">
+        <span v-if="betTypeLabel" class="bet-type-tag">{{ betTypeLabel }}</span>
+        <span class="card-date">{{ placedDate }}</span>
+      </div>
      <span class="title">{{ title }}</span>
-      <span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
-    </div>
-    <div class="card-right">
-      <span class="stake-amt">
-        {{ t('history.stake') }} {{ stakeAmount }}
-      </span>
-      <span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
-        {{ returnAmount }}
-      </span>
+      <div class="card-detail-row">
+        <span class="pick-label">{{ subtitle }}</span>
+        <span v-if="oddsText" class="odds-badge">@{{ oddsText }}</span>
+      </div>
+      <div class="card-footer">
+        <span class="stake-amt">{{ t('history.stake') }} {{ stakeAmount }}</span>
+        <span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
+          {{ returnAmount }}
+        </span>
+      </div>
    </div>
    <span class="chevron">›</span>
  </article>
@@ -141,12 +158,37 @@ function goDetail() {
  background: rgba(255, 255, 255, 0.02);
 }

-.card-left {
+.card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
-  gap: 3px;
+  gap: 4px;
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.bet-type-tag {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--primary-light, #c8a84e);
+  background: rgba(200, 168, 78, 0.12);
+  border: 1px solid rgba(200, 168, 78, 0.25);
+  border-radius: 4px;
+  padding: 1px 6px;
+  letter-spacing: 0.02em;
+}
+
+.card-date {
+  font-size: 10px;
+  color: #555;
+  font-weight: 600;
+  flex-shrink: 0;
 }

 .title {
@@ -158,21 +200,39 @@ function goDetail() {
  text-overflow: ellipsis;
 }

-.subtitle {
+.card-detail-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.pick-label {
  font-size: 11px;
-  color: #666;
+  color: #888;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
 }

-.card-right {
+.odds-badge {
+  font-size: 11px;
+  font-weight: 800;
+  color: #c8a84e;
+  background: rgba(200, 168, 78, 0.1);
+  border-radius: 4px;
+  padding: 1px 6px;
  flex-shrink: 0;
+}
+
+.card-footer {
  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 2px;
 }

 .stake-amt {
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
+import { usePlayerProfile } from '../composables/usePlayerProfile';

 const { locale, t } = useI18n();
+const { profileRaw } = usePlayerProfile();
 const open = ref(false);
 const root = ref<HTMLElement | null>(null);
-const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
+
+const wallet = computed(() => profileRaw.value?.wallet ?? null);

 function amountValue(value: unknown): number {
  if (value == null) return 0;
@@ -33,15 +35,6 @@ const total = computed(() =>
  ),
 );

-onMounted(async () => {
-  try {
-    const { data } = await api.get('/player/profile');
-    wallet.value = data.data?.wallet ?? null;
-  } catch {
-    wallet.value = null;
-  }
-});
-
 function toggle() {
  open.value = !open.value;
 }
--- a/apps/player/src/components/UserAvatarMenu.vue
+++ b/apps/player/src/components/UserAvatarMenu.vue
@@ -9,7 +9,7 @@ import { usePlayerProfile } from '../composables/usePlayerProfile';
 const { t } = useI18n();
 const auth = useAuthStore();
 const router = useRouter();
-const { avatarUrl, loadProfile } = usePlayerProfile();
+const { avatarUrl } = usePlayerProfile();
 const open = ref(false);
 const root = ref<HTMLElement | null>(null);

@@ -19,10 +19,6 @@ const displayAvatarUrl = computed(() => {
  return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
 });

-onMounted(() => {
-  void loadProfile();
-});
-
 function toggle() {
  open.value = !open.value;
 }
--- a/apps/player/src/components/parlay/ParlayPanel.vue
+++ b/apps/player/src/components/parlay/ParlayPanel.vue
@@ -61,6 +61,7 @@ const loading = ref(true);
 const matches = ref<ParlayMatch[]>([]);
 const timeFilter = ref<TimeFilter>('all');
 const leagueFilter = ref('');
+const showClosed = ref(false);
 const collapsed = ref<Set<string>>(new Set());

 const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
@@ -190,6 +191,12 @@ const filteredMatches = computed(() => {
  if (leagueFilter.value) {
    list = list.filter((m) => (m.leagueId ?? m.leagueName) === leagueFilter.value);
  }
+  if (!showClosed.value) {
+    list = list.filter((m) => {
+      const phase = m.matchPhase ?? (m.bettingOpen === false ? 'closed_pending' : 'open');
+      return phase === 'open' || phase === undefined;
+    });
+  }
  return list;
 });

@@ -273,6 +280,14 @@ function toggleCollapse(id: string) {
        <option value="">{{ t('bet.parlay_filter_all') }}</option>
        <option v-for="lg in leagues" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
      </select>
+      <button
+        type="button"
+        class="phase-toggle"
+        :class="{ 'phase-toggle--active': showClosed }"
+        @click="showClosed = !showClosed"
+      >
+        {{ showClosed ? t('bet.show_all_matches') : t('bet.show_open_only') }}
+      </button>
      <BetGuideHelp
        :title="t('bet.parlay_guide_title')"
        :aria-label="t('bet.parlay_guide_help')"
@@ -445,6 +460,25 @@ function toggleCollapse(id: string) {
  max-width: 140px;
 }

+.phase-toggle {
+  padding: 7px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #888;
+  background: #141414;
+  border: 1px solid #333;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.phase-toggle--active {
+  color: var(--primary-light);
+  border-color: var(--primary);
+  background: rgba(200, 168, 78, 0.08);
+}
+
 .parlay-foot-fixed {
  position: fixed;
  left: 0;