feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化

管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。 API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-08 09:55:56 +08:00
parent efff7c27e6
commit 24fa1b275c
66 changed files with 6289 additions and 1426 deletions
--- a/apps/admin/src/views/Agents.vue
+++ b/apps/admin/src/views/Agents.vue
@@ -23,6 +23,7 @@ import {
  formatAmountFull,
  shouldCompactAmount as shouldCompact,
 } from '../utils/format-amount';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';

 const agents = ref<AgentRow[]>([]);
 const total = ref(0);
@@ -224,30 +225,34 @@ function creditTypeLabel(type: string) {

 <template>
  <div class="admin-list-page">
-  <div class="page-toolbar">
-    <el-button type="primary" @click="openCreate">{{ t('agent.create_btn') }}</el-button>
+  <div class="list-chrome">
+    <div class="list-chrome__row">
+      <el-form inline class="list-chrome__grow">
+        <el-form-item :label="t('common.keyword')">
+          <el-input
+            v-model="keyword"
+            :placeholder="t('agent.filter.username_ph')"
+            clearable
+            style="width: 180px"
+            @keyup.enter="load"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <div class="list-chrome__actions">
+        <el-button type="primary" @click="openCreate">{{ t('agent.create_btn') }}</el-button>
+      </div>
+    </div>
  </div>

-  <el-card class="filter-card" shadow="never">
-    <el-form inline>
-      <el-form-item :label="t('common.keyword')">
-        <el-input
-          v-model="keyword"
-          :placeholder="t('agent.filter.username_ph')"
-          clearable
-          style="width: 180px"
-          @keyup.enter="load"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-
-  <el-card class="data-card" shadow="never">
+  <section class="list-panel">
    <div class="table-wrap">
    <el-table :data="agents" stripe>
+      <template #empty>
+        <AdminTableEmpty />
+      </template>
      <el-table-column prop="userId" label="ID" width="72" />
      <el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
      <el-table-column :label="t('common.status')" width="88">
@@ -296,7 +301,7 @@ function creditTypeLabel(type: string) {
        @size-change="onSizeChange"
      />
    </div>
-  </el-card>
+  </section>

  <el-dialog v-model="createVisible" :title="t('agent.dialog.create')" width="520px" destroy-on-close>
    <el-form label-width="100px">
@@ -485,8 +490,6 @@ function creditTypeLabel(type: string) {
 </template>

 <style scoped>
-.filter-card { border-radius: 12px; }
-.data-card { border-radius: 12px; }
 .field-hint { font-size: 12px; color: #888; margin-top: 4px; }
 .detail-block { margin-bottom: 16px; }
 .section-title {
--- a/apps/admin/src/views/Audit.vue
+++ b/apps/admin/src/views/Audit.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted } from 'vue';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';

 const { t, locale, localeTag } = useAdminLocale();

@@ -89,6 +90,9 @@ function formatTime(v: string) {
    <el-card class="data-card" shadow="never">
      <div class="table-wrap">
        <el-table :key="locale" :data="logs" stripe>
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
          <el-table-column :label="t('audit.col.action')" min-width="140">
            <template #default="{ row }">{{ auditActionLabel(row.action) }}</template>
          </el-table-column>
--- a/apps/admin/src/views/Bets.vue
+++ b/apps/admin/src/views/Bets.vue
@@ -11,6 +11,7 @@ import {
  useBetFilterOptions,
 } from '../utils/bet-labels';
 import { useAdminLocale } from '../composables/useAdminLocale';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';

 const { t, localeTag } = useAdminLocale();
 const { statusOptions, typeOptions } = useBetFilterOptions();
@@ -33,6 +34,12 @@ const detailLoading = ref(false);

 onMounted(load);

+function betContentCounts(row: BetListRow) {
+  const singles = row.betType === 'SINGLE' ? 1 : 0;
+  const parlays = row.betType === 'PARLAY' ? 1 : 0;
+  return t('bet.content.bet_counts', { singles, parlays });
+}
+
 async function load() {
  const { data } = await api.get('/admin/bets', {
    params: {
@@ -164,6 +171,9 @@ async function openDetail(row: BetListRow) {
  <el-card class="data-card" shadow="never">
    <div class="table-wrap">
    <el-table :data="bets" stripe class="bets-table">
+      <template #empty>
+        <AdminTableEmpty />
+      </template>
      <el-table-column prop="id" :label="t('bet.col.serial')" width="64" align="center" />
      <el-table-column prop="betNo" :label="t('bet.col.bet_no')" min-width="200" show-overflow-tooltip>
        <template #default="{ row }">
@@ -179,28 +189,15 @@ async function openDetail(row: BetListRow) {
          <el-tag type="info" size="small" effect="plain">{{ betTypeLabel(row.betType) }}</el-tag>
        </template>
      </el-table-column>
-      <el-table-column :label="t('bet.col.content')" min-width="260">
+      <el-table-column :label="t('bet.col.content')" width="108" align="center">
        <template #default="{ row }">
          <el-tooltip
-            v-if="row.selectionPreviews?.length"
-            :content="row.selectionSummary || ''"
+            v-if="row.selectionSummary"
+            :content="row.selectionSummary"
            placement="top"
            :show-after="300"
          >
-            <div class="bet-content-cell">
-              <div
-                v-for="(leg, i) in (row.selectionPreviews ?? []).slice(0, 3)"
-                :key="i"
-                class="bet-leg-line"
-              >
-                <span class="bet-match">{{ leg.matchLabel }}</span>
-                <span class="bet-pick">{{ leg.selectionName }}</span>
-                <span class="bet-leg-odds">@{{ leg.odds }}</span>
-              </div>
-              <div v-if="(row.selectionPreviews?.length ?? 0) > 3" class="bet-leg-more">
-                {{ t('bet.legs_more', { n: (row.selectionPreviews?.length ?? 0) - 3 }) }}
-              </div>
-            </div>
+            <span class="bet-content-summary">{{ betContentCounts(row) }}</span>
          </el-tooltip>
          <span v-else class="bet-content-empty">—</span>
        </template>
@@ -345,38 +342,10 @@ async function openDetail(row: BetListRow) {
  min-width: 1380px;
 }

-.bet-content-cell {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 2px 0;
-}
-
-.bet-leg-line {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: baseline;
-  gap: 4px 6px;
-  font-size: 12px;
-  line-height: 1.35;
-}
-
-.bet-match {
-  color: #ddd;
-}
-
-.bet-pick {
-  color: var(--green-glow);
-}
-
-.bet-leg-odds {
-  color: #888;
-  font-size: 11px;
-}
-
-.bet-leg-more {
-  font-size: 11px;
-  color: #666;
+.bet-content-summary {
+  font-size: 13px;
+  color: #ccc;
+  white-space: nowrap;
 }

 .bet-content-empty {
--- a/apps/admin/src/views/Contents.vue
+++ b/apps/admin/src/views/Contents.vue
@@ -4,6 +4,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
 import type { TableInstance } from 'element-plus';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import api from '../api';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';

 const { t, localeTag } = useAdminLocale();

@@ -385,9 +386,11 @@ void load();
          row-key="id"
          stripe
          size="small"
-          empty-text="—"
          @selection-change="onSelectionChange"
        >
+          <template #empty>
+            <AdminTableEmpty />
+          </template>
          <el-table-column type="selection" width="44" :selectable="() => !saving" />
          <el-table-column prop="sortOrder" :label="t('content.col.sort')" width="64" align="center" />
          <el-table-column v-if="isBanner" :label="t('content.col.preview')" width="88" align="center">
--- a/apps/admin/src/views/Dashboard.vue
+++ b/apps/admin/src/views/Dashboard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue';
+import { useRouter } from 'vue-router';
 import api from '../api';
 import { formatAmount, formatAmountFull } from '../utils/format-amount';
 import type { AdminDashboard } from './dashboard-types';
@@ -9,22 +10,34 @@ import { betStatusLabel } from '../utils/bet-labels';
 import { useAdminLocale } from '../composables/useAdminLocale';

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

 const stats = ref<AdminDashboard | null>(null);
 const loading = ref(true);
+const loadError = ref(false);

 onMounted(load);

 async function load() {
  loading.value = true;
+  loadError.value = false;
  try {
    const { data } = await api.get('/admin/dashboard');
    stats.value = data.data as AdminDashboard;
+  } catch {
+    stats.value = null;
+    loadError.value = true;
  } finally {
    loading.value = false;
  }
 }

+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 s = computed(() => stats.value);

 function fmtCount(val: number | undefined) {
@@ -176,6 +189,7 @@ const kpiPrimary = computed(() => {

 const kpiSecondary = computed(() => {
  if (!s.value) return [];
+  const pendingMatches = s.value.matches.pendingSettlement ?? 0;
  return [
    {
      label: t('dash.kpi_users'),
@@ -187,8 +201,12 @@ const kpiSecondary = computed(() => {
      value: `${fmtCount(s.value.bets.pendingTotal)} ${t('common.bets_unit')}`,
      sub: t('dash.kpi_pending_sub', {
        bets: fmtCount(s.value.bets.pendingTotal),
-        matches: fmtCount(s.value.matches.pendingSettlement),
+        matches: fmtCount(pendingMatches),
      }),
+      link:
+        pendingMatches > 0
+          ? { path: '/matches', query: { status: 'PENDING_SETTLEMENT' } }
+          : undefined,
    },
    {
      label: t('dash.kpi_wallet'),
@@ -206,7 +224,13 @@ const kpiSecondary = computed(() => {

 <template>
  <div class="dashboard-page" v-loading="loading">
-    <template v-if="s">
+    <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">{{ 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="dash-updated">
@@ -229,7 +253,16 @@ const kpiSecondary = computed(() => {
        </div>

        <div class="kpi-grid kpi-secondary">
-          <div v-for="item in kpiSecondary" :key="item.label" class="kpi-cell compact">
+          <div
+            v-for="item in kpiSecondary"
+            :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>
@@ -249,6 +282,25 @@ const kpiSecondary = computed(() => {
 <style scoped>
 .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;
@@ -290,6 +342,16 @@ const kpiSecondary = computed(() => {
 .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;
--- a/apps/admin/src/views/Login.vue
+++ b/apps/admin/src/views/Login.vue
@@ -17,6 +17,7 @@ const { t } = useAdminLocale();
 const form = ref({ username: '', password: '' });
 const loading = ref(false);
 const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
+const isDev = import.meta.env.DEV;

 async function quickLogin(username: string, password: string) {
  loading.value = true;
@@ -81,17 +82,19 @@ async function login() {
              {{ loading ? '...' : t('login.submit') }}
            </button>

-            <div class="quick-label">{{ t('login.quick_label') }}</div>
-            <div class="quick-btns">
-              <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('admin', 'Admin@123')">
-                <span class="quick-role">{{ t('login.quick_admin') }}</span>
-                <span class="quick-acc">admin</span>
-              </button>
-              <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('agent1', 'Agent@123')">
-                <span class="quick-role">{{ t('login.quick_agent') }}</span>
-                <span class="quick-acc">agent1</span>
-              </button>
-            </div>
+            <template v-if="isDev">
+              <div class="quick-label">{{ t('login.quick_label') }}</div>
+              <div class="quick-btns">
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('admin', 'Admin@123')">
+                  <span class="quick-role">{{ t('login.quick_admin') }}</span>
+                  <span class="quick-acc">admin</span>
+                </button>
+                <button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('agent1', 'Agent@123')">
+                  <span class="quick-role">{{ t('login.quick_agent') }}</span>
+                  <span class="quick-acc">agent1</span>
+                </button>
+              </div>
+            </template>
          </div>
        </div>
      </form>
--- a/apps/admin/src/views/Matches.vue
+++ b/apps/admin/src/views/Matches.vue
@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+import { useRoute } from 'vue-router';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import { resolveFormError } from '../i18n/form-validation';
 import api from '../api';
 import { ElMessage } from 'element-plus';
 import LeagueMatchesPanel from './matches/LeagueMatchesPanel.vue';
-import LogoUrlField from '../components/LogoUrlField.vue';
-import { countryDisplayName, type BuiltinCountry } from '../data/builtinCountries';
+import MatchesSubNav from '../components/MatchesSubNav.vue';
+import CountryFlagSelect from '../components/outright/CountryFlagSelect.vue';
+import { getBuiltinCountry } from '../data/builtinCountries';
 import {
  readMatchesListUiState,
  writeMatchesListUiState,
@@ -15,10 +17,13 @@ import { formatAmount } from '../utils/format-amount';
 import {
  emptyMatchForm,
  buildPlatformPayload,
+  fillBuiltinTeam,
+  clearBuiltinTeam,
  type MatchCreateForm,
 } from './match-form.ts';

 const { t } = useAdminLocale();
+const route = useRoute();
 const leagues = ref<unknown[]>([]);
 const total = ref(0);
 const page = ref(1);
@@ -94,7 +99,16 @@ function onSearch() {
  load();
 }

-onMounted(() => load({ restoreExpand: true }));
+onMounted(() => {
+  const qStatus = route.query.status;
+  if (typeof qStatus === 'string' && qStatus.trim()) {
+    filterStatus.value = qStatus.trim();
+    page.value = 1;
+    load();
+    return;
+  }
+  load({ restoreExpand: true });
+});
 onBeforeUnmount(persistListUiState);

 function onPageChange(p: number) {
@@ -138,25 +152,13 @@ async function submitCreateLeague() {
  }
 }

-function applyTeamFromCountry(side: 'home' | 'away', country: BuiltinCountry) {
-  const msName = countryDisplayName(country, 'ms-MY');
-  if (side === 'home') {
-    if (!form.value.homeTeamZh.trim()) form.value.homeTeamZh = country.nameZh;
-    if (!form.value.homeTeamEn.trim()) form.value.homeTeamEn = country.nameEn;
-    if (!form.value.homeTeamMs.trim()) form.value.homeTeamMs = msName;
-  } else {
-    if (!form.value.awayTeamZh.trim()) form.value.awayTeamZh = country.nameZh;
-    if (!form.value.awayTeamEn.trim()) form.value.awayTeamEn = country.nameEn;
-    if (!form.value.awayTeamMs.trim()) form.value.awayTeamMs = msName;
+function onTeamCodeChange(side: 'home' | 'away', code: string) {
+  if (!code?.trim()) {
+    clearBuiltinTeam(form.value, side);
+    return;
  }
-}
-
-function draftTeamCode(side: 'home' | 'away') {
-  const en = side === 'home' ? form.value.homeTeamEn : form.value.awayTeamEn;
-  const zh = side === 'home' ? form.value.homeTeamZh : form.value.awayTeamZh;
-  const name = (en || zh).trim();
-  if (!name) return '';
-  return `NAME_${name.replace(/[^a-zA-Z0-9]+/g, '_').replace(/^_|_$/g, '').toUpperCase().slice(0, 48)}`;
+  const country = getBuiltinCountry(code);
+  if (country) fillBuiltinTeam(form.value, side, country);
 }

 function openCreateFixture(leagueRow: unknown) {
@@ -266,6 +268,14 @@ function leagueTitle(row: unknown) {
  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);
 }
@@ -290,42 +300,51 @@ function leaguePendingBets(row: unknown) {
 function isLeagueExpanded(id: string) {
  return expandedRowKeys.value.includes(id);
 }
+
 </script>

 <template>
  <div class="admin-list-page matches-page">
-  <div class="page-toolbar">
-    <el-button @click="openImport">{{ t('common.import') }}</el-button>
-    <el-button type="primary" @click="openCreateLeague">{{ t('match.create_btn') }}</el-button>
+  <div class="list-chrome">
+    <div class="list-chrome__row">
+      <div class="list-chrome__left">
+        <MatchesSubNav embedded />
+        <div class="list-chrome__filters">
+          <div class="list-chrome__field">
+            <span class="list-chrome__label">{{ t('common.keyword') }}</span>
+            <el-input
+              v-model="keyword"
+              :placeholder="t('match.filter.keyword_ph')"
+              clearable
+              style="width: 200px"
+              @keyup.enter="load"
+            />
+          </div>
+          <div class="list-chrome__field">
+            <span class="list-chrome__label">{{ t('common.status') }}</span>
+            <el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
+              <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>
+          <el-button type="primary" class="list-chrome__submit" @click="onSearch">
+            {{ t('common.search') }}
+          </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>

-  <el-card class="filter-card" shadow="never">
-    <el-form inline>
-      <el-form-item :label="t('common.keyword')">
-        <el-input
-          v-model="keyword"
-          :placeholder="t('match.filter.keyword_ph')"
-          clearable
-          style="width: 200px"
-          @keyup.enter="load"
-        />
-      </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('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.SETTLED')" value="SETTLED" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button type="primary" @click="onSearch">{{ t('common.search') }}</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-
-  <el-card class="data-card" shadow="never">
-    <p class="table-hint">{{ t('match.expand_league_hint') }}</p>
+  <section class="list-panel">
+    <p class="list-hint">{{ t('match.expand_league_hint') }}</p>
    <div class="table-wrap">
    <el-table
      :data="leagues"
@@ -338,18 +357,19 @@ function isLeagueExpanded(id: string) {
    >
      <el-table-column type="expand" width="40">
        <template #default="{ row }">
-          <LeagueMatchesPanel
-            v-if="isLeagueExpanded(leagueId(row))"
-            :league-id="leagueId(row)"
-            :filter-status="filterStatus"
-            :keyword="keyword"
-            @changed="() => load({ keepExpand: true })"
-            @add-match="openCreateFixture(row)"
-          />
+          <template v-if="isLeagueExpanded(leagueId(row))">
+            <LeagueMatchesPanel
+              :league-id="leagueId(row)"
+              :filter-status="filterStatus"
+              :keyword="keyword"
+              @changed="() => load({ keepExpand: true })"
+              @add-match="openCreateFixture(row)"
+            />
+          </template>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="ID" width="72" />
-      <el-table-column :label="t('match.col.league')" min-width="220">
+      <el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
        <template #default="{ row }">
          <div class="league-cell">
            <img
@@ -358,10 +378,15 @@ function isLeagueExpanded(id: string) {
              alt=""
              class="league-logo"
            />
-            <span class="matchup-link">{{ leagueTitle(row) }}</span>
+            <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>
+        </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>
@@ -381,7 +406,7 @@ 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="100">
+      <el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
        <template #default="{ row }">{{ rowOf(row).code }}</template>
      </el-table-column>
    </el-table>
@@ -398,7 +423,7 @@ function isLeagueExpanded(id: string) {
        @size-change="onSizeChange"
      />
    </div>
-  </el-card>
+  </section>

  <el-dialog v-model="createLeagueVisible" :title="t('match.dialog.create_league')" width="520px" destroy-on-close>
    <el-form label-width="96px">
@@ -451,36 +476,20 @@ function isLeagueExpanded(id: string) {
          style="width: 100%"
        />
      </el-form-item>
-      <el-form-item :label="t('match.field.home_en')">
-        <el-input v-model="form.homeTeamEn" :placeholder="t('match.ph.home_en')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.home_zh')">
-        <el-input v-model="form.homeTeamZh" :placeholder="t('match.ph.home_zh')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.home_ms')">
-        <el-input v-model="form.homeTeamMs" :placeholder="t('match.ph.home_ms')" />
-      </el-form-item>
-      <el-form-item :label="t('matchEditor.field.home_logo')">
-        <LogoUrlField
-          v-model="form.homeTeamLogoUrl"
-          :team-code="draftTeamCode('home')"
-          @pick="applyTeamFromCountry('home', $event)"
+      <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_en')">
-        <el-input v-model="form.awayTeamEn" :placeholder="t('match.ph.away_en')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.away_zh')">
-        <el-input v-model="form.awayTeamZh" :placeholder="t('match.ph.away_zh')" />
-      </el-form-item>
-      <el-form-item :label="t('match.field.away_ms')">
-        <el-input v-model="form.awayTeamMs" :placeholder="t('match.ph.away_ms')" />
-      </el-form-item>
-      <el-form-item :label="t('matchEditor.field.away_logo')">
-        <LogoUrlField
-          v-model="form.awayTeamLogoUrl"
-          :team-code="draftTeamCode('away')"
-          @pick="applyTeamFromCountry('away', $event)"
+      <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.featured')">
@@ -511,16 +520,16 @@ function isLeagueExpanded(id: string) {
 </template>

 <style scoped>
-.filter-card { border-radius: 12px; }
-.data-card {
-  border-radius: 12px;
-}
 .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;
 }
@@ -534,61 +543,25 @@ function isLeagueExpanded(id: string) {
  margin-bottom: 16px;
 }

-.action-btns {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 4px;
-  justify-content: center;
-  align-items: center;
-}
-
-.action-btns :deep(.action-btn) {
-  margin: 0 !important;
-  min-width: 52px;
-  padding: 4px 8px !important;
-  font-size: 12px !important;
-  background: #1a1a1a !important;
-  border-color: #333 !important;
-  color: #bbb !important;
-}
-
-.action-btns :deep(.action-btn:not(.is-disabled):hover) {
-  background: #252525 !important;
-  border-color: #444 !important;
-  color: #fff !important;
-}
-
-.action-btns :deep(.action-btn.is-disabled) {
-  background: #121212 !important;
-  border-color: #252525 !important;
-  color: #444 !important;
-  opacity: 1 !important;
-  cursor: not-allowed !important;
-}
-
-.table-hint {
-  font-size: 12px;
-  color: #666;
-  margin: 0 0 10px;
-  line-height: 1.5;
-  flex-shrink: 0;
-}
-
 /* 列表表格随内容增高，滚动交给外层 table-wrap（仅赛事行） */
 .matches-page .table-wrap .el-table {
  height: auto !important;
 }
+.matches-page .table-wrap :deep(.el-table__header),
+.matches-page .table-wrap :deep(.el-table__body) {
+  width: 100% !important;
+}

 .matches-page :deep(.el-table__expanded-cell) {
  padding: 0 !important;
  background: #0a0a0a;
 }

-.data-card :deep(.row-expandable) {
+.list-panel :deep(.row-expandable) {
  cursor: pointer;
 }

-.data-card :deep(.row-no-expand .el-table__expand-icon) {
+.list-panel :deep(.row-no-expand .el-table__expand-icon) {
  visibility: hidden;
  pointer-events: none;
 }
@@ -617,6 +590,11 @@ function isLeagueExpanded(id: string) {
  flex-shrink: 0;
 }

+.league-en {
+  color: #aaa;
+  font-size: 13px;
+}
+
 .league-readonly {
  color: var(--green-text);
  font-weight: 500;
--- a/apps/admin/src/views/MatchesOutrights.vue
+++ b/apps/admin/src/views/MatchesOutrights.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue';
+import { useRoute } 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,
+} from '../utils/matchesListState.ts';
+
+const { t } = useAdminLocale();
+const route = useRoute();
+
+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: '',
+    keyword: keyword.value,
+  });
+}
+
+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 };
+
+async function load(options: LoadOptions = {}) {
+  const saved = options.restoreExpand ? readMatchesListUiState() : null;
+  if (saved) {
+    page.value = saved.page;
+    pageSize.value = saved.pageSize;
+    keyword.value = saved.keyword;
+  }
+
+  const { data } = await api.get('/admin/leagues', {
+    params: {
+      page: page.value,
+      pageSize: pageSize.value,
+      keyword: keyword.value.trim() || undefined,
+    },
+  });
+  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() {
+  const qLeague = route.query.leagueId;
+  if (typeof qLeague === 'string' && qLeague.trim()) {
+    expandedRowKeys.value = [qLeague.trim()];
+    persistListUiState();
+    return;
+  }
+  const qMatch = route.query.matchId;
+  if (typeof qMatch === 'string' && qMatch.trim()) {
+    try {
+      const { data } = await api.get(`/admin/outrights/${qMatch.trim()}`);
+      const lid = data.data?.leagueId as string | undefined;
+      if (lid) {
+        expandedRowKeys.value = [lid];
+        persistListUiState();
+      }
+    } catch {
+      /* ignore */
+    }
+  }
+}
+
+onMounted(async () => {
+  await load({ restoreExpand: true });
+  await resolveExpandFromQuery();
+});
+onBeforeUnmount(persistListUiState);
+
+function onPageChange(p: number) {
+  page.value = p;
+  load({ keepExpand: true });
+}
+
+function onSizeChange(size: number) {
+  pageSize.value = size;
+  page.value = 1;
+  load({ keepExpand: true });
+}
+
+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;
+  const id = leagueId(row);
+  expandedRowKeys.value = expandedRowKeys.value.includes(id) ? [] : [id];
+  persistListUiState();
+}
+
+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 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 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="list-chrome">
+      <div class="list-chrome__row">
+        <div class="list-chrome__left">
+          <MatchesSubNav embedded />
+          <div class="list-chrome__filters">
+            <div class="list-chrome__field">
+              <span class="list-chrome__label">{{ t('common.keyword') }}</span>
+              <el-input
+                v-model="keyword"
+                :placeholder="t('match.filter.keyword_ph')"
+                clearable
+                style="width: 200px"
+                @keyup.enter="onSearch"
+              />
+            </div>
+            <el-button type="primary" class="list-chrome__submit" @click="onSearch">
+              {{ t('common.search') }}
+            </el-button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <section class="list-panel">
+      <p class="list-hint">{{ t('match.expand_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"
+        >
+          <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 prop="id" label="ID" width="72" />
+          <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>
+            </template>
+          </el-table-column>
+          <el-table-column :label="t('outright.col.teams_total')" width="120" align="center">
+            <template #default="{ row }">{{ outrightTeamCount(row) }}</template>
+          </el-table-column>
+          <el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
+            <template #default="{ row }">{{ rowOf(row).code }}</template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <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>
+.matches-page .table-wrap .el-table {
+  height: auto !important;
+}
+.matches-page .table-wrap :deep(.el-table__header),
+.matches-page .table-wrap :deep(.el-table__body) {
+  width: 100% !important;
+}
+.matches-page :deep(.el-table__expanded-cell) {
+  padding: 0 !important;
+  background: #0a0a0a;
+}
+.list-panel :deep(.row-expandable) {
+  cursor: pointer;
+}
+.matchup-link {
+  color: var(--green-text);
+}
+.league-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.league-logo {
+  width: 28px;
+  height: 28px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+.league-en {
+  color: #aaa;
+  font-size: 13px;
+}
+</style>
--- a/apps/admin/src/views/Settlement.vue
+++ b/apps/admin/src/views/Settlement.vue
@@ -18,6 +18,7 @@ import {
 } from '../utils/bet-labels';
 import { adminSelectionLabel } from '../utils/adminSelectionLabel.ts';
 import type { AdminMatchDetail } from './match-form.ts';
+import AdminSubNav from '../components/AdminSubNav.vue';

 interface SettlementBetStats {
  summary: {
@@ -82,7 +83,6 @@ const previewPageSize = ref(10);
 // 智能比分推荐已暂时关闭（后端 smart-score.solver.ts 保留，恢复时接回 UI 与 POST /settlement/smart-score）

 const matchId = computed(() => String(route.params.id ?? ''));
-
 type PreviewItem = {
  betNo: string;
  betType: string;
@@ -295,7 +295,7 @@ async function loadMatch() {
    };
    if (detail.isOutright) {
      ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/outrights');
+      router.replace('/matches');
      return;
    }
    match.value = detail;
@@ -407,10 +407,6 @@ async function confirm() {
  await loadMatch();
 }

-function goBack() {
-  router.push('/matches');
-}
-
 onMounted(() => {
  void loadMatch();
 });
@@ -418,14 +414,14 @@ onMounted(() => {

 <template>
  <div v-loading="loading" class="settlement-page">
-    <div class="page-header">
-      <div class="header-left">
-        <el-button size="small" text @click="goBack">← {{ t('settlement.back') }}</el-button>
-        <h2 class="page-title">{{ t('page.settlement.title') }}</h2>
-        <span class="page-id">#{{ matchId }}</span>
-      </div>
-      <el-tag v-if="match" size="small" type="info">{{ statusLabel }}</el-tag>
-    </div>
+    <AdminSubNav
+      :title="t('page.settlement.title')"
+      :subtitle="`#${matchId}`"
+    >
+      <template #extra>
+        <el-tag v-if="match" size="small" type="info">{{ statusLabel }}</el-tag>
+      </template>
+    </AdminSubNav>

    <el-card v-if="match" class="settle-top-card" shadow="never">
      <p v-if="leagueLabel" class="match-league">{{ leagueLabel }}</p>
@@ -708,35 +704,6 @@ onMounted(() => {
  overflow: hidden;
 }

-.page-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  flex-shrink: 0;
-}
-
-.header-left {
-  display: flex;
-  align-items: baseline;
-  gap: 12px;
-  flex-wrap: wrap;
-}
-
-.page-title {
-  font-size: 20px;
-  font-weight: 700;
-  color: #e8e8e8;
-  margin: 0;
-}
-
-.page-id {
-  font-size: 13px;
-  color: #666;
-  font-family: monospace;
-}
-
 .settle-top-card,
 .preview-card {
  flex-shrink: 0;
--- a/apps/admin/src/views/Users.vue
+++ b/apps/admin/src/views/Users.vue
@@ -21,6 +21,7 @@ import {
  formatAmountFull,
  shouldCompactAmount as shouldCompact,
 } from '../utils/format-amount';
+import AdminTableEmpty from '../components/AdminTableEmpty.vue';

 const users = ref<PlayerRow[]>([]);
 const total = ref(0);
@@ -57,6 +58,7 @@ const bettingLimits = ref({
 });
 const settingsSaving = ref(false);
 const limitsSaving = ref(false);
+const settingsCollapseOpen = ref<string[]>([]);

 onMounted(() => {
  loadAgentOptions();
@@ -319,106 +321,107 @@ function statusLabel(s: string) {

 <template>
  <div class="admin-list-page users-page">
-  <div class="page-toolbar">
-    <el-button type="primary" @click="openCreate">{{ t('user.create_btn') }}</el-button>
-  </div>
+  <el-collapse 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('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>
+    </el-collapse-item>
+  </el-collapse>

-  <el-card class="settings-card" shadow="never">
-    <div class="global-settings">
-      <span class="settings-title">{{ t('user.global_settings') }}</span>
-      <span class="settings-desc">{{ t('user.global_settings_hint') }}</span>
-      <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"
+  <div class="list-chrome">
+    <div class="list-chrome__row">
+      <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: 160px"
+            @keyup.enter="load"
          />
        </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 :label="t('user.filter.agent')">
+          <el-select
+            v-model="filterParentId"
+            :placeholder="t('user.filter.agent_ph')"
+            clearable
+            style="width: 180px"
+          >
+            <el-option
+              v-for="a in agentOptions"
+              :key="a.id"
+              :label="a.username"
+              :value="a.id"
+            />
+          </el-select>
        </el-form-item>
-      </el-form>
-    </div>
-  </el-card>
-
-  <el-card class="settings-card" shadow="never">
-    <div class="global-settings">
-      <span class="settings-title">{{ t('user.betting_limits') }}</span>
-      <span class="settings-desc">{{ t('user.betting_limits_hint') }}</span>
-      <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 :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" :loading="limitsSaving" @click="saveBettingLimits">
-            {{ t('common.save') }}
-          </el-button>
+          <el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
        </el-form-item>
      </el-form>
+      <div class="list-chrome__actions">
+        <el-button type="primary" @click="openCreate">{{ t('user.create_btn') }}</el-button>
+      </div>
    </div>
-  </el-card>
+  </div>

-  <el-card class="filter-card" shadow="never">
-    <el-form inline>
-      <el-form-item :label="t('common.keyword')">
-        <el-input
-          v-model="keyword"
-          :placeholder="t('user.filter.username_ph')"
-          clearable
-          style="width: 160px"
-          @keyup.enter="load"
-        />
-      </el-form-item>
-      <el-form-item :label="t('user.filter.agent')">
-        <el-select
-          v-model="filterParentId"
-          :placeholder="t('user.filter.agent_ph')"
-          clearable
-          style="width: 180px"
-        >
-          <el-option
-            v-for="a in agentOptions"
-            :key="a.id"
-            :label="a.username"
-            :value="a.id"
-          />
-        </el-select>
-      </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="load">{{ t('common.search') }}</el-button>
-      </el-form-item>
-    </el-form>
-  </el-card>
-
-  <el-card class="data-card" shadow="never">
+  <section class="list-panel">
    <div class="table-wrap">
    <el-table :data="users" stripe>
+      <template #empty>
+        <AdminTableEmpty />
+      </template>
      <el-table-column prop="id" label="ID" width="72" />
      <el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
      <el-table-column :label="t('common.status')" width="88">
@@ -505,7 +508,7 @@ function statusLabel(s: string) {
        @size-change="onSizeChange"
      />
    </div>
-  </el-card>
+  </section>

  <el-dialog v-model="createVisible" :title="t('user.dialog.create')" width="520px" destroy-on-close>
    <el-form label-width="100px">
@@ -740,33 +743,15 @@ function statusLabel(s: string) {
 </template>

 <style scoped>
-.filter-card { margin-bottom: 12px; border-radius: 12px; }
-.settings-card { margin-bottom: 12px; border-radius: 12px; }
-.data-card { border-radius: 12px; }
-.pager { margin-top: 16px; display: flex; justify-content: flex-end; }
+.settings-form :deep(.el-form-item) {
+  margin-bottom: 0;
+  margin-right: 12px;
+}
 .field-hint { font-size: 12px; color: #888; margin-top: 4px; }
 .inline-hint { margin-top: 0; margin-left: 10px; display: inline-block; }
 .amount-compact { white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
 .amount-full-hint { font-size: 11px; color: #666; margin-left: 4px; }
 .text-muted { color: #666; font-size: 12px; }
-.global-settings {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 8px 20px;
-}
-.settings-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: #ccc;
-  margin-right: 4px;
-}
-.settings-desc {
-  font-size: 12px;
-  color: #888;
-  flex: 1;
-  min-width: 200px;
-}
 .password-mgmt-block {
  margin: 4px 0 10px;
  padding: 10px 12px;
@@ -794,10 +779,6 @@ function statusLabel(s: string) {
 .block-hint {
  margin: -4px 0 8px;
 }
-.settings-form :deep(.el-form-item) {
-  margin-bottom: 0;
-  margin-right: 16px;
-}
 .edit-meta {
  display: flex;
  align-items: center;
--- a/apps/admin/src/views/match-form.ts
+++ b/apps/admin/src/views/match-form.ts
@@ -1,5 +1,11 @@
 /** 后台手动新增赛事（投注平台最小字段） */

+import {
+  countryDisplayName,
+  countryLogoUrl,
+  hasCountryCrest,
+  type BuiltinCountry,
+} from '../data/builtinCountries';
 import { FormValidationError } from '../i18n/form-validation';

 export interface MatchCreateForm {
@@ -8,6 +14,8 @@ export interface MatchCreateForm {
  leagueZh: string;
  leagueMs: string;
  startTime: string;
+  homeTeamCode: string;
+  awayTeamCode: string;
  homeTeamZh: string;
  homeTeamEn: string;
  homeTeamMs: string;
@@ -31,6 +39,8 @@ export function emptyMatchForm(): MatchCreateForm {
    leagueZh: '2026 世界杯',
    leagueMs: 'Piala Dunia 2026',
    startTime: '',
+    homeTeamCode: '',
+    awayTeamCode: '',
    homeTeamZh: '',
    homeTeamEn: '',
    homeTeamMs: '',
@@ -122,6 +132,8 @@ export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
    leagueZh: d.leagueZh,
    leagueMs: d.leagueMs ?? '',
    startTime: normalizeStartTimeForPicker(d.startTime),
+    homeTeamCode: d.homeTeamCode ?? '',
+    awayTeamCode: d.awayTeamCode ?? '',
    homeTeamZh: d.homeTeamZh,
    homeTeamEn: d.homeTeamEn,
    homeTeamMs: d.homeTeamMs ?? '',
@@ -139,19 +151,67 @@ export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
  };
 }

+export function fillBuiltinTeam(
+  form: MatchCreateForm,
+  side: 'home' | 'away',
+  country: BuiltinCountry,
+) {
+  const msName = countryDisplayName(country, 'ms-MY');
+  const logo = countryLogoUrl(country, hasCountryCrest(country) ? 'crest' : 'flag');
+  if (side === 'home') {
+    form.homeTeamCode = country.code;
+    form.homeTeamZh = country.nameZh;
+    form.homeTeamEn = country.nameEn;
+    form.homeTeamMs = msName;
+    form.homeTeamLogoUrl = logo;
+  } else {
+    form.awayTeamCode = country.code;
+    form.awayTeamZh = country.nameZh;
+    form.awayTeamEn = country.nameEn;
+    form.awayTeamMs = msName;
+    form.awayTeamLogoUrl = logo;
+  }
+}
+
+export function clearBuiltinTeam(form: MatchCreateForm, side: 'home' | 'away') {
+  if (side === 'home') {
+    form.homeTeamCode = '';
+    form.homeTeamZh = '';
+    form.homeTeamEn = '';
+    form.homeTeamMs = '';
+    form.homeTeamLogoUrl = '';
+  } else {
+    form.awayTeamCode = '';
+    form.awayTeamZh = '';
+    form.awayTeamEn = '';
+    form.awayTeamMs = '';
+    form.awayTeamLogoUrl = '';
+  }
+}
+
 export function buildPlatformPayload(form: MatchCreateForm) {
  if (!form.startTime.trim()) {
    throw new FormValidationError('err.kickoff_required');
  }
-  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.teams_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');
+  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');
+    }
  }
  if (
    !form.leagueId.trim() &&
@@ -167,6 +227,8 @@ export function buildPlatformPayload(form: MatchCreateForm) {
    leagueEn: form.leagueEn.trim(),
    leagueZh: form.leagueZh.trim(),
    leagueMs: form.leagueMs.trim() || undefined,
+    homeTeamCode: homeCode || undefined,
+    awayTeamCode: awayCode || undefined,
    homeTeamEn: form.homeTeamEn.trim(),
    homeTeamZh: form.homeTeamZh.trim(),
    homeTeamMs: form.homeTeamMs.trim() || undefined,
--- a/apps/admin/src/views/matches/LeagueMatchesPanel.vue
+++ b/apps/admin/src/views/matches/LeagueMatchesPanel.vue
@@ -229,27 +229,63 @@ defineExpose({ reload: load });
          <span v-else class="bet-stat-zero">0</span>
        </template>
      </el-table-column>
-      <el-table-column :label="t('common.actions')" width="420" align="center">
+      <el-table-column :label="t('common.actions')" width="460" align="center">
        <template #default="{ row }">
          <div class="action-btns">
-            <el-button size="small" class="action-btn" :disabled="!canManage(row)" @click="openManage(matchId(row))">
-              {{ t('matchEditor.manage_btn') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canManage(row)" @click="openMarkets(matchId(row))">
-              {{ t('match.btn.markets') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canDeleteRow(row)" @click="confirmDelete(row)">
+            <div class="action-group">
+              <el-button
+                size="small"
+                type="primary"
+                :disabled="!canManage(row)"
+                @click="openManage(matchId(row))"
+              >
+                {{ t('matchEditor.manage_btn') }}
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                plain
+                :disabled="!canManage(row)"
+                @click="openMarkets(matchId(row))"
+              >
+                {{ t('match.btn.markets') }}
+              </el-button>
+            </div>
+            <div class="action-group">
+              <el-button
+                size="small"
+                type="success"
+                :disabled="!canPublishRow(row)"
+                @click="publish(matchId(row))"
+              >
+                {{ t('common.publish') }}
+              </el-button>
+              <el-button
+                size="small"
+                type="warning"
+                :disabled="!canCloseRow(row)"
+                @click="close(matchId(row))"
+              >
+                {{ t('common.close_betting') }}
+              </el-button>
+              <el-button
+                size="small"
+                type="primary"
+                :disabled="!canSettleRow(row)"
+                @click="settle(matchId(row))"
+              >
+                {{ t('common.settle') }}
+              </el-button>
+            </div>
+            <el-button
+              size="small"
+              type="danger"
+              plain
+              :disabled="!canDeleteRow(row)"
+              @click="confirmDelete(row)"
+            >
              {{ t('common.delete') }}
            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canPublishRow(row)" @click="publish(matchId(row))">
-              {{ t('common.publish') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canCloseRow(row)" @click="close(matchId(row))">
-              {{ t('common.close_betting') }}
-            </el-button>
-            <el-button size="small" class="action-btn" :disabled="!canSettleRow(row)" @click="settle(matchId(row))">
-              {{ t('common.settle') }}
-            </el-button>
          </div>
        </template>
      </el-table-column>
@@ -284,13 +320,23 @@ defineExpose({ reload: load });
 .action-btns {
  display: flex;
  flex-wrap: wrap;
-  gap: 4px;
+  align-items: center;
+  gap: 6px 8px;
  justify-content: center;
 }
-.action-btns :deep(.action-btn) {
+.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);
+}
+.action-btns :deep(.el-button) {
  margin: 0 !important;
  min-width: 52px;
-  padding: 4px 8px !important;
+  padding: 4px 10px !important;
  font-size: 12px !important;
 }
 </style>
--- a/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
+++ b/apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
@@ -0,0 +1,1051 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import api from '../../api';
+import {
+  BUILTIN_COUNTRIES,
+  countryFlagUrl,
+  teamRowDisplayName,
+} from '../../data/builtinCountries';
+
+interface SelectionRow {
+  id: string;
+  teamCode: string;
+  rank: number;
+  teamZh: string;
+  teamEn: string;
+  logoUrl: string | null;
+  odds: string;
+  status: string;
+  editOdds: number;
+}
+
+interface AddableTeam {
+  teamCode: string;
+  teamZh: string;
+  teamEn: string;
+  logoUrl: string | null;
+}
+
+type AddFilter = 'fixture' | 'all';
+type SortKey = 'rank' | 'name' | 'code' | 'odds' | 'saved_odds';
+type SortDir = 'asc' | 'desc';
+
+function teamFlagUrl(row: { teamCode: string; logoUrl?: string | null }): string {
+  const custom = row.logoUrl?.trim();
+  if (custom) return custom;
+  return countryFlagUrl(row.teamCode);
+}
+
+const props = defineProps<{
+  leagueId: string;
+}>();
+
+const emit = defineEmits<{
+  updated: [];
+}>();
+
+const { t, locale } = useAdminLocale();
+
+function teamDisplayName(row: { teamCode: string; teamZh: string; teamEn: string }) {
+  return teamRowDisplayName(row, locale.value);
+}
+
+const loading = ref(false);
+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 addSearch = ref('');
+const selectedCodes = ref<Set<string>>(new Set());
+const defaultOdds = ref(10);
+
+const batchMode = ref(false);
+const batchSelectedIds = ref<Set<string>>(new Set());
+const batchOdds = ref(10);
+const batchRemoving = ref(false);
+
+const sortBy = ref<SortKey>('rank');
+const sortDir = ref<SortDir>('asc');
+
+const openTeamCodes = computed(
+  () => new Set(selections.value.map((s) => s.teamCode.toUpperCase())),
+);
+
+const allBuiltinAddable = computed<AddableTeam[]>(() =>
+  BUILTIN_COUNTRIES.filter((c) => !openTeamCodes.value.has(c.code)).map((c) => ({
+    teamCode: c.code,
+    teamZh: c.nameZh,
+    teamEn: c.nameEn,
+    logoUrl: null,
+  })),
+);
+
+const sourceTeams = computed<AddableTeam[]>(() =>
+  addFilter.value === 'fixture'
+    ? addableFixtureTeams.value
+    : allBuiltinAddable.value,
+);
+
+const visibleAddTeams = computed(() => {
+  const q = addSearch.value.trim().toLowerCase();
+  if (!q) return sourceTeams.value;
+  return sourceTeams.value.filter(
+    (team) =>
+      team.teamCode.toLowerCase().includes(q) ||
+      team.teamZh.toLowerCase().includes(q) ||
+      team.teamEn.toLowerCase().includes(q),
+  );
+});
+
+const selectedCount = computed(() => selectedCodes.value.size);
+const batchSelectedCount = computed(() => batchSelectedIds.value.size);
+
+const sortedSelections = computed(() => {
+  const rows = [...selections.value];
+  const dir = sortDir.value === 'asc' ? 1 : -1;
+  const loc = locale.value;
+  rows.sort((a, b) => {
+    let cmp = 0;
+    switch (sortBy.value) {
+      case 'rank':
+        cmp = a.rank - b.rank;
+        break;
+      case 'name':
+        cmp = teamRowDisplayName(a, loc).localeCompare(teamRowDisplayName(b, loc), loc);
+        break;
+      case 'code':
+        cmp = a.teamCode.localeCompare(b.teamCode);
+        break;
+      case 'odds':
+        cmp = a.editOdds - b.editOdds;
+        break;
+      case 'saved_odds':
+        cmp =
+          (Number.parseFloat(a.odds) || 0) - (Number.parseFloat(b.odds) || 0);
+        break;
+    }
+    if (cmp === 0) cmp = a.teamCode.localeCompare(b.teamCode);
+    return cmp * dir;
+  });
+  return rows;
+});
+
+async function load() {
+  if (!props.leagueId) return;
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/admin/leagues/${props.leagueId}/outright`);
+    const payload = data.data as {
+      id: string;
+      selections: Array<{
+        id: string;
+        teamCode: string;
+        rank: number;
+        teamZh: string;
+        teamEn: string;
+        logoUrl?: string | null;
+        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) => ({
+        ...s,
+        logoUrl: s.logoUrl ?? null,
+        editOdds: Number.parseFloat(s.odds) || 10,
+      }));
+    const openIds = new Set(selections.value.map((s) => s.id));
+    batchSelectedIds.value = new Set(
+      [...batchSelectedIds.value].filter((id) => openIds.has(id)),
+    );
+  } 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;
+  }
+}
+
+function openAddDialog() {
+  addFilter.value = 'fixture';
+  addSearch.value = '';
+  defaultOdds.value = 10;
+  selectedCodes.value = new Set(
+    addableFixtureTeams.value.map((team) => team.teamCode),
+  );
+  addVisible.value = true;
+}
+
+function onAddFilterChange() {
+  addSearch.value = '';
+  if (addFilter.value === 'fixture') {
+    selectedCodes.value = new Set(
+      addableFixtureTeams.value.map((team) => team.teamCode),
+    );
+  } else {
+    selectedCodes.value = new Set();
+  }
+}
+
+function toggleTeam(code: string) {
+  const next = new Set(selectedCodes.value);
+  if (next.has(code)) next.delete(code);
+  else next.add(code);
+  selectedCodes.value = next;
+}
+
+function selectAllVisible() {
+  selectedCodes.value = new Set(
+    visibleAddTeams.value.map((team) => team.teamCode),
+  );
+}
+
+function clearSelection() {
+  selectedCodes.value = new Set();
+}
+
+function toggleBatchMode() {
+  batchMode.value = !batchMode.value;
+  if (!batchMode.value) batchSelectedIds.value = new Set();
+}
+
+function toggleBatchSelect(id: string) {
+  const next = new Set(batchSelectedIds.value);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  batchSelectedIds.value = next;
+}
+
+function selectAllBatch() {
+  batchSelectedIds.value = new Set(selections.value.map((row) => row.id));
+}
+
+function clearBatchSelection() {
+  batchSelectedIds.value = new Set();
+}
+
+function applyBatchOdds() {
+  if (batchSelectedIds.value.size === 0) {
+    ElMessage.warning(t('outright.batch.err_none'));
+    return;
+  }
+  if (batchOdds.value <= 1) {
+    ElMessage.warning(t('outright.err_odds_min'));
+    return;
+  }
+  for (const row of selections.value) {
+    if (batchSelectedIds.value.has(row.id)) row.editOdds = batchOdds.value;
+  }
+  ElMessage.success(
+    t('outright.batch.apply_ok', { n: batchSelectedIds.value.size }),
+  );
+}
+
+async function batchRemove() {
+  if (!matchId.value) return;
+  if (batchSelectedIds.value.size === 0) {
+    ElMessage.warning(t('outright.batch.err_none'));
+    return;
+  }
+  try {
+    await ElMessageBox.confirm(
+      t('outright.batch.confirm_remove', { n: batchSelectedIds.value.size }),
+      { type: 'warning' },
+    );
+  } catch {
+    return;
+  }
+
+  batchRemoving.value = true;
+  const ids = [...batchSelectedIds.value];
+  let ok = 0;
+  let fail = 0;
+  try {
+    for (const id of ids) {
+      try {
+        await api.delete(`/admin/outrights/${matchId.value}/selections/${id}`);
+        ok++;
+      } catch {
+        fail++;
+      }
+    }
+    if (fail === 0) {
+      ElMessage.success(t('outright.batch.remove_ok', { n: ok }));
+    } else {
+      ElMessage.warning(t('outright.batch.remove_partial', { ok, fail }));
+    }
+    batchSelectedIds.value = new Set();
+    await load();
+    emit('updated');
+  } finally {
+    batchRemoving.value = false;
+  }
+}
+
+async function saveOdds() {
+  if (!matchId.value) return;
+  for (const row of selections.value) {
+    if (row.editOdds <= 1) {
+      ElMessage.warning(t('outright.err_odds_min'));
+      return;
+    }
+  }
+  savingOdds.value = true;
+  try {
+    await api.put(`/admin/outrights/${matchId.value}/odds`, {
+      updates: selections.value.map((row) => ({
+        selectionId: row.id,
+        odds: row.editOdds,
+      })),
+    });
+    ElMessage.success(t('msg.outright_odds_saved'));
+    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 {
+    savingOdds.value = false;
+  }
+}
+
+async function submitAdd() {
+  if (!matchId.value) return;
+  if (selectedCodes.value.size === 0) {
+    ElMessage.warning(t('outright.add.err_none'));
+    return;
+  }
+  if (defaultOdds.value <= 1) {
+    ElMessage.warning(t('outright.err_odds_min'));
+    return;
+  }
+
+  const byCode = new Map(
+    [...addableFixtureTeams.value, ...allBuiltinAddable.value].map((team) => [
+      team.teamCode,
+      team,
+    ]),
+  );
+
+  const items = [...selectedCodes.value]
+    .map((code) => byCode.get(code))
+    .filter((team): team is AddableTeam => !!team)
+    .map((team) => ({
+      teamCode: team.teamCode,
+      teamZh: team.teamZh,
+      teamEn: team.teamEn,
+      logoUrl: team.logoUrl?.trim() || undefined,
+      odds: defaultOdds.value,
+    }));
+
+  if (!items.length) {
+    ElMessage.warning(t('outright.add.err_none'));
+    return;
+  }
+
+  adding.value = true;
+  try {
+    const { data } = await api.post(
+      `/admin/outrights/${matchId.value}/selections/batch`,
+      { items },
+    );
+    const batch = (data.data as { batchResult?: { added: number; skipped: number } })
+      ?.batchResult;
+    if (batch) {
+      ElMessage.success(
+        t('msg.outright_teams_added', {
+          n: batch.added,
+          skipped: batch.skipped,
+        }),
+      );
+    } else {
+      ElMessage.success(t('msg.saved'));
+    }
+    addVisible.value = false;
+    selectedCodes.value = new Set();
+    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;
+  }
+}
+
+async function removeSelection(row: SelectionRow) {
+  if (!matchId.value) return;
+  try {
+    await ElMessageBox.confirm(
+      t('outright.confirm_remove', { name: teamDisplayName(row) }),
+      { type: 'warning' },
+    );
+  } catch {
+    return;
+  }
+  loading.value = true;
+  try {
+    await api.delete(`/admin/outrights/${matchId.value}/selections/${row.id}`);
+    ElMessage.success(t('msg.saved'));
+    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 {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.leagueId,
+  () => {
+    void load();
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <div v-loading="loading" class="outright-odds-panel">
+    <div class="outright-odds-panel__head">
+      <p class="outright-odds-panel__hint">{{ t('outright.odds_only_hint') }}</p>
+      <div class="outright-odds-panel__actions">
+        <el-button
+          v-if="selections.length"
+          :type="batchMode ? 'warning' : 'default'"
+          plain
+          size="small"
+          @click="toggleBatchMode"
+        >
+          {{ batchMode ? t('outright.batch.exit') : t('outright.batch.mode') }}
+        </el-button>
+        <el-button type="primary" plain size="small" @click="openAddDialog">
+          {{ t('outright.btn.add_team') }}
+        </el-button>
+        <el-button
+          type="primary"
+          size="small"
+          :loading="savingOdds"
+          :disabled="selections.length === 0"
+          @click="saveOdds"
+        >
+          {{ t('outright.btn.save_odds') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div v-if="batchMode && selections.length" class="outright-odds-panel__batch">
+      <el-button size="small" link type="primary" @click="selectAllBatch">
+        {{ t('outright.add.select_all') }}
+      </el-button>
+      <el-button size="small" link @click="clearBatchSelection">
+        {{ t('outright.add.clear_selection') }}
+      </el-button>
+      <span class="outright-odds-panel__batch-count">
+        {{ t('outright.add.selected_count', { n: batchSelectedCount }) }}
+      </span>
+      <label class="outright-odds-panel__batch-odds">
+        {{ t('outright.add.default_odds') }}
+        <el-input-number
+          v-model="batchOdds"
+          :min="1.01"
+          :step="0.05"
+          :precision="2"
+          size="small"
+          controls-position="right"
+          @click.stop
+        />
+      </label>
+      <el-button
+        size="small"
+        :disabled="batchSelectedCount === 0"
+        @click="applyBatchOdds"
+      >
+        {{ t('outright.batch.apply_odds') }}
+      </el-button>
+      <el-button
+        size="small"
+        type="danger"
+        plain
+        :loading="batchRemoving"
+        :disabled="batchSelectedCount === 0"
+        @click="batchRemove"
+      >
+        {{ t('outright.batch.remove') }}
+      </el-button>
+    </div>
+
+    <div v-if="selections.length" class="outright-odds-panel__sort">
+      <span class="outright-odds-panel__sort-label">{{ t('outright.sort.label') }}</span>
+      <el-select v-model="sortBy" size="small" class="outright-odds-panel__sort-by">
+        <el-option value="rank" :label="t('outright.sort.rank')" />
+        <el-option value="name" :label="t('outright.sort.name')" />
+        <el-option value="code" :label="t('outright.sort.code')" />
+        <el-option value="odds" :label="t('outright.sort.odds')" />
+        <el-option value="saved_odds" :label="t('outright.sort.saved_odds')" />
+      </el-select>
+      <el-select v-model="sortDir" size="small" class="outright-odds-panel__sort-dir">
+        <el-option value="asc" :label="t('outright.sort.asc')" />
+        <el-option value="desc" :label="t('outright.sort.desc')" />
+      </el-select>
+    </div>
+
+    <div v-if="selections.length" class="team-list-scroll">
+      <div class="team-list">
+        <div
+          v-for="row in sortedSelections"
+          :key="row.id"
+          class="team-row-wrap"
+          :class="{
+            'team-row-wrap--batch': batchMode,
+            'team-row-wrap--batch-selected': batchMode && batchSelectedIds.has(row.id),
+          }"
+          @click="batchMode ? toggleBatchSelect(row.id) : undefined"
+        >
+          <article class="team-row">
+            <span
+              v-if="batchMode && batchSelectedIds.has(row.id)"
+              class="team-row__check"
+              aria-hidden="true"
+            >✓</span>
+            <div class="team-row__head">
+              <span class="team-row__rank">{{ row.rank }}</span>
+              <img
+                v-if="teamFlagUrl(row)"
+                :src="teamFlagUrl(row)"
+                :alt="teamDisplayName(row)"
+                class="team-row__flag"
+              />
+              <div class="team-row__names">
+                <span class="team-row__name" :title="teamDisplayName(row)">
+                  {{ teamDisplayName(row) }}
+                </span>
+                <span class="team-row__meta">{{ row.teamCode }}</span>
+              </div>
+            </div>
+            <div class="team-row__right" @click.stop>
+              <div class="team-row__odds-row">
+                <span class="team-row__odds-label">{{ t('outright.col.odds') }}</span>
+                <el-input-number
+                  v-model="row.editOdds"
+                  class="team-row__odds"
+                  :min="1.01"
+                  :max="9999"
+                  :step="0.01"
+                  :precision="2"
+                  size="small"
+                  controls-position="right"
+                />
+              </div>
+            </div>
+          </article>
+          <button
+            v-if="!batchMode"
+            type="button"
+            class="team-row__trash"
+            :title="t('common.delete')"
+            :aria-label="t('common.delete')"
+            @click.stop="removeSelection(row)"
+          >
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                fill="currentColor"
+                d="M9 3a1 1 0 0 0-.894.553L7.382 6H4a1 1 0 1 0 0 2h1v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h1a1 1 0 1 0 0-2h-3.382l-.724-2.447A1 1 0 0 0 15 3H9zm2 5a1 1 0 0 1 2 0v9a1 1 0 1 1-2 0V8zm4 0a1 1 0 0 1 2 0v9a1 1 0 1 1-2 0V8z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <p v-else class="outright-odds-panel__empty">{{ t('outright.empty_no_teams') }}</p>
+
+    <el-dialog
+      v-model="addVisible"
+      :title="t('outright.btn.add_team')"
+      width="640px"
+      class="add-teams-dialog"
+    >
+      <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-group>
+        <el-input
+          v-model="addSearch"
+          size="small"
+          clearable
+          class="add-teams-dialog__search"
+          :placeholder="t('outright.add.search_ph')"
+        />
+      </div>
+
+      <div class="add-teams-dialog__actions">
+        <el-button size="small" link type="primary" @click="selectAllVisible">
+          {{ t('outright.add.select_all') }}
+        </el-button>
+        <el-button size="small" link @click="clearSelection">
+          {{ t('outright.add.clear_selection') }}
+        </el-button>
+        <span class="add-teams-dialog__count">
+          {{ t('outright.add.selected_count', { n: selectedCount }) }}
+        </span>
+        <label class="add-teams-dialog__odds">
+          {{ t('outright.add.default_odds') }}
+          <el-input-number
+            v-model="defaultOdds"
+            :min="1.01"
+            :step="0.05"
+            :precision="2"
+            size="small"
+            controls-position="right"
+          />
+        </label>
+      </div>
+
+      <div v-if="visibleAddTeams.length" class="add-teams-grid">
+        <button
+          v-for="team in visibleAddTeams"
+          :key="team.teamCode"
+          type="button"
+          class="add-team-pick"
+          :class="{ 'add-team-pick--selected': selectedCodes.has(team.teamCode) }"
+          @click="toggleTeam(team.teamCode)"
+        >
+          <span
+            v-if="selectedCodes.has(team.teamCode)"
+            class="add-team-pick__check"
+            aria-hidden="true"
+          >✓</span>
+          <img
+            v-if="teamFlagUrl(team)"
+            :src="teamFlagUrl(team)"
+            :alt="teamDisplayName(team)"
+            class="add-team-pick__flag"
+          />
+          <span class="add-team-pick__name">{{ teamDisplayName(team) }}</span>
+          <span class="add-team-pick__code">{{ team.teamCode }}</span>
+        </button>
+      </div>
+      <p v-else class="add-teams-dialog__empty">
+        {{
+          addFilter === 'fixture'
+            ? t('outright.add.empty_fixture')
+            : t('outright.add.empty_all')
+        }}
+      </p>
+
+      <template #footer>
+        <el-button @click="addVisible = false">{{ t('common.cancel') }}</el-button>
+        <el-button
+          type="primary"
+          :loading="adding"
+          :disabled="selectedCount === 0"
+          @click="submitAdd"
+        >
+          {{ t('common.confirm') }}
+        </el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style scoped>
+.outright-odds-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 12px 16px 16px;
+  border-bottom: 1px solid #1a1a1a;
+}
+.outright-odds-panel__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  margin-bottom: 12px;
+}
+.outright-odds-panel__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.outright-odds-panel__hint {
+  margin: 0;
+  font-size: 12px;
+  color: #777;
+  line-height: 1.5;
+}
+.outright-odds-panel__batch {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  margin-bottom: 10px;
+  padding: 8px 10px;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+}
+.outright-odds-panel__batch-count {
+  font-size: 12px;
+  color: #888;
+}
+.outright-odds-panel__batch-odds {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  font-size: 12px;
+  color: #aaa;
+}
+.outright-odds-panel__sort {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+  margin-bottom: 8px;
+}
+.outright-odds-panel__sort-label {
+  font-size: 12px;
+  color: #888;
+  white-space: nowrap;
+}
+.outright-odds-panel__sort-by {
+  width: 132px;
+}
+.outright-odds-panel__sort-dir {
+  width: 96px;
+}
+.outright-odds-panel__empty {
+  margin: 0;
+  padding: 16px 0;
+  font-size: 13px;
+  color: #666;
+  text-align: center;
+}
+
+.team-list-scroll {
+  max-height: min(440px, calc(100vh - 300px));
+  overflow-y: auto;
+  padding-right: 4px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
+}
+
+.team-list-scroll::-webkit-scrollbar {
+  width: 6px;
+}
+
+.team-list-scroll::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.16);
+  border-radius: 3px;
+}
+
+.team-list {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.team-row-wrap {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
+.team-row-wrap--batch {
+  cursor: pointer;
+}
+
+.team-row {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  flex: 1;
+  padding: 8px 10px 8px 8px;
+  background: #111;
+  border: 1px solid #262626;
+  border-radius: 8px;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.team-row-wrap:hover .team-row {
+  border-color: #3a3a3a;
+}
+
+.team-row-wrap--batch-selected .team-row {
+  border-color: var(--el-color-primary);
+  background: rgba(64, 158, 255, 0.08);
+}
+
+.team-row__trash {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #666;
+  cursor: pointer;
+  transition:
+    color 0.15s ease,
+    background 0.15s ease;
+}
+
+.team-row__trash svg {
+  width: 16px;
+  height: 16px;
+}
+
+.team-row__trash:hover {
+  color: #f56c6c;
+  background: rgba(245, 108, 108, 0.12);
+}
+
+.team-row__trash:focus-visible {
+  outline: 2px solid rgba(245, 108, 108, 0.45);
+  outline-offset: 1px;
+}
+
+.team-row__check {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  font-size: 12px;
+  color: var(--el-color-primary);
+}
+
+.team-row__head {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+.team-row__right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.team-row__rank {
+  flex-shrink: 0;
+  width: 16px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #555;
+  text-align: center;
+}
+
+.team-row__flag {
+  flex-shrink: 0;
+  width: 28px;
+  height: 20px;
+  object-fit: cover;
+  border-radius: 3px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
+}
+
+.team-row__names {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+  flex: 1;
+}
+
+.team-row__name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #e8e8e8;
+  line-height: 1.3;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.team-row__meta {
+  font-size: 10px;
+  color: #666;
+  line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.team-row__odds-row {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+
+.team-row__odds-label {
+  font-size: 10px;
+  color: #666;
+  line-height: 1.2;
+  white-space: nowrap;
+  text-align: right;
+}
+
+.team-row__odds {
+  width: 72px;
+}
+
+.team-row__odds :deep(.el-input-number) {
+  width: 72px;
+}
+
+.add-teams-dialog__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  margin-bottom: 10px;
+}
+
+.add-teams-dialog__search {
+  flex: 1;
+  min-width: 160px;
+}
+
+.add-teams-dialog__badge {
+  margin-left: 4px;
+  font-size: 11px;
+  opacity: 0.75;
+}
+
+.add-teams-dialog__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #262626;
+}
+
+.add-teams-dialog__count {
+  margin-left: auto;
+  font-size: 12px;
+  color: #888;
+}
+
+.add-teams-dialog__odds {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: #aaa;
+}
+
+.add-teams-dialog__empty {
+  margin: 0;
+  padding: 24px 0;
+  text-align: center;
+  font-size: 13px;
+  color: #666;
+}
+
+.add-teams-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  gap: 8px;
+  max-height: 360px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+
+.add-team-pick {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 10px 8px 8px;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: #141414;
+  cursor: pointer;
+  transition:
+    border-color 0.15s ease,
+    background 0.15s ease;
+}
+
+.add-team-pick:hover {
+  border-color: #3d3d3d;
+}
+
+.add-team-pick--selected {
+  border-color: var(--el-color-primary);
+  background: rgba(64, 158, 255, 0.08);
+}
+
+.add-team-pick__check {
+  position: absolute;
+  top: 6px;
+  right: 6px;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--el-color-primary);
+}
+
+.add-team-pick__flag {
+  width: 36px;
+  height: 24px;
+  object-fit: cover;
+  border-radius: 3px;
+}
+
+.add-team-pick__name {
+  font-size: 12px;
+  font-weight: 600;
+  color: #e0e0e0;
+  text-align: center;
+  line-height: 1.25;
+}
+
+.add-team-pick__code {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  color: #555;
+}
+</style>
--- a/apps/admin/src/views/matches/LeagueOutrightPanel.vue
+++ b/apps/admin/src/views/matches/LeagueOutrightPanel.vue
@@ -0,0 +1,226 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { useAdminLocale } from '../../composables/useAdminLocale';
+import api from '../../api';
+
+export interface LeagueOutrightSummary {
+  id: string;
+  leagueId: string;
+  leagueCode: string;
+  status: string;
+  selectionCount: number;
+  playerVisible: boolean;
+  playerHiddenReason: string | null;
+  canImportCanonical: boolean;
+  matchName: string;
+}
+
+interface SelectionPreview {
+  rank: number;
+  teamZh: string;
+  teamCode: string;
+  odds: string;
+}
+
+const props = defineProps<{
+  leagueId: string;
+  event: LeagueOutrightSummary | null;
+}>();
+
+const emit = defineEmits<{
+  updated: [];
+  create: [];
+}>();
+
+const { t } = useAdminLocale();
+const router = useRouter();
+
+const loading = ref(false);
+const applying = ref(false);
+const selections = ref<SelectionPreview[]>([]);
+const hiddenReason = ref<string | null>(null);
+
+function hiddenTip(reason: string | null) {
+  if (!reason) return '';
+  return t(`outright.hidden_reason.${reason}`);
+}
+
+function goEdit() {
+  if (!props.event) return;
+  router.push({ name: 'admin-outright-edit', params: { matchId: props.event.id } });
+}
+
+async function loadDetail() {
+  if (!props.event) {
+    selections.value = [];
+    hiddenReason.value = null;
+    return;
+  }
+  loading.value = true;
+  try {
+    const { data } = await api.get(`/admin/outrights/${props.event.id}`);
+    const payload = data.data as {
+      playerHiddenReason: string | null;
+      selections: SelectionPreview[];
+    };
+    hiddenReason.value = payload.playerHiddenReason;
+    selections.value = (payload.selections ?? []).slice(0, 8);
+  } 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;
+  }
+}
+
+async function applyCanonical() {
+  if (!props.event?.canImportCanonical) return;
+  applying.value = true;
+  try {
+    await api.post('/admin/outrights/import/wc2026');
+    ElMessage.success(t('msg.outright_canonical_applied'));
+    emit('updated');
+    await loadDetail();
+  } catch (e: unknown) {
+    const err = e as { response?: { data?: { error?: string } } };
+    ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
+  } finally {
+    applying.value = false;
+  }
+}
+
+watch(
+  () => props.event?.id,
+  () => loadDetail(),
+  { immediate: true },
+);
+</script>
+
+<template>
+  <section class="league-outright-panel">
+    <div class="panel-head">
+      <div class="panel-head-text">
+        <span class="panel-title">{{ t('nav.outrights') }}</span>
+        <span class="panel-hint">{{ t('match.outright.section_hint') }}</span>
+      </div>
+      <div class="panel-actions">
+        <template v-if="event">
+          <el-tag
+            size="small"
+            :type="event.status === 'PUBLISHED' ? 'success' : 'info'"
+            effect="dark"
+          >
+            {{
+              event.status === 'PUBLISHED'
+                ? t('outright.status.published')
+                : t('outright.status.draft')
+            }}
+          </el-tag>
+          <el-tag size="small" :type="event.playerVisible ? 'success' : 'warning'" effect="plain">
+            {{ event.playerVisible ? t('outright.col.player_visible') : t('outright.not_on_player') }}
+          </el-tag>
+          <el-button type="primary" size="small" @click="goEdit">
+            {{ t('common.edit') }}
+          </el-button>
+          <el-button
+            v-if="event.canImportCanonical"
+            size="small"
+            :loading="applying"
+            @click="applyCanonical"
+          >
+            {{ t('outright.btn.apply_canonical') }}
+          </el-button>
+        </template>
+        <el-button v-else type="primary" plain size="small" @click="emit('create')">
+          {{ t('match.outright.setup') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div v-if="event" v-loading="loading" class="panel-body">
+      <p v-if="event.matchName" class="meta-line">{{ event.matchName }}</p>
+      <p class="meta-line">
+        {{ t('outright.col.teams') }}：{{ event.selectionCount }}
+      </p>
+      <p v-if="!event.playerVisible && hiddenReason" class="meta-warn">
+        {{ hiddenTip(hiddenReason) }}
+      </p>
+      <el-table
+        v-if="selections.length"
+        :data="selections"
+        size="small"
+        class="preview-table"
+        max-height="200"
+      >
+        <el-table-column prop="rank" :label="t('outright.col.rank')" width="56" />
+        <el-table-column prop="teamZh" :label="t('outright.col.team_zh')" min-width="100" />
+        <el-table-column prop="teamCode" :label="t('outright.col.code')" width="72" />
+        <el-table-column prop="odds" :label="t('outright.col.odds')" width="88" align="right" />
+      </el-table>
+      <p v-else-if="!loading" class="meta-empty">{{ t('outright.expand_no_teams') }}</p>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.league-outright-panel {
+  margin-bottom: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: rgba(47, 181, 106, 0.04);
+  border: 1px solid rgba(47, 181, 106, 0.14);
+}
+.panel-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.panel-head-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.panel-title {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--green-text);
+}
+.panel-hint {
+  font-size: 11px;
+  color: #666;
+  line-height: 1.4;
+}
+.panel-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+.panel-body {
+  margin-top: 8px;
+}
+.meta-line {
+  margin: 0 0 4px;
+  font-size: 12px;
+  color: #aaa;
+}
+.meta-warn {
+  margin: 0 0 8px;
+  font-size: 12px;
+  color: #e6a23c;
+  line-height: 1.45;
+}
+.meta-empty {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: #666;
+}
+.preview-table {
+  margin-top: 6px;
+}
+</style>
--- a/apps/admin/src/views/matches/MatchEventEditor.vue
+++ b/apps/admin/src/views/matches/MatchEventEditor.vue
@@ -14,13 +14,13 @@ import {
  type AdminMatchDetail,
  type MatchCreateForm,
 } from '../match-form.ts';
+import AdminSubNav from '../../components/AdminSubNav.vue';

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

 const matchId = computed(() => String(route.params.matchId ?? ''));
-
 const loading = ref(false);
 const savingMeta = ref(false);
 const status = ref('DRAFT');
@@ -52,7 +52,7 @@ async function load() {
    const detail = data.data as AdminMatchDetail;
    if (detail.isOutright) {
      ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/outrights');
+      router.replace('/matches');
      return;
    }
    status.value = detail.status;
@@ -93,15 +93,14 @@ async function saveMeta() {

 <template>
  <div v-loading="loading" class="match-editor-page page-scroll">
-    <div class="editor-topbar">
-      <el-button size="small" text class="back-btn" @click="router.push('/matches')">
-        ← {{ t('matchEditor.back') }}
-      </el-button>
-      <div class="topbar-title">
-        <h2>{{ t('matchEditor.title') }} #{{ matchId }}</h2>
+    <AdminSubNav
+      :title="t('matchEditor.title')"
+      :subtitle="`#${matchId}`"
+    >
+      <template #extra>
        <el-tag size="small" type="info">{{ t(`match.status.${status}`) }}</el-tag>
-      </div>
-    </div>
+      </template>
+    </AdminSubNav>

    <section class="panel">
      <div class="panel-head">
@@ -259,33 +258,6 @@ async function saveMeta() {
  padding-bottom: 24px;
 }

-.editor-topbar {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
-  flex-shrink: 0;
-}
-
-.back-btn {
-  color: var(--green-text) !important;
-  padding-left: 0 !important;
-}
-
-.topbar-title {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-wrap: wrap;
-}
-
-.topbar-title h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 800;
-  color: #fff;
-}
-
 .panel {
  background: #111;
  border: 1px solid #252525;
--- a/apps/admin/src/views/matches/MatchMarketsPage.vue
+++ b/apps/admin/src/views/matches/MatchMarketsPage.vue
@@ -6,6 +6,7 @@ import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
 import MatchMarketsPanel from './MatchMarketsPanel.vue';
 import type { AdminMatchDetail } from '../match-form.ts';
+import AdminSubNav from '../../components/AdminSubNav.vue';

 const route = useRoute();
 const router = useRouter();
@@ -24,7 +25,7 @@ async function load() {
    const detail = data.data as AdminMatchDetail;
    if (detail.isOutright) {
      ElMessage.warning(t('msg.outright_no_edit'));
-      router.replace('/outrights');
+      router.replace('/matches');
      return;
    }
    status.value = detail.status;
@@ -46,16 +47,14 @@ watch(matchId, load, { immediate: true });

 <template>
  <div v-loading="loading" class="match-markets-page page-scroll">
-    <div class="editor-topbar">
-      <el-button size="small" text class="back-btn" @click="router.push('/matches')">
-        ← {{ t('matchEditor.back') }}
-      </el-button>
-      <div class="topbar-title">
-        <h2>{{ t('matchEditor.section_markets') }}</h2>
-        <span class="match-subtitle">{{ matchLabel }}</span>
+    <AdminSubNav
+      :title="t('matchEditor.section_markets')"
+      :subtitle="matchLabel"
+    >
+      <template #extra>
        <el-tag size="small" type="info">{{ t(`match.status.${status}`) }}</el-tag>
-      </div>
-    </div>
+      </template>
+    </AdminSubNav>

    <section v-if="matchId" class="panel">
      <MatchMarketsPanel :match-id="matchId" />
@@ -68,36 +67,6 @@ watch(matchId, load, { immediate: true });
  padding: 0 4px 24px;
 }

-.editor-topbar {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  margin-bottom: 16px;
-}
-
-.back-btn {
-  flex-shrink: 0;
-  padding-left: 0 !important;
-}
-
-.topbar-title {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.topbar-title h2 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-}
-
-.match-subtitle {
-  color: var(--green-text);
-  font-size: 14px;
-}
-
 .panel {
  background: #111;
  border: 1px solid #2a2a2a;
--- a/apps/admin/src/views/outrights/OutrightEditRedirect.vue
+++ b/apps/admin/src/views/outrights/OutrightEditRedirect.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import api from '../../api';
+
+const route = useRoute();
+const router = useRouter();
+
+onMounted(async () => {
+  const matchId = String(route.params.matchId ?? '').trim();
+  if (!matchId) {
+    await router.replace('/matches/outrights');
+    return;
+  }
+  try {
+    const { data } = await api.get(`/admin/outrights/${matchId}`);
+    const leagueId = data.data?.leagueId as string | undefined;
+    await router.replace({
+      path: '/matches/outrights',
+      query: leagueId ? { leagueId } : { matchId },
+    });
+  } catch {
+    await router.replace('/matches/outrights');
+  }
+});
+</script>
+
+<template>
+  <div />
+</template>
--- a/apps/admin/src/views/outrights/OutrightEventEditor.vue
+++ b/apps/admin/src/views/outrights/OutrightEventEditor.vue
@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
 import LogoUrlField from '../../components/LogoUrlField.vue';
+import AdminSubNav from '../../components/AdminSubNav.vue';
 import {
  getBuiltinCountry,
  resolveCountryCode,
@@ -12,7 +13,6 @@ import {
 } from '../../data/builtinCountries';

 const route = useRoute();
-const router = useRouter();
 const { t } = useAdminLocale();

 const matchId = computed(() => String(route.params.matchId ?? ''));
@@ -336,11 +336,10 @@ async function saveRow(row: SelectionRow) {

 <template>
  <div class="event-editor" v-loading="loading">
-    <div class="editor-topbar">
-      <el-button size="small" text @click="router.push({ name: 'admin-outrights' })">
-        ← {{ t('outright.back_list') }}
-      </el-button>
-    </div>
+    <AdminSubNav
+      :title="t('outright.section.edit')"
+      :subtitle="`#${matchId}`"
+    />

    <el-alert
      v-if="!meta.playerVisible"
@@ -513,14 +512,6 @@ async function saveRow(row: SelectionRow) {
  overflow: auto;
 }

-.editor-topbar {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  flex-shrink: 0;
-  margin-bottom: 2px;
-}
-
 .player-alert {
  flex-shrink: 0;
  margin-bottom: 0;