feat: 充值订单审计与重新申请，优化赛事展示和余额刷新

- 新增 deposit_order_audit_logs 表，记录提交/审批/拒绝/撤销/重提全链路 - 管理端充值单页增加审计历史；玩家端充值历史支持时间线与重新申请 - 已拒绝订单可原单号重提；撤销入账使用 PLAYER_DEPOSIT_REVERSAL 并加强幂等 - 结算后清除热门标记，允许归档已结算赛事，完善今日赛事时区窗口 - 足球页今日/早盘独立折叠；资料与余额在进入钱包/个人页及下注后自动刷新 - 补充投注玩法、结算返水规则文档；新增 smoke/settlement CLI 脚本 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-15 14:52:05 +08:00
parent 73a94e6be3
commit afb5c5437e
55 changed files with 3050 additions and 160 deletions
--- a/apps/player/src/components/BetSlipDrawer.vue
+++ b/apps/player/src/components/BetSlipDrawer.vue
@@ -12,6 +12,7 @@ import { useAuthStore } from '../stores/auth';
 import { formatMoney, parseAmount } from '../utils/localeDisplay';
 import BetSuccessOverlay from './BetSuccessOverlay.vue';
 import api from '../api';
+import { usePlayerProfile } from '../composables/usePlayerProfile';

 const props = defineProps<{ modelValue: boolean }>();
 const emit = defineEmits<{ 'update:modelValue': [boolean] }>();
@@ -19,6 +20,7 @@ const emit = defineEmits<{ 'update:modelValue': [boolean] }>();
 const { t, locale } = useI18n();
 const slip = useBetSlipStore();
 const auth = useAuthStore();
+const { refreshProfile } = usePlayerProfile();
 const show = computed({
  get: () => props.modelValue,
  set: (v) => emit('update:modelValue', v),
@@ -261,7 +263,7 @@ async function placeBet() {
    }
    success.value = t('bet.place_success');
    showSuccess.value = true;
-    await loadBalance();
+    await Promise.all([loadBalance(), refreshProfile()]);
    setTimeout(() => {
      if (showSuccess.value) onSuccessDone();
    }, 2200);
--- a/apps/player/src/components/CashBalanceChip.vue
+++ b/apps/player/src/components/CashBalanceChip.vue
@@ -6,7 +6,7 @@ import { formatMoney } from '../utils/localeDisplay';
 import { usePlayerProfile } from '../composables/usePlayerProfile';

 const { locale, t } = useI18n();
-const { profileRaw } = usePlayerProfile();
+const { profileRaw, refreshProfile } = usePlayerProfile();
 const router = useRouter();
 const open = ref(false);
 const root = ref<HTMLElement | null>(null);
@@ -38,7 +38,9 @@ const total = computed(() =>
 );

 function toggle() {
-  open.value = !open.value;
+  const next = !open.value;
+  open.value = next;
+  if (next) void refreshProfile();
 }

 function close() {
--- a/apps/player/src/components/LeagueAccordionItem.vue
+++ b/apps/player/src/components/LeagueAccordionItem.vue
@@ -64,6 +64,8 @@ const openCount = computed(() => props.matches.filter(m => m.matchPhase === 'ope
        :src="leagueLogoUrl || saishiImg"
        alt=""
        class="league-saishi"
+        loading="lazy"
+        decoding="async"
      />
    </button>

--- a/apps/player/src/components/MatchBetCard.vue
+++ b/apps/player/src/components/MatchBetCard.vue
@@ -91,6 +91,8 @@ const liveScoreText = computed(() => {
          class="team-flag"
          :class="{ 'flag-logo': homeIsLogo }"
          alt=""
+          loading="lazy"
+          decoding="async"
        />
      </div>

@@ -108,6 +110,8 @@ const liveScoreText = computed(() => {
          class="team-flag"
          :class="{ 'flag-logo': awayIsLogo }"
          alt=""
+          loading="lazy"
+          decoding="async"
        />
      </div>
    </div>
--- a/apps/player/src/components/outright/OutrightBetModal.vue
+++ b/apps/player/src/components/outright/OutrightBetModal.vue
@@ -2,6 +2,7 @@
 import { ref, computed, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '../../api';
+import { usePlayerProfile } from '../../composables/usePlayerProfile';
 import { formatMoney, parseAmount } from '../../utils/localeDisplay';
 import { teamFlagUrl } from '../../utils/teamFlag';
 import BetSuccessOverlay from '../BetSuccessOverlay.vue';
@@ -23,6 +24,7 @@ const props = defineProps<{
 const emit = defineEmits<{ close: [] }>();

 const { t, locale } = useI18n();
+const { refreshProfile } = usePlayerProfile();

 const step = ref<'form' | 'success'>('form');
 const stake = ref(1);
@@ -105,6 +107,7 @@ async function submit() {
    balance.value = successBalance.value;
    step.value = 'success';
    showSuccess.value = true;
+    void refreshProfile();
  } catch (e: unknown) {
    error.value =
      (e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
--- a/apps/player/src/composables/usePlayerProfile.ts
+++ b/apps/player/src/composables/usePlayerProfile.ts
@@ -23,6 +23,7 @@ const profileRaw = ref<ProfileData | null>(null);
 const loading = ref(false);
 let loadPromise: Promise<void> | null = null;
 let assigningDefault = false;
+let visibilityBound = false;

 function profileSeed(profile: ProfileData | null): string {
  if (!profile) return '';
@@ -111,6 +112,20 @@ async function loadProfile(force = false) {
  return loadPromise;
 }

+function refreshProfile() {
+  return loadProfile(true);
+}
+
+function bindProfileVisibilityRefresh() {
+  if (visibilityBound || typeof document === 'undefined') return;
+  visibilityBound = true;
+  document.addEventListener('visibilitychange', () => {
+    if (document.visibilityState === 'visible' && profileRaw.value) {
+      void loadProfile(true);
+    }
+  });
+}
+
 const avatarKey = computed(() => {
  const saved = profileRaw.value?.preferences?.avatarKey;
  if (saved && isValidAvatarKey(saved)) return saved;
@@ -138,6 +153,8 @@ export function usePlayerProfile() {
    avatarKey,
    avatarUrl,
    loadProfile,
+    refreshProfile,
+    bindProfileVisibilityRefresh,
    setAvatarKey,
  };
 }
--- a/apps/player/src/i18n/en-US.ts
+++ b/apps/player/src/i18n/en-US.ts
@@ -138,6 +138,7 @@ export default {
    tx_admin_deposit: 'Admin top-up',
    tx_agent_deposit: 'Agent top-up',
    tx_player_deposit: 'Self deposit',
+    tx_player_deposit_reversal: 'Deposit reversal',
    tx_withdraw: 'Withdrawal',
    tx_admin_withdraw: 'Admin withdraw',
    tx_agent_withdraw: 'Agent withdraw',
@@ -152,7 +153,8 @@ export default {
    tx_cashback: 'Cashback credit',
    tx_resettle: 'Resettlement',
    summary_bet: 'Bet {betNo}',
-    summary_opening_bonus: 'Opening bonus',
+    remark_deposit_revoke: 'Revoked approved deposit {orderNo}',
+    remark_deposit_revoke_generic: 'Revoked approved deposit',
    stats_income: 'Income',
    stats_expense: 'Expense',
    stats_net: 'Net',
@@ -221,6 +223,25 @@ export default {
    apply_time: 'Apply time',
    review_time: 'Review time',
    remark: 'Remark',
+    audit_title: 'Review history',
+    audit_submitted: 'Submitted',
+    audit_approved: 'Approved',
+    audit_rejected: 'Rejected',
+    audit_revoked: 'Approval revoked',
+    audit_reopened: 'Reopened for review',
+    audit_by_player: 'Player',
+    audit_by_admin: 'Platform review',
+    audit_amount: 'Amount',
+    audit_credited: 'Credited amount',
+    audit_remark_label: 'Note',
+    audit_summary: 'Review history · {count} steps',
+    audit_toggle_show: 'Show review history',
+    audit_toggle_hide: 'Hide review history',
+    view_detail: 'View details',
+    order_detail: 'Order details',
+    reapply: 'Re-apply',
+    reapply_hint: 'You are resubmitting this order. Transfer again and upload a new screenshot.',
+    back_to_history: 'Back to history',
  },
  cashback: {
    title: 'Cashback Details',
--- a/apps/player/src/i18n/ms-MY.ts
+++ b/apps/player/src/i18n/ms-MY.ts
@@ -144,6 +144,7 @@ export default {
    tx_admin_deposit: 'Tambah baki admin',
    tx_agent_deposit: 'Tambah baki ejen',
    tx_player_deposit: 'Deposit sendiri',
+    tx_player_deposit_reversal: 'Pembalikan deposit',
    tx_withdraw: 'Pengeluaran',
    tx_admin_withdraw: 'Pengeluaran admin',
    tx_agent_withdraw: 'Pengeluaran ejen',
@@ -158,7 +159,8 @@ export default {
    tx_cashback: 'Kredit rebat',
    tx_resettle: 'Penyelesaian Semula',
    summary_bet: 'Pertaruhan {betNo}',
-    summary_opening_bonus: 'Bonus pembukaan',
+    remark_deposit_revoke: 'Deposit diluluskan dibatalkan {orderNo}',
+    remark_deposit_revoke_generic: 'Deposit diluluskan dibatalkan',
    stats_income: 'Pendapatan',
    stats_expense: 'Perbelanjaan',
    stats_net: 'Bersih',
@@ -227,6 +229,25 @@ export default {
    apply_time: 'Masa permohonan',
    review_time: 'Masa semakan',
    remark: 'Catatan',
+    audit_title: 'Sejarah semakan',
+    audit_submitted: 'Dihantar',
+    audit_approved: 'Diluluskan',
+    audit_rejected: 'Ditolak',
+    audit_revoked: 'Kelulusan dibatalkan',
+    audit_reopened: 'Dibuka semula untuk semakan',
+    audit_by_player: 'Pemain',
+    audit_by_admin: 'Semakan platform',
+    audit_amount: 'Jumlah',
+    audit_credited: 'Jumlah dikreditkan',
+    audit_remark_label: 'Catatan',
+    audit_summary: 'Sejarah semakan · {count} langkah',
+    audit_toggle_show: 'Lihat sejarah semakan',
+    audit_toggle_hide: 'Sembunyikan sejarah semakan',
+    view_detail: 'Lihat butiran',
+    order_detail: 'Butiran pesanan',
+    reapply: 'Mohon semula',
+    reapply_hint: 'Anda menghantar semula pesanan ini. Buat pindahan baharu dan muat naik tangkapan skrin baharu.',
+    back_to_history: 'Kembali ke sejarah',
  },
  cashback: {
    title: 'Butiran Rebat',
--- a/apps/player/src/i18n/zh-CN.ts
+++ b/apps/player/src/i18n/zh-CN.ts
@@ -138,6 +138,7 @@ export default {
    tx_admin_deposit: '管理员上分',
    tx_agent_deposit: '代理上分',
    tx_player_deposit: '自助充值',
+    tx_player_deposit_reversal: '充值撤销',
    tx_withdraw: '人工提款',
    tx_admin_withdraw: '管理员下分',
    tx_agent_withdraw: '代理下分',
@@ -152,7 +153,8 @@ export default {
    tx_cashback: '返水入账',
    tx_resettle: '重新结算',
    summary_bet: '注单 {betNo}',
-    summary_opening_bonus: '开户赠金',
+    remark_deposit_revoke: '撤销已通过充值 {orderNo}',
+    remark_deposit_revoke_generic: '撤销已通过充值',
    stats_income: '收入',
    stats_expense: '支出',
    stats_net: '净额',
@@ -221,6 +223,25 @@ export default {
    apply_time: '申请时间',
    review_time: '审核时间',
    remark: '审核备注',
+    audit_title: '审核记录',
+    audit_submitted: '提交申请',
+    audit_approved: '审核通过',
+    audit_rejected: '审核拒绝',
+    audit_revoked: '撤销审核',
+    audit_reopened: '重新审核',
+    audit_by_player: '玩家提交',
+    audit_by_admin: '平台审核',
+    audit_amount: '金额',
+    audit_credited: '入账金额',
+    audit_remark_label: '备注',
+    audit_summary: '审核记录 · {count} 步',
+    audit_toggle_show: '查看审核记录',
+    audit_toggle_hide: '收起审核记录',
+    view_detail: '查看详情',
+    order_detail: '订单详情',
+    reapply: '重新申请',
+    reapply_hint: '将在原订单上重新提交，请重新转账并上传新的截图。',
+    back_to_history: '返回充值记录',
  },
  cashback: {
    title: '返水明细',
--- a/apps/player/src/layouts/MainLayout.vue
+++ b/apps/player/src/layouts/MainLayout.vue
@@ -52,7 +52,7 @@ const showBottomNav = computed(() => {
  return false;
 });
 const { announcements, load: loadPlayerHome } = usePlayerHome();
-const { loadProfile } = usePlayerProfile();
+const { loadProfile, refreshProfile, bindProfileVisibilityRefresh } = usePlayerProfile();
 const mainRef = ref<HTMLElement | null>(null);
 const tabScrollTops = new Map<string, number>();
 const customerServiceOpen = ref(false);
@@ -71,8 +71,11 @@ watch(
  },
 );

+const balanceRefreshPaths = ['/profile', '/wallet', '/bets'];
+
 onMounted(() => {
  if (auth.user?.locale) void initFromUser(auth.user.locale);
+  bindProfileVisibilityRefresh();
 });

 watch(
@@ -87,6 +90,16 @@ watch(
  },
  { immediate: true },
 );
+
+watch(
+  () => route.path,
+  (path) => {
+    if (!auth.token) return;
+    if (balanceRefreshPaths.some((p) => path === p || path.startsWith(`${p}/`))) {
+      void refreshProfile();
+    }
+  },
+);
 </script>

 <template>
--- a/apps/player/src/utils/cashback.ts
+++ b/apps/player/src/utils/cashback.ts
@@ -0,0 +1,26 @@
+export type CashbackRecord = {
+  id: string;
+  batchNo: string;
+  periodStart: string;
+  periodEnd: string;
+  confirmedAt: string | null;
+  effectiveStake: string;
+  betCount: number;
+  rate: string;
+  amount: string;
+  createdAt: string;
+};
+
+/** API returns a plain array; older clients may expect { items }. */
+export function parseCashbackApiData(data: unknown): CashbackRecord[] {
+  if (Array.isArray(data)) return data as CashbackRecord[];
+  if (data && typeof data === 'object' && 'items' in data) {
+    const items = (data as { items?: unknown }).items;
+    return Array.isArray(items) ? (items as CashbackRecord[]) : [];
+  }
+  return [];
+}
+
+export function sumCashbackAmount(rows: Array<{ amount: string }>): number {
+  return rows.reduce((sum, row) => sum + Math.abs(parseFloat(row.amount) || 0), 0);
+}
--- a/apps/player/src/utils/depositAuditDisplay.ts
+++ b/apps/player/src/utils/depositAuditDisplay.ts
@@ -0,0 +1,112 @@
+/** Player-facing deposit audit log remark formatting — strips internal order codes & API templates. */
+
+const ORDER_NO_SUFFIX = /\s+[A-Z0-9]{10,}\s*$/i;
+
+const INTERNAL_REMARK_EXACT = [
+  /^Revoke approved deposit\s*[A-Z0-9]*\s*$/i,
+  /^撤销已通过充值\s*[A-Z0-9]*\s*$/,
+  /^Deposit order\s+[A-Z0-9]+\s*$/i,
+];
+
+export type DepositAuditLogLike = {
+  action: string;
+  remark: string | null;
+};
+
+export type DepositAuditRemarkDisplay =
+  | { kind: 'reject'; text: string }
+  | { kind: 'note'; text: string }
+  | null;
+
+function normalizeRemark(value: string | null | undefined) {
+  return value?.trim() ?? '';
+}
+
+/** True when remark is empty or only internal/system text — hide from player UI. */
+export function isHiddenDepositAuditRemark(log: DepositAuditLogLike): boolean {
+  const remark = normalizeRemark(log.remark);
+  if (!remark) return true;
+
+  if (log.action === 'REVOKED') {
+    return INTERNAL_REMARK_EXACT.some((pattern) => pattern.test(remark));
+  }
+
+  return INTERNAL_REMARK_EXACT.some((pattern) => pattern.test(remark));
+}
+
+function sanitizePlayerRemark(raw: string): string | null {
+  let text = raw.trim();
+  if (!text) return null;
+
+  if (/^Revoke approved deposit/i.test(text)) {
+    return null;
+  }
+  if (/^撤销已通过充值/.test(text)) {
+    return null;
+  }
+  if (/^Deposit order\s+/i.test(text)) {
+    return null;
+  }
+
+  text = text.replace(ORDER_NO_SUFFIX, '').trim();
+  return text || null;
+}
+
+/** Format remark for timeline; returns null when nothing meaningful to show. */
+export function formatDepositAuditRemark(
+  log: DepositAuditLogLike,
+  t: (key: string, params?: Record<string, unknown>) => string,
+): DepositAuditRemarkDisplay {
+  const remark = normalizeRemark(log.remark);
+  if (!remark) return null;
+
+  if (log.action === 'REVOKED' && isHiddenDepositAuditRemark(log)) {
+    return { kind: 'note', text: t('wallet.remark_deposit_revoke_generic') };
+  }
+
+  const sanitized = sanitizePlayerRemark(remark);
+  if (!sanitized) return null;
+
+  if (log.action === 'REJECTED') {
+    return { kind: 'reject', text: sanitized };
+  }
+
+  return { kind: 'note', text: sanitized };
+}
+
+/** Skip reject remark in timeline when card-level reject reason already shows the same text. */
+export function shouldShowAuditRejectInTimeline(
+  log: DepositAuditLogLike,
+  orderRejectReason: string | null | undefined,
+): boolean {
+  if (log.action !== 'REJECTED') return true;
+  const remark = normalizeRemark(log.remark);
+  if (!remark) return false;
+  const cardReason = normalizeRemark(orderRejectReason);
+  return remark !== cardReason;
+}
+
+export function auditActionTone(action: string): 'submitted' | 'approved' | 'rejected' | 'revoked' | 'reopened' | 'default' {
+  switch (action.toUpperCase()) {
+    case 'SUBMITTED':
+      return 'submitted';
+    case 'APPROVED':
+      return 'approved';
+    case 'REJECTED':
+      return 'rejected';
+    case 'REVOKED':
+      return 'revoked';
+    case 'REOPENED':
+      return 'reopened';
+    default:
+      return 'default';
+  }
+}
+
+/** Secondary actor line — only when it adds meaning beyond the action title. */
+export function auditActorSecondary(log: { action: string; actorType: string }, t: (key: string) => string): string | null {
+  if (log.actorType === 'PLAYER' && (log.action === 'SUBMITTED' || log.action === 'REOPENED')) {
+    return t('recharge.audit_by_player');
+  }
+  return null;
+}
--- a/apps/player/src/utils/walletTx.ts
+++ b/apps/player/src/utils/walletTx.ts
@@ -22,6 +22,7 @@ export const TX_KEY_MAP: Record<string, string> = {
  DEPOSIT: 'wallet.tx_deposit',
  WITHDRAW: 'wallet.tx_withdraw',
  PLAYER_DEPOSIT: 'wallet.tx_player_deposit',
+  PLAYER_DEPOSIT_REVERSAL: 'wallet.tx_player_deposit_reversal',
 };

 export function txTypeKey(type: string): string {
@@ -53,11 +54,29 @@ export function txSummaryLabel(

 export function isDepositType(type: string): boolean {
  const t = type.toUpperCase();
-  return (t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT') && !isCashbackType(type);
+  return (t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT') && !isCashbackType(type) && t !== 'PLAYER_DEPOSIT_REVERSAL';
+}
+
+export function isDepositReversalType(type: string): boolean {
+  return type.toUpperCase() === 'PLAYER_DEPOSIT_REVERSAL';
+}
+
+export function txRemarkLabel(
+  tx: { transactionType: string; remark?: string | null; referenceId?: string | null },
+  t: (key: string, params?: Record<string, unknown>) => string,
+): string {
+  const type = tx.transactionType.toUpperCase();
+  const remark = tx.remark?.trim() ?? '';
+  if (type === 'PLAYER_DEPOSIT_REVERSAL') {
+    return t('wallet.remark_deposit_revoke_generic');
+  }
+  return remark;
 }

 export function isWithdrawType(type: string): boolean {
-  return type.toUpperCase().includes('WITHDRAW');
+  const t = type.toUpperCase();
+  if (t === 'PLAYER_DEPOSIT_REVERSAL') return false;
+  return t.includes('WITHDRAW');
 }

 export function isBetType(type: string): boolean {
--- a/apps/player/src/views/CashbackRecordsView.vue
+++ b/apps/player/src/views/CashbackRecordsView.vue
@@ -8,6 +8,8 @@ import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
 import { useOnLocaleChange } from '../composables/useOnLocaleChange';

+import { parseCashbackApiData, type CashbackRecord } from '../utils/cashback';
+
 const route = useRoute();
 const router = useRouter();
 const { t, locale } = useI18n();
@@ -17,19 +19,6 @@ const highlightBatchNo = computed(() => {
  return typeof q === 'string' ? q.trim() : '';
 });

-type CashbackRecord = {
-  id: string;
-  batchNo: string;
-  periodStart: string;
-  periodEnd: string;
-  confirmedAt: string | null;
-  effectiveStake: string;
-  betCount: number;
-  rate: string;
-  amount: string;
-  createdAt: string;
-};
-
 const items = ref<CashbackRecord[]>([]);
 const loading = ref(false);
 const initialLoading = ref(true);
@@ -72,8 +61,7 @@ async function fetchRecords(p = 1) {
  loading.value = true;
  try {
    const { data } = await api.get('/player/cashbacks', { params: { page: p } });
-    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
-    const newItems = result.items ?? [];
+    const newItems = parseCashbackApiData(data.data);
    
    if (p === 1) {
      items.value = newItems;
@@ -81,7 +69,7 @@ async function fetchRecords(p = 1) {
      items.value = [...items.value, ...newItems];
    }
    
-    const pageSize = result.pageSize ?? 20;
+    const pageSize = 20;
    hasMore.value = newItems.length >= pageSize;
    page.value = p;
  } catch {
--- a/apps/player/src/views/FootballView.vue
+++ b/apps/player/src/views/FootballView.vue
@@ -68,7 +68,10 @@ const filterNow = ref(new Date());
 const { summaryMatches, summaryLoading, loadSummary } = usePlayerMatches();
 const matches = summaryMatches;
 const loading = summaryLoading;
-const expandedLeagues = ref<Set<string>>(new Set());
+const expandedLeagues = ref<Record<TimeTab, Set<string>>>({
+  today: new Set(),
+  early: new Set(),
+});

 async function loadMatches() {
  filterNow.value = new Date();
@@ -86,23 +89,23 @@ const pullIndicatorStyle = () => ({
  opacity: Math.min(pullDistance.value / 48, 1),
 });

-const filteredMatches = computed(() => {
+function filterMatchesForTab(tab: TimeTab) {
  if (mainTab.value !== 'matches') return [];
  const now = filterNow.value;
  return matches.value.filter((m) => {
    const timeMatch =
-      timeTab.value === 'today'
+      tab === 'today'
        ? isInTodayMatchWindow(m.startTime, now)
        : isAfterTodayMatchWindow(m.startTime, now);
    if (!timeMatch) return false;
    if (!showAll.value && m.matchPhase !== 'open' && m.matchPhase !== undefined) return false;
    return true;
  });
-});
+}

-const leagueGroups = computed<LeagueGroup[]>(() => {
+function buildLeagueGroups(source: Match[]): LeagueGroup[] {
  const map = new Map<string, LeagueGroup>();
-  for (const m of filteredMatches.value) {
+  for (const m of source) {
    const id = m.leagueId ?? m.leagueName;
    if (!map.has(id)) {
      map.set(id, {
@@ -127,29 +130,34 @@ const leagueGroups = computed<LeagueGroup[]>(() => {
      (a.matches[0]?.displayOrder ?? 0) - (b.matches[0]?.displayOrder ?? 0) ||
      a.leagueName.localeCompare(b.leagueName),
  );
-});
+}

-watch(leagueGroups, (groups) => {
-  const ids = new Set(expandedLeagues.value);
+const todayLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('today')));
+const earlyLeagueGroups = computed(() => buildLeagueGroups(filterMatchesForTab('early')));
+
+function syncExpandedLeagues(groups: LeagueGroup[], tab: TimeTab) {
+  const current = expandedLeagues.value[tab];
+  const ids = new Set(current);
  for (const id of [...ids]) {
    if (!groups.some((g) => g.leagueId === id)) ids.delete(id);
  }
-  if (ids.size !== expandedLeagues.value.size) expandedLeagues.value = ids;
-  // 默认只展开第一个联赛，减少首屏 DOM
-  if (groups.length > 0 && expandedLeagues.value.size === 0) {
-    expandedLeagues.value = new Set([groups[0].leagueId]);
+  if (groups.length > 0 && ids.size === 0) {
+    ids.add(groups[0].leagueId);
+  }
+  if (ids.size !== current.size || [...ids].some((id) => !current.has(id))) {
+    expandedLeagues.value = { ...expandedLeagues.value, [tab]: ids };
  }
-});
-
-function isLeagueExpanded(leagueId: string) {
-  return expandedLeagues.value.has(leagueId);
 }

+watch(todayLeagueGroups, (groups) => syncExpandedLeagues(groups, 'today'));
+watch(earlyLeagueGroups, (groups) => syncExpandedLeagues(groups, 'early'));
+
 function toggleLeague(leagueId: string) {
-  const next = new Set(expandedLeagues.value);
+  const tab = timeTab.value;
+  const next = new Set(expandedLeagues.value[tab]);
  if (next.has(leagueId)) next.delete(leagueId);
  else next.add(leagueId);
-  expandedLeagues.value = next;
+  expandedLeagues.value = { ...expandedLeagues.value, [tab]: next };
 }

 function selectMainTab(tab: MainTab) {
@@ -232,24 +240,47 @@ function goMatch(id: string) {
      <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"
-          :key="group.leagueId"
-          :league-id="group.leagueId"
-          :league-name="group.leagueName"
-          :league-logo-url="group.leagueLogoUrl"
-          :matches="group.matches"
-          :expanded="isLeagueExpanded(group.leagueId)"
-          @toggle="toggleLeague(group.leagueId)"
-          @bet="goMatch"
-        />
-      </div>
+      <template v-else>
+        <div v-show="timeTab === 'today'">
+          <div v-if="todayLeagueGroups.length" class="league-list">
+            <LeagueAccordionItem
+              v-for="group in todayLeagueGroups"
+              :key="`today-${group.leagueId}`"
+              :league-id="group.leagueId"
+              :league-name="group.leagueName"
+              :league-logo-url="group.leagueLogoUrl"
+              :matches="group.matches"
+              :expanded="expandedLeagues.today.has(group.leagueId)"
+              @toggle="toggleLeague(group.leagueId)"
+              @bet="goMatch"
+            />
+          </div>
+          <div v-else class="empty">
+            <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+            <p>{{ t('bet.no_matches') }}</p>
+          </div>
+        </div>

-      <div v-else class="empty">
-        <img :src="emptyMatchesImg" alt="" class="empty-icon" />
-        <p>{{ t('bet.no_matches') }}</p>
-      </div>
+        <div v-show="timeTab === 'early'">
+          <div v-if="earlyLeagueGroups.length" class="league-list">
+            <LeagueAccordionItem
+              v-for="group in earlyLeagueGroups"
+              :key="`early-${group.leagueId}`"
+              :league-id="group.leagueId"
+              :league-name="group.leagueName"
+              :league-logo-url="group.leagueLogoUrl"
+              :matches="group.matches"
+              :expanded="expandedLeagues.early.has(group.leagueId)"
+              @toggle="toggleLeague(group.leagueId)"
+              @bet="goMatch"
+            />
+          </div>
+          <div v-else class="empty">
+            <img :src="emptyMatchesImg" alt="" class="empty-icon" />
+            <p>{{ t('bet.no_matches') }}</p>
+          </div>
+        </div>
+      </template>
    </div>

    <OutrightPanel v-if="mainTab === 'outright'" class="outright-tab" />
--- a/apps/player/src/views/ProfileView.vue
+++ b/apps/player/src/views/ProfileView.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, computed } from 'vue';
+import { ref, onMounted, onActivated, computed } from 'vue';
 import { useRouter, RouterLink } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
@@ -7,19 +7,17 @@ import { formatMoney } from '../utils/localeDisplay';
 import LocaleFlag from '../components/LocaleFlag.vue';
 import { useAuthStore } from '../stores/auth';
 import { useAppLocale } from '../composables/useAppLocale';
+import { usePlayerProfile } from '../composables/usePlayerProfile';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
+import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
 import walletBg from '../assets/images/wallet-bg.webp';

 const { t, locale } = useI18n();
 const router = useRouter();
 const auth = useAuthStore();
 const { locales, setLocale, initFromUser } = useAppLocale();
-
-const profile = ref<{
-  username?: string;
-  wallet?: { availableBalance: string; frozenBalance: string };
-} | null>(null);
+const { profileRaw, refreshProfile } = usePlayerProfile();

 const loading = ref(true);
 const error = ref(false);
@@ -33,10 +31,8 @@ async function fetchProfile() {
  loading.value = true;
  error.value = false;
  try {
-    const { data } = await api.get('/player/profile');
-    profile.value = data.data;
-    initFromUser(data.data?.locale);
-    // Fetch cashback total in parallel
+    await refreshProfile();
+    initFromUser(profileRaw.value?.locale);
    void fetchCashbackTotal();
  } catch {
    error.value = true;
@@ -47,17 +43,23 @@ async function fetchProfile() {

 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', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
-        sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
-      }
-    }
-    cashbackTotal.value = sum.toString();
+    const { data } = await api.get('/player/cashbacks');
+    cashbackTotal.value = sumCashbackAmount(parseCashbackApiData(data.data)).toString();
  } catch {
-    // Ignore errors, keep default value
+    // Fallback: sum wallet cashback credits when batch detail API is unavailable.
+    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', 'CASHBACK_DEPOSIT'].includes(g.transactionType?.toUpperCase())) {
+          sum += Math.abs(parseFloat(g.totalAmount ?? '0'));
+        }
+      }
+      cashbackTotal.value = sum.toString();
+    } catch {
+      // Keep default value
+    }
  }
 }

@@ -65,6 +67,10 @@ onMounted(() => {
  void fetchProfile();
 });

+onActivated(() => {
+  void fetchProfile();
+});
+
 const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
  onRefresh: async () => { await fetchProfile(); },
 });
@@ -84,7 +90,7 @@ function logout() {
 }

 const balanceDisplay = computed(() =>
-  formatMoney(profile.value?.wallet?.availableBalance, locale.value),
+  formatMoney(profileRaw.value?.wallet?.availableBalance, locale.value),
 );

 const balanceAmountClass = computed(() => {
@@ -143,7 +149,7 @@ const balanceAmountClass = computed(() => {
        <div class="bank-card-footer">
          <div class="bank-card-field">
            <span class="bank-card-label">持卡人</span>
-            <span class="bank-card-holder">{{ profile?.username }}</span>
+            <span class="bank-card-holder">{{ profileRaw?.username }}</span>
          </div>
          <div class="bank-card-field bank-card-field--center">
            <span class="bank-card-label">累计返水</span>
@@ -151,7 +157,7 @@ const balanceAmountClass = computed(() => {
          </div>
          <div class="bank-card-field bank-card-field--right">
            <span class="bank-card-label">未结算</span>
-            <span class="bank-card-stat">{{ formatMoney(profile?.wallet?.frozenBalance, locale) }}</span>
+            <span class="bank-card-stat">{{ formatMoney(profileRaw?.wallet?.frozenBalance, locale) }}</span>
          </div>
        </div>
      </div>
--- a/apps/player/src/views/RechargeHistoryView.vue
+++ b/apps/player/src/views/RechargeHistoryView.vue
@@ -6,13 +6,32 @@ import api from '../api';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';
 import { formatMoney } from '../utils/localeDisplay';
+import {
+  auditActionTone,
+  auditActorSecondary,
+  formatDepositAuditRemark,
+  shouldShowAuditRejectInTimeline,
+} from '../utils/depositAuditDisplay';

 const router = useRouter();
 const { t, locale } = useI18n();

+interface DepositAuditLog {
+  id: string;
+  action: string;
+  actorType: string;
+  statusBefore: string | null;
+  statusAfter: string;
+  amount: string | null;
+  approvedAmount: string | null;
+  remark: string | null;
+  createdAt: string;
+}
+
 interface DepositOrder {
  id: string;
  orderNo: string;
+  paymentMethodId?: string;
  methodType: string;
  amount: string;
  status: string;
@@ -22,6 +41,7 @@ interface DepositOrder {
  createdAt: string;
  reviewedAt: string | null;
  paymentMethodName: string | null;
+  auditLogs?: DepositAuditLog[];
 }

 const items = ref<DepositOrder[]>([]);
@@ -34,6 +54,8 @@ const hasMore = ref(true);
 const sentinel = ref<HTMLElement | null>(null);
 let observer: IntersectionObserver | null = null;

+const selectedOrder = ref<DepositOrder | null>(null);
+
 async function fetchOrders(p = 1) {
  if (loading.value) return;
  loading.value = true;
@@ -41,13 +63,13 @@ async function fetchOrders(p = 1) {
    const { data } = await api.get('/player/deposit-orders', { params: { page: p } });
    const result = data.data ?? { items: [], total: 0, pageSize: 20 };
    const newItems = result.items ?? [];
-    
+
    if (p === 1) {
      items.value = newItems;
    } else {
      items.value = [...items.value, ...newItems];
    }
-    
+
    total.value = result.total ?? 0;
    const pageSize = result.pageSize ?? 20;
    hasMore.value = newItems.length >= pageSize && items.value.length < total.value;
@@ -99,7 +121,107 @@ function goRecharge() {
  router.push('/wallet/recharge');
 }

-onMounted(fetchOrders);
+function openDetail(order: DepositOrder) {
+  selectedOrder.value = order;
+}
+
+function closeDetail() {
+  selectedOrder.value = null;
+}
+
+function reapply(order: DepositOrder) {
+  const query: Record<string, string> = {
+    orderId: order.id,
+    methodType: order.methodType,
+    amount: order.amount,
+  };
+  if (order.paymentMethodId) {
+    query.methodId = order.paymentMethodId;
+  }
+  router.push({ path: '/wallet/recharge', query });
+}
+
+function normalizeText(value: string | null | undefined) {
+  return value?.trim() ?? '';
+}
+
+/** Backend sets remark = rejectReason on reject; show one line only. */
+function orderNote(order: DepositOrder): { label: string; text: string } | null {
+  const rejectReason = normalizeText(order.rejectReason);
+  const remark = normalizeText(order.remark);
+
+  if (order.status === 'REJECTED') {
+    const text = rejectReason || remark;
+    if (!text) return null;
+    return { label: t('recharge.reject_reason'), text };
+  }
+
+  if (remark) {
+    return { label: t('recharge.remark'), text: remark };
+  }
+
+  return null;
+}
+
+function orderNoteLine(order: DepositOrder) {
+  const note = orderNote(order);
+  return note ? `${note.label}: ${note.text}` : null;
+}
+
+function auditActionLabel(action: string) {
+  const key = `recharge.audit_${action.toLowerCase()}` as const;
+  const translated = t(key);
+  return translated !== key ? translated : action;
+}
+
+function auditStepClass(action: string) {
+  return `audit-step--${auditActionTone(action)}`;
+}
+
+function formatAuditTime(iso: string) {
+  return new Date(iso).toLocaleString(undefined, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+function formatOrderTime(iso: string) {
+  return new Date(iso).toLocaleString();
+}
+
+function auditRemarkForTimeline(log: DepositAuditLog, order: DepositOrder) {
+  if (log.action === 'REJECTED' && !shouldShowAuditRejectInTimeline(log, order.rejectReason)) {
+    return null;
+  }
+  return formatDepositAuditRemark(log, t);
+}
+
+function auditLogsForDisplay(order: DepositOrder) {
+  return [...(order.auditLogs ?? [])]
+    .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
+    .map((log) => ({
+      log,
+      actor: auditActorSecondary(log, t),
+      remark: auditRemarkForTimeline(log, order),
+    }));
+}
+
+function auditNoteLine(text: string) {
+  return `${t('recharge.audit_remark_label')}: ${text}`;
+}
+
+function auditNoteDisplayText(remark: { kind: 'note'; text: string }) {
+  if (remark.text === t('wallet.remark_deposit_revoke_generic')) {
+    return remark.text;
+  }
+  return auditNoteLine(remark.text);
+}
+
+function auditStepCount(order: DepositOrder) {
+  return order.auditLogs?.length ?? 0;
+}
 </script>

 <template>
@@ -117,7 +239,7 @@ onMounted(fetchOrders);
      <GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
    </div>

-    <div v-if="loading" class="state">
+    <div v-if="initialLoading && loading" class="state">
      <GoldSpinner :size="36" />
    </div>

@@ -125,7 +247,16 @@ onMounted(fetchOrders);
      <div v-if="!items.length" class="empty">{{ t('recharge.no_orders') }}</div>

      <div v-else class="order-list">
-        <div v-for="order in items" :key="order.id" class="order-card" :class="{ rejected: order.status === 'REJECTED' }">
+        <div
+          v-for="order in items"
+          :key="order.id"
+          class="order-card"
+          :class="{ rejected: order.status === 'REJECTED' }"
+          role="button"
+          tabindex="0"
+          @click="openDetail(order)"
+          @keydown.enter="openDetail(order)"
+        >
          <div class="order-header">
            <span class="method-badge" :class="order.methodType === 'BANK' ? 'bank' : 'usdt'">{{ order.methodType }}</span>
            <span :class="['status-badge', statusClass(order.status)]">{{ statusLabel(order.status) }}</span>
@@ -141,19 +272,33 @@ onMounted(fetchOrders);
            <div class="order-times">
              <div class="time-row">
                <span class="time-label">{{ t('recharge.apply_time') }}</span>
-                <span class="time-value">{{ new Date(order.createdAt).toLocaleString() }}</span>
+                <span class="time-value">{{ formatOrderTime(order.createdAt) }}</span>
              </div>
              <div v-if="order.reviewedAt" class="time-row">
                <span class="time-label">{{ t('recharge.review_time') }}</span>
-                <span class="time-value">{{ new Date(order.reviewedAt).toLocaleString() }}</span>
+                <span class="time-value">{{ formatOrderTime(order.reviewedAt) }}</span>
              </div>
            </div>
-            <div v-if="order.remark" class="order-remark">
-              {{ t('recharge.remark') }}: {{ order.remark }}
+            <div
+              v-if="orderNoteLine(order)"
+              :class="order.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
+            >
+              {{ orderNoteLine(order) }}
            </div>
-            <div v-if="order.status === 'REJECTED' && order.rejectReason" class="reject-reason">
-              {{ t('recharge.reject_reason') }}: {{ order.rejectReason }}
+            <div v-if="auditStepCount(order)" class="card-detail-hint">
+              <span class="card-detail-summary">
+                {{ t('recharge.audit_summary', { count: auditStepCount(order) }) }}
+              </span>
+              <span class="card-detail-link">{{ t('recharge.view_detail') }} ›</span>
            </div>
+            <button
+              v-else
+              type="button"
+              class="card-detail-link-only"
+              @click.stop="openDetail(order)"
+            >
+              {{ t('recharge.view_detail') }} ›
+            </button>
          </div>
        </div>
      </div>
@@ -168,6 +313,98 @@ onMounted(fetchOrders);
        {{ t('common.no_more') }}
      </div>
    </template>
+
+    <Teleport to="body">
+      <div v-if="selectedOrder" class="detail-overlay" @click.self="closeDetail">
+        <div class="detail-modal" role="dialog" aria-modal="true" :aria-label="t('recharge.order_detail')">
+          <button type="button" class="detail-close" :aria-label="t('common.close')" @click="closeDetail">✕</button>
+
+          <h3 class="detail-title">{{ t('recharge.order_detail') }}</h3>
+
+          <div class="detail-summary">
+            <div class="detail-summary-head">
+              <span class="method-badge" :class="selectedOrder.methodType === 'BANK' ? 'bank' : 'usdt'">
+                {{ selectedOrder.methodType }}
+              </span>
+              <span :class="['status-badge', statusClass(selectedOrder.status)]">
+                {{ statusLabel(selectedOrder.status) }}
+              </span>
+            </div>
+            <div class="detail-amount">{{ formatMoney(selectedOrder.amount, locale) }}</div>
+            <div
+              v-if="selectedOrder.approvedAmount && selectedOrder.approvedAmount !== selectedOrder.amount"
+              class="approved-amount"
+            >
+              {{ t('recharge.credited') }}: {{ formatMoney(selectedOrder.approvedAmount, locale) }}
+            </div>
+            <div class="detail-method-name">{{ selectedOrder.paymentMethodName || '-' }}</div>
+            <div class="detail-row">
+              <span class="detail-label">{{ t('recharge.apply_time') }}</span>
+              <span class="detail-value">{{ formatOrderTime(selectedOrder.createdAt) }}</span>
+            </div>
+            <div v-if="selectedOrder.reviewedAt" class="detail-row">
+              <span class="detail-label">{{ t('recharge.review_time') }}</span>
+              <span class="detail-value">{{ formatOrderTime(selectedOrder.reviewedAt) }}</span>
+            </div>
+            <div
+              v-if="orderNoteLine(selectedOrder)"
+              :class="selectedOrder.status === 'REJECTED' ? 'reject-reason' : 'order-remark'"
+            >
+              {{ orderNoteLine(selectedOrder) }}
+            </div>
+          </div>
+
+          <div v-if="selectedOrder.auditLogs?.length" class="detail-audit">
+            <h4 class="detail-audit-title">{{ t('recharge.audit_title') }}</h4>
+            <div class="audit-track">
+              <div
+                v-for="(entry, logIdx) in auditLogsForDisplay(selectedOrder)"
+                :key="entry.log.id"
+                class="audit-step"
+                :class="auditStepClass(entry.log.action)"
+              >
+                <div class="audit-step-rail" aria-hidden="true">
+                  <span class="audit-dot" />
+                  <span v-if="logIdx < auditLogsForDisplay(selectedOrder).length - 1" class="audit-line" />
+                </div>
+                <div class="audit-step-body">
+                  <div class="audit-step-head">
+                    <span class="audit-step-title">{{ auditActionLabel(entry.log.action) }}</span>
+                    <time class="audit-step-time">{{ formatAuditTime(entry.log.createdAt) }}</time>
+                  </div>
+                  <p v-if="entry.actor" class="audit-step-actor">{{ entry.actor }}</p>
+                  <p
+                    v-if="entry.log.approvedAmount && entry.log.action === 'APPROVED'"
+                    class="audit-step-credited"
+                  >
+                    {{ t('recharge.audit_credited') }} {{ formatMoney(entry.log.approvedAmount, locale) }}
+                  </p>
+                  <div
+                    v-if="entry.remark?.kind === 'reject'"
+                    class="audit-step-box audit-step-box--reject"
+                  >
+                    <span class="audit-step-box-label">{{ t('recharge.reject_reason') }}</span>
+                    <span class="audit-step-box-text">{{ entry.remark.text }}</span>
+                  </div>
+                  <p v-else-if="entry.remark?.kind === 'note'" class="audit-step-note">
+                    {{ auditNoteDisplayText(entry.remark) }}
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <button
+            v-if="selectedOrder.status === 'REJECTED'"
+            type="button"
+            class="modal-reapply-btn btn-gold-outline"
+            @click.stop="reapply(selectedOrder)"
+          >
+            {{ t('recharge.reapply') }}
+          </button>
+        </div>
+      </div>
+    </Teleport>
  </div>
 </template>

@@ -189,6 +426,11 @@ onMounted(fetchOrders);
  padding: 16px;
  position: relative;
  overflow: hidden;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+.order-card:active {
+  opacity: 0.92;
 }
 .order-card::before {
  content: '';
@@ -198,21 +440,20 @@ onMounted(fetchOrders);
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
 }
 .order-card.rejected {
-  background: linear-gradient(135deg, #1a1a1a 0%, #1f1f1f 40%, #161616 100%);
-  border-color: rgba(100, 100, 100, 0.2);
-  opacity: 0.7;
+  background: #141414;
+  border-color: rgba(245, 108, 108, 0.22);
 }
 .order-card.rejected::before {
-  background: linear-gradient(90deg, transparent, rgba(100, 100, 100, 0.4), transparent);
+  background: linear-gradient(90deg, transparent, rgba(245, 108, 108, 0.35), transparent);
 }
 .order-card.rejected .order-amount {
-  background: linear-gradient(135deg, #888, #666);
-  -webkit-background-clip: text;
-  background-clip: text;
-  color: transparent;
+  background: none;
+  -webkit-background-clip: unset;
+  background-clip: unset;
+  color: #bbb;
 }
 .order-card.rejected .info-label {
-  color: rgba(150, 150, 150, 0.7);
+  color: #888;
 }
 .order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
 .method-badge { padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; }
@@ -247,8 +488,54 @@ onMounted(fetchOrders);
  border-radius: 6px;
  margin-top: 6px;
  border-left: 2px solid rgba(212, 175, 55, 0.3);
+  line-height: 1.45;
+  word-break: break-word;
+}
+.reject-reason {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #c07070;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid rgba(245, 108, 108, 0.18);
+  line-height: 1.45;
+  word-break: break-word;
+}
+.card-detail-hint {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(212, 175, 55, 0.12);
+}
+.card-detail-summary {
+  font-size: 11px;
+  color: rgba(212, 175, 55, 0.65);
+  font-weight: 600;
+}
+.card-detail-link {
+  font-size: 11px;
+  color: var(--primary-light);
+  font-weight: 700;
+  white-space: nowrap;
+}
+.card-detail-link-only {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: right;
+  font-size: 11px;
+  color: var(--primary-light);
+  font-weight: 700;
+  cursor: pointer;
 }
-.reject-reason { margin-top: 8px; font-size: 12px; color: #f56c6c; background: #2a1515; padding: 6px 10px; border-radius: 6px; }

 .sentinel {
  height: 1px;
@@ -268,4 +555,291 @@ onMounted(fetchOrders);
  padding: 16px 0 4px;
  letter-spacing: 0.03em;
 }
+
+.detail-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.48);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  padding: 0;
+}
+
+.detail-modal {
+  position: relative;
+  width: 100%;
+  max-width: 480px;
+  max-height: min(88vh, 720px);
+  overflow-y: auto;
+  background: #141414;
+  border: 1px solid #2a2a2a;
+  border-bottom: none;
+  border-radius: 14px 14px 0 0;
+  padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
+  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.28);
+}
+
+.detail-close {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  width: 28px;
+  height: 28px;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: #777;
+  font-size: 13px;
+  cursor: pointer;
+  line-height: 1;
+}
+
+.detail-title {
+  margin: 0 28px 12px 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: #e8e8e8;
+}
+
+.detail-summary {
+  margin-bottom: 14px;
+  padding: 12px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid #222;
+}
+
+.detail-summary-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 10px;
+}
+
+.detail-amount {
+  font-size: 22px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  color: var(--primary-light, #d4af37);
+  letter-spacing: -0.02em;
+}
+
+.detail-method-name {
+  font-size: 12px;
+  color: #999;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 12px;
+  margin-bottom: 6px;
+}
+
+.detail-label {
+  font-size: 12px;
+  color: #888;
+  flex-shrink: 0;
+}
+
+.detail-value {
+  font-size: 12px;
+  color: #ccc;
+  text-align: right;
+  word-break: break-word;
+}
+
+.detail-summary .order-remark {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #999;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid #222;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.detail-summary .reject-reason {
+  margin-top: 8px;
+  font-size: 11px;
+  color: #b08888;
+  background: transparent;
+  padding: 6px 0 0;
+  border-radius: 0;
+  border: none;
+  border-top: 1px solid rgba(245, 108, 108, 0.15);
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.detail-summary .approved-amount {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.detail-audit {
+  margin-top: 2px;
+  padding-top: 12px;
+  border-top: 1px solid #222;
+}
+
+.detail-audit-title {
+  margin: 0 0 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #888;
+  letter-spacing: 0.02em;
+}
+
+.audit-track {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.audit-step {
+  display: flex;
+  gap: 8px;
+  min-height: 0;
+}
+
+.audit-step-rail {
+  flex: 0 0 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 4px;
+}
+
+.audit-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #555;
+  flex-shrink: 0;
+}
+
+.audit-line {
+  flex: 1;
+  width: 1px;
+  min-height: 10px;
+  margin: 3px 0;
+  background: #2a2a2a;
+}
+
+.audit-step-body {
+  flex: 1;
+  min-width: 0;
+  padding-bottom: 12px;
+}
+
+.audit-step:last-child .audit-step-body {
+  padding-bottom: 0;
+}
+
+.audit-step-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.audit-step-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #ccc;
+  line-height: 1.35;
+}
+
+.audit-step-time {
+  font-size: 10px;
+  color: #666;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+.audit-step-actor {
+  margin: 2px 0 0;
+  font-size: 11px;
+  color: #999;
+  line-height: 1.4;
+}
+
+.audit-step-credited {
+  margin: 3px 0 0;
+  font-size: 11px;
+  font-weight: 500;
+  color: #7eb87a;
+  line-height: 1.4;
+}
+
+.audit-step-note {
+  margin: 4px 0 0;
+  font-size: 11px;
+  color: #888;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.audit-step-box {
+  margin-top: 4px;
+  padding: 6px 8px;
+  border-radius: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+
+.audit-step-box--reject {
+  background: transparent;
+  border: 1px solid rgba(245, 108, 108, 0.22);
+}
+
+.audit-step-box-label {
+  font-size: 10px;
+  font-weight: 500;
+  color: #c07070;
+  letter-spacing: 0.01em;
+}
+
+.audit-step-box-text {
+  font-size: 11px;
+  color: #b08888;
+}
+
+.audit-step--submitted .audit-dot {
+  background: #c9a227;
+}
+.audit-step--approved .audit-dot {
+  background: #5fad5a;
+}
+.audit-step--rejected .audit-dot {
+  background: #d06060;
+}
+.audit-step--revoked .audit-dot {
+  background: #777;
+}
+.audit-step--reopened .audit-dot {
+  background: #c9a227;
+}
+
+.modal-reapply-btn {
+  width: 100%;
+  margin-top: 14px;
+  padding: 11px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+}
 </style>
--- a/apps/player/src/views/RechargeView.vue
+++ b/apps/player/src/views/RechargeView.vue
@@ -1,14 +1,21 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import imageCompression from 'browser-image-compression';
 import api from '../api';
 import GoldSpinner from '../components/GoldSpinner.vue';

 const router = useRouter();
+const route = useRoute();
 const { t } = useI18n();

+const reapplyOrderId = computed(() => {
+  const id = route.query.orderId;
+  return typeof id === 'string' && id ? id : '';
+});
+const isReapply = computed(() => !!reapplyOrderId.value);
+
 interface PaymentMethod {
  id: string;
  methodType: string;
@@ -36,13 +43,39 @@ const bankMethods = computed(() => methods.value.filter((m) => m.methodType ===
 const usdtMethods = computed(() => methods.value.filter((m) => m.methodType === 'USDT'));
 const currentMethods = computed(() => methodType.value === 'BANK' ? bankMethods.value : usdtMethods.value);

+function applyReapplyQuery() {
+  const type = route.query.methodType;
+  if (type === 'BANK' || type === 'USDT') {
+    methodType.value = type;
+  }
+
+  const methodId = typeof route.query.methodId === 'string' ? route.query.methodId : '';
+  if (methodId) {
+    const match = methods.value.find((m) => m.id === methodId);
+    if (match) {
+      selectedMethod.value = match;
+    }
+  }
+
+  if (!selectedMethod.value && currentMethods.value.length) {
+    selectedMethod.value = currentMethods.value[0];
+  }
+
+  const amountQuery = typeof route.query.amount === 'string' ? route.query.amount : '';
+  const parsedAmount = parseFloat(amountQuery);
+  if (amountQuery && parsedAmount > 0) {
+    amount.value = amountQuery;
+  }
+}
+
 async function fetchMethods() {
  loading.value = true;
  try {
    const { data } = await api.get('/player/payment-methods');
    methods.value = (data.data ?? []).map((m: any) => ({ ...m, id: String(m.id) }));
-    // Auto-select first available
-    if (currentMethods.value.length) {
+    if (isReapply.value) {
+      applyReapplyQuery();
+    } else if (currentMethods.value.length) {
      selectedMethod.value = currentMethods.value[0];
    }
  } catch { /* */ } finally {
@@ -145,10 +178,19 @@ async function handleSubmit() {
  submitting.value = true;
  try {
    const fd = new FormData();
-    fd.append('paymentMethodId', selectedMethod.value.id);
    fd.append('amount', String(amt));
    fd.append('screenshot', screenshotFile.value);

+    if (isReapply.value) {
+      fd.append('paymentMethodId', selectedMethod.value.id);
+      const { data } = await api.post(`/player/deposit-orders/${reapplyOrderId.value}/reapply`, fd);
+      const result = data.data;
+      orderNo.value = result?.orderNo ?? '';
+      success.value = true;
+      return;
+    }
+
+    fd.append('paymentMethodId', selectedMethod.value.id);
    const { data } = await api.post('/player/deposit-orders', fd);
    const result = data.data;
    orderNo.value = result?.orderNo ?? '';
@@ -206,10 +248,12 @@ onMounted(fetchMethods);
      <h3>{{ t('recharge.submitted') }}</h3>
      <p class="order-no">{{ orderNo }}</p>
      <p class="success-hint">{{ t('recharge.pending_review') }}</p>
-      <button class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
+      <button v-if="isReapply" class="btn-primary" @click="goHistory">{{ t('recharge.back_to_history') }}</button>
+      <button v-else class="btn-primary" @click="resetForm">{{ t('recharge.new_recharge') }}</button>
    </div>

    <template v-else>
+      <div v-if="isReapply" class="reapply-banner">{{ t('recharge.reapply_hint') }}</div>
      <div class="type-tabs">
        <button
          :class="['tab', methodType === 'BANK' && 'active']"
@@ -330,6 +374,17 @@ onMounted(fetchMethods);

 .state { display: flex; justify-content: center; padding: 48px; }

+.reapply-banner {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  font-size: 12px;
+  line-height: 1.45;
+  color: #ffd0d0;
+  background: rgba(245, 108, 108, 0.12);
+  border: 1px solid rgba(245, 108, 108, 0.25);
+}
+
 .type-tabs {
  display: flex; margin-bottom: 12px;
  border-radius: 6px; overflow: hidden;
--- a/apps/player/src/views/WalletTransactionDetailView.vue
+++ b/apps/player/src/views/WalletTransactionDetailView.vue
@@ -4,7 +4,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney } from '../utils/localeDisplay';
-import { txTypeKey, isCashbackType, txDisplayType, txSummaryLabel } from '../utils/walletTx';
+import { txTypeKey, isCashbackType, txDisplayType, txSummaryLabel, txRemarkLabel, isDepositReversalType } from '../utils/walletTx';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';

@@ -108,6 +108,7 @@ const cashbackBatchNo = computed(() => {
 const referenceLabel = computed(() => {
  if (isCashbackTx.value) return t('wallet.ref_cashback');
  if (!tx.value?.referenceType) return '';
+  if (isDepositReversalType(tx.value.transactionType)) return t('wallet.ref_deposit');
  const rt = tx.value.referenceType.toUpperCase();
  if (rt === 'BET') return t('wallet.ref_bet');
  if (rt === 'DEPOSIT') return t('wallet.ref_deposit');
@@ -115,6 +116,11 @@ const referenceLabel = computed(() => {
  return tx.value.referenceType;
 });

+const remarkText = computed(() => {
+  if (!tx.value) return '';
+  return txRemarkLabel(tx.value, t);
+});
+
 function goBetDetail() {
  if (!tx.value?.betNo) return;
  router.push(`/bets/${tx.value.betNo}`);
@@ -180,7 +186,7 @@ function goCashbackDetail() {
        </div>
      </section>

-      <section v-if="tx.referenceType || tx.remark" class="section">
+      <section v-if="tx.referenceType || remarkText" class="section">
        <div class="section-title">{{ t('wallet.detail_reference') }}</div>
        <div class="summary-rows">
          <div v-if="tx.referenceType" class="sum-row">
@@ -191,9 +197,9 @@ function goCashbackDetail() {
            <span>{{ t('wallet.detail_reference_id') }}</span>
            <span class="mono">{{ tx.referenceId }}</span>
          </div>
-          <div v-if="tx.remark" class="sum-row">
+          <div v-if="remarkText" class="sum-row">
            <span>{{ t('wallet.detail_remark') }}</span>
-            <span class="remark">{{ tx.remark }}</span>
+            <span class="remark">{{ remarkText }}</span>
          </div>
        </div>
        <button v-if="tx.betNo" type="button" class="bet-link" @click="goBetDetail">
--- a/apps/player/src/views/WalletView.vue
+++ b/apps/player/src/views/WalletView.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import api from '../api';
 import { formatMoney, formatMoneyCompact } from '../utils/localeDisplay';
 import { txTypeKey, txDisplayType, txSummaryLabel } from '../utils/walletTx';
+import { parseCashbackApiData, sumCashbackAmount } from '../utils/cashback';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import { usePullToRefresh } from '../composables/usePullToRefresh';

@@ -54,12 +55,12 @@ async function fetchData() {
  try {
    const [txRes, cbRes] = await Promise.all([
      api.get('/player/wallet/transactions', { params: { page: 1 } }),
-      api.get('/player/cashbacks').catch(() => ({ data: { data: { items: [], totalAmount: '0' } } })),
+      api.get('/player/cashbacks').catch(() => ({ data: { data: [] } })),
    ]);
    const result = txRes.data.data ?? { items: [] };
    items.value = (result.items ?? []).slice(0, PREVIEW_COUNT);
-    const cbData = cbRes.data?.data;
-    cashbackTotal.value = cbData?.totalAmount ?? cbData?.items?.reduce((s: number, r: { amount: string }) => s + Math.abs(parseFloat(r.amount) || 0), 0)?.toString() ?? '0';
+    const cbRows = parseCashbackApiData(cbRes.data?.data);
+    cashbackTotal.value = sumCashbackAmount(cbRows).toString();
  } catch {
    /* ignore */
  } finally {