feat(admin,api,player): 代理层级管理、额度上下分与玩家钱包详情

新增代理管理器与二级代理体系，完善信用额度/上下分上下文与冻结策略；代理端玩家与子代理管理增强；玩家端新增钱包详情页与交易筛选优化。

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

apps/player/src/api/index.ts

@@ -12,8 +12,12 @@ api.interceptors.response.use(
   (res) => res,
   (err) => {
     if (err.response?.status === 401) {
-      localStorage.removeItem('token');
-      window.location.href = '/login';
+      const url: string = err.config?.url ?? '';
+      // Don't redirect on login/auth failures — let the caller handle the error
+      if (!url.includes('/auth/login')) {
+        localStorage.removeItem('token');
+        window.location.href = '/login';
+      }
     }
     return Promise.reject(err);
   },

apps/player/src/components/WalletStatsPanel.vue

@@ -10,22 +10,39 @@ interface Transaction {
   transactionId?: string;
 }
 
-const props = defineProps<{ items: Transaction[] }>();
+const props = withDefaults(defineProps<{
+  items: Transaction[];
+  cashbackTotal?: string;
+}>(), {
+  cashbackTotal: '0',
+});
 const { t, locale } = useI18n();
 
+const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);
+
 const stats = computed(() => {
   let income = 0;
   let expense = 0;
+  let cashback = 0;
 
   for (const tx of props.items) {
     const amt = parseAmount(tx.amount);
+    const isCb = CASHBACK_TYPES.has(tx.transactionType.toUpperCase());
+    if (isCb) {
+      cashback += Math.abs(amt);
+    }
     if (amt >= 0) income += amt;
     else expense += Math.abs(amt);
   }
 
+  // Use server-side cashback total if provided (more accurate across all pages)
+  if (props.cashbackTotal !== '0') {
+    cashback = Math.abs(parseAmount(props.cashbackTotal));
+  }
+
   const net = income - expense;
 
-  return { income, expense, net };
+  return { income, expense, net, cashback };
 });
 </script>
 
@@ -48,6 +65,11 @@ const stats = computed(() => {
         </span>
         <span class="stat-label">{{ t('wallet.stats_net') }}</span>
       </div>
+      <div class="stat-divider" />
+      <div class="stat-item">
+        <span class="stat-val cashback">{{ formatMoney(stats.cashback, locale) }}</span>
+        <span class="stat-label">{{ t('wallet.stats_cashback') }}</span>
+      </div>
     </div>
   </div>
 </template>
@@ -92,6 +114,7 @@ const stats = computed(() => {
 
 .stat-val.income { color: #3db865; }
 .stat-val.expense { color: #e05050; }
+.stat-val.cashback { color: #f0b90b; }
 
 .stat-label {
   display: block;

apps/player/src/layouts/MainLayout.vue

@@ -23,7 +23,13 @@ const slip = useBetSlipStore();
 
 const isDetailPage = computed(() => {
   const p = route.path;
-  return p.startsWith('/match/') || p.startsWith('/bet/') || p.startsWith('/bets/');
+  return (
+    p.startsWith('/match/') ||
+    p.startsWith('/bet/') ||
+    p.startsWith('/bets/') ||
+    p.startsWith('/wallet/') ||
+    p === '/profile/edit'
+  );
 });
 
 const showHeader = computed(() => !isDetailPage.value);

apps/player/src/main.ts

@@ -97,10 +97,13 @@ const i18n = createI18n({
         stats_income: '收入',
         stats_expense: '支出',
         stats_net: '净额',
+        stats_cashback: '反水',
         filter_all: '全部',
         filter_deposit: '存款',
         filter_withdraw: '提款',
         filter_bet: '投注',
+        filter_cashback: '反水',
+        view_all: '查看全部账单',
         detail_summary: '账务明细',
         detail_amount: '变动金额',
         detail_balance_before: '变动前余额',
@@ -378,10 +381,13 @@ const i18n = createI18n({
         stats_income: 'Income',
         stats_expense: 'Expense',
         stats_net: 'Net',
+        stats_cashback: 'Cashback',
         filter_all: 'All',
         filter_deposit: 'Deposit',
         filter_withdraw: 'Withdraw',
         filter_bet: 'Bet',
+        filter_cashback: 'Cashback',
+        view_all: 'View all transactions',
         detail_summary: 'Details',
         detail_amount: 'Amount',
         detail_balance_before: 'Balance Before',
@@ -665,10 +671,13 @@ const i18n = createI18n({
         stats_income: 'Pendapatan',
         stats_expense: 'Perbelanjaan',
         stats_net: 'Bersih',
+        stats_cashback: 'Rebat',
         filter_all: 'Semua',
         filter_deposit: 'Deposit',
         filter_withdraw: 'Pengeluaran',
         filter_bet: 'Pertaruhan',
+        filter_cashback: 'Rebat',
+        view_all: 'Lihat semua transaksi',
         detail_summary: 'Butiran',
         detail_amount: 'Jumlah',
         detail_balance_before: 'Baki Sebelum',

apps/player/src/router/index.ts

@@ -17,6 +17,7 @@ const router = createRouter({
         { path: 'bets', component: () => import('../views/MyBetsView.vue') },
         { path: 'bets/:betNo', component: () => import('../views/BetDetailView.vue') },
         { path: 'wallet', component: () => import('../views/WalletView.vue') },
+        { path: 'wallet/detail', component: () => import('../views/WalletDetailView.vue') },
         { path: 'wallet/transactions/:transactionId', component: () => import('../views/WalletTransactionDetailView.vue') },
         { path: 'profile', component: () => import('../views/ProfileView.vue') },
         { path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },

apps/player/src/utils/walletTx.ts

@@ -24,7 +24,7 @@ export function txTypeKey(type: string): string {
 
 export function isDepositType(type: string): boolean {
   const t = type.toUpperCase();
-  return t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT';
+  return (t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT') && !isCashbackType(type);
 }
 
 export function isWithdrawType(type: string): boolean {
@@ -34,3 +34,8 @@ export function isWithdrawType(type: string): boolean {
 export function isBetType(type: string): boolean {
   return type.toUpperCase().startsWith('BET_') || type.toUpperCase() === 'RESETTLE_REVERSE';
 }
+
+export function isCashbackType(type: string): boolean {
+  const t = type.toUpperCase();
+  return t === 'CASHBACK' || t === 'CASHBACK_DEPOSIT';
+}

apps/player/src/views/BetDetailView.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
 import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
 
 const route = useRoute();
@@ -15,7 +16,8 @@ const bet = ref<BetHistoryItem | null>(null);
 const loading = ref(true);
 const notFound = ref(false);
 
-onMounted(async () => {
+async function loadBet() {
+  loading.value = true;
   try {
     const { data } = await api.get(`/player/bets/${route.params.betNo}`);
     if (!data.data) { notFound.value = true; return; }
@@ -25,6 +27,17 @@ onMounted(async () => {
   } finally {
     loading.value = false;
   }
+}
+
+onMounted(loadBet);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadBet,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 
 const statusKey = computed(() => {
@@ -113,6 +126,13 @@ const myPick = computed(() => {
 
 <template>
   <div class="detail-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <!-- back bar -->
     <div class="top-bar">
       <button class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
@@ -226,6 +246,14 @@ const myPick = computed(() => {
   padding-bottom: 32px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .top-bar {
   margin-bottom: 4px;
 }

apps/player/src/views/MatchDetailView.vue

@@ -15,6 +15,7 @@ import CorrectScoreConfirmModal, {
 } from '../components/match-detail/CorrectScoreConfirmModal.vue';
 import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 import vsImg from '../assets/images/vs.png';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import BetSuccessOverlay from '../components/BetSuccessOverlay.vue';
@@ -213,6 +214,15 @@ async function loadMatch() {
 
 useOnLocaleChange(loadMatch);
 
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadMatch,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
+});
+
 function isSelected(id: string) {
   return slip.items.some((i) => i.selectionId === id);
 }
@@ -257,6 +267,13 @@ function hasSlipPickForMarket(marketType: string) {
 
 <template>
   <div class="detail-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <header class="toolbar">
       <button type="button" class="icon-btn" :aria-label="t('bet.back')" @click="router.back()">←</button>
       <span class="toolbar-title">{{ match?.leagueName ?? '' }}</span>
@@ -407,6 +424,14 @@ function hasSlipPickForMarket(marketType: string) {
   padding-bottom: 16px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .toolbar {
   display: flex;
   align-items: center;

apps/player/src/views/ProfileEditView.vue

@@ -5,8 +5,10 @@ import { useI18n } from 'vue-i18n';
 import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
 import api from '../api';
 import PlayerAvatarModal from '../components/PlayerAvatarModal.vue';
+import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePlayerProfile } from '../composables/usePlayerProfile';
 import { useAuthStore } from '../stores/auth';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const { t } = useI18n();
 const router = useRouter();
@@ -59,9 +61,20 @@ function togglePasswordVisible() {
   passwordVisible.value = !passwordVisible.value;
 }
 
-onMounted(async () => {
+async function loadEditData() {
   await loadProfile(true);
   syncFromProfile();
+}
+
+onMounted(loadEditData);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadEditData,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 
 function openAvatarModal() {
@@ -165,6 +178,13 @@ function back() {
 
 <template>
   <div class="edit-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <header class="page-head">
       <button type="button" class="back-btn" @click="back">← {{ t('profile.back') }}</button>
       <h2 class="page-title">{{ t('profile.edit') }}</h2>
@@ -294,6 +314,14 @@ function back() {
   gap: 12px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .page-head {
   margin-bottom: 0;
 }

apps/player/src/views/ProfileView.vue

@@ -93,7 +93,7 @@ function logout() {
       <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
     </div>
 
-    <div class="wallet-banner">
+    <div class="wallet-banner" @click="router.push('/wallet/detail')">
       <img class="wallet-banner-img" :src="walletBg" alt="" />
       <img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
       <div class="wallet-banner-info">
@@ -115,6 +115,7 @@ function logout() {
           </div>
         </div>
       </div>
+      <span class="wallet-chevron" aria-hidden="true">&#x203A;</span>
     </div>
 
     <section class="settings-group">
@@ -184,7 +185,36 @@ function logout() {
 .wallet-banner {
   position: relative;
   margin-bottom: 12px;
+  margin-left: -5px;
+  margin-right: -5px;
   line-height: 0;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.wallet-banner:active .wallet-banner-img {
+  filter: brightness(0.9);
+  transition: filter 0.1s;
+}
+
+.wallet-chevron {
+  position: absolute;
+  right: 4%;
+  bottom: 12%;
+  z-index: 3;
+  font-size: 28px;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.85);
+  background: rgba(0, 0, 0, 0.35);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  line-height: 1;
+  backdrop-filter: blur(4px);
 }
 
 .wallet-banner-img {

apps/player/src/views/WalletDetailView.vue

@@ -0,0 +1,357 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import api from '../api';
+import { formatMoney } from '../utils/localeDisplay';
+import { isBetType, isDepositType, isWithdrawType, isCashbackType, txTypeKey } from '../utils/walletTx';
+import GoldSpinner from '../components/GoldSpinner.vue';
+import WalletStatsPanel from '../components/WalletStatsPanel.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
+
+const router = useRouter();
+const { t, locale } = useI18n();
+
+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 cashbackTotal = ref('0');
+
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+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' },
+  { key: 'cashback', label: 'wallet.filter_cashback' },
+];
+
+const CASHBACK_TYPES = new Set(['CASHBACK', 'CASHBACK_DEPOSIT']);
+
+async function fetchCashbackTotal() {
+  try {
+    const { data } = await api.get('/player/wallet/transactions/stats');
+    const byType = data.data?.byType ?? [];
+    let sum = 0;
+    for (const g of byType) {
+      if (CASHBACK_TYPES.has(g.transactionType?.toUpperCase())) {
+        sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
+      }
+    }
+    cashbackTotal.value = sum.toString();
+  } catch {
+    /* ignore */
+  }
+}
+
+function txLabel(type: string): string {
+  const key = txTypeKey(type);
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return type;
+}
+
+function goDetail(tx: Transaction) {
+  if (!tx.transactionId) return;
+  router.push(`/wallet/transactions/${tx.transactionId}`);
+}
+
+async function loadPage(p: number) {
+  if (loading.value) return;
+  loading.value = true;
+  const filterAtRequest = typeFilter.value;
+  try {
+    const params: Record<string, unknown> = { page: p };
+    if (typeFilter.value) params.type = typeFilter.value;
+    const { data } = await api.get('/player/wallet/transactions', { params });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    if (filterAtRequest !== typeFilter.value) return;
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    const newItems = result.items ?? [];
+    if (p === 1) {
+      items.value = newItems;
+    } else {
+      items.value = [...items.value, ...newItems];
+    }
+    hasMore.value = (result.items?.length ?? 0) >= pageSize;
+    page.value = p;
+  } finally {
+    if (filterAtRequest === typeFilter.value) {
+      loading.value = false;
+      initialLoading.value = false;
+    }
+  }
+}
+
+async function reset() {
+  items.value = [];
+  total.value = 0;
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  loading.value = false;
+  loadPage(1);
+}
+
+function changeFilter(key: string) {
+  if (typeFilter.value === key) return;
+  typeFilter.value = key;
+  reset();
+}
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: async () => { await loadPage(1); await fetchCashbackTotal(); },
+});
+
+onMounted(() => {
+  loadPage(1);
+  fetchCashbackTotal();
+  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 class="wallet-detail-page">
+    <div class="top-bar">
+      <button class="back-btn" type="button" @click="router.back()">&#x2039; {{ t('history.back') }}</button>
+    </div>
+
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </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" :cashback-total="cashbackTotal" />
+
+      <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">
+        <button
+          v-for="tx in items"
+          :key="tx.transactionId"
+          type="button"
+          class="tx-row"
+          @click="goDetail(tx)"
+        >
+          <div class="tx-main">
+            <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
+            <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
+              {{ formatMoney(tx.amount, locale) }}
+            </span>
+          </div>
+          <div class="tx-meta">
+            <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
+            <span class="tx-arrow">&#x203A;</span>
+          </div>
+        </button>
+      </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-detail-page {
+  padding-bottom: 24px;
+}
+
+.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;
+}
+
+.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: block;
+  width: 100%;
+  text-align: left;
+  font-size: 14px;
+  padding: 12px 16px;
+  border: none;
+  border-bottom: 1px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+}
+
+.tx-row:last-child {
+  border-bottom: none;
+}
+
+.tx-row:active {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.tx-main {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+}
+
+.tx-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: 4px;
+}
+
+.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 { font-size: 11px; color: var(--text-muted); }
+.tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
+
+.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>

apps/player/src/views/WalletTransactionDetailView.vue

@@ -6,6 +6,7 @@ import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
 import { txTypeKey } from '../utils/walletTx';
 import GoldSpinner from '../components/GoldSpinner.vue';
+import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 type TransactionDetail = {
   transactionId: string;
@@ -30,7 +31,8 @@ const tx = ref<TransactionDetail | null>(null);
 const loading = ref(true);
 const notFound = ref(false);
 
-onMounted(async () => {
+async function loadTransaction() {
+  loading.value = true;
   try {
     const { data } = await api.get(`/player/wallet/transactions/${route.params.transactionId}`);
     if (!data.data) {
@@ -43,6 +45,17 @@ onMounted(async () => {
   } finally {
     loading.value = false;
   }
+}
+
+onMounted(loadTransaction);
+
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: loadTransaction,
+});
+
+const pullIndicatorStyle = () => ({
+  height: `${pullDistance.value}px`,
+  opacity: Math.min(pullDistance.value / 48, 1),
 });
 
 function txLabel(type: string): string {
@@ -86,6 +99,13 @@ function goBetDetail() {
 
 <template>
   <div class="detail-page">
+    <div
+      class="pull-indicator"
+      :style="pullIndicatorStyle()"
+    >
+      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
+    </div>
+
     <div class="top-bar">
       <button class="back-btn" type="button" @click="router.back()">‹ {{ t('history.back') }}</button>
     </div>
@@ -164,6 +184,14 @@ function goBetDetail() {
   padding-bottom: 32px;
 }
 
+.pull-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: height 0.15s ease;
+}
+
 .top-bar {
   margin-bottom: 4px;
 }

apps/player/src/views/WalletView.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
-import { isBetType, isDepositType, isWithdrawType, txTypeKey } from '../utils/walletTx';
+import { txTypeKey } from '../utils/walletTx';
 import GoldSpinner from '../components/GoldSpinner.vue';
-import WalletStatsPanel from '../components/WalletStatsPanel.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
 
 const router = useRouter();
@@ -20,22 +19,8 @@ type Transaction = {
 };
 
 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 FILTERS = [
-  { key: '', label: 'wallet.filter_all' },
-  { key: 'deposit', label: 'wallet.filter_deposit' },
-  { key: 'withdraw', label: 'wallet.filter_withdraw' },
-  { key: 'bet', label: 'wallet.filter_bet' },
-];
+const loading = ref(true);
+const PREVIEW_COUNT = 15;
 
 function txLabel(type: string): string {
   const key = txTypeKey(type);
@@ -46,76 +31,33 @@ function txLabel(type: string): string {
   return type;
 }
 
-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;
-}
-
 function goDetail(tx: Transaction) {
   if (!tx.transactionId) return;
   router.push(`/wallet/transactions/${tx.transactionId}`);
 }
 
-async function loadPage(p: number) {
-  if (loading.value) return;
+function goWalletDetail() {
+  router.push('/wallet/detail');
+}
+
+async function fetchTransactions() {
   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;
+    const { data } = await api.get('/player/wallet/transactions', { params: { page: 1 } });
+    const result = data.data ?? { items: [] };
+    items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
+  } catch {
+    /* ignore */
   } 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); },
+const { pullDistance, spinning, progress } = usePullToRefresh({
+  onRefresh: fetchTransactions,
 });
 
-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();
-});
+onMounted(fetchTransactions);
 
 const pullIndicatorStyle = () => ({
   height: `${pullDistance.value}px`,
@@ -132,25 +74,18 @@ const pullIndicatorStyle = () => ({
       <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
     </div>
 
-    <div v-if="initialLoading" class="state">
+    <div v-if="loading" class="state">
       <GoldSpinner :size="36" />
       <span class="loading-text">{{ t('bet.loading') }}</span>
     </div>
 
     <template v-else>
-      <WalletStatsPanel :items="items" />
-
-      <div class="filter-tabs">
+      <div v-if="items.length" class="top-bar">
         <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>
+          class="more-link"
+          @click="goWalletDetail"
+        >{{ t('wallet.view_all') }} &#x203A;</button>
       </div>
 
       <div v-if="items.length" class="tx-list">
@@ -169,22 +104,12 @@ const pullIndicatorStyle = () => ({
           </div>
           <div class="tx-meta">
             <span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
-            <span class="tx-arrow">›</span>
+            <span class="tx-arrow">&#x203A;</span>
           </div>
         </button>
       </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">
+      <div v-if="!items.length" class="empty">
         {{ t('wallet.no_records') }}
       </div>
     </template>
@@ -204,35 +129,6 @@ const pullIndicatorStyle = () => ({
   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;
@@ -258,7 +154,7 @@ const pullIndicatorStyle = () => ({
   width: 100%;
   text-align: left;
   font-size: 14px;
-  padding: 12px 16px;
+  padding: 8px 12px;
   border: none;
   border-bottom: 1px solid var(--border);
   background: transparent;
@@ -293,23 +189,28 @@ const pullIndicatorStyle = () => ({
 .tx-time { font-size: 11px; color: var(--text-muted); }
 .tx-arrow { font-size: 16px; color: #555; font-weight: 700; line-height: 1; }
 
-.sentinel {
-  height: 1px;
-}
-
-.load-more-spinner {
+.top-bar {
   display: flex;
-  justify-content: center;
-  padding: 20px 0 8px;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 0 4px 2px;
+  margin-top: -8px;
 }
 
-.end-hint {
-  text-align: center;
+.more-link {
+  background: none;
+  border: none;
+  color: var(--primary-light);
   font-size: 12px;
-  color: #555;
   font-weight: 600;
-  padding: 16px 0 4px;
-  letter-spacing: 0.03em;
+  padding: 2px 6px;
+  cursor: pointer;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+}
+
+.more-link:active {
+  opacity: 1;
 }
 
 .empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }