ysc/thebet365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: split admin dashboard, improve match ops, and player closed-match UX

Browse Source 
Admin: add match/player overview sub-nav; refine settlement flow and league
match management UI; improve action button enabled/disabled styles; enhance
logo upload and outright odds sync.

API: expose matchPhase/bettingOpen for closed matches; league publish guards;
settlement preview with auto score save; outright team auto-sync.

Player: watermark for closed/settled states; keep match and bet details visible;
remove default login credentials.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-10 13:00:14 +08:00
parent 6124313369
commit 03f54ca689
43 changed files with 2787 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/admin/src/views/matches/LeagueMatchesPanel.vue
View File

@@ -193,11 +193,6 @@ defineExpose({ reload: load });
<template>
<div class="league-matches-panel">
<div class="panel-toolbar">
<el-button type="primary" size="small" @click="emit('add-match')">
{{ t('match.create_fixture_btn') }}
</el-button>
</div>
<el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
<el-table-column prop="id" label="ID" width="64" />
<el-table-column :label="t('match.col.matchup')" min-width="180">
@@ -229,7 +224,15 @@ defineExpose({ reload: load });
<span v-else class="bet-stat-zero">0</span>
</template>
</el-table-column>
<el-table-column :label="t('common.actions')" width="460" align="center">
<el-table-column width="460" align="center">
<template #header>
<div class="actions-col-header">
<span class="actions-col-header__label">{{ t('common.actions') }}</span>
<el-button type="primary" size="small" @click.stop="emit('add-match')">
{{ t('match.create_fixture_btn') }}
</el-button>
</div>
</template>
<template #default="{ row }">
<div class="action-btns">
<div class="action-group">
@@ -299,8 +302,41 @@ defineExpose({ reload: load });
padding: 10px 12px 12px;
background: #0a0a0a;
}
.panel-toolbar {
margin-bottom: 8px;
.actions-col-header {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 8px;
padding: 0 4px;
box-sizing: border-box;
white-space: nowrap;
}
.actions-col-header__label {
font-size: 12px;
font-weight: 600;
color: #aaa;
line-height: 1;
}
.actions-col-header :deep(.el-button) {
margin: 0 !important;
padding: 6px 10px !important;
height: 28px !important;
min-height: 28px !important;
font-size: 12px !important;
font-weight: 600;
border-radius: 6px;
white-space: nowrap;
}
.nested-match-table :deep(.el-table__header .el-table__cell) {
padding: 6px 0;
}
.nested-match-table :deep(.el-table__header .cell) {
overflow: visible;
}
.empty-hint {
font-size: 12px;
@@ -338,5 +374,15 @@ defineExpose({ reload: load });
min-width: 52px;
padding: 4px 10px !important;
font-size: 12px !important;
border-radius: 6px;
}
.action-btns :deep(.el-button:not(.is-disabled):not(:disabled)) {
cursor: pointer;
}
.action-btns :deep(.el-button.is-disabled),
.action-btns :deep(.el-button:disabled) {
cursor: not-allowed;
}
</style>

178
apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
View File

@@ -3,6 +3,7 @@ import { computed, ref, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import api from '../../api';
import LogoUrlField from '../../components/LogoUrlField.vue';
import {
BUILTIN_COUNTRIES,
countryFlagUrl,
@@ -28,7 +29,7 @@ interface AddableTeam {
logoUrl: string | null;
}
type AddFilter = 'fixture' | 'all';
type AddFilter = 'all' | 'custom';
type SortKey = 'rank' | 'name' | 'code' | 'odds' | 'saved_odds';
type SortDir = 'asc' | 'desc';
@@ -57,13 +58,13 @@ 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 addFilter = ref<AddFilter>('all');
const addSearch = ref('');
const selectedCodes = ref<Set<string>>(new Set());
const defaultOdds = ref(10);
const customTeam = ref({ teamCode: '', teamZh: '', teamEn: '', logoUrl: '' });
const batchMode = ref(false);
const batchSelectedIds = ref<Set<string>>(new Set());
@@ -86,11 +87,7 @@ const allBuiltinAddable = computed<AddableTeam[]>(() =>
})),
);
const sourceTeams = computed<AddableTeam[]>(() =>
addFilter.value === 'fixture'
? addableFixtureTeams.value
: allBuiltinAddable.value,
);
const sourceTeams = computed<AddableTeam[]>(() => allBuiltinAddable.value);
const visibleAddTeams = computed(() => {
const q = addSearch.value.trim().toLowerCase();
@@ -143,6 +140,8 @@ async function load() {
const { data } = await api.get(`/admin/leagues/${props.leagueId}/outright`);
const payload = data.data as {
id: string;
fixtureSyncAdded?: number;
fixtureSyncReopened?: number;
selections: Array<{
id: string;
teamCode: string;
@@ -153,10 +152,8 @@ async function load() {
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) => ({
@@ -168,6 +165,10 @@ async function load() {
batchSelectedIds.value = new Set(
[...batchSelectedIds.value].filter((id) => openIds.has(id)),
);
const added = payload.fixtureSyncAdded ?? 0;
if (added > 0) {
ElMessage.success(t('outright.fixture_sync_added', { n: added }));
}
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
@@ -176,23 +177,26 @@ async function load() {
}
}
function resetCustomTeamForm() {
customTeam.value = { teamCode: '', teamZh: '', teamEn: '', logoUrl: '' };
}
function onCustomCodeInput(value: string) {
customTeam.value.teamCode = value.toUpperCase().replace(/[^A-Z0-9_]/g, '');
}
function openAddDialog() {
addFilter.value = 'fixture';
addFilter.value = 'all';
addSearch.value = '';
defaultOdds.value = 10;
selectedCodes.value = new Set(
addableFixtureTeams.value.map((team) => team.teamCode),
);
resetCustomTeamForm();
selectedCodes.value = new Set();
addVisible.value = true;
}
function onAddFilterChange() {
addSearch.value = '';
if (addFilter.value === 'fixture') {
selectedCodes.value = new Set(
addableFixtureTeams.value.map((team) => team.teamCode),
);
} else {
if (addFilter.value === 'all') {
selectedCodes.value = new Set();
}
}
@@ -319,6 +323,58 @@ async function saveOdds() {
}
}
async function submitCustomAdd() {
if (!matchId.value) return;
const code = customTeam.value.teamCode.trim().toUpperCase();
const teamZh = customTeam.value.teamZh.trim();
const teamEn = customTeam.value.teamEn.trim();
if (!code) {
ElMessage.warning(t('outright.add.err_code_required'));
return;
}
if (!teamZh && !teamEn) {
ElMessage.warning(t('outright.add.err_name_required'));
return;
}
if (defaultOdds.value <= 1) {
ElMessage.warning(t('outright.err_odds_min'));
return;
}
if (openTeamCodes.value.has(code)) {
ElMessage.warning(t('outright.add.err_duplicate'));
return;
}
adding.value = true;
try {
await api.post(`/admin/outrights/${matchId.value}/selections`, {
teamCode: code,
teamZh: teamZh || teamEn,
teamEn: teamEn || teamZh,
logoUrl: customTeam.value.logoUrl.trim() || undefined,
odds: defaultOdds.value,
});
ElMessage.success(t('msg.saved'));
addVisible.value = false;
resetCustomTeamForm();
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;
}
}
function onAddConfirm() {
if (addFilter.value === 'custom') {
void submitCustomAdd();
return;
}
void submitAdd();
}
async function submitAdd() {
if (!matchId.value) return;
if (selectedCodes.value.size === 0) {
@@ -331,10 +387,7 @@ async function submitAdd() {
}
const byCode = new Map(
[...addableFixtureTeams.value, ...allBuiltinAddable.value].map((team) => [
team.teamCode,
team,
]),
allBuiltinAddable.value.map((team) => [team.teamCode, team]),
);
const items = [...selectedCodes.value]
@@ -578,17 +631,15 @@ watch(
>
<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-button value="custom">
{{ t('outright.add.filter_custom') }}
</el-radio-button>
</el-radio-group>
<el-input
v-if="addFilter !== 'custom'"
v-model="addSearch"
size="small"
clearable
@@ -597,6 +648,45 @@ watch(
/>
</div>
<div v-if="addFilter === 'custom'" class="add-teams-dialog__custom">
<p class="add-teams-dialog__custom-hint">{{ t('outright.add.custom_hint') }}</p>
<el-form label-width="88px" label-position="left" @submit.prevent="onAddConfirm">
<el-form-item :label="t('outright.add.field_code')" required>
<el-input
:model-value="customTeam.teamCode"
size="small"
maxlength="32"
:placeholder="t('outright.add.ph_code')"
@update:model-value="onCustomCodeInput"
/>
</el-form-item>
<el-form-item :label="t('match.field.lang_zh')">
<el-input v-model="customTeam.teamZh" size="small" :placeholder="t('outright.add.ph_name_zh')" />
</el-form-item>
<el-form-item :label="t('match.field.lang_en')">
<el-input v-model="customTeam.teamEn" size="small" :placeholder="t('outright.add.ph_name_en')" />
</el-form-item>
<el-form-item :label="t('outright.add.field_logo')">
<LogoUrlField
v-model="customTeam.logoUrl"
upload-only
upload-category="teams"
/>
</el-form-item>
<el-form-item :label="t('outright.add.default_odds')" required>
<el-input-number
v-model="defaultOdds"
:min="1.01"
:step="0.05"
:precision="2"
size="small"
controls-position="right"
/>
</el-form-item>
</el-form>
</div>
<template v-else>
<div class="add-teams-dialog__actions">
<el-button size="small" link type="primary" @click="selectAllVisible">
{{ t('outright.add.select_all') }}
@@ -645,20 +735,17 @@ watch(
</button>
</div>
<p v-else class="add-teams-dialog__empty">
{{
addFilter === 'fixture'
? t('outright.add.empty_fixture')
: t('outright.add.empty_all')
}}
{{ t('outright.add.empty_all') }}
</p>
</template>
<template #footer>
<el-button @click="addVisible = false">{{ t('common.cancel') }}</el-button>
<el-button
type="primary"
:loading="adding"
:disabled="selectedCount === 0"
@click="submitAdd"
:disabled="addFilter !== 'custom' && selectedCount === 0"
@click="onAddConfirm"
>
{{ t('common.confirm') }}
</el-button>
@@ -980,6 +1067,25 @@ watch(
color: #666;
}
.add-teams-dialog__custom {
margin-top: 4px;
}
.add-teams-dialog__custom-hint {
margin: 0 0 12px;
font-size: 12px;
color: #888;
line-height: 1.5;
}
.add-teams-dialog__custom :deep(.el-form-item) {
margin-bottom: 12px;
}
.add-teams-dialog__custom :deep(.el-form-item__label) {
color: #8e8e93;
}
.add-teams-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

90
apps/admin/src/views/matches/MatchEventEditor.vue
View File

@@ -8,7 +8,7 @@ import api from '../../api';
import LogoUrlField from '../../components/LogoUrlField.vue';
import { countryDisplayName, type BuiltinCountry } from '../../data/builtinCountries';
import {
buildPlatformPayload,
buildMatchUpdatePayload,
emptyMatchForm,
formFromDetail,
type AdminMatchDetail,
@@ -70,9 +70,9 @@ async function load() {
watch(matchId, load, { immediate: true });
async function saveMeta() {
let payload: ReturnType<typeof buildPlatformPayload>;
let payload: ReturnType<typeof buildMatchUpdatePayload>;
try {
payload = buildPlatformPayload(form.value);
payload = buildMatchUpdatePayload(form.value);
} catch (e) {
ElMessage.warning(resolveFormError(e, t));
return;
@@ -108,31 +108,28 @@ async function saveMeta() {
</div>
<el-form label-width="72px" label-position="left" class="meta-form compact-form">
<div class="form-section">
<div class="form-section league-readonly-block">
<div class="section-label">{{ t('matchEditor.group.league') }}</div>
<el-row :gutter="12">
<el-col :xs="24" :sm="8">
<el-form-item :label="t('match.field.lang_zh')">
<el-input v-model="form.leagueZh" size="small" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item :label="t('match.field.lang_en')">
<el-input v-model="form.leagueEn" size="small" />
</el-form-item>
</el-col>
<el-col :xs="24" :sm="8">
<el-form-item :label="t('match.field.lang_ms')">
<el-input v-model="form.leagueMs" size="small" />
</el-form-item>
</el-col>
<el-col :span="24">
<div class="logo-inline">
<span class="logo-inline-label">{{ t('matchEditor.field.league_logo') }}</span>
<LogoUrlField v-model="form.leagueLogoUrl" />
<p class="field-hint">{{ t('matchEditor.hint.league_readonly') }}</p>
<div class="league-readonly-grid">
<div v-if="form.leagueLogoUrl" class="league-readonly-logo">
<img :src="form.leagueLogoUrl" alt="" />
</div>
<div class="league-readonly-names">
<div v-if="form.leagueZh.trim()" class="league-readonly-line">
<span class="league-readonly-lang">{{ t('match.field.lang_zh') }}</span>
<span>{{ form.leagueZh }}</span>
</div>
</el-col>
</el-row>
<div v-if="form.leagueEn.trim()" class="league-readonly-line">
<span class="league-readonly-lang">{{ t('match.field.lang_en') }}</span>
<span>{{ form.leagueEn }}</span>
</div>
<div v-if="form.leagueMs.trim()" class="league-readonly-line">
<span class="league-readonly-lang">{{ t('match.field.lang_ms') }}</span>
<span>{{ form.leagueMs }}</span>
</div>
</div>
</div>
</div>
<div class="form-section">
@@ -339,4 +336,45 @@ async function saveMeta() {
.meta-form :deep(.el-input-number .el-input__inner) {
color: #fff !important;
}
.field-hint {
margin: 0 0 8px;
font-size: 12px;
color: #8e8e93;
line-height: 1.4;
}
.league-readonly-grid {
display: flex;
align-items: flex-start;
gap: 12px;
}
.league-readonly-logo img {
width: 40px;
height: 40px;
object-fit: contain;
border-radius: 6px;
background: #1a1a1a;
}
.league-readonly-names {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.league-readonly-line {
display: flex;
gap: 8px;
font-size: 13px;
color: #ddd;
}
.league-readonly-lang {
flex: 0 0 28px;
color: #8e8e93;
font-size: 12px;
}
</style>