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

管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。

API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。

Co-authored-by: Cursor <cursoragent@cursor.com>

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>