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>

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