feat: split admin dashboard, improve match ops, and player closed-match UX

Admin: add match/player overview sub-nav; refine settlement flow and league match management UI; improve action button enabled/disabled styles; enhance logo upload and outright odds sync. API: expose matchPhase/bettingOpen for closed matches; league publish guards; settlement preview with auto score save; outright team auto-sync. Player: watermark for closed/settled states; keep match and bet details visible; remove default login credentials. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-10 13:00:14 +08:00
parent 6124313369
commit 03f54ca689
43 changed files with 2787 additions and 519 deletions
--- a/apps/admin/src/views/FinanceLogs.vue
+++ b/apps/admin/src/views/FinanceLogs.vue
@@ -81,6 +81,27 @@ function transferTypeLabel(type: string) {
  return type;
 }

+const TRANSFER_REMARK_KEYS: Record<string, string> = {
+  'Agent deposit': 'finance.remark.agent_deposit',
+  'Agent withdraw': 'finance.remark.agent_withdraw',
+  '代理上分': 'finance.remark.agent_deposit',
+  '代理下分': 'finance.remark.agent_withdraw',
+  '管理员上分': 'finance.remark.admin_deposit',
+  '管理员下分': 'finance.remark.admin_withdraw',
+  '开户初始余额': 'finance.remark.initial_balance',
+};
+
+function transferRemarkLabel(remark: string | null | undefined, transactionType: string) {
+  const raw = remark?.trim();
+  if (!raw) {
+    if (transactionType === 'MANUAL_DEPOSIT') return t('finance.remark.agent_deposit');
+    if (transactionType === 'MANUAL_WITHDRAW') return t('finance.remark.agent_withdraw');
+    return '—';
+  }
+  const key = TRANSFER_REMARK_KEYS[raw];
+  return key ? t(key) : raw;
+}
+
 function formatTime(v: string) {
  return new Date(v).toLocaleString(localeTag.value, {
    year: 'numeric',
@@ -417,7 +438,9 @@ watch(
          <el-table-column :label="t('agent.credit_tx.col.operator')" min-width="100">
            <template #default="{ row }">{{ row.operatorUsername ?? '—' }}</template>
          </el-table-column>
-          <el-table-column prop="remark" :label="t('user.field.remark')" min-width="120" show-overflow-tooltip />
+          <el-table-column :label="t('user.field.remark')" min-width="120" show-overflow-tooltip>
+            <template #default="{ row }">{{ transferRemarkLabel(row.remark, row.transactionType) }}</template>
+          </el-table-column>
        </el-table>
      </div>
      <div class="pager">
--- a/apps/admin/src/views/HomeEntry.vue
+++ b/apps/admin/src/views/HomeEntry.vue
@@ -1,28 +1,46 @@
 <script setup lang="ts">
 import { shallowRef, onBeforeMount, type Component } from 'vue';
+import { RouterView } from 'vue-router';
 import { useAuthStore } from '../stores/auth';
 import { ensureStaffSession } from '../utils/session-hydrate';
+import DashboardSubNav from '../components/DashboardSubNav.vue';

 const auth = useAuthStore();
-const dashboardView = shallowRef<Component | null>(null);
+const agentDashboard = shallowRef<Component | null>(null);
 const booting = shallowRef(true);

 onBeforeMount(async () => {
  await ensureStaffSession();
-  dashboardView.value = auth.isAdmin.value
-    ? (await import('./Dashboard.vue')).default
-    : (await import('./agent/Dashboard.vue')).default;
+  if (!auth.isAdmin.value) {
+    agentDashboard.value = (await import('./agent/Dashboard.vue')).default;
+  }
  booting.value = false;
 });
 </script>

 <template>
  <div v-if="booting" v-loading="true" class="home-boot" />
-  <component v-else :is="dashboardView" />
+  <template v-else-if="auth.isAdmin.value">
+    <div class="dashboard-shell">
+      <div class="list-chrome">
+        <div class="list-chrome__row">
+          <div class="list-chrome__left">
+            <DashboardSubNav embedded />
+          </div>
+        </div>
+      </div>
+      <RouterView />
+    </div>
+  </template>
+  <component v-else :is="agentDashboard" />
 </template>

 <style scoped>
 .home-boot {
  min-height: 240px;
 }
+
+.dashboard-shell :deep(.list-chrome) {
+  margin-bottom: 4px;
+}
 </style>
--- a/apps/admin/src/views/Matches.vue
+++ b/apps/admin/src/views/Matches.vue
@@ -8,6 +8,7 @@ import { ElMessage } from 'element-plus';
 import LeagueMatchesPanel from './matches/LeagueMatchesPanel.vue';
 import MatchesSubNav from '../components/MatchesSubNav.vue';
 import CountryFlagSelect from '../components/outright/CountryFlagSelect.vue';
+import LogoUrlField from '../components/LogoUrlField.vue';
 import { getBuiltinCountry } from '../data/builtinCountries';
 import {
  readMatchesListUiState,
@@ -34,13 +35,19 @@ const expandedRowKeys = ref<string[]>([]);

 const createLeagueVisible = ref(false);
 const createLeagueLoading = ref(false);
-const leagueForm = ref({ leagueEn: '', leagueZh: '', leagueMs: '', logoUrl: '' });
+const leagueDialogMode = ref<'create' | 'edit'>('create');
+const leagueEditingId = ref('');
+const leagueForm = ref({ leagueEn: '', leagueZh: '', leagueMs: '', logoUrl: '', deleteOldLogo: false, originalLogoUrl: '' });
+const publishingLeagueId = ref('');
+
+const leagueDialogTitle = computed(() =>
+  leagueDialogMode.value === 'edit'
+    ? t('match.dialog.edit_league')
+    : t('match.dialog.create_league'),
+);

 const createVisible = ref(false);
-const importVisible = ref(false);
 const createLoading = ref(false);
-const importLoading = ref(false);
-const importJson = ref('');
 const form = ref<MatchCreateForm>(emptyMatchForm());
 const createUnderLeagueLabel = ref('');

@@ -123,30 +130,89 @@ function onSizeChange(size: number) {
 }

 function openCreateLeague() {
-  leagueForm.value = { leagueEn: '', leagueZh: '', leagueMs: '', logoUrl: '' };
+  leagueDialogMode.value = 'create';
+  leagueEditingId.value = '';
+  leagueForm.value = { leagueEn: '', leagueZh: '', leagueMs: '', logoUrl: '', deleteOldLogo: false, originalLogoUrl: '' };
  createLeagueVisible.value = true;
 }

-async function submitCreateLeague() {
-  const { leagueEn, leagueZh, leagueMs, logoUrl } = leagueForm.value;
+function openEditLeague(row: unknown) {
+  const r = rowOf(row);
+  leagueDialogMode.value = 'edit';
+  leagueEditingId.value = String(r.id ?? '');
+  const currentLogoUrl = String(r.logoUrl ?? '');
+  leagueForm.value = {
+    leagueEn: String(r.leagueEn ?? ''),
+    leagueZh: String(r.leagueZh ?? ''),
+    leagueMs: String(r.leagueMs ?? ''),
+    logoUrl: currentLogoUrl,
+    deleteOldLogo: false,
+    originalLogoUrl: currentLogoUrl,
+  };
+  createLeagueVisible.value = true;
+}
+
+async function toggleLeaguePublish(row: unknown) {
+  const r = rowOf(row);
+  const id = String(r.id ?? '');
+  if (leagueIsPublished(row)) return;
+  publishingLeagueId.value = id;
+  try {
+    await api.put(`/admin/leagues/${id}`, {
+      leagueEn: String(r.leagueEn ?? ''),
+      leagueZh: String(r.leagueZh ?? ''),
+      leagueMs: String(r.leagueMs ?? ''),
+      logoUrl: String(r.logoUrl ?? '').trim() || undefined,
+      isActive: true,
+    });
+    ElMessage.success(t('msg.league_published'));
+    await load({ keepExpand: true });
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    publishingLeagueId.value = '';
+  }
+}
+
+async function submitLeagueForm() {
+  const { leagueEn, leagueZh, leagueMs, logoUrl, deleteOldLogo, originalLogoUrl } = leagueForm.value;
  if (!leagueZh.trim() && !leagueEn.trim()) {
    ElMessage.warning(t('err.league_required'));
    return;
  }
  createLeagueLoading.value = true;
  try {
-    await api.post('/admin/leagues', {
+    const body = {
      leagueEn: leagueEn.trim(),
      leagueZh: leagueZh.trim(),
      leagueMs: leagueMs.trim() || undefined,
      logoUrl: logoUrl.trim() || undefined,
-    });
-    ElMessage.success(t('msg.league_created'));
+      ...(leagueDialogMode.value === 'create' ? { isActive: false } : {}),
+    };
+    if (leagueDialogMode.value === 'edit') {
+      await api.put(`/admin/leagues/${leagueEditingId.value}`, body);
+      ElMessage.success(t('msg.league_updated'));
+    } else {
+      await api.post('/admin/leagues', body);
+      ElMessage.success(t('msg.league_created'));
+    }
+
+    // Delete old resource if user checked the option and the URL actually changed
+    if (deleteOldLogo && originalLogoUrl && originalLogoUrl !== logoUrl.trim()) {
+      try {
+        await api.delete('/admin/uploads/by-url', { data: { url: originalLogoUrl } });
+        ElMessage.success('旧资源已删除');
+      } catch {
+        ElMessage.warning('旧资源删除失败，可稍后在媒体库中清理');
+      }
+    }
+
    createLeagueVisible.value = false;
    load({ keepExpand: true });
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.create_failed'));
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
  } finally {
    createLeagueLoading.value = false;
  }
@@ -172,11 +238,6 @@ function openCreateFixture(leagueRow: unknown) {
  createVisible.value = true;
 }

-function openImport() {
-  importJson.value = '';
-  importVisible.value = true;
-}
-
 async function submitCreate() {
  let payload: ReturnType<typeof buildPlatformPayload>;
  try {
@@ -205,41 +266,6 @@ async function submitCreate() {
  }
 }

-async function submitImport() {
-  let payload: unknown;
-  try {
-    payload = JSON.parse(importJson.value);
-  } catch {
-    ElMessage.error(t('msg.invalid_json'));
-    return;
-  }
-  importLoading.value = true;
-  try {
-    const { data } = await api.post('/admin/matches/import', payload);
-    const r = data.data as {
-      imported: number;
-      skipped: number;
-      failed: number;
-      total: number;
-    };
-    ElMessage.success(
-      t('msg.import_done', {
-        imported: r.imported,
-        skipped: r.skipped,
-        failed: r.failed,
-        total: r.total,
-      }),
-    );
-    importVisible.value = false;
-    load({ keepExpand: true });
-  } catch (e: unknown) {
-    const err = e as { response?: { data?: { error?: string } } };
-    ElMessage.error(err.response?.data?.error ?? t('msg.import_failed'));
-  } finally {
-    importLoading.value = false;
-  }
-}
-
 function onExpandChange(_row: unknown, expanded: unknown[]) {
  expandedRowKeys.value = expanded.map((r) => leagueId(r));
  persistListUiState();
@@ -280,6 +306,18 @@ function leagueMatchCount(row: unknown) {
  return Number(rowOf(row).matchCount ?? 0);
 }

+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 }
@@ -335,16 +373,11 @@ function isLeagueExpanded(id: string) {
          </el-button>
        </div>
      </div>
-      <div class="list-chrome__actions">
-        <el-button @click="openImport">{{ t('common.import') }}</el-button>
-        <el-button type="primary" @click="openCreateLeague">{{ t('match.create_btn') }}</el-button>
-      </div>
    </div>
    <p v-if="filterStatus" class="list-hint">{{ t('match.filter.status_hint') }}</p>
  </div>

  <section class="list-panel">
-    <p class="list-hint">{{ t('match.expand_league_hint') }}</p>
    <div class="table-wrap">
    <el-table
      :data="leagues"
@@ -387,6 +420,13 @@ function isLeagueExpanded(id: string) {
          <span class="league-en">{{ leagueNameEn(row) }}</span>
        </template>
      </el-table-column>
+      <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>
+        </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>
@@ -406,9 +446,37 @@ function isLeagueExpanded(id: string) {
          <span v-else class="bet-stat-zero">0</span>
        </template>
      </el-table-column>
-      <el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
+      <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="168" align="center" fixed="right">
+        <template #header>
+          <div class="actions-col-header">
+            <span class="actions-col-header__label">{{ t('common.actions') }}</span>
+            <el-button type="primary" size="small" @click.stop="openCreateLeague">
+              {{ t('match.create_btn') }}
+            </el-button>
+          </div>
+        </template>
+        <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
+                v-if="!leagueIsPublished(row)"
+                size="small"
+                type="success"
+                :loading="publishingLeagueId === leagueId(row)"
+                @click.stop="toggleLeaguePublish(row)"
+              >
+                {{ t('common.publish') }}
+              </el-button>
+            </div>
+          </div>
+        </template>
+      </el-table-column>
    </el-table>
    </div>
    <div class="pager">
@@ -425,7 +493,7 @@ function isLeagueExpanded(id: string) {
    </div>
  </section>

-  <el-dialog v-model="createLeagueVisible" :title="t('match.dialog.create_league')" width="520px" destroy-on-close>
+  <el-dialog v-model="createLeagueVisible" :title="leagueDialogTitle" width="520px" destroy-on-close>
    <el-form label-width="96px">
      <el-form-item :label="t('match.field.league_zh')">
        <el-input v-model="leagueForm.leagueZh" :placeholder="t('match.ph.league_zh')" />
@@ -437,14 +505,19 @@ function isLeagueExpanded(id: string) {
        <el-input v-model="leagueForm.leagueMs" :placeholder="t('match.ph.league_ms')" />
      </el-form-item>
      <el-form-item :label="t('match.field.league_logo')">
-        <el-input v-model="leagueForm.logoUrl" :placeholder="t('matchEditor.ph.logo_url')" />
+        <LogoUrlField
+          v-model="leagueForm.logoUrl"
+          v-model:delete-old="leagueForm.deleteOldLogo"
+          upload-only
+          upload-category="banners"
+        />
      </el-form-item>
-      <p class="field-hint">{{ t('match.hint.create_league') }}</p>
+      <p v-if="leagueDialogMode === 'create'" class="field-hint">{{ t('match.hint.create_league') }}</p>
    </el-form>
    <template #footer>
      <el-button @click="createLeagueVisible = false">{{ t('common.cancel') }}</el-button>
-      <el-button type="primary" :loading="createLeagueLoading" @click="submitCreateLeague">
-        {{ t('user.btn.create') }}
+      <el-button type="primary" :loading="createLeagueLoading" @click="submitLeagueForm">
+        {{ leagueDialogMode === 'edit' ? t('common.save') : t('user.btn.create') }}
      </el-button>
    </template>
  </el-dialog>
@@ -452,7 +525,7 @@ function isLeagueExpanded(id: string) {
  <el-dialog
    v-model="createVisible"
    :title="t('match.dialog.create_fixture')"
-    width="560px"
+    width="860px"
    destroy-on-close
  >
    <el-form label-width="96px">
@@ -476,22 +549,56 @@ function isLeagueExpanded(id: string) {
          style="width: 100%"
        />
      </el-form-item>
-      <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.away_team')" required>
-        <CountryFlagSelect
-          v-model="form.awayTeamCode"
-          size="default"
-          class="team-country-select"
-          @update:model-value="onTeamCodeChange('away', $event)"
-        />
-      </el-form-item>
+      <div class="teams-row">
+        <!-- Home Team Column -->
+        <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>
+        <!-- Away Team Column -->
+        <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>
@@ -502,37 +609,35 @@ function isLeagueExpanded(id: string) {
      <el-button type="primary" :loading="createLoading" @click="submitCreate">{{ t('user.btn.create') }}</el-button>
    </template>
  </el-dialog>
-
-  <el-dialog v-model="importVisible" :title="t('match.dialog.import')" width="640px" destroy-on-close>
-    <p class="dialog-hint">{{ t('match.import_hint') }}</p>
-    <el-input
-      v-model="importJson"
-      type="textarea"
-      :rows="14"
-      :placeholder="t('match.import_json_ph')"
-    />
-    <template #footer>
-      <el-button @click="importVisible = false">{{ t('common.cancel') }}</el-button>
-      <el-button type="primary" :loading="importLoading" @click="submitImport">{{ t('match.import_start') }}</el-button>
-    </template>
-  </el-dialog>
  </div>
 </template>

 <style scoped>
-.dialog-hint {
-  font-size: 13px;
-  color: #666;
-  margin: 0 0 12px;
-  line-height: 1.5;
-}
 .team-country-select {
  width: 100%;
 }

-.dialog-hint code {
-  color: #aaa;
+.teams-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0 20px;
 }
+
+.team-col {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.team-col-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: #bbb;
+  margin-bottom: 10px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid #2a2a2a;
+}
+
 .field-hint {
  font-size: 12px;
  color: #666;
@@ -600,6 +705,78 @@ function isLeagueExpanded(id: string) {
  font-weight: 500;
 }

+.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: 600;
+  color: #aaa;
+  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;
+}
+
+.matches-page .table-wrap :deep(.el-table__header .cell) {
+  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: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.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%;
 }
--- a/apps/admin/src/views/MediaLibrary.vue
+++ b/apps/admin/src/views/MediaLibrary.vue
@@ -381,10 +381,12 @@ async function doUpload() {
 .file-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  align-content: start;
  gap: 14px;
  overflow-y: auto;
  flex: 1;
  padding-right: 4px;
+  padding-bottom: 8px;
 }

 .file-card {
@@ -448,7 +450,6 @@ async function doUpload() {
  display: flex;
  flex-direction: column;
  gap: 4px;
-  flex: 1;
 }
 .card-filename {
  font-size: 12px;
@@ -526,6 +527,14 @@ async function doUpload() {
 }
 .muted { color: #333; }

+.file-grid::-webkit-scrollbar { width: 6px; }
+.file-grid::-webkit-scrollbar-track { background: transparent; }
+.file-grid::-webkit-scrollbar-thumb {
+  background: #2a2a2a;
+  border-radius: 3px;
+}
+.file-grid::-webkit-scrollbar-thumb:hover { background: #444; }
+
 /* ── Upload dialog ── */
 .dialog-overlay {
  position: fixed;
--- a/apps/admin/src/views/Settlement.vue
+++ b/apps/admin/src/views/Settlement.vue
@@ -69,6 +69,7 @@ const route = useRoute();
 const router = useRouter();

 const loading = ref(false);
+const previewing = ref(false);
 const match = ref<AdminMatchDetail | null>(null);
 const score = ref({ htHome: 0, htAway: 0, ftHome: 0, ftAway: 0 });
 const preview = ref<Record<string, unknown> | null>(null);
@@ -340,20 +341,6 @@ function settlementApiError(e: unknown, fallback: string) {
  return raw;
 }

-async function saveScore() {
-  await api.post(`/admin/matches/${matchId.value}/settlement/score`, score.value);
-}
-
-async function recordScore() {
-  try {
-    await saveScore();
-    ElMessage.success(t('msg.score_recorded'));
-    await loadMatch();
-  } catch (e: unknown) {
-    ElMessage.error(settlementApiError(e, t('msg.save_failed')));
-  }
-}
-
 async function loadPreviewItems(page = previewPage.value, pageSize = previewPageSize.value) {
  const batch = preview.value?.batch as { id: string } | undefined;
  if (!batch) return;
@@ -374,9 +361,10 @@ async function loadPreviewItems(page = previewPage.value, pageSize = previewPage
 async function previewSettlement() {
  preview.value = null;
  previewPage.value = 1;
+  previewing.value = true;
  try {
-    await saveScore();
    const { data } = await api.post(`/admin/matches/${matchId.value}/settlement/preview`, {
+      ...score.value,
      page: 1,
      pageSize: previewPageSize.value,
    });
@@ -386,6 +374,8 @@ async function previewSettlement() {
    previewPageSize.value = itemsPage.pageSize;
  } catch (e: unknown) {
    ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
+  } finally {
+    previewing.value = false;
  }
 }

@@ -426,77 +416,76 @@ onMounted(() => {

    <el-card v-if="match" class="settle-top-card" shadow="never">
      <p v-if="leagueLabel" class="match-league">{{ leagueLabel }}</p>
-      <div class="settle-top-row">
-        <div class="match-inline">
-          <div class="team-chip">
-            <img
-              v-if="match.homeTeamLogoUrl"
-              :src="match.homeTeamLogoUrl"
-              alt=""
-              class="team-logo-sm"
-              loading="lazy"
-            />
-            <span class="team-name-inline">{{ homeLabel }}</span>
+      <div class="match-inline">
+        <div class="team-chip">
+          <img
+            v-if="match.homeTeamLogoUrl"
+            :src="match.homeTeamLogoUrl"
+            alt=""
+            class="team-logo-sm"
+            loading="lazy"
+          />
+          <span class="team-name-inline">{{ homeLabel }}</span>
+        </div>
+        <span class="vs">VS</span>
+        <div class="team-chip">
+          <img
+            v-if="match.awayTeamLogoUrl"
+            :src="match.awayTeamLogoUrl"
+            alt=""
+            class="team-logo-sm"
+            loading="lazy"
+          />
+          <span class="team-name-inline">{{ awayLabel }}</span>
+        </div>
+        <span class="kickoff-inline">
+          <span class="meta-k">{{ t('settlement.kickoff') }}</span>
+          {{ kickoffLabel }}
+        </span>
+      </div>
+
+      <div class="settle-score-row">
+        <div class="score-inline-group">
+          <div class="score-block compact">
+            <span class="score-title">{{ t('settlement.ht_score') }}</span>
+            <div class="score-inputs">
+              <el-input-number v-model="score.htHome" :min="0" controls-position="right" style="width: 88px" />
+              <span class="score-sep">—</span>
+              <el-input-number v-model="score.htAway" :min="0" controls-position="right" style="width: 88px" />
+            </div>
          </div>
-          <span class="vs">VS</span>
-          <div class="team-chip">
-            <img
-              v-if="match.awayTeamLogoUrl"
-              :src="match.awayTeamLogoUrl"
-              alt=""
-              class="team-logo-sm"
-              loading="lazy"
-            />
-            <span class="team-name-inline">{{ awayLabel }}</span>
+          <div class="score-block compact">
+            <span class="score-title">{{ t('settlement.ft_score') }}</span>
+            <div class="score-inputs">
+              <el-input-number v-model="score.ftHome" :min="0" controls-position="right" style="width: 88px" />
+              <span class="score-sep">—</span>
+              <el-input-number v-model="score.ftAway" :min="0" controls-position="right" style="width: 88px" />
+            </div>
          </div>
-          <span class="kickoff-inline">
-            <span class="meta-k">{{ t('settlement.kickoff') }}</span>
-            {{ kickoffLabel }}
-          </span>
        </div>

-        <div class="score-panel">
-          <div class="score-inline-group">
-            <div class="score-block compact">
-              <span class="score-title">{{ t('settlement.ht_score') }}</span>
-              <div class="score-inputs">
-                <el-input-number v-model="score.htHome" :min="0" controls-position="right" style="width: 88px" />
-                <span class="score-sep">—</span>
-                <el-input-number v-model="score.htAway" :min="0" controls-position="right" style="width: 88px" />
-              </div>
-            </div>
-            <div class="score-block compact">
-              <span class="score-title">{{ t('settlement.ft_score') }}</span>
-              <div class="score-inputs">
-                <el-input-number v-model="score.ftHome" :min="0" controls-position="right" style="width: 88px" />
-                <span class="score-sep">—</span>
-                <el-input-number v-model="score.ftAway" :min="0" controls-position="right" style="width: 88px" />
-              </div>
-            </div>
-          </div>
-          <div class="action-row">
-            <!-- 智能比分入口已关闭
-            <el-button size="small" type="warning" plain @click="openSmartDialog">
-              {{ t('settlement.smart.btn') }}
-            </el-button>
-            -->
-            <el-button size="small" @click="recordScore">{{ t('settlement.record_score') }}</el-button>
-            <el-button type="primary" size="small" @click="previewSettlement">
+        <div class="settle-actions">
+          <template v-if="!isSettled">
+            <el-button
+              type="primary"
+              :loading="previewing"
+              @click="previewSettlement"
+            >
              {{ t('settlement.preview_btn') }}
            </el-button>
            <span class="preview-hint">{{ t('settlement.preview_hint') }}</span>
-            <template v-if="isSettled">
-              <el-input
-                v-model="resettleReason"
-                size="small"
-                :placeholder="t('settlement.resettle_reason')"
-                style="width: 200px"
-              />
-              <el-button type="warning" size="small" plain @click="previewResettlement">
-                {{ t('settlement.resettle_preview') }}
-              </el-button>
-            </template>
-          </div>
+          </template>
+          <template v-else>
+            <el-input
+              v-model="resettleReason"
+              size="small"
+              :placeholder="t('settlement.resettle_reason')"
+              class="settle-resettle-reason"
+            />
+            <el-button type="warning" plain @click="previewResettlement">
+              {{ t('settlement.resettle_preview') }}
+            </el-button>
+          </template>
        </div>
      </div>
    </el-card>
@@ -741,12 +730,27 @@ onMounted(() => {
  overflow: hidden;
 }

-.settle-top-row {
+.settle-score-row {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px 24px;
+  flex-wrap: wrap;
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid #2a2a2a;
+}
+
+.settle-actions {
  display: flex;
  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
+  gap: 10px;
  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.settle-resettle-reason {
+  width: 220px;
 }

 .match-inline {
@@ -789,14 +793,6 @@ onMounted(() => {
  margin-right: 4px;
 }

-.score-panel {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 12px 16px;
-  flex-shrink: 0;
-}
-
 .score-inline-group {
  display: flex;
  align-items: flex-end;
@@ -949,13 +945,6 @@ onMounted(() => {
  font-weight: 300;
 }

-.action-row {
-  display: flex;
-  gap: 8px;
-  flex-wrap: wrap;
-  align-items: center;
-}
-
 .preview-hint {
  font-size: 12px;
  color: var(--el-text-color-secondary);
--- a/apps/admin/src/views/dashboard/DashboardMatches.vue
+++ b/apps/admin/src/views/dashboard/DashboardMatches.vue
@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+import { useAdminDashboard } from '../../composables/useAdminDashboard';
+import EChartPanel from '../../components/dashboard/EChartPanel.vue';
+import { buildCombinedTrendOption, buildTriplePieOption } from '../../utils/dashboard-charts';
+import { betStatusLabel } from '../../utils/bet-labels';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+
+const { t } = useAdminLocale();
+const router = useRouter();
+const {
+  s,
+  loading,
+  loadError,
+  load,
+  formatTime,
+  toNum,
+  chartI18n,
+  trendLabels,
+  kpiPrimary,
+  fmtCount,
+} = useAdminDashboard();
+
+onMounted(() => {
+  void load();
+});
+
+type KpiLink = { path: string; query?: Record<string, string> };
+
+function goKpiLink(link: KpiLink) {
+  router.push(link.query ? { path: link.path, query: link.query } : link.path);
+}
+
+const mainTrendOption = computed(() =>
+  buildCombinedTrendOption(
+    trendLabels.value,
+    [
+      {
+        name: t('dash.chart_stake'),
+        color: '#248f54',
+        values: s.value?.trend7d?.map((d) => toNum(d.stake)) ?? [],
+      },
+      {
+        name: t('dash.chart_payout'),
+        color: '#60a5fa',
+        values: s.value?.trend7d?.map((d) => toNum(d.payout)) ?? [],
+      },
+      {
+        name: t('dash.chart_ggr'),
+        color: '#a78bfa',
+        values: s.value?.trend7d?.map((d) => toNum(d.ggr)) ?? [],
+      },
+    ],
+    s.value?.trend7d?.map((d) => d.betCount) ?? [],
+    chartI18n.value,
+  ),
+);
+
+const distributionOption = computed(() => {
+  const m = s.value?.matches;
+  const raw = s.value?.bets.todayByStatus ?? {};
+  const betColors: Record<string, string> = {
+    PENDING: '#fb923c',
+    WON: '#248f54',
+    LOST: '#f87171',
+    VOID: '#6b7280',
+    REFUNDED: '#60a5fa',
+  };
+
+  const matchSegs = m
+    ? [
+        { label: t('dash.match_draft'), value: m.draft, color: '#6b7280' },
+        { label: t('dash.match_published'), value: m.published, color: '#248f54' },
+        { label: t('dash.match_closed'), value: m.closed, color: '#60a5fa' },
+        { label: t('dash.match_pending_settle'), value: m.pendingSettlement, color: '#fb923c' },
+        { label: t('dash.match_settled'), value: m.settled ?? 0, color: '#5eead4' },
+      ].filter((x) => x.value > 0)
+    : [];
+
+  const betSegs = ['PENDING', 'WON', 'LOST', 'VOID', 'REFUNDED']
+    .filter((k) => raw[k]?.count)
+    .map((k) => ({
+      label: betStatusLabel(k),
+      value: raw[k].count,
+      color: betColors[k] ?? '#888',
+    }));
+
+  return buildTriplePieOption(
+    [
+      { title: t('dash.pie_matches'), segments: matchSegs },
+      { title: t('dash.pie_bets'), segments: betSegs },
+      { title: '', segments: [] },
+    ],
+    chartI18n.value,
+  );
+});
+
+const kpiMatch = computed(() => {
+  if (!s.value) return [];
+  const m = s.value.matches;
+  const pendingMatches = m.pendingSettlement ?? 0;
+  return [
+    {
+      label: t('dash.kpi_match_total'),
+      value: fmtCount(m.total),
+      sub: t('dash.kpi_match_total_sub', {
+        draft: fmtCount(m.draft),
+        published: fmtCount(m.published),
+      }),
+    },
+    {
+      label: t('dash.kpi_match_closed'),
+      value: fmtCount(m.closed),
+      sub: t('dash.kpi_match_closed_sub', { n: fmtCount(m.cancelled ?? 0) }),
+    },
+    {
+      label: t('dash.kpi_pending'),
+      value: `${fmtCount(s.value.bets.pendingTotal)} ${t('common.bets_unit')}`,
+      sub: t('dash.kpi_pending_sub', {
+        bets: fmtCount(s.value.bets.pendingTotal),
+        matches: fmtCount(pendingMatches),
+      }),
+      link:
+        pendingMatches > 0
+          ? { path: '/matches', query: { status: 'PENDING_SETTLEMENT' } }
+          : undefined,
+    },
+    {
+      label: t('dash.kpi_match_settled'),
+      value: fmtCount(m.settled ?? 0),
+      sub: t('dash.kpi_match_settled_sub'),
+    },
+  ];
+});
+</script>
+
+<template>
+  <div class="dashboard-page" v-loading="loading">
+    <el-card v-if="!loading && loadError" class="state-card" shadow="never">
+      <p class="state-title">{{ t('msg.load_failed') }}</p>
+      <p class="state-hint">{{ t('dash.load_error_hint') }}</p>
+      <el-button type="primary" size="small" @click="load(true)">{{ t('common.retry') }}</el-button>
+    </el-card>
+
+    <template v-else-if="s">
+      <el-card class="overview-board" shadow="never">
+        <div v-if="s.generatedAt" class="board-head">
+          <span class="board-hint">{{ t('dash.section_matches_hint') }}</span>
+          <span class="dash-updated">
+            {{ t('common.updated_at') }} {{ formatTime(s.generatedAt) }}
+          </span>
+        </div>
+
+        <div class="kpi-grid kpi-primary">
+          <div v-for="item in kpiPrimary" :key="item.label" class="kpi-cell">
+            <span class="kpi-label">{{ item.label }}</span>
+            <span class="kpi-value">{{ item.value }}</span>
+            <span class="kpi-sub">{{ item.sub }}</span>
+            <span
+              class="kpi-delta"
+              :class="{ up: item.delta.startsWith('+'), down: item.delta.startsWith('-') }"
+            >
+              {{ t('common.vs_yesterday') }} {{ item.delta }}
+            </span>
+          </div>
+        </div>
+
+        <div class="kpi-grid kpi-secondary">
+          <div
+            v-for="item in kpiMatch"
+            :key="item.label"
+            class="kpi-cell compact"
+            :class="{ 'kpi-cell--link': item.link }"
+            :role="item.link ? 'button' : undefined"
+            :tabindex="item.link ? 0 : undefined"
+            @click="item.link && goKpiLink(item.link)"
+            @keydown.enter.prevent="item.link && goKpiLink(item.link)"
+          >
+            <span class="kpi-label">{{ item.label }}</span>
+            <span class="kpi-value sm">{{ item.value }}</span>
+            <span class="kpi-sub">{{ item.sub }}</span>
+          </div>
+        </div>
+
+        <div class="charts-stack">
+          <EChartPanel title="" :option="mainTrendOption" height="300px" class="chart-main" />
+          <div class="chart-main-caption">{{ t('dash.trend_caption') }}</div>
+          <EChartPanel title="" :option="distributionOption" height="200px" class="chart-dist" />
+        </div>
+      </el-card>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+@import './dashboard-board.css';
+</style>
--- a/apps/admin/src/views/dashboard/DashboardPlayers.vue
+++ b/apps/admin/src/views/dashboard/DashboardPlayers.vue
@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { computed, onMounted } from 'vue';
+import { useAdminDashboard } from '../../composables/useAdminDashboard';
+import EChartPanel from '../../components/dashboard/EChartPanel.vue';
+import { buildTriplePieOption } from '../../utils/dashboard-charts';
+import { betStatusLabel } from '../../utils/bet-labels';
+import { formatAmount } from '../../utils/format-amount';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+
+const { t, locale, localeTag } = useAdminLocale();
+const {
+  s,
+  loading,
+  loadError,
+  load,
+  formatTime,
+  chartI18n,
+  fmtCount,
+} = useAdminDashboard();
+
+onMounted(() => {
+  void load();
+});
+
+const kpiPlayer = computed(() => {
+  if (!s.value) return [];
+  return [
+    {
+      label: t('dash.kpi_users'),
+      value: `${fmtCount(s.value.users.playersTotal)} / ${fmtCount(s.value.users.agentsTotal)}`,
+      sub: t('dash.kpi_new_players', { n: fmtCount(s.value.today.newPlayers) }),
+    },
+    {
+      label: t('dash.kpi_agents_active'),
+      value: fmtCount(s.value.users.agentsActive),
+      sub: t('dash.kpi_agents_active_sub', {
+        suspended: fmtCount(s.value.users.playersSuspended),
+      }),
+    },
+    {
+      label: t('dash.kpi_wallet'),
+      value: formatAmount(s.value.wallets.totalAvailable, 2, locale.value),
+      sub: `${t('common.frozen')} ${formatAmount(s.value.wallets.totalFrozen, 2, locale.value)}`,
+    },
+    {
+      label: t('dash.kpi_credit'),
+      value: formatAmount(s.value.agents.totalAvailableCredit, 2, locale.value),
+      sub: `${t('common.used')} ${formatAmount(s.value.agents.totalUsedCredit, 2, locale.value)}`,
+    },
+  ];
+});
+
+const userDistributionOption = computed(() => {
+  const u = s.value?.users;
+  const userSegs = u
+    ? [
+        { label: t('dash.user_active'), value: u.playersActive, color: '#248f54' },
+        { label: t('dash.user_suspended'), value: u.playersSuspended, color: '#f87171' },
+        { label: t('dash.user_direct'), value: u.playersDirect, color: '#60a5fa' },
+        { label: t('dash.user_agents'), value: u.agentsTotal, color: '#a78bfa' },
+      ].filter((x) => x.value > 0)
+    : [];
+
+  return buildTriplePieOption(
+    [
+      { title: t('dash.pie_users'), segments: userSegs },
+      { title: '', segments: [] },
+      { title: '', segments: [] },
+    ],
+    chartI18n.value,
+  );
+});
+
+function formatBetTime(v: string) {
+  return new Date(v).toLocaleString(localeTag.value, {
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+</script>
+
+<template>
+  <div class="dashboard-page" v-loading="loading">
+    <el-card v-if="!loading && loadError" class="state-card" shadow="never">
+      <p class="state-title">{{ t('msg.load_failed') }}</p>
+      <p class="state-hint">{{ t('dash.load_error_hint') }}</p>
+      <el-button type="primary" size="small" @click="load(true)">{{ t('common.retry') }}</el-button>
+    </el-card>
+
+    <template v-else-if="s">
+      <el-card class="overview-board" shadow="never">
+        <div v-if="s.generatedAt" class="board-head">
+          <span class="board-hint">{{ t('dash.section_players_hint') }}</span>
+          <span class="dash-updated">
+            {{ t('common.updated_at') }} {{ formatTime(s.generatedAt) }}
+          </span>
+        </div>
+
+        <div class="kpi-grid kpi-secondary">
+          <div v-for="item in kpiPlayer" :key="item.label" class="kpi-cell compact">
+            <span class="kpi-label">{{ item.label }}</span>
+            <span class="kpi-value sm">{{ item.value }}</span>
+            <span class="kpi-sub">{{ item.sub }}</span>
+          </div>
+        </div>
+
+        <div class="charts-stack">
+          <EChartPanel title="" :option="userDistributionOption" height="200px" class="chart-dist" />
+        </div>
+      </el-card>
+
+      <div class="recent-grid">
+        <el-card class="recent-card" shadow="never">
+          <h3 class="recent-title">{{ t('dash.recent_players') }}</h3>
+          <el-table :data="s.recentPlayers" stripe empty-text="—" size="small">
+            <el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
+            <el-table-column prop="parentUsername" :label="t('dash.col_parent')" min-width="100">
+              <template #default="{ row }">
+                {{ row.parentUsername || t('common.platform_direct') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" :label="t('common.status')" width="88" />
+            <el-table-column prop="createdAt" :label="t('user.col.created')" min-width="120">
+              <template #default="{ row }">
+                {{ formatBetTime(row.createdAt) }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+
+        <el-card class="recent-card" shadow="never">
+          <h3 class="recent-title">{{ t('dash.recent_bets') }}</h3>
+          <el-table :data="s.recentBets" stripe empty-text="—" size="small">
+            <el-table-column prop="betNo" :label="t('dash.col_bet_no')" min-width="120" />
+            <el-table-column prop="username" :label="t('user.col.username')" min-width="100" />
+            <el-table-column prop="stake" :label="t('dash.col_stake')" min-width="88">
+              <template #default="{ row }">
+                {{ formatAmount(row.stake, 2, locale) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="status" :label="t('common.status')" width="88">
+              <template #default="{ row }">
+                {{ betStatusLabel(row.status) }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="placedAt" :label="t('dash.col_placed_at')" min-width="120">
+              <template #default="{ row }">
+                {{ formatBetTime(row.placedAt) }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+@import './dashboard-board.css';
+
+.recent-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 16px;
+}
+
+.recent-card {
+  border-radius: 14px;
+  border: 1px solid #1e1e1e;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.recent-card :deep(.el-card__body) {
+  padding: 16px 18px 12px;
+}
+
+.recent-title {
+  margin: 0 0 12px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #ccc;
+}
+
+@media (max-width: 960px) {
+  .recent-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>
--- a/apps/admin/src/views/dashboard/dashboard-board.css
+++ b/apps/admin/src/views/dashboard/dashboard-board.css
@@ -0,0 +1,179 @@
+.dashboard-page {
+  padding-bottom: 32px;
+}
+
+.state-card {
+  border-radius: 14px;
+  border: 1px solid #2a2220;
+  background: rgba(255, 69, 58, 0.06);
+  text-align: center;
+  padding: 8px 0 4px;
+}
+
+.state-title {
+  font-size: 15px;
+  font-weight: 700;
+  color: #ff8a80;
+  margin-bottom: 6px;
+}
+
+.state-hint {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 14px;
+}
+
+.overview-board {
+  border-radius: 14px;
+  border: 1px solid #1e1e1e;
+  background: linear-gradient(180deg, rgba(36, 143, 84, 0.06) 0%, rgba(0, 0, 0, 0) 120px);
+  margin-bottom: 28px;
+}
+
+.overview-board :deep(.el-card__body) {
+  padding: 20px 22px 16px;
+}
+
+.board-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin: -4px 0 14px;
+  flex-wrap: wrap;
+}
+
+.board-hint {
+  font-size: 12px;
+  color: #666;
+}
+
+.dash-updated {
+  font-size: 11px;
+  color: #555;
+  letter-spacing: 0.02em;
+}
+
+.kpi-grid {
+  display: grid;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.kpi-primary {
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.kpi-secondary {
+  grid-template-columns: repeat(4, 1fr);
+  margin-bottom: 18px;
+}
+
+.kpi-cell {
+  padding: 12px 14px;
+  border-radius: 10px;
+  border: 1px solid #222;
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.kpi-cell.compact {
+  padding: 10px 12px;
+}
+
+.kpi-cell--link {
+  cursor: pointer;
+  transition: border-color 0.15s, background 0.15s;
+}
+
+.kpi-cell--link:hover,
+.kpi-cell--link:focus-visible {
+  border-color: rgba(77, 214, 138, 0.35);
+  background: rgba(36, 143, 84, 0.1);
+  outline: none;
+}
+
+.kpi-label {
+  display: block;
+  font-size: 11px;
+  color: #666;
+  margin-bottom: 6px;
+}
+
+.kpi-value {
+  display: block;
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--green-text);
+  line-height: 1.15;
+  letter-spacing: -0.5px;
+}
+
+.kpi-value.sm {
+  font-size: 17px;
+}
+
+.kpi-sub {
+  display: block;
+  font-size: 11px;
+  color: #555;
+  margin-top: 4px;
+}
+
+.kpi-delta {
+  display: inline-block;
+  margin-top: 6px;
+  font-size: 10px;
+  font-weight: 600;
+  color: #888;
+  padding: 2px 6px;
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.kpi-delta.up {
+  color: #4ade80;
+}
+
+.kpi-delta.down {
+  color: #f87171;
+}
+
+.charts-stack {
+  border-top: 1px solid #1a1a1a;
+  padding-top: 12px;
+}
+
+.chart-main-caption {
+  font-size: 11px;
+  color: #555;
+  text-align: center;
+  margin: -8px 0 8px;
+}
+
+.charts-stack :deep(.chart-panel) {
+  border: none;
+  background: transparent;
+  padding: 8px 0 0;
+}
+
+.charts-stack :deep(.chart-title:empty) {
+  display: none;
+}
+
+.chart-dist {
+  margin-top: 4px;
+}
+
+@media (max-width: 1200px) {
+  .kpi-primary,
+  .kpi-secondary {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 640px) {
+  .kpi-primary,
+  .kpi-secondary {
+    grid-template-columns: 1fr;
+  }
+}
--- a/apps/admin/src/views/match-form.ts
+++ b/apps/admin/src/views/match-form.ts
@@ -83,6 +83,8 @@ export type AdminMatchDetail = {
  isHot: boolean;
  displayOrder: number;
  startTime: string;
+  leagueId?: string;
+  leagueCode?: string;
  leagueEn: string;
  leagueZh: string;
  leagueMs: string;
@@ -127,7 +129,7 @@ export function normalizeStartTimeForApi(value: string): string {

 export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
  return {
-    leagueId: '',
+    leagueId: d.leagueId ?? '',
    leagueEn: d.leagueEn,
    leagueZh: d.leagueZh,
    leagueMs: d.leagueMs ?? '',
@@ -246,3 +248,47 @@ export function buildPlatformPayload(form: MatchCreateForm) {
    awayTeamLogoUrl: form.awayTeamLogoUrl.trim() || undefined,
  };
 }
+
+/** 编辑单场基本信息（不含联赛字段，联赛在赛事列表单独维护） */
+export function buildMatchUpdatePayload(form: MatchCreateForm) {
+  if (!form.startTime.trim()) {
+    throw new FormValidationError('err.kickoff_required');
+  }
+  const homeCode = form.homeTeamCode.trim().toUpperCase();
+  const awayCode = form.awayTeamCode.trim().toUpperCase();
+  if (homeCode && awayCode) {
+    if (homeCode === awayCode) {
+      throw new FormValidationError('err.teams_same');
+    }
+  } else if (homeCode || awayCode) {
+    throw new FormValidationError('err.team_country_required');
+  } else {
+    const homeOk = form.homeTeamZh.trim() || form.homeTeamEn.trim() || form.homeTeamMs.trim();
+    const awayOk = form.awayTeamZh.trim() || form.awayTeamEn.trim() || form.awayTeamMs.trim();
+    if (!homeOk || !awayOk) {
+      throw new FormValidationError('err.team_country_required');
+    }
+    const homeKey = `${form.homeTeamZh.trim()}|${form.homeTeamEn.trim()}|${form.homeTeamMs.trim()}`.toLowerCase();
+    const awayKey = `${form.awayTeamZh.trim()}|${form.awayTeamEn.trim()}|${form.awayTeamMs.trim()}`.toLowerCase();
+    if (homeKey === awayKey) {
+      throw new FormValidationError('err.teams_same');
+    }
+  }
+
+  return {
+    homeTeamEn: form.homeTeamEn.trim(),
+    homeTeamZh: form.homeTeamZh.trim(),
+    homeTeamMs: form.homeTeamMs.trim() || undefined,
+    awayTeamEn: form.awayTeamEn.trim(),
+    awayTeamZh: form.awayTeamZh.trim(),
+    awayTeamMs: form.awayTeamMs.trim() || undefined,
+    startTime: normalizeStartTimeForApi(form.startTime),
+    isHot: form.isHot,
+    displayOrder: form.displayOrder,
+    matchName: form.matchName.trim() || undefined,
+    stage: form.stage.trim() || undefined,
+    groupName: form.groupName.trim() || undefined,
+    homeTeamLogoUrl: form.homeTeamLogoUrl.trim() || undefined,
+    awayTeamLogoUrl: form.awayTeamLogoUrl.trim() || undefined,
+  };
+}
--- a/apps/admin/src/views/matches/LeagueMatchesPanel.vue
+++ b/apps/admin/src/views/matches/LeagueMatchesPanel.vue
@@ -193,11 +193,6 @@ defineExpose({ reload: load });

 <template>
  <div class="league-matches-panel">
-    <div class="panel-toolbar">
-      <el-button type="primary" size="small" @click="emit('add-match')">
-        {{ t('match.create_fixture_btn') }}
-      </el-button>
-    </div>
    <el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
      <el-table-column prop="id" label="ID" width="64" />
      <el-table-column :label="t('match.col.matchup')" min-width="180">
@@ -229,7 +224,15 @@ defineExpose({ reload: load });
          <span v-else class="bet-stat-zero">0</span>
        </template>
      </el-table-column>
-      <el-table-column :label="t('common.actions')" width="460" align="center">
+      <el-table-column width="460" align="center">
+        <template #header>
+          <div class="actions-col-header">
+            <span class="actions-col-header__label">{{ t('common.actions') }}</span>
+            <el-button type="primary" size="small" @click.stop="emit('add-match')">
+              {{ t('match.create_fixture_btn') }}
+            </el-button>
+          </div>
+        </template>
        <template #default="{ row }">
          <div class="action-btns">
            <div class="action-group">
@@ -299,8 +302,41 @@ defineExpose({ reload: load });
  padding: 10px 12px 12px;
  background: #0a0a0a;
 }
-.panel-toolbar {
-  margin-bottom: 8px;
+.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: 600;
+  color: #aaa;
+  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;
+}
+
+.nested-match-table :deep(.el-table__header .el-table__cell) {
+  padding: 6px 0;
+}
+
+.nested-match-table :deep(.el-table__header .cell) {
+  overflow: visible;
 }
 .empty-hint {
  font-size: 12px;
@@ -338,5 +374,15 @@ defineExpose({ reload: load });
  min-width: 52px;
  padding: 4px 10px !important;
  font-size: 12px !important;
+  border-radius: 6px;
+}
+
+.action-btns :deep(.el-button:not(.is-disabled):not(:disabled)) {
+  cursor: pointer;
+}
+
+.action-btns :deep(.el-button.is-disabled),
+.action-btns :deep(.el-button:disabled) {
+  cursor: not-allowed;
 }
 </style>
--- a/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
+++ b/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
+import LogoUrlField from '../../components/LogoUrlField.vue';
 import {
  BUILTIN_COUNTRIES,
  countryFlagUrl,
@@ -28,7 +29,7 @@ interface AddableTeam {
  logoUrl: string | null;
 }

-type AddFilter = 'fixture' | 'all';
+type AddFilter = 'all' | 'custom';
 type SortKey = 'rank' | 'name' | 'code' | 'odds' | 'saved_odds';
 type SortDir = 'asc' | 'desc';

@@ -57,13 +58,13 @@ const savingOdds = ref(false);
 const adding = ref(false);
 const matchId = ref('');
 const selections = ref<SelectionRow[]>([]);
-const addableFixtureTeams = ref<AddableTeam[]>([]);

 const addVisible = ref(false);
-const addFilter = ref<AddFilter>('fixture');
+const addFilter = ref<AddFilter>('all');
 const addSearch = ref('');
 const selectedCodes = ref<Set<string>>(new Set());
 const defaultOdds = ref(10);
+const customTeam = ref({ teamCode: '', teamZh: '', teamEn: '', logoUrl: '' });

 const batchMode = ref(false);
 const batchSelectedIds = ref<Set<string>>(new Set());
@@ -86,11 +87,7 @@ const allBuiltinAddable = computed<AddableTeam[]>(() =>
  })),
 );

-const sourceTeams = computed<AddableTeam[]>(() =>
-  addFilter.value === 'fixture'
-    ? addableFixtureTeams.value
-    : allBuiltinAddable.value,
-);
+const sourceTeams = computed<AddableTeam[]>(() => allBuiltinAddable.value);

 const visibleAddTeams = computed(() => {
  const q = addSearch.value.trim().toLowerCase();
@@ -143,6 +140,8 @@ async function load() {
    const { data } = await api.get(`/admin/leagues/${props.leagueId}/outright`);
    const payload = data.data as {
      id: string;
+      fixtureSyncAdded?: number;
+      fixtureSyncReopened?: number;
      selections: Array<{
        id: string;
        teamCode: string;
@@ -153,10 +152,8 @@ async function load() {
        odds: string;
        status: string;
      }>;
-      addableFixtureTeams?: AddableTeam[];
    };
    matchId.value = payload.id;
-    addableFixtureTeams.value = payload.addableFixtureTeams ?? [];
    selections.value = (payload.selections ?? [])
      .filter((s) => s.status === 'OPEN')
      .map((s) => ({
@@ -168,6 +165,10 @@ async function load() {
    batchSelectedIds.value = new Set(
      [...batchSelectedIds.value].filter((id) => openIds.has(id)),
    );
+    const added = payload.fixtureSyncAdded ?? 0;
+    if (added > 0) {
+      ElMessage.success(t('outright.fixture_sync_added', { n: added }));
+    }
  } catch (e: unknown) {
    const err = e as { response?: { data?: { error?: string } } };
    ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
@@ -176,23 +177,26 @@ async function load() {
  }
 }

+function resetCustomTeamForm() {
+  customTeam.value = { teamCode: '', teamZh: '', teamEn: '', logoUrl: '' };
+}
+
+function onCustomCodeInput(value: string) {
+  customTeam.value.teamCode = value.toUpperCase().replace(/[^A-Z0-9_]/g, '');
+}
+
 function openAddDialog() {
-  addFilter.value = 'fixture';
+  addFilter.value = 'all';
  addSearch.value = '';
  defaultOdds.value = 10;
-  selectedCodes.value = new Set(
-    addableFixtureTeams.value.map((team) => team.teamCode),
-  );
+  resetCustomTeamForm();
+  selectedCodes.value = new Set();
  addVisible.value = true;
 }

 function onAddFilterChange() {
  addSearch.value = '';
-  if (addFilter.value === 'fixture') {
-    selectedCodes.value = new Set(
-      addableFixtureTeams.value.map((team) => team.teamCode),
-    );
-  } else {
+  if (addFilter.value === 'all') {
    selectedCodes.value = new Set();
  }
 }
@@ -319,6 +323,58 @@ async function saveOdds() {
  }
 }

+async function submitCustomAdd() {
+  if (!matchId.value) return;
+  const code = customTeam.value.teamCode.trim().toUpperCase();
+  const teamZh = customTeam.value.teamZh.trim();
+  const teamEn = customTeam.value.teamEn.trim();
+  if (!code) {
+    ElMessage.warning(t('outright.add.err_code_required'));
+    return;
+  }
+  if (!teamZh && !teamEn) {
+    ElMessage.warning(t('outright.add.err_name_required'));
+    return;
+  }
+  if (defaultOdds.value <= 1) {
+    ElMessage.warning(t('outright.err_odds_min'));
+    return;
+  }
+  if (openTeamCodes.value.has(code)) {
+    ElMessage.warning(t('outright.add.err_duplicate'));
+    return;
+  }
+
+  adding.value = true;
+  try {
+    await api.post(`/admin/outrights/${matchId.value}/selections`, {
+      teamCode: code,
+      teamZh: teamZh || teamEn,
+      teamEn: teamEn || teamZh,
+      logoUrl: customTeam.value.logoUrl.trim() || undefined,
+      odds: defaultOdds.value,
+    });
+    ElMessage.success(t('msg.saved'));
+    addVisible.value = false;
+    resetCustomTeamForm();
+    await load();
+    emit('updated');
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    adding.value = false;
+  }
+}
+
+function onAddConfirm() {
+  if (addFilter.value === 'custom') {
+    void submitCustomAdd();
+    return;
+  }
+  void submitAdd();
+}
+
 async function submitAdd() {
  if (!matchId.value) return;
  if (selectedCodes.value.size === 0) {
@@ -331,10 +387,7 @@ async function submitAdd() {
  }

  const byCode = new Map(
-    [...addableFixtureTeams.value, ...allBuiltinAddable.value].map((team) => [
-      team.teamCode,
-      team,
-    ]),
+    allBuiltinAddable.value.map((team) => [team.teamCode, team]),
  );

  const items = [...selectedCodes.value]
@@ -578,17 +631,15 @@ watch(
    >
      <div class="add-teams-dialog__toolbar">
        <el-radio-group v-model="addFilter" size="small" @change="onAddFilterChange">
-          <el-radio-button value="fixture">
-            {{ t('outright.add.filter_fixture') }}
-            <span v-if="addableFixtureTeams.length" class="add-teams-dialog__badge">
-              {{ addableFixtureTeams.length }}
-            </span>
-          </el-radio-button>
          <el-radio-button value="all">
            {{ t('outright.add.filter_all') }}
          </el-radio-button>
+          <el-radio-button value="custom">
+            {{ t('outright.add.filter_custom') }}
+          </el-radio-button>
        </el-radio-group>
        <el-input
+          v-if="addFilter !== 'custom'"
          v-model="addSearch"
          size="small"
          clearable
@@ -597,6 +648,45 @@ watch(
        />
      </div>

+      <div v-if="addFilter === 'custom'" class="add-teams-dialog__custom">
+        <p class="add-teams-dialog__custom-hint">{{ t('outright.add.custom_hint') }}</p>
+        <el-form label-width="88px" label-position="left" @submit.prevent="onAddConfirm">
+          <el-form-item :label="t('outright.add.field_code')" required>
+            <el-input
+              :model-value="customTeam.teamCode"
+              size="small"
+              maxlength="32"
+              :placeholder="t('outright.add.ph_code')"
+              @update:model-value="onCustomCodeInput"
+            />
+          </el-form-item>
+          <el-form-item :label="t('match.field.lang_zh')">
+            <el-input v-model="customTeam.teamZh" size="small" :placeholder="t('outright.add.ph_name_zh')" />
+          </el-form-item>
+          <el-form-item :label="t('match.field.lang_en')">
+            <el-input v-model="customTeam.teamEn" size="small" :placeholder="t('outright.add.ph_name_en')" />
+          </el-form-item>
+          <el-form-item :label="t('outright.add.field_logo')">
+            <LogoUrlField
+              v-model="customTeam.logoUrl"
+              upload-only
+              upload-category="teams"
+            />
+          </el-form-item>
+          <el-form-item :label="t('outright.add.default_odds')" required>
+            <el-input-number
+              v-model="defaultOdds"
+              :min="1.01"
+              :step="0.05"
+              :precision="2"
+              size="small"
+              controls-position="right"
+            />
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <template v-else>
      <div class="add-teams-dialog__actions">
        <el-button size="small" link type="primary" @click="selectAllVisible">
          {{ t('outright.add.select_all') }}
@@ -645,20 +735,17 @@ watch(
        </button>
      </div>
      <p v-else class="add-teams-dialog__empty">
-        {{
-          addFilter === 'fixture'
-            ? t('outright.add.empty_fixture')
-            : t('outright.add.empty_all')
-        }}
+        {{ t('outright.add.empty_all') }}
      </p>
+      </template>

      <template #footer>
        <el-button @click="addVisible = false">{{ t('common.cancel') }}</el-button>
        <el-button
          type="primary"
          :loading="adding"
-          :disabled="selectedCount === 0"
-          @click="submitAdd"
+          :disabled="addFilter !== 'custom' && selectedCount === 0"
+          @click="onAddConfirm"
        >
          {{ t('common.confirm') }}
        </el-button>
@@ -980,6 +1067,25 @@ watch(
  color: #666;
 }

+.add-teams-dialog__custom {
+  margin-top: 4px;
+}
+
+.add-teams-dialog__custom-hint {
+  margin: 0 0 12px;
+  font-size: 12px;
+  color: #888;
+  line-height: 1.5;
+}
+
+.add-teams-dialog__custom :deep(.el-form-item) {
+  margin-bottom: 12px;
+}
+
+.add-teams-dialog__custom :deep(.el-form-item__label) {
+  color: #8e8e93;
+}
+
 .add-teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
--- a/apps/admin/src/views/matches/MatchEventEditor.vue
+++ b/apps/admin/src/views/matches/MatchEventEditor.vue
@@ -8,7 +8,7 @@ import api from '../../api';
 import LogoUrlField from '../../components/LogoUrlField.vue';
 import { countryDisplayName, type BuiltinCountry } from '../../data/builtinCountries';
 import {
-  buildPlatformPayload,
+  buildMatchUpdatePayload,
  emptyMatchForm,
  formFromDetail,
  type AdminMatchDetail,
@@ -70,9 +70,9 @@ async function load() {
 watch(matchId, load, { immediate: true });

 async function saveMeta() {
-  let payload: ReturnType<typeof buildPlatformPayload>;
+  let payload: ReturnType<typeof buildMatchUpdatePayload>;
  try {
-    payload = buildPlatformPayload(form.value);
+    payload = buildMatchUpdatePayload(form.value);
  } catch (e) {
    ElMessage.warning(resolveFormError(e, t));
    return;
@@ -108,31 +108,28 @@ async function saveMeta() {
      </div>

      <el-form label-width="72px" label-position="left" class="meta-form compact-form">
-        <div class="form-section">
+        <div class="form-section league-readonly-block">
          <div class="section-label">{{ t('matchEditor.group.league') }}</div>
-          <el-row :gutter="12">
-            <el-col :xs="24" :sm="8">
-              <el-form-item :label="t('match.field.lang_zh')">
-                <el-input v-model="form.leagueZh" size="small" />
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="8">
-              <el-form-item :label="t('match.field.lang_en')">
-                <el-input v-model="form.leagueEn" size="small" />
-              </el-form-item>
-            </el-col>
-            <el-col :xs="24" :sm="8">
-              <el-form-item :label="t('match.field.lang_ms')">
-                <el-input v-model="form.leagueMs" size="small" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <div class="logo-inline">
-                <span class="logo-inline-label">{{ t('matchEditor.field.league_logo') }}</span>
-                <LogoUrlField v-model="form.leagueLogoUrl" />
+          <p class="field-hint">{{ t('matchEditor.hint.league_readonly') }}</p>
+          <div class="league-readonly-grid">
+            <div v-if="form.leagueLogoUrl" class="league-readonly-logo">
+              <img :src="form.leagueLogoUrl" alt="" />
+            </div>
+            <div class="league-readonly-names">
+              <div v-if="form.leagueZh.trim()" class="league-readonly-line">
+                <span class="league-readonly-lang">{{ t('match.field.lang_zh') }}</span>
+                <span>{{ form.leagueZh }}</span>
              </div>
-            </el-col>
-          </el-row>
+              <div v-if="form.leagueEn.trim()" class="league-readonly-line">
+                <span class="league-readonly-lang">{{ t('match.field.lang_en') }}</span>
+                <span>{{ form.leagueEn }}</span>
+              </div>
+              <div v-if="form.leagueMs.trim()" class="league-readonly-line">
+                <span class="league-readonly-lang">{{ t('match.field.lang_ms') }}</span>
+                <span>{{ form.leagueMs }}</span>
+              </div>
+            </div>
+          </div>
        </div>

        <div class="form-section">
@@ -339,4 +336,45 @@ async function saveMeta() {
 .meta-form :deep(.el-input-number .el-input__inner) {
  color: #fff !important;
 }
+
+.field-hint {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #8e8e93;
+  line-height: 1.4;
+}
+
+.league-readonly-grid {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.league-readonly-logo img {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  border-radius: 6px;
+  background: #1a1a1a;
+}
+
+.league-readonly-names {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+
+.league-readonly-line {
+  display: flex;
+  gap: 8px;
+  font-size: 13px;
+  color: #ddd;
+}
+
+.league-readonly-lang {
+  flex: 0 0 28px;
+  color: #8e8e93;
+  font-size: 12px;
+}
 </style>