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

新增代理管理器与二级代理体系，完善信用额度/上下分上下文与冻结策略；代理端玩家与子代理管理增强；玩家端新增钱包详情页与交易筛选优化。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 15:34:12 +08:00
parent b2216abd0c
commit 414998ce36
54 changed files with 6641 additions and 481 deletions
--- a/apps/player/src/views/BetDetailView.vue
+++ b/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;
 }
--- a/apps/player/src/views/MatchDetailView.vue
+++ b/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;
--- a/apps/player/src/views/ProfileEditView.vue
+++ b/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;
 }
--- a/apps/player/src/views/ProfileView.vue
+++ b/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 {
--- a/apps/player/src/views/WalletDetailView.vue
+++ b/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>
--- a/apps/player/src/views/WalletTransactionDetailView.vue
+++ b/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;
 }
--- a/apps/player/src/views/WalletView.vue
+++ b/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; }