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>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user