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

- 主 Tab 启用 keep-alive，恢复各页滚动位置，避免切页重复加载与重复请求
- 首页数据缓存、余额/头像共用 profile 缓存，冠军盘与串关面板按需加载
- 球赛与串关列表新增「仅显示待开赛」筛选
- 重构历史注单卡片，展示注单类型、赔率与日期

Co-authored-by: Cursor <cursoragent@cursor.com>

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,18 +119,23 @@ function goDetail() {
 <template>
   <article class="bet-card" @click="goDetail">
     <StatusWatermark :label="watermarkLabel" :variant="watermarkVariant" />
-    <div class="card-left">
+    <div class="card-body">
-      <span class="title">{{ title }}</span>
+      <div class="card-header">
-      <span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
+        <span v-if="betTypeLabel" class="bet-type-tag">{{ betTypeLabel }}</span>
+        <span class="card-date">{{ placedDate }}</span>
       </div>
-    <div class="card-right">
+      <span class="title">{{ title }}</span>
-      <span class="stake-amt">
+      <div class="card-detail-row">
-        {{ t('history.stake') }} {{ stakeAmount }}
+        <span class="pick-label">{{ subtitle }}</span>
-      </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>
 </template>
@@ -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: center;
-  align-items: flex-end;
+  justify-content: space-between;
-  gap: 4px;
+  gap: 8px;
+  margin-top: 2px;
 }
 
 .stake-amt {

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;
 }

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;
 }

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;

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');

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 }]">
+    <main ref="mainRef" :class="['main', { 'has-nav': showBottomNav }]">
-      <RouterView />
+      <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">

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',

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: '', component: () => import('../views/HomeView.vue'), meta: { keepAlive: true } },
-        { path: 'bet', component: () => import('../views/FootballView.vue') },
+        { 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') },
       ],

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 v-if="mainTab === 'outright'" class="outright-tab" />
-      <OutrightPanel />
-    </div>
 
-    <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;
 }

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 = () => ({