feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化

管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。

API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。

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

apps/player/src/views/BetDetailView.vue

@@ -0,0 +1,580 @@
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
+
+const route = useRoute();
+const router = useRouter();
+const { t, locale } = useI18n();
+
+const bet = ref<BetHistoryItem | null>(null);
+const loading = ref(true);
+const notFound = ref(false);
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get(`/player/bets/${route.params.betNo}`);
+    if (!data.data) { notFound.value = true; return; }
+    bet.value = data.data;
+  } catch {
+    notFound.value = true;
+  } finally {
+    loading.value = false;
+  }
+});
+
+const statusKey = computed(() => {
+  const s = (bet.value?.status ?? '').toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
+  return 'pending';
+});
+
+const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
+
+const placedDateTime = computed(() => {
+  if (!bet.value) return '';
+  const d = new Date(bet.value.placedAt);
+  const date = d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' });
+  const time = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
+  return `${date}  ${time}`;
+});
+
+const returnAmount = computed(() => {
+  if (!bet.value) return '';
+  if (statusKey.value === 'won') return formatMoney(bet.value.actualReturn, locale.value);
+  if (statusKey.value === 'pending') return formatMoney(bet.value.potentialReturn, locale.value);
+  if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(bet.value.stake ?? 0)), locale.value);
+  return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
+});
+
+function formatOdds(v: unknown): string {
+  const n = parseFloat(String(v));
+  return isNaN(n) || n <= 0 ? '-' : n.toFixed(2);
+}
+
+const SEL_TRANS: Record<string, Record<string, string>> = {
+  '主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
+  '客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
+  '和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
+  '主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
+  '客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
+  '大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
+  '小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
+  '单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
+  '双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
+  '冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
+};
+
+function translateSel(name: string): string {
+  if (locale.value === 'zh-CN') return name;
+  const exact = SEL_TRANS[name];
+  if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
+  const sp = name.indexOf(' ');
+  if (sp > 0) {
+    const head = name.slice(0, sp);
+    const m = SEL_TRANS[head];
+    if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
+  }
+  return name;
+}
+
+function legStatusKey(rs: string | null | undefined) {
+  if (!rs) return 'pending';
+  const s = rs.toUpperCase();
+  if (s === 'WON' || s === 'WIN') return 'won';
+  if (s === 'LOST' || s === 'LOSE') return 'lost';
+  return 'push';
+}
+
+const matchTitle = computed(() => {
+  if (!bet.value) return '';
+  if (bet.value.isParlay) {
+    const n = bet.value.legCount ?? bet.value.legs?.length ?? 0;
+    return t('history.parlay_title', { n });
+  }
+  return bet.value.matchTitle;
+});
+
+const myPick = computed(() => {
+  if (!bet.value || bet.value.isParlay) return '';
+  const raw = bet.value.pickLabel ?? '';
+  if (locale.value === 'zh-CN' || !raw) return raw;
+  const ci = raw.indexOf(': ');
+  if (ci < 0) return raw;
+  return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
+});
+</script>
+
+<template>
+  <div class="detail-page">
+    <!-- back bar -->
+    <div class="top-bar">
+      <button class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
+    </div>
+
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
+    <div v-else-if="notFound || !bet" class="state">{{ t('history.not_found') }}</div>
+
+    <template v-else>
+      <!-- status hero -->
+      <div class="hero" :class="statusKey">
+        <span class="hero-status">{{ statusLabel }}</span>
+        <span class="hero-return">{{ returnAmount }}</span>
+        <span class="hero-return-label">
+          {{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}
+        </span>
+      </div>
+
+      <!-- match / parlay title -->
+      <section class="section">
+        <div class="section-head">
+          <span class="league-tag">
+            {{ bet.isParlay ? t('history.parlay_league') : (bet.leagueName || t('history.league_default')) }}
+          </span>
+          <span class="placed-time">{{ placedDateTime }}</span>
+        </div>
+        <div class="match-name">{{ matchTitle }}</div>
+
+        <!-- single bet: score comparison -->
+        <div v-if="!bet.isParlay" class="score-block">
+          <!-- my pick row -->
+          <div class="row-label-val">
+            <span class="row-label">{{ t('history.my_pick') }}</span>
+            <span class="row-val pick">{{ myPick }}</span>
+          </div>
+          <!-- scores -->
+          <div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-chips">
+            <div v-if="bet.matchScore.ft" class="score-item">
+              <span class="score-period">{{ t('history.ft') }}</span>
+              <span class="score-value">{{ bet.matchScore.ft }}</span>
+            </div>
+            <div v-if="bet.matchScore.ht" class="score-item">
+              <span class="score-period">{{ t('history.ht') }}</span>
+              <span class="score-value muted">{{ bet.matchScore.ht }}</span>
+            </div>
+          </div>
+          <div v-else-if="statusKey === 'pending'" class="no-score">{{ t('history.awaiting_result') }}</div>
+        </div>
+      </section>
+
+      <!-- parlay legs -->
+      <section v-if="bet.isParlay && bet.legs?.length" class="section">
+        <div class="section-title">{{ t('history.legs') }}</div>
+        <div class="legs-list">
+          <div v-for="(leg, i) in bet.legs" :key="i" class="leg-row" :class="legStatusKey(leg.resultStatus)">
+            <div class="leg-left">
+              <span class="leg-num" :class="legStatusKey(leg.resultStatus)">{{ i + 1 }}</span>
+              <div class="leg-body">
+                <span class="leg-match">{{ leg.matchTitle }}</span>
+                <span class="leg-pick-line">
+                  {{ leg.marketLabel }}: {{ translateSel(leg.selectionName) }}
+                </span>
+                <div v-if="leg.score?.ft || leg.score?.ht" class="leg-scores">
+                  <span v-if="leg.score.ft">{{ t('history.ft') }} {{ leg.score.ft }}</span>
+                  <span v-if="leg.score.ht" class="muted-score">{{ t('history.ht') }} {{ leg.score.ht }}</span>
+                </div>
+              </div>
+            </div>
+            <div class="leg-right">
+              <span class="leg-odds-val">{{ formatOdds(leg.odds) }}</span>
+              <span v-if="leg.resultStatus" class="leg-result-badge" :class="legStatusKey(leg.resultStatus)">
+                {{ t(`history.status_${legStatusKey(leg.resultStatus)}`) }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <!-- bet summary -->
+      <section class="section">
+        <div class="section-title">{{ t('history.summary') }}</div>
+        <div class="summary-rows">
+          <div class="sum-row">
+            <span>{{ t('history.stake') }}</span>
+            <span>{{ formatMoney(bet.stake, locale) }}</span>
+          </div>
+          <div v-if="bet.totalOdds" class="sum-row">
+            <span>{{ t('history.odds') }}</span>
+            <span class="odds-val">{{ formatOdds(bet.totalOdds) }}</span>
+          </div>
+          <div class="sum-row">
+            <span>{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}</span>
+            <span :class="{ 'amt-won': statusKey === 'won', 'amt-pending': statusKey === 'pending', 'amt-lost': statusKey === 'lost' }">
+              {{ returnAmount }}
+            </span>
+          </div>
+          <div class="sum-row muted">
+            <span>{{ t('history.bet_no') }}</span>
+            <span class="bet-no-val">{{ bet.betNo }}</span>
+          </div>
+        </div>
+      </section>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.detail-page {
+  padding-bottom: 32px;
+}
+
+.top-bar {
+  margin-bottom: 4px;
+}
+
+.back-btn {
+  background: none;
+  border: none;
+  color: var(--primary-light, #d4af37);
+  font-size: 15px;
+  font-weight: 700;
+  padding: 4px 0 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+
+.state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #666;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+/* ── hero ── */
+.hero {
+  border-radius: 14px;
+  padding: 20px 20px 18px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 12px;
+  text-align: center;
+}
+
+.hero.won    { background: linear-gradient(135deg, rgba(61,184,101,0.15), rgba(61,184,101,0.06)); border: 1px solid rgba(61,184,101,0.25); }
+.hero.lost   { background: linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05)); border: 1px solid rgba(224,80,80,0.2); }
+.hero.pending { background: linear-gradient(135deg, rgba(232,200,74,0.1), rgba(232,200,74,0.04)); border: 1px solid rgba(232,200,74,0.2); }
+.hero.push   { background: #181818; border: 1px solid #2a2a2a; }
+
+.hero-status {
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  opacity: 0.7;
+}
+.hero.won    .hero-status  { color: #3db865; }
+.hero.lost   .hero-status  { color: #e05050; }
+.hero.pending .hero-status { color: #e8c84a; }
+.hero.push   .hero-status  { color: #888; }
+
+.hero-return {
+  font-size: 36px;
+  font-weight: 900;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+.hero.won    .hero-return  { color: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
+.hero.lost   .hero-return  { color: #e05050; }
+.hero.pending .hero-return { color: #e8c84a; }
+.hero.push   .hero-return  { color: #777; }
+
+.hero-return-label {
+  font-size: 10.5px;
+  color: #555;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+/* ── sections ── */
+.section {
+  background: #141414;
+  border: 1px solid #222;
+  border-radius: 12px;
+  padding: 14px 16px;
+  margin-bottom: 10px;
+}
+
+.section-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 6px;
+}
+
+.league-tag {
+  font-size: 11px;
+  color: #888;
+  font-weight: 700;
+}
+
+.placed-time {
+  font-size: 11px;
+  color: #555;
+  font-weight: 600;
+}
+
+.match-name {
+  font-size: 17px;
+  font-weight: 900;
+  color: #f0f0f0;
+  line-height: 1.3;
+  margin-bottom: 10px;
+}
+
+/* score block */
+.score-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.row-label-val {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+}
+
+.row-label {
+  font-size: 11px;
+  color: #666;
+  font-weight: 600;
+}
+
+.row-val {
+  font-size: 13px;
+  font-weight: 700;
+  color: #c8c8c8;
+}
+
+.row-val.pick {
+  color: #d4af37;
+}
+
+.score-chips {
+  display: flex;
+  gap: 8px;
+}
+
+.score-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  background: #1e1e1e;
+  border: 1px solid #2a2a2a;
+  border-radius: 7px;
+  padding: 5px 10px;
+}
+
+.score-period {
+  font-size: 10px;
+  color: #666;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+
+.score-value {
+  font-size: 16px;
+  font-weight: 900;
+  color: #e8e8e8;
+}
+
+.score-value.muted {
+  color: #666;
+  font-size: 13px;
+}
+
+.no-score {
+  font-size: 11.5px;
+  color: #555;
+  font-style: italic;
+}
+
+/* section title */
+.section-title {
+  font-size: 10.5px;
+  color: #555;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 10px;
+}
+
+/* parlay legs */
+.legs-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.leg-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  background: #1a1a1a;
+  border: 1px solid #252525;
+  border-radius: 9px;
+  padding: 10px 12px;
+}
+
+.leg-row.won  { border-color: rgba(61,184,101,0.2); }
+.leg-row.lost { border-color: rgba(224,80,80,0.18); }
+
+.leg-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.leg-num {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #2a2a2a;
+  color: #666;
+  font-size: 10px;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+}
+
+.leg-num.won  { background: rgba(61,184,101,0.18); color: #3db865; }
+.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
+
+.leg-body {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  min-width: 0;
+}
+
+.leg-match {
+  font-size: 12.5px;
+  font-weight: 800;
+  color: #d0d0d0;
+}
+
+.leg-pick-line {
+  font-size: 11.5px;
+  color: #888;
+  font-weight: 600;
+}
+
+.leg-scores {
+  display: flex;
+  gap: 8px;
+  margin-top: 2px;
+}
+
+.leg-scores span {
+  font-size: 11px;
+  font-weight: 700;
+  color: #c8c8c8;
+}
+
+.leg-scores .muted-score {
+  color: #555;
+}
+
+.leg-right {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+}
+
+.leg-odds-val {
+  font-size: 15px;
+  font-weight: 900;
+  color: #b8a04a;
+}
+
+.leg-result-badge {
+  font-size: 9px;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  padding: 2px 6px;
+  border-radius: 10px;
+}
+
+.leg-result-badge.won   { color: #3db865; background: rgba(61,184,101,0.12); }
+.leg-result-badge.lost  { color: #e05050; background: rgba(224,80,80,0.1); }
+.leg-result-badge.push  { color: #888; background: #222; }
+.leg-result-badge.pending { color: #666; background: #1e1e1e; }
+
+/* summary */
+.summary-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.sum-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 0;
+  border-bottom: 1px solid #1c1c1c;
+  font-size: 13px;
+  color: #b0b0b0;
+  font-weight: 600;
+}
+
+.sum-row:last-child {
+  border-bottom: none;
+}
+
+.sum-row.muted {
+  color: #444;
+  font-size: 11px;
+}
+
+.odds-val {
+  color: #b8a04a;
+  font-weight: 800;
+}
+
+.amt-won {
+  color: #3db865;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.amt-pending {
+  color: #e8c84a;
+  font-weight: 900;
+}
+
+.amt-lost {
+  color: #e05050;
+  font-weight: 900;
+  font-size: 15px;
+}
+
+.bet-no-val {
+  font-family: monospace;
+  letter-spacing: 0.04em;
+}
+</style>

apps/player/src/views/FootballView.vue

@@ -9,6 +9,8 @@ import OutrightPanel from '../components/outright/OutrightPanel.vue';
 import ParlayPanel from '../components/parlay/ParlayPanel.vue';
 import emptyMatchesImg from '../assets/images/empty-matches.svg';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 type MainTab = 'matches' | 'outright' | 'parlay';
 type TimeTab = 'today' | 'early';
@@ -58,6 +60,15 @@ async function loadMatches() {
 
 useOnLocaleChange(loadMatches);
 
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadMatches(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
 function dayStart(d: Date) {
   const x = new Date(d);
   x.setHours(0, 0, 0, 0);
@@ -140,6 +151,13 @@ function goMatch(id: string) {
 
 <template>
   <div class="bet-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <div class="main-tabs">
       <button
         type="button"
@@ -171,7 +189,7 @@ function goMatch(id: string) {
       </button>
     </div>
 
-    <template v-if="mainTab === 'matches'">
+    <div v-show="mainTab === 'matches'">
       <div class="time-tabs">
         <button
           type="button"
@@ -191,8 +209,9 @@ function goMatch(id: string) {
         </button>
       </div>
 
-      <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
-
+      <div v-if="loading" class="state">
+        <GoldSpinner :size="36" />
+      </div>
       <div v-else-if="leagueGroups.length" class="league-list">
         <LeagueAccordionItem
           v-for="group in leagueGroups"
@@ -211,17 +230,25 @@ function goMatch(id: string) {
         <img :src="emptyMatchesImg" alt="" class="empty-icon" />
         <p>{{ t('bet.no_matches') }}</p>
       </div>
-    </template>
+    </div>
 
-    <div v-else-if="mainTab === 'outright'" class="outright-tab">
+    <div v-show="mainTab === 'outright'" class="outright-tab">
       <OutrightPanel />
     </div>
 
-    <ParlayPanel v-else-if="mainTab === 'parlay'" />
+    <ParlayPanel v-show="mainTab === 'parlay'" />
   </div>
 </template>
 
 <style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .bet-page {
   margin: 0 -16px;
   padding-bottom: 8px;

apps/player/src/views/HomeView.vue

@@ -7,11 +7,22 @@ import cardBg from '../assets/images/卡片.png';
 import BannerCarousel from '../components/BannerCarousel.vue';
 import { usePlayerHome } from '../composables/usePlayerHome';
 import TeamEmblem from '../components/TeamEmblem.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const matchCardBg = `url(${cardBg})`;
 const { t, locale } = useI18n();
 const router = useRouter();
-const { banners, hotMatches, loading } = usePlayerHome();
+const { banners, hotMatches, loading, load } = usePlayerHome();
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await load(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
 
 function goMatch(id: string) {
   router.push(`/match/${id}`);
@@ -32,6 +43,13 @@ function formatKickoff(startTime: string) {
 
 <template>
   <div>
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <BannerCarousel :banners="banners" />
 
     <h2 class="section-title">{{ t('home.hot_matches') }}</h2>
@@ -94,6 +112,14 @@ function formatKickoff(startTime: string) {
 </template>
 
 <style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .match-card {
   position: relative;
   isolation: isolate;

apps/player/src/views/MatchDetailView.vue

@@ -16,6 +16,8 @@ import CorrectScoreConfirmModal, {
 import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
 import vsImg from '../assets/images/vs.png';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import BetSuccessOverlay from '../components/BetSuccessOverlay.vue';
 import cardBg from '../assets/images/卡片.png';
 
 const heroCardBg = `url(${cardBg})`;
@@ -65,6 +67,7 @@ const expandedKey = ref<string | null>(null);
 const correctScoreStakes = ref<Record<string, number>>({});
 const placingCs = ref(false);
 const csMessage = ref('');
+const showCsSuccess = ref(false);
 const csConfirmOpen = ref(false);
 const csConfirmMarketType = ref<string | null>(null);
 const marketsByType = computed(() => {
@@ -188,6 +191,7 @@ async function placeCorrectScoreBets(marketType: string) {
     const next = { ...correctScoreStakes.value };
     for (const sel of entries) delete next[sel.id];
     correctScoreStakes.value = next;
+    showCsSuccess.value = true;
   } catch (e: unknown) {
     csMessage.value =
       (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -270,11 +274,11 @@ function hasSlipPickForMarket(marketType: string) {
       </div>
     </header>
 
-    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
-
+    <div v-if="loading" class="state">
+      <GoldSpinner :size="36" />
+    </div>
     <template v-else-if="match">
       <section class="match-hero">
-        <p class="kickoff">{{ kickoff }}</p>
         <div class="hero-teams">
           <!-- home -->
           <div class="hero-team">
@@ -325,6 +329,8 @@ function hasSlipPickForMarket(marketType: string) {
             <span class="hero-name">{{ match.awayTeamName }}</span>
           </div>
         </div>
+
+        <p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
       </section>
 
       <section class="markets-section">
@@ -391,6 +397,8 @@ function hasSlipPickForMarket(marketType: string) {
       </section>
     </template>
   </div>
+
+  <BetSuccessOverlay :show="showCsSuccess" @done="showCsSuccess = false" />
 </template>
 
 <style scoped>
@@ -405,6 +413,12 @@ function hasSlipPickForMarket(marketType: string) {
   justify-content: space-between;
   padding: 4px 12px 8px;
   gap: 8px;
+  position: sticky;
+  top: -12px;
+  z-index: 50;
+  margin-top: -12px;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
 }
 
 .toolbar-title {
@@ -467,8 +481,9 @@ function hasSlipPickForMarket(marketType: string) {
   z-index: 1;
   font-size: 11px;
   color: var(--text-muted);
-  text-align: center;
-  margin-bottom: 14px;
+  text-align: left;
+  margin-top: 10px;
+  padding-left: 2px;
 }
 
 .hero-teams {
@@ -615,13 +630,32 @@ function hasSlipPickForMarket(marketType: string) {
 }
 
 .market-list {
-  border-radius: 6px;
-  overflow: hidden;
-  background: #111;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 4px 0;
 }
 
-.market-group + .market-group {
-  border-top: 1px solid #252525;
+.market-group {
+  border-radius: 8px;
+  border: 1px solid #252525;
+  background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
+  overflow: hidden;
+  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.market-group.open {
+  border-color: rgba(212, 175, 55, 0.25);
+  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
+}
+
+.market-group :deep(.row) {
+  border-radius: 8px;
+}
+
+.market-group.open :deep(.row) {
+  border-radius: 0;
 }
 
 .market-foot-btn {

apps/player/src/views/MyBetsView.vue

@@ -3,7 +3,10 @@ import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
+import BetStatsPanel from '../components/BetStatsPanel.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const { t } = useI18n();
 
@@ -13,15 +16,26 @@ const page = ref(1);
 const loading = ref(false);
 const initialLoading = ref(true);
 const hasMore = ref(true);
+const statusFilter = ref('');
 
 const sentinel = ref<HTMLElement | null>(null);
 let observer: IntersectionObserver | null = null;
 
+const FILTERS = [
+  { key: '', label: 'history.filter_all' },
+  { key: 'WON', label: 'history.filter_won' },
+  { key: 'LOST', label: 'history.filter_lost' },
+  { key: 'PENDING', label: 'history.filter_pending' },
+  { key: 'PUSH', label: 'history.filter_push' },
+];
+
 async function loadPage(p: number) {
   if (loading.value) return;
   loading.value = true;
   try {
-    const { data } = await api.get('/player/bets', { params: { page: p } });
+    const params: Record<string, unknown> = { page: p };
+    if (statusFilter.value) params.status = statusFilter.value;
+    const { data } = await api.get('/player/bets', { params });
     const result = data.data ?? { items: [], total: 0, pageSize: 20 };
     total.value = result.total ?? 0;
     const pageSize = result.pageSize ?? 20;
@@ -38,7 +52,7 @@ async function loadPage(p: number) {
   }
 }
 
-function reset() {
+async function reset() {
   items.value = [];
   total.value = 0;
   page.value = 1;
@@ -47,8 +61,18 @@ function reset() {
   loadPage(1);
 }
 
+function changeFilter(key: string) {
+  if (statusFilter.value === key) return;
+  statusFilter.value = key;
+  reset();
+}
+
 useOnLocaleChange(reset);
 
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); },
+});
+
 onMounted(() => {
   observer = new IntersectionObserver(
     (entries) => {
@@ -56,7 +80,7 @@ onMounted(() => {
         loadPage(page.value + 1);
       }
     },
-    { rootMargin: '120px' },
+    { rootMargin: '200px' },
   );
   if (sentinel.value) observer.observe(sentinel.value);
 });
@@ -64,28 +88,59 @@ onMounted(() => {
 onUnmounted(() => {
   observer?.disconnect();
 });
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
 </script>
 
 <template>
   <div class="history-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
 
-    <div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
 
-    <template v-else-if="items.length">
-      <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+    <template v-else>
+      <BetStatsPanel :items="items" />
 
-      <div ref="sentinel" class="sentinel" />
-
-      <div v-if="loading" class="load-more-spinner">
-        <span class="spinner" />
+      <div class="filter-tabs">
+        <button
+          v-for="f in FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: statusFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
       </div>
 
-      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
-        {{ t('history.no_more') }}
-      </div>
+      <template v-if="items.length">
+        <BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
+
+        <div ref="sentinel" class="sentinel" />
+
+        <div v-if="loading" class="load-more-spinner">
+          <GoldSpinner :size="24" />
+        </div>
+
+        <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+          {{ t('common.no_more') }}
+        </div>
+      </template>
+
+      <div v-else class="state">{{ t('history.empty') }}</div>
     </template>
-
-    <div v-else class="state">{{ t('history.empty') }}</div>
   </div>
 </template>
 
@@ -94,7 +149,48 @@ onUnmounted(() => {
   padding-bottom: 24px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
 .state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
   text-align: center;
   color: var(--text-muted);
   padding: 56px 20px;
@@ -102,6 +198,10 @@ onUnmounted(() => {
   font-size: 14px;
 }
 
+.loading-text {
+  font-size: 13px;
+}
+
 .sentinel {
   height: 1px;
 }
@@ -112,20 +212,6 @@ onUnmounted(() => {
   padding: 20px 0 8px;
 }
 
-.spinner {
-  display: inline-block;
-  width: 22px;
-  height: 22px;
-  border: 3px solid #2a2a2a;
-  border-top-color: var(--primary-light);
-  border-radius: 50%;
-  animation: spin 0.7s linear infinite;
-}
-
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
-
 .end-hint {
   text-align: center;
   font-size: 12px;

apps/player/src/views/ProfileView.vue

@@ -7,6 +7,8 @@ import { formatMoney } from '../utils/localeDisplay';
 import LocaleFlag from '../components/LocaleFlag.vue';
 import { useAuthStore } from '../stores/auth';
 import { useAppLocale } from '../composables/useAppLocale';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 import walletBg from '../assets/images/钱包.png';
 
 const { t, locale } = useI18n();
@@ -54,11 +56,22 @@ const displayedBalance = computed(() =>
     : formatMoney(profile.value?.wallet?.availableBalance, locale.value),
 );
 
-onMounted(async () => {
+async function fetchProfile() {
   const { data } = await api.get('/player/profile');
   profile.value = data.data;
   initFromUser(data.data?.locale);
   runCountUp(amountValue(data.data?.wallet?.availableBalance));
+}
+
+onMounted(fetchProfile);
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await fetchProfile(); },
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 
 async function changeLocale(code: string) {
@@ -73,6 +86,13 @@ function logout() {
 
 <template>
   <div class="profile-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <div class="wallet-banner">
       <img class="wallet-banner-img" :src="walletBg" alt="" />
       <img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
@@ -149,6 +169,14 @@ function logout() {
 </template>
 
 <style scoped>
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .profile-page {
   padding: 8px 0 12px;
 }

apps/player/src/views/WalletView.vue

@@ -1,13 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import WalletStatsPanel from '../components/WalletStatsPanel.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const { t, locale } = useI18n();
-const transactions = ref<
-  Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
->([]);
+
+type Transaction = {
+  transactionType: string;
+  amount: string;
+  createdAt: string;
+  transactionId?: string;
+};
+
+const items = ref<Transaction[]>([]);
+const total = ref(0);
+const page = ref(1);
+const loading = ref(false);
+const initialLoading = ref(true);
+const hasMore = ref(true);
+const typeFilter = ref('');
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
 
 const TX_KEY_MAP: Record<string, string> = {
   MANUAL_DEPOSIT: 'wallet.tx_deposit',
@@ -29,6 +47,13 @@ const TX_KEY_MAP: Record<string, string> = {
   WITHDRAW: 'wallet.tx_withdraw',
 };
 
+const FILTERS = [
+  { key: '', label: 'wallet.filter_all' },
+  { key: 'deposit', label: 'wallet.filter_deposit' },
+  { key: 'withdraw', label: 'wallet.filter_withdraw' },
+  { key: 'bet', label: 'wallet.filter_bet' },
+];
+
 function txLabel(type: string): string {
   const key = TX_KEY_MAP[type.toUpperCase()];
   if (key) {
@@ -38,46 +63,252 @@ function txLabel(type: string): string {
   return type;
 }
 
-onMounted(async () => {
-  const { data } = await api.get('/player/wallet/transactions');
-  transactions.value = data.data.items ?? [];
+function isDepositType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT';
+}
+
+function isWithdrawType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t.includes('WITHDRAW');
+}
+
+function isBetType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t.startsWith('BET_');
+}
+
+function matchesFilter(tx: Transaction): boolean {
+  if (!typeFilter.value) return true;
+  if (typeFilter.value === 'deposit') return isDepositType(tx.transactionType) || tx.transactionType === 'MANUAL_ADJUST';
+  if (typeFilter.value === 'withdraw') return isWithdrawType(tx.transactionType);
+  if (typeFilter.value === 'bet') return isBetType(tx.transactionType);
+  return true;
+}
+
+async function loadPage(p: number) {
+  if (loading.value) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/player/wallet/transactions', { params: { page: p } });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    const newItems = (result.items ?? []).filter(matchesFilter);
+    if (p === 1) {
+      items.value = newItems;
+    } else {
+      items.value = [...items.value, ...newItems];
+    }
+    hasMore.value = (result.items?.length ?? 0) >= pageSize;
+    page.value = p;
+  } finally {
+    loading.value = false;
+    initialLoading.value = false;
+  }
+}
+
+async function reset() {
+  items.value = [];
+  total.value = 0;
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  loadPage(1);
+}
+
+function changeFilter(key: string) {
+  if (typeFilter.value === key) return;
+  typeFilter.value = key;
+  reset();
+}
+
+const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); },
+});
+
+onMounted(() => {
+  loadPage(1);
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        loadPage(page.value + 1);
+      }
+    },
+    { rootMargin: '200px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 </script>
 
 <template>
-  <div>
-    <div v-if="transactions.length" class="card">
-      <div
-        v-for="tx in transactions"
-        :key="tx.transactionId ?? tx.createdAt"
-        class="tx-row"
-      >
-        <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
-        <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
-          {{ formatMoney(tx.amount, locale) }}
-        </span>
-        <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-      </div>
+  <div class="wallet-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
     </div>
-    <div v-else class="empty">{{ t('wallet.no_records') }}</div>
+
+    <div v-if="initialLoading" class="state">
+      <GoldSpinner :size="36" />
+      <span class="loading-text">{{ t('bet.loading') }}</span>
+    </div>
+
+    <template v-else>
+      <WalletStatsPanel :items="items" />
+
+      <div class="filter-tabs">
+        <button
+          v-for="f in FILTERS"
+          :key="f.key"
+          type="button"
+          class="filter-tab"
+          :class="{ active: typeFilter === f.key }"
+          @click="changeFilter(f.key)"
+        >
+          {{ t(f.label) }}
+        </button>
+      </div>
+
+      <div v-if="items.length" class="tx-list">
+        <div
+          v-for="tx in items"
+          :key="tx.transactionId ?? tx.createdAt + Math.random()"
+          class="tx-row"
+        >
+          <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
+          <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
+            {{ formatMoney(tx.amount, locale) }}
+          </span>
+          <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+        </div>
+      </div>
+
+      <div ref="sentinel" class="sentinel" />
+
+      <div v-if="loading" class="load-more-spinner">
+        <GoldSpinner :size="24" />
+      </div>
+
+      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+        {{ t('common.no_more') }}
+      </div>
+
+      <div v-if="!items.length && !initialLoading" class="empty">
+        {{ t('wallet.no_records') }}
+      </div>
+    </template>
   </div>
 </template>
 
 <style scoped>
+.wallet-page {
+  padding-bottom: 24px;
+}
+
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
+.filter-tabs {
+  display: flex;
+  gap: 6px;
+  margin-bottom: 12px;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.filter-tabs::-webkit-scrollbar { display: none; }
+
+.filter-tab {
+  flex-shrink: 0;
+  padding: 7px 14px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-muted);
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  transition: all 0.2s;
+}
+
+.filter-tab.active {
+  color: var(--primary-light);
+  background: rgba(212, 175, 55, 0.1);
+  border-color: var(--border-gold-soft);
+}
+
+.state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  text-align: center;
+  color: var(--text-muted);
+  padding: 56px 20px;
+  font-weight: 600;
+  font-size: 14px;
+}
+
+.loading-text {
+  font-size: 13px;
+}
+
+.tx-list {
+  margin-bottom: 0;
+}
+
 .tx-row {
   display: flex;
   justify-content: space-between;
   font-size: 14px;
-  padding: 12px 0;
+  padding: 12px 16px;
   border-bottom: 1px solid var(--border);
   flex-wrap: wrap;
 }
+
 .tx-row:last-child {
   border-bottom: none;
 }
+
 .tx-type { font-weight: 700; color: var(--text); }
 .pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
 .neg { color: var(--danger); font-weight: 700; }
 .tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0 8px;
+}
+
+.end-hint {
+  text-align: center;
+  font-size: 12px;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
+
 .empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
 </style>