sync(theme-3): 同步 main 最新 API/Admin 与玩家端逻辑

从 main 同步站内信手动发送、媒体库选择、列表子路由重构等 API/Admin 改动；玩家端仅合并 ADMIN_CUSTOM 富文本、消息预览与充值截图压缩逻辑，保留 theme-3 样式。

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']

apps/admin/src/App.vue

@@ -65,6 +65,7 @@ body::-webkit-scrollbar {
   height: 100%;
   min-height: 0;
   overflow: hidden;
+  gap: 14px;
 }
 .admin-list-page > .page-toolbar,
 .admin-list-page > .filter-card,
@@ -78,16 +79,16 @@ body::-webkit-scrollbar {
   justify-content: flex-end;
   align-items: center;
   gap: 8px;
-  margin: 0 0 8px;
+  margin: 0;
 }
 .admin-list-page > .tool-card {
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 .admin-list-page > .filter-card {
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 .admin-list-page > .list-chrome {
-  margin-bottom: 8px;
+  margin-bottom: 0;
   display: flex;
   flex-direction: column;
   gap: 6px;
@@ -204,7 +205,7 @@ body::-webkit-scrollbar {
   margin-right: 0;
 }
 .admin-list-page > .list-settings {
-  margin-bottom: 8px;
+  margin-bottom: 0;
 }
 .list-settings :deep(.el-collapse-item__header) {
   height: 36px;
@@ -250,7 +251,16 @@ body::-webkit-scrollbar {
   min-height: 0;
   display: flex;
   flex-direction: column;
-  padding: 0 12px 12px;
+  padding: 12px;
+}
+
+/* data-card 内不再嵌套第二层卡片边框，避免双层顶边重合 */
+.admin-list-page > .data-card .table-wrap,
+.admin-list-page > .data-card .admin-table-wrap {
+  border: none;
+  border-radius: 0;
+  box-shadow: none;
+  background: transparent;
 }
 .admin-list-page .table-wrap {
   flex: 1;

apps/admin/src/components/ContentImageField.vue

@@ -3,6 +3,8 @@ import { ref } from 'vue';
 import { ElMessage } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
+import { fetchMediaLibraryImages } from '../utils/media-library';
+import { resolveApiError } from '../i18n/form-validation';
 
 const props = withDefaults(
   defineProps<{
@@ -23,7 +25,7 @@ const MAX_UPLOAD_SIZE = 5 * 1024 * 1024;
 
 const uploading = ref(false);
 const mediaPickerVisible = ref(false);
-const mediaFiles = ref<Array<{ id: string; filename: string; url: string; mimeType: string }>>([]);
+const mediaFiles = ref<Array<{ id: string; filename: string; url: string; mimeType: string; category?: string }>>([]);
 const mediaLoading = ref(false);
 
 async function uploadImage(file: File) {
@@ -67,12 +69,10 @@ async function openMediaPicker() {
   mediaPickerVisible.value = true;
   mediaLoading.value = true;
   try {
-    const res = await api.get('/admin/files', {
-      params: { category: props.category, pageSize: 200 },
-    });
-    mediaFiles.value = res.data.data.items ?? [];
-  } catch {
+    mediaFiles.value = await fetchMediaLibraryImages({ pageSize: 200 });
+  } catch (err: unknown) {
     mediaFiles.value = [];
+    ElMessage.error(resolveApiError(err, t, 'content.upload.load_media_failed'));
   } finally {
     mediaLoading.value = false;
   }
@@ -133,6 +133,7 @@ function pickMediaFile(url: string) {
     width="680px"
     destroy-on-close
     append-to-body
+    :z-index="4000"
   >
     <div v-if="mediaLoading" class="media-state">{{ t('common.loading') }}</div>
     <div v-else-if="mediaFiles.length === 0" class="media-state">{{ t('content.upload.no_media') }}</div>
@@ -148,6 +149,7 @@ function pickMediaFile(url: string) {
           <div v-else class="media-svg">SVG</div>
         </div>
         <div class="media-name" :title="file.filename">{{ file.filename }}</div>
+        <div v-if="file.category" class="media-category">{{ file.category }}</div>
       </div>
     </div>
   </el-dialog>
@@ -306,11 +308,18 @@ function pickMediaFile(url: string) {
 }
 
 .media-name {
-  padding: 6px 8px;
+  padding: 6px 8px 2px;
   font-size: 11px;
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.media-category {
+  padding: 0 8px 6px;
+  font-size: 10px;
+  color: var(--text-muted);
+  opacity: 0.85;
+}
 </style>

apps/admin/src/components/ContentRichEditor.vue

@@ -3,6 +3,8 @@ import { ref, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { ElMessage } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
+import { fetchMediaLibraryImages } from '../utils/media-library';
+import { resolveApiError } from '../i18n/form-validation';
 
 const props = withDefaults(
   defineProps<{
@@ -27,7 +29,7 @@ const editorRef = ref<HTMLDivElement | null>(null);
 const mediaPickerVisible = ref(false);
 /** blob/object URL -> File，保存时由父组件调用 uploadPendingImages 上传 */
 const pendingFiles = new Map<string, File>();
-const mediaFiles = ref<Array<{ id: string; filename: string; url: string; mimeType: string }>>([]);
+const mediaFiles = ref<Array<{ id: string; filename: string; url: string; mimeType: string; category?: string }>>([]);
 const mediaLoading = ref(false);
 const syncing = ref(false);
 let savedRange: Range | null = null;
@@ -241,12 +243,10 @@ async function openMediaPicker() {
   mediaPickerVisible.value = true;
   mediaLoading.value = true;
   try {
-    const res = await api.get('/admin/files', {
-      params: { category: props.uploadCategory, pageSize: 200 },
-    });
-    mediaFiles.value = res.data.data.items ?? [];
-  } catch {
+    mediaFiles.value = await fetchMediaLibraryImages({ pageSize: 200 });
+  } catch (err: unknown) {
     mediaFiles.value = [];
+    ElMessage.error(resolveApiError(err, t, 'content.upload.load_media_failed'));
   } finally {
     mediaLoading.value = false;
   }
@@ -352,6 +352,7 @@ onBeforeUnmount(() => {
     width="680px"
     destroy-on-close
     append-to-body
+    :z-index="4000"
   >
     <div v-if="mediaLoading" class="media-state">{{ t('common.loading') }}</div>
     <div v-else-if="mediaFiles.length === 0" class="media-state">{{ t('content.upload.no_media') }}</div>
@@ -367,6 +368,7 @@ onBeforeUnmount(() => {
           <div v-else class="media-svg">SVG</div>
         </div>
         <div class="media-name" :title="file.filename">{{ file.filename }}</div>
+        <div v-if="file.category" class="media-category">{{ file.category }}</div>
       </div>
     </div>
   </el-dialog>
@@ -521,11 +523,18 @@ onBeforeUnmount(() => {
 }
 
 .media-name {
-  padding: 6px 8px;
+  padding: 6px 8px 2px;
   font-size: 11px;
   color: var(--text-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.media-category {
+  padding: 0 8px 6px;
+  font-size: 10px;
+  color: var(--text-muted);
+  opacity: 0.85;
+}
 </style>

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>

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;

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');

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

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',
@@ -785,6 +820,28 @@ export const adminPagesMs: Record<string, string> = {
   'content.inbox_notify.manual_title': 'Tanda "Notifikasi peti mesej" semasa mencipta:',
   'content.inbox_notify.banner_note': 'Promosi laman utama',
   'content.inbox_notify.announcement_note': 'Notifikasi / ticker',
+  'content.inbox_broadcast.title': 'Hantar manual',
+  'content.inbox_broadcast.hint': 'Hantar mesej peti secara manual kepada pemain. Padam rekod juga membuang mesej di peti pemain.',
+  'content.inbox_broadcast.field_title': 'Tajuk',
+  'content.inbox_broadcast.field_body': 'Kandungan',
+  'content.inbox_broadcast.field_target': 'Penerima',
+  'content.inbox_broadcast.field_username': 'Nama pengguna pemain',
+  'content.inbox_broadcast.target_all': 'Semua pemain',
+  'content.inbox_broadcast.target_user': 'Pemain tertentu',
+  'content.inbox_broadcast.username_placeholder': 'Masukkan nama log masuk pemain',
+  'content.inbox_broadcast.send': 'Hantar',
+  'content.inbox_broadcast.send_success': 'Dihantar kepada {n} pemain',
+  'content.inbox_broadcast.form_invalid': 'Sila isi tajuk atau kandungan sekurang-kurangnya satu bahasa',
+  'content.inbox_broadcast.target_user_required': 'Nama pengguna pemain diperlukan',
+  'content.inbox_broadcast.history_title': 'Sejarah penghantaran',
+  'content.inbox_broadcast.view_title': 'Butiran penghantaran',
+  'content.inbox_broadcast.col_title': 'Tajuk',
+  'content.inbox_broadcast.col_target': 'Sasaran',
+  'content.inbox_broadcast.col_recipients': 'Bilangan',
+  'content.inbox_broadcast.col_sender': 'Penghantar',
+  'content.inbox_broadcast.col_time': 'Masa',
+  'content.inbox_broadcast.delete_confirm': 'Padam "{title}"? Salinan di peti pemain juga akan dibuang.',
+  'content.inbox_broadcast.locale_fallback_hint': 'Locale yang kosong akan guna susunan: bahasa pemain → Inggeris → Cina Ringkas → Melayu.',
   'content.hint.banner': 'Dipaparkan dalam karusel laman utama; ketik untuk halaman butiran. Muat naik imej muka depan dan kandungan kaya seperti pengumuman laman rasmi.',
   'content.hint.announcement': 'Dipaparkan sebagai teks bergulir di bahagian atas aplikasi pemain. Isi tajuk dan teks bergulir setiap bahasa — teks biasa sahaja.',
   'content.section.publish': 'Tetapan terbitan',
@@ -802,6 +859,7 @@ export const adminPagesMs: Record<string, string> = {
   'content.upload.cover_size_hint': 'Lebar disyorkan 860px+. Imej muka depan dan dalam kandungan akan menyesuaikan lebar pada pemain.',
   'content.upload.pick_media_title': 'Pilih imej',
   'content.upload.no_media': 'Tiada imej dalam pustaka — muat naik dahulu',
+  'content.upload.load_media_failed': 'Gagal memuat pustaka media',
   'content.status.DRAFT': 'Draf',
   'content.status.ACTIVE': 'Aktif',
   'content.status.INACTIVE': 'Tidak aktif',
@@ -993,6 +1051,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;

apps/admin/src/i18n/admin-pages.ts

@@ -888,6 +888,7 @@ export const adminPagesZh: Record<string, string> = {
   'content.upload.pick_media': '从媒体库选择',
   'content.upload.pick_media_title': '选择图片',
   'content.upload.no_media': '媒体库中暂无图片，请先上传',
+  'content.upload.load_media_failed': '加载媒体库失败',
   'content.upload.url_placeholder': '或手动粘贴图片 URL',
   'content.upload.recommended_size': '建议尺寸：860 x 360 px，或 43:18 同比例图片；前台会完整显示并自动填充不合比例区域。',
   'content.link.none': '无跳转',
@@ -1087,6 +1088,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> = {
@@ -1979,6 +1988,7 @@ export const adminPagesEn: Record<string, string> = {
   'content.upload.pick_media': 'Pick from library',
   'content.upload.pick_media_title': 'Select image',
   'content.upload.no_media': 'No images in library — upload one first',
+  'content.upload.load_media_failed': 'Failed to load media library',
   'content.upload.url_placeholder': 'Or paste image URL',
   'content.upload.recommended_size': 'Recommended size: 860 x 360 px, or any 43:18 image. The player carousel keeps the full image visible and fills extra space.',
   'content.link.none': 'No link',
@@ -2178,4 +2188,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.',
 };

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',
@@ -796,6 +829,7 @@ const adminPages: Record<string, string> = {
 
   'content.upload.pick_media_title': 'Select image',
   'content.upload.no_media': 'No images in library — upload one first',
+  'content.upload.load_media_failed': 'Failed to load media library',
   'content.btn.create': 'New content',
   'content.btn.enable': 'Enable',
   'content.btn.disable': 'Disable',
@@ -816,6 +850,28 @@ const adminPages: Record<string, string> = {
   'content.inbox_notify.manual_title': 'Check "Inbox notify" when creating:',
   'content.inbox_notify.banner_note': 'Homepage promo',
   'content.inbox_notify.announcement_note': 'Announcements / ticker',
+  'content.inbox_broadcast.title': 'Manual send',
+  'content.inbox_broadcast.hint': 'Manually send inbox messages to players. Deleting a record also removes the message from player inboxes.',
+  'content.inbox_broadcast.field_title': 'Title',
+  'content.inbox_broadcast.field_body': 'Body',
+  'content.inbox_broadcast.field_target': 'Recipients',
+  'content.inbox_broadcast.field_username': 'Player username',
+  'content.inbox_broadcast.target_all': 'All players',
+  'content.inbox_broadcast.target_user': 'Single player',
+  'content.inbox_broadcast.username_placeholder': 'Enter player login username',
+  'content.inbox_broadcast.send': 'Send',
+  'content.inbox_broadcast.send_success': 'Sent to {n} player(s)',
+  'content.inbox_broadcast.form_invalid': 'Provide a title or body in at least one language',
+  'content.inbox_broadcast.target_user_required': 'Player username is required',
+  'content.inbox_broadcast.history_title': 'Send history',
+  'content.inbox_broadcast.view_title': 'Send details',
+  'content.inbox_broadcast.col_title': 'Title',
+  'content.inbox_broadcast.col_target': 'Target',
+  'content.inbox_broadcast.col_recipients': 'Count',
+  'content.inbox_broadcast.col_sender': 'Sender',
+  'content.inbox_broadcast.col_time': 'Sent at',
+  'content.inbox_broadcast.delete_confirm': 'Delete "{title}"? Player inbox copies will be removed too.',
+  'content.inbox_broadcast.locale_fallback_hint': 'Missing locales fall back in order: player language → English → Simplified Chinese → Malay.',
   'content.hint.banner': 'Shown in the home carousel; tapping opens the detail page. Add a cover image and rich body like an official site announcement.',
   'content.hint.announcement': 'Shows as a scrolling marquee at the top of the player app. Enter title and marquee text per language — plain text only.',
   'content.section.publish': 'Publish settings',
@@ -1051,6 +1107,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;

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': '最小投注',
@@ -814,6 +847,28 @@ const adminPages: Record<string, string> = {
   'content.inbox_notify.manual_title': '以下类型在新建时勾选「邮箱通知」',
   'content.inbox_notify.banner_note': '首页推广',
   'content.inbox_notify.announcement_note': '通知公告 / 跑马灯',
+  'content.inbox_broadcast.title': '手动发送',
+  'content.inbox_broadcast.hint': '手动向玩家发送站内信；删除记录将同时撤回玩家端对应消息。',
+  'content.inbox_broadcast.field_title': '标题',
+  'content.inbox_broadcast.field_body': '正文',
+  'content.inbox_broadcast.field_target': '发送对象',
+  'content.inbox_broadcast.field_username': '玩家账号',
+  'content.inbox_broadcast.target_all': '全部玩家',
+  'content.inbox_broadcast.target_user': '指定玩家',
+  'content.inbox_broadcast.username_placeholder': '输入玩家登录账号',
+  'content.inbox_broadcast.send': '发送',
+  'content.inbox_broadcast.send_success': '已发送给 {n} 位玩家',
+  'content.inbox_broadcast.form_invalid': '请至少填写一种语言的标题或正文',
+  'content.inbox_broadcast.target_user_required': '请填写玩家账号',
+  'content.inbox_broadcast.history_title': '发送记录',
+  'content.inbox_broadcast.view_title': '发送详情',
+  'content.inbox_broadcast.col_title': '标题',
+  'content.inbox_broadcast.col_target': '对象',
+  'content.inbox_broadcast.col_recipients': '人数',
+  'content.inbox_broadcast.col_sender': '发送人',
+  'content.inbox_broadcast.col_time': '发送时间',
+  'content.inbox_broadcast.delete_confirm': '确定删除「{title}」？玩家端对应消息将一并删除。',
+  'content.inbox_broadcast.locale_fallback_hint': '未填写的语言将按玩家语言 → 英文 → 简体中文 → 马来语顺序回退使用已有内容。',
   'content.hint.banner': '用于首页轮播展示，点击后进入通知详情页；请填写封面图与正文，像官网发布活动通知一样编辑。',
   'content.hint.announcement': '在玩家端顶部显示滚动跑马灯文字；填写各语言标题与滚动文案即可，纯文本无富文本。',
   'content.section.publish': '发布设置',
@@ -831,6 +886,7 @@ const adminPages: Record<string, string> = {
   'content.upload.cover_size_hint': '建议宽度 860px 以上；玩家端详情页会完整显示封面，正文内图片也会自适应宽度。',
   'content.upload.pick_media_title': '选择图片',
   'content.upload.no_media': '媒体库中暂无图片，请先上传',
+  'content.upload.load_media_failed': '加载媒体库失败',
   'content.status.DRAFT': '草稿',
   'content.status.ACTIVE': '已启用',
   'content.status.INACTIVE': '已停用',
@@ -1058,6 +1114,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;

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>

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',

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') },
     ];
   }

apps/admin/src/utils/html.ts

@@ -10,3 +10,62 @@ export function stripHtml(html: string): string {
 export function isHtmlEmpty(html: string): boolean {
   return !stripHtml(html);
 }
+
+const ALLOWED_TAGS = new Set([
+  'p', 'br', 'strong', 'b', 'em', 'i', 'u', 'ul', 'ol', 'li',
+  'img', 'a', 'h2', 'h3', 'blockquote', 'div', 'span',
+]);
+
+function sanitizeNode(node: Node): Node | null {
+  if (node.nodeType === Node.TEXT_NODE) {
+    return node.cloneNode(false);
+  }
+  if (node.nodeType !== Node.ELEMENT_NODE) return null;
+
+  const el = node as HTMLElement;
+  const tag = el.tagName.toLowerCase();
+  if (!ALLOWED_TAGS.has(tag)) {
+    const frag = document.createDocumentFragment();
+    for (const child of Array.from(el.childNodes)) {
+      const safe = sanitizeNode(child);
+      if (safe) frag.appendChild(safe);
+    }
+    return frag;
+  }
+
+  const out = document.createElement(tag);
+  if (tag === 'img') {
+    const src = el.getAttribute('src')?.trim();
+    if (!src || /^javascript:/i.test(src)) return null;
+    out.setAttribute('src', src);
+    const alt = el.getAttribute('alt');
+    if (alt) out.setAttribute('alt', alt);
+    return out;
+  }
+  if (tag === 'a') {
+    const href = el.getAttribute('href')?.trim();
+    if (!href || /^javascript:/i.test(href)) return null;
+    out.setAttribute('href', href);
+    out.setAttribute('target', '_blank');
+    out.setAttribute('rel', 'noopener noreferrer');
+  }
+  for (const child of Array.from(el.childNodes)) {
+    const safe = sanitizeNode(child);
+    if (safe) out.appendChild(safe);
+  }
+  return out;
+}
+
+/** 富文本 HTML 白名单净化（公告/站内信预览） */
+export function sanitizeAnnouncementHtml(html: string): string {
+  if (!html?.trim()) return '';
+  if (!/[<>]/.test(html)) return html;
+
+  const doc = new DOMParser().parseFromString(html, 'text/html');
+  const container = document.createElement('div');
+  for (const child of Array.from(doc.body.childNodes)) {
+    const safe = sanitizeNode(child);
+    if (safe) container.appendChild(safe);
+  }
+  return container.innerHTML;
+}

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 });
-}

apps/admin/src/utils/media-library.ts

@@ -0,0 +1,25 @@
+import api from '../api';
+
+export type MediaLibraryItem = {
+  id: string;
+  filename: string;
+  url: string;
+  mimeType: string;
+  category?: string;
+};
+
+/** 媒体库图片（默认全部分类，供「从媒体库选择」使用） */
+export async function fetchMediaLibraryImages(opts?: {
+  category?: string;
+  pageSize?: number;
+}): Promise<MediaLibraryItem[]> {
+  const params: Record<string, string | number> = {
+    pageSize: opts?.pageSize ?? 200,
+    imagesOnly: '1',
+  };
+  if (opts?.category?.trim()) {
+    params.category = opts.category.trim();
+  }
+  const { data } = await api.get('/admin/files', { params });
+  return (data.data?.items ?? []) as MediaLibraryItem[];
+}

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;

apps/admin/src/views/Contents.vue

@@ -11,7 +11,7 @@ import api from '../api';
 import AdminTableEmpty from '../components/AdminTableEmpty.vue';
 import ContentImageField from '../components/ContentImageField.vue';
 import ContentRichEditor from '../components/ContentRichEditor.vue';
-import { stripHtml } from '../utils/html';
+import { stripHtml, sanitizeAnnouncementHtml, isHtmlEmpty } from '../utils/html';
 import {
   normalizeStartTimeForApi,
   normalizeStartTimeForPicker,
@@ -77,12 +77,65 @@ interface InboxNotifySettings {
   deposit: boolean;
 }
 
+interface MessageBroadcastItem {
+  id: string;
+  title: string;
+  body: string;
+  translations?: Record<string, { title: string; body: string }>;
+  targetType: 'ALL' | 'USER';
+  targetUserId: string | null;
+  targetUsername: string | null;
+  recipientCount: number;
+  createdById: string | null;
+  createdByUsername: string | null;
+  createdAt: string;
+}
+
+interface BroadcastTranslationForm {
+  locale: string;
+  title: string;
+  body: string;
+}
+
 const inboxNotifySettings = ref<InboxNotifySettings>({
   inboxEnabled: true,
   deposit: true,
 });
 const inboxNotifySaving = ref(false);
 
+const broadcastLoading = ref(false);
+const broadcastSending = ref(false);
+const broadcastDialogVisible = ref(false);
+const broadcastActiveLocale = ref<string>('zh-CN');
+const broadcastEditorRef = ref<InstanceType<typeof ContentRichEditor> | null>(null);
+const broadcastItems = ref<MessageBroadcastItem[]>([]);
+const broadcastTotal = ref(0);
+const broadcastPage = ref(1);
+const broadcastPageSize = ref(10);
+const broadcastDetailVisible = ref(false);
+const broadcastDetailRow = ref<MessageBroadcastItem | null>(null);
+const broadcastDetailLocale = ref<string>('zh-CN');
+
+function emptyBroadcastTranslations(): BroadcastTranslationForm[] {
+  return LOCALES.map((locale) => ({
+    locale,
+    title: '',
+    body: '',
+  }));
+}
+
+const broadcastForm = ref({
+  targetType: 'ALL' as 'ALL' | 'USER',
+  targetUsername: '',
+  translations: emptyBroadcastTranslations(),
+});
+
+const broadcastActiveTranslation = computed(
+  () =>
+    broadcastForm.value.translations.find((tr) => tr.locale === broadcastActiveLocale.value) ??
+    broadcastForm.value.translations[0],
+);
+
 const form = ref({
   sortOrder: 0,
   status: 'DRAFT' as ContentStatus,
@@ -194,6 +247,163 @@ async function saveInboxNotifySettings() {
   }
 }
 
+async function loadBroadcasts() {
+  broadcastLoading.value = true;
+  try {
+    const { data } = await api.get('/admin/player-message-broadcasts', {
+      params: { page: broadcastPage.value, pageSize: broadcastPageSize.value },
+    });
+    broadcastItems.value = data.data?.items ?? [];
+    broadcastTotal.value = data.data?.total ?? 0;
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
+  } finally {
+    broadcastLoading.value = false;
+  }
+}
+
+function resetBroadcastForm() {
+  broadcastForm.value = {
+    targetType: 'ALL',
+    targetUsername: '',
+    translations: emptyBroadcastTranslations(),
+  };
+  broadcastActiveLocale.value = 'zh-CN';
+}
+
+function hasBroadcastContent() {
+  return broadcastForm.value.translations.some(
+    (tr) => tr.title.trim() || tr.body.trim(),
+  );
+}
+
+function openBroadcastDialog() {
+  resetBroadcastForm();
+  broadcastDialogVisible.value = true;
+}
+
+function closeBroadcastDialog() {
+  if (broadcastSending.value) return;
+  broadcastDialogVisible.value = false;
+}
+
+async function sendBroadcast() {
+  if (!canManageContent.value) return;
+
+  const editor = broadcastEditorRef.value;
+  if (editor) {
+    broadcastActiveTranslation.value.body = editor.getHtml();
+    for (const tr of broadcastForm.value.translations) {
+      tr.body = await editor.uploadPendingImages(tr.body);
+    }
+  }
+
+  if (!hasBroadcastContent()) {
+    ElMessage.warning(t('content.inbox_broadcast.form_invalid'));
+    return;
+  }
+  if (broadcastForm.value.targetType === 'USER' && !broadcastForm.value.targetUsername.trim()) {
+    ElMessage.warning(t('content.inbox_broadcast.target_user_required'));
+    return;
+  }
+  broadcastSending.value = true;
+  try {
+    const { data } = await api.post('/admin/player-message-broadcasts', {
+      translations: broadcastForm.value.translations.map((tr) => ({
+        locale: tr.locale,
+        title: tr.title.trim() || undefined,
+        body: tr.body.trim() || undefined,
+      })),
+      targetType: broadcastForm.value.targetType,
+      targetUsername:
+        broadcastForm.value.targetType === 'USER'
+          ? broadcastForm.value.targetUsername.trim()
+          : undefined,
+    });
+    ElMessage.success(
+      t('content.inbox_broadcast.send_success', {
+        n: data.data?.recipientCount ?? 0,
+      }),
+    );
+    resetBroadcastForm();
+    broadcastPage.value = 1;
+    broadcastDialogVisible.value = false;
+    await loadBroadcasts();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    broadcastSending.value = false;
+  }
+}
+
+function broadcastTargetLabel(row: MessageBroadcastItem) {
+  if (row.targetType === 'ALL') return t('content.inbox_broadcast.target_all');
+  return row.targetUsername || `#${row.targetUserId ?? ''}`;
+}
+
+function formatBroadcastTime(value: string) {
+  if (!value) return '—';
+  return new Date(value).toLocaleString(localeTag.value);
+}
+
+function openBroadcastDetail(row: MessageBroadcastItem) {
+  broadcastDetailRow.value = row;
+  const tr = row.translations ?? {};
+  const firstWithContent =
+    LOCALES.find((locale) => {
+      const item = tr[locale];
+      return item && (item.title?.trim() || !isHtmlEmpty(item.body));
+    }) ?? 'zh-CN';
+  broadcastDetailLocale.value = firstWithContent;
+  broadcastDetailVisible.value = true;
+}
+
+function broadcastDetailTranslation(locale: string) {
+  const row = broadcastDetailRow.value;
+  if (!row) return { title: '', body: '' };
+  return row.translations?.[locale] ?? { title: '', body: '' };
+}
+
+async function deleteBroadcast(row: MessageBroadcastItem) {
+  if (!canManageContent.value) return;
+  try {
+    await ElMessageBox.confirm(
+      t('content.inbox_broadcast.delete_confirm', { title: row.title }),
+      t('common.confirm'),
+      { type: 'warning' },
+    );
+  } catch {
+    return;
+  }
+  broadcastLoading.value = true;
+  try {
+    await api.delete(`/admin/player-message-broadcasts/${row.id}`);
+    ElMessage.success(t('msg.saved'));
+    if (broadcastItems.value.length === 1 && broadcastPage.value > 1) {
+      broadcastPage.value -= 1;
+    }
+    await loadBroadcasts();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    broadcastLoading.value = false;
+  }
+}
+
+function onBroadcastPageChange(page: number) {
+  broadcastPage.value = page;
+  void loadBroadcasts();
+}
+
+function onBroadcastSizeChange(size: number) {
+  broadcastPageSize.value = size;
+  broadcastPage.value = 1;
+  void loadBroadcasts();
+}
+
 async function load() {
   loading.value = true;
   try {
@@ -234,13 +444,18 @@ watch([activeType, filterStatus], () => {
   tableRef.value?.clearSelection();
   if (activeType.value === 'INBOX_NOTIFY') {
     void loadInboxNotifySettings();
+    void loadBroadcasts();
     return;
   }
   void load();
 });
 
 onActivated(() => {
-  if (activeType.value === 'INBOX_NOTIFY') return;
+  if (activeType.value === 'INBOX_NOTIFY') {
+    void loadInboxNotifySettings();
+    if (broadcastItems.value.length > 0) void loadBroadcasts();
+    return;
+  }
   if (items.value.length > 0) void load();
 });
 
@@ -575,6 +790,18 @@ void load();
             <li>{{ t('content.inbox_notify.banner_note') }}</li>
             <li>{{ t('content.inbox_notify.announcement_note') }}</li>
           </ul>
+
+          <div v-if="inboxNotifySettings.inboxEnabled" class="inbox-toolbar">
+            <el-button
+              v-if="canManageContent"
+              type="primary"
+              size="small"
+              @click="openBroadcastDialog"
+            >
+              {{ t('content.inbox_broadcast.title') }}
+            </el-button>
+            <span class="inbox-toolbar-hint">{{ t('content.inbox_broadcast.hint') }}</span>
+          </div>
         </div>
       </template>
 
@@ -613,6 +840,79 @@ void load();
       </el-form>
     </el-card>
 
+    <el-card
+      v-if="isInboxNotifyTab && inboxNotifySettings.inboxEnabled"
+      v-loading="broadcastLoading"
+      class="data-card"
+      shadow="never"
+    >
+      <div class="table-wrap">
+        <el-table :data="broadcastItems" row-key="id" stripe size="small">
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
+          <el-table-column
+            type="index"
+            :index="(i: number) => (broadcastPage - 1) * broadcastPageSize + i + 1"
+            :label="t('common.seq')"
+            width="70"
+            align="center"
+          />
+          <el-table-column :label="t('content.inbox_broadcast.col_title')" min-width="160" prop="title" />
+          <el-table-column :label="t('content.inbox_broadcast.col_target')" width="140">
+            <template #default="{ row }">
+              {{ broadcastTargetLabel(row) }}
+            </template>
+          </el-table-column>
+          <el-table-column
+            :label="t('content.inbox_broadcast.col_recipients')"
+            width="90"
+            align="center"
+            prop="recipientCount"
+          />
+          <el-table-column :label="t('content.inbox_broadcast.col_sender')" width="120">
+            <template #default="{ row }">
+              {{ row.createdByUsername || '—' }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('content.inbox_broadcast.col_time')" width="170">
+            <template #default="{ row }">
+              {{ formatBroadcastTime(row.createdAt) }}
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('common.actions')" width="130" align="center" fixed="right">
+            <template #default="{ row }">
+              <el-button type="primary" link size="small" @click="openBroadcastDetail(row)">
+                {{ t('common.detail') }}
+              </el-button>
+              <el-button
+                v-if="canManageContent"
+                type="danger"
+                link
+                size="small"
+                @click="deleteBroadcast(row)"
+              >
+                {{ t('common.delete') }}
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div v-if="broadcastTotal > 0" class="pager-row">
+        <el-pagination
+          v-model:current-page="broadcastPage"
+          v-model:page-size="broadcastPageSize"
+          :total="broadcastTotal"
+          :page-sizes="[10, 20, 50]"
+          layout="total, sizes, prev, pager, next"
+          background
+          small
+          @current-change="onBroadcastPageChange"
+          @size-change="onBroadcastSizeChange"
+        />
+      </div>
+    </el-card>
+
     <el-card v-if="!isInboxNotifyTab" v-loading="loading" class="data-card" shadow="never">
       <div class="table-wrap">
         <el-table
@@ -966,6 +1266,140 @@ void load();
         </el-button>
       </template>
     </el-dialog>
+
+    <el-dialog
+      v-model="broadcastDetailVisible"
+      :title="t('content.inbox_broadcast.view_title')"
+      width="min(760px, 96vw)"
+      destroy-on-close
+      append-to-body
+      class="inbox-broadcast-detail-dialog"
+    >
+      <template v-if="broadcastDetailRow">
+        <dl class="broadcast-detail-meta">
+          <div class="meta-row">
+            <dt>{{ t('content.inbox_broadcast.col_target') }}</dt>
+            <dd>{{ broadcastTargetLabel(broadcastDetailRow) }}</dd>
+          </div>
+          <div class="meta-row">
+            <dt>{{ t('content.inbox_broadcast.col_recipients') }}</dt>
+            <dd>{{ broadcastDetailRow.recipientCount }}</dd>
+          </div>
+          <div class="meta-row">
+            <dt>{{ t('content.inbox_broadcast.col_sender') }}</dt>
+            <dd>{{ broadcastDetailRow.createdByUsername || '—' }}</dd>
+          </div>
+          <div class="meta-row">
+            <dt>{{ t('content.inbox_broadcast.col_time') }}</dt>
+            <dd>{{ formatBroadcastTime(broadcastDetailRow.createdAt) }}</dd>
+          </div>
+        </dl>
+
+        <el-tabs v-model="broadcastDetailLocale" class="locale-tabs">
+          <el-tab-pane
+            v-for="locale in LOCALES"
+            :key="locale"
+            :label="localeLabel(locale)"
+            :name="locale"
+          >
+            <div class="broadcast-detail-block">
+              <div class="broadcast-detail-label">{{ t('content.inbox_broadcast.field_title') }}</div>
+              <div class="broadcast-detail-title">
+                {{ broadcastDetailTranslation(locale).title || '—' }}
+              </div>
+            </div>
+            <div class="broadcast-detail-block">
+              <div class="broadcast-detail-label">{{ t('content.inbox_broadcast.field_body') }}</div>
+              <div
+                v-if="!isHtmlEmpty(broadcastDetailTranslation(locale).body)"
+                class="broadcast-detail-body rich-html"
+                v-html="sanitizeAnnouncementHtml(broadcastDetailTranslation(locale).body)"
+              />
+              <div v-else class="broadcast-detail-empty">—</div>
+            </div>
+          </el-tab-pane>
+        </el-tabs>
+      </template>
+      <template #footer>
+        <el-button @click="broadcastDetailVisible = false">{{ t('common.close') }}</el-button>
+      </template>
+    </el-dialog>
+
+    <el-dialog
+      v-model="broadcastDialogVisible"
+      :title="t('content.inbox_broadcast.title')"
+      width="min(920px, 96vw)"
+      destroy-on-close
+      :close-on-click-modal="!broadcastSending"
+      class="inbox-broadcast-dialog content-publish-dialog"
+      @close="closeBroadcastDialog"
+    >
+      <el-form label-position="top" class="inbox-broadcast-form" @submit.prevent>
+        <el-form-item :label="t('content.inbox_broadcast.field_target')">
+          <el-radio-group v-model="broadcastForm.targetType" :disabled="broadcastSending">
+            <el-radio value="ALL">{{ t('content.inbox_broadcast.target_all') }}</el-radio>
+            <el-radio value="USER">{{ t('content.inbox_broadcast.target_user') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          v-if="broadcastForm.targetType === 'USER'"
+          :label="t('content.inbox_broadcast.field_username')"
+        >
+          <el-input
+            v-model="broadcastForm.targetUsername"
+            :placeholder="t('content.inbox_broadcast.username_placeholder')"
+            :disabled="broadcastSending"
+          />
+        </el-form-item>
+
+        <section class="broadcast-content-section">
+          <div class="broadcast-content-head">
+            <h3 class="section-title">{{ t('content.section.content') }}</h3>
+            <p class="field-hint">{{ t('content.inbox_broadcast.locale_fallback_hint') }}</p>
+          </div>
+          <el-tabs v-model="broadcastActiveLocale" class="locale-tabs">
+            <el-tab-pane
+              v-for="tr in broadcastForm.translations"
+              :key="tr.locale"
+              :label="localeLabel(tr.locale)"
+              :name="tr.locale"
+            >
+              <el-form-item :label="t('content.inbox_broadcast.field_title')">
+                <el-input
+                  v-model="tr.title"
+                  maxlength="256"
+                  show-word-limit
+                  :placeholder="t('content.field.title_ph')"
+                  :disabled="broadcastSending"
+                />
+              </el-form-item>
+            </el-tab-pane>
+          </el-tabs>
+
+          <div class="broadcast-editor-head">
+            <span class="publish-body-label">{{ t('content.inbox_broadcast.field_body') }}</span>
+            <span class="locale-badge">{{ localeLabel(broadcastActiveLocale) }}</span>
+          </div>
+          <ContentRichEditor
+            ref="broadcastEditorRef"
+            v-model="broadcastActiveTranslation.body"
+            fill
+            upload-category="contents"
+            :placeholder="t('content.editor.placeholder')"
+            :disabled="broadcastSending"
+            class="broadcast-rich-editor"
+          />
+        </section>
+      </el-form>
+      <template #footer>
+        <el-button :disabled="broadcastSending" @click="closeBroadcastDialog">
+          {{ t('common.cancel') }}
+        </el-button>
+        <el-button type="primary" :loading="broadcastSending" @click="sendBroadcast">
+          {{ t('content.inbox_broadcast.send') }}
+        </el-button>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
@@ -1323,4 +1757,127 @@ void load();
 .inbox-notify-notes li {
   margin: 0;
 }
+
+.inbox-toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 4px;
+  padding-top: 12px;
+  border-top: 1px solid var(--border);
+}
+
+.inbox-toolbar-hint {
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.4;
+}
+
+.inbox-broadcast-form :deep(.el-form-item) {
+  margin-bottom: 14px;
+}
+
+.broadcast-content-section {
+  margin-top: 4px;
+}
+
+.broadcast-content-head {
+  margin-bottom: 8px;
+}
+
+.broadcast-content-head .section-title {
+  margin: 0 0 4px;
+}
+
+.broadcast-editor-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 12px 0 8px;
+}
+
+.broadcast-rich-editor {
+  min-height: 280px;
+}
+
+.inbox-broadcast-dialog :deep(.el-dialog__body) {
+  padding-top: 8px;
+}
+
+.broadcast-detail-meta {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px 16px;
+  margin: 0 0 16px;
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fbfaf7;
+}
+
+.meta-row {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.meta-row dt {
+  margin: 0;
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+.meta-row dd {
+  margin: 0;
+  font-size: 13px;
+  color: var(--text);
+  word-break: break-word;
+}
+
+.broadcast-detail-block + .broadcast-detail-block {
+  margin-top: 14px;
+}
+
+.broadcast-detail-label {
+  margin-bottom: 6px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+
+.broadcast-detail-title {
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.45;
+  word-break: break-word;
+}
+
+.broadcast-detail-body,
+.broadcast-detail-empty {
+  padding: 12px 14px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: #fff;
+  min-height: 80px;
+}
+
+.broadcast-detail-empty {
+  color: var(--text-muted);
+}
+
+.rich-html :deep(img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+.rich-html :deep(p) {
+  margin: 0 0 0.75em;
+}
+
+.rich-html :deep(p:last-child) {
+  margin-bottom: 0;
+}
 </style>

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 {

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>

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 {

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;

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;
 }

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>

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>

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>

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>

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;

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>

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);

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');

apps/api/prisma/migrations/20260622120000_player_message_broadcasts/migration.sql

@@ -0,0 +1,27 @@
+-- CreateTable
+CREATE TABLE "player_message_broadcasts" (
+    "id" BIGSERIAL NOT NULL,
+    "title" VARCHAR(256) NOT NULL,
+    "body" TEXT NOT NULL,
+    "target_type" VARCHAR(16) NOT NULL,
+    "target_user_id" BIGINT,
+    "target_username" VARCHAR(64),
+    "recipient_count" INTEGER NOT NULL DEFAULT 0,
+    "created_by_id" BIGINT,
+    "created_by_username" VARCHAR(64),
+    "created_at" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "player_message_broadcasts_pkey" PRIMARY KEY ("id")
+);
+
+-- AlterTable
+ALTER TABLE "player_messages" ADD COLUMN "broadcast_id" BIGINT;
+
+-- CreateIndex
+CREATE INDEX "player_message_broadcasts_created_at_idx" ON "player_message_broadcasts"("created_at" DESC);
+
+-- CreateIndex
+CREATE INDEX "player_messages_broadcast_id_idx" ON "player_messages"("broadcast_id");
+
+-- AddForeignKey
+ALTER TABLE "player_messages" ADD CONSTRAINT "player_messages_broadcast_id_fkey" FOREIGN KEY ("broadcast_id") REFERENCES "player_message_broadcasts"("id") ON DELETE CASCADE ON UPDATE CASCADE;

apps/api/prisma/migrations/20260622140000_player_message_broadcast_translations/migration.sql

@@ -0,0 +1,9 @@
+-- AlterTable
+ALTER TABLE "player_message_broadcasts" ADD COLUMN "translations" JSONB;
+
+-- Backfill existing rows as English content
+UPDATE "player_message_broadcasts"
+SET "translations" = jsonb_build_object(
+  'en-US', jsonb_build_object('title', "title", 'body', "body")
+)
+WHERE "translations" IS NULL;

apps/api/prisma/schema.prisma

@@ -816,22 +816,44 @@ model DepositOrderAuditLog {
 }
 
 model PlayerMessage {
-  id        BigInt    @id @default(autoincrement())
-  userId    BigInt    @map("user_id")
-  type      String    @db.VarChar(32)
-  title     String    @db.VarChar(256)
-  body      String    @db.Text
-  payload   Json?
-  readAt    DateTime? @map("read_at")
-  createdAt DateTime  @default(now()) @map("created_at")
+  id          BigInt    @id @default(autoincrement())
+  userId      BigInt    @map("user_id")
+  type        String    @db.VarChar(32)
+  title       String    @db.VarChar(256)
+  body        String    @db.Text
+  payload     Json?
+  broadcastId BigInt?   @map("broadcast_id")
+  readAt      DateTime? @map("read_at")
+  createdAt   DateTime  @default(now()) @map("created_at")
 
-  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  user      User                     @relation(fields: [userId], references: [id], onDelete: Cascade)
+  broadcast PlayerMessageBroadcast? @relation(fields: [broadcastId], references: [id], onDelete: Cascade)
 
   @@index([userId, createdAt(sort: Desc)])
   @@index([userId, readAt])
+  @@index([broadcastId])
   @@map("player_messages")
 }
 
+model PlayerMessageBroadcast {
+  id                BigInt   @id @default(autoincrement())
+  title             String   @db.VarChar(256)
+  body              String   @db.Text
+  translations      Json?    @map("translations")
+  targetType        String   @map("target_type") @db.VarChar(16)
+  targetUserId      BigInt?  @map("target_user_id")
+  targetUsername    String?  @map("target_username") @db.VarChar(64)
+  recipientCount    Int      @default(0) @map("recipient_count")
+  createdById       BigInt?  @map("created_by_id")
+  createdByUsername String?  @map("created_by_username") @db.VarChar(64)
+  createdAt         DateTime @default(now()) @map("created_at")
+
+  messages PlayerMessage[]
+
+  @@index([createdAt(sort: Desc)])
+  @@map("player_message_broadcasts")
+}
+
 // ============ System Config & Audit ============
 
 model SystemConfig {

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';
@@ -62,6 +64,7 @@ import {
   IsIn,
   Min,
   Max,
+  MaxLength,
   Equals,
   ValidateIf,
 } from 'class-validator';
@@ -1109,6 +1112,44 @@ class InboxNotifySettingsDto {
   deposit?: boolean;
 }
 
+class BroadcastTranslationDto {
+  @IsString()
+  locale!: string;
+
+  @IsOptional()
+  @IsString()
+  @MaxLength(256)
+  title?: string;
+
+  @IsOptional()
+  @IsString()
+  body?: string;
+}
+
+class CreatePlayerMessageBroadcastDto {
+  @IsArray()
+  translations!: BroadcastTranslationDto[];
+
+  @IsIn(['ALL', 'USER'])
+  targetType!: 'ALL' | 'USER';
+
+  @ValidateIf((dto: CreatePlayerMessageBroadcastDto) => dto.targetType === 'USER')
+  @IsString()
+  @MinLength(1)
+  targetUsername?: string;
+}
+
+class UpdateDepositCleanupConfigDto {
+  @IsOptional()
+  @IsBoolean()
+  enabled?: boolean;
+
+  @IsOptional()
+  @IsNumber()
+  @Min(1)
+  keepDays?: number;
+}
+
 class CashbackPreviewDto {
   @IsString()
   periodStart!: string;
@@ -1236,6 +1277,7 @@ export class AdminController {
     private playerMessages: PlayerMessagesService,
     private staff: AdminStaffService,
     private presence: PresenceService,
+    private depositCleanup: DepositScreenshotCleanupService,
   ) {}
 
   @Get('presence/online-count')
@@ -1997,6 +2039,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 +2050,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 +2889,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(
@@ -3061,8 +3130,24 @@ export class AdminController {
     @Query('category') category?: string,
     @Query('page') page?: string,
     @Query('pageSize') pageSize?: string,
+    @Query('imagesOnly') imagesOnly?: string,
   ) {
-    const where = category && UPLOAD_CATEGORIES.includes(category as any) ? { category } : {};
+    const where: {
+      category?: string | { in: string[] };
+      mimeType?: { startsWith: string };
+    } = {};
+
+    if (category && UPLOAD_CATEGORIES.includes(category as UploadCategory)) {
+      where.category = category;
+    } else if (imagesOnly === '1' || imagesOnly === 'true') {
+      // 媒体库选择器：默认可选 banners/teams/contents/payments，不含 deposits
+      where.category = { in: ['banners', 'teams', 'contents', 'payments'] };
+    }
+
+    if (imagesOnly === '1' || imagesOnly === 'true') {
+      where.mimeType = { startsWith: 'image/' };
+    }
+
     const take = Math.min(parseInt(pageSize ?? '50', 10) || 50, 200);
     const skip = (Math.max(parseInt(page ?? '1', 10) || 1, 1) - 1) * take;
 
@@ -3158,6 +3243,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() {
@@ -3172,6 +3354,68 @@ export class AdminController {
     return jsonResponse(settings);
   }
 
+  @Get('player-message-broadcasts')
+  @RequirePermissions(P.content, P.reports)
+  async listPlayerMessageBroadcasts(
+    @Query('page') page?: string,
+    @Query('pageSize') pageSize?: string,
+  ) {
+    const p = Math.max(1, page ? parseInt(page, 10) || 1 : 1);
+    const size = Math.min(Math.max(1, pageSize ? parseInt(pageSize, 10) : 20), 50);
+    const result = await this.playerMessages.listBroadcasts(p, size);
+    return jsonResponse(result);
+  }
+
+  @Post('player-message-broadcasts')
+  @RequirePermissions(P.content)
+  async createPlayerMessageBroadcast(
+    @CurrentUser('id') operatorId: bigint,
+    @Body() dto: CreatePlayerMessageBroadcastDto,
+  ) {
+    const operator = await this.prisma.user.findUnique({
+      where: { id: operatorId },
+      select: { username: true },
+    });
+    const item = await this.playerMessages.createCustomBroadcast({
+      translations: dto.translations,
+      targetType: dto.targetType,
+      targetUsername: dto.targetUsername,
+      createdById: operatorId,
+      createdByUsername: operator?.username ?? null,
+    });
+    await this.audit.log({
+      operatorId,
+      operatorType: 'ADMIN',
+      action: 'SEND_PLAYER_MESSAGE_BROADCAST',
+      module: 'CONTENT',
+      afterData: JSON.stringify({
+        id: item.id,
+        title: item.title,
+        targetType: item.targetType,
+        recipientCount: item.recipientCount,
+      }),
+    });
+    return jsonResponse(item);
+  }
+
+  @Delete('player-message-broadcasts/:id')
+  @RequirePermissions(P.content)
+  async deletePlayerMessageBroadcast(
+    @CurrentUser('id') operatorId: bigint,
+    @Param('id') id: string,
+  ) {
+    const result = await this.playerMessages.deleteBroadcast(BigInt(id));
+    await this.audit.log({
+      operatorId,
+      operatorType: 'ADMIN',
+      action: 'DELETE_PLAYER_MESSAGE_BROADCAST',
+      module: 'CONTENT',
+      targetId: id,
+      afterData: JSON.stringify(result),
+    });
+    return jsonResponse(result);
+  }
+
   @Get('contents')
   @RequirePermissions(P.content, P.reports)
   async listContents(

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' } } },

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 };
+  }
+}

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 {}

apps/api/src/domains/player-messages/player-messages.service.spec.ts

@@ -1,7 +1,8 @@
 import { PlayerMessagesService } from './player-messages.service';
 
 describe('PlayerMessagesService', () => {
-  const prisma = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const prisma: any = {
     playerMessage: {
       create: jest.fn(),
       findMany: jest.fn(),
@@ -13,10 +14,19 @@ describe('PlayerMessagesService', () => {
       deleteMany: jest.fn(),
       createMany: jest.fn(),
     },
+    playerMessageBroadcast: {
+      findMany: jest.fn(),
+      count: jest.fn(),
+      findUnique: jest.fn(),
+      create: jest.fn(),
+      delete: jest.fn(),
+    },
     user: {
       findUnique: jest.fn(),
       findMany: jest.fn(),
+      findFirst: jest.fn(),
     },
+    $transaction: jest.fn(async (fn: (tx: typeof prisma) => Promise<unknown>) => fn(prisma)),
   };
 
   let service: PlayerMessagesService;
@@ -162,4 +172,58 @@ describe('PlayerMessagesService', () => {
       ],
     });
   });
+
+  it('creates custom broadcast to all active players', async () => {
+    prisma.user.findMany.mockResolvedValue([
+      { id: 1n, username: 'p1', locale: 'zh-CN', preferences: { locale: 'zh-CN' } },
+      { id: 2n, username: 'p2', locale: 'en-US', preferences: null },
+    ]);
+    prisma.playerMessageBroadcast.create.mockResolvedValue({
+      id: 9n,
+      title: 'Hello',
+      body: '<p>World</p>',
+      translations: {
+        'en-US': { title: 'Hello', body: '<p>World</p>' },
+        'zh-CN': { title: '你好', body: '<p>内容</p>' },
+      },
+      targetType: 'ALL',
+      targetUserId: null,
+      targetUsername: null,
+      recipientCount: 2,
+      createdById: 99n,
+      createdByUsername: 'admin',
+      createdAt: new Date('2026-06-22T10:00:00.000Z'),
+    });
+
+    const result = await service.createCustomBroadcast({
+      translations: [
+        { locale: 'en-US', title: 'Hello', body: '<p>World</p>' },
+        { locale: 'zh-CN', title: '你好', body: '<p>内容</p>' },
+      ],
+      targetType: 'ALL',
+      createdById: 99n,
+      createdByUsername: 'admin',
+    });
+
+    expect(result.recipientCount).toBe(2);
+    expect(prisma.playerMessage.createMany).toHaveBeenCalledWith({
+      data: [
+        expect.objectContaining({ userId: 1n, type: 'ADMIN_CUSTOM', title: '你好', broadcastId: 9n }),
+        expect.objectContaining({ userId: 2n, type: 'ADMIN_CUSTOM', title: 'Hello', broadcastId: 9n }),
+      ],
+    });
+  });
+
+  it('deletes broadcast and cascades player messages', async () => {
+    prisma.playerMessageBroadcast.findUnique.mockResolvedValue({
+      id: 5n,
+      recipientCount: 3,
+    });
+    prisma.playerMessageBroadcast.delete.mockResolvedValue({ id: 5n });
+
+    const result = await service.deleteBroadcast(5n);
+
+    expect(result).toEqual({ deleted: true, recipientCount: 3 });
+    expect(prisma.playerMessageBroadcast.delete).toHaveBeenCalledWith({ where: { id: 5n } });
+  });
 });

apps/api/src/domains/player-messages/player-messages.service.ts

@@ -1,13 +1,14 @@
 import { Injectable } from '@nestjs/common';
 import { Prisma } from '@prisma/client';
 import { PrismaService } from '../../shared/prisma/prisma.service';
-import { appNotFound } from '../../shared/common/app-error';
+import { appBadRequest, appNotFound } from '../../shared/common/app-error';
 
 export type PlayerMessageType =
   | 'DEPOSIT_APPROVED'
   | 'DEPOSIT_REJECTED'
   | 'BANNER_PROMO'
-  | 'ANNOUNCEMENT_PROMO';
+  | 'ANNOUNCEMENT_PROMO'
+  | 'ADMIN_CUSTOM';
 
 export type DepositMessagePayload = {
   depositOrderId: string;
@@ -47,7 +48,7 @@ type MessageTemplate = {
 };
 
 const MESSAGE_TEMPLATES: Record<
-  Exclude<PlayerMessageType, 'BANNER_PROMO' | 'ANNOUNCEMENT_PROMO'>,
+  Exclude<PlayerMessageType, 'BANNER_PROMO' | 'ANNOUNCEMENT_PROMO' | 'ADMIN_CUSTOM'>,
   Record<string, MessageTemplate>
 > = {
   DEPOSIT_APPROVED: {
@@ -200,12 +201,122 @@ function mapMessageRow(row: {
   };
 }
 
+export type BroadcastTranslation = {
+  title: string;
+  body: string;
+};
+
+export type BroadcastTranslations = Record<string, BroadcastTranslation>;
+
+export type BroadcastTranslationInput = {
+  locale: string;
+  title?: string | null;
+  body?: string | null;
+};
+
+function normalizeBroadcastTranslations(
+  inputs: BroadcastTranslationInput[],
+): BroadcastTranslations {
+  const map: BroadcastTranslations = {};
+  for (const tr of inputs) {
+    const locale = resolveLocale(tr.locale);
+    map[locale] = {
+      title: tr.title?.trim() ?? '',
+      body: tr.body?.trim() ?? '',
+    };
+  }
+  return map;
+}
+
+function resolveBroadcastContent(
+  translations: BroadcastTranslations,
+  locale: string | null | undefined,
+): BroadcastTranslation | null {
+  const chain = [resolveLocale(locale), 'en-US', 'zh-CN', 'ms-MY'];
+  const seen = new Set<string>();
+  for (const loc of chain) {
+    if (seen.has(loc)) continue;
+    seen.add(loc);
+    const tr = translations[loc];
+    if (!tr) continue;
+    const title = tr.title?.trim();
+    const body = tr.body?.trim();
+    if (title || body) {
+      return {
+        title: title || stripHtml(body).slice(0, 256) || 'Notification',
+        body: body || '',
+      };
+    }
+  }
+  for (const tr of Object.values(translations)) {
+    const title = tr.title?.trim();
+    const body = tr.body?.trim();
+    if (title || body) {
+      return {
+        title: title || stripHtml(body).slice(0, 256) || 'Notification',
+        body: body || '',
+      };
+    }
+  }
+  return null;
+}
+
+function parseBroadcastTranslations(value: Prisma.JsonValue | null | undefined): BroadcastTranslations {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return {};
+  const map: BroadcastTranslations = {};
+  for (const [locale, raw] of Object.entries(value as Record<string, unknown>)) {
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) continue;
+    const row = raw as Record<string, unknown>;
+    map[locale] = {
+      title: typeof row.title === 'string' ? row.title : '',
+      body: typeof row.body === 'string' ? row.body : '',
+    };
+  }
+  return map;
+}
+
+function mapBroadcastRow(row: {
+  id: bigint;
+  title: string;
+  body: string;
+  translations: Prisma.JsonValue | null;
+  targetType: string;
+  targetUserId: bigint | null;
+  targetUsername: string | null;
+  recipientCount: number;
+  createdById: bigint | null;
+  createdByUsername: string | null;
+  createdAt: Date;
+}) {
+  const translations = parseBroadcastTranslations(row.translations);
+  const hasTranslations = Object.keys(translations).length > 0;
+  const preview =
+    resolveBroadcastContent(hasTranslations ? translations : { 'en-US': { title: row.title, body: row.body } }, 'en-US') ??
+    { title: row.title, body: row.body };
+
+  return {
+    id: row.id.toString(),
+    title: preview.title,
+    body: preview.body,
+    translations: hasTranslations
+      ? translations
+      : { 'en-US': { title: row.title, body: row.body } },
+    targetType: row.targetType,
+    targetUserId: row.targetUserId?.toString() ?? null,
+    targetUsername: row.targetUsername,
+    recipientCount: row.recipientCount,
+    createdById: row.createdById?.toString() ?? null,
+    createdByUsername: row.createdByUsername,
+    createdAt: row.createdAt.toISOString(),
+  };
+}
+
 @Injectable()
 export class PlayerMessagesService {
   constructor(private prisma: PrismaService) {}
 
   private buildDepositMessage(
-    type: Exclude<PlayerMessageType, 'BANNER_PROMO' | 'ANNOUNCEMENT_PROMO'>,
+    type: Exclude<PlayerMessageType, 'BANNER_PROMO' | 'ANNOUNCEMENT_PROMO' | 'ADMIN_CUSTOM'>,
     locale: string | null | undefined,
     payload: DepositMessagePayload,
   ) {
@@ -434,4 +545,135 @@ export class PlayerMessagesService {
     const result = await this.prisma.playerMessage.deleteMany({ where: { userId } });
     return { deleted: result.count };
   }
+
+  async listBroadcasts(page = 1, pageSize = 20) {
+    const safePage = Math.max(1, page);
+    const safePageSize = Math.min(50, Math.max(1, pageSize));
+    const skip = (safePage - 1) * safePageSize;
+
+    const [rows, total] = await Promise.all([
+      this.prisma.playerMessageBroadcast.findMany({
+        orderBy: { createdAt: 'desc' },
+        skip,
+        take: safePageSize,
+      }),
+      this.prisma.playerMessageBroadcast.count(),
+    ]);
+
+    return {
+      items: rows.map(mapBroadcastRow),
+      total,
+      page: safePage,
+      pageSize: safePageSize,
+    };
+  }
+
+  async createCustomBroadcast(data: {
+    translations: BroadcastTranslationInput[];
+    targetType: 'ALL' | 'USER';
+    targetUsername?: string | null;
+    createdById?: bigint | null;
+    createdByUsername?: string | null;
+  }) {
+    const translations = normalizeBroadcastTranslations(data.translations);
+    const preview = resolveBroadcastContent(translations, 'en-US');
+    if (!preview?.title && !preview?.body) {
+      throw appBadRequest('BROADCAST_CONTENT_REQUIRED');
+    }
+    const title = preview.title.slice(0, 256);
+    const body = preview.body;
+    if (!title && !body) throw appBadRequest('BROADCAST_CONTENT_REQUIRED');
+
+    let targetUsers: Array<{
+      id: bigint;
+      username: string;
+      locale: string | null;
+      preferences: { locale: string | null } | null;
+    }> = [];
+    let targetUserId: bigint | null = null;
+    let targetUsername: string | null = null;
+
+    if (data.targetType === 'ALL') {
+      targetUsers = await this.prisma.user.findMany({
+        where: { userType: 'PLAYER', deletedAt: null, status: 'ACTIVE' },
+        select: {
+          id: true,
+          username: true,
+          locale: true,
+          preferences: { select: { locale: true } },
+        },
+      });
+    } else {
+      const username = data.targetUsername?.trim();
+      if (!username) throw appBadRequest('BROADCAST_TARGET_USER_REQUIRED');
+      const player = await this.prisma.user.findFirst({
+        where: {
+          username,
+          userType: 'PLAYER',
+          deletedAt: null,
+          status: 'ACTIVE',
+        },
+        select: {
+          id: true,
+          username: true,
+          locale: true,
+          preferences: { select: { locale: true } },
+        },
+      });
+      if (!player) throw appNotFound('PLAYER_NOT_FOUND');
+      targetUsers = [player];
+      targetUserId = player.id;
+      targetUsername = player.username;
+    }
+
+    if (!targetUsers.length) throw appBadRequest('BROADCAST_NO_RECIPIENTS');
+
+    const broadcast = await this.prisma.$transaction(async (tx) => {
+      const created = await tx.playerMessageBroadcast.create({
+        data: {
+          title,
+          body,
+          translations: translations as Prisma.InputJsonValue,
+          targetType: data.targetType,
+          targetUserId,
+          targetUsername,
+          recipientCount: targetUsers.length,
+          createdById: data.createdById ?? null,
+          createdByUsername: data.createdByUsername ?? null,
+        },
+      });
+
+      const rows = targetUsers.map((player) => {
+        const playerLocale = player.preferences?.locale ?? player.locale;
+        const content =
+          resolveBroadcastContent(translations, playerLocale) ?? preview;
+        return {
+          userId: player.id,
+          type: 'ADMIN_CUSTOM',
+          title: content.title.slice(0, 256),
+          body: content.body,
+          broadcastId: created.id,
+          payload: { broadcastId: created.id.toString() } as Prisma.InputJsonValue,
+        };
+      });
+
+      const batchSize = 200;
+      for (let i = 0; i < rows.length; i += batchSize) {
+        await tx.playerMessage.createMany({ data: rows.slice(i, i + batchSize) });
+      }
+
+      return created;
+    });
+
+    return mapBroadcastRow(broadcast);
+  }
+
+  async deleteBroadcast(broadcastId: bigint) {
+    const row = await this.prisma.playerMessageBroadcast.findUnique({
+      where: { id: broadcastId },
+    });
+    if (!row) throw appNotFound('BROADCAST_NOT_FOUND');
+    await this.prisma.playerMessageBroadcast.delete({ where: { id: broadcastId } });
+    return { deleted: true, recipientCount: row.recipientCount };
+  }
 }

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;

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();
+  }
 }

apps/player/src/components/MessageListPanel.vue

@@ -6,6 +6,7 @@ import { formatLocalMatchDateTime } from '@thebet365/shared';
 import GoldSpinner from './GoldSpinner.vue';
 import ConfirmDialog from './ConfirmDialog.vue';
 import { useAuthStore } from '../stores/auth';
+import { stripHtml } from '../utils/html';
 import { usePlayerMessages, type DepositMessagePayload, type PlayerMessage } from '../composables/usePlayerMessages';
 
 const router = useRouter();
@@ -44,7 +45,8 @@ function messagePreview(item: PlayerMessage) {
     const deposit = item.payload as DepositMessagePayload | null;
     if (deposit?.orderNo) return deposit.orderNo;
   }
-  return item.body.length > 80 ? `${item.body.slice(0, 80)}…` : item.body;
+  const plain = stripHtml(item.body);
+  return plain.length > 80 ? `${plain.slice(0, 80)}…` : plain;
 }
 
 function openDetail(id: string) {

apps/player/src/composables/usePlayerMessages.ts

@@ -5,7 +5,8 @@ export type PlayerMessageType =
   | 'DEPOSIT_APPROVED'
   | 'DEPOSIT_REJECTED'
   | 'BANNER_PROMO'
-  | 'ANNOUNCEMENT_PROMO';
+  | 'ANNOUNCEMENT_PROMO'
+  | 'ADMIN_CUSTOM';
 
 export type DepositMessagePayload = {
   depositOrderId?: string;

apps/player/src/views/MessageDetailView.vue

@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n';
 import { formatLocalMatchDateTime } from '@thebet365/shared';
 import GoldSpinner from '../components/GoldSpinner.vue';
 import ConfirmDialog from '../components/ConfirmDialog.vue';
+import { sanitizeAnnouncementHtml } from '../utils/html';
 import { formatMoney } from '../utils/localeDisplay';
 import {
   usePlayerMessages,
@@ -174,7 +175,12 @@ watch(messageId, () => {
       </span>
       <p v-if="message.createdAt" class="detail-date">{{ formatDate(message.createdAt) }}</p>
       <h2 class="detail-title">{{ messageTitle(message) }}</h2>
-      <p class="detail-body">{{ messageBody(message) }}</p>
+      <div
+        v-if="message.type === 'ADMIN_CUSTOM'"
+        class="detail-body rich-body"
+        v-html="sanitizeAnnouncementHtml(message.body)"
+      />
+      <p v-else class="detail-body">{{ messageBody(message) }}</p>
 
       <div
         v-if="message.type === 'DEPOSIT_REJECTED' && depositPayload?.rejectReason?.trim()"
@@ -323,6 +329,32 @@ watch(messageId, () => {
   color: var(--text-secondary);
 }
 
+.rich-body :deep(p) {
+  margin: 0 0 12px;
+}
+
+.rich-body :deep(p:last-child) {
+  margin-bottom: 0;
+}
+
+.rich-body :deep(img) {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 12px 0;
+  border-radius: 8px;
+}
+
+.rich-body :deep(ul),
+.rich-body :deep(ol) {
+  margin: 0 0 12px;
+  padding-left: 20px;
+}
+
+.rich-body :deep(a) {
+  color: var(--primary);
+}
+
 .reason-box {
   margin-top: 18px;
   padding: 14px;

apps/player/src/views/RechargeView.vue

@@ -5,10 +5,12 @@ import { useI18n } from 'vue-i18n';
 import imageCompression from 'browser-image-compression';
 import api from '../api';
 import GoldSpinner from '../components/GoldSpinner.vue';
+import { useDepositNotifications } from '../composables/useDepositNotifications';
 
 const router = useRouter();
 const route = useRoute();
 const { t } = useI18n();
+const { trackPendingOrder } = useDepositNotifications();
 
 const reapplyOrderId = computed(() => {
   const id = route.query.orderId;
@@ -93,30 +95,43 @@ 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');
+  }
+
+  const name = file.name.replace(/\.[^/.]+$/, '') + '.webp';
+  return new File([compressed], name, {
+    type: 'image/webp',
+    lastModified: Date.now(),
+  });
 }
 
 async function handleFileChange(event: Event) {
@@ -186,6 +201,7 @@ async function handleSubmit() {
       const { data } = await api.post(`/player/deposit-orders/${reapplyOrderId.value}/reapply`, fd);
       const result = data.data;
       orderNo.value = result?.orderNo ?? '';
+      if (result?.id) trackPendingOrder(String(result.id));
       success.value = true;
       return;
     }
@@ -194,6 +210,7 @@ async function handleSubmit() {
     const { data } = await api.post('/player/deposit-orders', fd);
     const result = data.data;
     orderNo.value = result?.orderNo ?? '';
+    if (result?.id) trackPendingOrder(String(result.id));
     success.value = true;
   } catch (e: any) {
     alert(e.response?.data?.message || t('recharge.submit_failed'));

packages/shared/src/api-errors.js

@@ -862,6 +862,41 @@ export const API_ERROR_MESSAGES = {
         'en-US': 'Message not found',
         'ms-MY': 'Mesej tidak dijumpai',
     },
+    BROADCAST_NOT_FOUND: {
+        'zh-CN': '发送记录不存在',
+        'en-US': 'Broadcast record not found',
+        'ms-MY': 'Rekod siaran tidak dijumpai',
+    },
+    BROADCAST_TITLE_REQUIRED: {
+        'zh-CN': '标题不能为空',
+        'en-US': 'Title is required',
+        'ms-MY': 'Tajuk diperlukan',
+    },
+    BROADCAST_BODY_REQUIRED: {
+        'zh-CN': '正文不能为空',
+        'en-US': 'Body is required',
+        'ms-MY': 'Kandungan diperlukan',
+    },
+    BROADCAST_TITLE_TOO_LONG: {
+        'zh-CN': '标题过长（最多 256 字符）',
+        'en-US': 'Title is too long (max 256 characters)',
+        'ms-MY': 'Tajuk terlalu panjang (maks 256 aksara)',
+    },
+    BROADCAST_TARGET_USER_REQUIRED: {
+        'zh-CN': '请指定玩家账号',
+        'en-US': 'Target player username is required',
+        'ms-MY': 'Nama pengguna pemain sasaran diperlukan',
+    },
+    BROADCAST_NO_RECIPIENTS: {
+        'zh-CN': '没有可发送的玩家',
+        'en-US': 'No eligible recipients',
+        'ms-MY': 'Tiada penerima yang layak',
+    },
+    BROADCAST_CONTENT_REQUIRED: {
+        'zh-CN': '请至少填写一种语言的标题或正文',
+        'en-US': 'Provide a title or body in at least one language',
+        'ms-MY': 'Sila isi tajuk atau kandungan sekurang-kurangnya satu bahasa',
+    },
     CONTENT_ACTIVE_BANNER_INCOMPLETE: {
         'zh-CN': '启用 Banner 须至少一种语言配置图片地址',
         'en-US': 'ACTIVE banner requires imageUrl in at least one locale',
@@ -1007,6 +1042,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();

packages/shared/src/api-errors.ts

@@ -864,6 +864,41 @@ export const API_ERROR_MESSAGES = {
     'en-US': 'Message not found',
     'ms-MY': 'Mesej tidak dijumpai',
   },
+  BROADCAST_NOT_FOUND: {
+    'zh-CN': '发送记录不存在',
+    'en-US': 'Broadcast record not found',
+    'ms-MY': 'Rekod siaran tidak dijumpai',
+  },
+  BROADCAST_TITLE_REQUIRED: {
+    'zh-CN': '标题不能为空',
+    'en-US': 'Title is required',
+    'ms-MY': 'Tajuk diperlukan',
+  },
+  BROADCAST_BODY_REQUIRED: {
+    'zh-CN': '正文不能为空',
+    'en-US': 'Body is required',
+    'ms-MY': 'Kandungan diperlukan',
+  },
+  BROADCAST_TITLE_TOO_LONG: {
+    'zh-CN': '标题过长（最多 256 字符）',
+    'en-US': 'Title is too long (max 256 characters)',
+    'ms-MY': 'Tajuk terlalu panjang (maks 256 aksara)',
+  },
+  BROADCAST_TARGET_USER_REQUIRED: {
+    'zh-CN': '请指定玩家账号',
+    'en-US': 'Target player username is required',
+    'ms-MY': 'Nama pengguna pemain sasaran diperlukan',
+  },
+  BROADCAST_NO_RECIPIENTS: {
+    'zh-CN': '没有可发送的玩家',
+    'en-US': 'No eligible recipients',
+    'ms-MY': 'Tiada penerima yang layak',
+  },
+  BROADCAST_CONTENT_REQUIRED: {
+    'zh-CN': '请至少填写一种语言的标题或正文',
+    'en-US': 'Provide a title or body in at least one language',
+    'ms-MY': 'Sila isi tajuk atau kandungan sekurang-kurangnya satu bahasa',
+  },
   CONTENT_ACTIVE_BANNER_INCOMPLETE: {
     'zh-CN': '启用 Banner 须至少一种语言配置图片地址',
     'en-US': 'ACTIVE banner requires imageUrl in at least one locale',
@@ -1009,6 +1044,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;