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

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

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

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

apps/player/src/components/MatchBetCard.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import TeamEmblem from './TeamEmblem.vue';
+import { teamFlagUrl } from '../utils/teamFlag';
 
 const props = defineProps<{
   match: {
@@ -18,44 +18,50 @@ const props = defineProps<{
 
 const emit = defineEmits<{ bet: [id: string] }>();
 
-const { t, locale } = useI18n();
+const { t } = useI18n();
 
-const kickoff = computed(() => {
-  const d = new Date(props.match.startTime);
-  return d.toLocaleString(locale.value, {
-    month: '2-digit',
-    day: '2-digit',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: true,
-  });
-});
+function teamBgStyle(
+  code?: string,
+  name?: string,
+  logoUrl?: string | null,
+) {
+  const url = teamFlagUrl(code, name, logoUrl);
+  if (!url) return {};
+  const isCustomLogo = Boolean(logoUrl?.trim());
+  return {
+    backgroundImage: `url(${url})`,
+    backgroundSize: isCustomLogo ? '36px auto' : '48px auto',
+  };
+}
 
+const homeBgStyle = computed(() =>
+  teamBgStyle(
+    props.match.homeTeamCode,
+    props.match.homeTeamName,
+    props.match.homeTeamLogoUrl,
+  ),
+);
+
+const awayBgStyle = computed(() =>
+  teamBgStyle(
+    props.match.awayTeamCode,
+    props.match.awayTeamName,
+    props.match.awayTeamLogoUrl,
+  ),
+);
 </script>
 
 <template>
   <article class="match-card">
-    <div class="kickoff">{{ kickoff }}</div>
-    <div class="teams-stack">
-      <div class="side">
-        <TeamEmblem
-          size="sm"
-          :team-code="match.homeTeamCode"
-          :team-name="match.homeTeamName"
-          :logo-url="match.homeTeamLogoUrl"
-        />
-        <span class="name">{{ match.homeTeamName }}</span>
-      </div>
+    <div class="bg-split" aria-hidden="true">
+      <div class="bg-half home-bg" :style="homeBgStyle" />
+      <div class="bg-half away-bg" :style="awayBgStyle" />
+      <div class="bg-veil" />
+    </div>
+    <div class="teams-row">
+      <span class="name home-name">{{ match.homeTeamName }}</span>
       <span class="vs">VS</span>
-      <div class="side">
-        <TeamEmblem
-          size="sm"
-          :team-code="match.awayTeamCode"
-          :team-name="match.awayTeamName"
-          :logo-url="match.awayTeamLogoUrl"
-        />
-        <span class="name">{{ match.awayTeamName }}</span>
-      </div>
+      <span class="name away-name">{{ match.awayTeamName }}</span>
     </div>
     <button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
       {{ t('bet.place_bet_short') }}
@@ -65,69 +71,105 @@ const kickoff = computed(() => {
 
 <style scoped>
 .match-card {
-  background: #1a1a1a;
-  border: 1px solid #2a2a2a;
+  position: relative;
+  overflow: hidden;
+  background: #0d0d0d;
+  border: 1px solid rgba(255, 215, 0, 0.25);
   border-radius: 6px;
-  padding: 6px 4px 5px;
+  padding: 8px 10px 10px;
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.bg-split {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.bg-half {
+  position: absolute;
+  inset: 0;
+  background-repeat: no-repeat;
+  opacity: 0.48;
+}
+
+.home-bg {
+  clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
+  background-position: 22% 50%;
+}
+
+.away-bg {
+  clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
+  background-position: 78% 50%;
+}
+
+.bg-veil {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    102deg,
+    rgba(0, 0, 0, 0.52) 0%,
+    rgba(0, 0, 0, 0.28) 46%,
+    rgba(0, 0, 0, 0.28) 54%,
+    rgba(0, 0, 0, 0.52) 100%
+  );
+}
+
+.teams-row {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
   gap: 4px;
-  min-width: 0;
-}
-
-.kickoff {
-  width: 100%;
-  text-align: center;
-  font-size: 9px;
-  line-height: 1.25;
-  color: var(--text-muted);
-  font-weight: 600;
-}
-
-.teams-stack {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-}
-
-.side {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 2px;
-  min-width: 0;
+  min-height: 32px;
 }
 
 .name {
-  width: 100%;
-  font-size: 10px;
-  font-weight: 800;
+  font-size: 14px;
+  font-weight: 900;
   color: var(--primary-light);
-  line-height: 1.2;
-  text-align: center;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 2px;
+  line-height: 1.25;
+  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
+  word-break: keep-all;
+}
+
+.home-name {
+  text-align: left;
+  padding-left: 2px;
+}
+
+.away-name {
+  text-align: right;
+  padding-right: 2px;
 }
 
 .vs {
-  font-size: 9px;
+  flex-shrink: 0;
+  font-size: 10px;
   font-weight: 800;
   color: var(--text-muted);
   line-height: 1;
+  letter-spacing: 0.06em;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
 }
 
 .bet-btn {
-  width: 100%;
-  margin-top: 2px;
-  padding: 3px 2px;
-  border-radius: 4px;
-  font-size: 10px;
+  position: relative;
+  z-index: 1;
+  width: auto;
+  min-width: 72px;
+  max-width: 42%;
+  margin-top: 0;
+  padding: 5px 18px;
+  border-radius: 6px;
+  font-size: 12px;
   letter-spacing: 0.04em;
   line-height: 1.2;
 }