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

管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。 API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 09:55:56 +08:00
parent efff7c27e6
commit 24fa1b275c
66 changed files with 6289 additions and 1426 deletions
--- a/apps/player/src/views/WalletView.vue
+++ b/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>