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/App.vue
+++ b/apps/admin/src/App.vue
@@ -92,16 +92,42 @@ html, body, #app {
  overflow: hidden;
 }

-/* 隐藏滚动条，表格区域仍可滚动 */
-* {
+/* 页面级隐藏滚动条；可滚动区域保留细滚动条便于发现溢出内容 */
+html, body {
  scrollbar-width: none;
  -ms-overflow-style: none;
 }
-*::-webkit-scrollbar {
+html::-webkit-scrollbar,
+body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
 }
+.admin-list-page .table-wrap,
+.dashboard-page,
+.page-scroll,
+.settlement-page,
+.nav {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
+}
+.admin-list-page .table-wrap::-webkit-scrollbar,
+.dashboard-page::-webkit-scrollbar,
+.page-scroll::-webkit-scrollbar,
+.settlement-page::-webkit-scrollbar,
+.nav::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  display: block;
+}
+.admin-list-page .table-wrap::-webkit-scrollbar-thumb,
+.dashboard-page::-webkit-scrollbar-thumb,
+.page-scroll::-webkit-scrollbar-thumb,
+.settlement-page::-webkit-scrollbar-thumb,
+.nav::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.16);
+  border-radius: 3px;
+}

 /* 管理端列表页：占满主区域，表头固定、表体滚动，底部分页 */
 .admin-list-page {
@@ -113,7 +139,9 @@ html, body, #app {
 }
 .admin-list-page > .page-toolbar,
 .admin-list-page > .filter-card,
-.admin-list-page > .tool-card {
+.admin-list-page > .tool-card,
+.admin-list-page > .list-chrome,
+.admin-list-page > .list-settings {
  flex-shrink: 0;
 }
 .admin-list-page > .page-toolbar {
@@ -121,27 +149,180 @@ html, body, #app {
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
-  margin-bottom: 16px;
+  margin: 0 0 8px;
 }
 .admin-list-page > .tool-card {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
 .admin-list-page > .filter-card {
-  margin-bottom: 16px;
+  margin-bottom: 8px;
 }
-.admin-list-page > .data-card {
+.admin-list-page > .list-chrome {
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.list-chrome__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: nowrap;
+  padding: 8px 10px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.02);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  --list-chrome-control-h: 32px;
+  --el-component-size: 32px;
+}
+.list-chrome__left {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+  gap: 12px;
+  flex-wrap: nowrap;
+}
+.list-chrome__filters {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  flex: 1;
+  min-width: 0;
+}
+.list-chrome__field {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.list-chrome__label {
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--text-muted);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  white-space: nowrap;
+}
+.list-chrome__grow {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: 8px;
+}
+.list-chrome__grow.el-form--inline {
+  display: flex !important;
+  align-items: center;
+}
+.list-chrome__left .matches-subnav--embedded {
+  align-self: center;
+  height: var(--list-chrome-control-h);
+}
+.list-chrome__actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+.list-chrome :deep(.el-form-item) {
+  margin-bottom: 0 !important;
+  margin-right: 12px;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+}
+.list-chrome :deep(.el-form-item__label) {
+  display: inline-flex;
+  align-items: center;
+  height: var(--list-chrome-control-h);
+  line-height: 1;
+  padding: 0 8px 0 0;
+  margin-bottom: 0 !important;
+}
+.list-chrome :deep(.el-form-item__content) {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+}
+.list-chrome :deep(.el-input__wrapper),
+.list-chrome :deep(.el-select__wrapper) {
+  height: var(--list-chrome-control-h) !important;
+  min-height: var(--list-chrome-control-h) !important;
+  box-sizing: border-box;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.list-chrome :deep(.el-input__inner) {
+  height: calc(var(--list-chrome-control-h) - 2px);
+  line-height: calc(var(--list-chrome-control-h) - 2px);
+}
+.list-chrome :deep(.el-button:not(.is-link)) {
+  height: var(--list-chrome-control-h) !important;
+  min-height: var(--list-chrome-control-h) !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1;
+}
+.list-chrome :deep(.el-form-item:last-child) {
+  margin-right: 0;
+}
+.admin-list-page > .list-settings {
+  margin-bottom: 8px;
+}
+.list-settings :deep(.el-collapse-item__header) {
+  height: 36px;
+  line-height: 36px;
+  padding: 0 10px;
+  font-size: 13px;
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.02);
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.list-settings :deep(.el-collapse-item__wrap) {
+  border-color: rgba(255, 255, 255, 0.05);
+}
+.list-settings :deep(.el-collapse-item__content) {
+  padding: 8px 10px 10px;
+}
+.list-settings-block + .list-settings-block {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.list-settings-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #aaa;
+  margin-bottom: 6px;
+}
+.admin-list-page > .data-card,
+.admin-list-page > .list-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
-  border-radius: 12px;
+  border-radius: 10px;
+}
+.admin-list-page > .list-panel {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(18, 18, 18, 0.85);
+  padding: 0 10px 10px;
 }
 .admin-list-page > .data-card .el-card__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
-  padding-bottom: 16px;
+  padding: 0 12px 12px;
 }
 .admin-list-page .table-wrap {
  flex: 1;
@@ -154,11 +335,19 @@ html, body, #app {
 .admin-list-page .table-wrap .el-table th.el-table__cell .cell {
  white-space: nowrap;
 }
+.admin-list-page .list-hint {
+  flex-shrink: 0;
+  margin: 0;
+  padding: 6px 0 8px;
+  font-size: 11px;
+  color: #666;
+  line-height: 1.4;
+}
 .admin-list-page .pager {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
-  margin-top: 16px;
+  margin-top: 8px;
  padding-top: 0;
 }

@@ -259,6 +448,60 @@ body {
 }
 .el-button--warning  { background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.35) !important; color: #fbbf24 !important; }
 .el-button--danger   { background: rgba(255,69,58,0.1) !important;  border-color: rgba(255,69,58,0.35) !important;  color: #ff453a !important; }
+.el-button--primary.is-plain {
+  background: rgba(36, 143, 84, 0.12) !important;
+  border-color: var(--green-border) !important;
+  color: var(--green-text) !important;
+  box-shadow: none !important;
+}
+.el-button--primary.is-plain:hover {
+  background: rgba(36, 143, 84, 0.22) !important;
+  border-color: rgba(120, 230, 170, 0.45) !important;
+  color: #d4fde5 !important;
+}
+.el-button--danger.is-plain {
+  background: rgba(255, 69, 58, 0.08) !important;
+  border-color: rgba(255, 69, 58, 0.35) !important;
+  color: #ff6b62 !important;
+  box-shadow: none !important;
+}
+.el-button--danger.is-plain:hover {
+  background: rgba(255, 69, 58, 0.16) !important;
+  border-color: rgba(255, 120, 110, 0.5) !important;
+  color: #ff8a82 !important;
+}
+.el-button.is-text,
+.el-button.is-link.el-button--default {
+  color: var(--green-text) !important;
+  background: transparent !important;
+  border-color: transparent !important;
+  box-shadow: none !important;
+}
+.el-button.is-text:hover,
+.el-button.is-link.el-button--default:hover {
+  color: #d4fde5 !important;
+  background: rgba(36, 143, 84, 0.1) !important;
+}
+.el-button--primary.is-plain {
+  background: rgba(36, 143, 84, 0.12) !important;
+  border-color: var(--green-border) !important;
+  color: var(--green-text) !important;
+}
+.el-button--primary.is-plain:hover {
+  background: rgba(36, 143, 84, 0.22) !important;
+  border-color: rgba(120, 230, 170, 0.45) !important;
+  color: #d4fde5 !important;
+}
+.el-button--danger.is-plain {
+  background: rgba(255, 69, 58, 0.08) !important;
+  border-color: rgba(255, 69, 58, 0.35) !important;
+  color: #ff6961 !important;
+}
+.el-button--danger.is-plain:hover {
+  background: rgba(255, 69, 58, 0.18) !important;
+  border-color: rgba(255, 120, 110, 0.5) !important;
+  color: #ff8a82 !important;
+}

 .el-tag { border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; }
 .el-tag--success {
--- a/apps/admin/src/components/AdminSubNav.vue
+++ b/apps/admin/src/components/AdminSubNav.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { RouterLink } from 'vue-router';
+import type { AdminBreadcrumbItem } from '../utils/admin-breadcrumb';
+
+defineProps<{
+  crumbs?: AdminBreadcrumbItem[];
+  title: string;
+  subtitle?: string;
+}>();
+</script>
+
+<template>
+  <header class="admin-subnav">
+    <nav v-if="crumbs?.length" class="admin-subnav__crumbs" aria-label="Breadcrumb">
+      <template v-for="(item, i) in crumbs" :key="`${item.label}-${i}`">
+        <RouterLink
+          v-if="item.to && i < crumbs.length - 1"
+          :to="item.to"
+          class="admin-subnav__link"
+        >
+          {{ item.label }}
+        </RouterLink>
+        <span v-else class="admin-subnav__current">{{ item.label }}</span>
+        <span v-if="i < crumbs.length - 1" class="admin-subnav__sep" aria-hidden="true">/</span>
+      </template>
+    </nav>
+    <div class="admin-subnav__main">
+      <div class="admin-subnav__titles">
+        <h1 class="admin-subnav__title">{{ title }}</h1>
+        <span v-if="subtitle" class="admin-subnav__subtitle">{{ subtitle }}</span>
+      </div>
+      <div v-if="$slots.extra" class="admin-subnav__extra">
+        <slot name="extra" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<style scoped>
+.admin-subnav {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+  flex-shrink: 0;
+}
+.admin-subnav__crumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px 6px;
+  font-size: 12px;
+  line-height: 1.4;
+}
+.admin-subnav__link {
+  color: var(--green-text);
+  font-weight: 600;
+  transition: color 0.15s;
+}
+.admin-subnav__link:hover {
+  color: #d4fde5;
+}
+.admin-subnav__current {
+  color: #888;
+}
+.admin-subnav__sep {
+  color: #444;
+  user-select: none;
+}
+.admin-subnav__main {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.admin-subnav__titles {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px 12px;
+  min-width: 0;
+}
+.admin-subnav__title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  color: #e8e8e8;
+  letter-spacing: 0.02em;
+}
+.admin-subnav__subtitle {
+  font-size: 13px;
+  color: #777;
+}
+.admin-subnav__extra {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+</style>
--- a/apps/admin/src/components/AdminTableEmpty.vue
+++ b/apps/admin/src/components/AdminTableEmpty.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { useAdminLocale } from '../composables/useAdminLocale';
+
+const { t } = useAdminLocale();
+
+defineProps<{
+  text?: string;
+  hint?: string;
+}>();
+</script>
+
+<template>
+  <div class="admin-table-empty">
+    <div class="admin-table-empty__icon" aria-hidden="true">
+      <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+        <rect x="6" y="10" width="28" height="22" rx="3" stroke="currentColor" stroke-width="1.5" opacity="0.35" />
+        <path d="M14 18h12M14 23h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.25" />
+      </svg>
+    </div>
+    <p class="admin-table-empty__text">{{ text ?? t('common.no_data') }}</p>
+    <p v-if="hint" class="admin-table-empty__hint">{{ hint }}</p>
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.admin-table-empty {
+  padding: 28px 16px;
+  text-align: center;
+}
+.admin-table-empty__icon {
+  color: var(--green-text);
+  opacity: 0.45;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: center;
+}
+.admin-table-empty__text {
+  font-size: 13px;
+  color: var(--text-muted);
+}
+.admin-table-empty__hint {
+  font-size: 12px;
+  color: #555;
+  margin-top: 4px;
+}
+</style>
--- a/apps/admin/src/components/MatchesSubNav.vue
+++ b/apps/admin/src/components/MatchesSubNav.vue
@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import { RouterLink, useRoute } from 'vue-router';
+import { useAdminLocale } from '../composables/useAdminLocale';
+
+const { t } = useAdminLocale();
+const route = useRoute();
+
+withDefaults(
+  defineProps<{
+    embedded?: boolean;
+  }>(),
+  { embedded: false },
+);
+
+const tabs = [
+  { path: '/matches', labelKey: 'nav.matches.fixtures' },
+  { path: '/matches/outrights', labelKey: 'nav.matches.outrights' },
+];
+
+function isActive(path: string) {
+  if (path === '/matches/outrights') {
+    return route.path === '/matches/outrights';
+  }
+  return (
+    route.path === '/matches' ||
+    (route.path.startsWith('/matches/') &&
+      !route.path.startsWith('/matches/outrights'))
+  );
+}
+</script>
+
+<template>
+  <nav
+    class="matches-subnav"
+    :class="{ 'matches-subnav--embedded': embedded }"
+    aria-label="Matches sections"
+  >
+    <RouterLink
+      v-for="tab in tabs"
+      :key="tab.path"
+      :to="tab.path"
+      class="matches-subnav__item"
+      :class="{ 'matches-subnav__item--active': isActive(tab.path) }"
+    >
+      {{ t(tab.labelKey) }}
+    </RouterLink>
+  </nav>
+</template>
+
+<style scoped>
+.matches-subnav {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 16px;
+  padding: 4px;
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  flex-shrink: 0;
+}
+.matches-subnav--embedded {
+  margin-bottom: 0;
+  padding: 0 12px 0 0;
+  border: none;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  background: transparent;
+  flex-shrink: 0;
+  height: 32px;
+  box-sizing: border-box;
+}
+.matches-subnav__item {
+  padding: 0 12px;
+  height: 32px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: #888;
+  transition: color 0.15s, background 0.15s;
+}
+.matches-subnav__item:hover {
+  color: #ccc;
+  background: rgba(255, 255, 255, 0.04);
+}
+.matches-subnav__item--active {
+  color: var(--green-text);
+  background: rgba(0, 200, 83, 0.1);
+}
+</style>
--- a/apps/admin/src/data/builtinCountries.ts
+++ b/apps/admin/src/data/builtinCountries.ts
@@ -155,6 +155,20 @@ export function countryOptionLabel(c: BuiltinCountry, locale: string): string {
  return `${countryDisplayName(c, locale)} (${c.code})`;
 }

+/** 冠军盘队伍行：按后台语言只显示一种队名 */
+export function teamRowDisplayName(
+  row: { teamCode: string; teamZh: string; teamEn: string },
+  locale: string,
+): string {
+  const builtin = getBuiltinCountry(row.teamCode);
+  if (builtin) return countryDisplayName(builtin, locale);
+  if (locale === 'en-US') return row.teamEn || row.teamZh || row.teamCode;
+  if (locale === 'ms-MY') {
+    return NATIONAL_TEAM_MS[row.teamCode] ?? row.teamEn ?? row.teamZh ?? row.teamCode;
+  }
+  return row.teamZh || row.teamEn || row.teamCode;
+}
+
 function countryNameMs(c: BuiltinCountry): string {
  return NATIONAL_TEAM_MS[c.code] ?? c.nameEn;
 }
--- a/apps/admin/src/i18n/admin-messages.ts
+++ b/apps/admin/src/i18n/admin-messages.ts
@@ -29,7 +29,7 @@ const zh: Record<string, string> = {
  'login.captcha_ph': '验证码',
  'login.captcha_refresh': '点击刷新',

-  'nav.dashboard': '控制台',
+  'nav.dashboard': '概览',
  'nav.users': '玩家管理',
  'nav.agents': '代理管理',
  'nav.matches': '赛事管理',
@@ -41,6 +41,12 @@ const zh: Record<string, string> = {
  'nav.players': '直属玩家',
  'nav.subAgents': '下级代理',
  'nav.myBets': '注单查询',
+  'nav.open_menu': '打开菜单',
+  'nav.close_menu': '关闭菜单',
+  'breadcrumb.settlement': '赛事结算',
+  'breadcrumb.match_edit': '编辑赛事',
+  'breadcrumb.match_markets': '盘口管理',
+  'breadcrumb.outright_edit': '编辑优胜冠军',
  'role.admin': '系统管理员',
  'role.agent': '代理账号',
  'logout': '退出',
@@ -57,10 +63,12 @@ const zh: Record<string, string> = {
  'common.delete': '删除',
  'common.cancel': '取消',
  'common.confirm': '确定',
+  'common.retry': '重试',
  'common.status': '状态',
  'common.type': '类型',
  'common.keyword': '关键词',
  'common.actions': '操作',
+  'common.more': '更多',
  'common.loading': '加载中…',
  'common.no_data': '暂无数据',
  'common.yesterday': '昨日',
@@ -73,7 +81,7 @@ const zh: Record<string, string> = {
  'common.platform_direct': '平台直属',
  'common.updated_at': '更新于',

-  'dash.title': '控制台',
+  'dash.title': '概览',
  'dash.desc': '平台整体运行概况',
  'dash.board_title': '整体概览',
  'dash.board_hint': '一屏查看经营趋势与平台分布',
@@ -85,6 +93,7 @@ const zh: Record<string, string> = {
  'dash.kpi_new_players': '今日新增 {n} 人',
  'dash.kpi_pending': '待结算',
  'dash.kpi_pending_sub': '{bets} 单 · {matches} 场赛事',
+  'dash.load_error_hint': '无法加载概览数据，请检查网络或稍后重试。',
  'dash.kpi_wallet': '玩家余额',
  'dash.kpi_credit': '代理授信',
  'dash.trend_caption': '近 7 日经营趋势（金额折线 + 注单柱）',
@@ -114,6 +123,8 @@ const zh: Record<string, string> = {
  'page.users.desc': '创建玩家、查看余额与投注概况，支持上分与状态管理',
  'page.agents.title': '代理管理',
  'page.agents.desc': '创建一级代理、调整授信额度、查看直属玩家与额度占用',
+  'nav.matches.fixtures': '赛事配置',
+  'nav.matches.outrights': '优胜赛配置（盘口）',
  'page.matches.title': '赛事管理',
  'page.matches.desc': '草稿可编辑、删除；已发布可改开赛时间与热门',
  'page.bets.title': '注单管理',
@@ -182,7 +193,7 @@ const en: Record<string, string> = {
  'login.captcha_ph': 'Captcha',
  'login.captcha_refresh': 'Click to refresh',

-  'nav.dashboard': 'Dashboard',
+  'nav.dashboard': 'Overview',
  'nav.users': 'Players',
  'nav.agents': 'Agents',
  'nav.matches': 'Matches',
@@ -194,6 +205,12 @@ const en: Record<string, string> = {
  'nav.players': 'My Players',
  'nav.subAgents': 'Sub-Agents',
  'nav.myBets': 'Bet Search',
+  'nav.open_menu': 'Open menu',
+  'nav.close_menu': 'Close menu',
+  'breadcrumb.settlement': 'Settlement',
+  'breadcrumb.match_edit': 'Edit match',
+  'breadcrumb.match_markets': 'Markets',
+  'breadcrumb.outright_edit': 'Edit outright',
  'role.admin': 'Administrator',
  'role.agent': 'Agent',
  'logout': 'Logout',
@@ -210,10 +227,12 @@ const en: Record<string, string> = {
  'common.delete': 'Delete',
  'common.cancel': 'Cancel',
  'common.confirm': 'OK',
+  'common.retry': 'Retry',
  'common.status': 'Status',
  'common.type': 'Type',
  'common.keyword': 'Keyword',
  'common.actions': 'Actions',
+  'common.more': 'More',
  'common.loading': 'Loading…',
  'common.no_data': 'No data',
  'common.yesterday': 'Yesterday',
@@ -226,7 +245,7 @@ const en: Record<string, string> = {
  'common.platform_direct': 'Platform direct',
  'common.updated_at': 'Updated',

-  'dash.title': 'Dashboard',
+  'dash.title': 'Overview',
  'dash.desc': 'Platform overview',
  'dash.board_title': 'Overview',
  'dash.board_hint': 'Trends and distribution at a glance',
@@ -238,6 +257,7 @@ const en: Record<string, string> = {
  'dash.kpi_new_players': '{n} new today',
  'dash.kpi_pending': 'Pending settlement',
  'dash.kpi_pending_sub': '{bets} bets · {matches} matches',
+  'dash.load_error_hint': 'Could not load overview data. Check your connection and try again.',
  'dash.kpi_wallet': 'Player balance',
  'dash.kpi_credit': 'Agent credit',
  'dash.trend_caption': 'Last 7 days (amount lines + bet bars)',
@@ -267,6 +287,8 @@ const en: Record<string, string> = {
  'page.users.desc': 'Create players, balances, stakes, top-ups, and status',
  'page.agents.title': 'Agents',
  'page.agents.desc': 'Tier-1 agents, credit limits, players, and usage',
+  'nav.matches.fixtures': 'Fixtures',
+  'nav.matches.outrights': 'Outright odds',
  'page.matches.title': 'Matches',
  'page.matches.desc': 'Edit/delete drafts; adjust kickoff and featured when published',
  'page.bets.title': 'Bets',
@@ -335,7 +357,7 @@ const ms: Record<string, string> = {
  'login.captcha_ph': 'Captcha',
  'login.captcha_refresh': 'Klik untuk muat semula',

-  'nav.dashboard': 'Papan pemuka',
+  'nav.dashboard': 'Gambaran',
  'nav.users': 'Pemain',
  'nav.agents': 'Ejen',
  'nav.matches': 'Perlawanan',
@@ -347,6 +369,12 @@ const ms: Record<string, string> = {
  'nav.players': 'Pemain saya',
  'nav.subAgents': 'Sub-ejen',
  'nav.myBets': 'Carian pertaruhan',
+  'nav.open_menu': 'Buka menu',
+  'nav.close_menu': 'Tutup menu',
+  'breadcrumb.settlement': 'Penyelesaian',
+  'breadcrumb.match_edit': 'Edit perlawanan',
+  'breadcrumb.match_markets': 'Pasaran',
+  'breadcrumb.outright_edit': 'Edit juara',
  'role.admin': 'Pentadbir',
  'role.agent': 'Ejen',
  'logout': 'Log keluar',
@@ -363,10 +391,12 @@ const ms: Record<string, string> = {
  'common.delete': 'Padam',
  'common.cancel': 'Batal',
  'common.confirm': 'OK',
+  'common.retry': 'Cuba lagi',
  'common.status': 'Status',
  'common.type': 'Jenis',
  'common.keyword': 'Kata kunci',
  'common.actions': 'Tindakan',
+  'common.more': 'Lagi',
  'common.loading': 'Memuatkan…',
  'common.no_data': 'Tiada data',
  'common.yesterday': 'Semalam',
@@ -379,7 +409,7 @@ const ms: Record<string, string> = {
  'common.platform_direct': 'Terus platform',
  'common.updated_at': 'Dikemas kini',

-  'dash.title': 'Papan pemuka',
+  'dash.title': 'Gambaran',
  'dash.desc': 'Gambaran keseluruhan platform',
  'dash.board_title': 'Gambaran',
  'dash.board_hint': 'Trend dan taburan sepintas lalu',
@@ -391,6 +421,7 @@ const ms: Record<string, string> = {
  'dash.kpi_new_players': '{n} baharu hari ini',
  'dash.kpi_pending': 'Menunggu penyelesaian',
  'dash.kpi_pending_sub': '{bets} pertaruhan · {matches} perlawanan',
+  'dash.load_error_hint': 'Tidak dapat memuatkan data gambaran. Semak sambungan dan cuba lagi.',
  'dash.kpi_wallet': 'Baki pemain',
  'dash.kpi_credit': 'Kredit ejen',
  'dash.trend_caption': '7 hari lepas (garis jumlah + palang pertaruhan)',
@@ -420,6 +451,8 @@ const ms: Record<string, string> = {
  'page.users.desc': 'Cipta pemain, baki, stake, tambah baki dan status',
  'page.agents.title': 'Ejen',
  'page.agents.desc': 'Ejen peringkat 1, had kredit, pemain dan penggunaan',
+  'nav.matches.fixtures': 'Konfigurasi perlawanan',
+  'nav.matches.outrights': 'Odds juara',
  'page.matches.title': 'Perlawanan',
  'page.matches.desc': 'Edit/padam draf; laraskan masa mula dan pilihan utama bila diterbitkan',
  'page.bets.title': 'Pertaruhan',
--- a/apps/admin/src/i18n/admin-pages-ms.ts
+++ b/apps/admin/src/i18n/admin-pages-ms.ts
@@ -60,6 +60,7 @@ export const adminPagesMs: Record<string, string> = {
  'user.btn.hide_password': 'Sembunyi',
  'user.ph.reset_password': 'Biarkan kosong untuk kekalkan; nilai baharu boleh dilihat',
  'user.ph.reset_password_short': 'Biarkan kosong',
+  'user.page_settings': 'Tetapan global',
  'user.global_settings': 'Kata laluan & akaun (global)',
  'user.global_settings_hint': 'Kawal sama ada semua pemain boleh ubah kata laluan/nama akaun dalam app',
  'user.section.password_mgmt': 'Pengurusan kata laluan',
@@ -128,6 +129,7 @@ export const adminPagesMs: Record<string, string> = {
  'match.btn.markets': 'Pasaran',
  'match.filter.keyword_ph': 'Nama kejohanan / kod pasukan',
  'match.col.league': 'Kejohanan',
+  'match.col.league_en': 'Liga (EN)',
  'match.col.fixture_count': 'Perlawanan',
  'match.col.bet_count': 'Pertaruhan',
  'match.col.total_stake': 'Jumlah stake',
@@ -148,6 +150,8 @@ export const adminPagesMs: Record<string, string> = {
  'match.field.lang_en': 'EN',
  'match.field.lang_ms': 'MS',
  'match.field.kickoff': 'Masa mula',
+  'match.field.home_team': 'Pasukan tuan rumah',
+  'match.field.away_team': 'Pasukan pelawat',
  'match.field.home_en': 'Tuan rumah (EN)',
  'match.field.home_zh': 'Tuan rumah (ZH)',
  'match.field.home_ms': 'Tuan rumah (MS)',
@@ -158,7 +162,14 @@ export const adminPagesMs: Record<string, string> = {
  'match.hint.create_draft': 'Disimpan sebagai draf; kembangkan kejohanan dan terbitkan setiap perlawanan tunggal.',
  'match.hint.create_league': 'Cipta kejohanan dahulu, kemudian kembangkan untuk tambah perlawanan tunggal.',
  'match.hint.edit_published': 'Diterbitkan: edit masa mula, pilihan utama, nama paparan; tertutup/selesai dikunci.',
-  'match.expand_league_hint': 'Kembangkan kejohanan untuk senarai perlawanan; klik Pasaran untuk halaman tetapan odds (sama seperti aplikasi pemain).',
+  'match.expand_league_hint': 'Kembangkan liga untuk urus perlawanan; odds juara di tab Odds juara.',
+  'match.expand_outright_hint': 'Kembangkan liga untuk sunting odds juara; pasukan perlawanan disegerakkan auto, boleh tambah pasukan belum dijadualkan.',
+  'outright.odds_only_hint': 'Pasukan daripada perlawanan disegerakkan auto; boleh tambah pasukan manual dan sunting odds di sini.',
+  'outright.col.teams_from_fixtures': 'Pasukan (daripada perlawanan)',
+  'outright.col.teams_total': 'Pasukan odds juara',
+  'outright.empty_no_teams': 'Tiada pasukan — tambah perlawanan di Konfigurasi atau klik Tambah pasukan.',
+  'match.outright.setup': 'Sediakan',
+  'match.outright.section_hint': 'Pasaran juara untuk liga ini; perlawanan disenaraikan di bawah',
  'match.expand_markets_hint': 'Klik Pasaran pada perlawanan tunggal untuk halaman pasaran berasingan.',
  'match.no_fixtures': 'Tiada perlawanan tunggal di bawah kejohanan ini.',
  'match.ph.league_ms': 'Piala Dunia 2027',
@@ -173,6 +184,7 @@ export const adminPagesMs: Record<string, string> = {
  'bet.col.agent': 'Ejen',
  'bet.col.selection': 'Pilihan',
  'bet.col.content': 'Kandungan taruhan',
+  'bet.content.bet_counts': '{singles} tunggal · {parlays} parlay',
  'bet.col.match': 'Perlawanan',
  'bet.legs_more': '+{n} lagi…',
  'bet.col.selection_count': 'Bil. pilihan',
@@ -319,6 +331,8 @@ export const adminPagesMs: Record<string, string> = {
  'err.password_mismatch': 'Kata laluan tidak sepadan',
  'err.credit_negative': 'Had kredit tidak boleh negatif',
  'err.kickoff_required': 'Sila isi masa mula',
+  'err.team_country_required': 'Pilih pasukan tuan rumah dan pelawat',
+  'err.team_country_required': 'Pilih pasukan tuan rumah dan pelawat',
  'err.teams_required': 'Isi nama pasukan tuan rumah dan pelawat (ZH atau EN)',
  'err.teams_same': 'Pasukan tuan rumah dan pelawat mesti berbeza',
  'err.league_required': 'Sila isi nama liga',
@@ -485,6 +499,37 @@ export const adminPagesMs: Record<string, string> = {
  'outright.field.title_en': 'Tajuk (EN)',
  'outright.field.title_ms': 'Tajuk (MS)',
  'outright.btn.create_event': 'Acara juara baharu',
+  'outright.fixtures_sync_hint': 'Pasukan daripada perlawanan liga; hanya laraskan odds dan status terbit.',
+  'outright.empty_no_fixtures': 'Tiada perlawanan dalam liga ini — tambah di Konfigurasi perlawanan dahulu.',
+  'outright.btn.add_team': 'Tambah pasukan',
+  'outright.add.filter_fixture': 'Pasukan sedia ada',
+  'outright.add.filter_all': 'Semua terbina dalam',
+  'outright.add.select_all': 'Pilih semua',
+  'outright.add.clear_selection': 'Kosongkan pilihan',
+  'outright.add.selected_count': '{n} dipilih',
+  'outright.add.empty_fixture': 'Tiada pasukan perlawanan untuk ditambah (pasukan dalam perlawanan tetapi belum dalam pasaran juara)',
+  'outright.add.empty_all': 'Semua pasukan terbina dalam sudah dalam pasaran juara',
+  'outright.add.default_odds': 'Odds lalai',
+  'outright.add.search_ph': 'Cari nama atau kod',
+  'outright.add.err_none': 'Sila pilih sekurang-kurangnya satu pasukan',
+  'outright.batch.mode': 'Urus kelompok',
+  'outright.batch.exit': 'Keluar kelompok',
+  'outright.batch.apply_odds': 'Guna odds',
+  'outright.batch.remove': 'Buang terpilih',
+  'outright.batch.confirm_remove': 'Buang {n} pasukan terpilih?',
+  'outright.batch.err_none': 'Sila pilih pasukan dahulu',
+  'outright.batch.apply_ok': 'Odds {n} pasukan dikemas kini — simpan semua odds',
+  'outright.batch.remove_ok': '{n} pasukan dibuang',
+  'outright.batch.remove_partial': '{ok} berjaya, {fail} gagal',
+  'outright.sort.label': 'Susun',
+  'outright.sort.rank': 'Kedudukan',
+  'outright.sort.name': 'Nama pasukan',
+  'outright.sort.code': 'Kod',
+  'outright.sort.odds': 'Odds (semasa)',
+  'outright.sort.saved_odds': 'Odds (disimpan)',
+  'outright.sort.asc': 'Menaik',
+  'outright.sort.desc': 'Menurun',
+  'msg.outright_teams_added': '{n} pasukan ditambah ({skipped} dilangkau)',
  'msg.load_matches_failed': 'Gagal memuatkan perlawanan',
  'msg.cashback_issued': 'Rebat telah dikeluarkan',
  'msg.freeze_confirm_title': '{action} akaun',
--- a/apps/admin/src/i18n/admin-pages.ts
+++ b/apps/admin/src/i18n/admin-pages.ts
@@ -60,6 +60,7 @@ export const adminPagesZh: Record<string, string> = {
  'user.btn.hide_password': '隐藏',
  'user.ph.reset_password': '留空则不修改；填写后将更新并可查看',
  'user.ph.reset_password_short': '留空不修改',
+  'user.page_settings': '全局设置',
  'user.global_settings': '密码与账号管理（全局）',
  'user.global_settings_hint': '控制所有玩家是否可在 App 内改密码、改账号名',
  'user.section.password_mgmt': '密码管理',
@@ -127,7 +128,9 @@ export const adminPagesZh: Record<string, string> = {
  'match.create_fixture_btn': '+ 新增单场',
  'match.btn.markets': '盘口',
  'match.filter.keyword_ph': '赛事名 / 球队代码',
+  'match.filter.status_hint': '仅筛选展开后的单场列表与「单场」列计数，不会隐藏新建的空联赛',
  'match.col.league': '赛事',
+  'match.col.league_en': '联赛（英文）',
  'match.col.fixture_count': '单场',
  'match.col.bet_count': '注单数',
  'match.col.total_stake': '总投注额',
@@ -148,6 +151,8 @@ export const adminPagesZh: Record<string, string> = {
  'match.field.lang_en': 'EN',
  'match.field.lang_ms': 'MS',
  'match.field.kickoff': '开赛时间',
+  'match.field.home_team': '主队',
+  'match.field.away_team': '客队',
  'match.field.home_en': '主队（英）',
  'match.field.home_zh': '主队（中）',
  'match.field.home_ms': '主队（马来）',
@@ -158,7 +163,14 @@ export const adminPagesZh: Record<string, string> = {
  'match.hint.create_draft': '创建后为草稿，请展开赛事后在单场行点击「发布」并生成盘口。',
  'match.hint.create_league': '创建赛事（联赛）后，展开该行可添加多场单场比赛。',
  'match.hint.edit_published': '已发布：可修改开赛时间、热门及显示名称；封盘/已结算后不可编辑。',
-  'match.expand_league_hint': '展开赛事查看单场列表；点击「盘口」进入单独页面设置盘口与赔率（与玩家端按联赛分组一致）。',
+  'match.expand_league_hint': '展开联赛可管理单场赛事；夺冠盘口请在「优胜赛配置（盘口）」中设置赔率。',
+  'match.expand_outright_hint': '展开联赛可编辑夺冠赔率；单场球队会自动同步，也可手动补充尚未赛程的球队。',
+  'outright.odds_only_hint': '单场赛程中的球队会自动加入；可手动添加尚未参赛的球队，并在此调整赔率。',
+  'outright.col.teams_from_fixtures': '参赛球队（来自单场）',
+  'outright.col.teams_total': '冠军盘球队',
+  'outright.empty_no_teams': '暂无球队，请先在「赛事配置」添加单场或点击「添加队伍」。',
+  'match.outright.setup': '配置',
+  'match.outright.section_hint': '按联赛配置冠军盘，与下方单场列表同属本联赛',
  'match.expand_markets_hint': '在单场列表点击「盘口」进入单独页面设置盘口与赔率。',
  'match.no_fixtures': '该赛事下暂无单场。',
  'match.ph.league_ms': '2027 世界杯',
@@ -173,6 +185,7 @@ export const adminPagesZh: Record<string, string> = {
  'bet.col.agent': '所属代理',
  'bet.col.selection': '选项',
  'bet.col.content': '投注内容',
+  'bet.content.bet_counts': '{singles}单 · {parlays}串',
  'bet.col.match': '赛事',
  'bet.legs_more': '还有 {n} 项…',
  'bet.col.selection_count': '投注项数',
@@ -319,6 +332,7 @@ export const adminPagesZh: Record<string, string> = {
  'err.password_mismatch': '两次密码不一致',
  'err.credit_negative': '授信额度不能为负',
  'err.kickoff_required': '请填写开赛时间',
+  'err.team_country_required': '请选择主客队',
  'err.teams_required': '请填写主客队名称（中文、英文或马来文至少一项）',
  'err.teams_same': '主客队不能相同，请填写不同的队名',
  'err.league_required': '请填写联赛名称（中文、英文或马来文至少一项）',
@@ -518,7 +532,37 @@ export const adminPagesZh: Record<string, string> = {
  'outright.col.player_visible': '玩家端',
  'outright.col.league_en': '联赛（英文）',
  'outright.expand_no_teams': '暂无队伍，请进入编辑页添加',
+  'outright.fixtures_sync_hint': '参赛队伍来自本联赛单场赛程，仅可调整赔率与发布状态。',
+  'outright.empty_no_fixtures': '该联赛暂无单场，请先在「赛事配置」中添加比赛。',
  'outright.btn.add_team': '添加队伍',
+  'outright.add.filter_fixture': '已有队伍',
+  'outright.add.filter_all': '全部内置',
+  'outright.add.select_all': '全选',
+  'outright.add.clear_selection': '取消全选',
+  'outright.add.selected_count': '已选 {n} 支',
+  'outright.add.empty_fixture': '暂无待添加的参赛球队（单场中已有且未在冠军盘的球队会显示在此）',
+  'outright.add.empty_all': '所有内置球队均已加入冠军盘',
+  'outright.add.default_odds': '默认赔率',
+  'outright.add.search_ph': '搜索队名或代码',
+  'outright.add.err_none': '请至少选择一支球队',
+  'outright.batch.mode': '批量管理',
+  'outright.batch.exit': '退出批量',
+  'outright.batch.apply_odds': '应用赔率',
+  'outright.batch.remove': '批量移除',
+  'outright.batch.confirm_remove': '确定移除选中的 {n} 支队伍？',
+  'outright.batch.err_none': '请先选择队伍',
+  'outright.batch.apply_ok': '已更新 {n} 支队伍的赔率，请点击「保存全部赔率」',
+  'outright.batch.remove_ok': '已移除 {n} 支队伍',
+  'outright.batch.remove_partial': '成功 {ok} 支，失败 {fail} 支',
+  'outright.sort.label': '排序',
+  'outright.sort.rank': '排名',
+  'outright.sort.name': '队名',
+  'outright.sort.code': '代码',
+  'outright.sort.odds': '赔率（当前）',
+  'outright.sort.saved_odds': '赔率（已保存）',
+  'outright.sort.asc': '升序',
+  'outright.sort.desc': '降序',
+  'msg.outright_teams_added': '已添加 {n} 支球队（跳过 {skipped} 支）',
  'outright.btn.create_event': '新建冠军赛事',
  'outright.btn.import_wc2026': '导入世界杯 48 强',
  'outright.btn.apply_canonical': '应用世界杯基准表',
@@ -617,6 +661,7 @@ export const adminPagesEn: Record<string, string> = {
  'user.btn.hide_password': 'Hide',
  'user.ph.reset_password': 'Leave empty to keep; new value will be viewable',
  'user.ph.reset_password_short': 'Leave empty to keep',
+  'user.page_settings': 'Global settings',
  'user.global_settings': 'Password & account (global)',
  'user.global_settings_hint': 'Controls whether all players can change password or username in the app',
  'user.section.password_mgmt': 'Password management',
@@ -684,7 +729,9 @@ export const adminPagesEn: Record<string, string> = {
  'match.create_fixture_btn': '+ Add fixture',
  'match.btn.markets': 'Markets',
  'match.filter.keyword_ph': 'Tournament / team code',
+  'match.filter.status_hint': 'Filters fixtures inside a league and the fixture count column; empty leagues stay visible',
  'match.col.league': 'Tournament',
+  'match.col.league_en': 'League (EN)',
  'match.col.fixture_count': 'Fixtures',
  'match.col.bet_count': 'Bets',
  'match.col.total_stake': 'Total stake',
@@ -705,6 +752,8 @@ export const adminPagesEn: Record<string, string> = {
  'match.field.lang_en': 'EN',
  'match.field.lang_ms': 'MS',
  'match.field.kickoff': 'Kickoff time',
+  'match.field.home_team': 'Home team',
+  'match.field.away_team': 'Away team',
  'match.field.home_en': 'Home (EN)',
  'match.field.home_zh': 'Home (ZH)',
  'match.field.home_ms': 'Home (MS)',
@@ -715,7 +764,14 @@ export const adminPagesEn: Record<string, string> = {
  'match.hint.create_draft': 'Saved as draft; expand the tournament and publish each fixture to open markets.',
  'match.hint.create_league': 'Create a tournament first, then expand it to add fixtures.',
  'match.hint.edit_published': 'Published: edit kickoff, featured, display names; closed/settled are locked.',
-  'match.expand_league_hint': 'Expand a tournament to see fixtures; use Markets for a dedicated odds page (same grouping as player app).',
+  'match.expand_league_hint': 'Expand a league to manage fixtures; set winner odds under Outright odds.',
+  'match.expand_outright_hint': 'Expand a league to edit winner odds; fixture teams sync automatically, and you can add teams not yet on the schedule.',
+  'outright.odds_only_hint': 'Teams from fixtures are added automatically; add extra teams manually and edit winner odds here.',
+  'outright.col.teams_from_fixtures': 'Teams (from fixtures)',
+  'outright.col.teams_total': 'Outright teams',
+  'outright.empty_no_teams': 'No teams yet — add fixtures under Fixtures or click Add team.',
+  'match.outright.setup': 'Set up',
+  'match.outright.section_hint': 'Winner market for this league; fixtures are listed below',
  'match.expand_markets_hint': 'Click Markets on a fixture to open the dedicated markets page.',
  'match.no_fixtures': 'No fixtures under this tournament yet.',
  'match.ph.league_ms': 'World Cup 2027',
@@ -730,6 +786,7 @@ export const adminPagesEn: Record<string, string> = {
  'bet.col.agent': 'Agent',
  'bet.col.selection': 'Pick',
  'bet.col.content': 'Selections',
+  'bet.content.bet_counts': '{singles} single · {parlays} parlay',
  'bet.col.match': 'Match',
  'bet.legs_more': '+{n} more…',
  'bet.col.selection_count': 'Legs',
@@ -876,6 +933,7 @@ export const adminPagesEn: Record<string, string> = {
  'err.password_mismatch': 'Passwords do not match',
  'err.credit_negative': 'Credit limit cannot be negative',
  'err.kickoff_required': 'Kickoff time is required',
+  'err.team_country_required': 'Select home and away teams',
  'err.teams_required': 'Enter home and away team names (ZH or EN)',
  'err.teams_same': 'Home and away teams must be different',
  'err.league_required': 'League name is required',
@@ -1076,7 +1134,37 @@ export const adminPagesEn: Record<string, string> = {
  'outright.col.player_visible': 'Player',
  'outright.col.league_en': 'League (EN)',
  'outright.expand_no_teams': 'No teams — open Edit to add',
+  'outright.fixtures_sync_hint': 'Teams come from league fixtures; adjust odds and publish status only.',
+  'outright.empty_no_fixtures': 'No fixtures in this league — add matches under Fixtures first.',
  'outright.btn.add_team': 'Add team',
+  'outright.add.filter_fixture': 'From fixtures',
+  'outright.add.filter_all': 'All built-in',
+  'outright.add.select_all': 'Select all',
+  'outright.add.clear_selection': 'Clear selection',
+  'outright.add.selected_count': '{n} selected',
+  'outright.add.empty_fixture': 'No fixture teams to add (teams in matches but not yet on the outright market)',
+  'outright.add.empty_all': 'All built-in teams are already on the outright market',
+  'outright.add.default_odds': 'Default odds',
+  'outright.add.search_ph': 'Search name or code',
+  'outright.add.err_none': 'Select at least one team',
+  'outright.batch.mode': 'Batch manage',
+  'outright.batch.exit': 'Exit batch',
+  'outright.batch.apply_odds': 'Apply odds',
+  'outright.batch.remove': 'Remove selected',
+  'outright.batch.confirm_remove': 'Remove {n} selected team(s)?',
+  'outright.batch.err_none': 'Select teams first',
+  'outright.batch.apply_ok': 'Updated odds for {n} team(s) — click Save all odds',
+  'outright.batch.remove_ok': 'Removed {n} team(s)',
+  'outright.batch.remove_partial': '{ok} removed, {fail} failed',
+  'outright.sort.label': 'Sort',
+  'outright.sort.rank': 'Rank',
+  'outright.sort.name': 'Team name',
+  'outright.sort.code': 'Code',
+  'outright.sort.odds': 'Odds (current)',
+  'outright.sort.saved_odds': 'Odds (saved)',
+  'outright.sort.asc': 'Ascending',
+  'outright.sort.desc': 'Descending',
+  'msg.outright_teams_added': 'Added {n} team(s) ({skipped} skipped)',
  'outright.btn.create_event': 'New outright event',
  'outright.btn.import_wc2026': 'Import WC 2026 (48)',
  'outright.btn.apply_canonical': 'Apply WC baseline',
--- a/apps/admin/src/layouts/ManageLayout.vue
+++ b/apps/admin/src/layouts/ManageLayout.vue
@@ -1,22 +1,25 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
 import { useAuthStore } from '../stores/auth';
 import { useAdminLocale } from '../composables/useAdminLocale';
 import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';
+import { resolveAdminBreadcrumb } from '../utils/admin-breadcrumb';

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

+const sidebarOpen = ref(false);
+const isMobileNav = ref(false);
+
 const adminMenus = computed(() => [
  { path: '/', label: t('nav.dashboard') },
+  { path: '/matches', label: t('nav.matches'), matchPrefix: true },
+  { path: '/bets', label: t('nav.bets') },
  { path: '/users', label: t('nav.users') },
  { path: '/agents', label: t('nav.agents') },
-  { path: '/matches', label: t('nav.matches'), matchPrefix: true },
-  { path: '/outrights', label: t('nav.outrights'), matchPrefix: true },
-  { path: '/bets', label: t('nav.bets') },
  { path: '/cashback', label: t('nav.cashback') },
  { path: '/contents', label: t('nav.contents') },
  { path: '/audit', label: t('nav.audit') },
@@ -25,36 +28,91 @@ const adminMenus = computed(() => [
 const agentMenus = computed(() => [
  { path: '/', label: t('nav.dashboard') },
  { path: '/my-players', label: t('nav.players') },
-  { path: '/sub-agents', label: t('nav.subAgents') },
  { path: '/my-bets', label: t('nav.myBets') },
+  { path: '/sub-agents', label: t('nav.subAgents') },
 ]);

 const menus = computed(() => (auth.isAdmin.value ? adminMenus.value : agentMenus.value));

+function isMatchesSectionPath(path: string) {
+  return (
+    path === '/matches' ||
+    path.startsWith('/matches/') ||
+    path.startsWith('/outrights/') ||
+    path.startsWith('/settlement/')
+  );
+}
+
 const currentLabel = computed(() => {
  const hit = menus.value.find((m) => {
    if ('matchPrefix' in m && m.matchPrefix) {
-      return route.path === m.path || route.path.startsWith(`${m.path}/`);
+      return isMatchesSectionPath(route.path);
    }
    return route.path === m.path;
  });
  return hit?.label ?? '';
 });

+const topbarCrumbs = computed(() => resolveAdminBreadcrumb(route.path, t));
+
 const userInitial = computed(() =>
  (auth.user?.username ?? '').charAt(0).toUpperCase()
 );

+function syncMobileNav() {
+  isMobileNav.value = window.matchMedia('(max-width: 1023px)').matches;
+  if (!isMobileNav.value) {
+    sidebarOpen.value = false;
+  }
+}
+
+function toggleSidebar() {
+  sidebarOpen.value = !sidebarOpen.value;
+}
+
+function closeSidebar() {
+  sidebarOpen.value = false;
+}
+
+function onNavClick() {
+  if (isMobileNav.value) {
+    closeSidebar();
+  }
+}
+
 function logout() {
  auth.logout();
  router.push('/login');
 }
+
+onMounted(() => {
+  syncMobileNav();
+  window.addEventListener('resize', syncMobileNav);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', syncMobileNav);
+});
+
+watch(() => route.path, () => {
+  if (isMobileNav.value) {
+    closeSidebar();
+  }
+});
 </script>

 <template>
-  <div class="shell">
+  <div class="shell" :class="{ 'shell--nav-open': sidebarOpen && isMobileNav }">
+    <button
+      v-if="isMobileNav && sidebarOpen"
+      type="button"
+      class="sidebar-backdrop"
+      :aria-label="t('nav.close_menu')"
+      @click="closeSidebar"
+    />
+
    <!-- ── Sidebar ── -->
-    <aside class="sidebar">
+    <aside class="sidebar" :class="{ open: sidebarOpen }">
      <div class="brand">
        <img src="/logo.png" alt="TheBet365" class="brand-logo" />
      </div>
@@ -66,22 +124,47 @@ function logout() {
          :class="{
            active:
              route.path === m.path ||
-              ('matchPrefix' in m && m.matchPrefix && route.path.startsWith(`${m.path}/`)),
+              ('matchPrefix' in m && m.matchPrefix && isMatchesSectionPath(route.path)),
          }"
+          @click="onNavClick"
        >
          {{ m.label }}
        </RouterLink>
      </nav>

-      <div class="sidebar-foot">TheBet365 &copy; 2025</div>
+      <div class="sidebar-foot">TheBet365 &copy; 2026</div>
    </aside>

    <!-- ── Main ── -->
    <div class="main">
      <header class="topbar">
-        <div class="topbar-title">
-          <span class="topbar-accent" />
-          <span>{{ currentLabel }}</span>
+        <div class="topbar-left">
+          <button
+            v-if="isMobileNav"
+            type="button"
+            class="btn-menu"
+            :aria-label="sidebarOpen ? t('nav.close_menu') : t('nav.open_menu')"
+            @click="toggleSidebar"
+          >
+            <span class="menu-icon" aria-hidden="true" />
+          </button>
+          <div class="topbar-title">
+            <span v-if="!topbarCrumbs" class="topbar-accent" />
+            <nav v-if="topbarCrumbs" class="topbar-crumbs" aria-label="Breadcrumb">
+              <template v-for="(item, i) in topbarCrumbs" :key="`${item.label}-${i}`">
+                <RouterLink
+                  v-if="item.to && i < topbarCrumbs.length - 1"
+                  :to="item.to"
+                  class="crumb-link"
+                >
+                  {{ item.label }}
+                </RouterLink>
+                <span v-else class="crumb-current">{{ item.label }}</span>
+                <span v-if="i < topbarCrumbs.length - 1" class="crumb-sep" aria-hidden="true">/</span>
+              </template>
+            </nav>
+            <span v-else class="topbar-page-label">{{ currentLabel }}</span>
+          </div>
        </div>
        <div class="topbar-right">
          <div class="user-chip">
@@ -105,6 +188,7 @@ function logout() {

 <style scoped>
 .shell {
+  --sidebar-width: 176px;
  display: flex;
  height: 100vh;
  overflow: hidden;
@@ -112,7 +196,7 @@ function logout() {

 /* ── Sidebar ── */
 .sidebar {
-  width: 200px;
+  width: var(--sidebar-width);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0; bottom: 0;
@@ -121,18 +205,23 @@ function logout() {
  display: flex;
  flex-direction: column;
  z-index: 100;
+  transition: transform 0.2s ease;
 }

 .brand {
-  padding: 20px 16px 18px;
-  border-bottom: 1px solid #181818;
+  height: 56px;
+  min-height: 56px;
+  padding: 0 10px;
+  border-bottom: 1px solid #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
 }
 .brand-logo {
-  max-width: 140px;
-  max-height: 48px;
+  max-width: 118px;
+  max-height: 34px;
  width: auto;
  height: auto;
  object-fit: contain;
@@ -141,7 +230,7 @@ function logout() {

 .nav {
  flex: 1;
-  padding: 10px 8px;
+  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
@@ -151,10 +240,10 @@ function logout() {
 .nav-item {
  display: flex;
  align-items: center;
-  padding: 10px 14px;
-  border-radius: 7px;
+  padding: 9px 10px;
+  border-radius: 6px;
  color: #aaa;
-  font-size: 13.5px;
+  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s;
  border-left: 2px solid transparent;
@@ -173,16 +262,27 @@ function logout() {
 }

 .sidebar-foot {
-  padding: 12px 16px;
+  padding: 10px 10px;
  font-size: 10px;
  color: #282828;
  border-top: 1px solid #161616;
  letter-spacing: 0.04em;
 }

+.sidebar-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 90;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: rgba(0, 0, 0, 0.55);
+  cursor: pointer;
+}
+
 /* ── Main ── */
 .main {
-  margin-left: 200px;
+  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  display: flex;
@@ -192,23 +292,88 @@ function logout() {
 }

 .topbar {
-  position: sticky; top: 0; z-index: 90;
+  position: sticky; top: 0; z-index: 80;
  height: 56px;
+  min-height: 56px;
+  box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
-  padding: 0 24px;
+  padding: 0 28px;
  background: rgba(6, 6, 6, 0.98);
  border-bottom: 1px solid #1a1a1a;
  backdrop-filter: blur(12px);
 }

+.topbar-left {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.btn-menu {
+  display: none;
+  width: 40px;
+  height: 40px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #2a2a2a;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  color: #ccc;
+  transition: border-color 0.15s, background 0.15s;
+}
+.btn-menu:hover {
+  border-color: #444;
+  background: rgba(255, 255, 255, 0.06);
+}
+.menu-icon {
+  display: block;
+  width: 16px;
+  height: 2px;
+  background: currentColor;
+  border-radius: 1px;
+  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
+}
+
 .topbar-title {
-  display: flex; align-items: center; gap: 10px;
+  display: flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 700;
  color: #e8e8e8;
  letter-spacing: 0.04em;
+  min-width: 0;
+}
+.topbar-page-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.topbar-crumbs {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px 8px;
+  font-size: 14px;
+  font-weight: 600;
+  min-width: 0;
+}
+.crumb-link {
+  color: var(--green-text);
+  transition: color 0.15s;
+}
+.crumb-link:hover {
+  color: #d4fde5;
+}
+.crumb-current {
+  color: #e8e8e8;
+}
+.crumb-sep {
+  color: #444;
+  font-weight: 400;
+  user-select: none;
 }
 .topbar-accent {
-  width: 3px; height: 15px;
+  width: 3px; height: 16px;
  background: linear-gradient(180deg, var(--green-glow), var(--green-deep));
  border-radius: 2px;
  flex-shrink: 0;
@@ -217,6 +382,7 @@ function logout() {

 .topbar-right {
  display: flex; align-items: center; gap: 12px;
+  flex-shrink: 0;
 }

 .user-chip {
@@ -269,7 +435,7 @@ function logout() {
 .page-main {
  flex: 1;
  min-height: 0;
-  padding: 28px;
+  padding: 20px 28px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
@@ -278,4 +444,37 @@ function logout() {
  flex: 1;
  min-height: 0;
 }
+
+@media (max-width: 1023px) {
+  .sidebar {
+    transform: translateX(-100%);
+    box-shadow: none;
+  }
+  .sidebar.open {
+    transform: translateX(0);
+    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
+  }
+  .main {
+    margin-left: 0;
+  }
+  .btn-menu {
+    display: inline-flex;
+  }
+  .page-main {
+    padding: 16px;
+  }
+  .topbar {
+    padding: 0 14px;
+  }
+  .user-info,
+  .portal-tag {
+    display: none;
+  }
+}
+
+@media (max-width: 640px) {
+  .topbar-right {
+    gap: 8px;
+  }
+}
 </style>
--- a/apps/admin/src/router/index.ts
+++ b/apps/admin/src/router/index.ts
@@ -26,6 +26,11 @@ const router = createRouter({
          component: () => import('../views/Matches.vue'),
          meta: { adminOnly: true },
        },
+        {
+          path: 'matches/outrights',
+          component: () => import('../views/MatchesOutrights.vue'),
+          meta: { adminOnly: true },
+        },
        {
          path: 'matches/:matchId/edit',
          name: 'admin-match-edit',
@@ -38,19 +43,14 @@ const router = createRouter({
          component: () => import('../views/matches/MatchMarketsPage.vue'),
          meta: { adminOnly: true },
        },
-        {
-          path: 'outrights',
-          name: 'admin-outrights',
-          component: () => import('../views/outrights/OutrightList.vue'),
-          meta: { adminOnly: true },
-        },
+        { path: 'outrights', redirect: '/matches/outrights' },
        {
          path: 'outrights/:matchId/edit',
          name: 'admin-outright-edit',
-          component: () => import('../views/outrights/OutrightEventEditor.vue'),
+          component: () => import('../views/outrights/OutrightEditRedirect.vue'),
          meta: { adminOnly: true },
        },
-        { path: 'world-cup-outright', redirect: '/outrights' },
+        { path: 'world-cup-outright', redirect: '/matches/outrights' },
        {
          path: 'bets',
          component: () => import('../views/Bets.vue'),
--- a/apps/admin/src/utils/admin-breadcrumb.ts
+++ b/apps/admin/src/utils/admin-breadcrumb.ts
@@ -0,0 +1,42 @@
+export interface AdminBreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
+/** 子页面顶栏面包屑（一级菜单 + 当前子页） */
+export function resolveAdminBreadcrumb(
+  path: string,
+  t: (key: string) => string,
+): AdminBreadcrumbItem[] | null {
+  if (/^\/settlement\/[^/]+/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.settlement') },
+    ];
+  }
+  if (/^\/matches\/[^/]+\/edit/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.match_edit') },
+    ];
+  }
+  if (/^\/matches\/[^/]+\/markets/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('breadcrumb.match_markets') },
+    ];
+  }
+  if (path === '/matches/outrights') {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('nav.matches.outrights') },
+    ];
+  }
+  if (/^\/outrights\/[^/]+\/edit/.test(path)) {
+    return [
+      { label: t('nav.matches'), to: '/matches' },
+      { label: t('nav.matches.outrights'), to: '/matches/outrights' },
+    ];
+  }
+  return null;
+}
--- 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;