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