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;
--- a/apps/player/src/composables/usePlayerHome.ts
+++ b/apps/player/src/composables/usePlayerHome.ts
@@ -50,7 +50,8 @@ function collectAnnouncementLines(data: HomePayload | null): string[] {
 export function usePlayerHome() {
  const { t } = useI18n();

-  async function load() {
+  async function load(force = false) {
+    if (!force && homeRaw.value) return;
    loading.value = true;
    try {
      const { data } = await api.get('/player/home');
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -10,12 +10,11 @@ import LocaleSwitcher from '../components/LocaleSwitcher.vue';
 import { useAppLocale } from '../composables/useAppLocale';
 import AnnouncementMarquee from '../components/AnnouncementMarquee.vue';
 import BottomNavIcon from '../components/BottomNavIcon.vue';
-import { computed, onMounted, watch } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
-import { useOnLocaleChange } from '../composables/useOnLocaleChange';
 import { usePlayerProfile } from '../composables/usePlayerProfile';

-const { t } = useI18n();
+const { t, locale } = useI18n();
 const auth = useAuthStore();
 const { initFromUser } = useAppLocale();
 const route = useRoute();
@@ -43,8 +42,22 @@ const showBottomNav = computed(() => {
 });
 const { announcements, load: loadPlayerHome } = usePlayerHome();
 const { loadProfile } = usePlayerProfile();
+const mainRef = ref<HTMLElement | null>(null);
+const tabScrollTops = new Map<string, number>();

-useOnLocaleChange(loadPlayerHome);
+watch(locale, (next, prev) => {
+  if (prev && next !== prev) void loadPlayerHome(true);
+});
+
+watch(
+  () => route.fullPath,
+  (_path, oldPath) => {
+    const el = mainRef.value;
+    if (!el) return;
+    if (oldPath) tabScrollTops.set(oldPath, el.scrollTop);
+    el.scrollTop = tabScrollTops.get(route.fullPath) ?? 0;
+  },
+);

 onMounted(() => {
  if (auth.user?.locale) initFromUser(auth.user.locale);
@@ -55,7 +68,7 @@ watch(
  (token) => {
    if (token) {
      void loadPlayerHome();
-      void loadProfile(true);
+      void loadProfile();
    }
  },
  { immediate: true },
@@ -77,8 +90,13 @@ watch(
      <AnnouncementMarquee :items="announcements" embedded />
    </div>

-    <main :class="['main', { 'has-nav': showBottomNav }]">
-      <RouterView />
+    <main ref="mainRef" :class="['main', { 'has-nav': showBottomNav }]">
+      <RouterView v-slot="{ Component, route: viewRoute }">
+        <KeepAlive v-if="viewRoute.meta.keepAlive">
+          <component :is="Component" :key="viewRoute.path" />
+        </KeepAlive>
+        <component v-else :is="Component" :key="viewRoute.fullPath" />
+      </RouterView>
    </main>

    <nav v-if="showBottomNav" class="bottom-nav" aria-label="Main">
--- a/apps/player/src/main.ts
+++ b/apps/player/src/main.ts
@@ -150,6 +150,8 @@ const i18n = createI18n({
        tab_parlay: '串关投注',
        tab_today: '今日',
        tab_early: '早盘',
+        show_open_only: '仅显示待开赛',
+        show_all_matches: '显示全部',
        today: '今日',
        loading: '加载中…',
        no_matches: '暂无赛事',
@@ -460,6 +462,8 @@ const i18n = createI18n({
        tab_parlay: 'Parlay',
        tab_today: 'Today',
        tab_early: 'Early',
+        show_open_only: 'Open only',
+        show_all_matches: 'Show all',
        today: 'Today',
        loading: 'Loading…',
        no_matches: 'No matches',
@@ -776,6 +780,8 @@ const i18n = createI18n({
        tab_parlay: 'Berganda',
        tab_today: 'Hari Ini',
        tab_early: 'Awal',
+        show_open_only: 'Buka sahaja',
+        show_all_matches: 'Tunjuk semua',
        today: 'Hari Ini',
        loading: 'Memuatkan…',
        no_matches: 'Tiada perlawanan',
--- a/apps/player/src/router/index.ts
+++ b/apps/player/src/router/index.ts
@@ -10,17 +10,17 @@ const router = createRouter({
      component: () => import('../layouts/MainLayout.vue'),
      meta: { requiresAuth: true },
      children: [
-        { path: '', component: () => import('../views/HomeView.vue') },
-        { path: 'bet', component: () => import('../views/FootballView.vue') },
+        { path: '', component: () => import('../views/HomeView.vue'), meta: { keepAlive: true } },
+        { path: 'bet', component: () => import('../views/FootballView.vue'), meta: { keepAlive: true } },
        { path: 'football', redirect: '/bet' },
        { path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
-        { path: 'bets', component: () => import('../views/MyBetsView.vue') },
+        { path: 'bets', component: () => import('../views/MyBetsView.vue'), meta: { keepAlive: true } },
        { path: 'bets/:betNo', component: () => import('../views/BetDetailView.vue') },
-        { path: 'wallet', component: () => import('../views/WalletView.vue') },
+        { path: 'wallet', component: () => import('../views/WalletView.vue'), meta: { keepAlive: true } },
        { path: 'wallet/detail', component: () => import('../views/WalletDetailView.vue') },
        { path: 'wallet/cashbacks', component: () => import('../views/CashbackRecordsView.vue') },
        { path: 'wallet/transactions/:transactionId', component: () => import('../views/WalletTransactionDetailView.vue') },
-        { path: 'profile', component: () => import('../views/ProfileView.vue') },
+        { path: 'profile', component: () => import('../views/ProfileView.vue'), meta: { keepAlive: true } },
        { path: 'profile/cashbacks', component: () => import('../views/CashbackRecordsView.vue') },
        { path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },
      ],
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -54,6 +54,7 @@ const slip = useBetSlipStore();

 const mainTab = ref<MainTab>('matches');
 const timeTab = ref<TimeTab>('early');
+const showAll = ref(false);
 const matches = ref<Match[]>([]);
 const loading = ref(true);
 const expandedLeagues = ref<Set<string>>(new Set());
@@ -98,7 +99,10 @@ const filteredMatches = computed(() => {
  if (mainTab.value !== 'matches') return [];
  return matches.value.filter((m) => {
    const today = isKickoffToday(m.startTime);
-    return timeTab.value === 'today' ? today : !today;
+    const timeMatch = timeTab.value === 'today' ? today : !today;
+    if (!timeMatch) return false;
+    if (!showAll.value && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
+    return true;
  });
 });

@@ -219,6 +223,18 @@ function goMatch(id: string) {
        </button>
      </div>

+      <div class="phase-filter">
+        <button
+          type="button"
+          class="phase-toggle"
+          :class="{ 'phase-toggle--active': showAll }"
+          @click="showAll = !showAll"
+        >
+          <span class="phase-toggle-dot" />
+          {{ showAll ? t('bet.show_all_matches') : t('bet.show_open_only') }}
+        </button>
+      </div>
+
      <div v-if="loading" class="state">
        <GoldSpinner :size="36" />
      </div>
@@ -242,11 +258,9 @@ function goMatch(id: string) {
      </div>
    </div>

-    <div v-show="mainTab === 'outright'" class="outright-tab">
-      <OutrightPanel />
-    </div>
+    <OutrightPanel v-if="mainTab === 'outright'" class="outright-tab" />

-    <ParlayPanel v-show="mainTab === 'parlay'" />
+    <ParlayPanel v-if="mainTab === 'parlay'" />
  </div>
 </template>

@@ -330,6 +344,43 @@ function goMatch(id: string) {
  font-weight: 800;
 }

+.phase-filter {
+  padding: 0 12px 10px;
+}
+
+.phase-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #999;
+  background: #141414;
+  border: 1px solid #333;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.phase-toggle--active {
+  color: var(--primary-light);
+  border-color: var(--primary);
+  background: rgba(200, 168, 78, 0.08);
+}
+
+.phase-toggle-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #555;
+  transition: background 0.2s ease;
+}
+
+.phase-toggle--active .phase-toggle-dot {
+  background: var(--primary-light);
+}
+
 .league-list {
  padding: 4px 12px 0;
 }
--- a/apps/player/src/views/HomeView.vue
+++ b/apps/player/src/views/HomeView.vue
@@ -16,7 +16,7 @@ const router = useRouter();
 const { banners, hotMatches, loading, load } = usePlayerHome();

 const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
-  onRefresh: async () => { await load(); },
+  onRefresh: async () => { await load(true); },
 });

 const pullIndicatorStyle = () => ({