feat(admin,api,player): settlement stats, team crests, MS fields and list bet summary

apps/player/src/views/HomeView.vue

@@ -180,7 +180,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
   position: relative;
   flex-shrink: 0;
   width: 72px;
-  height: 32px;
+  height: 58px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -191,7 +191,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
   inset: 0;
   width: 100%;
   height: 100%;
-  z-index: 0;
+  z-index: 1;
   pointer-events: none;
   overflow: visible;
 }
@@ -223,7 +223,7 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
   height: 2px;
   transform: translateY(-50%);
   pointer-events: none;
-  z-index: 0;
+  z-index: 1;
   background: linear-gradient(
     90deg,
     rgba(94, 184, 255, 0) 0%,
@@ -239,8 +239,8 @@ function awayFlag(match: (typeof hotMatches.value)[number]) {
 
 .vs-img {
   position: relative;
-  z-index: 1;
-  width: 26px;
+  z-index: 0;
+  width: 58px;
   height: auto;
   object-fit: contain;
   animation: vs-glow 2.4s ease-in-out infinite;

apps/player/src/views/MatchDetailView.vue

@@ -15,6 +15,10 @@ import CorrectScoreConfirmModal, {
 } from '../components/match-detail/CorrectScoreConfirmModal.vue';
 import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';
+import vsImg from '../assets/images/vs.png';
+import cardBg from '../assets/images/卡片.png';
+
+const heroCardBg = `url(${cardBg})`;
 
 const route = useRoute();
 const router = useRouter();
@@ -257,6 +261,7 @@ function hasSlipPickForMarket(marketType: string) {
   <div class="detail-page">
     <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>
       <div class="toolbar-actions">
         <MatchBetGuide />
         <button
@@ -274,26 +279,49 @@ function hasSlipPickForMarket(marketType: string) {
     <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
 
     <template v-else-if="match">
-      <section v-if="match.leagueName" class="league-banner">
-        <span class="league-title">*{{ match.leagueName }}</span>
-        <img
-          v-if="match.leagueLogoUrl"
-          :src="match.leagueLogoUrl"
-          alt=""
-          class="league-logo"
-        />
-      </section>
-
       <section class="match-hero">
         <p class="kickoff">{{ kickoff }}</p>
-        <div class="match-line">
-          <img v-if="homeFlag" :src="homeFlag" alt="" class="flag" />
-          <div class="names">
-            <span class="team">{{ match.homeTeamName }}</span>
-            <span class="vs">vs</span>
-            <span class="team">{{ match.awayTeamName }}</span>
+        <div class="hero-teams">
+          <!-- home -->
+          <div class="hero-team">
+            <img v-if="homeFlag" :src="homeFlag" alt="" class="hero-flag" />
+            <span v-else class="hero-flag-ph">⚽</span>
+            <span class="hero-name">{{ match.homeTeamName }}</span>
+          </div>
+
+          <!-- VS arena with lightning -->
+          <div class="vs-arena">
+            <svg class="hz-lightning" viewBox="0 0 72 28" aria-hidden="true">
+              <defs>
+                <linearGradient id="hzDetailGrad" x1="0%" y1="0%" x2="100%" y2="0%">
+                  <stop offset="0%" stop-color="#5eb8ff" stop-opacity="0.2" />
+                  <stop offset="35%" stop-color="#b8ecff" stop-opacity="1" />
+                  <stop offset="50%" stop-color="#ffffff" stop-opacity="1" />
+                  <stop offset="65%" stop-color="#ffd080" stop-opacity="1" />
+                  <stop offset="100%" stop-color="#ff9040" stop-opacity="0.2" />
+                </linearGradient>
+              </defs>
+              <path
+                class="hz-path hz-path-main"
+                stroke="url(#hzDetailGrad)"
+                d="M1 14 H16 L20 5 L24 23 L28 9 L32 14 H40 L44 6 L48 22 L52 12 L56 14 H71"
+              />
+              <path
+                class="hz-path hz-path-sub"
+                stroke="url(#hzDetailGrad)"
+                d="M3 19 H14 L18 15 L22 19 H50 L54 16 L58 19 H69"
+              />
+            </svg>
+            <span class="hz-beam" aria-hidden="true" />
+            <img :src="vsImg" alt="" class="vs-img" />
+          </div>
+
+          <!-- away -->
+          <div class="hero-team">
+            <img v-if="awayFlag" :src="awayFlag" alt="" class="hero-flag" />
+            <span v-else class="hero-flag-ph">⚽</span>
+            <span class="hero-name">{{ match.awayTeamName }}</span>
           </div>
-          <img v-if="awayFlag" :src="awayFlag" alt="" class="flag" />
         </div>
       </section>
 
@@ -377,6 +405,18 @@ function hasSlipPickForMarket(marketType: string) {
   gap: 8px;
 }
 
+.toolbar-title {
+  flex: 1;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 800;
+  color: var(--primary-light);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: 0 4px;
+}
+
 .toolbar-actions {
   display: flex;
   align-items: center;
@@ -401,72 +441,190 @@ function hasSlipPickForMarket(marketType: string) {
   opacity: 0.45;
 }
 
+/* ── match hero ── */
 .match-hero {
-  padding: 2px 12px 10px;
+  position: relative;
+  isolation: isolate;
+  margin: 0 0 10px;
+  padding: 14px 12px 16px;
+  overflow: hidden;
 }
 
-.league-banner {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 6px 12px 2px;
-}
-
-.league-banner .league-title {
-  flex: 1;
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--primary-light);
-  line-height: 1.35;
-}
-
-.league-logo {
-  flex-shrink: 0;
-  height: 40px;
-  width: auto;
-  max-width: 44px;
-  object-fit: contain;
+.match-hero::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: v-bind(heroCardBg) center / 100% 100% no-repeat;
+  opacity: 0.22;
+  z-index: 0;
+  pointer-events: none;
 }
 
 .kickoff {
+  position: relative;
+  z-index: 1;
   font-size: 11px;
   color: var(--text-muted);
   text-align: center;
-  margin-bottom: 6px;
+  margin-bottom: 14px;
 }
 
-.match-line {
+.hero-teams {
+  position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 8px;
 }
 
-.flag {
-  width: 36px;
-  height: 24px;
-  object-fit: cover;
-  border-radius: 2px;
-  flex-shrink: 0;
-}
-
-.names {
+.hero-team {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
   flex: 1;
   min-width: 0;
-  text-align: center;
-  line-height: 1.35;
 }
 
-.team {
-  display: block;
-  font-size: 14px;
+.hero-flag {
+  width: 54px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.hero-flag-ph {
+  width: 54px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 22px;
+  opacity: 0.45;
+}
+
+.hero-name {
+  font-size: 13px;
   font-weight: 800;
   color: var(--primary-light);
+  text-align: center;
+  line-height: 1.25;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
 
-.vs {
-  font-size: 10px;
-  color: var(--text-muted);
+/* VS arena — same as HomeView */
+.vs-arena {
+  position: relative;
+  flex-shrink: 0;
+  width: 140px;
+  height: 126px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.hz-lightning {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.hz-path {
+  fill: none;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  filter: drop-shadow(0 0 4px rgba(120, 210, 255, 0.95)) drop-shadow(0 0 8px rgba(255, 180, 80, 0.55));
+  opacity: 0;
+}
+
+.hz-path-main {
+  animation: hz-strike-main 2.6s ease-in-out infinite;
+}
+
+.hz-path-sub {
+  stroke-width: 1.6;
+  animation: hz-strike-sub 2.6s ease-in-out infinite;
+  animation-delay: 0.12s;
+}
+
+.hz-beam {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+  background: linear-gradient(
+    90deg,
+    rgba(94, 184, 255, 0) 0%,
+    rgba(184, 236, 255, 0.95) 28%,
+    #fff 50%,
+    rgba(255, 208, 128, 0.95) 72%,
+    rgba(255, 144, 64, 0) 100%
+  );
+  opacity: 0;
+  filter: blur(0.4px);
+  animation: hz-beam-flash 2.6s ease-in-out infinite;
+}
+
+.vs-img {
+  position: relative;
+  z-index: 0;
+  width: 126px;
+  height: auto;
+  object-fit: contain;
+}
+
+@keyframes hz-strike-main {
+  0%, 72%, 100% { opacity: 0; }
+  74% { opacity: 1; }
+  75% { opacity: 0.25; }
+  76% { opacity: 0.95; }
+  78% { opacity: 0; }
+}
+
+@keyframes hz-strike-sub {
+  0%, 74%, 100% { opacity: 0; }
+  76% { opacity: 0.85; }
+  77% { opacity: 0.2; }
+  78% { opacity: 0.7; }
+  80% { opacity: 0; }
+}
+
+@keyframes hz-beam-flash {
+  0%, 71%, 100% { opacity: 0; transform: translateY(-50%) scaleX(0.6); }
+  73% { opacity: 0.85; transform: translateY(-50%) scaleX(1); }
+  75% { opacity: 0.15; transform: translateY(-50%) scaleX(0.95); }
+  76% { opacity: 0.75; transform: translateY(-50%) scaleX(1); }
+  78% { opacity: 0; transform: translateY(-50%) scaleX(1.05); }
+}
+
+@keyframes vs-glow {
+  0%, 100% {
+    opacity: 0.82;
+    filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.3));
+  }
+  50% {
+    opacity: 1;
+    filter: drop-shadow(0 0 3px rgba(255, 230, 140, 0.7)) drop-shadow(0 0 6px rgba(212, 175, 55, 0.35));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .vs-img { animation: none; filter: drop-shadow(0 0 3px rgba(212, 175, 55, 0.35)); }
+  .hz-path, .hz-beam { animation: none; opacity: 0; }
 }
 
 .markets-section {

apps/player/src/views/MyBetsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
@@ -7,30 +7,82 @@ import { useOnLocaleChange } from '../composables/useOnLocaleChange';
 
 const { t } = useI18n();
 
-const bets = ref<{ items: BetHistoryItem[]; total: number }>({ items: [], total: 0 });
-const loading = ref(true);
+const items = ref<BetHistoryItem[]>([]);
+const total = ref(0);
+const page = ref(1);
+const loading = ref(false);
+const initialLoading = ref(true);
+const hasMore = ref(true);
 
-async function load() {
+const sentinel = ref<HTMLElement | null>(null);
+let observer: IntersectionObserver | null = null;
+
+async function loadPage(p: number) {
+  if (loading.value) return;
   loading.value = true;
   try {
-    const { data } = await api.get('/player/bets');
-    bets.value = data.data ?? { items: [], total: 0 };
+    const { data } = await api.get('/player/bets', { params: { page: p } });
+    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
+    total.value = result.total ?? 0;
+    const pageSize = result.pageSize ?? 20;
+    if (p === 1) {
+      items.value = result.items ?? [];
+    } else {
+      items.value = [...items.value, ...(result.items ?? [])];
+    }
+    hasMore.value = items.value.length < total.value && (result.items?.length ?? 0) >= pageSize;
+    page.value = p;
   } finally {
     loading.value = false;
+    initialLoading.value = false;
   }
 }
 
-useOnLocaleChange(load);
+function reset() {
+  items.value = [];
+  total.value = 0;
+  page.value = 1;
+  hasMore.value = true;
+  initialLoading.value = true;
+  loadPage(1);
+}
+
+useOnLocaleChange(reset);
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries[0].isIntersecting && hasMore.value && !loading.value) {
+        loadPage(page.value + 1);
+      }
+    },
+    { rootMargin: '120px' },
+  );
+  if (sentinel.value) observer.observe(sentinel.value);
+});
+
+onUnmounted(() => {
+  observer?.disconnect();
+});
 </script>
 
 <template>
   <div class="history-page">
-    <h2 class="page-title">{{ t('nav.bet_history') }}</h2>
 
-    <div v-if="loading" class="state">{{ t('bet.loading') }}</div>
+    <div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
 
-    <template v-else-if="bets.items.length">
-      <BetHistoryCard v-for="bet in bets.items" :key="bet.betNo" :bet="bet" />
+    <template v-else-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">
+        <span class="spinner" />
+      </div>
+
+      <div v-else-if="!hasMore && items.length > 0" class="end-hint">
+        {{ t('history.no_more') }}
+      </div>
     </template>
 
     <div v-else class="state">{{ t('history.empty') }}</div>
@@ -39,15 +91,7 @@ useOnLocaleChange(load);
 
 <style scoped>
 .history-page {
-  padding-bottom: 8px;
-}
-
-.page-title {
-  font-size: 20px;
-  font-weight: 800;
-  color: var(--text);
-  margin-bottom: 16px;
-  letter-spacing: 0.02em;
+  padding-bottom: 24px;
 }
 
 .state {
@@ -57,4 +101,37 @@ useOnLocaleChange(load);
   font-weight: 600;
   font-size: 14px;
 }
+
+.sentinel {
+  height: 1px;
+}
+
+.load-more-spinner {
+  display: flex;
+  justify-content: center;
+  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;
+  color: #555;
+  font-weight: 600;
+  padding: 16px 0 4px;
+  letter-spacing: 0.03em;
+}
 </style>

apps/player/src/views/ProfileView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import { useRouter, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
@@ -21,10 +21,44 @@ const profile = ref<{
 
 const rulesExpanded = ref(false);
 
+const displayAmount = ref(0);
+const animating = ref(false);
+
+function amountValue(value: unknown): number {
+  if (value == null) return 0;
+  const n = Number(value);
+  return Number.isFinite(n) ? n : 0;
+}
+
+function runCountUp(target: number) {
+  const duration = 3000;
+  const start = performance.now();
+  animating.value = true;
+  function step(now: number) {
+    const progress = Math.min((now - start) / duration, 1);
+    const eased = 1 - Math.pow(1 - progress, 5);
+    displayAmount.value = target * eased;
+    if (progress < 1) {
+      requestAnimationFrame(step);
+    } else {
+      displayAmount.value = target;
+      animating.value = false;
+    }
+  }
+  requestAnimationFrame(step);
+}
+
+const displayedBalance = computed(() =>
+  animating.value
+    ? formatMoney(displayAmount.value, locale.value)
+    : formatMoney(profile.value?.wallet?.availableBalance, locale.value),
+);
+
 onMounted(async () => {
   const { data } = await api.get('/player/profile');
   profile.value = data.data;
   initFromUser(data.data?.locale);
+  runCountUp(amountValue(data.data?.wallet?.availableBalance));
 });
 
 async function changeLocale(code: string) {
@@ -48,7 +82,7 @@ function logout() {
             <LocaleFlag :locale="locale" :size="14" />
             {{ t('wallet.balance') }}
           </span>
-          <p class="card-balance">{{ formatMoney(profile?.wallet?.availableBalance, locale) }}</p>
+          <p class="card-balance">{{ displayedBalance }}</p>
         </div>
         <div class="card-foot">
           <div class="card-holder">

apps/player/src/views/WalletView.vue

@@ -9,6 +9,34 @@ const transactions = ref<
   Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
 >([]);
 
+const TX_KEY_MAP: Record<string, string> = {
+  MANUAL_DEPOSIT: 'wallet.tx_deposit',
+  MANUAL_WITHDRAW: 'wallet.tx_withdraw',
+  MANUAL_ADJUST: 'wallet.tx_adjust',
+  BET_FREEZE: 'wallet.tx_bet_freeze',
+  BET_DEDUCT: 'wallet.tx_bet_deduct',
+  BET_SETTLE_WIN: 'wallet.tx_bet_win',
+  BET_SETTLE_LOSE: 'wallet.tx_bet_lose',
+  BET_SETTLE_PUSH: 'wallet.tx_bet_push',
+  BET_WIN: 'wallet.tx_bet_win',
+  BET_REFUND: 'wallet.tx_bet_refund',
+  BET_VOID: 'wallet.tx_bet_void',
+  BET_VOID_REFUND: 'wallet.tx_bet_void',
+  CASHBACK: 'wallet.tx_cashback',
+  RESETTLE_REVERSE: 'wallet.tx_resettle',
+  DEPOSIT: 'wallet.tx_deposit',
+  WITHDRAW: 'wallet.tx_withdraw',
+};
+
+function txLabel(type: string): string {
+  const key = TX_KEY_MAP[type.toUpperCase()];
+  if (key) {
+    const translated = t(key);
+    if (translated !== key) return translated;
+  }
+  return type;
+}
+
 onMounted(async () => {
   const { data } = await api.get('/player/wallet/transactions');
   transactions.value = data.data.items ?? [];
@@ -24,7 +52,7 @@ onMounted(async () => {
         :key="tx.transactionId ?? tx.createdAt"
         class="tx-row"
       >
-        <span>{{ tx.transactionType }}</span>
+        <span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
         <span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
           {{ formatMoney(tx.amount, locale) }}
         </span>
@@ -47,6 +75,7 @@ onMounted(async () => {
 .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; }