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

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

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

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