feat: refactor agent manager, media library, and player UX

- Split admin users page into player/tier-1/tier-2 tabs with affiliation labels and context-specific create dialogs

- Add media library with uploaded_files migration, list/delete unused files API, and admin nav route

- Enforce player username format (alphanumeric 3-32) on frontend and backend via shared package

- Improve admin dialog/panel styling; refine player parlay and match bet card kickoff display

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

apps/player/src/components/BetHistoryCard.vue

@@ -67,6 +67,8 @@ const subtitle = computed(() => {
   return props.bet.pickLabel || props.bet.leagueName || '';
 });
 
+const stakeAmount = computed(() => formatMoney(props.bet.stake, locale.value));
+
 const returnAmount = computed(() => {
   if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
   if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
@@ -94,6 +96,9 @@ function goDetail() {
       <span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
     </div>
     <div class="card-right">
+      <span class="stake-amt">
+        {{ t('history.stake') }} {{ stakeAmount }}
+      </span>
       <span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
         {{ returnAmount }}
       </span>
@@ -176,6 +181,12 @@ function goDetail() {
   gap: 4px;
 }
 
+.stake-amt {
+  font-size: 11px;
+  color: #666;
+  font-weight: 600;
+}
+
 .return-amt {
   font-size: 15px;
   font-weight: 900;

apps/player/src/components/MatchBetCard.vue

@@ -18,51 +18,68 @@ const props = defineProps<{
 
 const emit = defineEmits<{ bet: [id: string] }>();
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
-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',
-  };
+function formatKickoff(startTime: string) {
+  const d = new Date(startTime);
+  const now = new Date();
+  const isToday =
+    d.getFullYear() === now.getFullYear() &&
+    d.getMonth() === now.getMonth() &&
+    d.getDate() === now.getDate();
+  const timeStr = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
+  if (isToday) return `${t('bet.today')} ${timeStr}`;
+  const dateStr = d.toLocaleDateString(locale.value, { month: 'numeric', day: 'numeric' });
+  return `${dateStr} ${timeStr}`;
 }
 
-const homeBgStyle = computed(() =>
-  teamBgStyle(
-    props.match.homeTeamCode,
-    props.match.homeTeamName,
-    props.match.homeTeamLogoUrl,
-  ),
+const kickoffText = computed(() => formatKickoff(props.match.startTime));
+
+const homeFlagUrl = computed(() =>
+  teamFlagUrl(props.match.homeTeamCode, props.match.homeTeamName, props.match.homeTeamLogoUrl),
+);
+const awayFlagUrl = computed(() =>
+  teamFlagUrl(props.match.awayTeamCode, props.match.awayTeamName, props.match.awayTeamLogoUrl),
 );
 
-const awayBgStyle = computed(() =>
-  teamBgStyle(
-    props.match.awayTeamCode,
-    props.match.awayTeamName,
-    props.match.awayTeamLogoUrl,
-  ),
-);
+const homeIsLogo = computed(() => Boolean(props.match.homeTeamLogoUrl?.trim()));
+const awayIsLogo = computed(() => Boolean(props.match.awayTeamLogoUrl?.trim()));
 </script>
 
 <template>
   <article class="match-card">
-    <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>
-      <span class="name away-name">{{ match.awayTeamName }}</span>
+      <!-- Home -->
+      <div class="team">
+        <span class="team-name">{{ match.homeTeamName }}</span>
+        <img
+          v-if="homeFlagUrl"
+          :src="homeFlagUrl"
+          class="team-flag"
+          :class="{ 'flag-logo': homeIsLogo }"
+          alt=""
+        />
+      </div>
+
+      <!-- Center -->
+      <div class="center-col">
+        <span class="kickoff">{{ kickoffText }}</span>
+        <span class="vs">VS</span>
+      </div>
+
+      <!-- Away -->
+      <div class="team">
+        <span class="team-name">{{ match.awayTeamName }}</span>
+        <img
+          v-if="awayFlagUrl"
+          :src="awayFlagUrl"
+          class="team-flag"
+          :class="{ 'flag-logo': awayIsLogo }"
+          alt=""
+        />
+      </div>
     </div>
+
     <button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
       {{ t('bet.place_bet_short') }}
     </button>
@@ -71,105 +88,98 @@ const awayBgStyle = computed(() =>
 
 <style scoped>
 .match-card {
-  position: relative;
-  overflow: hidden;
   background: #0d0d0d;
   border: 1px solid rgba(255, 215, 0, 0.25);
   border-radius: 6px;
-  padding: 8px 10px 10px;
+  padding: 10px 8px 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.teams-row {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 4px;
+}
+
+.team {
+  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 6px;
   min-width: 0;
+  transform: translateY(8px);
 }
 
-.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;
+.team-name {
+  flex: 1;
+  display: flex;
   align-items: center;
-  gap: 4px;
-  min-height: 32px;
-}
-
-.name {
-  font-size: 14px;
+  justify-content: center;
+  font-size: 17px;
   font-weight: 900;
   color: var(--primary-light);
-  line-height: 1.25;
-  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
-  word-break: keep-all;
+  line-height: 1.2;
+  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95);
+  word-break: break-word;
+  text-align: center;
+  padding: 0 6px;
+  align-self: stretch;
 }
 
-.home-name {
-  text-align: left;
-  padding-left: 2px;
+.team-flag {
+  width: 72px;
+  height: 48px;
+  object-fit: cover;
+  border-radius: 3px;
+  display: block;
 }
 
-.away-name {
-  text-align: right;
-  padding-right: 2px;
+.team-flag.flag-logo {
+  width: 48px;
+  height: 48px;
+  object-fit: contain;
+}
+
+.center-col {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 56px;
+}
+
+.kickoff {
+  font-size: 13px;
+  font-weight: 700;
+  color: #b0a060;
+  line-height: 1;
+  white-space: nowrap;
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
 }
 
 .vs {
-  flex-shrink: 0;
-  font-size: 10px;
-  font-weight: 800;
-  color: var(--text-muted);
+  font-size: 22px;
+  font-weight: 900;
+  color: #fff;
+  letter-spacing: 0.08em;
   line-height: 1;
-  letter-spacing: 0.06em;
-  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
+  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
 }
 
 .bet-btn {
-  position: relative;
-  z-index: 1;
   width: auto;
-  min-width: 72px;
-  max-width: 42%;
-  margin-top: 0;
-  padding: 5px 18px;
+  min-width: 80px;
+  padding: 5px 24px;
   border-radius: 6px;
-  font-size: 12px;
+  font-size: 13px;
   letter-spacing: 0.04em;
   line-height: 1.2;
 }

apps/player/src/components/parlay/ParlayPanel.vue

@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import api from '../../api';
 import { useBetSlipStore } from '../../stores/betSlip';
 import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
-import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS } from '../../utils/parlayColumns';
+import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS, PARLAY_MARKET_GROUPS } from '../../utils/parlayColumns';
 import BetGuideHelp from '../BetGuideHelp.vue';
 import GoldSpinner from '../GoldSpinner.vue';
 import TeamEmblem from '../TeamEmblem.vue';
@@ -282,51 +282,68 @@ function toggleCollapse(id: string) {
     <div v-else-if="filteredMatches.length" class="match-list">
       <div v-for="match in filteredMatches" :key="match.id" class="match-card" :class="{ collapsed: collapsed.has(match.id) }">
         <button type="button" class="match-head" @click="toggleCollapse(match.id)">
-          <span class="m-league">{{ match.leagueName }}</span>
-          <TeamEmblem
-            size="sm"
-            :team-code="match.homeTeamCode"
-            :team-name="match.homeTeamName"
-            :logo-url="match.homeTeamLogoUrl"
-          />
-          <span class="m-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</span>
-          <TeamEmblem
-            size="sm"
-            :team-code="match.awayTeamCode"
-            :team-name="match.awayTeamName"
-            :logo-url="match.awayTeamLogoUrl"
-          />
-          <span class="m-time">{{ formatKickoff(match.startTime) }}</span>
-          <span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
+          <div class="match-head-top">
+            <span class="m-league">{{ match.leagueName }}</span>
+            <span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">
+              {{ collapsed.has(match.id) ? '+' : '−' }}
+            </span>
+          </div>
+          <div class="match-head-teams">
+            <div class="m-team home">
+              <TeamEmblem
+                size="sm"
+                :team-code="match.homeTeamCode"
+                :team-name="match.homeTeamName"
+                :logo-url="match.homeTeamLogoUrl"
+              />
+              <span class="m-name">{{ match.homeTeamName }}</span>
+            </div>
+            <div class="m-center">
+              <span class="m-time">{{ formatKickoff(match.startTime) }}</span>
+              <span class="m-vs">VS</span>
+            </div>
+            <div class="m-team away">
+              <span class="m-name">{{ match.awayTeamName }}</span>
+              <TeamEmblem
+                size="sm"
+                :team-code="match.awayTeamCode"
+                :team-name="match.awayTeamName"
+                :logo-url="match.awayTeamLogoUrl"
+              />
+            </div>
+          </div>
         </button>
 
         <div v-show="!collapsed.has(match.id)" class="market-blocks">
-          <div
-            v-for="col in PARLAY_MARKET_TYPES"
-            :key="col.key"
-            class="market-block"
-          >
-            <span class="block-label">{{ colLabel(col.labelKey) }}</span>
-            <div class="block-btns">
-              <template
-                v-if="
-                  getMarket(match, col.key) &&
-                  isParlayEligibleMarket(getMarket(match, col.key)!)
-                "
-              >
-                <button
-                  v-for="sel in getMarket(match, col.key)!.selections"
-                  :key="sel.id"
-                  type="button"
-                  class="odd-btn"
-                  :class="{ picked: isPicked(sel.id) }"
-                  @click="pickSelection(match, getMarket(match, col.key)!, sel)"
+          <div v-for="group in PARLAY_MARKET_GROUPS" :key="group.headerKey" class="market-group">
+            <div class="group-header">{{ colLabel(group.headerKey) }}</div>
+            <div
+              v-for="col in group.columns"
+              :key="col.key"
+              class="market-row"
+            >
+              <span class="block-label">{{ colLabel(col.labelKey) }}</span>
+              <div class="block-btns">
+                <template
+                  v-if="
+                    getMarket(match, col.key) &&
+                    isParlayEligibleMarket(getMarket(match, col.key)!)
+                  "
                 >
-                  <span class="odd-label">{{ selLabel(sel) }}</span>
-                  <span class="odd-val">{{ formatOdds(sel.odds) }}</span>
-                </button>
-              </template>
-              <span v-else class="market-empty">—</span>
+                  <button
+                    v-for="sel in getMarket(match, col.key)!.selections"
+                    :key="sel.id"
+                    type="button"
+                    class="odd-btn"
+                    :class="{ picked: isPicked(sel.id) }"
+                    @click="pickSelection(match, getMarket(match, col.key)!, sel)"
+                  >
+                    <span class="odd-label">{{ selLabel(sel) }}</span>
+                    <span class="odd-val">{{ formatOdds(sel.odds) }}</span>
+                  </button>
+                </template>
+                <span v-else class="market-empty">—</span>
+              </div>
             </div>
           </div>
         </div>
@@ -452,20 +469,79 @@ function toggleCollapse(id: string) {
 .match-head {
   width: 100%;
   display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 10px;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 4px;
+  padding: 8px 10px;
   background: none;
   border: none;
   color: inherit;
   font-family: inherit;
   cursor: pointer;
+  text-align: left;
 }
 
 .match-head:active {
   background: rgba(255, 255, 255, 0.015);
 }
 
+.match-head-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.match-head-teams {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.m-team {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+}
+
+.m-team.away {
+  justify-content: flex-end;
+}
+
+.m-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1px;
+  flex-shrink: 0;
+  padding: 0 4px;
+}
+
+.m-name {
+  font-size: 12px;
+  font-weight: 800;
+  color: var(--primary-light);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.m-vs {
+  font-size: 9px;
+  font-weight: 700;
+  color: #555;
+  letter-spacing: 0.05em;
+}
+
+.m-time {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+
 .toggle-dot {
   flex-shrink: 0;
   width: 20px;
@@ -492,26 +568,12 @@ function toggleCollapse(id: string) {
   font-size: 10px;
   color: var(--text-muted);
   font-weight: 600;
-  flex-shrink: 0;
-}
-
-.m-teams {
-  font-size: 12px;
-  font-weight: 800;
-  color: var(--primary-light);
-  flex: 1;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.m-time {
-  font-size: 10px;
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
 .match-head :deep(.team-emblem) {
   width: 18px;
   height: 18px;
@@ -520,12 +582,29 @@ function toggleCollapse(id: string) {
 
 .market-blocks {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+  flex-direction: column;
+  gap: 8px;
   padding: 8px 10px 10px;
+  border-top: 1px solid #1e1e1e;
 }
 
-.market-block {
+.market-group {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px 6px;
+}
+
+.group-header {
+  grid-column: 1 / -1;
+  font-size: 10px;
+  font-weight: 700;
+  color: #888;
+  letter-spacing: 0.04em;
+  padding: 0 2px 2px;
+  border-bottom: 1px solid #1e1e1e;
+}
+
+.market-row {
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -538,6 +617,9 @@ function toggleCollapse(id: string) {
   color: var(--text-muted);
   letter-spacing: 0.03em;
   padding: 0 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .block-btns {
@@ -583,7 +665,6 @@ function toggleCollapse(id: string) {
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 44px;
   min-height: 36px;
   color: #444;
   font-size: 12px;

apps/player/src/main.ts

@@ -149,6 +149,7 @@ const i18n = createI18n({
         tab_parlay: '串关投注',
         tab_today: '今日',
         tab_early: '早盘',
+        today: '今日',
         loading: '加载中…',
         no_matches: '暂无赛事',
         outright_coming: '优胜冠军玩法即将上线',
@@ -207,6 +208,10 @@ const i18n = createI18n({
         market_ht_handicap: '半场 让球',
         market_ht_ou: '半场 大小',
         market_ht_1x2: '半场 独赢盘',
+        parlay_lbl_handicap: '让球',
+        parlay_lbl_ou: '大小',
+        parlay_lbl_1x2: '独赢盘',
+        parlay_lbl_oe: '单/双',
         parlay_sel_home: '主',
         parlay_sel_away: '客',
         parlay_sel_draw: '和',
@@ -450,6 +455,7 @@ const i18n = createI18n({
         tab_parlay: 'Parlay',
         tab_today: 'Today',
         tab_early: 'Early',
+        today: 'Today',
         loading: 'Loading…',
         no_matches: 'No matches',
         outright_coming: 'Outright markets coming soon',
@@ -508,6 +514,10 @@ const i18n = createI18n({
         market_ht_handicap: 'HT Handicap',
         market_ht_ou: 'HT O/U',
         market_ht_1x2: 'HT 1X2',
+        parlay_lbl_handicap: 'Handicap',
+        parlay_lbl_ou: 'O/U',
+        parlay_lbl_1x2: '1X2',
+        parlay_lbl_oe: 'Odd/Even',
         parlay_sel_home: 'H',
         parlay_sel_away: 'A',
         parlay_sel_draw: 'D',
@@ -757,6 +767,7 @@ const i18n = createI18n({
         tab_parlay: 'Berganda',
         tab_today: 'Hari Ini',
         tab_early: 'Awal',
+        today: 'Hari Ini',
         loading: 'Memuatkan…',
         no_matches: 'Tiada perlawanan',
         outright_coming: 'Pasaran juara akan datang',
@@ -815,6 +826,10 @@ const i18n = createI18n({
         market_ht_handicap: 'Handicap Separuh',
         market_ht_ou: 'Atas/Bawah Separuh',
         market_ht_1x2: '1X2 Separuh',
+        parlay_lbl_handicap: 'Handicap',
+        parlay_lbl_ou: 'Atas/Bawah',
+        parlay_lbl_1x2: '1X2',
+        parlay_lbl_oe: 'Ganjil/Genap',
         parlay_sel_home: 'R',
         parlay_sel_away: 'P',
         parlay_sel_draw: 'S',

apps/player/src/utils/parlayColumns.ts

@@ -11,6 +11,27 @@ export const PARLAY_MARKET_TYPES = [
 
 export type ParlayMarketType = (typeof PARLAY_MARKET_TYPES)[number]['key'];
 
+/** 按全场 / 半场分组（headerKey 对应 bet.ft / bet.ht） */
+export const PARLAY_MARKET_GROUPS = [
+  {
+    headerKey: 'ft',
+    columns: [
+      { key: 'FT_HANDICAP', labelKey: 'parlay_lbl_handicap' },
+      { key: 'FT_OVER_UNDER', labelKey: 'parlay_lbl_ou' },
+      { key: 'FT_1X2', labelKey: 'parlay_lbl_1x2' },
+      { key: 'FT_ODD_EVEN', labelKey: 'parlay_lbl_oe' },
+    ],
+  },
+  {
+    headerKey: 'ht',
+    columns: [
+      { key: 'HT_HANDICAP', labelKey: 'parlay_lbl_handicap' },
+      { key: 'HT_OVER_UNDER', labelKey: 'parlay_lbl_ou' },
+      { key: 'HT_1X2', labelKey: 'parlay_lbl_1x2' },
+    ],
+  },
+] as const;
+
 /** 选项简称 i18n key（串关格内展示） */
 export const PARLAY_SELECTION_KEYS: Record<string, string> = {
   HOME: 'parlay_sel_home',