feat(admin+api): 列表页子路由重构、结算历史与充值截图清理

赛事/代理管理从表格展开改为子路由详情页；结算页增加预览弹窗与历史记录；媒体库支持截图存储统计与自动/手动清理；Player 端充值截图压缩为 WebP 300KB。
2026-06-22 12:28:25 +08:00
parent 499522f3fb
commit 648c314e23
38 changed files with 3298 additions and 1147 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -8,6 +8,8 @@ docker-build.log
 thebet365-images.tar
 thebet365-images-*.tar
 thebet365-images-*.manifest.txt
+thebet365-admin-latest.tar
+thebet365-admin-latest.manifest.txt
 .claude/
 *.log
 .DS_Store
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -5,7 +5,7 @@

 如果你是AI请每次读了这个文件就在已有的次数上+1

-当前被读次数: 3
+当前被读次数: 11

 ## 目录

--- a/apps/admin/components.d.ts
+++ b/apps/admin/components.d.ts
@@ -69,6 +69,7 @@ declare module 'vue' {
    InviteHistoryPanel: typeof import('./src/components/InviteHistoryPanel.vue')['default']
    InviteManageDialog: typeof import('./src/components/InviteManageDialog.vue')['default']
    LeagueArchiveDialog: typeof import('./src/components/LeagueArchiveDialog.vue')['default']
+    LeagueRowActions: typeof import('./src/components/LeagueRowActions.vue')['default']
    LogoUrlField: typeof import('./src/components/LogoUrlField.vue')['default']
    MatchArchiveDialog: typeof import('./src/components/MatchArchiveDialog.vue')['default']
    MatchesSubNav: typeof import('./src/components/MatchesSubNav.vue')['default']
--- a/apps/admin/src/components/LeagueRowActions.vue
+++ b/apps/admin/src/components/LeagueRowActions.vue
@@ -0,0 +1,98 @@
+<script setup lang="ts">
+export interface LeagueRowView {
+  id: string;
+  isPublished: boolean;
+  isPublishing: boolean;
+  labels: {
+    edit: string;
+    createFixture: string;
+    publish: string;
+    unpublish: string;
+    delete: string;
+  };
+}
+
+defineProps<{
+  row: LeagueRowView;
+}>();
+
+defineEmits<{
+  edit: [];
+  createFixture: [];
+  togglePublish: [];
+  archive: [];
+}>();
+</script>
+
+<template>
+  <div class="league-row-actions">
+    <div class="league-action-group">
+      <el-button size="small" type="primary" @click.stop="$emit('edit')">
+        {{ row.labels.edit }}
+      </el-button>
+      <el-button size="small" type="primary" @click.stop="$emit('createFixture')">
+        {{ row.labels.createFixture }}
+      </el-button>
+      <el-button
+        v-if="!row.isPublished"
+        size="small"
+        type="success"
+        :loading="row.isPublishing"
+        @click.stop="$emit('togglePublish')"
+      >
+        {{ row.labels.publish }}
+      </el-button>
+      <el-button
+        v-else
+        size="small"
+        type="warning"
+        :loading="row.isPublishing"
+        @click.stop="$emit('togglePublish')"
+      >
+        {{ row.labels.unpublish }}
+      </el-button>
+      <el-button size="small" type="danger" plain @click.stop="$emit('archive')">
+        {{ row.labels.delete }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.league-row-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px 8px;
+  flex-wrap: wrap;
+}
+
+.league-action-group {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 4px;
+  border-radius: 8px;
+  background: #fbfaf7;
+  border: 1px solid var(--border-soft);
+}
+
+.league-row-actions :deep(.el-button) {
+  margin: 0 !important;
+  min-width: 52px;
+  min-height: 26px;
+  padding: 4px 10px !important;
+  font-size: 12px !important;
+  font-weight: 700;
+  border-radius: 6px;
+}
+
+.league-row-actions :deep(.el-button:not(.is-disabled):not(:disabled)) {
+  cursor: pointer;
+}
+
+.league-row-actions :deep(.el-button.is-disabled),
+.league-row-actions :deep(.el-button:disabled) {
+  cursor: not-allowed;
+}
+</style>
--- a/apps/admin/src/components/PlayerWalletLedgerDialog.vue
+++ b/apps/admin/src/components/PlayerWalletLedgerDialog.vue
@@ -139,7 +139,7 @@ watch(
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
-    width="1080px"
+    width="1250px"
    destroy-on-close
    class="player-wallet-ledger-dialog"
    append-to-body
@@ -172,7 +172,7 @@ watch(
        <template #empty>
          <AdminTableEmpty />
        </template>
-        <el-table-column :label="t('audit.col.time')" min-width="150">
+        <el-table-column :label="t('audit.col.time')" min-width="140">
          <template #default="{ row }">{{ formatTime(row.createdAt) }}</template>
        </el-table-column>
        <el-table-column :label="t('finance.col.tx_id')" min-width="120" show-overflow-tooltip>
@@ -181,7 +181,7 @@ watch(
        <el-table-column :label="t('finance.col.tx_type')" min-width="80">
          <template #default="{ row }">{{ walletTypeLabel(row.transactionType) }}</template>
        </el-table-column>
-        <el-table-column :label="t('finance.col.deposit_method')" min-width="120" show-overflow-tooltip>
+        <el-table-column :label="t('finance.col.deposit_method')" min-width="100" show-overflow-tooltip>
          <template #default="{ row }">{{ depositMethodLabel(row) }}</template>
        </el-table-column>
        <el-table-column :label="t('finance.col.balance_change')" min-width="96" align="right">
@@ -193,35 +193,35 @@ watch(
            </el-tooltip>
          </template>
        </el-table-column>
-        <el-table-column :label="t('finance.col.balance_before')" min-width="92" align="right">
+        <el-table-column :label="t('finance.col.balance_before')" min-width="90" align="right">
          <template #default="{ row }">
            <el-tooltip :content="formatAmountFull(row.balanceBefore)" placement="top">
              <span>{{ formatAmount(row.balanceBefore) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
-        <el-table-column :label="t('finance.col.balance_after')" min-width="92" align="right">
+        <el-table-column :label="t('finance.col.balance_after')" min-width="90" align="right">
          <template #default="{ row }">
            <el-tooltip :content="formatAmountFull(row.balanceAfter)" placement="top">
              <span>{{ formatAmount(row.balanceAfter) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
-        <el-table-column :label="t('finance.col.frozen_before')" min-width="92" align="right">
+        <el-table-column :label="t('finance.col.frozen_before')" min-width="90" align="right">
          <template #default="{ row }">
            <el-tooltip :content="formatAmountFull(row.frozenBefore)" placement="top">
              <span>{{ formatAmount(row.frozenBefore) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
-        <el-table-column :label="t('finance.col.frozen_after')" min-width="92" align="right">
+        <el-table-column :label="t('finance.col.frozen_after')" min-width="90" align="right">
          <template #default="{ row }">
            <el-tooltip :content="formatAmountFull(row.frozenAfter)" placement="top">
              <span>{{ formatAmount(row.frozenAfter) }}</span>
            </el-tooltip>
          </template>
        </el-table-column>
-        <el-table-column :label="t('finance.col.reference')" min-width="110" show-overflow-tooltip>
+        <el-table-column :label="t('finance.col.reference')" min-width="105" show-overflow-tooltip>
          <template #default="{ row }">
            <router-link
              v-if="row.betNo"
@@ -234,7 +234,7 @@ watch(
            <span v-else>—</span>
          </template>
        </el-table-column>
-        <el-table-column :label="t('agent.credit_tx.col.operator')" min-width="88">
+        <el-table-column :label="t('agent.credit_tx.col.operator')" min-width="85">
          <template #default="{ row }">{{ row.operatorUsername ?? '—' }}</template>
        </el-table-column>
        <el-table-column :label="t('user.field.remark')" min-width="100" show-overflow-tooltip>
@@ -298,6 +298,10 @@ watch(
 </style>

 <style>
+.player-wallet-ledger-dialog {
+  max-width: 95vw;
+}
+
 .player-wallet-ledger-dialog .el-dialog__header {
  padding: 12px 16px 6px;
  margin-right: 0;
--- a/apps/admin/src/composables/agent-direct-players-context.ts
+++ b/apps/admin/src/composables/agent-direct-players-context.ts
@@ -0,0 +1,24 @@
+import type { InjectionKey, Ref } from 'vue';
+import type { PlayerRow } from '../views/user-form';
+
+export type AgentPlayerActions = {
+  canCreatePlayer: boolean;
+  openCreatePlayer: (parentAgentUserId: string) => void;
+  openDetailPlayer: (id: string) => void;
+  openEditPlayer: (id: string) => void;
+  openTransfer: (type: 'deposit' | 'withdraw', row: { id: string; username?: string }) => void;
+  toggleFreezePlayer: (row: PlayerRow) => void | Promise<void>;
+  deletePlayer: (row: PlayerRow) => void | Promise<void>;
+  openPlayerWalletLedger: (playerId: string, playerUsername?: string | null) => void;
+  playerActionFlags: {
+    showEdit: boolean;
+    showDeposit: boolean;
+    showWithdraw: boolean;
+    showFreeze: boolean;
+    showDelete: boolean;
+  };
+};
+
+export const agentPlayerActionsKey: InjectionKey<AgentPlayerActions> = Symbol('agentPlayerActions');
+export const agentDirectPlayersReloadKey: InjectionKey<Ref<(() => void) | null>> =
+  Symbol('agentDirectPlayersReload');
--- a/apps/admin/src/i18n/admin-messages.ts
+++ b/apps/admin/src/i18n/admin-messages.ts
@@ -140,6 +140,9 @@ const zh: Record<string, string> = {
  'breadcrumb.settlement': '赛事结算',
  'breadcrumb.match_edit': '编辑赛事',
  'breadcrumb.match_markets': '盘口管理',
+  'breadcrumb.league_fixtures': '单场赛事',
+  'breadcrumb.league_outrights': '优胜冠军',
+  'breadcrumb.agent_direct_players': '直属玩家',
  'breadcrumb.outright_edit': '编辑优胜冠军',
  'role.admin': '系统管理员',
  'role.super_admin': '超级管理员',
@@ -319,7 +322,11 @@ const zh: Record<string, string> = {
  'match.status.SETTLED': '已结算',
  'match.status.PENDING_SETTLEMENT': '待结算',
  'match.filter.has_bets': '仅显示有下注',
+  'match.filter.kickoff_from': '开赛起',
+  'match.filter.kickoff_to': '开赛止',
  'match.sort.default': '默认排序',
+  'match.sort.kickoff_asc': '按开赛时间（早→晚）',
+  'match.sort.kickoff_desc': '按开赛时间（晚→早）',
  'match.sort.bet_count': '按注单数',
  'match.sort.total_stake': '按投注额',
  // 列表页/弹窗文案通过 bundles/zh-CN 动态平载，不在此处静态 spread
@@ -453,6 +460,9 @@ const en: Record<string, string> = {
  'breadcrumb.settlement': 'Settlement',
  'breadcrumb.match_edit': 'Edit match',
  'breadcrumb.match_markets': 'Markets',
+  'breadcrumb.league_fixtures': 'Fixtures',
+  'breadcrumb.league_outrights': 'Outright odds',
+  'breadcrumb.agent_direct_players': 'Direct players',
  'breadcrumb.outright_edit': 'Edit outright',
  'role.admin': 'Administrator',
  'role.super_admin': 'Super admin',
@@ -632,7 +642,11 @@ const en: Record<string, string> = {
  'match.status.SETTLED': 'Settled',
  'match.status.PENDING_SETTLEMENT': 'Pending settlement',
  'match.filter.has_bets': 'Show Placed Bets Only',
+  'match.filter.kickoff_from': 'Kickoff from',
+  'match.filter.kickoff_to': 'Kickoff to',
  'match.sort.default': 'Default Order',
+  'match.sort.kickoff_asc': 'By kickoff (earliest first)',
+  'match.sort.kickoff_desc': 'By kickoff (latest first)',
  'match.sort.bet_count': 'By Bet Count',
  'match.sort.total_stake': 'By Stake Amount',
  // 列表页/弹窗文案通过 bundles/en-US 动态平载，不在此处静态 spread
@@ -766,6 +780,9 @@ const ms: Record<string, string> = {
  'breadcrumb.settlement': 'Penyelesaian',
  'breadcrumb.match_edit': 'Edit perlawanan',
  'breadcrumb.match_markets': 'Pasaran',
+  'breadcrumb.league_fixtures': 'Perlawanan',
+  'breadcrumb.league_outrights': 'Odds juara',
+  'breadcrumb.agent_direct_players': 'Pemain langsung',
  'breadcrumb.outright_edit': 'Edit juara',
  'role.admin': 'Pentadbir',
  'role.super_admin': 'Super pentadbir',
@@ -945,7 +962,11 @@ const ms: Record<string, string> = {
  'match.status.SETTLED': 'Diselesaikan',
  'match.status.PENDING_SETTLEMENT': 'Menunggu penyelesaian',
  'match.filter.has_bets': 'Tunjukkan Pertaruhan Sahaja',
+  'match.filter.kickoff_from': 'Mula dari',
+  'match.filter.kickoff_to': 'Mula hingga',
  'match.sort.default': 'Susunan Lalai',
+  'match.sort.kickoff_asc': 'Ikut masa mula (awal→lewat)',
+  'match.sort.kickoff_desc': 'Ikut masa mula (lewat→awal)',
  'match.sort.bet_count': 'Ikut Bil. Pertaruhan',
  'match.sort.total_stake': 'Ikut Jumlah Taruhan',
  // 列表页/弹窗文案通过 bundles/ms-MY 动态平载，不在此处静态 spread
--- a/apps/admin/src/i18n/admin-pages-ms.ts
+++ b/apps/admin/src/i18n/admin-pages-ms.ts
@@ -134,6 +134,7 @@ export const adminPagesMs: Record<string, string> = {
  'agent.col.credit': 'Had / Digunakan / Tersedia',
  'agent.col.direct_players': 'Pemain terus',
  'agent.direct_players_title': 'Pemain terus · {name}',
+  'agent.open_agent_hint': 'Klik baris ejen untuk buka halaman pemain terus.',
  'agent.platform_row_name': 'Platform',
  'agent.col.sub_agents': 'Sub-ejen',
  'agent.col.cashback': 'Kadar rebat',
@@ -287,6 +288,10 @@ export const adminPagesMs: Record<string, string> = {
  'match.hint.edit_published': 'Diterbitkan: edit masa mula, pilihan utama, nama paparan; tertutup/selesai dikunci.',
  'match.expand_league_hint': 'Kembangkan liga untuk urus perlawanan; odds juara di tab Odds juara.',
  'match.expand_outright_hint': 'Kembangkan liga untuk sunting odds juara; pasukan perlawanan disegerakkan auto, boleh tambah pasukan belum dijadualkan.',
+  'match.open_league_hint': 'Klik baris liga untuk buka halaman urus perlawanan.',
+  'match.open_outright_hint': 'Klik baris liga untuk buka halaman odds juara.',
+  'match.league_fixtures_subtitle': 'Perlawanan',
+  'match.league_outrights_subtitle': 'Odds juara',
  'outright.odds_only_hint': 'Pasukan daripada perlawanan disegerakkan auto; boleh tambah pasukan manual dan sunting odds di sini. Pasaran juara ikut terbitan liga — tiada langkah terbit berasingan.',
  'outright.league_unpublished_hint': 'Liga belum diterbitkan. Tetapkan liga kepada Diterbitkan di halaman ini untuk membuka pertaruhan juara secara automatik.',
  'outright.unsettled_fixtures_hint': '{n} perlawanan dalam liga ini masih belum diselesaikan. Selesaikan dahulu sebelum juara.',
@@ -355,6 +360,7 @@ export const adminPagesMs: Record<string, string> = {
  'audit.action.UPDATE_PLAYER_ACCOUNT_SETTINGS': 'Kemas kini tetapan akaun pemain',
  'audit.action.UPDATE_AGENT_SUSPEND_SETTINGS': 'Kemas kini tetapan penggantungan ejen',
  'audit.action.UPDATE_AGENT_HIERARCHY_SETTINGS': 'Kemas kini tetapan hierarki ejen',
+  'audit.action.UPDATE_PLATFORM_DIRECT_CASHBACK_SETTINGS': 'Kemas kini tetapan rebat platform',
  'audit.action.UPDATE_BETTING_LIMITS': 'Kemas kini had pertaruhan',
  'audit.action.CONFIRM_SETTLEMENT': 'Sahkan penyelesaian',
  'audit.action.CONFIRM_RESETTLE': 'Sahkan penyelesaian semula',
@@ -362,6 +368,7 @@ export const adminPagesMs: Record<string, string> = {
  'audit.action.CANCEL_CASHBACK': 'Batalkan kelompok rebat',
  'audit.action.CREATE_STAFF': 'Cipta kakitangan',
  'audit.action.UPDATE_STAFF': 'Kemas kini kakitangan',
+  'audit.action.DELETE_STAFF': 'Padam kakitangan',
  'audit.action.PURGE_UNUSED_FILES': 'Padam media tidak digunakan',
  'audit.action.FORGOT_PASSWORD_RESET': 'Pemain set semula kata laluan',
  'audit.action.CREATE_LEAGUE': 'Cipta liga',
@@ -613,6 +620,7 @@ export const adminPagesMs: Record<string, string> = {
  'settlement.record_score': 'Simpan skor',
  'settlement.preview_hint': 'Pratonton menukar perlawanan ke menunggu penyelesaian (skor disimpan selepas pengesahan; boleh buka semula sebelum itu)',
  'settlement.preview_btn': 'Pratonton penyelesaian',
+  'settlement.view_preview_btn': 'Lihat pratonton penyelesaian',
  'settlement.preview_failed': 'Gagal menjana pratonton penyelesaian',
  'settlement.err_score_not_recorded': 'Sila masukkan skor separuh masa dan penuh masa sebelum penyelesaian',
  'settlement.must_close_first': 'Tutup pertaruhan sebelum penyelesaian',
@@ -647,6 +655,33 @@ export const adminPagesMs: Record<string, string> = {
  'settlement.smart.strategy.TARGET_HOLD': 'Sasaran pegangan',
  'msg.score_recorded': 'Skor disimpan',
  'msg.settlement_confirmed': 'Penyelesaian disahkan',
+  'settlement.resettle_reason': 'Sebab penyelesaian semula',
+  'settlement.resettle_preview': 'Pratonton penyelesaian semula',
+  'settlement.resettle_preview_title': 'Pratonton penyelesaian semula',
+  'settlement.resettle_affected': 'Pertaruhan terpengaruh',
+  'settlement.resettle_topup': 'Bayaran tambahan diperlukan',
+  'settlement.resettle_clawback': 'Bayaran balik diperlukan',
+  'settlement.resettle_confirm': 'Sahkan penyelesaian semula',
+  'settlement.resettle_affected_list': 'Butiran Pertaruhan Terpengaruh',
+  'settlement.resettle_col.old_result': 'Keputusan/Bayaran Asal',
+  'settlement.resettle_col.new_result': 'Keputusan/Bayaran Baharu',
+  'settlement.resettle_col.adjust': 'Pelarasan',
+  'settlement.history_tab': 'Rekod Penyelesaian',
+  'settlement.history_tab_bets': 'Statistik Pertaruhan',
+  'settlement.history.no_records': 'Tiada rekod penyelesaian',
+  'settlement.history.col.batch_no': 'No. Kumpulan',
+  'settlement.history.col.type': 'Jenis',
+  'settlement.history.col.score': 'Skor (HT/FT)',
+  'settlement.history.col.corners': 'Sepakan sudut (R/T)',
+  'settlement.history.col.cards': 'Kad kuning/merah (R/T)',
+  'settlement.history.col.total_bets': 'Pertaruhan diselesaikan',
+  'settlement.history.col.total_payout': 'Jumlah bayaran',
+  'settlement.history.col.total_refund': 'Jumlah bayaran balik',
+  'settlement.history.col.operator': 'Pengendali',
+  'settlement.history.col.time': 'Masa diselesaikan',
+  'settlement.history.col.reason': 'Sebab',
+  'settlement.history.type.initial': 'Penyelesaian awal',
+  'settlement.history.type.resettle': 'Penyelesaian semula',

  'agent_portal.create_player_section': 'Cipta pemain',
  'agent_portal.deposit_section': 'Tambah baki',
@@ -993,6 +1028,15 @@ export const adminPagesMs: Record<string, string> = {
  'media.no_files': 'Tiada fail lagi',
  'media.refresh': 'Muat Semula',
  'media.unused_count': '{n} tidak digunakan',
+  'media.storage_stats': 'Statistik Storan',
+  'media.deposits_on_disk': 'Tangkapan Skrin Deposit (Tidak dipetakan ke Media)',
+  'media.screenshot_cleanup': 'Pembersihan Tangkapan Skrin',
+  'media.cleanup_auto_enabled': 'Pembersihan Auto Dinonaktifkan/Diaktifkan',
+  'media.cleanup_keep_days': 'Tempoh Penyimpanan (Hari)',
+  'media.cleanup_before_date': 'Tarikh Akhir Pembersihan Manual',
+  'media.cleanup_run_now': 'Bersihkan Sekarang',
+  'media.cleanup_result': 'Berjaya membersihkan {cleaned} tangkapan skrin, membebaskan storan sebanyak {size}.',
+  'media.cleanup_expired_tag': 'Dibersihkan',
 };

 export default adminPagesMs;
--- a/apps/admin/src/i18n/admin-pages.ts
+++ b/apps/admin/src/i18n/admin-pages.ts
@@ -1087,6 +1087,14 @@ export const adminPagesZh: Record<string, string> = {
  'media.no_files': '暂无文件',
  'media.refresh': '刷新',
  'media.unused_count': '{n} 个未使用',
+  'media.storage_stats': '存储空间统计',
+  'media.deposits_on_disk': '充值订单截图 (未挂靠媒体库)',
+  'media.screenshot_cleanup': '充值截图清理',
+  'media.cleanup_auto_enabled': '开启自动定期清理',
+  'media.cleanup_keep_days': '截图保留天数',
+  'media.cleanup_before_date': '手动清理截止日期',
+  'media.cleanup_run_now': '立即清理',
+  'media.cleanup_result': '成功清理了 {cleaned} 张截图，释放了 {size} 空间。',
 };

 export const adminPagesEn: Record<string, string> = {
@@ -2178,4 +2186,12 @@ export const adminPagesEn: Record<string, string> = {
  'media.no_files': 'No files yet',
  'media.refresh': 'Refresh',
  'media.unused_count': '{n} unused',
+  'media.storage_stats': 'Storage Statistics',
+  'media.deposits_on_disk': 'Recharge Screenshots (Unmapped to Media Library)',
+  'media.screenshot_cleanup': 'Screenshot Cleanup',
+  'media.cleanup_auto_enabled': 'Enable Auto-cleanup',
+  'media.cleanup_keep_days': 'Retention Days',
+  'media.cleanup_before_date': 'Manual Cleanup Before Date',
+  'media.cleanup_run_now': 'Clean Now',
+  'media.cleanup_result': 'Successfully cleaned {cleaned} screenshot(s), freeing {size} of space.',
 };
--- a/apps/admin/src/i18n/pages/en.ts
+++ b/apps/admin/src/i18n/pages/en.ts
@@ -140,6 +140,7 @@ const adminPages: Record<string, string> = {
  'agent.col.credit': 'Limit / Used / Available',
  'agent.col.direct_players': 'Direct players',
  'agent.direct_players_title': 'Direct players · {name}',
+  'agent.open_agent_hint': 'Click an agent row to open their direct players page.',
  'agent.platform_row_name': 'Platform',
  'agent.col.sub_agents': 'Sub-agents',
  'agent.col.cashback': 'Cashback rate',
@@ -307,6 +308,10 @@ const adminPages: Record<string, string> = {
  'match.hint.edit_published': 'Published: edit kickoff, featured, display names; closed/settled are locked.',
  'match.expand_league_hint': 'Expand a league to manage fixtures; use Outright odds for winner markets.',
  'match.expand_outright_hint': 'Expand a league to edit winner odds; fixture teams sync automatically, and you can add teams not yet on the schedule.',
+  'match.open_league_hint': 'Click a league row to open its fixture management page.',
+  'match.open_outright_hint': 'Click a league row to open its outright odds page.',
+  'match.league_fixtures_subtitle': 'Fixtures',
+  'match.league_outrights_subtitle': 'Outright odds',
  'outright.odds_only_hint': 'Teams from fixtures are added automatically; add extra teams manually and edit winner odds here. Outright follows league publish—no separate publish step.',
  'outright.league_unpublished_hint': 'League is not published yet. Set the league to Published on this page to open outright betting automatically.',
  'outright.unsettled_fixtures_hint': '{n} fixture(s) in this league are still unsettled. Settle them before settling the outright market.',
@@ -372,17 +377,24 @@ const adminPages: Record<string, string> = {
  'audit.action.UPDATE_AGENT': 'Update agent',
  'audit.action.UPDATE_PLAYER_ACCOUNT_SETTINGS': 'Update player account settings',
  'audit.action.UPDATE_AGENT_SUSPEND_SETTINGS': 'Update agent suspend settings',
+  'audit.action.UPDATE_AGENT_HIERARCHY_SETTINGS': 'Update agent hierarchy settings',
+  'audit.action.UPDATE_PLATFORM_DIRECT_CASHBACK_SETTINGS': 'Update platform cashback settings',
  'audit.action.UPDATE_BETTING_LIMITS': 'Update betting limits',
+  'audit.action.RESET_PLAYER_PASSWORD': 'Reset player password',
  'audit.action.CONFIRM_SETTLEMENT': 'Confirm settlement',
  'audit.action.CONFIRM_RESETTLE': 'Confirm resettlement',
  'audit.action.CONFIRM_CASHBACK': 'Confirm cashback payout',
  'audit.action.CANCEL_CASHBACK': 'Cancel cashback batch',
+  'audit.action.CREATE_STAFF': 'Create staff account',
+  'audit.action.UPDATE_STAFF': 'Edit staff account',
+  'audit.action.DELETE_STAFF': 'Delete staff account',
  'audit.module.USERS': 'Players',
  'audit.module.AGENTS': 'Agents',
  'audit.module.SYSTEM': 'System',
  'audit.module.SETTINGS': 'Settings',
  'audit.module.SETTLEMENT': 'Settlement',
  'audit.module.CASHBACK': 'Cashback',
+  'audit.module.STAFF': 'Staff',

  'cashback.start_date': 'Start date',
  'cashback.end_date': 'End date',
@@ -591,6 +603,7 @@ const adminPages: Record<string, string> = {
  'settlement.record_score': 'Save score',
  'settlement.preview_hint': 'Preview moves the match to pending settlement and calculates payouts (scores are saved on confirm; you can reopen betting before confirming)',
  'settlement.preview_btn': 'Preview settlement',
+  'settlement.view_preview_btn': 'View settlement preview',
  'settlement.preview_failed': 'Failed to generate settlement preview',
  'settlement.err_score_not_recorded': 'Enter half-time and full-time scores before preview',
  'settlement.must_close_first': 'Close betting before settlement',
@@ -629,6 +642,26 @@ const adminPages: Record<string, string> = {
  'settlement.resettle_topup': 'Top-up required',
  'settlement.resettle_clawback': 'Clawback required',
  'settlement.resettle_confirm': 'Confirm resettle',
+  'settlement.resettle_affected_list': 'Affected Bets Details',
+  'settlement.resettle_col.old_result': 'Old Result/Old Payout',
+  'settlement.resettle_col.new_result': 'New Result/New Payout',
+  'settlement.resettle_col.adjust': 'Adjustment',
+  'settlement.history_tab': 'Settlement Records',
+  'settlement.history_tab_bets': 'Bet Stats',
+  'settlement.history.no_records': 'No settlement records',
+  'settlement.history.col.batch_no': 'Batch No.',
+  'settlement.history.col.type': 'Type',
+  'settlement.history.col.score': 'Score (HT/FT)',
+  'settlement.history.col.corners': 'Corners (H/A)',
+  'settlement.history.col.cards': 'Yellow/Red cards (H/A)',
+  'settlement.history.col.total_bets': 'Settled bets',
+  'settlement.history.col.total_payout': 'Total payout',
+  'settlement.history.col.total_refund': 'Total refund',
+  'settlement.history.col.operator': 'Operator',
+  'settlement.history.col.time': 'Settled at',
+  'settlement.history.col.reason': 'Reason',
+  'settlement.history.type.initial': 'Initial settlement',
+  'settlement.history.type.resettle': 'Resettlement',
  'user.betting_limits': 'Betting limits',
  'user.betting_limits_hint': 'Global stake/payout/daily limits for player bets',
  'user.limit.min_stake': 'Min stake',
@@ -1051,6 +1084,15 @@ const adminPages: Record<string, string> = {
  'media.no_files': 'No files yet',
  'media.refresh': 'Refresh',
  'media.unused_count': '{n} unused',
+  'media.storage_stats': 'Storage Statistics',
+  'media.deposits_on_disk': 'Recharge Screenshots (Unmapped to Media Library)',
+  'media.screenshot_cleanup': 'Screenshot Cleanup',
+  'media.cleanup_auto_enabled': 'Enable Auto-cleanup',
+  'media.cleanup_keep_days': 'Retention Days',
+  'media.cleanup_before_date': 'Manual Cleanup Before Date',
+  'media.cleanup_run_now': 'Clean Now',
+  'media.cleanup_result': 'Successfully cleaned {cleaned} screenshot(s), freeing {size} of space.',
+  'media.cleanup_expired_tag': 'Purged',
 };

 export default adminPages;
--- a/apps/admin/src/i18n/pages/zh.ts
+++ b/apps/admin/src/i18n/pages/zh.ts
@@ -141,6 +141,7 @@ const adminPages: Record<string, string> = {
  'agent.col.credit': '授信/已用/可用',
  'agent.col.direct_players': '直属玩家',
  'agent.direct_players_title': '直属玩家 · {name}',
+  'agent.open_agent_hint': '点击代理行进入直属玩家管理页。',
  'agent.platform_row_name': '平台',
  'agent.col.sub_agents': '下级代理',
  'agent.col.cashback': '返水率',
@@ -308,6 +309,10 @@ const adminPages: Record<string, string> = {
  'match.hint.edit_published': '已发布：可修改开赛时间、热门及显示名称；封盘/已结算后不可编辑。',
  'match.expand_league_hint': '展开联赛可管理单场赛事；优胜冠军盘口请到「优胜赛配置」。',
  'match.expand_outright_hint': '展开联赛可编辑夺冠赔率；单场球队会自动同步，也可手动补充尚未赛程的球队。',
+  'match.open_league_hint': '点击联赛行进入单场赛事管理页。',
+  'match.open_outright_hint': '点击联赛行进入优胜冠军赔率配置页。',
+  'match.league_fixtures_subtitle': '单场赛事',
+  'match.league_outrights_subtitle': '优胜冠军赔率',
  'outright.odds_only_hint': '单场赛程中的球队会自动加入；可手动添加尚未参赛的球队，并在此调整赔率。冠军盘随联赛发布，无需单独发布。',
  'outright.league_unpublished_hint': '联赛尚未发布，请在本页编辑联赛并设为「已发布」后，冠军盘将自动开放投注。',
  'outright.unsettled_fixtures_hint': '该联赛仍有 {n} 场单场未结算，请先完成单场结算后再结算冠军盘。',
@@ -373,17 +378,24 @@ const adminPages: Record<string, string> = {
  'audit.action.UPDATE_AGENT': '更新代理',
  'audit.action.UPDATE_PLAYER_ACCOUNT_SETTINGS': '更新玩家账号设置',
  'audit.action.UPDATE_AGENT_SUSPEND_SETTINGS': '更新代理停押设置',
+  'audit.action.UPDATE_AGENT_HIERARCHY_SETTINGS': '更新代理层级设置',
+  'audit.action.UPDATE_PLATFORM_DIRECT_CASHBACK_SETTINGS': '更新平台返水设置',
  'audit.action.UPDATE_BETTING_LIMITS': '更新投注限额',
+  'audit.action.RESET_PLAYER_PASSWORD': '重置玩家密码',
  'audit.action.CONFIRM_SETTLEMENT': '确认结算',
  'audit.action.CONFIRM_RESETTLE': '确认重结算',
  'audit.action.CONFIRM_CASHBACK': '确认发放返水',
  'audit.action.CANCEL_CASHBACK': '作废返水批次',
+  'audit.action.CREATE_STAFF': '创建后台账号',
+  'audit.action.UPDATE_STAFF': '编辑后台账号',
+  'audit.action.DELETE_STAFF': '删除后台账号',
  'audit.module.USERS': '玩家',
  'audit.module.AGENTS': '代理',
  'audit.module.SYSTEM': '系统',
  'audit.module.SETTINGS': '系统设置',
  'audit.module.SETTLEMENT': '结算',
  'audit.module.CASHBACK': '返水',
+  'audit.module.STAFF': '后台账号',

  'cashback.start_date': '开始日期',
  'cashback.end_date': '结束日期',
@@ -573,7 +585,7 @@ const adminPages: Record<string, string> = {
  'settlement.chart.stake_by_selection': '选项单关投注额 TOP6',
  'settlement.stats_by_market': '按玩法 / 选项汇总',
  'settlement.bet_list': '相关注单',
-  'settlement.bet_list_hint': '按注单聚合；同场串关含多腿时显示 ×腿数',
+  'settlement.bet_list_hint': '按注单聚合；同场串关含多腿时显示 ×腿数（点击标签可切换查看结算记录）',
  'settlement.no_bets': '本场暂无注单',
  'settlement.col.market': '玩法',
  'settlement.col.selection': '选项',
@@ -592,6 +604,7 @@ const adminPages: Record<string, string> = {
  'settlement.record_score': '录入比分',
  'settlement.preview_hint': '填写比分后点击生成预览，赛事将进入待结算并计算派彩（正式比分在确认结算后保存；未确认前仍可解除封盘）',
  'settlement.preview_btn': '生成结算预览',
+  'settlement.view_preview_btn': '查看结算预览',
  'settlement.preview_failed': '生成结算预览失败',
  'settlement.err_score_not_recorded': '请先填写半场与全场比分后再生成预览',
  'settlement.must_close_first': '请先封盘后再结算',
@@ -629,6 +642,26 @@ const adminPages: Record<string, string> = {
  'settlement.resettle_topup': '需补发金额',
  'settlement.resettle_clawback': '需扣回金额',
  'settlement.resettle_confirm': '确认重结算',
+  'settlement.resettle_affected_list': '受影响注单明细',
+  'settlement.resettle_col.old_result': '原结果/原派彩',
+  'settlement.resettle_col.new_result': '新结果/新派彩',
+  'settlement.resettle_col.adjust': '差额调整',
+  'settlement.history_tab': '结算记录',
+  'settlement.history_tab_bets': '注单统计',
+  'settlement.history.no_records': '暂无结算记录',
+  'settlement.history.col.batch_no': '批次号',
+  'settlement.history.col.type': '类型',
+  'settlement.history.col.score': '比分（半/全）',
+  'settlement.history.col.corners': '角球（主/客）',
+  'settlement.history.col.cards': '黄牌/红牌（主/客）',
+  'settlement.history.col.total_bets': '结算注单数',
+  'settlement.history.col.total_payout': '总派彩',
+  'settlement.history.col.total_refund': '总退款',
+  'settlement.history.col.operator': '操作人',
+  'settlement.history.col.time': '结算时间',
+  'settlement.history.col.reason': '原因',
+  'settlement.history.type.initial': '首次结算',
+  'settlement.history.type.resettle': '重新结算',
  'user.betting_limits': '投注限额',
  'user.betting_limits_hint': '全局下注校验：最小/最大投注、最高派彩、每日投注上限',
  'user.limit.min_stake': '最小投注',
@@ -1058,6 +1091,15 @@ const adminPages: Record<string, string> = {
  'media.no_files': '暂无文件',
  'media.refresh': '刷新',
  'media.unused_count': '{n} 个未使用',
+  'media.storage_stats': '存储空间统计',
+  'media.deposits_on_disk': '充值订单截图 (未挂靠媒体库)',
+  'media.screenshot_cleanup': '充值截图清理',
+  'media.cleanup_auto_enabled': '开启自动定期清理',
+  'media.cleanup_keep_days': '截图保留天数',
+  'media.cleanup_before_date': '手动清理截止日期',
+  'media.cleanup_run_now': '立即清理',
+  'media.cleanup_result': '成功清理了 {cleaned} 张截图，释放了 {size} 空间。',
+  'media.cleanup_expired_tag': '已清理',
 };

 export default adminPages;
--- a/apps/admin/src/layouts/ManageLayout.vue
+++ b/apps/admin/src/layouts/ManageLayout.vue
@@ -129,7 +129,7 @@ const currentLabel = computed(() => {
  return hit?.label ?? '';
 });

-const topbarCrumbs = computed(() => resolveAdminBreadcrumb(route.path, t));
+const topbarCrumbs = computed(() => resolveAdminBreadcrumb(route.path, t, route.query));

 const roleLabel = computed(() => {
  if (auth.isAdmin.value) {
@@ -303,9 +303,9 @@ watch(() => route.path, () => {
        </div>
      </header>
      <main class="page-main">
-        <RouterView v-slot="{ Component }">
+        <RouterView v-slot="{ Component, route: layoutRoute }">
          <KeepAlive :max="10" :include="keepAliveIncludes">
-            <component :is="Component" />
+            <component :is="Component" :key="layoutRoute.matched[1]?.path ?? layoutRoute.path" />
          </KeepAlive>
        </RouterView>
      </main>
--- a/apps/admin/src/router/index.ts
+++ b/apps/admin/src/router/index.ts
@@ -55,6 +55,18 @@ const router = createRouter({
          path: 'users',
          component: () => import('../views/AgentManager.vue'),
          meta: { adminOnly: true, permissions: [AdminPerm.usersView, AdminPerm.agentsView] },
+          children: [
+            {
+              path: 'agents/:agentId/players',
+              name: 'admin-agent-direct-players',
+              component: () => import('../views/agent/AgentDirectPlayersView.vue'),
+            },
+            {
+              path: 'settings',
+              name: 'admin-global-settings',
+              component: () => import('../views/agent/GlobalSettingsView.vue'),
+            },
+          ],
        },
        {
          path: 'finance-logs',
@@ -76,11 +88,25 @@ const router = createRouter({
          path: 'matches',
          component: () => import('../views/Matches.vue'),
          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
+          children: [
+            {
+              path: 'leagues/:leagueId',
+              name: 'admin-league-matches',
+              component: () => import('../views/matches/LeagueMatchesPage.vue'),
+            },
+          ],
        },
        {
          path: 'matches/outrights',
          component: () => import('../views/MatchesOutrights.vue'),
          meta: { adminOnly: true, permissions: [AdminPerm.matches] },
+          children: [
+            {
+              path: 'leagues/:leagueId',
+              name: 'admin-league-outrights',
+              component: () => import('../views/matches/LeagueOutrightsPage.vue'),
+            },
+          ],
        },
        {
          path: 'matches/market-templates',
--- a/apps/admin/src/utils/admin-breadcrumb.ts
+++ b/apps/admin/src/utils/admin-breadcrumb.ts
@@ -7,10 +7,39 @@ export interface AdminBreadcrumbItem {
 export function resolveAdminBreadcrumb(
  path: string,
  t: (key: string) => string,
+  query: Record<string, unknown> = {},
 ): AdminBreadcrumbItem[] | null {
-  if (/^\/settlement\/[^/]+/.test(path)) {
+  if (/^\/users\/agents\/[^/]+\/players/.test(path)) {
+    return [
+      { label: t('nav.agents_players'), to: '/users' },
+      { label: t('breadcrumb.agent_direct_players') },
+    ];
+  }
+  if (path === '/users/settings') {
+    return [
+      { label: t('nav.agents_players'), to: '/users' },
+      { label: t('user.page_settings') },
+    ];
+  }
+  if (/^\/matches\/leagues\/[^/]+/.test(path)) {
    return [
      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.league_fixtures') },
+    ];
+  }
+  if (/^\/matches\/outrights\/leagues\/[^/]+/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches/outrights' },
+      { label: t('breadcrumb.league_outrights') },
+    ];
+  }
+  if (/^\/settlement\/[^/]+/.test(path)) {
+    const returnTo =
+      typeof query.returnTo === 'string' && query.returnTo.startsWith('/')
+        ? query.returnTo
+        : '/matches';
+    return [
+      { label: t('nav.matches'), to: returnTo },
      { label: t('breadcrumb.settlement') },
    ];
  }
--- a/apps/admin/src/utils/matchesListState.ts
+++ b/apps/admin/src/utils/matchesListState.ts
@@ -1,10 +1,8 @@
-/** 赛事列表 UI 状态（返回列表时恢复展开等） */
+/** 赛事列表 UI 状态（返回列表时恢复筛选与分页） */

 const STORAGE_KEY = 'admin_matches_list_ui';
-export const MAX_EXPANDED_LEAGUES = 3;

 export type MatchesListUiState = {
-  expandedLeagueIds: string[];
  page: number;
  pageSize: number;
  filterStatus: string;
@@ -13,7 +11,6 @@ export type MatchesListUiState = {

 function defaultState(): MatchesListUiState {
  return {
-    expandedLeagueIds: [],
    page: 1,
    pageSize: 10,
    filterStatus: '',
@@ -21,44 +18,21 @@ function defaultState(): MatchesListUiState {
  };
 }

-function capExpanded(ids: string[]): string[] {
-  return ids.slice(0, MAX_EXPANDED_LEAGUES);
-}
-
 export function readMatchesListUiState(): MatchesListUiState | null {
  try {
    const raw = sessionStorage.getItem(STORAGE_KEY);
    if (!raw) return null;
-    const parsed = JSON.parse(raw) as MatchesListUiState;
-    if (!Array.isArray(parsed.expandedLeagueIds)) return null;
-    return {
-      ...parsed,
-      expandedLeagueIds: capExpanded(parsed.expandedLeagueIds),
-    };
+    return JSON.parse(raw) as MatchesListUiState;
  } catch {
    return null;
  }
 }

 export function writeMatchesListUiState(state: MatchesListUiState) {
-  sessionStorage.setItem(
-    STORAGE_KEY,
-    JSON.stringify({
-      ...state,
-      expandedLeagueIds: capExpanded(state.expandedLeagueIds),
-    }),
-  );
+  sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state));
 }

 export function patchMatchesListUiState(patch: Partial<MatchesListUiState>) {
  const base = readMatchesListUiState() ?? defaultState();
  writeMatchesListUiState({ ...base, ...patch });
 }
-
-/** 从子页返回前确保该赛事行处于展开记录中 */
-export function ensureLeagueExpanded(leagueId: string) {
-  if (!leagueId) return;
-  const base = readMatchesListUiState() ?? defaultState();
-  const ids = capExpanded([...new Set([...base.expandedLeagueIds, leagueId])]);
-  writeMatchesListUiState({ ...base, expandedLeagueIds: ids });
-}
--- a/apps/admin/src/views/AgentManager.vue
+++ b/apps/admin/src/views/AgentManager.vue
@@ -1,18 +1,17 @@
 <script setup lang="ts">
-import { ref, onMounted, onActivated, computed, watch, reactive, h } from 'vue';
+import { ref, onMounted, onActivated, computed, watch, reactive, h, provide } from 'vue';

 defineOptions({ name: 'AdminAgentManager' });
-import { useRouter } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import { resolveFormError, resolveApiError } from '../i18n/form-validation';
 import api from '../api';
-import { clearStaffSession } from '../stores/auth';
-
 import { usePermissions } from '../composables/usePermissions';
 import { AdminPerm } from '../constants/permissions';

 const { t, localeTag } = useAdminLocale();
+const route = useRoute();
 const router = useRouter();
 const { hasPermission, role: staffRole } = usePermissions();

@@ -66,9 +65,9 @@ import {
 } from '../utils/format-amount';
 import { formatAgentLevelNumeral } from '../utils/agent-level-label';
 import {
-  shouldToggleExpandOnRowClick,
-  expandableTableRowClassName,
-} from '../utils/expandable-table';
+  agentDirectPlayersReloadKey,
+  agentPlayerActionsKey,
+} from '../composables/agent-direct-players-context';
 import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 import PlayerWalletLedgerDialog from '../components/PlayerWalletLedgerDialog.vue';
 import WalletTransferContext from '../components/WalletTransferContext.vue';
@@ -113,6 +112,7 @@ type SubAgentLevelState = {

 const subAgentLevelState = reactive<Record<number, SubAgentLevelState>>({});
 const agentLevelCounts = ref<Record<number, number>>({});
+const hierarchySettings = ref({ maxAgentLevel: 0 });

 function ensureSubAgentState(level: number): SubAgentLevelState {
  if (!subAgentLevelState[level]) {
@@ -176,12 +176,12 @@ const playerFilterAgent = ref('');
 const playerLoading = ref(false);
 const agentOptions = ref<{ id: string; username: string; level: number; parentUsername?: string | null }[]>([]);

-/* ─── Expansion state ─── */
-const expandedSet = ref(new Set<string>());
-const agentPlayersMap = ref<Record<string, PlayerRow[]>>({});
-const expandLoading = ref<Record<string, boolean>>({});
+const directPlayersReload = ref<(() => void) | null>(null);
+provide(agentDirectPlayersReloadKey, directPlayersReload);

-const expandedRowKeys = computed(() => Array.from(expandedSet.value));
+const isAgentChildRoute = computed(() =>
+  /^\/users\/agents\/[^/]+\/players/.test(route.path) || route.path === '/users/settings',
+);

 const createToolbarChildLevel = ref<number | null>(null);

@@ -217,19 +217,9 @@ const creditForm = ref({ amount: 10000, remark: '' });
 const creditContext = ref<AgentCreditAdjustContext | null>(null);
 const creditContextLoading = ref(false);

-/* ─── Global settings ─── */
-const playerSettings = ref({ allowPasswordChange: true, allowUsernameChange: false });
-const bettingLimits = ref({
-  minStake: 1,
-  maxStakeSingle: 50000,
-  maxStakeParlay: 20000,
-  maxPayoutSingle: 500000,
-  maxPayoutParlay: 1000000,
-  dailyStakeLimit: 200000,
-});
-const settingsSaving = ref(false);
-const limitsSaving = ref(false);
-const hierarchySettings = ref({ maxAgentLevel: 0 });
+/* ─── Init ─── */
+let pageInitPromise: Promise<void> | null = null;
+const pageInitLoaded = ref(false);
 const DEFAULT_SUB_AGENT_CREDIT_RATIO = 50;
 const freezeAgentVisible = ref(false);
 const freezeAgentLoading = ref(false);
@@ -239,18 +229,7 @@ const freezeAgentForm = ref({
  blockDirectPlayerLogin: false,
  unfreezeDirectPlayers: false,
 });
-const hierarchySaving = ref(false);
-const platformDirectRate = ref(0);
-const adminInviteRate = ref(0);
-const platformDirectSaving = ref(false);
-const resetAllowed = ref(false);
-const resetLoading = ref(false);
-const resetConfirmPhrase = ref('');
-const settingsCollapseOpen = ref<string[]>([]);
-const settingsLoaded = ref(false);
-const resetDbStatusLoaded = ref(false);
 const agentOptionsLoading = ref(false);
-const MAX_EXPANDED_AGENT_ROWS = 2;

 const createDialogTitle = computed(() => {
  if (createAccountMode.value === 1) return t('agent.dialog.create');
@@ -413,11 +392,8 @@ function resolveCreateParentLabel(agentId: string) {
  return agentId;
 }

-/* ─── Init ─── */
-let pageInitPromise: Promise<void> | null = null;
-
 function ensurePageInit(): Promise<void> {
-  if (settingsLoaded.value) return Promise.resolve();
+  if (pageInitLoaded.value) return Promise.resolve();
  if (!pageInitPromise) {
    pageInitPromise = loadUsersPageInit().finally(() => {
      pageInitPromise = null;
@@ -444,10 +420,12 @@ function loadActiveViewTabData() {
 }

 onMounted(() => {
+  void ensurePageInit();
  loadActiveViewTabData();
 });
 // KeepAlive 激活时静默刷新当前 tab 列表（不重复 page-init）
 onActivated(() => {
+  void ensurePageInit();
  const tab = activeViewTab.value;
  if (tab === 'players' && canViewUsers.value && allPlayers.value.length > 0) void loadAllPlayers();
  else if (tab === 'tier1Agents' && canViewAgents.value && tier1Agents.value.length > 0) void loadTier1Agents();
@@ -465,44 +443,29 @@ async function loadUsersPageInit() {
  try {
    const { data } = await api.get('/admin/users/page-init');
    const payload = data.data as {
-      playerSettings?: typeof playerSettings.value;
-      bettingLimits?: typeof bettingLimits.value;
      hierarchySettings?: { maxAgentLevel: number };
-      platformDirect?: { platformDirectRate?: number | string; adminInviteRate?: number | string };
      agentLevelCounts?: Record<number, number>;
    };
-    if (payload.playerSettings) playerSettings.value = payload.playerSettings;
-    if (payload.bettingLimits) bettingLimits.value = payload.bettingLimits;
    if (payload.hierarchySettings) {
      hierarchySettings.value = {
        maxAgentLevel: payload.hierarchySettings.maxAgentLevel ?? 0,
      };
    }
-    if (payload.platformDirect) {
-      platformDirectRate.value = decimalRateToPercent(payload.platformDirect.platformDirectRate ?? 0);
-      adminInviteRate.value = decimalRateToPercent(
-        payload.platformDirect.adminInviteRate ?? payload.platformDirect.platformDirectRate ?? 0,
-      );
-    }
    if (payload.agentLevelCounts) {
      agentLevelCounts.value = payload.agentLevelCounts;
+      if (payload.agentLevelCounts[1] !== undefined) {
+        tier1Total.value = payload.agentLevelCounts[1];
+      }
    }
-    settingsLoaded.value = true;
+    pageInitLoaded.value = true;
  } catch {
    /* keep defaults */
  }
 }

-watch(settingsCollapseOpen, (open) => {
-  if (!open.includes('settings')) return;
-  if (!resetDbStatusLoaded.value) {
-    resetDbStatusLoaded.value = true;
-    void loadResetDatabaseStatus();
-  }
-  if (!settingsLoaded.value) {
-    void loadUsersPageInit();
-  }
-});
+function openGlobalSettings() {
+  void router.push('/users/settings');
+}

 /* ─── Load tier-1 agents ─── */
 async function loadTier1Agents() {
@@ -550,6 +513,9 @@ async function loadAgentLevelCounts() {
      normalized[Number(lvl)] = Number(cnt) || 0;
    }
    agentLevelCounts.value = normalized;
+    if (normalized[1] !== undefined) {
+      tier1Total.value = normalized[1];
+    }
  } catch {
    agentLevelCounts.value = {};
  }
@@ -683,16 +649,28 @@ function affiliationLabel(row: Pick<PlayerRow, 'affiliationAgents'>) {
  return formatPlayerAffiliationLabel(row, t('user.type.player'), t('agent.platform_row_name'));
 }

-function directPlayersTabLabel(ownerName: string, count: number) {
-  return `${t('agent.direct_players_title', { name: ownerName })} (${count})`;
+function eventClickElement(event: Event): Element | null {
+  const target = event.target;
+  if (target instanceof Element) return target;
+  if (target instanceof Node) return target.parentElement;
+  return null;
 }

-function onTier1AgentRowClick(row: AgentRow, _column: unknown, event: MouseEvent) {
-  onAgentRowClick(row, event);
+function openAgentDirectPlayers(row: AgentRow, _column: unknown, event: Event) {
+  const el = eventClickElement(event);
+  if (!el) return;
+  if (el.closest('button') || el.closest('.el-button') || el.closest('.admin-agent-row-actions')) return;
+  void router.push({
+    path: `/users/agents/${row.userId}/players`,
+    query: {
+      username: row.username,
+      fromTab: activeViewTab.value,
+    },
+  });
 }

-function onSubAgentRowClick(row: AgentRow, _column: unknown, event: MouseEvent) {
-  onAgentRowClick(row, event);
+function agentRowClassName() {
+  return 'row-navigable';
 }

 watch(activeViewTab, (tab) => {
@@ -716,199 +694,6 @@ watch(visibleSubAgentTabLevels, (levels) => {
  }
 });

-/* ─── Expansion ─── */
-async function onExpandChange(row: DisplayAgentRow, expandedRows: DisplayAgentRow[]) {
-  expandedSet.value = new Set(expandedRows.map((r) => r.userId));
-  if (expandedSet.value.has(row.userId) && !agentPlayersMap.value[row.userId]) {
-    await loadExpansionData(row.userId);
-  }
-}
-
-function onAgentRowClick(row: AgentRow, event: MouseEvent) {
-  if (!shouldToggleExpandOnRowClick(event)) return;
-  const userId = row.userId;
-  const next = new Set(expandedSet.value);
-  if (next.has(userId)) {
-    next.delete(userId);
-  } else {
-    if (next.size >= MAX_EXPANDED_AGENT_ROWS) {
-      const [first] = next;
-      if (first) next.delete(first);
-    }
-    next.add(userId);
-    if (!agentPlayersMap.value[userId]) void loadExpansionData(userId);
-  }
-  expandedSet.value = next;
-}
-
-async function loadExpansionData(agentId: string) {
-  expandLoading.value[agentId] = true;
-  try {
-    const { data } = await api.get('/admin/users', { params: { parentId: agentId, pageSize: 100 } });
-    agentPlayersMap.value[agentId] = data.data.items as PlayerRow[];
-  } catch {
-    agentPlayersMap.value[agentId] = [];
-  } finally {
-    expandLoading.value[agentId] = false;
-  }
-}
-
-function getPlayers(agentId: string) {
-  return agentPlayersMap.value[agentId] || [];
-}
-
-function refreshExpandedAgentPlayers() {
-  for (const agentId of expandedSet.value) {
-    loadExpansionData(agentId);
-  }
-}
-
-/* ─── Global settings ─── */
-async function loadResetDatabaseStatus() {
-  try {
-    const { data } = await api.get('/admin/system/reset-database');
-    resetAllowed.value = !!data.data?.allowed;
-  } catch {
-    resetAllowed.value = false;
-  }
-}
-
-async function resetDatabase() {
-  if (resetConfirmPhrase.value !== 'RESET') {
-    ElMessage.warning(t('user.reset_database_confirm_label'));
-    return;
-  }
-  try {
-    await ElMessageBox.confirm(t('user.reset_database_hint'), t('user.reset_database'), {
-      type: 'warning',
-      confirmButtonText: t('user.reset_database_btn'),
-      cancelButtonText: t('common.cancel'),
-    });
-  } catch {
-    return;
-  }
-  resetLoading.value = true;
-  try {
-    const { data } = await api.post('/admin/system/reset-database', { confirmPhrase: 'RESET' });
-    const accounts: string[] = data.data?.demoAccounts ?? [];
-    ElMessage.success({
-      message: `${t('user.reset_database_success')}\n${t('user.reset_database_accounts')}: ${accounts.join(' · ')}`,
-      duration: 8000,
-    });
-    clearStaffSession();
-    await router.push('/login');
-  } catch (e: unknown) {
-    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
-  } finally {
-    resetLoading.value = false;
-  }
-}
-
-async function loadBettingLimits() {
-  try {
-    const { data } = await api.get('/admin/settings/betting-limits');
-    bettingLimits.value = data.data;
-  } catch {
-    /* defaults */
-  }
-}
-
-async function saveBettingLimits() {
-  limitsSaving.value = true;
-  try {
-    const { data } = await api.put('/admin/settings/betting-limits', bettingLimits.value);
-    bettingLimits.value = data.data;
-    ElMessage.success(t('msg.saved'));
-  } catch (e: unknown) {
-    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
-    loadBettingLimits();
-  } finally {
-    limitsSaving.value = false;
-  }
-}
-
-async function loadPlayerSettings() {
-  try {
-    const { data } = await api.get('/admin/users/settings/account');
-    playerSettings.value = data.data;
-  } catch {
-    /* defaults */
-  }
-}
-
-async function savePlayerSettings() {
-  settingsSaving.value = true;
-  try {
-    const { data } = await api.put('/admin/users/settings/account', playerSettings.value);
-    playerSettings.value = data.data;
-    ElMessage.success(t('msg.saved'));
-  } catch (e: unknown) {
-    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
-    loadPlayerSettings();
-  } finally {
-    settingsSaving.value = false;
-  }
-}
-
-async function loadHierarchySettings() {
-  try {
-    const { data } = await api.get('/admin/agents/settings/hierarchy');
-    hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? 0 };
-  } catch {
-    hierarchySettings.value = { maxAgentLevel: 0 };
-  }
-}
-
-async function saveHierarchySettings() {
-  hierarchySaving.value = true;
-  try {
-    const { data } = await api.put('/admin/agents/settings/hierarchy', hierarchySettings.value);
-    hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? hierarchySettings.value.maxAgentLevel };
-    ElMessage.success(t('msg.saved'));
-  } catch (e: unknown) {
-    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
-    loadHierarchySettings();
-  } finally {
-    hierarchySaving.value = false;
-  }
-}
-
-async function loadPlatformDirectSettings() {
-  try {
-    const { data } = await api.get('/admin/settings/cashback/platform-direct');
-    const payload = data.data as { platformDirectRate?: number | string; adminInviteRate?: number | string };
-    platformDirectRate.value = decimalRateToPercent(payload?.platformDirectRate ?? 0);
-    adminInviteRate.value = decimalRateToPercent(payload?.adminInviteRate ?? payload?.platformDirectRate ?? 0);
-  } catch {
-    platformDirectRate.value = 0;
-    adminInviteRate.value = 0;
-  }
-}
-
-async function savePlatformDirectSettings() {
-  platformDirectSaving.value = true;
-  try {
-    const { data } = await api.put('/admin/settings/cashback/platform-direct', {
-      platformDirectRate: percentToDecimalRate(platformDirectRate.value),
-      adminInviteRate: percentToDecimalRate(adminInviteRate.value),
-    });
-    const payload = data.data as { platformDirectRate?: number | string; adminInviteRate?: number | string };
-    platformDirectRate.value = decimalRateToPercent(payload?.platformDirectRate ?? 0);
-    adminInviteRate.value = decimalRateToPercent(payload?.adminInviteRate ?? payload?.platformDirectRate ?? 0);
-    ElMessage.success(t('msg.saved'));
-  } catch (e: unknown) {
-    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
-    loadPlatformDirectSettings();
-  } finally {
-    platformDirectSaving.value = false;
-  }
-}
-
 const walletLedgerVisible = ref(false);
 const walletLedgerPlayerId = ref('');
 const walletLedgerPlayerUsername = ref<string | null>(null);
@@ -1030,7 +815,7 @@ async function submitCreate() {
    }
    const parentId = createParentAgentId.value || createForm.value.parentId;
    if (parentId) {
-      await loadExpansionData(parentId);
+      directPlayersReload.value?.();
    }
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
@@ -1374,7 +1159,7 @@ async function submitFreezeAgent() {
 function refreshExpandedParents() {
  loadAllPlayers();
  reloadAgentLists();
-  refreshExpandedAgentPlayers();
+  directPlayersReload.value?.();
 }

 const {
@@ -1445,107 +1230,40 @@ function creditTypeLabel(type: string) {
  if (type === 'CREDIT_DECREASE') return t('agent.credit.decrease');
  return type;
 }
+
+provide(agentPlayerActionsKey, {
+  get canCreatePlayer() {
+    return canCreateUsers.value;
+  },
+  get playerActionFlags() {
+    return playerActionFlags.value;
+  },
+  openCreatePlayer,
+  openDetailPlayer,
+  openEditPlayer,
+  openTransfer,
+  toggleFreezePlayer,
+  deletePlayer,
+  openPlayerWalletLedger,
+});
 </script>

 <template>
-  <div class="admin-list-page agent-mgr-page">
-    <!-- ─── Global settings collapse ─── -->
-    <el-collapse v-if="canManageSettings" v-model="settingsCollapseOpen" class="list-settings">
-      <el-collapse-item :title="t('user.page_settings')" name="settings">
-        <div class="list-settings-block">
-          <p class="list-settings-title">{{ t('user.global_settings') }}</p>
-          <el-form inline size="small" class="settings-form">
-            <el-form-item :label="t('user.field.allow_password_change')">
-              <el-switch v-model="playerSettings.allowPasswordChange" :loading="settingsSaving" @change="savePlayerSettings" />
-            </el-form-item>
-            <el-form-item :label="t('user.field.allow_username_change')">
-              <el-switch v-model="playerSettings.allowUsernameChange" :loading="settingsSaving" @change="savePlayerSettings" />
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="list-settings-block">
-          <p class="list-settings-title">{{ t('agent.hierarchy.settings_title') }}</p>
-          <p class="list-settings-hint">{{ t('agent.hierarchy.settings_hint') }}</p>
-          <el-form inline size="small" class="settings-form">
-            <el-form-item :label="t('agent.hierarchy.max_level')">
-              <el-input-number
-                v-model="hierarchySettings.maxAgentLevel"
-                :min="0"
-                :step="1"
-                controls-position="right"
-                :disabled="hierarchySaving"
-              />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" :loading="hierarchySaving" @click="saveHierarchySettings">{{ t('common.save') }}</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="list-settings-block">
-          <p class="list-settings-title">{{ t('cashback.settings_title') }}</p>
-          <el-form inline size="small" class="settings-form">
-            <el-form-item :label="t('cashback.platform_direct_default_rate')">
-              <RatePercentInput v-model="platformDirectRate" />
-            </el-form-item>
-            <p class="list-settings-hint block-hint">{{ t('cashback.platform_direct_default_hint') }}</p>
-            <el-form-item :label="t('cashback.admin_invite_default_rate')">
-              <RatePercentInput v-model="adminInviteRate" />
-            </el-form-item>
-            <p class="list-settings-hint block-hint">{{ t('cashback.admin_invite_default_hint') }}</p>
-            <el-form-item>
-              <el-button type="primary" :loading="platformDirectSaving" @click="savePlatformDirectSettings">{{ t('common.save') }}</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="list-settings-block">
-          <p class="list-settings-title">{{ t('user.betting_limits') }}</p>
-          <el-form inline size="small" class="settings-form limits-form">
-            <el-form-item :label="t('user.limit.min_stake')">
-              <el-input-number v-model="bettingLimits.minStake" :min="0" :step="1" controls-position="right" />
-            </el-form-item>
-            <el-form-item :label="t('user.limit.max_stake_single')">
-              <el-input-number v-model="bettingLimits.maxStakeSingle" :min="0" :step="100" controls-position="right" />
-            </el-form-item>
-            <el-form-item :label="t('user.limit.max_stake_parlay')">
-              <el-input-number v-model="bettingLimits.maxStakeParlay" :min="0" :step="100" controls-position="right" />
-            </el-form-item>
-            <el-form-item :label="t('user.limit.max_payout_single')">
-              <el-input-number v-model="bettingLimits.maxPayoutSingle" :min="0" :step="1000" controls-position="right" />
-            </el-form-item>
-            <el-form-item :label="t('user.limit.max_payout_parlay')">
-              <el-input-number v-model="bettingLimits.maxPayoutParlay" :min="0" :step="1000" controls-position="right" />
-            </el-form-item>
-            <el-form-item :label="t('user.limit.daily_stake')">
-              <el-input-number v-model="bettingLimits.dailyStakeLimit" :min="0" :step="1000" controls-position="right" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="primary" :loading="limitsSaving" @click="saveBettingLimits">{{ t('common.save') }}</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-        <div class="list-settings-block list-settings-block--danger">
-          <p class="list-settings-title">{{ t('user.reset_database') }}</p>
-          <p class="list-settings-hint">{{ t('user.reset_database_hint') }}</p>
-          <el-alert v-if="!resetAllowed" type="warning" :closable="false" show-icon class="reset-db-alert" :title="t('user.reset_database_disabled_prod')" />
-          <el-form inline size="small" class="settings-form reset-db-form">
-            <el-form-item :label="t('user.reset_database_confirm_label')">
-              <el-input v-model="resetConfirmPhrase" :placeholder="t('user.reset_database_confirm_ph')" style="width: 160px" :disabled="!resetAllowed" autocomplete="off" />
-            </el-form-item>
-            <el-form-item>
-              <el-button type="danger" plain :loading="resetLoading" :disabled="!resetAllowed || resetConfirmPhrase !== 'RESET'" @click="resetDatabase">{{ t('user.reset_database_btn') }}</el-button>
-            </el-form-item>
-          </el-form>
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-
+  <div class="agent-mgr-shell">
+    <router-view v-if="isAgentChildRoute" />
+    <div v-else class="admin-list-page agent-mgr-page">
    <InviteManageDialog v-model="inviteDialogOpen" />

    <div class="mgr-tabs-shell">
-      <el-button v-if="canManageSettings" type="primary" class="invite-prominent-btn" @click="inviteDialogOpen = true">
-        {{ t('invite.menu_btn') }}
-      </el-button>
-      <el-tabs v-model="activeViewTab" class="mgr-top-tabs" :class="{ 'mgr-top-tabs--with-invite': canManageSettings }">
+      <div v-if="canManageSettings" class="mgr-toolbar-actions">
+        <el-button class="settings-toolbar-btn" @click="openGlobalSettings">
+          {{ t('user.page_settings') }}
+        </el-button>
+        <el-button type="primary" class="invite-prominent-btn" @click="inviteDialogOpen = true">
+          {{ t('invite.menu_btn') }}
+        </el-button>
+      </div>
+      <el-tabs v-model="activeViewTab" class="mgr-top-tabs" :class="{ 'mgr-top-tabs--with-actions': canManageSettings }">
      <!-- ─── Tab: 全部玩家（默认） ─── -->
      <el-tab-pane v-if="canViewUsers" :label="`${t('user.type.player')} (${playerTotal})`" name="players">
        <section class="list-panel player-list-panel">
@@ -1685,81 +1403,20 @@ function creditTypeLabel(type: string) {
          <el-button type="primary" @click="openCreateTier1Agent">{{ t('agent.create_btn') }}</el-button>
        </div>
      </div>
+      <p class="list-hint">{{ t('agent.open_agent_hint') }}</p>
      <AdminTableWrap>
        <el-table
          :data="tier1Agents"
          stripe
          row-key="userId"
-          :expand-row-keys="expandedRowKeys"
-          :row-class-name="expandableTableRowClassName"
-          class="expandable-table compact-agent-table"
-          @expand-change="onExpandChange"
-          @row-click="onTier1AgentRowClick"
+          :row-class-name="agentRowClassName"
+          class="compact-agent-table"
+          @row-click="openAgentDirectPlayers"
        >
          <template #empty>
            <AdminTableEmpty />
          </template>

-          <!-- Built-in expand column -->
-          <el-table-column type="expand">
-            <template #default="{ row }">
-              <div class="expand-panel">
-                <div v-if="expandLoading[row.userId]" class="expand-loading">
-                  {{ t('common.loading') || '加载中...' }}
-                </div>
-                <div v-else class="expand-panel-body">
-                  <div class="expand-section-header">
-                    <div class="expand-section-title">{{ directPlayersTabLabel(row.username, getPlayers(row.userId).length) }}</div>
-                    <el-button type="primary" size="small" @click="openCreatePlayer(row.userId)">{{ t('user.create_btn') }}</el-button>
-                  </div>
-                  <el-table :data="getPlayers(row.userId)" stripe class="inner-table">
-                        <template #empty><AdminTableEmpty /></template>
-                        <el-table-column type="index" :label="t('common.seq')" width="55" align="center" />
-                        <el-table-column prop="username" :label="t('user.col.username')" min-width="100" />
-                        <el-table-column :label="t('common.status')" min-width="120">
-                          <template #default="{ row: player }">
-                            <AdminPlayerStatusCell :status="player.status" :is-online="player.isOnline" />
-                          </template>
-                        </el-table-column>
-                        <el-table-column :label="t('user.col.invite_code')" min-width="96" show-overflow-tooltip>
-                          <template #default="{ row: player }">
-                            <code v-if="player.inviteCode" class="invite-code-cell">{{ player.inviteCode }}</code>
-                            <span v-else>—</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column :label="t('user.col.balance')" min-width="120" align="right">
-                          <template #default="{ row: player }">
-                            <el-tooltip :content="`${formatAmountFull(player.availableBalance)} / ${formatAmountFull(player.frozenBalance)}`" placement="top">
-                              <span class="amount-compact">{{ formatAmount(player.availableBalance) }} / {{ formatAmount(player.frozenBalance) }}</span>
-                            </el-tooltip>
-                          </template>
-                        </el-table-column>
-                        <el-table-column prop="betCount" :label="t('user.col.bets')" width="56" align="center" />
-                        <el-table-column :label="t('user.col.stake_payout')" min-width="100" align="right">
-                          <template #default="{ row: player }">
-                            <span class="amount-compact">{{ formatAmount(player.totalStake) }} / {{ formatAmount(player.totalReturn) }}</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column :label="t('common.actions')" min-width="320" align="center">
-                          <template #default="{ row: player }">
-                            <AdminPlayerRowActions
-                              v-bind="playerActionFlags"
-                              :row="player"
-                              @detail="openDetailPlayer(player.id)"
-                              @ledger="openPlayerWalletLedger(player.id, player.username)"
-                              @edit="openEditPlayer(player.id)"
-                              @deposit="openTransfer('deposit', player)"
-                              @withdraw="openTransfer('withdraw', player)"
-                              @freeze="toggleFreezePlayer(player)"
-                              @delete="deletePlayer(player)"
-                            />
-                          </template>
-                        </el-table-column>
-                      </el-table>
-                </div>
-              </div>
-            </template>
-          </el-table-column>
          <el-table-column type="index" :index="(i: number) => (tier1Page - 1) * tier1PageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
          <el-table-column prop="username" :label="t('user.col.username')" min-width="100" show-overflow-tooltip />
          <el-table-column :label="t('common.status')" min-width="72">
@@ -1854,69 +1511,19 @@ function creditTypeLabel(type: string) {
              </el-button>
            </div>
          </div>
+          <p class="list-hint">{{ t('agent.open_agent_hint') }}</p>
          <AdminTableWrap>
            <el-table
              :data="ensureSubAgentState(agentLevel).agents"
              stripe
              row-key="userId"
-              :expand-row-keys="expandedRowKeys"
-              :row-class-name="expandableTableRowClassName"
-              class="expandable-table compact-agent-table"
-              @expand-change="onExpandChange"
-              @row-click="onSubAgentRowClick"
+              :row-class-name="agentRowClassName"
+              class="compact-agent-table"
+              @row-click="openAgentDirectPlayers"
            >
              <template #empty>
                <AdminTableEmpty />
              </template>
-              <el-table-column type="expand">
-                <template #default="{ row }">
-                  <div class="expand-panel">
-                    <div v-if="expandLoading[row.userId]" class="expand-loading">{{ t('common.loading') }}</div>
-                    <div v-else class="expand-panel-body">
-                      <div class="expand-section-header">
-                        <div class="expand-section-title">{{ directPlayersTabLabel(row.username, getPlayers(row.userId).length) }}</div>
-                        <el-button type="primary" size="small" @click="openCreatePlayer(row.userId)">{{ t('user.create_btn') }}</el-button>
-                      </div>
-                      <el-table :data="getPlayers(row.userId)" stripe class="inner-table">
-                        <template #empty><AdminTableEmpty /></template>
-                        <el-table-column type="index" :label="t('common.seq')" width="55" align="center" />
-                        <el-table-column prop="username" :label="t('user.col.username')" min-width="100" />
-                        <el-table-column :label="t('common.status')" min-width="120">
-                          <template #default="{ row: player }">
-                            <AdminPlayerStatusCell :status="player.status" :is-online="player.isOnline" />
-                          </template>
-                        </el-table-column>
-                        <el-table-column :label="t('user.col.invite_code')" min-width="96" show-overflow-tooltip>
-                          <template #default="{ row: player }">
-                            <code v-if="player.inviteCode" class="invite-code-cell">{{ player.inviteCode }}</code>
-                            <span v-else>—</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column :label="t('user.col.balance')" min-width="120" align="right">
-                          <template #default="{ row: player }">
-                            <span class="amount-compact">{{ formatAmount(player.availableBalance) }} / {{ formatAmount(player.frozenBalance) }}</span>
-                          </template>
-                        </el-table-column>
-                        <el-table-column :label="t('common.actions')" min-width="280" align="center">
-                          <template #default="{ row: player }">
-                            <AdminPlayerRowActions
-                              v-bind="playerActionFlags"
-                              :row="player"
-                              @detail="openDetailPlayer(player.id)"
-                              @ledger="openPlayerWalletLedger(player.id, player.username)"
-                              @edit="openEditPlayer(player.id)"
-                              @deposit="openTransfer('deposit', player)"
-                              @withdraw="openTransfer('withdraw', player)"
-                              @freeze="toggleFreezePlayer(player)"
-                              @delete="deletePlayer(player)"
-                            />
-                          </template>
-                        </el-table-column>
-                      </el-table>
-                    </div>
-                  </div>
-                </template>
-              </el-table-column>
              <el-table-column type="index" :index="(i: number) => (ensureSubAgentState(agentLevel).page - 1) * ensureSubAgentState(agentLevel).pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
              <el-table-column prop="username" :label="t('user.col.username')" min-width="100" show-overflow-tooltip />
              <el-table-column :label="t('agent.col.parent_chain')" min-width="120" show-overflow-tooltip>
@@ -1968,6 +1575,7 @@ function creditTypeLabel(type: string) {
      </template>
    </el-tabs>
    </div>
+    </div>

    <!-- ═══════════ DIALOGS ═══════════ -->

@@ -2534,6 +2142,23 @@ function creditTypeLabel(type: string) {
 </template>

 <style scoped>
+.agent-mgr-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.agent-mgr-shell > :deep(.agent-direct-players-page),
+.agent-mgr-shell > :deep(.global-settings-page) {
+  flex: 1;
+  min-height: 0;
+}
+
+.compact-agent-table :deep(.row-navigable) {
+  cursor: pointer;
+}
+
 .mgr-tabs-shell {
  position: relative;
  flex: 1;
@@ -2542,15 +2167,31 @@ function creditTypeLabel(type: string) {
  flex-direction: column;
 }

-.mgr-top-tabs--with-invite :deep(.el-tabs__header) {
-  padding-right: 108px;
+.mgr-top-tabs--with-actions :deep(.el-tabs__header) {
+  padding-right: 248px;
 }

-.invite-prominent-btn {
+.mgr-toolbar-actions {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.settings-toolbar-btn {
+  min-width: 96px;
+  height: 38px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 8px;
+}
+
+.invite-prominent-btn {
+  position: static;
  min-width: 96px;
  height: 38px;
  padding: 0 22px;
@@ -2756,11 +2397,11 @@ function creditTypeLabel(type: string) {
 }

@media (max-width: 900px) {
-  .mgr-top-tabs--with-invite :deep(.el-tabs__header) {
+  .mgr-top-tabs--with-actions :deep(.el-tabs__header) {
    padding-right: 0;
  }

-  .invite-prominent-btn {
+  .mgr-toolbar-actions {
    position: static;
    align-self: flex-end;
    margin: 0 0 8px;
--- a/apps/admin/src/views/DepositOrders.vue
+++ b/apps/admin/src/views/DepositOrders.vue
@@ -311,8 +311,11 @@ onActivated(() => {
          <td><span :class="['badge', row.methodType === 'BANK' ? 'badge-blue' : 'badge-green']">{{ row.methodType }}</span></td>
          <td class="amount">{{ formatAmount(row.amount) }}</td>
          <td>
+            <span v-if="row.screenshotUrl === '/uploads/defaults/expired.png'" class="expired-screenshot-tag">
+              {{ t('media.cleanup_expired_tag') || '已清理' }}
+            </span>
            <img
-              v-if="row.screenshotUrl"
+              v-else-if="row.screenshotUrl"
              :src="row.screenshotUrl"
              class="screenshot-thumb"
              @click="openScreenshot(row.screenshotUrl)"
@@ -369,7 +372,10 @@ onActivated(() => {
          </div>
          <div class="info-row">
            <span>{{ t('deposit.screenshot') }}:</span>
-            <img :src="approveTarget.screenshotUrl" class="approve-screenshot" @click="openScreenshot(approveTarget.screenshotUrl)" />
+            <div v-if="approveTarget.screenshotUrl === '/uploads/defaults/expired.png'" class="expired-screenshot-box">
+              <span class="expired-text">{{ t('media.cleanup_expired_tag') || '已清理' }}</span>
+            </div>
+            <img v-else :src="approveTarget.screenshotUrl" class="approve-screenshot" @click="openScreenshot(approveTarget.screenshotUrl)" />
          </div>
          <div class="form-group">
            <label>{{ t('deposit.approved_amount_label') }}</label>
@@ -763,6 +769,37 @@ onActivated(() => {
  color: #ffffff;
 }

+.expired-screenshot-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 10px;
+  font-size: 11px;
+  color: var(--text-muted);
+  background: var(--accent-hover);
+  border: 1px dashed var(--border);
+  border-radius: 6px;
+  user-select: none;
+  font-weight: 700;
+}
+
+.expired-screenshot-box {
+  width: 120px;
+  height: 120px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--accent-hover);
+  border: 1px dashed var(--border);
+  border-radius: 6px;
+  margin-top: 4px;
+}
+.expired-screenshot-box .expired-text {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 700;
+}
+
@media (max-width: 700px) {
  .toolbar,
  .filters {
--- a/apps/admin/src/views/Matches.vue
+++ b/apps/admin/src/views/Matches.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
-import { ref, computed, onBeforeUnmount } from 'vue';
+import { ref, computed, watch, onBeforeUnmount, onDeactivated } from 'vue';

 defineOptions({ name: 'AdminMatches' });
 import { useStaleListLifecycle } from '../composables/useStaleList';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import { resolveFormError } from '../i18n/form-validation';
 import api from '../api';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import LeagueMatchesPanel from './matches/LeagueMatchesPanel.vue';
 import MatchesSubNav from '../components/MatchesSubNav.vue';
+import LeagueRowActions from '../components/LeagueRowActions.vue';
 import CountryFlagSelect from '../components/outright/CountryFlagSelect.vue';
 import LogoUrlField from '../components/LogoUrlField.vue';
 import LeagueArchiveDialog from '../components/LeagueArchiveDialog.vue';
@@ -17,7 +17,6 @@ import { getBuiltinCountry } from '../data/builtinCountries';
 import {
  readMatchesListUiState,
  writeMatchesListUiState,
-  MAX_EXPANDED_LEAGUES,
 } from '../utils/matchesListState';
 import { formatAmount } from '../utils/format-amount';
 import {
@@ -28,15 +27,44 @@ import {
  type MatchCreateForm,
 } from './match-form';

-const { t } = useAdminLocale();
+const { t, localeTag } = useAdminLocale();
 const route = useRoute();
-const leagues = ref<unknown[]>([]);
+const router = useRouter();
+
+const isMatchChildRoute = computed(() =>
+  /^\/matches\/leagues\/[^/]+/.test(route.path),
+);
+
+interface LeagueTableRow extends Record<string, unknown> {
+  id: string;
+  isPublished: boolean;
+  isPublishing: boolean;
+  labels: {
+    edit: string;
+    createFixture: string;
+    publish: string;
+    unpublish: string;
+    delete: string;
+  };
+  displaySeq: number;
+  displayNameZh: string;
+  displayNameEn: string;
+  displayStatusLabel: string;
+  displayStatusTagType: 'success' | 'info';
+  displayMatchCount: number;
+  displayBetCount: number;
+  displayBetCountActive: boolean;
+  displayTotalStake: string;
+  displayPendingBets: number;
+  displayCode: string;
+}
+
+const leagues = ref<LeagueTableRow[]>([]);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(10);
 const filterStatus = ref('');
 const keyword = ref('');
-const expandedRowKeys = ref<string[]>([]);

 const createLeagueVisible = ref(false);
 const createLeagueLoading = ref(false);
@@ -61,9 +89,70 @@ const createUnderLeagueLabel = ref('');

 const isFixtureCreate = computed(() => !!form.value.leagueId.trim());

+function rowOf(row: unknown) {
+  return row as Record<string, unknown>;
+}
+
+function leagueId(row: unknown) {
+  return String(rowOf(row).id ?? '');
+}
+
+function leagueTitle(row: unknown) {
+  const r = rowOf(row);
+  const zh = String(r.leagueZh ?? '').trim();
+  const en = String(r.leagueEn ?? '').trim();
+  return zh || en || String(r.code ?? '—');
+}
+
+function leagueActionLabels() {
+  return {
+    edit: t('common.edit'),
+    createFixture: t('match.create_fixture_btn'),
+    publish: t('common.publish'),
+    unpublish: t('league.btn.unpublish'),
+    delete: t('common.delete'),
+  };
+}
+
+function mapLeagueRows(items: unknown[], publishingId = ''): LeagueTableRow[] {
+  const labels = leagueActionLabels();
+  const start = (page.value - 1) * pageSize.value;
+  return items.map((item, index) => {
+    const r = rowOf(item);
+    const id = String(r.id ?? '');
+    const published = Boolean(r.isPublished);
+    const stats = r.betStats as
+      | { betCount?: number; totalStake?: string; pendingCount?: number }
+      | undefined;
+    const betCount = Number(stats?.betCount ?? 0);
+    return {
+      ...r,
+      id,
+      isPublished: published,
+      isPublishing: publishingId === id,
+      labels,
+      displaySeq: start + index + 1,
+      displayNameZh: String(r.leagueZh ?? '').trim() || '—',
+      displayNameEn: String(r.leagueEn ?? '').trim() || '—',
+      displayStatusLabel: published ? t('league.status.PUBLISHED') : t('league.status.UNPUBLISHED'),
+      displayStatusTagType: published ? 'success' : 'info',
+      displayMatchCount: Number(r.matchCount ?? 0),
+      displayBetCount: betCount,
+      displayBetCountActive: betCount > 0,
+      displayTotalStake: formatAmount(String(stats?.totalStake ?? '0')),
+      displayPendingBets: Number(stats?.pendingCount ?? 0),
+      displayCode: String(r.code ?? ''),
+    };
+  });
+}
+
+function remapLeagueRows(publishingId = publishingLeagueId.value) {
+  if (!leagues.value.length) return;
+  leagues.value = mapLeagueRows(leagues.value, publishingId);
+}
+
 function persistListUiState() {
  writeMatchesListUiState({
-    expandedLeagueIds: [...expandedRowKeys.value],
    page: page.value,
    pageSize: pageSize.value,
    filterStatus: filterStatus.value,
@@ -71,15 +160,10 @@ function persistListUiState() {
  });
 }

-function applyExpandedFromSaved(savedIds: string[]) {
-  const allowed = new Set(leagues.value.map((row) => leagueId(row)));
-  expandedRowKeys.value = savedIds.filter((id) => allowed.has(id));
-}
-
-type LoadOptions = { restoreExpand?: boolean; keepExpand?: boolean };
+type LoadOptions = { restore?: boolean };

 async function load(options: LoadOptions = {}) {
-  const saved = options.restoreExpand ? readMatchesListUiState() : null;
+  const saved = options.restore ? readMatchesListUiState() : null;
  if (saved) {
    page.value = saved.page;
    pageSize.value = saved.pageSize;
@@ -95,26 +179,18 @@ async function load(options: LoadOptions = {}) {
      keyword: keyword.value.trim() || undefined,
    },
  });
-  leagues.value = data.data.items;
+  leagues.value = mapLeagueRows(data.data.items);
  total.value = data.data.total;
-
-  if (options.restoreExpand && saved) {
-    applyExpandedFromSaved(saved.expandedLeagueIds);
-  } else if (!options.keepExpand) {
-    expandedRowKeys.value = [];
-  } else {
-    applyExpandedFromSaved(expandedRowKeys.value);
-  }
  persistListUiState();
 }

 function onSearch() {
  page.value = 1;
-  expandedRowKeys.value = [];
  void runLoad(true);
 }

 async function initialLoad() {
+  if (isMatchChildRoute.value) return;
  const qStatus = route.query.status;
  if (typeof qStatus === 'string' && qStatus.trim()) {
    filterStatus.value = qStatus.trim();
@@ -122,21 +198,29 @@ async function initialLoad() {
    await load();
    return;
  }
-  await load({ restoreExpand: true });
+  const qLeague = route.query.leagueId;
+  if (typeof qLeague === 'string' && qLeague.trim()) {
+    router.replace(`/matches/leagues/${qLeague.trim()}`);
+    return;
+  }
+  await load({ restore: true });
 }

 const { loading: listLoading, runLoad } = useStaleListLifecycle(() => leagues.value.length > 0, initialLoad);
 onBeforeUnmount(persistListUiState);
+onDeactivated(persistListUiState);
+
+watch(localeTag, () => remapLeagueRows());

 function onPageChange(p: number) {
  page.value = p;
-  load({ keepExpand: true });
+  load();
 }

 function onSizeChange(size: number) {
  pageSize.value = size;
  page.value = 1;
-  load({ keepExpand: true });
+  load();
 }

 function openCreateLeague() {
@@ -178,6 +262,7 @@ async function toggleLeaguePublish(row: unknown) {
    }
  }
  publishingLeagueId.value = id;
+  remapLeagueRows(id);
  try {
    await api.put(`/admin/leagues/${id}`, {
      leagueEn: String(r.leagueEn ?? ''),
@@ -187,7 +272,7 @@ async function toggleLeaguePublish(row: unknown) {
      isActive: !published,
    });
    ElMessage.success(published ? t('msg.league_unpublished') : t('msg.league_published'));
-    await load({ keepExpand: true });
+    await load();
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
@@ -230,7 +315,7 @@ async function submitLeagueForm() {
    }

    createLeagueVisible.value = false;
-    load({ keepExpand: true });
+    load();
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
@@ -274,10 +359,16 @@ async function submitCreate() {
    createUnderLeagueLabel.value = '';
    createVisible.value = false;
    const lid = form.value.leagueId.trim();
-    await load({ keepExpand: true });
-    if (lid && !expandedRowKeys.value.includes(lid)) {
-      expandedRowKeys.value = capExpandedLeagueIds([...expandedRowKeys.value, lid]);
-      persistListUiState();
+    await load();
+    if (lid) {
+      router.push({
+        path: `/matches/leagues/${lid}`,
+        query: {
+          ...(filterStatus.value ? { status: filterStatus.value } : {}),
+          ...(keyword.value.trim() ? { keyword: keyword.value.trim() } : {}),
+          title: createUnderLeagueLabel.value || leagueTitle({ id: lid }),
+        },
+      });
    }
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
@@ -287,88 +378,32 @@ async function submitCreate() {
  }
 }

-function capExpandedLeagueIds(ids: string[]): string[] {
-  return ids.slice(0, MAX_EXPANDED_LEAGUES);
-}
-
-function onExpandChange(_row: unknown, expanded: unknown[]) {
-  expandedRowKeys.value = capExpandedLeagueIds(expanded.map((r) => leagueId(r)));
-  persistListUiState();
-}
-
-function onRowClick(row: unknown, _column: unknown, event: MouseEvent) {
-  if ((event.target as HTMLElement).closest('.el-table__expand-icon')) return;
+function openLeaguePage(row: unknown, _column: unknown, event: Event) {
+  const target = event.target;
+  const el = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  if (!el) return;
+  if (el.closest('.league-row-actions') || el.closest('.el-button')) return;
  const id = leagueId(row);
-  if (expandedRowKeys.value.includes(id)) {
-    expandedRowKeys.value = expandedRowKeys.value.filter((k) => k !== id);
-  } else {
-    const next = [...expandedRowKeys.value, id];
-    expandedRowKeys.value = capExpandedLeagueIds(next);
-  }
-  persistListUiState();
+  if (!id) return;
+  void router.push({
+    name: 'admin-league-matches',
+    params: { leagueId: id },
+    query: {
+      ...(filterStatus.value ? { status: filterStatus.value } : {}),
+      ...(keyword.value.trim() ? { keyword: keyword.value.trim() } : {}),
+      title: leagueTitle(row),
+    },
+  });
 }

 function rowClassName() {
-  return 'row-expandable';
-}
-
-function rowOf(row: unknown) {
-  return row as Record<string, unknown>;
-}
-function leagueId(row: unknown) {
-  return String(rowOf(row).id ?? '');
-}
-function leagueTitle(row: unknown) {
-  const r = rowOf(row);
-  const zh = String(r.leagueZh ?? '').trim();
-  const en = String(r.leagueEn ?? '').trim();
-  return zh || en || String(r.code ?? '—');
-}
-function leagueNameZh(row: unknown) {
-  const zh = String(rowOf(row).leagueZh ?? '').trim();
-  return zh || '—';
-}
-function leagueNameEn(row: unknown) {
-  const en = String(rowOf(row).leagueEn ?? '').trim();
-  return en || '—';
-}
-function leagueMatchCount(row: unknown) {
-  return Number(rowOf(row).matchCount ?? 0);
+  return 'row-navigable';
 }

 function leagueIsPublished(row: unknown) {
  return Boolean(rowOf(row).isPublished);
 }

-function leagueStatusLabel(row: unknown) {
-  return leagueIsPublished(row) ? t('league.status.PUBLISHED') : t('league.status.UNPUBLISHED');
-}
-
-function leagueStatusTagType(row: unknown): 'success' | 'info' {
-  return leagueIsPublished(row) ? 'success' : 'info';
-}
-
-function leagueBetStats(row: unknown) {
-  return rowOf(row).betStats as
-    | { betCount?: number; totalStake?: string; pendingCount?: number }
-    | undefined;
-}
-
-function leagueBetCount(row: unknown) {
-  return Number(leagueBetStats(row)?.betCount ?? 0);
-}
-
-function leagueTotalStake(row: unknown) {
-  return formatAmount(String(leagueBetStats(row)?.totalStake ?? '0'));
-}
-
-function leaguePendingBets(row: unknown) {
-  return Number(leagueBetStats(row)?.pendingCount ?? 0);
-}
-function isLeagueExpanded(id: string) {
-  return expandedRowKeys.value.includes(id);
-}
-
 function openLeagueArchive(row: unknown) {
  leagueArchiveId.value = leagueId(row);
  leagueArchiveName.value = leagueTitle(row);
@@ -382,7 +417,9 @@ function onLeagueArchived() {
 </script>

 <template>
-  <div class="admin-list-page matches-page">
+  <div class="matches-shell">
+    <router-view v-if="isMatchChildRoute" />
+    <div v-else class="admin-list-page matches-page">
  <div class="list-chrome">
    <div class="list-chrome__row">
      <div class="list-chrome__left">
@@ -423,115 +460,66 @@ function onLeagueArchived() {
  </div>

  <section v-loading="listLoading" class="list-panel">
-    <p class="list-hint">{{ t('match.expand_league_hint') }}</p>
+    <p class="list-hint">{{ t('match.open_league_hint') }}</p>
    <div class="table-wrap">
    <el-table
      :data="leagues"
      stripe
      row-key="id"
-      :expand-row-keys="expandedRowKeys"
      :row-class-name="rowClassName"
-      @expand-change="onExpandChange"
-      @row-click="onRowClick"
+      @row-click="openLeaguePage"
    >
-      <el-table-column type="expand" width="40">
+      <el-table-column prop="displaySeq" :label="t('common.seq')" width="70" align="center" />
+      <el-table-column width="40" align="center" class-name="league-logo-cell">
        <template #default="{ row }">
-          <template v-if="isLeagueExpanded(leagueId(row))">
-            <LeagueMatchesPanel
-              :league-id="leagueId(row)"
-              :filter-status="filterStatus"
-              :keyword="keyword"
-              @changed="() => load({ keepExpand: true })"
-            />
-          </template>
-        </template>
-      </el-table-column>
-      <el-table-column type="index" :index="(i: number) => (page - 1) * pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
-      <el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
-        <template #default="{ row }">
-          <div class="league-cell">
-            <img
-              v-if="rowOf(row).logoUrl"
-              :src="String(rowOf(row).logoUrl)"
-              alt=""
-              class="league-logo"
-            />
-            <span class="matchup-link">{{ leagueNameZh(row) }}</span>
-          </div>
-        </template>
-      </el-table-column>
-      <el-table-column :label="t('match.col.league_en')" width="180" show-overflow-tooltip>
-        <template #default="{ row }">
-          <span class="league-en">{{ leagueNameEn(row) }}</span>
+          <img
+            v-if="row.logoUrl"
+            :src="String(row.logoUrl)"
+            alt=""
+            class="league-logo"
+          />
        </template>
      </el-table-column>
+      <el-table-column
+        prop="displayNameZh"
+        :label="t('match.col.league')"
+        width="108"
+        show-overflow-tooltip
+        class-name="league-name-cell"
+      />
+      <el-table-column prop="displayNameEn" :label="t('match.col.league_en')" width="180" show-overflow-tooltip class-name="league-en-cell" />
      <el-table-column :label="t('common.status')" width="88" align="center">
        <template #default="{ row }">
-          <el-tag :type="leagueStatusTagType(row)" size="small" effect="plain">
-            {{ leagueStatusLabel(row) }}
+          <el-tag :type="row.displayStatusTagType" size="small" effect="plain">
+            {{ row.displayStatusLabel }}
          </el-tag>
        </template>
      </el-table-column>
-      <el-table-column :label="t('match.col.fixture_count')" width="88" align="center">
-        <template #default="{ row }">{{ leagueMatchCount(row) }}</template>
-      </el-table-column>
+      <el-table-column prop="displayMatchCount" :label="t('match.col.fixture_count')" width="88" align="center" />
      <el-table-column :label="t('match.col.bet_count')" width="72" align="center">
        <template #default="{ row }">
-          <span :class="{ 'bet-stat-active': leagueBetCount(row) > 0 }">{{ leagueBetCount(row) }}</span>
+          <span :class="{ 'bet-stat-active': row.displayBetCountActive }">{{ row.displayBetCount }}</span>
        </template>
      </el-table-column>
-      <el-table-column :label="t('match.col.total_stake')" width="108" align="right">
-        <template #default="{ row }">{{ leagueTotalStake(row) }}</template>
-      </el-table-column>
+      <el-table-column prop="displayTotalStake" :label="t('match.col.total_stake')" width="108" align="right" />
      <el-table-column :label="t('match.col.pending_bets')" width="80" align="center">
        <template #default="{ row }">
-          <el-tag v-if="leaguePendingBets(row) > 0" type="warning" size="small" effect="plain">
-            {{ leaguePendingBets(row) }}
+          <el-tag v-if="row.displayPendingBets > 0" type="warning" size="small" effect="plain">
+            {{ row.displayPendingBets }}
          </el-tag>
          <span v-else class="bet-stat-zero">0</span>
        </template>
      </el-table-column>
-      <el-table-column :label="t('match.col.league_code')" width="120" show-overflow-tooltip>
-        <template #default="{ row }">{{ rowOf(row).code }}</template>
-      </el-table-column>
-      <el-table-column width="280" align="center" fixed="right">
-        <template #header>
-          <div class="actions-col-header">
-            <span class="actions-col-header__label">{{ t('common.actions') }}</span>
-          </div>
-        </template>
+      <el-table-column prop="displayCode" :label="t('match.col.league_code')" width="120" show-overflow-tooltip />
+      <el-table-column :label="t('common.actions')" width="280" align="center" fixed="right">
        <template #default="{ row }">
-          <div class="league-row-actions">
-            <div class="league-action-group">
-              <el-button size="small" type="primary" @click.stop="openEditLeague(row)">
-                {{ t('common.edit') }}
-              </el-button>
-              <el-button size="small" type="primary" @click.stop="openCreateFixture(row)">
-                {{ t('match.create_fixture_btn') }}
-              </el-button>
-              <el-button
-                v-if="!leagueIsPublished(row)"
-                size="small"
-                type="success"
-                :loading="publishingLeagueId === leagueId(row)"
-                @click.stop="toggleLeaguePublish(row)"
-              >
-                {{ t('common.publish') }}
-              </el-button>
-              <el-button
-                v-else
-                size="small"
-                type="warning"
-                :loading="publishingLeagueId === leagueId(row)"
-                @click.stop="toggleLeaguePublish(row)"
-              >
-                {{ t('league.btn.unpublish') }}
-              </el-button>
-              <el-button size="small" type="danger" plain @click.stop="openLeagueArchive(row)">
-                {{ t('common.delete') }}
-              </el-button>
-            </div>
-          </div>
+          <LeagueRowActions
+            :row="row"
+            @edit="() => openEditLeague(row)"
+            @create-fixture="() => openCreateFixture(row)"
+            @toggle-publish="() => toggleLeaguePublish(row)"
+            @archive="() => openLeagueArchive(row)"
+          />
        </template>
      </el-table-column>
    </el-table>
@@ -675,9 +663,22 @@ function onLeagueArchived() {
    @archived="onLeagueArchived"
  />
  </div>
+  </div>
 </template>

 <style scoped>
+.matches-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.matches-shell > :deep(.league-matches-page) {
+  flex: 1;
+  min-height: 0;
+}
+
 .team-country-select {
  width: 100%;
 }
@@ -727,19 +728,10 @@ function onLeagueArchived() {
  width: 100% !important;
 }

-.matches-page :deep(.el-table__expanded-cell) {
-  padding: 0 !important;
-  background: #fbfaf7;
-}
-
-.list-panel :deep(.row-expandable) {
+.list-panel :deep(.row-navigable) {
  cursor: pointer;
 }

-.list-panel :deep(.row-no-expand .el-table__expand-icon) {
-  visibility: hidden;
-  pointer-events: none;
-}

 .matchup-link {
  color: var(--green-text);
@@ -752,12 +744,6 @@ function onLeagueArchived() {
  color: #aaa49a;
 }

-.league-cell {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .league-logo {
  width: 28px;
  height: 28px;
@@ -765,6 +751,15 @@ function onLeagueArchived() {
  flex-shrink: 0;
 }

+.matches-page .table-wrap :deep(.league-name-cell .cell) {
+  color: var(--primary-link);
+  font-weight: 600;
+}
+
+.matches-page .table-wrap :deep(.league-logo-cell .cell) {
+  padding: 0 4px;
+}
+
 .league-en {
  color: var(--text-muted);
  font-size: 13px;
@@ -775,35 +770,6 @@ function onLeagueArchived() {
  font-weight: 700;
 }

-.actions-col-header {
-  display: inline-flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  padding: 0 4px;
-  box-sizing: border-box;
-  white-space: nowrap;
-}
-
-.actions-col-header__label {
-  font-size: 12px;
-  font-weight: 700;
-  color: var(--text-muted);
-  line-height: 1;
-}
-
-.actions-col-header :deep(.el-button) {
-  margin: 0 !important;
-  padding: 6px 10px !important;
-  height: 28px !important;
-  min-height: 28px !important;
-  font-size: 12px !important;
-  font-weight: 600;
-  border-radius: 6px;
-  white-space: nowrap;
-}
-
 .matches-page .table-wrap :deep(.el-table__header .el-table__cell) {
  padding: 6px 0;
 }
@@ -812,41 +778,6 @@ function onLeagueArchived() {
  overflow: visible;
 }

-.league-row-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px 8px;
-  flex-wrap: wrap;
-}
-
-.league-action-group {
-  display: inline-flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  padding: 2px 4px;
-  border-radius: 8px;
-  background: #fbfaf7;
-  border: 1px solid var(--border-soft);
-}
-
-.league-row-actions :deep(.el-button) {
-  margin: 0 !important;
-  min-width: 52px;
-  padding: 4px 10px !important;
-  font-size: 12px !important;
-  border-radius: 6px;
-}
-
-.league-row-actions :deep(.el-button:not(.is-disabled):not(:disabled)) {
-  cursor: pointer;
-}
-
-.league-row-actions :deep(.el-button.is-disabled),
-.league-row-actions :deep(.el-button:disabled) {
-  cursor: not-allowed;
-}
-
 :deep(.logo-url-field) {
  width: 100%;
 }
@@ -887,14 +818,6 @@ function onLeagueArchived() {
    gap: 12px;
  }

-  .actions-col-header {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
-  .league-row-actions {
-    justify-content: flex-start;
-  }
 }

 </style>
--- a/apps/admin/src/views/MatchesOutrights.vue
+++ b/apps/admin/src/views/MatchesOutrights.vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
-import { ref, onBeforeUnmount } from 'vue';
+import { ref, computed, onBeforeUnmount, onDeactivated } from 'vue';

 defineOptions({ name: 'AdminMatchesOutrights' });
 import { useStaleListLifecycle } from '../composables/useStaleList';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
 import MatchesSubNav from '../components/MatchesSubNav.vue';
-import LeagueOutrightOddsPanel from './matches/LeagueOutrightOddsPanel.vue';
 import {
  readMatchesListUiState,
  writeMatchesListUiState,
@@ -15,17 +14,20 @@ import {

 const { t } = useAdminLocale();
 const route = useRoute();
+const router = useRouter();
+
+const isOutrightChildRoute = computed(() =>
+  /^\/matches\/outrights\/leagues\/[^/]+/.test(route.path),
+);

 const leagues = ref<unknown[]>([]);
 const total = ref(0);
 const page = ref(1);
 const pageSize = ref(10);
 const keyword = ref('');
-const expandedRowKeys = ref<string[]>([]);

 function persistListUiState() {
  writeMatchesListUiState({
-    expandedLeagueIds: [...expandedRowKeys.value],
    page: page.value,
    pageSize: pageSize.value,
    filterStatus: '',
@@ -33,15 +35,10 @@ function persistListUiState() {
  });
 }

-function applyExpandedFromSaved(savedIds: string[]) {
-  const allowed = new Set(leagues.value.map((row) => leagueId(row)));
-  expandedRowKeys.value = savedIds.filter((id) => allowed.has(id));
-}
-
-type LoadOptions = { restoreExpand?: boolean; keepExpand?: boolean };
+type LoadOptions = { restore?: boolean };

 async function load(options: LoadOptions = {}) {
-  const saved = options.restoreExpand ? readMatchesListUiState() : null;
+  const saved = options.restore ? readMatchesListUiState() : null;
  if (saved) {
    page.value = saved.page;
    pageSize.value = saved.pageSize;
@@ -57,29 +54,22 @@ async function load(options: LoadOptions = {}) {
  });
  leagues.value = data.data.items;
  total.value = data.data.total;
-
-  if (options.restoreExpand && saved) {
-    applyExpandedFromSaved(saved.expandedLeagueIds);
-  } else if (!options.keepExpand) {
-    expandedRowKeys.value = [];
-  } else {
-    applyExpandedFromSaved(expandedRowKeys.value);
-  }
  persistListUiState();
 }

 function onSearch() {
  page.value = 1;
-  expandedRowKeys.value = [];
  load();
 }

-async function resolveExpandFromQuery() {
+async function resolveLeagueFromQuery() {
  const qLeague = route.query.leagueId;
  if (typeof qLeague === 'string' && qLeague.trim()) {
-    expandedRowKeys.value = [qLeague.trim()];
-    persistListUiState();
-    return;
+    router.replace({
+      path: `/matches/outrights/leagues/${qLeague.trim()}`,
+      query: route.query.title ? { title: String(route.query.title) } : undefined,
+    });
+    return true;
  }
  const qMatch = route.query.matchId;
  if (typeof qMatch === 'string' && qMatch.trim()) {
@@ -87,48 +77,51 @@ async function resolveExpandFromQuery() {
      const { data } = await api.get(`/admin/outrights/${qMatch.trim()}`);
      const lid = data.data?.leagueId as string | undefined;
      if (lid) {
-        expandedRowKeys.value = [lid];
-        persistListUiState();
+        router.replace(`/matches/outrights/leagues/${lid}`);
+        return true;
      }
    } catch {
      /* ignore */
    }
  }
+  return false;
 }

 async function initialLoad() {
-  await load({ restoreExpand: true });
-  await resolveExpandFromQuery();
+  await load({ restore: true });
+  await resolveLeagueFromQuery();
 }

 const { loading: listLoading, runLoad } = useStaleListLifecycle(() => leagues.value.length > 0, initialLoad);
 onBeforeUnmount(persistListUiState);
+onDeactivated(persistListUiState);

 function onPageChange(p: number) {
  page.value = p;
-  load({ keepExpand: true });
+  load();
 }

 function onSizeChange(size: number) {
  pageSize.value = size;
  page.value = 1;
-  load({ keepExpand: true });
+  load();
 }

-function onExpandChange(_row: unknown, expanded: unknown[]) {
-  expandedRowKeys.value = expanded.map((r) => leagueId(r));
-  persistListUiState();
-}
-
-function onRowClick(row: unknown, _column: unknown, event: MouseEvent) {
-  if ((event.target as HTMLElement).closest('.el-table__expand-icon')) return;
+function openLeaguePage(row: unknown, _column: unknown, event: Event) {
+  const target = event.target;
+  const el = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
+  if (!el) return;
+  if (el.closest('.el-button')) return;
  const id = leagueId(row);
-  expandedRowKeys.value = expandedRowKeys.value.includes(id) ? [] : [id];
-  persistListUiState();
+  if (!id) return;
+  void router.push({
+    path: `/matches/outrights/leagues/${id}`,
+    query: { title: leagueTitle(row) },
+  });
 }

 function rowClassName() {
-  return 'row-expandable';
+  return 'row-navigable';
 }

 function rowOf(row: unknown) {
@@ -145,16 +138,20 @@ function leagueNameEn(row: unknown) {
  const en = String(rowOf(row).leagueEn ?? '').trim();
  return en || '—';
 }
+function leagueTitle(row: unknown) {
+  const zh = leagueNameZh(row);
+  if (zh !== '—') return zh;
+  return leagueNameEn(row);
+}
 function outrightTeamCount(row: unknown) {
  return Number(rowOf(row).outrightTeamCount ?? 0);
 }
-function isLeagueExpanded(id: string) {
-  return expandedRowKeys.value.includes(id);
-}
 </script>

 <template>
-  <div class="admin-list-page matches-page">
+  <div class="matches-shell">
+    <router-view v-if="isOutrightChildRoute" />
+    <div v-else class="admin-list-page matches-page">
    <div class="list-chrome">
      <div class="list-chrome__row">
        <div class="list-chrome__left">
@@ -178,27 +175,16 @@ function isLeagueExpanded(id: string) {
      </div>
    </div>

-  <section v-loading="listLoading" class="list-panel">
-      <p class="list-hint">{{ t('match.expand_outright_hint') }}</p>
+    <section v-loading="listLoading" class="list-panel">
+      <p class="list-hint">{{ t('match.open_outright_hint') }}</p>
      <div class="table-wrap">
        <el-table
          :data="leagues"
          stripe
          row-key="id"
-          :expand-row-keys="expandedRowKeys"
          :row-class-name="rowClassName"
-          @expand-change="onExpandChange"
-          @row-click="onRowClick"
+          @row-click="openLeaguePage"
        >
-          <el-table-column type="expand" width="40">
-            <template #default="{ row }">
-              <LeagueOutrightOddsPanel
-                v-if="isLeagueExpanded(leagueId(row))"
-                :league-id="leagueId(row)"
-                @updated="load({ keepExpand: true })"
-              />
-            </template>
-          </el-table-column>
          <el-table-column type="index" :index="(i: number) => (page - 1) * pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
          <el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
            <template #default="{ row }">
@@ -240,9 +226,22 @@ function isLeagueExpanded(id: string) {
      </div>
    </section>
  </div>
+  </div>
 </template>

 <style scoped>
+.matches-shell {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.matches-shell > :deep(.league-outrights-page) {
+  flex: 1;
+  min-height: 0;
+}
+
 .matches-page .table-wrap .el-table {
  height: auto !important;
 }
@@ -250,11 +249,7 @@ function isLeagueExpanded(id: string) {
 .matches-page .table-wrap :deep(.el-table__body) {
  width: 100% !important;
 }
-.matches-page :deep(.el-table__expanded-cell) {
-  padding: 0 !important;
-  background: #fbfaf7;
-}
-.list-panel :deep(.row-expandable) {
+.list-panel :deep(.row-navigable) {
  cursor: pointer;
 }
 .matchup-link {
--- a/apps/admin/src/views/MediaLibrary.vue
+++ b/apps/admin/src/views/MediaLibrary.vue
@@ -41,6 +41,74 @@ const fileInputRef = ref<HTMLInputElement | null>(null);

 const unusedCount = computed(() => files.value.filter((f) => !f.inUse).length);

+const storageStats = ref<{
+  categories: Array<{ category: string; count: number; sizeBytes: number }>;
+  total: { count: number; sizeBytes: number };
+} | null>(null);
+
+const cleanupConfig = ref({ enabled: false, keepDays: 180 });
+const manualCleanupBefore = ref('');
+
+function getCategoryLabel(cat: string) {
+  if (cat === 'deposits') return t('media.deposits_on_disk');
+  return categoryLabel(cat);
+}
+
+async function loadStorageStats() {
+  try {
+    const res = await api.get('/admin/files/storage-stats');
+    storageStats.value = res.data.data;
+  } catch (err) {
+    console.error('Failed to load storage stats:', err);
+  }
+}
+
+async function loadCleanupConfig() {
+  try {
+    const res = await api.get('/admin/deposits/screenshot-cleanup-config');
+    cleanupConfig.value = res.data.data;
+  } catch (err) {
+    console.error('Failed to load cleanup config:', err);
+  }
+}
+
+async function saveCleanupConfig() {
+  try {
+    const res = await api.put('/admin/deposits/screenshot-cleanup-config', {
+      enabled: cleanupConfig.value.enabled,
+      keepDays: cleanupConfig.value.keepDays,
+    });
+    cleanupConfig.value = res.data.data;
+    ElMessage.success(t('msg.saved'));
+  } catch (err: any) {
+    ElMessage.error(err?.response?.data?.message || t('msg.save_failed'));
+  }
+}
+
+async function runManualCleanup() {
+  if (!manualCleanupBefore.value) return;
+  const beforeDate = manualCleanupBefore.value;
+  await ElMessageBox.confirm(
+    `${t('media.delete_confirm')} (${beforeDate} ${t('common.to')})`,
+    { type: 'warning' }
+  );
+  try {
+    const res = await api.delete(`/admin/deposits/screenshots?before=${beforeDate}T00:00:00.000Z`);
+    const cleaned = res.data.data.cleaned;
+    const freedBytes = res.data.data.freedBytes;
+    
+    const msg = t('media.cleanup_result')
+      .replace('{cleaned}', String(cleaned))
+      .replace('{size}', formatSize(freedBytes));
+    
+    ElMessage.success(msg);
+    loadStorageStats();
+    loadFiles();
+  } catch (err: any) {
+    ElMessage.error(err?.response?.data?.message || t('msg.delete_failed'));
+  }
+}
+
 function categoryLabel(cat: string) {
  const key = `media.category.${cat}` as const;
  return t(key as any) || cat;
@@ -64,6 +132,7 @@ async function loadFiles(opts?: { silent?: boolean }) {
    const res = await api.get('/admin/files', { params });
    files.value = res.data.data.items;
    total.value = res.data.data.total;
+    void loadStorageStats();
  } catch {
    ElMessage.error(t('common.loading'));
  } finally {
@@ -80,9 +149,15 @@ watch(currentPage, () => {
  void loadFiles();
 });

-onMounted(() => void loadFiles());
+onMounted(() => {
+  void loadFiles();
+  void loadCleanupConfig();
+});
 onActivated(() => {
-  if (files.value.length > 0) void loadFiles({ silent: true });
+  if (files.value.length > 0) {
+    void loadFiles({ silent: true });
+    void loadCleanupConfig();
+  }
 });

 async function confirmDelete(file: MediaFile) {
@@ -197,6 +272,58 @@ async function doUpload() {
      </div>
    </div>

+    <!-- Storage Stats -->
+    <div class="stats-banner" v-if="storageStats">
+      <div v-for="item in storageStats.categories" :key="item.category" class="stat-card">
+        <span class="stat-label">{{ getCategoryLabel(item.category) }}</span>
+        <span class="stat-value">{{ item.count }} <span class="stat-unit">{{ t('common.times') }}</span></span>
+        <span class="stat-size">{{ formatSize(item.sizeBytes) }}</span>
+      </div>
+      <div class="stat-card total-card">
+        <span class="stat-label">{{ t('media.storage_stats') }}</span>
+        <span class="stat-value">{{ storageStats.total.count }} <span class="stat-unit">{{ t('common.times') }}</span></span>
+        <span class="stat-size">{{ formatSize(storageStats.total.sizeBytes) }}</span>
+      </div>
+    </div>
+
+    <!-- Cleanup Panel -->
+    <div class="cleanup-card">
+      <div class="cleanup-title">
+        <span>{{ t('media.screenshot_cleanup') }}</span>
+      </div>
+      <div class="cleanup-grid">
+        <!-- Auto Cleanup Config -->
+        <div class="cleanup-section">
+          <h4 class="section-subtitle">{{ t('media.cleanup_auto_enabled') }}</h4>
+          <div class="config-row">
+            <label class="switch-container">
+              <input type="checkbox" v-model="cleanupConfig.enabled" @change="saveCleanupConfig" />
+              <span class="switch-slider"></span>
+            </label>
+            <div class="days-input-group" v-if="cleanupConfig.enabled">
+              <span>{{ t('media.cleanup_keep_days') }}</span>
+              <input type="number" v-model.number="cleanupConfig.keepDays" min="1" class="num-input" />
+              <button class="btn btn-ghost btn-sm" @click="saveCleanupConfig">{{ t('common.save') }}</button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Manual Cleanup -->
+        <div class="cleanup-section manual-section">
+          <h4 class="section-subtitle">{{ t('media.cleanup_before_date') }}</h4>
+          <div class="config-row">
+            <input type="date" v-model="manualCleanupBefore" class="date-input" />
+            <button class="btn btn-primary" :disabled="!manualCleanupBefore" @click="runManualCleanup">
+              {{ t('media.cleanup_run_now') }}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div class="cleanup-tip">
+        * 仅清理【已同意】或【已拒绝】的充值订单截图，【待处理】的截图绝不会被删除。清理后文件会被替换为已过期占位图。
+      </div>
+    </div>
+
    <!-- File grid -->
    <div v-if="loading" class="state-center">{{ t('common.loading') }}</div>
    <div v-else-if="files.length === 0" class="state-center muted">{{ t('media.no_files') }}</div>
@@ -309,6 +436,185 @@ async function doUpload() {
  min-height: 0;
 }

+/* ── Storage Stats ── */
+.stats-banner {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 12px;
+  flex-shrink: 0;
+}
+.stat-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-shadow: var(--shadow);
+  transition: all 0.15s ease-in-out;
+}
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 16px rgba(56, 49, 37, 0.06);
+}
+.total-card {
+  border-color: var(--primary);
+  background: var(--accent-hover);
+}
+.stat-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-weight: 550;
+}
+.stat-value {
+  font-size: 20px;
+  font-weight: 800;
+  color: var(--text);
+}
+.stat-unit {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-muted);
+}
+.stat-size {
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+/* ── Cleanup Panel ── */
+.cleanup-card {
+  background: #ffffff;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 16px;
+  box-shadow: var(--shadow);
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  flex-shrink: 0;
+}
+.cleanup-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 800;
+  color: var(--text);
+  border-bottom: 1px solid var(--border-soft);
+  padding-bottom: 8px;
+}
+.cleanup-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 20px;
+}
+.cleanup-section {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.section-subtitle {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text);
+  font-weight: 700;
+}
+.config-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  flex-wrap: wrap;
+}
+.days-input-group {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.num-input {
+  width: 75px;
+  padding: 5px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.num-input:focus {
+  border-color: var(--primary);
+}
+.date-input {
+  padding: 5px 10px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: #ffffff;
+  color: var(--text);
+  font-family: inherit;
+  font-size: 13px;
+  outline: none;
+}
+.date-input:focus {
+  border-color: var(--primary);
+}
+.btn-sm {
+  padding: 4px 10px;
+  font-size: 12px;
+}
+.cleanup-tip {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
+  padding: 8px 12px;
+  background: var(--accent-hover);
+  border-radius: 6px;
+  border-left: 3px solid var(--primary);
+}
+
+/* ── Custom Toggle Switch ── */
+.switch-container {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 22px;
+}
+.switch-container input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.switch-slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #d5cfc3;
+  transition: .2s;
+  border-radius: 22px;
+}
+.switch-slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .2s;
+  border-radius: 50%;
+}
+input:checked + .switch-slider {
+  background-color: var(--primary);
+}
+input:checked + .switch-slider:before {
+  transform: translateX(22px);
+}
+
 /* ── Toolbar ── */
 .toolbar {
  display: flex;
--- a/apps/admin/src/views/Settlement.vue
+++ b/apps/admin/src/views/Settlement.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, defineAsyncComponent } from 'vue';
+import { ref, computed, onMounted, defineAsyncComponent, watch, nextTick } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { formatApiErrorMessage, isApiErrorCode } from '@thebet365/shared';
 import api from '../api';
@@ -75,6 +75,12 @@ const { hasPermission } = usePermissions();
 const canResettle = computed(() => hasPermission(AdminPerm.resettle));
 const route = useRoute();
 const router = useRouter();
+
+function settlementReturnTo(isOutright = false) {
+  const q = route.query.returnTo;
+  if (typeof q === 'string' && q.startsWith('/')) return q;
+  return isOutright ? '/matches/outrights' : '/matches';
+}
 const STAT_FACT_LABELS = {
  homeCorners: {
    'zh-CN': '主队角球',
@@ -115,14 +121,14 @@ const matchStats = ref<{

 function emptyMatchStats() {
  return {
-    homeCorners: null,
-    awayCorners: null,
-    homeYellowCards: null,
-    awayYellowCards: null,
-    homeRedCards: null,
-    awayRedCards: null,
-    homeCards: null,
-    awayCards: null,
+    homeCorners: 0,
+    awayCorners: 0,
+    homeYellowCards: 0,
+    awayYellowCards: 0,
+    homeRedCards: 0,
+    awayRedCards: 0,
+    homeCards: 0,
+    awayCards: 0,
  };
 }

@@ -155,8 +161,29 @@ const winnerTeamId = ref('');
 const outrightSelections = ref<
  Array<{ teamId: string; teamCode: string; teamZh: string; teamEn: string }>
 >([]);
+interface ResettlePreviewItem {
+  betId: string;
+  betNo: string;
+  oldPayout: string;
+  newPayout: string;
+  delta: string;
+  oldStatus: string;
+  newStatus: string;
+}
+
+interface ResettlePreview {
+  batch: {
+    id: string;
+    batchNo: string;
+  };
+  affectedCount: number;
+  totalTopup: string;
+  totalClawback: string;
+  items: ResettlePreviewItem[];
+}
+
 const preview = ref<Record<string, unknown> | null>(null);
-const resettlePreview = ref<Record<string, unknown> | null>(null);
+const resettlePreview = ref<ResettlePreview | null>(null);
 const resettleReason = ref('');
 const statsSummary = ref<Pick<SettlementBetStats, 'summary' | 'bySelection'> | null>(null);
 const betsList = ref<SettlementBetStats['bets'] | null>(null);
@@ -171,12 +198,71 @@ const betPage = ref(1);
 const betPageSize = ref(10);
 const previewPage = ref(1);
 const previewPageSize = ref(10);
+const previewDialogVisible = ref(false);
+const resettleDialogVisible = ref(false);
+const confirmLoading = ref(false);
+const resettleConfirmLoading = ref(false);
+
+const resettlePage = ref(1);
+const resettlePageSize = ref(10);
+
+const resettleItemsPage = computed(() => {
+  if (!resettlePreview.value?.items) return [];
+  const start = (resettlePage.value - 1) * resettlePageSize.value;
+  const end = start + resettlePageSize.value;
+  return resettlePreview.value.items.slice(start, end);
+});
+
+const isProgrammaticChange = ref(false);
+
+interface SettlementHistoryRecord {
+  id: string;
+  batchNo: string;
+  htHomeScore: number | null;
+  htAwayScore: number | null;
+  ftHomeScore: number | null;
+  ftAwayScore: number | null;
+  homeCorners: number | null;
+  awayCorners: number | null;
+  homeYellowCards: number | null;
+  awayYellowCards: number | null;
+  homeRedCards: number | null;
+  awayRedCards: number | null;
+  homeCards: number | null;
+  awayCards: number | null;
+  totalBets: number;
+  totalPayout: string;
+  totalRefund: string;
+  confirmedAt: string | null;
+  isResettle: boolean;
+  reason: string | null;
+  operatorUsername: string;
+}
+
+const settlementHistory = ref<SettlementHistoryRecord[]>([]);
+const historyLoading = ref(false);
+const activeTab = ref<'bets' | 'history'>('bets');
+
+async function loadSettlementHistory() {
+  if (!matchId.value) return;
+  historyLoading.value = true;
+  try {
+    const { data } = await api.get(`/admin/matches/${matchId.value}/settlement/history`);
+    settlementHistory.value = data.data as SettlementHistoryRecord[];
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
+  } finally {
+    historyLoading.value = false;
+  }
+}

 // 智能比分推荐已暂时关闭（后端 smart-score.solver.ts 保留，恢复时接回 UI 与 POST /settlement/smart-score）

 const matchId = computed(() => String(route.params.id ?? ''));
 const isOutright = computed(() => match.value?.isOutright === true);

+
 const outrightTitle = computed(() => {
  const m = match.value;
  if (!m) return '';
@@ -372,6 +458,29 @@ function formatTime(v: string) {
  });
 }

+function formatScorePair(h: number | null, a: number | null) {
+  if (h == null || a == null) return '—';
+  return `${h}-${a}`;
+}
+
+function formatHistoryScore(row: SettlementHistoryRecord) {
+  const ht = formatScorePair(row.htHomeScore, row.htAwayScore);
+  const ft = formatScorePair(row.ftHomeScore, row.ftAwayScore);
+  if (ht === '—' && ft === '—') return '—';
+  return `${ht} / ${ft}`;
+}
+
+function formatHomeAwayPair(h: number | null, a: number | null) {
+  if (h == null && a == null) return '—';
+  return `${h ?? '—'} / ${a ?? '—'}`;
+}
+
+function formatHistoryCards(row: SettlementHistoryRecord) {
+  const { homeYellowCards: yH, awayYellowCards: yA, homeRedCards: rH, awayRedCards: rA } = row;
+  if (yH == null && yA == null && rH == null && rA == null) return '—';
+  return `Y:${yH ?? '—'}/${yA ?? '—'} R:${rH ?? '—'}/${rA ?? '—'}`;
+}
+
 function matchBetSelectionSummary(
  row: SettlementBetStats['bets']['items'][number],
 ) {
@@ -436,6 +545,7 @@ function onBetPageSizeChange(size: number) {
 async function loadMatch() {
  if (!matchId.value) return;
  loading.value = true;
+  isProgrammaticChange.value = true;
  try {
    const { data } = await api.get(`/admin/matches/${matchId.value}`);
    const detail = data.data as AdminMatchDetail;
@@ -445,7 +555,7 @@ async function loadMatch() {
      detail.status === 'SETTLED';
    if (!settleable) {
      ElMessage.warning(t('settlement.must_close_first'));
-      router.replace(detail.isOutright ? '/matches/outrights' : '/matches');
+      router.replace(settlementReturnTo(detail.isOutright));
      return;
    }
    match.value = detail;
@@ -457,14 +567,14 @@ async function loadMatch() {
        ftAway: detail.score.ftAway,
      };
      matchStats.value = {
-        homeCorners: detail.score.homeCorners ?? null,
-        awayCorners: detail.score.awayCorners ?? null,
-        homeYellowCards: detail.score.homeYellowCards ?? null,
-        awayYellowCards: detail.score.awayYellowCards ?? null,
-        homeRedCards: detail.score.homeRedCards ?? null,
-        awayRedCards: detail.score.awayRedCards ?? null,
-        homeCards: detail.score.homeCards ?? null,
-        awayCards: detail.score.awayCards ?? null,
+        homeCorners: detail.score.homeCorners ?? 0,
+        awayCorners: detail.score.awayCorners ?? 0,
+        homeYellowCards: detail.score.homeYellowCards ?? 0,
+        awayYellowCards: detail.score.awayYellowCards ?? 0,
+        homeRedCards: detail.score.homeRedCards ?? 0,
+        awayRedCards: detail.score.awayRedCards ?? 0,
+        homeCards: detail.score.homeCards ?? 0,
+        awayCards: detail.score.awayCards ?? 0,
      };
      winnerTeamId.value = detail.score.winnerTeamId ?? '';
    } else {
@@ -495,11 +605,28 @@ async function loadMatch() {
    }
    betPage.value = 1;
    await loadStats();
+    if (detail.status === 'PENDING_SETTLEMENT') {
+      try {
+        const previewRes = await api.get(`/admin/matches/${matchId.value}/settlement/preview`, {
+          params: { page: 1, pageSize: previewPageSize.value }
+        });
+        if (previewRes.data.data) {
+          preview.value = previewRes.data.data;
+          const itemsPage = previewRes.data.data.items as PreviewItemsPage;
+          previewPage.value = itemsPage.page;
+          previewPageSize.value = itemsPage.pageSize;
+        }
+      } catch (e) {
+        console.error('Failed to load active settlement preview', e);
+      }
+    }
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
  } finally {
    loading.value = false;
+    await nextTick();
+    isProgrammaticChange.value = false;
  }
 }

@@ -508,19 +635,34 @@ const isSettled = computed(() => match.value?.status === 'SETTLED');
 async function previewResettlement() {
  const payload = buildSettlementPayload();
  if (!payload) return;
-  const { data } = await api.post(`/admin/matches/${matchId.value}/resettle/preview`, {
-    ...payload,
-    reason: resettleReason.value.trim() || undefined,
-  });
-  resettlePreview.value = data.data;
+  try {
+    const { data } = await api.post(`/admin/matches/${matchId.value}/resettle/preview`, {
+      ...payload,
+      reason: resettleReason.value.trim() || undefined,
+    });
+    resettlePage.value = 1;
+    resettlePreview.value = data.data;
+    resettleDialogVisible.value = true;
+  } catch (e: unknown) {
+    ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
+  }
 }

 async function confirmResettle() {
  if (!resettlePreview.value?.batch) return;
-  await api.post(`/admin/resettle/${(resettlePreview.value.batch as { id: string }).id}/confirm`);
-  ElMessage.success(t('msg.resettle_confirmed'));
-  resettlePreview.value = null;
-  await loadMatch();
+  resettleConfirmLoading.value = true;
+  try {
+    await api.post(`/admin/resettle/${(resettlePreview.value.batch as { id: string }).id}/confirm`);
+    ElMessage.success(t('msg.resettle_confirmed'));
+    resettlePreview.value = null;
+    resettleDialogVisible.value = false;
+    await loadMatch();
+    void loadSettlementHistory();
+  } catch (e: unknown) {
+    ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
+  } finally {
+    resettleConfirmLoading.value = false;
+  }
 }

 function settlementApiError(e: unknown, fallback: string) {
@@ -582,6 +724,7 @@ async function previewSettlement() {
    const itemsPage = data.data.items as PreviewItemsPage;
    previewPage.value = itemsPage.page;
    previewPageSize.value = itemsPage.pageSize;
+    previewDialogVisible.value = true;
    await loadMatch();
  } catch (e: unknown) {
    ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
@@ -603,14 +746,41 @@ function onPreviewPageSizeChange(size: number) {

 async function confirm() {
  if (!preview.value?.batch) return;
-  await api.post(`/admin/settlement/${(preview.value.batch as { id: string }).id}/confirm`);
-  ElMessage.success(t('msg.settlement_confirmed'));
-  preview.value = null;
-  await loadMatch();
+  confirmLoading.value = true;
+  try {
+    await api.post(`/admin/settlement/${(preview.value.batch as { id: string }).id}/confirm`);
+    ElMessage.success(t('msg.settlement_confirmed'));
+    preview.value = null;
+    previewDialogVisible.value = false;
+    await loadMatch();
+    void loadSettlementHistory();
+  } catch (e: unknown) {
+    ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
+  } finally {
+    confirmLoading.value = false;
+  }
 }

+function handlePreviewClick() {
+  if (preview.value) {
+    previewDialogVisible.value = true;
+  } else {
+    void previewSettlement();
+  }
+}
+
+watch(
+  [score, matchStats, winnerTeamId],
+  () => {
+    if (isProgrammaticChange.value) return;
+    preview.value = null;
+  },
+  { deep: true }
+);
+
 onMounted(() => {
  void loadMatch();
+  void loadSettlementHistory();
 });
 </script>

@@ -766,9 +936,9 @@ onMounted(() => {
            <el-button
              type="primary"
              :loading="previewing"
-              @click="previewSettlement"
+              @click="handlePreviewClick"
            >
-              {{ t('settlement.preview_btn') }}
+              {{ preview ? t('settlement.view_preview_btn') : t('settlement.preview_btn') }}
            </el-button>
            <span class="preview-hint">{{
              isOutright ? t('settlement.outright.preview_hint') : t('settlement.preview_hint')
@@ -791,37 +961,94 @@ onMounted(() => {

    <!-- 智能比分弹窗已关闭（见 Settlement.vue git 历史） -->

-    <el-card v-if="canResettle && resettlePreview" class="preview-card" shadow="never">
-      <div class="preview-title">{{ t('settlement.resettle_preview_title') }}</div>
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <div class="pstat">
-            <div class="pstat-value">{{ resettlePreview.affectedCount }}</div>
-            <div class="pstat-label">{{ t('settlement.resettle_affected') }}</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="pstat">
-            <div class="pstat-value pstat-green">{{ resettlePreview.totalTopup }}</div>
-            <div class="pstat-label">{{ t('settlement.resettle_topup') }}</div>
-          </div>
-        </el-col>
-        <el-col :span="8">
-          <div class="pstat">
-            <div class="pstat-value pstat-orange">{{ resettlePreview.totalClawback }}</div>
-            <div class="pstat-label">{{ t('settlement.resettle_clawback') }}</div>
-          </div>
-        </el-col>
-      </el-row>
-      <el-button type="warning" class="confirm-btn" @click="confirmResettle">
-        {{ t('settlement.resettle_confirm') }}
-      </el-button>
-    </el-card>
+    <!-- 重新结算预览弹窗 -->
+    <el-dialog
+      v-model="resettleDialogVisible"
+      :title="t('settlement.resettle_preview_title')"
+      width="850px"
+      destroy-on-close
+    >
+      <div v-if="resettlePreview">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <div class="pstat">
+              <div class="pstat-value">{{ resettlePreview.affectedCount }}</div>
+              <div class="pstat-label">{{ t('settlement.resettle_affected') }}</div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="pstat">
+              <div class="pstat-value pstat-green">{{ resettlePreview.totalTopup }}</div>
+              <div class="pstat-label">{{ t('settlement.resettle_topup') }}</div>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="pstat">
+              <div class="pstat-value pstat-orange">{{ resettlePreview.totalClawback }}</div>
+              <div class="pstat-label">{{ t('settlement.resettle_clawback') }}</div>
+            </div>
+          </el-col>
+        </el-row>

-    <el-card v-if="preview" class="preview-card preview-card--compact" shadow="never">
-      <div class="preview-bar">
-        <span class="preview-bar-title">{{ t('settlement.preview_title') }}</span>
-        <div class="preview-metrics">
+        <div v-if="resettlePreview.items && resettlePreview.items.length > 0" class="preview-items-wrap" style="margin-top: 20px;">
+          <div class="preview-items-head" style="margin-bottom: 10px;">
+            <span class="preview-items-title" style="font-size: 14px; font-weight: 600; color: var(--text);">
+              {{ t('settlement.resettle_affected_list') }} ({{ resettlePreview.items.length }})
+            </span>
+          </div>
+          <el-table :data="resettleItemsPage" size="small" stripe class="preview-items-table" style="max-height: 400px; overflow-y: auto;">
+            <el-table-column type="index" :index="(i: number) => (resettlePage - 1) * resettlePageSize + i + 1" :label="t('common.seq')" width="55" align="center" />
+            <el-table-column :label="t('bet.col.bet_no')" prop="betNo" min-width="140" show-overflow-tooltip />
+            <el-table-column :label="t('settlement.resettle_col.old_result')" min-width="160">
+              <template #default="{ row }">
+                <el-tag size="small" :type="betStatusTagType(row.oldStatus)" style="margin-right: 6px;">{{ betStatusLabel(row.oldStatus) }}</el-tag>
+                <span class="old-payout" style="color: var(--text-muted); font-size: 11px;">{{ formatAmount(row.oldPayout) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('settlement.resettle_col.new_result')" min-width="160">
+              <template #default="{ row }">
+                <el-tag size="small" :type="betStatusTagType(row.newStatus)" style="margin-right: 6px;">{{ betStatusLabel(row.newStatus) }}</el-tag>
+                <span class="new-payout" style="color: var(--text); font-size: 11px;">{{ formatAmount(row.newPayout) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="t('settlement.resettle_col.adjust')" width="120" align="right">
+              <template #default="{ row }">
+                <span :class="Number(row.delta) > 0 ? 'pstat-green' : Number(row.delta) < 0 ? 'pstat-orange' : ''" style="font-weight: bold;">
+                  {{ Number(row.delta) > 0 ? '+' : '' }}{{ formatAmount(row.delta) }}
+                </span>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            class="preview-pager bet-pager"
+            size="small"
+            background
+            layout="total, sizes, prev, pager, next"
+            :total="resettlePreview.items.length"
+            v-model:current-page="resettlePage"
+            v-model:page-size="resettlePageSize"
+            :page-sizes="[10, 20, 50, 100]"
+            style="margin-top: 12px; justify-content: flex-end;"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="resettleDialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="warning" :loading="resettleConfirmLoading" @click="confirmResettle">
+          {{ t('settlement.resettle_confirm') }}
+        </el-button>
+      </template>
+    </el-dialog>
+
+    <!-- 结算预览弹窗 -->
+    <el-dialog
+      v-model="previewDialogVisible"
+      :title="t('settlement.preview_title')"
+      width="850px"
+      destroy-on-close
+    >
+      <div v-if="preview">
+        <div class="preview-metrics" style="margin-bottom: 16px;">
          <div class="preview-metric">
            <span class="preview-metric-value">{{ preview.pendingBetCount ?? preview.singleBetCount }}</span>
            <span class="preview-metric-label">{{ t('settlement.preview_pending_bets') }}</span>
@@ -839,147 +1066,201 @@ onMounted(() => {
            <span class="preview-metric-label">{{ t('settlement.refund_amount') }}</span>
          </div>
        </div>
-        <el-button type="success" size="small" @click="confirm">
+        <p v-if="previewZeroHint" class="preview-zero-hint" style="margin-bottom: 16px;">{{ previewZeroHint }}</p>
+        <div v-if="previewItemsPage.total > 0" class="preview-items-wrap">
+          <div class="preview-items-head">
+            <span class="preview-items-title">
+              {{ t('settlement.preview_items_title', { n: previewItemsPage.total }) }}
+            </span>
+          </div>
+          <el-table :data="previewItemsPage.items" size="small" stripe class="preview-items-table">
+            <el-table-column type="index" :index="(i: number) => (previewItemsPage.page - 1) * previewItemsPage.pageSize + i + 1" :label="t('common.seq')" width="55" align="center" />
+            <el-table-column :label="t('bet.col.bet_no')" prop="betNo" min-width="140" show-overflow-tooltip />
+            <el-table-column :label="t('common.type')" width="68">
+              <template #default="{ row }">{{ betTypeLabel(row.betType) }}</template>
+            </el-table-column>
+            <el-table-column :label="t('settlement.preview_col.result')" width="108">
+              <template #default="{ row }">{{ previewResultLabel(row.result) }}</template>
+            </el-table-column>
+            <el-table-column :label="t('settlement.est_payout')" width="92" align="right">
+              <template #default="{ row }">{{ formatAmount(row.payout) }}</template>
+            </el-table-column>
+            <el-table-column :label="t('user.field.remark')" min-width="160" show-overflow-tooltip prop="note" />
+          </el-table>
+          <el-pagination
+            v-if="previewItemsPage.total > 0"
+            class="preview-pager bet-pager"
+            size="small"
+            background
+            layout="total, sizes, prev, pager, next"
+            :total="previewItemsPage.total"
+            :current-page="previewItemsPage.page"
+            :page-size="previewItemsPage.pageSize"
+            :page-sizes="[10, 20, 50]"
+            @current-change="onPreviewPageChange"
+            @size-change="onPreviewPageSizeChange"
+          />
+        </div>
+      </div>
+      <template #footer>
+        <el-button @click="previewDialogVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="success" :loading="confirmLoading" @click="confirm">
          {{ t('settlement.confirm_btn') }}
        </el-button>
-      </div>
-      <p v-if="previewZeroHint" class="preview-zero-hint">{{ previewZeroHint }}</p>
-      <div v-if="previewItemsPage.total > 0" class="preview-items-wrap">
-        <div class="preview-items-head">
-          <span class="preview-items-title">
-            {{ t('settlement.preview_items_title', { n: previewItemsPage.total }) }}
-          </span>
-        </div>
-        <el-table :data="previewItemsPage.items" size="small" stripe class="preview-items-table">
-          <el-table-column type="index" :index="(i: number) => (previewItemsPage.page - 1) * previewItemsPage.pageSize + i + 1" :label="t('common.seq')" width="55" align="center" />
-          <el-table-column :label="t('bet.col.bet_no')" prop="betNo" min-width="140" show-overflow-tooltip />
-          <el-table-column :label="t('common.type')" width="68">
-            <template #default="{ row }">{{ betTypeLabel(row.betType) }}</template>
-          </el-table-column>
-          <el-table-column :label="t('settlement.preview_col.result')" width="108">
-            <template #default="{ row }">{{ previewResultLabel(row.result) }}</template>
-          </el-table-column>
-          <el-table-column :label="t('settlement.est_payout')" width="92" align="right">
-            <template #default="{ row }">{{ formatAmount(row.payout) }}</template>
-          </el-table-column>
-          <el-table-column :label="t('user.field.remark')" min-width="160" show-overflow-tooltip prop="note" />
-        </el-table>
-        <el-pagination
-          v-if="previewItemsPage.total > 0"
-          class="preview-pager bet-pager"
-          size="small"
-          background
-          layout="total, sizes, prev, pager, next"
-          :total="previewItemsPage.total"
-          :current-page="previewItemsPage.page"
-          :page-size="previewItemsPage.pageSize"
-          :page-sizes="[10, 20, 50]"
-          @current-change="onPreviewPageChange"
-          @size-change="onPreviewPageSizeChange"
-        />
-      </div>
-    </el-card>
+      </template>
+    </el-dialog>

-    <el-card v-loading="statsLoading" class="stats-card" shadow="never">
-      <div v-if="stats" class="stats-body">
-        <div class="stats-charts">
-          <div v-if="betTypeChartOption" class="mini-chart">
-            <VChart class="mini-chart-canvas" :option="betTypeChartOption" autoresize />
-          </div>
-          <div v-if="statusChartOption" class="mini-chart">
-            <VChart class="mini-chart-canvas" :option="statusChartOption" autoresize />
-          </div>
-          <div v-if="selectionStakeChartOption" class="mini-chart">
-            <VChart class="mini-chart-canvas" :option="selectionStakeChartOption" autoresize />
-          </div>
-        </div>
-
-        <div class="stats-tables">
-          <div class="stats-table-block">
-            <div class="subsection-title">{{ t('settlement.stats_by_market') }}</div>
-            <el-table
-              v-if="stats.bySelection.length"
-              :data="stats.bySelection"
-              size="small"
-              stripe
-              class="stats-table"
-              height="100%"
-            >
-              <el-table-column :label="t('settlement.col.market')" min-width="120">
-                <template #default="{ row }">
-                  {{ marketLabel(row.marketType) }}
-                  <span v-if="row.period" class="period-tag">{{ row.period }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column :label="t('settlement.col.selection')" min-width="120">
-                <template #default="{ row }">{{ selectionDisplay(row) }}</template>
-              </el-table-column>
-              <el-table-column :label="t('settlement.col.legs')" width="72" align="center" prop="legCount" />
-              <el-table-column :label="t('settlement.col.single_stake')" width="100" align="right">
-                <template #default="{ row }">{{ formatAmount(row.singleStake) }}</template>
-              </el-table-column>
-              <el-table-column :label="t('settlement.col.parlay_legs')" width="88" align="center" prop="parlayLegCount" />
-            </el-table>
-            <p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
-          </div>
-
-          <div class="stats-table-block stats-table-block--bets">
-            <div class="subsection-title">
-              {{ t('settlement.bet_list') }} ({{ stats.bets.total }})
-              <span class="subsection-hint">{{ t('settlement.bet_list_hint') }}</span>
+    <el-card v-loading="statsLoading && activeTab === 'bets'" class="stats-card" shadow="never">
+      <el-tabs v-model="activeTab" class="settlement-tabs">
+        <el-tab-pane name="bets" :label="t('settlement.history_tab_bets')">
+          <div v-if="stats" class="stats-body">
+            <div class="stats-charts">
+              <div v-if="betTypeChartOption" class="mini-chart">
+                <VChart class="mini-chart-canvas" :option="betTypeChartOption" autoresize />
+              </div>
+              <div v-if="statusChartOption" class="mini-chart">
+                <VChart class="mini-chart-canvas" :option="statusChartOption" autoresize />
+              </div>
+              <div v-if="selectionStakeChartOption" class="mini-chart">
+                <VChart class="mini-chart-canvas" :option="selectionStakeChartOption" autoresize />
+              </div>
            </div>
-            <div v-loading="betsLoading" class="table-wrap">
-            <el-table
-              v-if="stats.bets.items.length"
-              :data="stats.bets.items"
-              size="small"
-              stripe
-              class="stats-table"
-            >
-              <el-table-column type="index" :index="(i: number) => ((stats?.bets.page ?? 1) - 1) * (stats?.bets.pageSize ?? 10) + i + 1" :label="t('common.seq')" width="55" align="center" />
-              <el-table-column prop="betNo" :label="t('bet.col.bet_no')" width="140" />
-              <el-table-column prop="username" :label="t('bet.col.player')" width="96" />
-              <el-table-column :label="t('common.type')" width="72">
-                <template #default="{ row }">
-                  {{ betTypeLabel(row.betType) }}
-                  <span v-if="row.legCountOnMatch > 1" class="leg-badge">×{{ row.legCountOnMatch }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column :label="t('bet.col.content')" min-width="200">
-                <template #default="{ row }">
-                  <span class="bet-content-cell">{{ matchBetSelectionSummary(row) }}</span>
-                </template>
-              </el-table-column>
-              <el-table-column :label="t('bet.col.stake')" width="88" align="right">
-                <template #default="{ row }">{{ formatAmount(row.stake) }}</template>
-              </el-table-column>
-              <el-table-column :label="t('common.status')" width="88">
-                <template #default="{ row }">
-                  <el-tag size="small" :type="betStatusTagType(row.status)">{{ betStatusLabel(row.status) }}</el-tag>
-                </template>
-              </el-table-column>
-              <el-table-column :label="t('bet.col.placed_at')" width="120">
-                <template #default="{ row }">{{ formatTime(row.placedAt) }}</template>
-              </el-table-column>
-            </el-table>
-            <p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
+
+            <div class="stats-tables">
+              <div class="stats-table-block">
+                <div class="subsection-title">{{ t('settlement.stats_by_market') }}</div>
+                <div class="table-wrap">
+                <el-table
+                  v-if="stats.bySelection.length"
+                  :data="stats.bySelection"
+                  size="small"
+                  stripe
+                  class="stats-table"
+                >
+                  <el-table-column :label="t('settlement.col.market')" min-width="120">
+                    <template #default="{ row }">
+                      {{ marketLabel(row.marketType) }}
+                      <span v-if="row.period" class="period-tag">{{ row.period }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column :label="t('settlement.col.selection')" min-width="120">
+                    <template #default="{ row }">{{ selectionDisplay(row) }}</template>
+                  </el-table-column>
+                  <el-table-column :label="t('settlement.col.legs')" width="72" align="center" prop="legCount" />
+                  <el-table-column :label="t('settlement.col.single_stake')" width="100" align="right">
+                    <template #default="{ row }">{{ formatAmount(row.singleStake) }}</template>
+                  </el-table-column>
+                  <el-table-column :label="t('settlement.col.parlay_legs')" width="88" align="center" prop="parlayLegCount" />
+                </el-table>
+                <p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
+                </div>
+              </div>
+
+              <div class="stats-table-block stats-table-block--bets">
+                <div class="subsection-title">
+                  {{ t('settlement.bet_list') }} ({{ stats.bets.total }})
+                  <span class="subsection-hint">{{ t('settlement.bet_list_hint') }}</span>
+                </div>
+                <div v-loading="betsLoading" class="table-wrap">
+                <el-table
+                  v-if="stats.bets.items.length"
+                  :data="stats.bets.items"
+                  size="small"
+                  stripe
+                  class="stats-table"
+                >
+                  <el-table-column type="index" :index="(i: number) => ((stats?.bets.page ?? 1) - 1) * (stats?.bets.pageSize ?? 10) + i + 1" :label="t('common.seq')" width="55" align="center" />
+                  <el-table-column prop="betNo" :label="t('bet.col.bet_no')" width="140" />
+                  <el-table-column prop="username" :label="t('bet.col.player')" width="96" />
+                  <el-table-column :label="t('common.type')" width="72">
+                    <template #default="{ row }">
+                      {{ betTypeLabel(row.betType) }}
+                      <span v-if="row.legCountOnMatch > 1" class="leg-badge">×{{ row.legCountOnMatch }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column :label="t('bet.col.content')" min-width="200">
+                    <template #default="{ row }">
+                      <span class="bet-content-cell">{{ matchBetSelectionSummary(row) }}</span>
+                    </template>
+                  </el-table-column>
+                  <el-table-column :label="t('bet.col.stake')" width="88" align="right">
+                    <template #default="{ row }">{{ formatAmount(row.stake) }}</template>
+                  </el-table-column>
+                  <el-table-column :label="t('common.status')" width="88">
+                    <template #default="{ row }">
+                      <el-tag size="small" :type="betStatusTagType(row.status)">{{ betStatusLabel(row.status) }}</el-tag>
+                    </template>
+                  </el-table-column>
+                  <el-table-column :label="t('bet.col.placed_at')" width="120">
+                    <template #default="{ row }">{{ formatTime(row.placedAt) }}</template>
+                  </el-table-column>
+                </el-table>
+                <p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
+                </div>
+                <el-pagination
+                  v-if="stats.bets.total > 0"
+                  class="bet-pager"
+                  size="small"
+                  background
+                  layout="total, sizes, prev, pager, next"
+                  :total="stats.bets.total"
+                  :current-page="stats.bets.page"
+                  :page-size="stats.bets.pageSize"
+                  :page-sizes="[10, 20, 50]"
+                  @current-change="onBetPageChange"
+                  @size-change="onBetPageSizeChange"
+                />
+              </div>
            </div>
-            <el-pagination
-              v-if="stats.bets.total > 0"
-              class="bet-pager"
-              size="small"
-              background
-              layout="total, sizes, prev, pager, next"
-              :total="stats.bets.total"
-              :current-page="stats.bets.page"
-              :page-size="stats.bets.pageSize"
-              :page-sizes="[10, 20, 50]"
-              @current-change="onBetPageChange"
-              @size-change="onBetPageSizeChange"
-            />
          </div>
-        </div>
-      </div>
+        </el-tab-pane>
+
+        <el-tab-pane name="history" :label="t('settlement.history_tab')">
+          <div v-loading="historyLoading" class="history-body">
+            <div class="table-wrap">
+              <el-table
+                :data="settlementHistory"
+                size="small"
+                stripe
+                class="stats-table history-table"
+                :empty-text="t('settlement.history.no_records')"
+              >
+                <el-table-column prop="batchNo" :label="t('settlement.history.col.batch_no')" min-width="120" show-overflow-tooltip />
+                <el-table-column :label="t('settlement.history.col.type')" width="100">
+                  <template #default="{ row }">
+                    <el-tag size="small" :type="row.isResettle ? 'warning' : 'success'">
+                      {{ row.isResettle ? t('settlement.history.type.resettle') : t('settlement.history.type.initial') }}
+                    </el-tag>
+                  </template>
+                </el-table-column>
+                <el-table-column :label="t('settlement.history.col.score')" min-width="120">
+                  <template #default="{ row }">{{ formatHistoryScore(row) }}</template>
+                </el-table-column>
+                <el-table-column :label="t('settlement.history.col.corners')" width="100">
+                  <template #default="{ row }">{{ formatHomeAwayPair(row.homeCorners, row.awayCorners) }}</template>
+                </el-table-column>
+                <el-table-column :label="t('settlement.history.col.cards')" min-width="120">
+                  <template #default="{ row }">{{ formatHistoryCards(row) }}</template>
+                </el-table-column>
+                <el-table-column prop="totalBets" :label="t('settlement.history.col.total_bets')" width="96" align="right" />
+                <el-table-column :label="t('settlement.history.col.total_payout')" width="100" align="right">
+                  <template #default="{ row }">{{ formatAmount(row.totalPayout) }}</template>
+                </el-table-column>
+                <el-table-column :label="t('settlement.history.col.total_refund')" width="100" align="right">
+                  <template #default="{ row }">{{ formatAmount(row.totalRefund) }}</template>
+                </el-table-column>
+                <el-table-column prop="operatorUsername" :label="t('settlement.history.col.operator')" width="96" show-overflow-tooltip />
+                <el-table-column :label="t('settlement.history.col.time')" width="120">
+                  <template #default="{ row }">{{ row.confirmedAt ? formatTime(row.confirmedAt) : '—' }}</template>
+                </el-table-column>
+                <el-table-column :label="t('settlement.history.col.reason')" min-width="120" show-overflow-tooltip>
+                  <template #default="{ row }">{{ row.reason || '—' }}</template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
    </el-card>
  </div>
 </template>
@@ -1031,6 +1312,72 @@ onMounted(() => {
  overflow: hidden;
 }

+.settlement-tabs {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.settlement-tabs :deep(.el-tabs__header) {
+  margin-bottom: 8px;
+  flex-shrink: 0;
+}
+
+.settlement-tabs :deep(.el-tabs__nav-wrap) {
+  margin-bottom: 0;
+}
+
+.settlement-tabs :deep(.el-tabs__item) {
+  height: 34px;
+  line-height: 34px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #888;
+  padding: 0 14px;
+}
+
+.settlement-tabs :deep(.el-tabs__item.is-active) {
+  color: #d4fde5;
+  font-weight: 700;
+}
+
+.settlement-tabs :deep(.el-tabs__active-bar) {
+  background-color: var(--gold-bright);
+  height: 2px;
+}
+
+.settlement-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.settlement-tabs :deep(.el-tab-pane) {
+  height: 100%;
+}
+
+.history-body {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  height: 100%;
+}
+
+.history-body .table-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+}
+
+.history-table {
+  width: 100%;
+}
+
 .settle-score-row {
  display: flex;
  align-items: flex-end;
@@ -1225,7 +1572,7 @@ onMounted(() => {
  overflow: hidden;
 }

-.stats-table-block--bets .table-wrap {
+.stats-table-block .table-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
@@ -1487,7 +1834,7 @@ onMounted(() => {
  color: var(--text-muted);
 }

-.stats-table-block--bets .table-wrap {
+.stats-table-block .table-wrap {
  border-color: var(--border);
  background: #ffffff;
 }
--- a/apps/admin/src/views/agent/AgentDirectPlayersView.vue
+++ b/apps/admin/src/views/agent/AgentDirectPlayersView.vue
@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { ref, computed, inject, onMounted, onUnmounted, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import {
+  agentDirectPlayersReloadKey,
+  agentPlayerActionsKey,
+} from '../../composables/agent-direct-players-context';
+import api from '../../api';
+import AdminSubNav from '../../components/AdminSubNav.vue';
+import AdminTableWrap from '../../components/AdminTableWrap.vue';
+import AdminTableEmpty from '../../components/AdminTableEmpty.vue';
+import AdminPlayerStatusCell from '../../components/AdminPlayerStatusCell.vue';
+import AdminPlayerRowActions from '../../components/AdminPlayerRowActions.vue';
+import { formatAmount, formatAmountFull } from '../../utils/format-amount';
+import type { PlayerRow } from '../user-form';
+
+defineOptions({ name: 'AdminAgentDirectPlayersView' });
+
+const route = useRoute();
+const { t } = useAdminLocale();
+const actions = inject(agentPlayerActionsKey);
+const reloadRef = inject(agentDirectPlayersReloadKey);
+
+const agentId = computed(() => String(route.params.agentId ?? ''));
+const agentUsername = computed(() => {
+  const name = String(route.query.username ?? '').trim();
+  return name || `#${agentId.value}`;
+});
+
+const players = ref<PlayerRow[]>([]);
+const total = ref(0);
+const page = ref(1);
+const pageSize = ref(20);
+const keyword = ref('');
+const filterStatus = ref('');
+const loading = ref(false);
+
+const pageTitle = computed(() =>
+  t('agent.direct_players_title', { name: agentUsername.value }),
+);
+
+async function loadPlayers() {
+  if (!agentId.value) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get('/admin/users', {
+      params: {
+        parentId: agentId.value,
+        page: page.value,
+        pageSize: pageSize.value,
+        keyword: keyword.value.trim() || undefined,
+        status: filterStatus.value || undefined,
+      },
+    });
+    players.value = (data.data.items ?? []) as PlayerRow[];
+    total.value = data.data.total ?? 0;
+  } finally {
+    loading.value = false;
+  }
+}
+
+function onSearch() {
+  page.value = 1;
+  void loadPlayers();
+}
+
+function onPageChange(p: number) {
+  page.value = p;
+  void loadPlayers();
+}
+
+function onSizeChange(size: number) {
+  pageSize.value = size;
+  page.value = 1;
+  void loadPlayers();
+}
+
+watch(agentId, () => {
+  page.value = 1;
+  void loadPlayers();
+});
+
+onMounted(() => {
+  if (reloadRef) reloadRef.value = () => void loadPlayers();
+  void loadPlayers();
+});
+
+onUnmounted(() => {
+  if (reloadRef) reloadRef.value = null;
+});
+</script>
+
+<template>
+  <div class="admin-list-page agent-direct-players-page">
+    <AdminSubNav :title="pageTitle" :subtitle="t('agent.direct_players')" />
+
+    <section class="list-panel player-list-panel">
+      <div class="list-panel-toolbar">
+        <el-form inline class="list-chrome__grow">
+          <el-form-item :label="t('common.keyword')">
+            <el-input
+              v-model="keyword"
+              :placeholder="t('user.filter.username_ph')"
+              clearable
+              style="width: 180px"
+              @keyup.enter="onSearch"
+            />
+          </el-form-item>
+          <el-form-item :label="t('common.status')">
+            <el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
+              <el-option :label="t('user.status.ACTIVE')" value="ACTIVE" />
+              <el-option :label="t('user.status.SUSPENDED')" value="SUSPENDED" />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSearch">{{ t('common.search') }}</el-button>
+          </el-form-item>
+        </el-form>
+        <div v-if="actions?.canCreatePlayer" class="list-chrome__actions">
+          <el-button type="primary" @click="actions?.openCreatePlayer(agentId)">
+            {{ t('user.create_btn') }}
+          </el-button>
+        </div>
+      </div>
+
+      <AdminTableWrap>
+        <el-table v-loading="loading" :data="players" stripe class="inner-table">
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
+          <el-table-column
+            type="index"
+            :index="(i: number) => (page - 1) * pageSize + i + 1"
+            :label="t('common.seq')"
+            width="70"
+            align="center"
+          />
+          <el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
+          <el-table-column :label="t('common.status')" min-width="128">
+            <template #default="{ row }">
+              <AdminPlayerStatusCell :status="row.status" :is-online="row.isOnline" />
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('user.col.invite_code')" min-width="96" show-overflow-tooltip>
+            <template #default="{ row }">
+              <code v-if="row.inviteCode" class="invite-code-cell">{{ row.inviteCode }}</code>
+              <span v-else>—</span>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('user.col.balance')" min-width="120" align="right">
+            <template #default="{ row }">
+              <el-tooltip
+                :content="`${formatAmountFull(row.availableBalance)} / ${formatAmountFull(row.frozenBalance)}`"
+                placement="top"
+              >
+                <span class="amount-compact">
+                  {{ formatAmount(row.availableBalance) }} / {{ formatAmount(row.frozenBalance) }}
+                </span>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <el-table-column prop="betCount" :label="t('user.col.bets')" width="56" align="center" />
+          <el-table-column :label="t('user.col.stake_payout')" min-width="100" align="right">
+            <template #default="{ row }">
+              <span class="amount-compact">
+                {{ formatAmount(row.totalStake) }} / {{ formatAmount(row.totalReturn) }}
+              </span>
+            </template>
+          </el-table-column>
+          <el-table-column v-if="actions" :label="t('common.actions')" min-width="320" align="center">
+            <template #default="{ row }">
+              <AdminPlayerRowActions
+                v-bind="actions.playerActionFlags"
+                :row="row"
+                @detail="actions.openDetailPlayer(row.id)"
+                @ledger="actions.openPlayerWalletLedger(row.id, row.username)"
+                @edit="actions.openEditPlayer(row.id)"
+                @deposit="actions.openTransfer('deposit', row)"
+                @withdraw="actions.openTransfer('withdraw', row)"
+                @freeze="actions.toggleFreezePlayer(row)"
+                @delete="actions.deletePlayer(row)"
+              />
+            </template>
+          </el-table-column>
+        </el-table>
+      </AdminTableWrap>
+
+      <div class="pager">
+        <el-pagination
+          v-model:current-page="page"
+          v-model:page-size="pageSize"
+          :total="total"
+          :page-sizes="[10, 20, 50, 100]"
+          layout="total, sizes, prev, pager, next"
+          background
+          @current-change="onPageChange"
+          @size-change="onSizeChange"
+        />
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.agent-direct-players-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.agent-direct-players-page :deep(.admin-subnav) {
+  margin-bottom: 10px;
+}
+
+.agent-direct-players-page .list-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.agent-direct-players-page .player-list-panel :deep(.admin-table-wrap) {
+  flex: 1;
+  min-height: 0;
+}
+
+.agent-direct-players-page .inner-table {
+  height: 100%;
+}
+</style>
--- a/apps/admin/src/views/agent/GlobalSettingsView.vue
+++ b/apps/admin/src/views/agent/GlobalSettingsView.vue
@@ -0,0 +1,368 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import { usePermissions } from '../../composables/usePermissions';
+import { AdminPerm } from '../../constants/permissions';
+import api from '../../api';
+import { clearStaffSession } from '../../stores/auth';
+import AdminSubNav from '../../components/AdminSubNav.vue';
+import RatePercentInput from '../../components/RatePercentInput.vue';
+import { percentToDecimalRate, decimalRateToPercent } from '../../utils/rate-percent';
+
+defineOptions({ name: 'AdminGlobalSettingsView' });
+
+const { t } = useAdminLocale();
+const router = useRouter();
+const { hasPermission } = usePermissions();
+const canManageSettings = hasPermission(AdminPerm.settings);
+
+const playerSettings = ref({ allowPasswordChange: true, allowUsernameChange: false });
+const bettingLimits = ref({
+  minStake: 1,
+  maxStakeSingle: 50000,
+  maxStakeParlay: 20000,
+  maxPayoutSingle: 500000,
+  maxPayoutParlay: 1000000,
+  dailyStakeLimit: 200000,
+});
+const hierarchySettings = ref({ maxAgentLevel: 0 });
+const platformDirectRate = ref(0);
+const adminInviteRate = ref(0);
+const resetAllowed = ref(false);
+const resetConfirmPhrase = ref('');
+
+const settingsSaving = ref(false);
+const limitsSaving = ref(false);
+const hierarchySaving = ref(false);
+const platformDirectSaving = ref(false);
+const resetLoading = ref(false);
+const loading = ref(false);
+
+async function loadSettings() {
+  loading.value = true;
+  try {
+    const { data } = await api.get('/admin/users/page-init');
+    const payload = data.data as {
+      playerSettings?: typeof playerSettings.value;
+      bettingLimits?: typeof bettingLimits.value;
+      hierarchySettings?: { maxAgentLevel: number };
+      platformDirect?: { platformDirectRate?: number | string; adminInviteRate?: number | string };
+    };
+    if (payload.playerSettings) playerSettings.value = payload.playerSettings;
+    if (payload.bettingLimits) bettingLimits.value = payload.bettingLimits;
+    if (payload.hierarchySettings) {
+      hierarchySettings.value = {
+        maxAgentLevel: payload.hierarchySettings.maxAgentLevel ?? 0,
+      };
+    }
+    if (payload.platformDirect) {
+      platformDirectRate.value = decimalRateToPercent(payload.platformDirect.platformDirectRate ?? 0);
+      adminInviteRate.value = decimalRateToPercent(
+        payload.platformDirect.adminInviteRate ?? payload.platformDirect.platformDirectRate ?? 0,
+      );
+    }
+  } catch {
+    /* keep defaults */
+  } finally {
+    loading.value = false;
+  }
+}
+
+async function loadResetDatabaseStatus() {
+  try {
+    const { data } = await api.get('/admin/system/reset-database');
+    resetAllowed.value = !!data.data?.allowed;
+  } catch {
+    resetAllowed.value = false;
+  }
+}
+
+async function savePlayerSettings() {
+  settingsSaving.value = true;
+  try {
+    const { data } = await api.put('/admin/users/settings/account', playerSettings.value);
+    playerSettings.value = data.data;
+    ElMessage.success(t('msg.saved'));
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    settingsSaving.value = false;
+  }
+}
+
+async function saveHierarchySettings() {
+  hierarchySaving.value = true;
+  try {
+    const { data } = await api.put('/admin/agents/settings/hierarchy', hierarchySettings.value);
+    hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? hierarchySettings.value.maxAgentLevel };
+    ElMessage.success(t('msg.saved'));
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    hierarchySaving.value = false;
+  }
+}
+
+async function savePlatformDirectSettings() {
+  platformDirectSaving.value = true;
+  try {
+    const { data } = await api.put('/admin/settings/cashback/platform-direct', {
+      platformDirectRate: percentToDecimalRate(platformDirectRate.value),
+      adminInviteRate: percentToDecimalRate(adminInviteRate.value),
+    });
+    const payload = data.data as { platformDirectRate?: number | string; adminInviteRate?: number | string };
+    platformDirectRate.value = decimalRateToPercent(payload?.platformDirectRate ?? 0);
+    adminInviteRate.value = decimalRateToPercent(payload?.adminInviteRate ?? payload?.platformDirectRate ?? 0);
+    ElMessage.success(t('msg.saved'));
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    platformDirectSaving.value = false;
+  }
+}
+
+async function saveBettingLimits() {
+  limitsSaving.value = true;
+  try {
+    const { data } = await api.put('/admin/settings/betting-limits', bettingLimits.value);
+    bettingLimits.value = data.data;
+    ElMessage.success(t('msg.saved'));
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    limitsSaving.value = false;
+  }
+}
+
+async function resetDatabase() {
+  if (resetConfirmPhrase.value !== 'RESET') {
+    ElMessage.warning(t('user.reset_database_confirm_label'));
+    return;
+  }
+  try {
+    await ElMessageBox.confirm(t('user.reset_database_hint'), t('user.reset_database'), {
+      type: 'warning',
+      confirmButtonText: t('user.reset_database_btn'),
+      cancelButtonText: t('common.cancel'),
+    });
+  } catch {
+    return;
+  }
+  resetLoading.value = true;
+  try {
+    const { data } = await api.post('/admin/system/reset-database', { confirmPhrase: 'RESET' });
+    const accounts: string[] = data.data?.demoAccounts ?? [];
+    ElMessage.success({
+      message: `${t('user.reset_database_success')}\n${t('user.reset_database_accounts')}: ${accounts.join(' · ')}`,
+      duration: 8000,
+    });
+    clearStaffSession();
+    await router.push('/login');
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    resetLoading.value = false;
+  }
+}
+
+onMounted(() => {
+  if (!canManageSettings) {
+    void router.replace('/users');
+    return;
+  }
+  void Promise.all([loadSettings(), loadResetDatabaseStatus()]);
+});
+</script>
+
+<template>
+  <div v-loading="loading" class="admin-list-page global-settings-page">
+    <AdminSubNav :title="t('user.page_settings')" />
+
+    <section class="global-settings-panel">
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('user.global_settings') }}</p>
+        <el-form inline size="small" class="settings-form">
+          <el-form-item :label="t('user.field.allow_password_change')">
+            <el-switch v-model="playerSettings.allowPasswordChange" :loading="settingsSaving" @change="savePlayerSettings" />
+          </el-form-item>
+          <el-form-item :label="t('user.field.allow_username_change')">
+            <el-switch v-model="playerSettings.allowUsernameChange" :loading="settingsSaving" @change="savePlayerSettings" />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('agent.hierarchy.settings_title') }}</p>
+        <p class="list-settings-hint">{{ t('agent.hierarchy.settings_hint') }}</p>
+        <el-form inline size="small" class="settings-form">
+          <el-form-item :label="t('agent.hierarchy.max_level')">
+            <el-input-number
+              v-model="hierarchySettings.maxAgentLevel"
+              :min="0"
+              :step="1"
+              controls-position="right"
+              :disabled="hierarchySaving"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :loading="hierarchySaving" @click="saveHierarchySettings">
+              {{ t('common.save') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('cashback.settings_title') }}</p>
+        <el-form inline size="small" class="settings-form">
+          <el-form-item :label="t('cashback.platform_direct_default_rate')">
+            <RatePercentInput v-model="platformDirectRate" />
+          </el-form-item>
+          <p class="list-settings-hint block-hint">{{ t('cashback.platform_direct_default_hint') }}</p>
+          <el-form-item :label="t('cashback.admin_invite_default_rate')">
+            <RatePercentInput v-model="adminInviteRate" />
+          </el-form-item>
+          <p class="list-settings-hint block-hint">{{ t('cashback.admin_invite_default_hint') }}</p>
+          <el-form-item>
+            <el-button type="primary" :loading="platformDirectSaving" @click="savePlatformDirectSettings">
+              {{ t('common.save') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="list-settings-block">
+        <p class="list-settings-title">{{ t('user.betting_limits') }}</p>
+        <el-form inline size="small" class="settings-form limits-form">
+          <el-form-item :label="t('user.limit.min_stake')">
+            <el-input-number v-model="bettingLimits.minStake" :min="0" :step="1" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_stake_single')">
+            <el-input-number v-model="bettingLimits.maxStakeSingle" :min="0" :step="100" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_stake_parlay')">
+            <el-input-number v-model="bettingLimits.maxStakeParlay" :min="0" :step="100" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_payout_single')">
+            <el-input-number v-model="bettingLimits.maxPayoutSingle" :min="0" :step="1000" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.max_payout_parlay')">
+            <el-input-number v-model="bettingLimits.maxPayoutParlay" :min="0" :step="1000" controls-position="right" />
+          </el-form-item>
+          <el-form-item :label="t('user.limit.daily_stake')">
+            <el-input-number v-model="bettingLimits.dailyStakeLimit" :min="0" :step="1000" controls-position="right" />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" :loading="limitsSaving" @click="saveBettingLimits">
+              {{ t('common.save') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="list-settings-block list-settings-block--danger">
+        <p class="list-settings-title">{{ t('user.reset_database') }}</p>
+        <p class="list-settings-hint">{{ t('user.reset_database_hint') }}</p>
+        <el-alert
+          v-if="!resetAllowed"
+          type="warning"
+          :closable="false"
+          show-icon
+          class="reset-db-alert"
+          :title="t('user.reset_database_disabled_prod')"
+        />
+        <el-form inline size="small" class="settings-form reset-db-form">
+          <el-form-item :label="t('user.reset_database_confirm_label')">
+            <el-input
+              v-model="resetConfirmPhrase"
+              :placeholder="t('user.reset_database_confirm_ph')"
+              style="width: 160px"
+              :disabled="!resetAllowed"
+              autocomplete="off"
+            />
+          </el-form-item>
+          <el-form-item>
+            <el-button
+              type="danger"
+              plain
+              :loading="resetLoading"
+              :disabled="!resetAllowed || resetConfirmPhrase !== 'RESET'"
+              @click="resetDatabase"
+            >
+              {{ t('user.reset_database_btn') }}
+            </el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.global-settings-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.global-settings-page :deep(.admin-subnav) {
+  margin-bottom: 10px;
+}
+
+.global-settings-panel {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  padding: 12px 14px 16px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-card);
+}
+
+.list-settings-block + .list-settings-block {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border-soft);
+}
+
+.list-settings-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0 0 8px;
+}
+
+.list-settings-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0 0 10px;
+  line-height: 1.5;
+}
+
+.block-hint {
+  width: 100%;
+  margin-top: -4px;
+}
+
+.list-settings-block--danger {
+  border-top: 1px dashed var(--danger-border);
+}
+
+.reset-db-alert {
+  margin-bottom: 10px;
+}
+
+.limits-form {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+}
+</style>
--- a/apps/admin/src/views/matches/LeagueMatchesPage.vue
+++ b/apps/admin/src/views/matches/LeagueMatchesPage.vue
@@ -0,0 +1,254 @@
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useRoute } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import { resolveFormError } from '../../i18n/form-validation';
+import api from '../../api';
+import AdminSubNav from '../../components/AdminSubNav.vue';
+import CountryFlagSelect from '../../components/outright/CountryFlagSelect.vue';
+import LogoUrlField from '../../components/LogoUrlField.vue';
+import LeagueMatchesPanel from './LeagueMatchesPanel.vue';
+import { getBuiltinCountry } from '../../data/builtinCountries';
+import {
+  emptyMatchForm,
+  buildPlatformPayload,
+  fillBuiltinTeam,
+  clearBuiltinTeam,
+  type MatchCreateForm,
+} from '../match-form';
+
+defineOptions({ name: 'AdminLeagueMatches' });
+
+const route = useRoute();
+const { t } = useAdminLocale();
+
+const leagueId = computed(() => String(route.params.leagueId ?? ''));
+const filterStatus = computed(() => String(route.query.status ?? ''));
+const filterKeyword = computed(() => String(route.query.keyword ?? ''));
+const leagueTitle = computed(() => {
+  const title = String(route.query.title ?? '').trim();
+  return title || `#${leagueId.value}`;
+});
+
+const panelRef = ref<{ reload: () => void } | null>(null);
+const createVisible = ref(false);
+const createLoading = ref(false);
+const form = ref<MatchCreateForm>(emptyMatchForm());
+
+function openCreateFixture() {
+  form.value = emptyMatchForm();
+  form.value.leagueId = leagueId.value;
+  createVisible.value = true;
+}
+
+function onTeamCodeChange(side: 'home' | 'away', code: string) {
+  if (!code?.trim()) {
+    clearBuiltinTeam(form.value, side);
+    return;
+  }
+  const country = getBuiltinCountry(code);
+  if (country) fillBuiltinTeam(form.value, side, country);
+}
+
+async function submitCreate() {
+  let payload: ReturnType<typeof buildPlatformPayload>;
+  try {
+    payload = buildPlatformPayload(form.value);
+  } catch (e) {
+    ElMessage.warning(resolveFormError(e, t));
+    return;
+  }
+  createLoading.value = true;
+  try {
+    await api.post('/admin/matches', payload);
+    ElMessage.success(t('msg.match_created_draft'));
+    createVisible.value = false;
+    panelRef.value?.reload();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.create_failed'));
+  } finally {
+    createLoading.value = false;
+  }
+}
+
+watch(leagueId, () => {
+  form.value.leagueId = leagueId.value;
+}, { immediate: true });
+</script>
+
+<template>
+  <div class="admin-list-page league-matches-page">
+    <AdminSubNav
+      :title="leagueTitle"
+      :subtitle="t('match.league_fixtures_subtitle')"
+    >
+      <template #extra>
+        <el-button type="primary" @click="openCreateFixture">
+          {{ t('match.create_fixture_btn') }}
+        </el-button>
+      </template>
+    </AdminSubNav>
+
+    <section class="list-panel">
+      <LeagueMatchesPanel
+        ref="panelRef"
+        :league-id="leagueId"
+        :filter-status="filterStatus"
+        :keyword="filterKeyword"
+      />
+    </section>
+
+    <el-dialog
+      v-model="createVisible"
+      :title="t('match.dialog.create_fixture')"
+      width="860px"
+      destroy-on-close
+    >
+      <el-form label-width="96px">
+        <el-form-item :label="t('match.col.league')">
+          <span class="league-readonly">{{ leagueTitle }}</span>
+        </el-form-item>
+        <el-form-item :label="t('match.field.kickoff')" required>
+          <el-date-picker
+            v-model="form.startTime"
+            type="datetime"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            :placeholder="t('matchEditor.ph.kickoff')"
+            style="width: 100%"
+          />
+          <p class="field-hint schedule-timezone-hint">{{ t('match.timezone.platform_hint') }}</p>
+        </el-form-item>
+        <div class="teams-row">
+          <div class="team-col">
+            <div class="team-col-title">{{ t('match.field.home_team') }}</div>
+            <el-form-item :label="t('match.field.home_team')" required>
+              <CountryFlagSelect
+                v-model="form.homeTeamCode"
+                size="default"
+                class="team-country-select"
+                @update:model-value="onTeamCodeChange('home', $event)"
+              />
+            </el-form-item>
+            <el-form-item :label="t('match.field.home_en')" label-width="108px">
+              <el-input v-model="form.homeTeamEn" :placeholder="t('match.ph.home_en')" />
+            </el-form-item>
+            <el-form-item :label="t('match.field.home_zh')" label-width="108px">
+              <el-input v-model="form.homeTeamZh" :placeholder="t('match.ph.home_zh')" />
+            </el-form-item>
+            <el-form-item :label="t('match.field.home_ms')" label-width="108px">
+              <el-input v-model="form.homeTeamMs" :placeholder="t('match.ph.home_ms')" />
+            </el-form-item>
+            <el-form-item :label="t('matchEditor.field.home_logo')" label-width="108px">
+              <LogoUrlField v-model="form.homeTeamLogoUrl" :team-code="form.homeTeamCode" upload-category="teams" />
+            </el-form-item>
+          </div>
+          <div class="team-col">
+            <div class="team-col-title">{{ t('match.field.away_team') }}</div>
+            <el-form-item :label="t('match.field.away_team')" required>
+              <CountryFlagSelect
+                v-model="form.awayTeamCode"
+                size="default"
+                class="team-country-select"
+                @update:model-value="onTeamCodeChange('away', $event)"
+              />
+            </el-form-item>
+            <el-form-item :label="t('match.field.away_en')" label-width="108px">
+              <el-input v-model="form.awayTeamEn" :placeholder="t('match.ph.away_en')" />
+            </el-form-item>
+            <el-form-item :label="t('match.field.away_zh')" label-width="108px">
+              <el-input v-model="form.awayTeamZh" :placeholder="t('match.ph.away_zh')" />
+            </el-form-item>
+            <el-form-item :label="t('match.field.away_ms')" label-width="108px">
+              <el-input v-model="form.awayTeamMs" :placeholder="t('match.ph.away_ms')" />
+            </el-form-item>
+            <el-form-item :label="t('matchEditor.field.away_logo')" label-width="108px">
+              <LogoUrlField v-model="form.awayTeamLogoUrl" :team-code="form.awayTeamCode" upload-category="teams" />
+            </el-form-item>
+          </div>
+        </div>
+        <el-form-item :label="t('match.field.featured')">
+          <el-switch v-model="form.isHot" />
+        </el-form-item>
+        <p class="field-hint">{{ t('match.hint.create_draft') }}</p>
+      </el-form>
+      <template #footer>
+        <el-button @click="createVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" :loading="createLoading" @click="submitCreate">
+          {{ t('user.btn.create') }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.league-matches-page {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  height: 100%;
+  min-height: 0;
+}
+
+.league-matches-page .list-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.team-country-select {
+  width: 100%;
+}
+
+.teams-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 20px;
+}
+
+.team-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  padding: 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: 8px;
+  background: #fbfaf7;
+}
+
+.team-col-title {
+  font-size: 14px;
+  font-weight: 750;
+  color: var(--text);
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid var(--border-soft);
+}
+
+.field-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0;
+  line-height: 1.5;
+}
+
+.schedule-timezone-hint {
+  margin-top: 4px;
+}
+
+.league-readonly {
+  color: var(--success-text);
+  font-weight: 700;
+}
+
+@media (max-width: 760px) {
+  .teams-row {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+</style>
--- a/apps/admin/src/views/matches/LeagueMatchesPanel.vue
+++ b/apps/admin/src/views/matches/LeagueMatchesPanel.vue
@@ -1,21 +1,33 @@
 <script setup lang="ts">
-import { ref, watch, h } from 'vue';
+import { ref, watch, h, defineAsyncComponent } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
 import MatchArchiveDialog from '../../components/MatchArchiveDialog.vue';
-import { ensureLeagueExpanded } from '../../utils/matchesListState';
 import { formatAmount } from '../../utils/format-amount';
 import {
  formatPlatformMatchDateTime,
  platformPickerDateTimeToIso,
 } from '@thebet365/shared';
-const props = defineProps<{
-  leagueId: string;
-  filterStatus: string;
-  keyword: string;
-}>();
+
+const MatchEventEditor = defineAsyncComponent(
+  () => import('./MatchEventEditor.vue'),
+);
+const MatchMarketsPanel = defineAsyncComponent(
+  () => import('./MatchMarketsPanel.vue'),
+);
+const props = withDefaults(
+  defineProps<{
+    leagueId: string;
+    filterStatus?: string;
+    keyword?: string;
+  }>(),
+  {
+    filterStatus: '',
+    keyword: '',
+  },
+);

 const emit = defineEmits<{
  changed: [];
@@ -27,13 +39,15 @@ const router = useRouter();
 const archiveVisible = ref(false);
 const archiveMatchId = ref('');
 const archiveTitle = ref('');
+const manageDialogVisible = ref(false);
+const marketsDialogVisible = ref(false);
+const dialogMatchId = ref('');
+const dialogMatchTitle = ref('');
 const filterHasBets = ref(false);
 const orderBy = ref('default');
-
-function onFilterChange() {
-  matchPage.value = 1;
-  void load();
-}
+const localKeyword = ref('');
+const localStatus = ref('');
+const kickoffRange = ref<[string, string] | null>(null);

 const matches = ref<unknown[]>([]);
 const loading = ref(false);
@@ -42,18 +56,67 @@ const matchPageSize = ref(10);
 const matchTotal = ref(0);
 let loadTimer: ReturnType<typeof setTimeout> | null = null;

+watch(
+  () => props.keyword,
+  (value) => {
+    localKeyword.value = value ?? '';
+    scheduleLoad(true);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.filterStatus,
+  (value) => {
+    localStatus.value = value ?? '';
+    scheduleLoad(true);
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.leagueId,
+  () => scheduleLoad(true),
+  { immediate: true },
+);
+
+function onSearch() {
+  matchPage.value = 1;
+  void load();
+}
+
+function onFilterChange() {
+  matchPage.value = 1;
+  void load();
+}
+
+function resetFilters() {
+  localKeyword.value = '';
+  localStatus.value = '';
+  kickoffRange.value = null;
+  filterHasBets.value = false;
+  orderBy.value = 'default';
+  onFilterChange();
+}
+
 async function load() {
  loading.value = true;
  try {
    const { data } = await api.get(`/admin/leagues/${props.leagueId}/matches`, {
      params: {
-        status: props.filterStatus || undefined,
-        keyword: props.keyword.trim() || undefined,
+        status: localStatus.value || undefined,
+        keyword: localKeyword.value.trim() || undefined,
        locale: locale.value,
        page: matchPage.value,
        pageSize: matchPageSize.value,
        hasBets: filterHasBets.value ? 'true' : undefined,
        orderBy: orderBy.value !== 'default' ? orderBy.value : undefined,
+        startFrom: kickoffRange.value?.[0]
+          ? platformPickerDateTimeToIso(kickoffRange.value[0])
+          : undefined,
+        startTo: kickoffRange.value?.[1]
+          ? platformPickerDateTimeToIso(kickoffRange.value[1])
+          : undefined,
      },
    });
    const payload = data.data as {
@@ -75,6 +138,7 @@ async function load() {
 }

 function scheduleLoad(resetPage = false) {
+  if (!props.leagueId) return;
  if (resetPage) matchPage.value = 1;
  if (loadTimer) clearTimeout(loadTimer);
  loadTimer = setTimeout(() => {
@@ -83,12 +147,6 @@ function scheduleLoad(resetPage = false) {
  }, 200);
 }

-watch(
-  () => [props.leagueId, props.filterStatus, props.keyword] as const,
-  () => scheduleLoad(true),
-  { immediate: true },
-);
-
 function onMatchPageChange(page: number) {
  matchPage.value = page;
  void load();
@@ -146,23 +204,28 @@ async function close(id: string) {
  notifyParent();
 }

-function beforeLeaveList() {
-  ensureLeagueExpanded(props.leagueId);
+function openManage(id: string, title?: string) {
+  dialogMatchId.value = id;
+  dialogMatchTitle.value = title?.trim() || `#${id}`;
+  manageDialogVisible.value = true;
 }

-function openManage(id: string) {
-  beforeLeaveList();
-  router.push(`/matches/${id}/edit`);
+function openMarkets(id: string, title?: string) {
+  dialogMatchId.value = id;
+  dialogMatchTitle.value = title?.trim() || `#${id}`;
+  marketsDialogVisible.value = true;
 }

-function openMarkets(id: string) {
-  beforeLeaveList();
-  router.push(`/matches/${id}/markets`);
+function onManageSaved() {
+  manageDialogVisible.value = false;
+  notifyParent();
 }

 function settle(id: string) {
-  beforeLeaveList();
-  router.push(`/settlement/${id}`);
+  void router.push({
+    path: `/settlement/${id}`,
+    query: { returnTo: `/matches/leagues/${props.leagueId}` },
+  });
 }

 type TagType = '' | 'info' | 'success' | 'warning' | 'danger';
@@ -339,14 +402,68 @@ defineExpose({ reload: load });
 <template>
  <div class="league-matches-panel">
    <div class="nested-panel-toolbar">
-      <el-checkbox v-model="filterHasBets" size="default" @change="onFilterChange">
-        {{ t('match.filter.has_bets') }}
-      </el-checkbox>
-      <el-select v-model="orderBy" size="small" style="width: 140px;" @change="onFilterChange">
-        <el-option :label="t('match.sort.default')" value="default" />
-        <el-option :label="t('match.sort.bet_count')" value="betCount" />
-        <el-option :label="t('match.sort.total_stake')" value="totalStake" />
-      </el-select>
+      <div class="nested-panel-toolbar__filters">
+        <div class="nested-panel-toolbar__field">
+          <span class="nested-panel-toolbar__label">{{ t('common.keyword') }}</span>
+          <el-input
+            v-model="localKeyword"
+            :placeholder="t('match.filter.keyword_ph')"
+            clearable
+            size="small"
+            style="width: 168px"
+            @keyup.enter="onSearch"
+          />
+        </div>
+        <div class="nested-panel-toolbar__field">
+          <span class="nested-panel-toolbar__label">{{ t('common.status') }}</span>
+          <el-select
+            v-model="localStatus"
+            :placeholder="t('common.all')"
+            clearable
+            size="small"
+            style="width: 120px"
+            @change="onFilterChange"
+          >
+            <el-option :label="t('match.status.DRAFT')" value="DRAFT" />
+            <el-option :label="t('match.status.PUBLISHED')" value="PUBLISHED" />
+            <el-option :label="t('match.status.CLOSED')" value="CLOSED" />
+            <el-option :label="t('match.status.PENDING_SETTLEMENT')" value="PENDING_SETTLEMENT" />
+            <el-option :label="t('match.status.SETTLED')" value="SETTLED" />
+          </el-select>
+        </div>
+        <div class="nested-panel-toolbar__field nested-panel-toolbar__field--range">
+          <span class="nested-panel-toolbar__label">{{ t('match.field.kickoff') }}</span>
+          <el-date-picker
+            v-model="kickoffRange"
+            type="datetimerange"
+            value-format="YYYY-MM-DDTHH:mm:ss"
+            :start-placeholder="t('match.filter.kickoff_from')"
+            :end-placeholder="t('match.filter.kickoff_to')"
+            size="small"
+            clearable
+            style="width: 320px"
+            @change="onFilterChange"
+          />
+        </div>
+        <el-button type="primary" size="small" @click="onSearch">
+          {{ t('common.search') }}
+        </el-button>
+        <el-button size="small" @click="resetFilters">
+          {{ t('common.reset') }}
+        </el-button>
+      </div>
+      <div class="nested-panel-toolbar__extras">
+        <el-checkbox v-model="filterHasBets" size="default" @change="onFilterChange">
+          {{ t('match.filter.has_bets') }}
+        </el-checkbox>
+        <el-select v-model="orderBy" size="small" style="width: 148px;" @change="onFilterChange">
+          <el-option :label="t('match.sort.default')" value="default" />
+          <el-option :label="t('match.sort.kickoff_asc')" value="kickoffAsc" />
+          <el-option :label="t('match.sort.kickoff_desc')" value="kickoffDesc" />
+          <el-option :label="t('match.sort.bet_count')" value="betCount" />
+          <el-option :label="t('match.sort.total_stake')" value="totalStake" />
+        </el-select>
+      </div>
    </div>

    <el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
@@ -393,7 +510,7 @@ defineExpose({ reload: load });
                size="small"
                type="primary"
                :disabled="!canManage(row)"
-                @click="openManage(matchId(row))"
+                @click.stop="openManage(matchId(row), matchTitle(row))"
              >
                {{ t('matchEditor.manage_btn') }}
              </el-button>
@@ -403,7 +520,7 @@ defineExpose({ reload: load });
                plain
                class="action-btn--markets"
                :disabled="!canManage(row)"
-                @click="openMarkets(matchId(row))"
+                @click.stop="openMarkets(matchId(row), matchTitle(row))"
              >
                {{ t('match.btn.markets') }}
              </el-button>
@@ -482,6 +599,35 @@ defineExpose({ reload: load });
      :title="archiveTitle"
      @archived="onMatchArchived"
    />
+    <el-dialog
+      v-model="manageDialogVisible"
+      :title="`${t('matchEditor.title')} · ${dialogMatchTitle}`"
+      width="920px"
+      top="4vh"
+      destroy-on-close
+      append-to-body
+      class="match-manage-dialog"
+    >
+      <MatchEventEditor
+        v-if="manageDialogVisible && dialogMatchId"
+        :match-id-prop="dialogMatchId"
+        embedded
+        @saved="onManageSaved"
+      />
+    </el-dialog>
+    <el-dialog
+      v-model="marketsDialogVisible"
+      :title="`${t('matchEditor.section_markets')} · ${dialogMatchTitle}`"
+      width="min(1200px, 96vw)"
+      top="3vh"
+      destroy-on-close
+      append-to-body
+      class="match-markets-dialog"
+    >
+      <div v-if="marketsDialogVisible && dialogMatchId" class="match-markets-dialog__body">
+        <MatchMarketsPanel :match-id="dialogMatchId" />
+      </div>
+    </el-dialog>
  </div>
 </template>

@@ -496,15 +642,41 @@ defineExpose({ reload: load });
 }
 .nested-panel-toolbar {
  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 16px;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px 16px;
  margin-bottom: 10px;
-  padding: 6px 12px;
+  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--border-soft, #eaeaea);
  border-radius: 6px;
 }
+
+.nested-panel-toolbar__filters,
+.nested-panel-toolbar__extras {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+}
+
+.nested-panel-toolbar__field {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.nested-panel-toolbar__field--range {
+  min-width: 0;
+}
+
+.nested-panel-toolbar__label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-muted);
+  white-space: nowrap;
+}
 .nested-pager {
  display: flex;
  justify-content: flex-end;
@@ -646,4 +818,9 @@ defineExpose({ reload: load });
    justify-content: flex-start;
  }
 }
+
+.match-markets-dialog__body {
+  height: min(78vh, 900px);
+  overflow: hidden;
+}
 </style>
--- a/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
+++ b/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { useRouter } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
@@ -50,6 +50,7 @@ const emit = defineEmits<{

 const { t, locale } = useAdminLocale();
 const router = useRouter();
+const route = useRoute();

 const matchStatus = ref('');

@@ -226,7 +227,14 @@ function goSettle() {
    );
    return;
  }
-  void router.push(`/settlement/${matchId.value}`);
+  const title = String(route.query.title ?? '').trim();
+  void router.push({
+    path: `/settlement/${matchId.value}`,
+    query: {
+      returnTo: `/matches/outrights/leagues/${props.leagueId}`,
+      ...(title ? { title } : {}),
+    },
+  });
 }

 async function load() {
@@ -900,18 +908,20 @@ watch(
 .outright-odds-panel {
  display: flex;
  flex-direction: column;
-  padding: 12px 16px 16px;
-  border-bottom: 1px solid var(--border-soft);
+  flex: 1;
+  min-height: 0;
+  height: 100%;
+  padding: 10px 12px 12px;
  background: #fbfaf7;
 }
 .outright-odds-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
-  gap: 12px;
+  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
-  margin-bottom: 12px;
+  margin-bottom: 8px;
 }
 .outright-odds-panel__head-text {
  flex: 1;
@@ -986,7 +996,8 @@ watch(
 }

 .team-list-scroll {
-  max-height: min(440px, calc(100vh - 300px));
+  flex: 1;
+  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
@@ -1005,7 +1016,13 @@ watch(
 .team-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
+  gap: 6px;
+}
+
+@media (min-width: 1440px) {
+  .team-list {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
 }

 .team-row-wrap {
@@ -1027,7 +1044,7 @@ watch(
  gap: 8px;
  min-width: 0;
  flex: 1;
-  padding: 8px 10px 8px 8px;
+  padding: 6px 8px 6px 6px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
--- a/apps/admin/src/views/matches/LeagueOutrightsPage.vue
+++ b/apps/admin/src/views/matches/LeagueOutrightsPage.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import AdminSubNav from '../../components/AdminSubNav.vue';
+import LeagueOutrightOddsPanel from './LeagueOutrightOddsPanel.vue';
+
+defineOptions({ name: 'AdminLeagueOutrights' });
+
+const route = useRoute();
+const { t } = useAdminLocale();
+
+const leagueId = computed(() => String(route.params.leagueId ?? ''));
+const leagueTitle = computed(() => {
+  const title = String(route.query.title ?? '').trim();
+  return title || `#${leagueId.value}`;
+});
+</script>
+
+<template>
+  <div class="admin-list-page league-outrights-page">
+    <AdminSubNav
+      :title="leagueTitle"
+      :subtitle="t('match.league_outrights_subtitle')"
+    />
+
+    <section class="list-panel">
+      <LeagueOutrightOddsPanel :league-id="leagueId" />
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.league-outrights-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.league-outrights-page :deep(.admin-subnav) {
+  margin-bottom: 10px;
+}
+
+.league-outrights-page .list-panel {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 0;
+}
+</style>
--- a/apps/admin/src/views/matches/MatchEventEditor.vue
+++ b/apps/admin/src/views/matches/MatchEventEditor.vue
@@ -16,11 +16,23 @@ import {
 } from '../match-form';
 import AdminSubNav from '../../components/AdminSubNav.vue';

+const props = withDefaults(
+  defineProps<{
+    matchIdProp?: string;
+    embedded?: boolean;
+  }>(),
+  { embedded: false },
+);
+
+const emit = defineEmits<{
+  saved: [];
+}>();
+
 const route = useRoute();
 const router = useRouter();
 const { t } = useAdminLocale();

-const matchId = computed(() => String(route.params.matchId ?? ''));
+const matchId = computed(() => props.matchIdProp ?? String(route.params.matchId ?? ''));
 const loading = ref(false);
 const savingMeta = ref(false);
 const status = ref('DRAFT');
@@ -52,7 +64,7 @@ async function load() {
    const detail = data.data as AdminMatchDetail;
    if (detail.isOutright) {
      ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/matches');
+      if (!props.embedded) router.replace('/matches');
      return;
    }
    status.value = detail.status;
@@ -81,7 +93,8 @@ async function saveMeta() {
  try {
    await api.put(`/admin/matches/${matchId.value}`, payload);
    ElMessage.success(t('msg.saved'));
-    await load();
+    emit('saved');
+    if (!props.embedded) await load();
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
@@ -92,8 +105,13 @@ async function saveMeta() {
 </script>

 <template>
-  <div v-loading="loading" class="match-editor-page page-scroll">
+  <div
+    v-loading="loading"
+    class="match-editor-page"
+    :class="{ 'match-editor-page--embedded': embedded, 'page-scroll': !embedded }"
+  >
    <AdminSubNav
+      v-if="!embedded"
      :title="t('matchEditor.title')"
      :subtitle="`#${matchId}`"
    >
@@ -257,6 +275,12 @@ async function saveMeta() {
  color: var(--text);
 }

+.match-editor-page--embedded {
+  padding-bottom: 0;
+  max-height: min(78vh, 880px);
+  overflow-y: auto;
+}
+
 .panel {
  background: #ffffff;
  border: 1px solid var(--border);
--- a/apps/admin/src/views/outrights/OutrightEditRedirect.vue
+++ b/apps/admin/src/views/outrights/OutrightEditRedirect.vue
@@ -15,9 +15,13 @@ onMounted(async () => {
  try {
    const { data } = await api.get(`/admin/outrights/${matchId}`);
    const leagueId = data.data?.leagueId as string | undefined;
+    if (leagueId) {
+      await router.replace(`/matches/outrights/leagues/${leagueId}`);
+      return;
+    }
    await router.replace({
      path: '/matches/outrights',
-      query: leagueId ? { leagueId } : { matchId },
+      query: { matchId },
    });
  } catch {
    await router.replace('/matches/outrights');
--- a/apps/api/src/applications/admin/admin.controller.ts
+++ b/apps/api/src/applications/admin/admin.controller.ts
@@ -15,10 +15,12 @@ import {
 import { FileInterceptor } from '@nestjs/platform-express';
 import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
 import { randomUUID } from 'crypto';
-import { mkdir, writeFile, unlink } from 'fs/promises';
+import { mkdir, writeFile, unlink, readdir, stat } from 'fs/promises';
+import { existsSync } from 'fs';
 import { extname, join } from 'path';
 import { JwtAuthGuard, AdminGuard, PermissionsGuard } from '../../domains/identity/guards';
 import { ContentService } from '../../domains/operations/content/content.service';
+import { DepositScreenshotCleanupService } from '../../domains/deposit/deposit-screenshot-cleanup.service';
 import { CurrentUser, RequirePermissions } from '../../shared/common/decorators';
 import { jsonResponse } from '../../shared/common/filters';
 import { appBadRequest, appForbidden } from '../../shared/common/app-error';
@@ -1109,6 +1111,17 @@ class InboxNotifySettingsDto {
  deposit?: boolean;
 }

+class UpdateDepositCleanupConfigDto {
+  @IsOptional()
+  @IsBoolean()
+  enabled?: boolean;
+
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  keepDays?: number;
+}
+
 class CashbackPreviewDto {
  @IsString()
  periodStart!: string;
@@ -1236,6 +1249,7 @@ export class AdminController {
    private playerMessages: PlayerMessagesService,
    private staff: AdminStaffService,
    private presence: PresenceService,
+    private depositCleanup: DepositScreenshotCleanupService,
  ) {}

  @Get('presence/online-count')
@@ -1997,6 +2011,8 @@ export class AdminController {
    @Query('pageSize') pageSize?: string,
    @Query('hasBets') hasBets?: string,
    @Query('orderBy') orderBy?: string,
+    @Query('startFrom') startFrom?: string,
+    @Query('startTo') startTo?: string,
  ) {
    const result = await this.matches.listAdminLeagueMatches(BigInt(leagueId), {
      status: status || undefined,
@@ -2006,6 +2022,8 @@ export class AdminController {
      pageSize: pageSize ? Math.min(100, Math.max(1, parseInt(pageSize, 10) || 20)) : 20,
      hasBets: hasBets || undefined,
      orderBy: orderBy || undefined,
+      startFrom: startFrom ? new Date(startFrom) : undefined,
+      startTo: startTo ? new Date(startTo) : undefined,
    });
    return jsonResponse(result);
  }
@@ -2843,6 +2861,29 @@ export class AdminController {
    return jsonResponse(preview);
  }

+  @Get('matches/:id/settlement/preview')
+  @RequirePermissions(P.settlement, P.reports)
+  async getActiveSettlementPreview(
+    @Param('id') id: string,
+    @Query('page') page?: string,
+    @Query('pageSize') pageSize?: string,
+  ) {
+    const matchId = BigInt(id);
+    const preview = await this.settlement.getActivePreview(matchId, {
+      page: page ? Math.max(1, parseInt(page, 10) || 1) : 1,
+      pageSize: pageSize ? Math.min(100, Math.max(1, parseInt(pageSize, 10) || 10)) : 10,
+    });
+    return jsonResponse(preview);
+  }
+
+  @Get('matches/:id/settlement/history')
+  @RequirePermissions(P.settlement, P.reports)
+  async getMatchSettlementHistory(@Param('id') id: string) {
+    const matchId = BigInt(id);
+    const history = await this.settlement.getMatchSettlementHistory(matchId);
+    return jsonResponse(history);
+  }
+
  @Get('settlement/:batchId/preview-items')
  @RequirePermissions(P.settlement)
  async getSettlementPreviewItems(
@@ -3158,6 +3199,103 @@ export class AdminController {
    return urls;
  }

+  @Get('files/storage-stats')
+  @RequirePermissions(P.content)
+  async getStorageStats() {
+    const statsGroup = await this.prisma.uploadedFile.groupBy({
+      by: ['category'],
+      _count: { _all: true },
+      _sum: { size: true }
+    });
+
+    const categories = statsGroup.map((g) => ({
+      category: g.category,
+      count: g._count._all,
+      sizeBytes: g._sum.size ?? 0,
+    }));
+
+    // Calculate deposits on disk
+    let depositCount = 0;
+    let depositSizeBytes = 0;
+    const depositsDir = join(getUploadRoot(), 'deposits');
+    try {
+      const files = await readdir(depositsDir);
+      for (const file of files) {
+        const filePath = join(depositsDir, file);
+        try {
+          const fileStats = await stat(filePath);
+          if (fileStats.isFile()) {
+            depositCount++;
+            depositSizeBytes += fileStats.size;
+          }
+        } catch {}
+      }
+    } catch {}
+
+    categories.push({
+      category: 'deposits',
+      count: depositCount,
+      sizeBytes: depositSizeBytes,
+    });
+
+    const totalCount = categories.reduce((sum, c) => sum + c.count, 0);
+    const totalSizeBytes = categories.reduce((sum, c) => sum + c.sizeBytes, 0);
+
+    return jsonResponse({
+      categories,
+      total: {
+        count: totalCount,
+        sizeBytes: totalSizeBytes,
+      },
+    });
+  }
+
+  @Get('deposits/screenshot-cleanup-config')
+  @RequirePermissions(P.content)
+  async getScreenshotCleanupConfig() {
+    const config = await this.systemConfig.getDepositScreenshotCleanupConfig();
+    return jsonResponse(config);
+  }
+
+  @Put('deposits/screenshot-cleanup-config')
+  @RequirePermissions(P.content)
+  async updateScreenshotCleanupConfig(@Body() body: UpdateDepositCleanupConfigDto) {
+    const config = await this.systemConfig.updateDepositScreenshotCleanupConfig(body);
+    return jsonResponse(config);
+  }
+
+  @Delete('deposits/screenshots')
+  @RequirePermissions(P.content)
+  async cleanOldScreenshots(
+    @CurrentUser('id') operatorId: bigint,
+    @Query('before') beforeStr?: string,
+  ) {
+    if (!beforeStr) throw appBadRequest('BEFORE_DATE_REQUIRED');
+    const beforeDate = new Date(beforeStr);
+    if (Number.isNaN(beforeDate.getTime())) {
+      throw appBadRequest('INVALID_BEFORE_DATE');
+    }
+    if (beforeDate.getTime() > Date.now()) {
+      throw appBadRequest('BEFORE_DATE_CANNOT_BE_FUTURE');
+    }
+
+    const result = await this.depositCleanup.cleanOldDepositScreenshots(beforeDate);
+
+    await this.audit.log({
+      operatorId,
+      operatorType: 'ADMIN',
+      action: 'PURGE_DEPOSIT_SCREENSHOTS',
+      module: 'MEDIA',
+      afterData: JSON.stringify({
+        before: beforeDate.toISOString(),
+        cleanedCount: result.cleaned,
+        freedBytes: result.freedBytes,
+      }),
+    });
+
+    return jsonResponse(result);
+  }
+
  @Get('contents/inbox-notify-settings')
  @RequirePermissions(P.content, P.reports)
  async getInboxNotifySettings() {
--- a/apps/api/src/domains/catalog/matches.service.ts
+++ b/apps/api/src/domains/catalog/matches.service.ts
@@ -558,6 +558,8 @@ export class MatchesService {
      pageSize?: number;
      hasBets?: string;
      orderBy?: string;
+      startFrom?: Date;
+      startTo?: Date;
    },
  ) {
    const where: Prisma.MatchWhereInput = {
@@ -566,6 +568,11 @@ export class MatchesService {
      isOutright: false,
    };
    if (opts.status) where.status = opts.status;
+    if (opts.startFrom || opts.startTo) {
+      where.startTime = {};
+      if (opts.startFrom) where.startTime.gte = opts.startFrom;
+      if (opts.startTo) where.startTime.lte = opts.startTo;
+    }
    const kw = opts.keyword?.trim();
    if (kw) {
      where.OR = [
@@ -626,6 +633,10 @@ export class MatchesService {
          const stakeB = parseFloat(b.totalStake);
          return stakeB - stakeA;
        });
+      } else if (opts.orderBy === 'kickoffAsc') {
+        filteredItems.sort((a, b) => new Date(a.startTime).getTime() - new Date(b.startTime).getTime());
+      } else if (opts.orderBy === 'kickoffDesc') {
+        filteredItems.sort((a, b) => new Date(b.startTime).getTime() - new Date(a.startTime).getTime());
      } else {
        filteredItems.sort((a, b) => {
          if (a.displayOrder !== b.displayOrder) {
@@ -640,12 +651,19 @@ export class MatchesService {
      return { items: paginatedItems, total, page, pageSize };
    }

+    const orderBy =
+      opts.orderBy === 'kickoffAsc'
+        ? [{ startTime: 'asc' as const }, { displayOrder: 'asc' as const }]
+        : opts.orderBy === 'kickoffDesc'
+          ? [{ startTime: 'desc' as const }, { displayOrder: 'asc' as const }]
+          : [{ displayOrder: 'asc' as const }, { startTime: 'desc' as const }];
+
    const [total, rows] = await Promise.all([
      this.prisma.match.count({ where }),
      this.prisma.match.findMany({
        where,
        include: { homeTeam: true, awayTeam: true },
-        orderBy: [{ displayOrder: 'asc' }, { startTime: 'desc' }],
+        orderBy,
        skip: (page - 1) * pageSize,
        take: pageSize,
      }),
@@ -865,9 +883,32 @@ export class MatchesService {

  async getAdminMatchDetail(matchId: bigint) {
    const match = await this.requireAdminMatch(matchId);
-    const scoreRow = await this.prisma.matchScore.findUnique({
+    let scoreRow = await this.prisma.matchScore.findUnique({
      where: { matchId },
    });
+    if (!scoreRow) {
+      const previewBatch = await this.prisma.settlementBatch.findFirst({
+        where: { matchId, status: 'PREVIEW' },
+        orderBy: { createdAt: 'desc' },
+      });
+      if (previewBatch) {
+        scoreRow = {
+          htHomeScore: previewBatch.htHomeScore,
+          htAwayScore: previewBatch.htAwayScore,
+          ftHomeScore: previewBatch.ftHomeScore,
+          ftAwayScore: previewBatch.ftAwayScore,
+          homeCorners: previewBatch.homeCorners,
+          awayCorners: previewBatch.awayCorners,
+          homeYellowCards: previewBatch.homeYellowCards,
+          awayYellowCards: previewBatch.awayYellowCards,
+          homeRedCards: previewBatch.homeRedCards,
+          awayRedCards: previewBatch.awayRedCards,
+          homeCards: previewBatch.homeCards,
+          awayCards: previewBatch.awayCards,
+          winnerTeamId: null,
+        } as any;
+      }
+    }
    const markets = await this.prisma.market.findMany({
      where: { matchId },
      include: { selections: { orderBy: { sortOrder: 'asc' } } },
--- a/apps/api/src/domains/deposit/deposit-screenshot-cleanup.service.ts
+++ b/apps/api/src/domains/deposit/deposit-screenshot-cleanup.service.ts
@@ -0,0 +1,121 @@
+import { Injectable, OnModuleInit, Logger } from '@nestjs/common';
+import { Cron } from '@nestjs/schedule';
+import { PrismaService } from '../../shared/prisma/prisma.service';
+import { SystemConfigService } from '../../shared/config/system-config.service';
+import { getUploadRoot } from '../../shared/uploads/upload-paths';
+import { join, dirname } from 'path';
+import { existsSync } from 'fs';
+import { mkdir, stat, unlink, writeFile } from 'fs/promises';
+
+@Injectable()
+export class DepositScreenshotCleanupService implements OnModuleInit {
+  private readonly logger = new Logger(DepositScreenshotCleanupService.name);
+
+  constructor(
+    private prisma: PrismaService,
+    private systemConfigService: SystemConfigService,
+  ) {}
+
+  async onModuleInit() {
+    await this.ensureExpiredPlaceholderExists();
+  }
+
+  /**
+   * 确保已过期/已清理的截图占位图存在
+   */
+  async ensureExpiredPlaceholderExists() {
+    // 1x1 像素透明 PNG
+    const defaultExpiredPngBase64 = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
+    const root = getUploadRoot();
+    const expiredPath = join(root, 'defaults', 'expired.png');
+    try {
+      await mkdir(dirname(expiredPath), { recursive: true });
+      // 强制写入以确保生成最新的透明 1x1 占位图
+      await writeFile(expiredPath, Buffer.from(defaultExpiredPngBase64, 'base64'));
+      this.logger.log('Ensured expired screenshot default placeholder (transparent 1x1).');
+    } catch (err) {
+      this.logger.error('Failed to create default expired screenshot placeholder', err);
+    }
+  }
+
+  /**
+   * 每日凌晨3点定时执行清理
+   */
+  @Cron('0 0 3 * * *')
+  async handleScheduledCleanup() {
+    this.logger.log('Scheduled deposit screenshot cleanup job started');
+    try {
+      const config = await this.systemConfigService.getDepositScreenshotCleanupConfig();
+      if (!config.enabled) {
+        this.logger.log('Scheduled cleanup is disabled, skipping');
+        return;
+      }
+
+      const beforeDate = new Date();
+      beforeDate.setDate(beforeDate.getDate() - config.keepDays);
+      this.logger.log(`Cleaning deposit screenshots older than ${config.keepDays} days (before ${beforeDate.toISOString()})`);
+
+      const result = await this.cleanOldDepositScreenshots(beforeDate);
+      this.logger.log(`Scheduled cleanup completed. Cleaned: ${result.cleaned} screenshots, Freed: ${(result.freedBytes / 1024 / 1024).toFixed(2)} MB`);
+    } catch (err) {
+      this.logger.error('Scheduled cleanup failed', err);
+    }
+  }
+
+  /**
+   * 清理指定日期之前的已处理充值订单截图
+   */
+  async cleanOldDepositScreenshots(before: Date): Promise<{ cleaned: number; freedBytes: number }> {
+    const orders = await this.prisma.depositOrder.findMany({
+      where: {
+        createdAt: { lt: before },
+        status: { in: ['APPROVED', 'REJECTED'] },
+        screenshotUrl: {
+          startsWith: '/uploads/',
+          not: { startsWith: '/uploads/defaults/' },
+        },
+      },
+      select: {
+        id: true,
+        screenshotUrl: true,
+      },
+    });
+
+    let cleaned = 0;
+    let freedBytes = 0;
+    const batchSize = 100;
+    const root = getUploadRoot();
+
+    for (let i = 0; i < orders.length; i += batchSize) {
+      const chunk = orders.slice(i, i + batchSize);
+      await Promise.all(
+        chunk.map(async (order) => {
+          const url = order.screenshotUrl;
+          if (!url.startsWith('/uploads/')) return;
+          const relative = url.slice('/uploads/'.length);
+          // 安全路径校验，防止目录穿越
+          if (!relative || relative.includes('..') || relative.includes('\\')) return;
+          const filePath = join(root, relative);
+
+          let size = 0;
+          try {
+            const fileStats = await stat(filePath);
+            size = fileStats.size;
+            await unlink(filePath);
+            freedBytes += size;
+          } catch {
+            // 文件不存在或已被删除，静默跳过，但依然更新数据库
+          }
+
+          await this.prisma.depositOrder.update({
+            where: { id: order.id },
+            data: { screenshotUrl: '/uploads/defaults/expired.png' },
+          });
+          cleaned++;
+        })
+      );
+    }
+
+    return { cleaned, freedBytes };
+  }
+}
--- a/apps/api/src/domains/deposit/deposit.module.ts
+++ b/apps/api/src/domains/deposit/deposit.module.ts
@@ -1,5 +1,6 @@
 import { Module } from '@nestjs/common';
 import { DepositService } from './deposit.service';
+import { DepositScreenshotCleanupService } from './deposit-screenshot-cleanup.service';
 import { WalletModule } from '../ledger/wallet.module';
 import { AgentsModule } from '../agent/agents.module';
 import { PlayerMessagesModule } from '../player-messages/player-messages.module';
@@ -7,7 +8,7 @@ import { SystemConfigModule } from '../../shared/config/system-config.module';

@Module({
  imports: [WalletModule, AgentsModule, PlayerMessagesModule, SystemConfigModule],
-  providers: [DepositService],
-  exports: [DepositService],
+  providers: [DepositService, DepositScreenshotCleanupService],
+  exports: [DepositService, DepositScreenshotCleanupService],
 })
 export class DepositModule {}
--- a/apps/api/src/domains/settlement/settlement.service.ts
+++ b/apps/api/src/domains/settlement/settlement.service.ts
@@ -388,6 +388,83 @@ export class SettlementService {
    };
  }

+  async getActivePreview(
+    matchId: bigint,
+    opts?: { page?: number; pageSize?: number },
+  ) {
+    const batch = await this.prisma.settlementBatch.findFirst({
+      where: { matchId, status: 'PREVIEW' },
+      orderBy: { createdAt: 'desc' },
+    });
+    if (!batch) return null;
+
+    const existingScore = await this.prisma.matchScore.findUnique({
+      where: { matchId },
+    });
+    const computation = await this.computePreviewComputation(matchId, {
+      htHome: batch.htHomeScore ?? 0,
+      htAway: batch.htAwayScore ?? 0,
+      ftHome: batch.ftHomeScore ?? 0,
+      ftAway: batch.ftAwayScore ?? 0,
+      homeCorners: batch.homeCorners ?? null,
+      awayCorners: batch.awayCorners ?? null,
+      homeYellowCards: batch.homeYellowCards ?? null,
+      awayYellowCards: batch.awayYellowCards ?? null,
+      homeRedCards: batch.homeRedCards ?? null,
+      awayRedCards: batch.awayRedCards ?? null,
+      homeCards: batch.homeCards ?? null,
+      awayCards: batch.awayCards ?? null,
+      winnerTeamId: existingScore?.winnerTeamId ?? null,
+    });
+
+    return this.buildPreviewResponse(computation, batch, opts);
+  }
+
+  async getMatchSettlementHistory(matchId: bigint) {
+    const batches = await this.prisma.settlementBatch.findMany({
+      where: { matchId, status: 'CONFIRMED' },
+      orderBy: { confirmedAt: 'desc' },
+    });
+
+    const operatorIds = batches
+      .map((b) => b.operatorId)
+      .filter((id): id is bigint => id !== null);
+
+    const operators =
+      operatorIds.length > 0
+        ? await this.prisma.user.findMany({
+            where: { id: { in: operatorIds } },
+            select: { id: true, username: true },
+          })
+        : [];
+
+    const operatorMap = new Map(operators.map((o) => [o.id.toString(), o.username]));
+
+    return batches.map((b) => ({
+      id: b.id.toString(),
+      batchNo: b.batchNo,
+      htHomeScore: b.htHomeScore,
+      htAwayScore: b.htAwayScore,
+      ftHomeScore: b.ftHomeScore,
+      ftAwayScore: b.ftAwayScore,
+      homeCorners: b.homeCorners,
+      awayCorners: b.awayCorners,
+      homeYellowCards: b.homeYellowCards,
+      awayYellowCards: b.awayYellowCards,
+      homeRedCards: b.homeRedCards,
+      awayRedCards: b.awayRedCards,
+      homeCards: b.homeCards,
+      awayCards: b.awayCards,
+      totalBets: b.totalBets,
+      totalPayout: b.totalPayout.toString(),
+      totalRefund: b.totalRefund.toString(),
+      confirmedAt: b.confirmedAt?.toISOString() ?? null,
+      isResettle: b.isResettle,
+      reason: b.reason,
+      operatorUsername: b.operatorId ? operatorMap.get(b.operatorId.toString()) ?? '—' : '—',
+    }));
+  }
+
  private buildPreviewResponse(
    computation: {
      scoreInput: ScoreInput;
--- a/apps/api/src/shared/config/system-config.service.ts
+++ b/apps/api/src/shared/config/system-config.service.ts
@@ -263,4 +263,31 @@ export class SystemConfigService {
    }
    return this.getInboxNotifySettings();
  }
+
+  async getDepositScreenshotCleanupConfig(): Promise<{ enabled: boolean; keepDays: number }> {
+    const enabled = await this.getBoolean('deposit.cleanup.enabled', false);
+    const keepDays = await this.getInt('deposit.cleanup.keep_days', 180);
+    return { enabled, keepDays };
+  }
+
+  async updateDepositScreenshotCleanupConfig(data: { enabled?: boolean; keepDays?: number }) {
+    if (data.enabled !== undefined) {
+      await this.setBoolean(
+        'deposit.cleanup.enabled',
+        data.enabled,
+        '是否开启定时清理充值截图',
+      );
+    }
+    if (data.keepDays !== undefined) {
+      if (!Number.isInteger(data.keepDays) || data.keepDays <= 0) {
+        throw new Error('keepDays must be a positive integer');
+      }
+      await this.setInt(
+        'deposit.cleanup.keep_days',
+        data.keepDays,
+        '充值截图保留天数',
+      );
+    }
+    return this.getDepositScreenshotCleanupConfig();
+  }
 }
--- a/apps/player/src/views/RechargeView.vue
+++ b/apps/player/src/views/RechargeView.vue
@@ -95,30 +95,44 @@ function selectMethod(m: PaymentMethod) {
 }

 const MAX_ORIGINAL_BYTES = 10 * 1024 * 1024;
-const MAX_SCREENSHOT_BYTES = 1024 * 1024;
+const MAX_SCREENSHOT_BYTES = 300 * 1024;

 async function compressScreenshot(file: File): Promise<File> {
  const baseOptions = {
-    maxSizeMB: 1,
-    maxWidthOrHeight: 1920,
+    maxSizeMB: 0.3,
+    maxWidthOrHeight: 1200,
    useWebWorker: true,
-    maxIteration: 15,
+    maxIteration: 10,
+    fileType: 'image/webp',
  } as const;

  const attempts = [
-    { ...baseOptions, initialQuality: 0.85 },
-    { ...baseOptions, initialQuality: 0.65, maxWidthOrHeight: 1600 },
-    { ...baseOptions, initialQuality: 0.5, maxWidthOrHeight: 1280 },
+    { ...baseOptions, initialQuality: 0.8 },
+    { ...baseOptions, initialQuality: 0.6, maxWidthOrHeight: 1000 },
  ];

+  let compressed: File | null = null;
  for (const options of attempts) {
-    const compressed = (await imageCompression(file, options)) as File;
-    if (compressed.size <= MAX_SCREENSHOT_BYTES) {
-      return compressed;
+    try {
+      compressed = (await imageCompression(file, options)) as File;
+      if (compressed.size <= MAX_SCREENSHOT_BYTES) {
+        break;
+      }
+    } catch (err) {
+      console.error('Compression attempt failed:', err);
    }
  }

-  throw new Error('COMPRESS_TOO_LARGE');
+  if (!compressed) {
+    throw new Error('COMPRESS_FAILED');
+  }
+
+  // 重命名文件后缀为 .webp
+  const name = file.name.replace(/\.[^/.]+$/, "") + '.webp';
+  return new File([compressed], name, {
+    type: 'image/webp',
+    lastModified: Date.now(),
+  });
 }

 async function handleFileChange(event: Event) {
--- a/packages/shared/src/api-errors.js
+++ b/packages/shared/src/api-errors.js
@@ -1007,6 +1007,21 @@ export const API_ERROR_MESSAGES = {
        'en-US': 'This country or region is not supported',
        'ms-MY': 'Negara atau wilayah ini tidak disokong',
    },
+    BEFORE_DATE_REQUIRED: {
+        'zh-CN': '截止日期不能为空',
+        'en-US': 'Before date is required',
+        'ms-MY': 'Tarikh akhir diperlukan',
+    },
+    INVALID_BEFORE_DATE: {
+        'zh-CN': '截止日期无效',
+        'en-US': 'Invalid before date',
+        'ms-MY': 'Tarikh akhir tidak sah',
+    },
+    BEFORE_DATE_CANNOT_BE_FUTURE: {
+        'zh-CN': '截止日期不能是未来日期',
+        'en-US': 'Before date cannot be in the future',
+        'ms-MY': 'Tarikh akhir tidak boleh pada masa hadapan',
+    },
 };
 export function normalizeLocale(input) {
    const raw = String(input ?? '').trim();
--- a/packages/shared/src/api-errors.ts
+++ b/packages/shared/src/api-errors.ts
@@ -1009,6 +1009,21 @@ export const API_ERROR_MESSAGES = {
    'en-US': 'This country or region is not supported',
    'ms-MY': 'Negara atau wilayah ini tidak disokong',
  },
+  BEFORE_DATE_REQUIRED: {
+    'zh-CN': '截止日期不能为空',
+    'en-US': 'Before date is required',
+    'ms-MY': 'Tarikh akhir diperlukan',
+  },
+  INVALID_BEFORE_DATE: {
+    'zh-CN': '截止日期无效',
+    'en-US': 'Invalid before date',
+    'ms-MY': 'Tarikh akhir tidak sah',
+  },
+  BEFORE_DATE_CANNOT_BE_FUTURE: {
+    'zh-CN': '截止日期不能是未来日期',
+    'en-US': 'Before date cannot be in the future',
+    'ms-MY': 'Tarikh akhir tidak boleh pada masa hadapan',
+  },
 } as const satisfies Record<string, Record<Locale, string>>;

 export type ApiErrorCode = keyof typeof API_ERROR_MESSAGES;