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

feat(admin+api): 列表页子路由重构、结算历史与充值截图清理

Browse Source 
赛事/代理管理从表格展开改为子路由详情页；结算页增加预览弹窗与历史记录；媒体库支持截图存储统计与自动/手动清理；Player 端充值截图压缩为 WebP 300KB。
This commit is contained in:
Mars
2026-06-22 12:28:25 +08:00
parent 499522f3fb
commit 648c314e23
38 changed files with 3298 additions and 1147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

605
apps/admin/src/views/AgentManager.vue
View File

@@ -1,18 +1,17 @@
<script setup lang="ts">
import { ref, onMounted, onActivated, computed, watch, reactive, h } from 'vue';
import { ref, onMounted, onActivated, computed, watch, reactive, h, provide } from 'vue';
defineOptions({ name: 'AdminAgentManager' });
import { useRouter } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useAdminLocale } from '../composables/useAdminLocale';
import { resolveFormError, resolveApiError } from '../i18n/form-validation';
import api from '../api';
import { clearStaffSession } from '../stores/auth';
import { usePermissions } from '../composables/usePermissions';
import { AdminPerm } from '../constants/permissions';
const { t, localeTag } = useAdminLocale();
const route = useRoute();
const router = useRouter();
const { hasPermission, role: staffRole } = usePermissions();
@@ -66,9 +65,9 @@ import {
} from '../utils/format-amount';
import { formatAgentLevelNumeral } from '../utils/agent-level-label';
import {
shouldToggleExpandOnRowClick,
expandableTableRowClassName,
} from '../utils/expandable-table';
agentDirectPlayersReloadKey,
agentPlayerActionsKey,
} from '../composables/agent-direct-players-context';
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
import PlayerWalletLedgerDialog from '../components/PlayerWalletLedgerDialog.vue';
import WalletTransferContext from '../components/WalletTransferContext.vue';
@@ -113,6 +112,7 @@ type SubAgentLevelState = {
const subAgentLevelState = reactive<Record<number, SubAgentLevelState>>({});
const agentLevelCounts = ref<Record<number, number>>({});
const hierarchySettings = ref({ maxAgentLevel: 0 });
function ensureSubAgentState(level: number): SubAgentLevelState {
if (!subAgentLevelState[level]) {
@@ -176,12 +176,12 @@ const playerFilterAgent = ref('');
const playerLoading = ref(false);
const agentOptions = ref<{ id: string; username: string; level: number; parentUsername?: string | null }[]>([]);
/* ─── Expansion state ─── */
const expandedSet = ref(new Set<string>());
const agentPlayersMap = ref<Record<string, PlayerRow[]>>({});
const expandLoading = ref<Record<string, boolean>>({});
const directPlayersReload = ref<(() => void) | null>(null);
provide(agentDirectPlayersReloadKey, directPlayersReload);
const expandedRowKeys = computed(() => Array.from(expandedSet.value));
const isAgentChildRoute = computed(() =>
/^\/users\/agents\/[^/]+\/players/.test(route.path) || route.path === '/users/settings',
);
const createToolbarChildLevel = ref<number | null>(null);
@@ -217,19 +217,9 @@ const creditForm = ref({ amount: 10000, remark: '' });
const creditContext = ref<AgentCreditAdjustContext | null>(null);
const creditContextLoading = ref(false);
/* ─── Global settings ─── */
const playerSettings = ref({ allowPasswordChange: true, allowUsernameChange: false });
const bettingLimits = ref({
minStake: 1,
maxStakeSingle: 50000,
maxStakeParlay: 20000,
maxPayoutSingle: 500000,
maxPayoutParlay: 1000000,
dailyStakeLimit: 200000,
});
const settingsSaving = ref(false);
const limitsSaving = ref(false);
const hierarchySettings = ref({ maxAgentLevel: 0 });
/* ─── Init ─── */
let pageInitPromise: Promise<void> | null = null;
const pageInitLoaded = ref(false);
const DEFAULT_SUB_AGENT_CREDIT_RATIO = 50;
const freezeAgentVisible = ref(false);
const freezeAgentLoading = ref(false);
@@ -239,18 +229,7 @@ const freezeAgentForm = ref({
blockDirectPlayerLogin: false,
unfreezeDirectPlayers: false,
});
const hierarchySaving = ref(false);
const platformDirectRate = ref(0);
const adminInviteRate = ref(0);
const platformDirectSaving = ref(false);
const resetAllowed = ref(false);
const resetLoading = ref(false);
const resetConfirmPhrase = ref('');
const settingsCollapseOpen = ref<string[]>([]);
const settingsLoaded = ref(false);
const resetDbStatusLoaded = ref(false);
const agentOptionsLoading = ref(false);
const MAX_EXPANDED_AGENT_ROWS = 2;
const createDialogTitle = computed(() => {
if (createAccountMode.value === 1) return t('agent.dialog.create');
@@ -413,11 +392,8 @@ function resolveCreateParentLabel(agentId: string) {
return agentId;
}
/* ─── Init ─── */
let pageInitPromise: Promise<void> | null = null;
function ensurePageInit(): Promise<void> {
if (settingsLoaded.value) return Promise.resolve();
if (pageInitLoaded.value) return Promise.resolve();
if (!pageInitPromise) {
pageInitPromise = loadUsersPageInit().finally(() => {
pageInitPromise = null;
@@ -444,10 +420,12 @@ function loadActiveViewTabData() {
}
onMounted(() => {
void ensurePageInit();
loadActiveViewTabData();
});
// KeepAlive 激活时静默刷新当前 tab 列表（不重复 page-init）
onActivated(() => {
void ensurePageInit();
const tab = activeViewTab.value;
if (tab === 'players' && canViewUsers.value && allPlayers.value.length > 0) void loadAllPlayers();
else if (tab === 'tier1Agents' && canViewAgents.value && tier1Agents.value.length > 0) void loadTier1Agents();
@@ -465,44 +443,29 @@ async function loadUsersPageInit() {
try {
const { data } = await api.get('/admin/users/page-init');
const payload = data.data as {
playerSettings?: typeof playerSettings.value;
bettingLimits?: typeof bettingLimits.value;
hierarchySettings?: { maxAgentLevel: number };
platformDirect?: { platformDirectRate?: number | string; adminInviteRate?: number | string };
agentLevelCounts?: Record<number, number>;
};
if (payload.playerSettings) playerSettings.value = payload.playerSettings;
if (payload.bettingLimits) bettingLimits.value = payload.bettingLimits;
if (payload.hierarchySettings) {
hierarchySettings.value = {
maxAgentLevel: payload.hierarchySettings.maxAgentLevel ?? 0,
};
}
if (payload.platformDirect) {
platformDirectRate.value = decimalRateToPercent(payload.platformDirect.platformDirectRate ?? 0);
adminInviteRate.value = decimalRateToPercent(
payload.platformDirect.adminInviteRate ?? payload.platformDirect.platformDirectRate ?? 0,
);
}
if (payload.agentLevelCounts) {
agentLevelCounts.value = payload.agentLevelCounts;
if (payload.agentLevelCounts[1] !== undefined) {
tier1Total.value = payload.agentLevelCounts[1];
}
}
settingsLoaded.value = true;
pageInitLoaded.value = true;
} catch {
/* keep defaults */
}
}
watch(settingsCollapseOpen, (open) => {
if (!open.includes('settings')) return;
if (!resetDbStatusLoaded.value) {
resetDbStatusLoaded.value = true;
void loadResetDatabaseStatus();
}
if (!settingsLoaded.value) {
void loadUsersPageInit();
}
});
function openGlobalSettings() {
void router.push('/users/settings');
}
/* ─── Load tier-1 agents ─── */
async function loadTier1Agents() {
@@ -550,6 +513,9 @@ async function loadAgentLevelCounts() {
normalized[Number(lvl)] = Number(cnt) || 0;
}
agentLevelCounts.value = normalized;
if (normalized[1] !== undefined) {
tier1Total.value = normalized[1];
}
} catch {
agentLevelCounts.value = {};
}
@@ -683,16 +649,28 @@ function affiliationLabel(row: Pick<PlayerRow, 'affiliationAgents'>) {
return formatPlayerAffiliationLabel(row, t('user.type.player'), t('agent.platform_row_name'));
}
function directPlayersTabLabel(ownerName: string, count: number) {
return `${t('agent.direct_players_title', { name: ownerName })} (${count})`;
function eventClickElement(event: Event): Element | null {
const target = event.target;
if (target instanceof Element) return target;
if (target instanceof Node) return target.parentElement;
return null;
}
function onTier1AgentRowClick(row: AgentRow, _column: unknown, event: MouseEvent) {
onAgentRowClick(row, event);
function openAgentDirectPlayers(row: AgentRow, _column: unknown, event: Event) {
const el = eventClickElement(event);
if (!el) return;
if (el.closest('button') || el.closest('.el-button') || el.closest('.admin-agent-row-actions')) return;
void router.push({
path: `/users/agents/${row.userId}/players`,
query: {
username: row.username,
fromTab: activeViewTab.value,
},
});
}
function onSubAgentRowClick(row: AgentRow, _column: unknown, event: MouseEvent) {
onAgentRowClick(row, event);
function agentRowClassName() {
return 'row-navigable';
}
watch(activeViewTab, (tab) => {
@@ -716,199 +694,6 @@ watch(visibleSubAgentTabLevels, (levels) => {
}
});
/* ─── Expansion ─── */
async function onExpandChange(row: DisplayAgentRow, expandedRows: DisplayAgentRow[]) {
expandedSet.value = new Set(expandedRows.map((r) => r.userId));
if (expandedSet.value.has(row.userId) && !agentPlayersMap.value[row.userId]) {
await loadExpansionData(row.userId);
}
}
function onAgentRowClick(row: AgentRow, event: MouseEvent) {
if (!shouldToggleExpandOnRowClick(event)) return;
const userId = row.userId;
const next = new Set(expandedSet.value);
if (next.has(userId)) {
next.delete(userId);
} else {
if (next.size >= MAX_EXPANDED_AGENT_ROWS) {
const [first] = next;
if (first) next.delete(first);
}
next.add(userId);
if (!agentPlayersMap.value[userId]) void loadExpansionData(userId);
}
expandedSet.value = next;
}
async function loadExpansionData(agentId: string) {
expandLoading.value[agentId] = true;
try {
const { data } = await api.get('/admin/users', { params: { parentId: agentId, pageSize: 100 } });
agentPlayersMap.value[agentId] = data.data.items as PlayerRow[];
} catch {
agentPlayersMap.value[agentId] = [];
} finally {
expandLoading.value[agentId] = false;
}
}
function getPlayers(agentId: string) {
return agentPlayersMap.value[agentId] || [];
}
function refreshExpandedAgentPlayers() {
for (const agentId of expandedSet.value) {
loadExpansionData(agentId);
}
}
/* ─── Global settings ─── */
async function loadResetDatabaseStatus() {
try {
const { data } = await api.get('/admin/system/reset-database');
resetAllowed.value = !!data.data?.allowed;
} catch {
resetAllowed.value = false;
}
}
async function resetDatabase() {
if (resetConfirmPhrase.value !== 'RESET') {
ElMessage.warning(t('user.reset_database_confirm_label'));
return;
}
try {
await ElMessageBox.confirm(t('user.reset_database_hint'), t('user.reset_database'), {
type: 'warning',
confirmButtonText: t('user.reset_database_btn'),
cancelButtonText: t('common.cancel'),
});
} catch {
return;
}
resetLoading.value = true;
try {
const { data } = await api.post('/admin/system/reset-database', { confirmPhrase: 'RESET' });
const accounts: string[] = data.data?.demoAccounts ?? [];
ElMessage.success({
message: `${t('user.reset_database_success')}\n${t('user.reset_database_accounts')}: ${accounts.join(' · ')}`,
duration: 8000,
});
clearStaffSession();
await router.push('/login');
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
} finally {
resetLoading.value = false;
}
}
async function loadBettingLimits() {
try {
const { data } = await api.get('/admin/settings/betting-limits');
bettingLimits.value = data.data;
} catch {
/* defaults */
}
}
async function saveBettingLimits() {
limitsSaving.value = true;
try {
const { data } = await api.put('/admin/settings/betting-limits', bettingLimits.value);
bettingLimits.value = data.data;
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
loadBettingLimits();
} finally {
limitsSaving.value = false;
}
}
async function loadPlayerSettings() {
try {
const { data } = await api.get('/admin/users/settings/account');
playerSettings.value = data.data;
} catch {
/* defaults */
}
}
async function savePlayerSettings() {
settingsSaving.value = true;
try {
const { data } = await api.put('/admin/users/settings/account', playerSettings.value);
playerSettings.value = data.data;
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
loadPlayerSettings();
} finally {
settingsSaving.value = false;
}
}
async function loadHierarchySettings() {
try {
const { data } = await api.get('/admin/agents/settings/hierarchy');
hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? 0 };
} catch {
hierarchySettings.value = { maxAgentLevel: 0 };
}
}
async function saveHierarchySettings() {
hierarchySaving.value = true;
try {
const { data } = await api.put('/admin/agents/settings/hierarchy', hierarchySettings.value);
hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? hierarchySettings.value.maxAgentLevel };
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
loadHierarchySettings();
} finally {
hierarchySaving.value = false;
}
}
async function loadPlatformDirectSettings() {
try {
const { data } = await api.get('/admin/settings/cashback/platform-direct');
const payload = data.data as { platformDirectRate?: number | string; adminInviteRate?: number | string };
platformDirectRate.value = decimalRateToPercent(payload?.platformDirectRate ?? 0);
adminInviteRate.value = decimalRateToPercent(payload?.adminInviteRate ?? payload?.platformDirectRate ?? 0);
} catch {
platformDirectRate.value = 0;
adminInviteRate.value = 0;
}
}
async function savePlatformDirectSettings() {
platformDirectSaving.value = true;
try {
const { data } = await api.put('/admin/settings/cashback/platform-direct', {
platformDirectRate: percentToDecimalRate(platformDirectRate.value),
adminInviteRate: percentToDecimalRate(adminInviteRate.value),
});
const payload = data.data as { platformDirectRate?: number | string; adminInviteRate?: number | string };
platformDirectRate.value = decimalRateToPercent(payload?.platformDirectRate ?? 0);
adminInviteRate.value = decimalRateToPercent(payload?.adminInviteRate ?? payload?.platformDirectRate ?? 0);
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
loadPlatformDirectSettings();
} finally {
platformDirectSaving.value = false;
}
}
const walletLedgerVisible = ref(false);
const walletLedgerPlayerId = ref('');
const walletLedgerPlayerUsername = ref<string | null>(null);
@@ -1030,7 +815,7 @@ async function submitCreate() {
}
const parentId = createParentAgentId.value || createForm.value.parentId;
if (parentId) {
await loadExpansionData(parentId);
directPlayersReload.value?.();
}
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
@@ -1374,7 +1159,7 @@ async function submitFreezeAgent() {
function refreshExpandedParents() {
loadAllPlayers();
reloadAgentLists();
refreshExpandedAgentPlayers();
directPlayersReload.value?.();
}
const {
@@ -1445,107 +1230,40 @@ function creditTypeLabel(type: string) {
if (type === 'CREDIT_DECREASE') return t('agent.credit.decrease');
return type;
}
provide(agentPlayerActionsKey, {
get canCreatePlayer() {
return canCreateUsers.value;
},
get playerActionFlags() {
return playerActionFlags.value;
},
openCreatePlayer,
openDetailPlayer,
openEditPlayer,
openTransfer,
toggleFreezePlayer,
deletePlayer,
openPlayerWalletLedger,
});
</script>
<template>
<div class="admin-list-page agent-mgr-page">
<!-- ─── Global settings collapse ─── -->
<el-collapse v-if="canManageSettings" v-model="settingsCollapseOpen" class="list-settings">
<el-collapse-item :title="t('user.page_settings')" name="settings">
<div class="list-settings-block">
<p class="list-settings-title">{{ t('user.global_settings') }}</p>
<el-form inline size="small" class="settings-form">
<el-form-item :label="t('user.field.allow_password_change')">
<el-switch v-model="playerSettings.allowPasswordChange" :loading="settingsSaving" @change="savePlayerSettings" />
</el-form-item>
<el-form-item :label="t('user.field.allow_username_change')">
<el-switch v-model="playerSettings.allowUsernameChange" :loading="settingsSaving" @change="savePlayerSettings" />
</el-form-item>
</el-form>
</div>
<div class="list-settings-block">
<p class="list-settings-title">{{ t('agent.hierarchy.settings_title') }}</p>
<p class="list-settings-hint">{{ t('agent.hierarchy.settings_hint') }}</p>
<el-form inline size="small" class="settings-form">
<el-form-item :label="t('agent.hierarchy.max_level')">
<el-input-number
v-model="hierarchySettings.maxAgentLevel"
:min="0"
:step="1"
controls-position="right"
:disabled="hierarchySaving"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="hierarchySaving" @click="saveHierarchySettings">{{ t('common.save') }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="list-settings-block">
<p class="list-settings-title">{{ t('cashback.settings_title') }}</p>
<el-form inline size="small" class="settings-form">
<el-form-item :label="t('cashback.platform_direct_default_rate')">
<RatePercentInput v-model="platformDirectRate" />
</el-form-item>
<p class="list-settings-hint block-hint">{{ t('cashback.platform_direct_default_hint') }}</p>
<el-form-item :label="t('cashback.admin_invite_default_rate')">
<RatePercentInput v-model="adminInviteRate" />
</el-form-item>
<p class="list-settings-hint block-hint">{{ t('cashback.admin_invite_default_hint') }}</p>
<el-form-item>
<el-button type="primary" :loading="platformDirectSaving" @click="savePlatformDirectSettings">{{ t('common.save') }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="list-settings-block">
<p class="list-settings-title">{{ t('user.betting_limits') }}</p>
<el-form inline size="small" class="settings-form limits-form">
<el-form-item :label="t('user.limit.min_stake')">
<el-input-number v-model="bettingLimits.minStake" :min="0" :step="1" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_stake_single')">
<el-input-number v-model="bettingLimits.maxStakeSingle" :min="0" :step="100" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_stake_parlay')">
<el-input-number v-model="bettingLimits.maxStakeParlay" :min="0" :step="100" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_payout_single')">
<el-input-number v-model="bettingLimits.maxPayoutSingle" :min="0" :step="1000" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_payout_parlay')">
<el-input-number v-model="bettingLimits.maxPayoutParlay" :min="0" :step="1000" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.daily_stake')">
<el-input-number v-model="bettingLimits.dailyStakeLimit" :min="0" :step="1000" controls-position="right" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="limitsSaving" @click="saveBettingLimits">{{ t('common.save') }}</el-button>
</el-form-item>
</el-form>
</div>
<div class="list-settings-block list-settings-block--danger">
<p class="list-settings-title">{{ t('user.reset_database') }}</p>
<p class="list-settings-hint">{{ t('user.reset_database_hint') }}</p>
<el-alert v-if="!resetAllowed" type="warning" :closable="false" show-icon class="reset-db-alert" :title="t('user.reset_database_disabled_prod')" />
<el-form inline size="small" class="settings-form reset-db-form">
<el-form-item :label="t('user.reset_database_confirm_label')">
<el-input v-model="resetConfirmPhrase" :placeholder="t('user.reset_database_confirm_ph')" style="width: 160px" :disabled="!resetAllowed" autocomplete="off" />
</el-form-item>
<el-form-item>
<el-button type="danger" plain :loading="resetLoading" :disabled="!resetAllowed || resetConfirmPhrase !== 'RESET'" @click="resetDatabase">{{ t('user.reset_database_btn') }}</el-button>
</el-form-item>
</el-form>
</div>
</el-collapse-item>
</el-collapse>
<div class="agent-mgr-shell">
<router-view v-if="isAgentChildRoute" />
<div v-else class="admin-list-page agent-mgr-page">
<InviteManageDialog v-model="inviteDialogOpen" />
<div class="mgr-tabs-shell">
<el-button v-if="canManageSettings" type="primary" class="invite-prominent-btn" @click="inviteDialogOpen = true">
{{ t('invite.menu_btn') }}
</el-button>
<el-tabs v-model="activeViewTab" class="mgr-top-tabs" :class="{ 'mgr-top-tabs--with-invite': canManageSettings }">
<div v-if="canManageSettings" class="mgr-toolbar-actions">
<el-button class="settings-toolbar-btn" @click="openGlobalSettings">
{{ t('user.page_settings') }}
</el-button>
<el-button type="primary" class="invite-prominent-btn" @click="inviteDialogOpen = true">
{{ t('invite.menu_btn') }}
</el-button>
</div>
<el-tabs v-model="activeViewTab" class="mgr-top-tabs" :class="{ 'mgr-top-tabs--with-actions': canManageSettings }">
<!-- ─── Tab: 全部玩家（默认） ─── -->
<el-tab-pane v-if="canViewUsers" :label="`${t('user.type.player')} (${playerTotal})`" name="players">
<section class="list-panel player-list-panel">
@@ -1685,81 +1403,20 @@ function creditTypeLabel(type: string) {
<el-button type="primary" @click="openCreateTier1Agent">{{ t('agent.create_btn') }}</el-button>
</div>
</div>
<p class="list-hint">{{ t('agent.open_agent_hint') }}</p>
<AdminTableWrap>
<el-table
:data="tier1Agents"
stripe
row-key="userId"
:expand-row-keys="expandedRowKeys"
:row-class-name="expandableTableRowClassName"
class="expandable-table compact-agent-table"
@expand-change="onExpandChange"
@row-click="onTier1AgentRowClick"
:row-class-name="agentRowClassName"
class="compact-agent-table"
@row-click="openAgentDirectPlayers"
>
<template #empty>
<AdminTableEmpty />
</template>
<!-- Built-in expand column -->
<el-table-column type="expand">
<template #default="{ row }">
<div class="expand-panel">
<div v-if="expandLoading[row.userId]" class="expand-loading">
{{ t('common.loading') || '加载中...' }}
</div>
<div v-else class="expand-panel-body">
<div class="expand-section-header">
<div class="expand-section-title">{{ directPlayersTabLabel(row.username, getPlayers(row.userId).length) }}</div>
<el-button type="primary" size="small" @click="openCreatePlayer(row.userId)">{{ t('user.create_btn') }}</el-button>
</div>
<el-table :data="getPlayers(row.userId)" stripe class="inner-table">
<template #empty><AdminTableEmpty /></template>
<el-table-column type="index" :label="t('common.seq')" width="55" align="center" />
<el-table-column prop="username" :label="t('user.col.username')" min-width="100" />
<el-table-column :label="t('common.status')" min-width="120">
<template #default="{ row: player }">
<AdminPlayerStatusCell :status="player.status" :is-online="player.isOnline" />
</template>
</el-table-column>
<el-table-column :label="t('user.col.invite_code')" min-width="96" show-overflow-tooltip>
<template #default="{ row: player }">
<code v-if="player.inviteCode" class="invite-code-cell">{{ player.inviteCode }}</code>
<span v-else>—</span>
</template>
</el-table-column>
<el-table-column :label="t('user.col.balance')" min-width="120" align="right">
<template #default="{ row: player }">
<el-tooltip :content="`${formatAmountFull(player.availableBalance)} / ${formatAmountFull(player.frozenBalance)}`" placement="top">
<span class="amount-compact">{{ formatAmount(player.availableBalance) }} / {{ formatAmount(player.frozenBalance) }}</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="betCount" :label="t('user.col.bets')" width="56" align="center" />
<el-table-column :label="t('user.col.stake_payout')" min-width="100" align="right">
<template #default="{ row: player }">
<span class="amount-compact">{{ formatAmount(player.totalStake) }} / {{ formatAmount(player.totalReturn) }}</span>
</template>
</el-table-column>
<el-table-column :label="t('common.actions')" min-width="320" align="center">
<template #default="{ row: player }">
<AdminPlayerRowActions
v-bind="playerActionFlags"
:row="player"
@detail="openDetailPlayer(player.id)"
@ledger="openPlayerWalletLedger(player.id, player.username)"
@edit="openEditPlayer(player.id)"
@deposit="openTransfer('deposit', player)"
@withdraw="openTransfer('withdraw', player)"
@freeze="toggleFreezePlayer(player)"
@delete="deletePlayer(player)"
/>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
</el-table-column>
<el-table-column type="index" :index="(i: number) => (tier1Page - 1) * tier1PageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
<el-table-column prop="username" :label="t('user.col.username')" min-width="100" show-overflow-tooltip />
<el-table-column :label="t('common.status')" min-width="72">
@@ -1854,69 +1511,19 @@ function creditTypeLabel(type: string) {
</el-button>
</div>
</div>
<p class="list-hint">{{ t('agent.open_agent_hint') }}</p>
<AdminTableWrap>
<el-table
:data="ensureSubAgentState(agentLevel).agents"
stripe
row-key="userId"
:expand-row-keys="expandedRowKeys"
:row-class-name="expandableTableRowClassName"
class="expandable-table compact-agent-table"
@expand-change="onExpandChange"
@row-click="onSubAgentRowClick"
:row-class-name="agentRowClassName"
class="compact-agent-table"
@row-click="openAgentDirectPlayers"
>
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column type="expand">
<template #default="{ row }">
<div class="expand-panel">
<div v-if="expandLoading[row.userId]" class="expand-loading">{{ t('common.loading') }}</div>
<div v-else class="expand-panel-body">
<div class="expand-section-header">
<div class="expand-section-title">{{ directPlayersTabLabel(row.username, getPlayers(row.userId).length) }}</div>
<el-button type="primary" size="small" @click="openCreatePlayer(row.userId)">{{ t('user.create_btn') }}</el-button>
</div>
<el-table :data="getPlayers(row.userId)" stripe class="inner-table">
<template #empty><AdminTableEmpty /></template>
<el-table-column type="index" :label="t('common.seq')" width="55" align="center" />
<el-table-column prop="username" :label="t('user.col.username')" min-width="100" />
<el-table-column :label="t('common.status')" min-width="120">
<template #default="{ row: player }">
<AdminPlayerStatusCell :status="player.status" :is-online="player.isOnline" />
</template>
</el-table-column>
<el-table-column :label="t('user.col.invite_code')" min-width="96" show-overflow-tooltip>
<template #default="{ row: player }">
<code v-if="player.inviteCode" class="invite-code-cell">{{ player.inviteCode }}</code>
<span v-else>—</span>
</template>
</el-table-column>
<el-table-column :label="t('user.col.balance')" min-width="120" align="right">
<template #default="{ row: player }">
<span class="amount-compact">{{ formatAmount(player.availableBalance) }} / {{ formatAmount(player.frozenBalance) }}</span>
</template>
</el-table-column>
<el-table-column :label="t('common.actions')" min-width="280" align="center">
<template #default="{ row: player }">
<AdminPlayerRowActions
v-bind="playerActionFlags"
:row="player"
@detail="openDetailPlayer(player.id)"
@ledger="openPlayerWalletLedger(player.id, player.username)"
@edit="openEditPlayer(player.id)"
@deposit="openTransfer('deposit', player)"
@withdraw="openTransfer('withdraw', player)"
@freeze="toggleFreezePlayer(player)"
@delete="deletePlayer(player)"
/>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
</el-table-column>
<el-table-column type="index" :index="(i: number) => (ensureSubAgentState(agentLevel).page - 1) * ensureSubAgentState(agentLevel).pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
<el-table-column prop="username" :label="t('user.col.username')" min-width="100" show-overflow-tooltip />
<el-table-column :label="t('agent.col.parent_chain')" min-width="120" show-overflow-tooltip>
@@ -1968,6 +1575,7 @@ function creditTypeLabel(type: string) {
</template>
</el-tabs>
</div>
</div>
<!-- ═══════════ DIALOGS ═══════════ -->
@@ -2534,6 +2142,23 @@ function creditTypeLabel(type: string) {
</template>
<style scoped>
.agent-mgr-shell {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.agent-mgr-shell > :deep(.agent-direct-players-page),
.agent-mgr-shell > :deep(.global-settings-page) {
flex: 1;
min-height: 0;
}
.compact-agent-table :deep(.row-navigable) {
cursor: pointer;
}
.mgr-tabs-shell {
position: relative;
flex: 1;
@@ -2542,15 +2167,31 @@ function creditTypeLabel(type: string) {
flex-direction: column;
}
.mgr-top-tabs--with-invite :deep(.el-tabs__header) {
padding-right: 108px;
.mgr-top-tabs--with-actions :deep(.el-tabs__header) {
padding-right: 248px;
}
.invite-prominent-btn {
.mgr-toolbar-actions {
position: absolute;
right: 0;
top: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
}
.settings-toolbar-btn {
min-width: 96px;
height: 38px;
padding: 0 16px;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
}
.invite-prominent-btn {
position: static;
min-width: 96px;
height: 38px;
padding: 0 22px;
@@ -2756,11 +2397,11 @@ function creditTypeLabel(type: string) {
}
@media (max-width: 900px) {
.mgr-top-tabs--with-invite :deep(.el-tabs__header) {
.mgr-top-tabs--with-actions :deep(.el-tabs__header) {
padding-right: 0;
}
.invite-prominent-btn {
.mgr-toolbar-actions {
position: static;
align-self: flex-end;
margin: 0 0 8px;

41
apps/admin/src/views/DepositOrders.vue
View File

@@ -311,8 +311,11 @@ onActivated(() => {
<td><span :class="['badge', row.methodType === 'BANK' ? 'badge-blue' : 'badge-green']">{{ row.methodType }}</span></td>
<td class="amount">{{ formatAmount(row.amount) }}</td>
<td>
<span v-if="row.screenshotUrl === '/uploads/defaults/expired.png'" class="expired-screenshot-tag">
{{ t('media.cleanup_expired_tag') || '已清理' }}
</span>
<img
v-if="row.screenshotUrl"
v-else-if="row.screenshotUrl"
:src="row.screenshotUrl"
class="screenshot-thumb"
@click="openScreenshot(row.screenshotUrl)"
@@ -369,7 +372,10 @@ onActivated(() => {
</div>
<div class="info-row">
<span>{{ t('deposit.screenshot') }}:</span>
<img :src="approveTarget.screenshotUrl" class="approve-screenshot" @click="openScreenshot(approveTarget.screenshotUrl)" />
<div v-if="approveTarget.screenshotUrl === '/uploads/defaults/expired.png'" class="expired-screenshot-box">
<span class="expired-text">{{ t('media.cleanup_expired_tag') || '已清理' }}</span>
</div>
<img v-else :src="approveTarget.screenshotUrl" class="approve-screenshot" @click="openScreenshot(approveTarget.screenshotUrl)" />
</div>
<div class="form-group">
<label>{{ t('deposit.approved_amount_label') }}</label>
@@ -763,6 +769,37 @@ onActivated(() => {
color: #ffffff;
}
.expired-screenshot-tag {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
font-size: 11px;
color: var(--text-muted);
background: var(--accent-hover);
border: 1px dashed var(--border);
border-radius: 6px;
user-select: none;
font-weight: 700;
}
.expired-screenshot-box {
width: 120px;
height: 120px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent-hover);
border: 1px dashed var(--border);
border-radius: 6px;
margin-top: 4px;
}
.expired-screenshot-box .expired-text {
font-size: 12px;
color: var(--text-muted);
font-weight: 700;
}
@media (max-width: 700px) {
.toolbar,
.filters {

479
apps/admin/src/views/Matches.vue
View File

@@ -1,15 +1,15 @@
<script setup lang="ts">
import { ref, computed, onBeforeUnmount } from 'vue';
import { ref, computed, watch, onBeforeUnmount, onDeactivated } from 'vue';
defineOptions({ name: 'AdminMatches' });
import { useStaleListLifecycle } from '../composables/useStaleList';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { useAdminLocale } from '../composables/useAdminLocale';
import { resolveFormError } from '../i18n/form-validation';
import api from '../api';
import { ElMessage, ElMessageBox } from 'element-plus';
import LeagueMatchesPanel from './matches/LeagueMatchesPanel.vue';
import MatchesSubNav from '../components/MatchesSubNav.vue';
import LeagueRowActions from '../components/LeagueRowActions.vue';
import CountryFlagSelect from '../components/outright/CountryFlagSelect.vue';
import LogoUrlField from '../components/LogoUrlField.vue';
import LeagueArchiveDialog from '../components/LeagueArchiveDialog.vue';
@@ -17,7 +17,6 @@ import { getBuiltinCountry } from '../data/builtinCountries';
import {
readMatchesListUiState,
writeMatchesListUiState,
MAX_EXPANDED_LEAGUES,
} from '../utils/matchesListState';
import { formatAmount } from '../utils/format-amount';
import {
@@ -28,15 +27,44 @@ import {
type MatchCreateForm,
} from './match-form';
const { t } = useAdminLocale();
const { t, localeTag } = useAdminLocale();
const route = useRoute();
const leagues = ref<unknown[]>([]);
const router = useRouter();
const isMatchChildRoute = computed(() =>
/^\/matches\/leagues\/[^/]+/.test(route.path),
);
interface LeagueTableRow extends Record<string, unknown> {
id: string;
isPublished: boolean;
isPublishing: boolean;
labels: {
edit: string;
createFixture: string;
publish: string;
unpublish: string;
delete: string;
};
displaySeq: number;
displayNameZh: string;
displayNameEn: string;
displayStatusLabel: string;
displayStatusTagType: 'success' | 'info';
displayMatchCount: number;
displayBetCount: number;
displayBetCountActive: boolean;
displayTotalStake: string;
displayPendingBets: number;
displayCode: string;
}
const leagues = ref<LeagueTableRow[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const filterStatus = ref('');
const keyword = ref('');
const expandedRowKeys = ref<string[]>([]);
const createLeagueVisible = ref(false);
const createLeagueLoading = ref(false);
@@ -61,9 +89,70 @@ const createUnderLeagueLabel = ref('');
const isFixtureCreate = computed(() => !!form.value.leagueId.trim());
function rowOf(row: unknown) {
return row as Record<string, unknown>;
}
function leagueId(row: unknown) {
return String(rowOf(row).id ?? '');
}
function leagueTitle(row: unknown) {
const r = rowOf(row);
const zh = String(r.leagueZh ?? '').trim();
const en = String(r.leagueEn ?? '').trim();
return zh || en || String(r.code ?? '—');
}
function leagueActionLabels() {
return {
edit: t('common.edit'),
createFixture: t('match.create_fixture_btn'),
publish: t('common.publish'),
unpublish: t('league.btn.unpublish'),
delete: t('common.delete'),
};
}
function mapLeagueRows(items: unknown[], publishingId = ''): LeagueTableRow[] {
const labels = leagueActionLabels();
const start = (page.value - 1) * pageSize.value;
return items.map((item, index) => {
const r = rowOf(item);
const id = String(r.id ?? '');
const published = Boolean(r.isPublished);
const stats = r.betStats as
| { betCount?: number; totalStake?: string; pendingCount?: number }
| undefined;
const betCount = Number(stats?.betCount ?? 0);
return {
...r,
id,
isPublished: published,
isPublishing: publishingId === id,
labels,
displaySeq: start + index + 1,
displayNameZh: String(r.leagueZh ?? '').trim() || '—',
displayNameEn: String(r.leagueEn ?? '').trim() || '—',
displayStatusLabel: published ? t('league.status.PUBLISHED') : t('league.status.UNPUBLISHED'),
displayStatusTagType: published ? 'success' : 'info',
displayMatchCount: Number(r.matchCount ?? 0),
displayBetCount: betCount,
displayBetCountActive: betCount > 0,
displayTotalStake: formatAmount(String(stats?.totalStake ?? '0')),
displayPendingBets: Number(stats?.pendingCount ?? 0),
displayCode: String(r.code ?? ''),
};
});
}
function remapLeagueRows(publishingId = publishingLeagueId.value) {
if (!leagues.value.length) return;
leagues.value = mapLeagueRows(leagues.value, publishingId);
}
function persistListUiState() {
writeMatchesListUiState({
expandedLeagueIds: [...expandedRowKeys.value],
page: page.value,
pageSize: pageSize.value,
filterStatus: filterStatus.value,
@@ -71,15 +160,10 @@ function persistListUiState() {
});
}
function applyExpandedFromSaved(savedIds: string[]) {
const allowed = new Set(leagues.value.map((row) => leagueId(row)));
expandedRowKeys.value = savedIds.filter((id) => allowed.has(id));
}
type LoadOptions = { restoreExpand?: boolean; keepExpand?: boolean };
type LoadOptions = { restore?: boolean };
async function load(options: LoadOptions = {}) {
const saved = options.restoreExpand ? readMatchesListUiState() : null;
const saved = options.restore ? readMatchesListUiState() : null;
if (saved) {
page.value = saved.page;
pageSize.value = saved.pageSize;
@@ -95,26 +179,18 @@ async function load(options: LoadOptions = {}) {
keyword: keyword.value.trim() || undefined,
},
});
leagues.value = data.data.items;
leagues.value = mapLeagueRows(data.data.items);
total.value = data.data.total;
if (options.restoreExpand && saved) {
applyExpandedFromSaved(saved.expandedLeagueIds);
} else if (!options.keepExpand) {
expandedRowKeys.value = [];
} else {
applyExpandedFromSaved(expandedRowKeys.value);
}
persistListUiState();
}
function onSearch() {
page.value = 1;
expandedRowKeys.value = [];
void runLoad(true);
}
async function initialLoad() {
if (isMatchChildRoute.value) return;
const qStatus = route.query.status;
if (typeof qStatus === 'string' && qStatus.trim()) {
filterStatus.value = qStatus.trim();
@@ -122,21 +198,29 @@ async function initialLoad() {
await load();
return;
}
await load({ restoreExpand: true });
const qLeague = route.query.leagueId;
if (typeof qLeague === 'string' && qLeague.trim()) {
router.replace(`/matches/leagues/${qLeague.trim()}`);
return;
}
await load({ restore: true });
}
const { loading: listLoading, runLoad } = useStaleListLifecycle(() => leagues.value.length > 0, initialLoad);
onBeforeUnmount(persistListUiState);
onDeactivated(persistListUiState);
watch(localeTag, () => remapLeagueRows());
function onPageChange(p: number) {
page.value = p;
load({ keepExpand: true });
load();
}
function onSizeChange(size: number) {
pageSize.value = size;
page.value = 1;
load({ keepExpand: true });
load();
}
function openCreateLeague() {
@@ -178,6 +262,7 @@ async function toggleLeaguePublish(row: unknown) {
}
}
publishingLeagueId.value = id;
remapLeagueRows(id);
try {
await api.put(`/admin/leagues/${id}`, {
leagueEn: String(r.leagueEn ?? ''),
@@ -187,7 +272,7 @@ async function toggleLeaguePublish(row: unknown) {
isActive: !published,
});
ElMessage.success(published ? t('msg.league_unpublished') : t('msg.league_published'));
await load({ keepExpand: true });
await load();
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
@@ -230,7 +315,7 @@ async function submitLeagueForm() {
}
createLeagueVisible.value = false;
load({ keepExpand: true });
load();
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
@@ -274,10 +359,16 @@ async function submitCreate() {
createUnderLeagueLabel.value = '';
createVisible.value = false;
const lid = form.value.leagueId.trim();
await load({ keepExpand: true });
if (lid && !expandedRowKeys.value.includes(lid)) {
expandedRowKeys.value = capExpandedLeagueIds([...expandedRowKeys.value, lid]);
persistListUiState();
await load();
if (lid) {
router.push({
path: `/matches/leagues/${lid}`,
query: {
...(filterStatus.value ? { status: filterStatus.value } : {}),
...(keyword.value.trim() ? { keyword: keyword.value.trim() } : {}),
title: createUnderLeagueLabel.value || leagueTitle({ id: lid }),
},
});
}
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
@@ -287,88 +378,32 @@ async function submitCreate() {
}
}
function capExpandedLeagueIds(ids: string[]): string[] {
return ids.slice(0, MAX_EXPANDED_LEAGUES);
}
function onExpandChange(_row: unknown, expanded: unknown[]) {
expandedRowKeys.value = capExpandedLeagueIds(expanded.map((r) => leagueId(r)));
persistListUiState();
}
function onRowClick(row: unknown, _column: unknown, event: MouseEvent) {
if ((event.target as HTMLElement).closest('.el-table__expand-icon')) return;
function openLeaguePage(row: unknown, _column: unknown, event: Event) {
const target = event.target;
const el = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
if (!el) return;
if (el.closest('.league-row-actions') || el.closest('.el-button')) return;
const id = leagueId(row);
if (expandedRowKeys.value.includes(id)) {
expandedRowKeys.value = expandedRowKeys.value.filter((k) => k !== id);
} else {
const next = [...expandedRowKeys.value, id];
expandedRowKeys.value = capExpandedLeagueIds(next);
}
persistListUiState();
if (!id) return;
void router.push({
name: 'admin-league-matches',
params: { leagueId: id },
query: {
...(filterStatus.value ? { status: filterStatus.value } : {}),
...(keyword.value.trim() ? { keyword: keyword.value.trim() } : {}),
title: leagueTitle(row),
},
});
}
function rowClassName() {
return 'row-expandable';
}
function rowOf(row: unknown) {
return row as Record<string, unknown>;
}
function leagueId(row: unknown) {
return String(rowOf(row).id ?? '');
}
function leagueTitle(row: unknown) {
const r = rowOf(row);
const zh = String(r.leagueZh ?? '').trim();
const en = String(r.leagueEn ?? '').trim();
return zh || en || String(r.code ?? '—');
}
function leagueNameZh(row: unknown) {
const zh = String(rowOf(row).leagueZh ?? '').trim();
return zh || '—';
}
function leagueNameEn(row: unknown) {
const en = String(rowOf(row).leagueEn ?? '').trim();
return en || '—';
}
function leagueMatchCount(row: unknown) {
return Number(rowOf(row).matchCount ?? 0);
return 'row-navigable';
}
function leagueIsPublished(row: unknown) {
return Boolean(rowOf(row).isPublished);
}
function leagueStatusLabel(row: unknown) {
return leagueIsPublished(row) ? t('league.status.PUBLISHED') : t('league.status.UNPUBLISHED');
}
function leagueStatusTagType(row: unknown): 'success' | 'info' {
return leagueIsPublished(row) ? 'success' : 'info';
}
function leagueBetStats(row: unknown) {
return rowOf(row).betStats as
| { betCount?: number; totalStake?: string; pendingCount?: number }
| undefined;
}
function leagueBetCount(row: unknown) {
return Number(leagueBetStats(row)?.betCount ?? 0);
}
function leagueTotalStake(row: unknown) {
return formatAmount(String(leagueBetStats(row)?.totalStake ?? '0'));
}
function leaguePendingBets(row: unknown) {
return Number(leagueBetStats(row)?.pendingCount ?? 0);
}
function isLeagueExpanded(id: string) {
return expandedRowKeys.value.includes(id);
}
function openLeagueArchive(row: unknown) {
leagueArchiveId.value = leagueId(row);
leagueArchiveName.value = leagueTitle(row);
@@ -382,7 +417,9 @@ function onLeagueArchived() {
</script>
<template>
<div class="admin-list-page matches-page">
<div class="matches-shell">
<router-view v-if="isMatchChildRoute" />
<div v-else class="admin-list-page matches-page">
<div class="list-chrome">
<div class="list-chrome__row">
<div class="list-chrome__left">
@@ -423,115 +460,66 @@ function onLeagueArchived() {
</div>
<section v-loading="listLoading" class="list-panel">
<p class="list-hint">{{ t('match.expand_league_hint') }}</p>
<p class="list-hint">{{ t('match.open_league_hint') }}</p>
<div class="table-wrap">
<el-table
:data="leagues"
stripe
row-key="id"
:expand-row-keys="expandedRowKeys"
:row-class-name="rowClassName"
@expand-change="onExpandChange"
@row-click="onRowClick"
@row-click="openLeaguePage"
>
<el-table-column type="expand" width="40">
<el-table-column prop="displaySeq" :label="t('common.seq')" width="70" align="center" />
<el-table-column width="40" align="center" class-name="league-logo-cell">
<template #default="{ row }">
<template v-if="isLeagueExpanded(leagueId(row))">
<LeagueMatchesPanel
:league-id="leagueId(row)"
:filter-status="filterStatus"
:keyword="keyword"
@changed="() => load({ keepExpand: true })"
/>
</template>
</template>
</el-table-column>
<el-table-column type="index" :index="(i: number) => (page - 1) * pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
<el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
<template #default="{ row }">
<div class="league-cell">
<img
v-if="rowOf(row).logoUrl"
:src="String(rowOf(row).logoUrl)"
alt=""
class="league-logo"
/>
<span class="matchup-link">{{ leagueNameZh(row) }}</span>
</div>
</template>
</el-table-column>
<el-table-column :label="t('match.col.league_en')" width="180" show-overflow-tooltip>
<template #default="{ row }">
<span class="league-en">{{ leagueNameEn(row) }}</span>
<img
v-if="row.logoUrl"
:src="String(row.logoUrl)"
alt=""
class="league-logo"
/>
</template>
</el-table-column>
<el-table-column
prop="displayNameZh"
:label="t('match.col.league')"
width="108"
show-overflow-tooltip
class-name="league-name-cell"
/>
<el-table-column prop="displayNameEn" :label="t('match.col.league_en')" width="180" show-overflow-tooltip class-name="league-en-cell" />
<el-table-column :label="t('common.status')" width="88" align="center">
<template #default="{ row }">
<el-tag :type="leagueStatusTagType(row)" size="small" effect="plain">
{{ leagueStatusLabel(row) }}
<el-tag :type="row.displayStatusTagType" size="small" effect="plain">
{{ row.displayStatusLabel }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('match.col.fixture_count')" width="88" align="center">
<template #default="{ row }">{{ leagueMatchCount(row) }}</template>
</el-table-column>
<el-table-column prop="displayMatchCount" :label="t('match.col.fixture_count')" width="88" align="center" />
<el-table-column :label="t('match.col.bet_count')" width="72" align="center">
<template #default="{ row }">
<span :class="{ 'bet-stat-active': leagueBetCount(row) > 0 }">{{ leagueBetCount(row) }}</span>
<span :class="{ 'bet-stat-active': row.displayBetCountActive }">{{ row.displayBetCount }}</span>
</template>
</el-table-column>
<el-table-column :label="t('match.col.total_stake')" width="108" align="right">
<template #default="{ row }">{{ leagueTotalStake(row) }}</template>
</el-table-column>
<el-table-column prop="displayTotalStake" :label="t('match.col.total_stake')" width="108" align="right" />
<el-table-column :label="t('match.col.pending_bets')" width="80" align="center">
<template #default="{ row }">
<el-tag v-if="leaguePendingBets(row) > 0" type="warning" size="small" effect="plain">
{{ leaguePendingBets(row) }}
<el-tag v-if="row.displayPendingBets > 0" type="warning" size="small" effect="plain">
{{ row.displayPendingBets }}
</el-tag>
<span v-else class="bet-stat-zero">0</span>
</template>
</el-table-column>
<el-table-column :label="t('match.col.league_code')" width="120" show-overflow-tooltip>
<template #default="{ row }">{{ rowOf(row).code }}</template>
</el-table-column>
<el-table-column width="280" align="center" fixed="right">
<template #header>
<div class="actions-col-header">
<span class="actions-col-header__label">{{ t('common.actions') }}</span>
</div>
</template>
<el-table-column prop="displayCode" :label="t('match.col.league_code')" width="120" show-overflow-tooltip />
<el-table-column :label="t('common.actions')" width="280" align="center" fixed="right">
<template #default="{ row }">
<div class="league-row-actions">
<div class="league-action-group">
<el-button size="small" type="primary" @click.stop="openEditLeague(row)">
{{ t('common.edit') }}
</el-button>
<el-button size="small" type="primary" @click.stop="openCreateFixture(row)">
{{ t('match.create_fixture_btn') }}
</el-button>
<el-button
v-if="!leagueIsPublished(row)"
size="small"
type="success"
:loading="publishingLeagueId === leagueId(row)"
@click.stop="toggleLeaguePublish(row)"
>
{{ t('common.publish') }}
</el-button>
<el-button
v-else
size="small"
type="warning"
:loading="publishingLeagueId === leagueId(row)"
@click.stop="toggleLeaguePublish(row)"
>
{{ t('league.btn.unpublish') }}
</el-button>
<el-button size="small" type="danger" plain @click.stop="openLeagueArchive(row)">
{{ t('common.delete') }}
</el-button>
</div>
</div>
<LeagueRowActions
:row="row"
@edit="() => openEditLeague(row)"
@create-fixture="() => openCreateFixture(row)"
@toggle-publish="() => toggleLeaguePublish(row)"
@archive="() => openLeagueArchive(row)"
/>
</template>
</el-table-column>
</el-table>
@@ -675,9 +663,22 @@ function onLeagueArchived() {
@archived="onLeagueArchived"
/>
</div>
</div>
</template>
<style scoped>
.matches-shell {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.matches-shell > :deep(.league-matches-page) {
flex: 1;
min-height: 0;
}
.team-country-select {
width: 100%;
}
@@ -727,19 +728,10 @@ function onLeagueArchived() {
width: 100% !important;
}
.matches-page :deep(.el-table__expanded-cell) {
padding: 0 !important;
background: #fbfaf7;
}
.list-panel :deep(.row-expandable) {
.list-panel :deep(.row-navigable) {
cursor: pointer;
}
.list-panel :deep(.row-no-expand .el-table__expand-icon) {
visibility: hidden;
pointer-events: none;
}
.matchup-link {
color: var(--green-text);
@@ -752,12 +744,6 @@ function onLeagueArchived() {
color: #aaa49a;
}
.league-cell {
display: flex;
align-items: center;
gap: 8px;
}
.league-logo {
width: 28px;
height: 28px;
@@ -765,6 +751,15 @@ function onLeagueArchived() {
flex-shrink: 0;
}
.matches-page .table-wrap :deep(.league-name-cell .cell) {
color: var(--primary-link);
font-weight: 600;
}
.matches-page .table-wrap :deep(.league-logo-cell .cell) {
padding: 0 4px;
}
.league-en {
color: var(--text-muted);
font-size: 13px;
@@ -775,35 +770,6 @@ function onLeagueArchived() {
font-weight: 700;
}
.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: 700;
color: var(--text-muted);
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;
}
.matches-page .table-wrap :deep(.el-table__header .el-table__cell) {
padding: 6px 0;
}
@@ -812,41 +778,6 @@ function onLeagueArchived() {
overflow: visible;
}
.league-row-actions {
display: flex;
align-items: center;
justify-content: center;
gap: 6px 8px;
flex-wrap: wrap;
}
.league-action-group {
display: inline-flex;
flex-wrap: wrap;
gap: 4px;
padding: 2px 4px;
border-radius: 8px;
background: #fbfaf7;
border: 1px solid var(--border-soft);
}
.league-row-actions :deep(.el-button) {
margin: 0 !important;
min-width: 52px;
padding: 4px 10px !important;
font-size: 12px !important;
border-radius: 6px;
}
.league-row-actions :deep(.el-button:not(.is-disabled):not(:disabled)) {
cursor: pointer;
}
.league-row-actions :deep(.el-button.is-disabled),
.league-row-actions :deep(.el-button:disabled) {
cursor: not-allowed;
}
:deep(.logo-url-field) {
width: 100%;
}
@@ -887,14 +818,6 @@ function onLeagueArchived() {
gap: 12px;
}
.actions-col-header {
flex-wrap: wrap;
justify-content: flex-start;
}
.league-row-actions {
justify-content: flex-start;
}
}
</style>

123
apps/admin/src/views/MatchesOutrights.vue
View File

@@ -1,13 +1,12 @@
<script setup lang="ts">
import { ref, onBeforeUnmount } from 'vue';
import { ref, computed, onBeforeUnmount, onDeactivated } from 'vue';
defineOptions({ name: 'AdminMatchesOutrights' });
import { useStaleListLifecycle } from '../composables/useStaleList';
import { useRoute } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import { useAdminLocale } from '../composables/useAdminLocale';
import api from '../api';
import MatchesSubNav from '../components/MatchesSubNav.vue';
import LeagueOutrightOddsPanel from './matches/LeagueOutrightOddsPanel.vue';
import {
readMatchesListUiState,
writeMatchesListUiState,
@@ -15,17 +14,20 @@ import {
const { t } = useAdminLocale();
const route = useRoute();
const router = useRouter();
const isOutrightChildRoute = computed(() =>
/^\/matches\/outrights\/leagues\/[^/]+/.test(route.path),
);
const leagues = ref<unknown[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(10);
const keyword = ref('');
const expandedRowKeys = ref<string[]>([]);
function persistListUiState() {
writeMatchesListUiState({
expandedLeagueIds: [...expandedRowKeys.value],
page: page.value,
pageSize: pageSize.value,
filterStatus: '',
@@ -33,15 +35,10 @@ function persistListUiState() {
});
}
function applyExpandedFromSaved(savedIds: string[]) {
const allowed = new Set(leagues.value.map((row) => leagueId(row)));
expandedRowKeys.value = savedIds.filter((id) => allowed.has(id));
}
type LoadOptions = { restoreExpand?: boolean; keepExpand?: boolean };
type LoadOptions = { restore?: boolean };
async function load(options: LoadOptions = {}) {
const saved = options.restoreExpand ? readMatchesListUiState() : null;
const saved = options.restore ? readMatchesListUiState() : null;
if (saved) {
page.value = saved.page;
pageSize.value = saved.pageSize;
@@ -57,29 +54,22 @@ async function load(options: LoadOptions = {}) {
});
leagues.value = data.data.items;
total.value = data.data.total;
if (options.restoreExpand && saved) {
applyExpandedFromSaved(saved.expandedLeagueIds);
} else if (!options.keepExpand) {
expandedRowKeys.value = [];
} else {
applyExpandedFromSaved(expandedRowKeys.value);
}
persistListUiState();
}
function onSearch() {
page.value = 1;
expandedRowKeys.value = [];
load();
}
async function resolveExpandFromQuery() {
async function resolveLeagueFromQuery() {
const qLeague = route.query.leagueId;
if (typeof qLeague === 'string' && qLeague.trim()) {
expandedRowKeys.value = [qLeague.trim()];
persistListUiState();
return;
router.replace({
path: `/matches/outrights/leagues/${qLeague.trim()}`,
query: route.query.title ? { title: String(route.query.title) } : undefined,
});
return true;
}
const qMatch = route.query.matchId;
if (typeof qMatch === 'string' && qMatch.trim()) {
@@ -87,48 +77,51 @@ async function resolveExpandFromQuery() {
const { data } = await api.get(`/admin/outrights/${qMatch.trim()}`);
const lid = data.data?.leagueId as string | undefined;
if (lid) {
expandedRowKeys.value = [lid];
persistListUiState();
router.replace(`/matches/outrights/leagues/${lid}`);
return true;
}
} catch {
/* ignore */
}
}
return false;
}
async function initialLoad() {
await load({ restoreExpand: true });
await resolveExpandFromQuery();
await load({ restore: true });
await resolveLeagueFromQuery();
}
const { loading: listLoading, runLoad } = useStaleListLifecycle(() => leagues.value.length > 0, initialLoad);
onBeforeUnmount(persistListUiState);
onDeactivated(persistListUiState);
function onPageChange(p: number) {
page.value = p;
load({ keepExpand: true });
load();
}
function onSizeChange(size: number) {
pageSize.value = size;
page.value = 1;
load({ keepExpand: true });
load();
}
function onExpandChange(_row: unknown, expanded: unknown[]) {
expandedRowKeys.value = expanded.map((r) => leagueId(r));
persistListUiState();
}
function onRowClick(row: unknown, _column: unknown, event: MouseEvent) {
if ((event.target as HTMLElement).closest('.el-table__expand-icon')) return;
function openLeaguePage(row: unknown, _column: unknown, event: Event) {
const target = event.target;
const el = target instanceof Element ? target : target instanceof Node ? target.parentElement : null;
if (!el) return;
if (el.closest('.el-button')) return;
const id = leagueId(row);
expandedRowKeys.value = expandedRowKeys.value.includes(id) ? [] : [id];
persistListUiState();
if (!id) return;
void router.push({
path: `/matches/outrights/leagues/${id}`,
query: { title: leagueTitle(row) },
});
}
function rowClassName() {
return 'row-expandable';
return 'row-navigable';
}
function rowOf(row: unknown) {
@@ -145,16 +138,20 @@ function leagueNameEn(row: unknown) {
const en = String(rowOf(row).leagueEn ?? '').trim();
return en || '—';
}
function leagueTitle(row: unknown) {
const zh = leagueNameZh(row);
if (zh !== '—') return zh;
return leagueNameEn(row);
}
function outrightTeamCount(row: unknown) {
return Number(rowOf(row).outrightTeamCount ?? 0);
}
function isLeagueExpanded(id: string) {
return expandedRowKeys.value.includes(id);
}
</script>
<template>
<div class="admin-list-page matches-page">
<div class="matches-shell">
<router-view v-if="isOutrightChildRoute" />
<div v-else class="admin-list-page matches-page">
<div class="list-chrome">
<div class="list-chrome__row">
<div class="list-chrome__left">
@@ -178,27 +175,16 @@ function isLeagueExpanded(id: string) {
</div>
</div>
<section v-loading="listLoading" class="list-panel">
<p class="list-hint">{{ t('match.expand_outright_hint') }}</p>
<section v-loading="listLoading" class="list-panel">
<p class="list-hint">{{ t('match.open_outright_hint') }}</p>
<div class="table-wrap">
<el-table
:data="leagues"
stripe
row-key="id"
:expand-row-keys="expandedRowKeys"
:row-class-name="rowClassName"
@expand-change="onExpandChange"
@row-click="onRowClick"
@row-click="openLeaguePage"
>
<el-table-column type="expand" width="40">
<template #default="{ row }">
<LeagueOutrightOddsPanel
v-if="isLeagueExpanded(leagueId(row))"
:league-id="leagueId(row)"
@updated="load({ keepExpand: true })"
/>
</template>
</el-table-column>
<el-table-column type="index" :index="(i: number) => (page - 1) * pageSize + i + 1" :label="t('common.seq')" width="70" align="center" />
<el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
<template #default="{ row }">
@@ -240,9 +226,22 @@ function isLeagueExpanded(id: string) {
</div>
</section>
</div>
</div>
</template>
<style scoped>
.matches-shell {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.matches-shell > :deep(.league-outrights-page) {
flex: 1;
min-height: 0;
}
.matches-page .table-wrap .el-table {
height: auto !important;
}
@@ -250,11 +249,7 @@ function isLeagueExpanded(id: string) {
.matches-page .table-wrap :deep(.el-table__body) {
width: 100% !important;
}
.matches-page :deep(.el-table__expanded-cell) {
padding: 0 !important;
background: #fbfaf7;
}
.list-panel :deep(.row-expandable) {
.list-panel :deep(.row-navigable) {
cursor: pointer;
}
.matchup-link {

310
apps/admin/src/views/MediaLibrary.vue
View File

@@ -41,6 +41,74 @@ const fileInputRef = ref<HTMLInputElement | null>(null);
const unusedCount = computed(() => files.value.filter((f) => !f.inUse).length);
const storageStats = ref<{
categories: Array<{ category: string; count: number; sizeBytes: number }>;
total: { count: number; sizeBytes: number };
} | null>(null);
const cleanupConfig = ref({ enabled: false, keepDays: 180 });
const manualCleanupBefore = ref('');
function getCategoryLabel(cat: string) {
if (cat === 'deposits') return t('media.deposits_on_disk');
return categoryLabel(cat);
}
async function loadStorageStats() {
try {
const res = await api.get('/admin/files/storage-stats');
storageStats.value = res.data.data;
} catch (err) {
console.error('Failed to load storage stats:', err);
}
}
async function loadCleanupConfig() {
try {
const res = await api.get('/admin/deposits/screenshot-cleanup-config');
cleanupConfig.value = res.data.data;
} catch (err) {
console.error('Failed to load cleanup config:', err);
}
}
async function saveCleanupConfig() {
try {
const res = await api.put('/admin/deposits/screenshot-cleanup-config', {
enabled: cleanupConfig.value.enabled,
keepDays: cleanupConfig.value.keepDays,
});
cleanupConfig.value = res.data.data;
ElMessage.success(t('msg.saved'));
} catch (err: any) {
ElMessage.error(err?.response?.data?.message || t('msg.save_failed'));
}
}
async function runManualCleanup() {
if (!manualCleanupBefore.value) return;
const beforeDate = manualCleanupBefore.value;
await ElMessageBox.confirm(
`${t('media.delete_confirm')} (${beforeDate} ${t('common.to')})`,
{ type: 'warning' }
);
try {
const res = await api.delete(`/admin/deposits/screenshots?before=${beforeDate}T00:00:00.000Z`);
const cleaned = res.data.data.cleaned;
const freedBytes = res.data.data.freedBytes;
const msg = t('media.cleanup_result')
.replace('{cleaned}', String(cleaned))
.replace('{size}', formatSize(freedBytes));
ElMessage.success(msg);
loadStorageStats();
loadFiles();
} catch (err: any) {
ElMessage.error(err?.response?.data?.message || t('msg.delete_failed'));
}
}
function categoryLabel(cat: string) {
const key = `media.category.${cat}` as const;
return t(key as any) || cat;
@@ -64,6 +132,7 @@ async function loadFiles(opts?: { silent?: boolean }) {
const res = await api.get('/admin/files', { params });
files.value = res.data.data.items;
total.value = res.data.data.total;
void loadStorageStats();
} catch {
ElMessage.error(t('common.loading'));
} finally {
@@ -80,9 +149,15 @@ watch(currentPage, () => {
void loadFiles();
});
onMounted(() => void loadFiles());
onMounted(() => {
void loadFiles();
void loadCleanupConfig();
});
onActivated(() => {
if (files.value.length > 0) void loadFiles({ silent: true });
if (files.value.length > 0) {
void loadFiles({ silent: true });
void loadCleanupConfig();
}
});
async function confirmDelete(file: MediaFile) {
@@ -197,6 +272,58 @@ async function doUpload() {
</div>
</div>
<!-- Storage Stats -->
<div class="stats-banner" v-if="storageStats">
<div v-for="item in storageStats.categories" :key="item.category" class="stat-card">
<span class="stat-label">{{ getCategoryLabel(item.category) }}</span>
<span class="stat-value">{{ item.count }} <span class="stat-unit">{{ t('common.times') }}</span></span>
<span class="stat-size">{{ formatSize(item.sizeBytes) }}</span>
</div>
<div class="stat-card total-card">
<span class="stat-label">{{ t('media.storage_stats') }}</span>
<span class="stat-value">{{ storageStats.total.count }} <span class="stat-unit">{{ t('common.times') }}</span></span>
<span class="stat-size">{{ formatSize(storageStats.total.sizeBytes) }}</span>
</div>
</div>
<!-- Cleanup Panel -->
<div class="cleanup-card">
<div class="cleanup-title">
<span>{{ t('media.screenshot_cleanup') }}</span>
</div>
<div class="cleanup-grid">
<!-- Auto Cleanup Config -->
<div class="cleanup-section">
<h4 class="section-subtitle">{{ t('media.cleanup_auto_enabled') }}</h4>
<div class="config-row">
<label class="switch-container">
<input type="checkbox" v-model="cleanupConfig.enabled" @change="saveCleanupConfig" />
<span class="switch-slider"></span>
</label>
<div class="days-input-group" v-if="cleanupConfig.enabled">
<span>{{ t('media.cleanup_keep_days') }}</span>
<input type="number" v-model.number="cleanupConfig.keepDays" min="1" class="num-input" />
<button class="btn btn-ghost btn-sm" @click="saveCleanupConfig">{{ t('common.save') }}</button>
</div>
</div>
</div>
<!-- Manual Cleanup -->
<div class="cleanup-section manual-section">
<h4 class="section-subtitle">{{ t('media.cleanup_before_date') }}</h4>
<div class="config-row">
<input type="date" v-model="manualCleanupBefore" class="date-input" />
<button class="btn btn-primary" :disabled="!manualCleanupBefore" @click="runManualCleanup">
{{ t('media.cleanup_run_now') }}
</button>
</div>
</div>
</div>
<div class="cleanup-tip">
* 仅清理【已同意】或【已拒绝】的充值订单截图，【待处理】的截图绝不会被删除。清理后文件会被替换为已过期占位图。
</div>
</div>
<!-- File grid -->
<div v-if="loading" class="state-center">{{ t('common.loading') }}</div>
<div v-else-if="files.length === 0" class="state-center muted">{{ t('media.no_files') }}</div>
@@ -309,6 +436,185 @@ async function doUpload() {
min-height: 0;
}
/* ── Storage Stats ── */
.stats-banner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 12px;
flex-shrink: 0;
}
.stat-card {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 16px;
display: flex;
flex-direction: column;
gap: 4px;
box-shadow: var(--shadow);
transition: all 0.15s ease-in-out;
}
.stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(56, 49, 37, 0.06);
}
.total-card {
border-color: var(--primary);
background: var(--accent-hover);
}
.stat-label {
font-size: 12px;
color: var(--text-muted);
font-weight: 550;
}
.stat-value {
font-size: 20px;
font-weight: 800;
color: var(--text);
}
.stat-unit {
font-size: 12px;
font-weight: 400;
color: var(--text-muted);
}
.stat-size {
font-size: 12px;
color: var(--text-muted);
}
/* ── Cleanup Panel ── */
.cleanup-card {
background: #ffffff;
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
gap: 14px;
flex-shrink: 0;
}
.cleanup-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 800;
color: var(--text);
border-bottom: 1px solid var(--border-soft);
padding-bottom: 8px;
}
.cleanup-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.cleanup-section {
display: flex;
flex-direction: column;
gap: 8px;
}
.section-subtitle {
margin: 0;
font-size: 13px;
color: var(--text);
font-weight: 700;
}
.config-row {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.days-input-group {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: var(--text-muted);
}
.num-input {
width: 75px;
padding: 5px 8px;
border: 1px solid var(--border);
border-radius: 6px;
background: #ffffff;
color: var(--text);
font-family: inherit;
font-size: 13px;
outline: none;
}
.num-input:focus {
border-color: var(--primary);
}
.date-input {
padding: 5px 10px;
border: 1px solid var(--border);
border-radius: 6px;
background: #ffffff;
color: var(--text);
font-family: inherit;
font-size: 13px;
outline: none;
}
.date-input:focus {
border-color: var(--primary);
}
.btn-sm {
padding: 4px 10px;
font-size: 12px;
}
.cleanup-tip {
font-size: 12px;
color: var(--text-muted);
line-height: 1.4;
padding: 8px 12px;
background: var(--accent-hover);
border-radius: 6px;
border-left: 3px solid var(--primary);
}
/* ── Custom Toggle Switch ── */
.switch-container {
position: relative;
display: inline-block;
width: 44px;
height: 22px;
}
.switch-container input {
opacity: 0;
width: 0;
height: 0;
}
.switch-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #d5cfc3;
transition: .2s;
border-radius: 22px;
}
.switch-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .2s;
border-radius: 50%;
}
input:checked + .switch-slider {
background-color: var(--primary);
}
input:checked + .switch-slider:before {
transform: translateX(22px);
}
/* ── Toolbar ── */
.toolbar {
display: flex;

749
apps/admin/src/views/Settlement.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted, defineAsyncComponent } from 'vue';
import { ref, computed, onMounted, defineAsyncComponent, watch, nextTick } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { formatApiErrorMessage, isApiErrorCode } from '@thebet365/shared';
import api from '../api';
@@ -75,6 +75,12 @@ const { hasPermission } = usePermissions();
const canResettle = computed(() => hasPermission(AdminPerm.resettle));
const route = useRoute();
const router = useRouter();
function settlementReturnTo(isOutright = false) {
const q = route.query.returnTo;
if (typeof q === 'string' && q.startsWith('/')) return q;
return isOutright ? '/matches/outrights' : '/matches';
}
const STAT_FACT_LABELS = {
homeCorners: {
'zh-CN': '主队角球',
@@ -115,14 +121,14 @@ const matchStats = ref<{
function emptyMatchStats() {
return {
homeCorners: null,
awayCorners: null,
homeYellowCards: null,
awayYellowCards: null,
homeRedCards: null,
awayRedCards: null,
homeCards: null,
awayCards: null,
homeCorners: 0,
awayCorners: 0,
homeYellowCards: 0,
awayYellowCards: 0,
homeRedCards: 0,
awayRedCards: 0,
homeCards: 0,
awayCards: 0,
};
}
@@ -155,8 +161,29 @@ const winnerTeamId = ref('');
const outrightSelections = ref<
Array<{ teamId: string; teamCode: string; teamZh: string; teamEn: string }>
>([]);
interface ResettlePreviewItem {
betId: string;
betNo: string;
oldPayout: string;
newPayout: string;
delta: string;
oldStatus: string;
newStatus: string;
}
interface ResettlePreview {
batch: {
id: string;
batchNo: string;
};
affectedCount: number;
totalTopup: string;
totalClawback: string;
items: ResettlePreviewItem[];
}
const preview = ref<Record<string, unknown> | null>(null);
const resettlePreview = ref<Record<string, unknown> | null>(null);
const resettlePreview = ref<ResettlePreview | null>(null);
const resettleReason = ref('');
const statsSummary = ref<Pick<SettlementBetStats, 'summary' | 'bySelection'> | null>(null);
const betsList = ref<SettlementBetStats['bets'] | null>(null);
@@ -171,12 +198,71 @@ const betPage = ref(1);
const betPageSize = ref(10);
const previewPage = ref(1);
const previewPageSize = ref(10);
const previewDialogVisible = ref(false);
const resettleDialogVisible = ref(false);
const confirmLoading = ref(false);
const resettleConfirmLoading = ref(false);
const resettlePage = ref(1);
const resettlePageSize = ref(10);
const resettleItemsPage = computed(() => {
if (!resettlePreview.value?.items) return [];
const start = (resettlePage.value - 1) * resettlePageSize.value;
const end = start + resettlePageSize.value;
return resettlePreview.value.items.slice(start, end);
});
const isProgrammaticChange = ref(false);
interface SettlementHistoryRecord {
id: string;
batchNo: string;
htHomeScore: number | null;
htAwayScore: number | null;
ftHomeScore: number | null;
ftAwayScore: number | null;
homeCorners: number | null;
awayCorners: number | null;
homeYellowCards: number | null;
awayYellowCards: number | null;
homeRedCards: number | null;
awayRedCards: number | null;
homeCards: number | null;
awayCards: number | null;
totalBets: number;
totalPayout: string;
totalRefund: string;
confirmedAt: string | null;
isResettle: boolean;
reason: string | null;
operatorUsername: string;
}
const settlementHistory = ref<SettlementHistoryRecord[]>([]);
const historyLoading = ref(false);
const activeTab = ref<'bets' | 'history'>('bets');
async function loadSettlementHistory() {
if (!matchId.value) return;
historyLoading.value = true;
try {
const { data } = await api.get(`/admin/matches/${matchId.value}/settlement/history`);
settlementHistory.value = data.data as SettlementHistoryRecord[];
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
} finally {
historyLoading.value = false;
}
}
// 智能比分推荐已暂时关闭（后端 smart-score.solver.ts 保留，恢复时接回 UI 与 POST /settlement/smart-score）
const matchId = computed(() => String(route.params.id ?? ''));
const isOutright = computed(() => match.value?.isOutright === true);
const outrightTitle = computed(() => {
const m = match.value;
if (!m) return '';
@@ -372,6 +458,29 @@ function formatTime(v: string) {
});
}
function formatScorePair(h: number | null, a: number | null) {
if (h == null || a == null) return '—';
return `${h}-${a}`;
}
function formatHistoryScore(row: SettlementHistoryRecord) {
const ht = formatScorePair(row.htHomeScore, row.htAwayScore);
const ft = formatScorePair(row.ftHomeScore, row.ftAwayScore);
if (ht === '—' && ft === '—') return '—';
return `${ht} / ${ft}`;
}
function formatHomeAwayPair(h: number | null, a: number | null) {
if (h == null && a == null) return '—';
return `${h ?? '—'} / ${a ?? '—'}`;
}
function formatHistoryCards(row: SettlementHistoryRecord) {
const { homeYellowCards: yH, awayYellowCards: yA, homeRedCards: rH, awayRedCards: rA } = row;
if (yH == null && yA == null && rH == null && rA == null) return '—';
return `Y:${yH ?? '—'}/${yA ?? '—'} R:${rH ?? '—'}/${rA ?? '—'}`;
}
function matchBetSelectionSummary(
row: SettlementBetStats['bets']['items'][number],
) {
@@ -436,6 +545,7 @@ function onBetPageSizeChange(size: number) {
async function loadMatch() {
if (!matchId.value) return;
loading.value = true;
isProgrammaticChange.value = true;
try {
const { data } = await api.get(`/admin/matches/${matchId.value}`);
const detail = data.data as AdminMatchDetail;
@@ -445,7 +555,7 @@ async function loadMatch() {
detail.status === 'SETTLED';
if (!settleable) {
ElMessage.warning(t('settlement.must_close_first'));
router.replace(detail.isOutright ? '/matches/outrights' : '/matches');
router.replace(settlementReturnTo(detail.isOutright));
return;
}
match.value = detail;
@@ -457,14 +567,14 @@ async function loadMatch() {
ftAway: detail.score.ftAway,
};
matchStats.value = {
homeCorners: detail.score.homeCorners ?? null,
awayCorners: detail.score.awayCorners ?? null,
homeYellowCards: detail.score.homeYellowCards ?? null,
awayYellowCards: detail.score.awayYellowCards ?? null,
homeRedCards: detail.score.homeRedCards ?? null,
awayRedCards: detail.score.awayRedCards ?? null,
homeCards: detail.score.homeCards ?? null,
awayCards: detail.score.awayCards ?? null,
homeCorners: detail.score.homeCorners ?? 0,
awayCorners: detail.score.awayCorners ?? 0,
homeYellowCards: detail.score.homeYellowCards ?? 0,
awayYellowCards: detail.score.awayYellowCards ?? 0,
homeRedCards: detail.score.homeRedCards ?? 0,
awayRedCards: detail.score.awayRedCards ?? 0,
homeCards: detail.score.homeCards ?? 0,
awayCards: detail.score.awayCards ?? 0,
};
winnerTeamId.value = detail.score.winnerTeamId ?? '';
} else {
@@ -495,11 +605,28 @@ async function loadMatch() {
}
betPage.value = 1;
await loadStats();
if (detail.status === 'PENDING_SETTLEMENT') {
try {
const previewRes = await api.get(`/admin/matches/${matchId.value}/settlement/preview`, {
params: { page: 1, pageSize: previewPageSize.value }
});
if (previewRes.data.data) {
preview.value = previewRes.data.data;
const itemsPage = previewRes.data.data.items as PreviewItemsPage;
previewPage.value = itemsPage.page;
previewPageSize.value = itemsPage.pageSize;
}
} catch (e) {
console.error('Failed to load active settlement preview', e);
}
}
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.load_failed'));
} finally {
loading.value = false;
await nextTick();
isProgrammaticChange.value = false;
}
}
@@ -508,19 +635,34 @@ const isSettled = computed(() => match.value?.status === 'SETTLED');
async function previewResettlement() {
const payload = buildSettlementPayload();
if (!payload) return;
const { data } = await api.post(`/admin/matches/${matchId.value}/resettle/preview`, {
...payload,
reason: resettleReason.value.trim() || undefined,
});
resettlePreview.value = data.data;
try {
const { data } = await api.post(`/admin/matches/${matchId.value}/resettle/preview`, {
...payload,
reason: resettleReason.value.trim() || undefined,
});
resettlePage.value = 1;
resettlePreview.value = data.data;
resettleDialogVisible.value = true;
} catch (e: unknown) {
ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
}
}
async function confirmResettle() {
if (!resettlePreview.value?.batch) return;
await api.post(`/admin/resettle/${(resettlePreview.value.batch as { id: string }).id}/confirm`);
ElMessage.success(t('msg.resettle_confirmed'));
resettlePreview.value = null;
await loadMatch();
resettleConfirmLoading.value = true;
try {
await api.post(`/admin/resettle/${(resettlePreview.value.batch as { id: string }).id}/confirm`);
ElMessage.success(t('msg.resettle_confirmed'));
resettlePreview.value = null;
resettleDialogVisible.value = false;
await loadMatch();
void loadSettlementHistory();
} catch (e: unknown) {
ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
} finally {
resettleConfirmLoading.value = false;
}
}
function settlementApiError(e: unknown, fallback: string) {
@@ -582,6 +724,7 @@ async function previewSettlement() {
const itemsPage = data.data.items as PreviewItemsPage;
previewPage.value = itemsPage.page;
previewPageSize.value = itemsPage.pageSize;
previewDialogVisible.value = true;
await loadMatch();
} catch (e: unknown) {
ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
@@ -603,14 +746,41 @@ function onPreviewPageSizeChange(size: number) {
async function confirm() {
if (!preview.value?.batch) return;
await api.post(`/admin/settlement/${(preview.value.batch as { id: string }).id}/confirm`);
ElMessage.success(t('msg.settlement_confirmed'));
preview.value = null;
await loadMatch();
confirmLoading.value = true;
try {
await api.post(`/admin/settlement/${(preview.value.batch as { id: string }).id}/confirm`);
ElMessage.success(t('msg.settlement_confirmed'));
preview.value = null;
previewDialogVisible.value = false;
await loadMatch();
void loadSettlementHistory();
} catch (e: unknown) {
ElMessage.error(settlementApiError(e, t('settlement.preview_failed')));
} finally {
confirmLoading.value = false;
}
}
function handlePreviewClick() {
if (preview.value) {
previewDialogVisible.value = true;
} else {
void previewSettlement();
}
}
watch(
[score, matchStats, winnerTeamId],
() => {
if (isProgrammaticChange.value) return;
preview.value = null;
},
{ deep: true }
);
onMounted(() => {
void loadMatch();
void loadSettlementHistory();
});
</script>
@@ -766,9 +936,9 @@ onMounted(() => {
<el-button
type="primary"
:loading="previewing"
@click="previewSettlement"
@click="handlePreviewClick"
>
{{ t('settlement.preview_btn') }}
{{ preview ? t('settlement.view_preview_btn') : t('settlement.preview_btn') }}
</el-button>
<span class="preview-hint">{{
isOutright ? t('settlement.outright.preview_hint') : t('settlement.preview_hint')
@@ -791,37 +961,94 @@ onMounted(() => {
<!-- 智能比分弹窗已关闭（见 Settlement.vue git 历史） -->
<el-card v-if="canResettle && resettlePreview" class="preview-card" shadow="never">
<div class="preview-title">{{ t('settlement.resettle_preview_title') }}</div>
<el-row :gutter="20">
<el-col :span="8">
<div class="pstat">
<div class="pstat-value">{{ resettlePreview.affectedCount }}</div>
<div class="pstat-label">{{ t('settlement.resettle_affected') }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="pstat">
<div class="pstat-value pstat-green">{{ resettlePreview.totalTopup }}</div>
<div class="pstat-label">{{ t('settlement.resettle_topup') }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="pstat">
<div class="pstat-value pstat-orange">{{ resettlePreview.totalClawback }}</div>
<div class="pstat-label">{{ t('settlement.resettle_clawback') }}</div>
</div>
</el-col>
</el-row>
<el-button type="warning" class="confirm-btn" @click="confirmResettle">
{{ t('settlement.resettle_confirm') }}
</el-button>
</el-card>
<!-- 重新结算预览弹窗 -->
<el-dialog
v-model="resettleDialogVisible"
:title="t('settlement.resettle_preview_title')"
width="850px"
destroy-on-close
>
<div v-if="resettlePreview">
<el-row :gutter="20">
<el-col :span="8">
<div class="pstat">
<div class="pstat-value">{{ resettlePreview.affectedCount }}</div>
<div class="pstat-label">{{ t('settlement.resettle_affected') }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="pstat">
<div class="pstat-value pstat-green">{{ resettlePreview.totalTopup }}</div>
<div class="pstat-label">{{ t('settlement.resettle_topup') }}</div>
</div>
</el-col>
<el-col :span="8">
<div class="pstat">
<div class="pstat-value pstat-orange">{{ resettlePreview.totalClawback }}</div>
<div class="pstat-label">{{ t('settlement.resettle_clawback') }}</div>
</div>
</el-col>
</el-row>
<el-card v-if="preview" class="preview-card preview-card--compact" shadow="never">
<div class="preview-bar">
<span class="preview-bar-title">{{ t('settlement.preview_title') }}</span>
<div class="preview-metrics">
<div v-if="resettlePreview.items && resettlePreview.items.length > 0" class="preview-items-wrap" style="margin-top: 20px;">
<div class="preview-items-head" style="margin-bottom: 10px;">
<span class="preview-items-title" style="font-size: 14px; font-weight: 600; color: var(--text);">
{{ t('settlement.resettle_affected_list') }} ({{ resettlePreview.items.length }})
</span>
</div>
<el-table :data="resettleItemsPage" size="small" stripe class="preview-items-table" style="max-height: 400px; overflow-y: auto;">
<el-table-column type="index" :index="(i: number) => (resettlePage - 1) * resettlePageSize + i + 1" :label="t('common.seq')" width="55" align="center" />
<el-table-column :label="t('bet.col.bet_no')" prop="betNo" min-width="140" show-overflow-tooltip />
<el-table-column :label="t('settlement.resettle_col.old_result')" min-width="160">
<template #default="{ row }">
<el-tag size="small" :type="betStatusTagType(row.oldStatus)" style="margin-right: 6px;">{{ betStatusLabel(row.oldStatus) }}</el-tag>
<span class="old-payout" style="color: var(--text-muted); font-size: 11px;">{{ formatAmount(row.oldPayout) }}</span>
</template>
</el-table-column>
<el-table-column :label="t('settlement.resettle_col.new_result')" min-width="160">
<template #default="{ row }">
<el-tag size="small" :type="betStatusTagType(row.newStatus)" style="margin-right: 6px;">{{ betStatusLabel(row.newStatus) }}</el-tag>
<span class="new-payout" style="color: var(--text); font-size: 11px;">{{ formatAmount(row.newPayout) }}</span>
</template>
</el-table-column>
<el-table-column :label="t('settlement.resettle_col.adjust')" width="120" align="right">
<template #default="{ row }">
<span :class="Number(row.delta) > 0 ? 'pstat-green' : Number(row.delta) < 0 ? 'pstat-orange' : ''" style="font-weight: bold;">
{{ Number(row.delta) > 0 ? '+' : '' }}{{ formatAmount(row.delta) }}
</span>
</template>
</el-table-column>
</el-table>
<el-pagination
class="preview-pager bet-pager"
size="small"
background
layout="total, sizes, prev, pager, next"
:total="resettlePreview.items.length"
v-model:current-page="resettlePage"
v-model:page-size="resettlePageSize"
:page-sizes="[10, 20, 50, 100]"
style="margin-top: 12px; justify-content: flex-end;"
/>
</div>
</div>
<template #footer>
<el-button @click="resettleDialogVisible = false">{{ t('common.cancel') }}</el-button>
<el-button type="warning" :loading="resettleConfirmLoading" @click="confirmResettle">
{{ t('settlement.resettle_confirm') }}
</el-button>
</template>
</el-dialog>
<!-- 结算预览弹窗 -->
<el-dialog
v-model="previewDialogVisible"
:title="t('settlement.preview_title')"
width="850px"
destroy-on-close
>
<div v-if="preview">
<div class="preview-metrics" style="margin-bottom: 16px;">
<div class="preview-metric">
<span class="preview-metric-value">{{ preview.pendingBetCount ?? preview.singleBetCount }}</span>
<span class="preview-metric-label">{{ t('settlement.preview_pending_bets') }}</span>
@@ -839,147 +1066,201 @@ onMounted(() => {
<span class="preview-metric-label">{{ t('settlement.refund_amount') }}</span>
</div>
</div>
<el-button type="success" size="small" @click="confirm">
<p v-if="previewZeroHint" class="preview-zero-hint" style="margin-bottom: 16px;">{{ previewZeroHint }}</p>
<div v-if="previewItemsPage.total > 0" class="preview-items-wrap">
<div class="preview-items-head">
<span class="preview-items-title">
{{ t('settlement.preview_items_title', { n: previewItemsPage.total }) }}
</span>
</div>
<el-table :data="previewItemsPage.items" size="small" stripe class="preview-items-table">
<el-table-column type="index" :index="(i: number) => (previewItemsPage.page - 1) * previewItemsPage.pageSize + i + 1" :label="t('common.seq')" width="55" align="center" />
<el-table-column :label="t('bet.col.bet_no')" prop="betNo" min-width="140" show-overflow-tooltip />
<el-table-column :label="t('common.type')" width="68">
<template #default="{ row }">{{ betTypeLabel(row.betType) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.preview_col.result')" width="108">
<template #default="{ row }">{{ previewResultLabel(row.result) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.est_payout')" width="92" align="right">
<template #default="{ row }">{{ formatAmount(row.payout) }}</template>
</el-table-column>
<el-table-column :label="t('user.field.remark')" min-width="160" show-overflow-tooltip prop="note" />
</el-table>
<el-pagination
v-if="previewItemsPage.total > 0"
class="preview-pager bet-pager"
size="small"
background
layout="total, sizes, prev, pager, next"
:total="previewItemsPage.total"
:current-page="previewItemsPage.page"
:page-size="previewItemsPage.pageSize"
:page-sizes="[10, 20, 50]"
@current-change="onPreviewPageChange"
@size-change="onPreviewPageSizeChange"
/>
</div>
</div>
<template #footer>
<el-button @click="previewDialogVisible = false">{{ t('common.cancel') }}</el-button>
<el-button type="success" :loading="confirmLoading" @click="confirm">
{{ t('settlement.confirm_btn') }}
</el-button>
</div>
<p v-if="previewZeroHint" class="preview-zero-hint">{{ previewZeroHint }}</p>
<div v-if="previewItemsPage.total > 0" class="preview-items-wrap">
<div class="preview-items-head">
<span class="preview-items-title">
{{ t('settlement.preview_items_title', { n: previewItemsPage.total }) }}
</span>
</div>
<el-table :data="previewItemsPage.items" size="small" stripe class="preview-items-table">
<el-table-column type="index" :index="(i: number) => (previewItemsPage.page - 1) * previewItemsPage.pageSize + i + 1" :label="t('common.seq')" width="55" align="center" />
<el-table-column :label="t('bet.col.bet_no')" prop="betNo" min-width="140" show-overflow-tooltip />
<el-table-column :label="t('common.type')" width="68">
<template #default="{ row }">{{ betTypeLabel(row.betType) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.preview_col.result')" width="108">
<template #default="{ row }">{{ previewResultLabel(row.result) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.est_payout')" width="92" align="right">
<template #default="{ row }">{{ formatAmount(row.payout) }}</template>
</el-table-column>
<el-table-column :label="t('user.field.remark')" min-width="160" show-overflow-tooltip prop="note" />
</el-table>
<el-pagination
v-if="previewItemsPage.total > 0"
class="preview-pager bet-pager"
size="small"
background
layout="total, sizes, prev, pager, next"
:total="previewItemsPage.total"
:current-page="previewItemsPage.page"
:page-size="previewItemsPage.pageSize"
:page-sizes="[10, 20, 50]"
@current-change="onPreviewPageChange"
@size-change="onPreviewPageSizeChange"
/>
</div>
</el-card>
</template>
</el-dialog>
<el-card v-loading="statsLoading" class="stats-card" shadow="never">
<div v-if="stats" class="stats-body">
<div class="stats-charts">
<div v-if="betTypeChartOption" class="mini-chart">
<VChart class="mini-chart-canvas" :option="betTypeChartOption" autoresize />
</div>
<div v-if="statusChartOption" class="mini-chart">
<VChart class="mini-chart-canvas" :option="statusChartOption" autoresize />
</div>
<div v-if="selectionStakeChartOption" class="mini-chart">
<VChart class="mini-chart-canvas" :option="selectionStakeChartOption" autoresize />
</div>
</div>
<div class="stats-tables">
<div class="stats-table-block">
<div class="subsection-title">{{ t('settlement.stats_by_market') }}</div>
<el-table
v-if="stats.bySelection.length"
:data="stats.bySelection"
size="small"
stripe
class="stats-table"
height="100%"
>
<el-table-column :label="t('settlement.col.market')" min-width="120">
<template #default="{ row }">
{{ marketLabel(row.marketType) }}
<span v-if="row.period" class="period-tag">{{ row.period }}</span>
</template>
</el-table-column>
<el-table-column :label="t('settlement.col.selection')" min-width="120">
<template #default="{ row }">{{ selectionDisplay(row) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.col.legs')" width="72" align="center" prop="legCount" />
<el-table-column :label="t('settlement.col.single_stake')" width="100" align="right">
<template #default="{ row }">{{ formatAmount(row.singleStake) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.col.parlay_legs')" width="88" align="center" prop="parlayLegCount" />
</el-table>
<p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
</div>
<div class="stats-table-block stats-table-block--bets">
<div class="subsection-title">
{{ t('settlement.bet_list') }} ({{ stats.bets.total }})
<span class="subsection-hint">{{ t('settlement.bet_list_hint') }}</span>
<el-card v-loading="statsLoading && activeTab === 'bets'" class="stats-card" shadow="never">
<el-tabs v-model="activeTab" class="settlement-tabs">
<el-tab-pane name="bets" :label="t('settlement.history_tab_bets')">
<div v-if="stats" class="stats-body">
<div class="stats-charts">
<div v-if="betTypeChartOption" class="mini-chart">
<VChart class="mini-chart-canvas" :option="betTypeChartOption" autoresize />
</div>
<div v-if="statusChartOption" class="mini-chart">
<VChart class="mini-chart-canvas" :option="statusChartOption" autoresize />
</div>
<div v-if="selectionStakeChartOption" class="mini-chart">
<VChart class="mini-chart-canvas" :option="selectionStakeChartOption" autoresize />
</div>
</div>
<div v-loading="betsLoading" class="table-wrap">
<el-table
v-if="stats.bets.items.length"
:data="stats.bets.items"
size="small"
stripe
class="stats-table"
>
<el-table-column type="index" :index="(i: number) => ((stats?.bets.page ?? 1) - 1) * (stats?.bets.pageSize ?? 10) + i + 1" :label="t('common.seq')" width="55" align="center" />
<el-table-column prop="betNo" :label="t('bet.col.bet_no')" width="140" />
<el-table-column prop="username" :label="t('bet.col.player')" width="96" />
<el-table-column :label="t('common.type')" width="72">
<template #default="{ row }">
{{ betTypeLabel(row.betType) }}
<span v-if="row.legCountOnMatch > 1" class="leg-badge">×{{ row.legCountOnMatch }}</span>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.content')" min-width="200">
<template #default="{ row }">
<span class="bet-content-cell">{{ matchBetSelectionSummary(row) }}</span>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.stake')" width="88" align="right">
<template #default="{ row }">{{ formatAmount(row.stake) }}</template>
</el-table-column>
<el-table-column :label="t('common.status')" width="88">
<template #default="{ row }">
<el-tag size="small" :type="betStatusTagType(row.status)">{{ betStatusLabel(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.placed_at')" width="120">
<template #default="{ row }">{{ formatTime(row.placedAt) }}</template>
</el-table-column>
</el-table>
<p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
<div class="stats-tables">
<div class="stats-table-block">
<div class="subsection-title">{{ t('settlement.stats_by_market') }}</div>
<div class="table-wrap">
<el-table
v-if="stats.bySelection.length"
:data="stats.bySelection"
size="small"
stripe
class="stats-table"
>
<el-table-column :label="t('settlement.col.market')" min-width="120">
<template #default="{ row }">
{{ marketLabel(row.marketType) }}
<span v-if="row.period" class="period-tag">{{ row.period }}</span>
</template>
</el-table-column>
<el-table-column :label="t('settlement.col.selection')" min-width="120">
<template #default="{ row }">{{ selectionDisplay(row) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.col.legs')" width="72" align="center" prop="legCount" />
<el-table-column :label="t('settlement.col.single_stake')" width="100" align="right">
<template #default="{ row }">{{ formatAmount(row.singleStake) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.col.parlay_legs')" width="88" align="center" prop="parlayLegCount" />
</el-table>
<p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
</div>
</div>
<div class="stats-table-block stats-table-block--bets">
<div class="subsection-title">
{{ t('settlement.bet_list') }} ({{ stats.bets.total }})
<span class="subsection-hint">{{ t('settlement.bet_list_hint') }}</span>
</div>
<div v-loading="betsLoading" class="table-wrap">
<el-table
v-if="stats.bets.items.length"
:data="stats.bets.items"
size="small"
stripe
class="stats-table"
>
<el-table-column type="index" :index="(i: number) => ((stats?.bets.page ?? 1) - 1) * (stats?.bets.pageSize ?? 10) + i + 1" :label="t('common.seq')" width="55" align="center" />
<el-table-column prop="betNo" :label="t('bet.col.bet_no')" width="140" />
<el-table-column prop="username" :label="t('bet.col.player')" width="96" />
<el-table-column :label="t('common.type')" width="72">
<template #default="{ row }">
{{ betTypeLabel(row.betType) }}
<span v-if="row.legCountOnMatch > 1" class="leg-badge">×{{ row.legCountOnMatch }}</span>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.content')" min-width="200">
<template #default="{ row }">
<span class="bet-content-cell">{{ matchBetSelectionSummary(row) }}</span>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.stake')" width="88" align="right">
<template #default="{ row }">{{ formatAmount(row.stake) }}</template>
</el-table-column>
<el-table-column :label="t('common.status')" width="88">
<template #default="{ row }">
<el-tag size="small" :type="betStatusTagType(row.status)">{{ betStatusLabel(row.status) }}</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.placed_at')" width="120">
<template #default="{ row }">{{ formatTime(row.placedAt) }}</template>
</el-table-column>
</el-table>
<p v-else class="empty-hint">{{ t('settlement.no_bets') }}</p>
</div>
<el-pagination
v-if="stats.bets.total > 0"
class="bet-pager"
size="small"
background
layout="total, sizes, prev, pager, next"
:total="stats.bets.total"
:current-page="stats.bets.page"
:page-size="stats.bets.pageSize"
:page-sizes="[10, 20, 50]"
@current-change="onBetPageChange"
@size-change="onBetPageSizeChange"
/>
</div>
</div>
<el-pagination
v-if="stats.bets.total > 0"
class="bet-pager"
size="small"
background
layout="total, sizes, prev, pager, next"
:total="stats.bets.total"
:current-page="stats.bets.page"
:page-size="stats.bets.pageSize"
:page-sizes="[10, 20, 50]"
@current-change="onBetPageChange"
@size-change="onBetPageSizeChange"
/>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane name="history" :label="t('settlement.history_tab')">
<div v-loading="historyLoading" class="history-body">
<div class="table-wrap">
<el-table
:data="settlementHistory"
size="small"
stripe
class="stats-table history-table"
:empty-text="t('settlement.history.no_records')"
>
<el-table-column prop="batchNo" :label="t('settlement.history.col.batch_no')" min-width="120" show-overflow-tooltip />
<el-table-column :label="t('settlement.history.col.type')" width="100">
<template #default="{ row }">
<el-tag size="small" :type="row.isResettle ? 'warning' : 'success'">
{{ row.isResettle ? t('settlement.history.type.resettle') : t('settlement.history.type.initial') }}
</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('settlement.history.col.score')" min-width="120">
<template #default="{ row }">{{ formatHistoryScore(row) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.history.col.corners')" width="100">
<template #default="{ row }">{{ formatHomeAwayPair(row.homeCorners, row.awayCorners) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.history.col.cards')" min-width="120">
<template #default="{ row }">{{ formatHistoryCards(row) }}</template>
</el-table-column>
<el-table-column prop="totalBets" :label="t('settlement.history.col.total_bets')" width="96" align="right" />
<el-table-column :label="t('settlement.history.col.total_payout')" width="100" align="right">
<template #default="{ row }">{{ formatAmount(row.totalPayout) }}</template>
</el-table-column>
<el-table-column :label="t('settlement.history.col.total_refund')" width="100" align="right">
<template #default="{ row }">{{ formatAmount(row.totalRefund) }}</template>
</el-table-column>
<el-table-column prop="operatorUsername" :label="t('settlement.history.col.operator')" width="96" show-overflow-tooltip />
<el-table-column :label="t('settlement.history.col.time')" width="120">
<template #default="{ row }">{{ row.confirmedAt ? formatTime(row.confirmedAt) : '—' }}</template>
</el-table-column>
<el-table-column :label="t('settlement.history.col.reason')" min-width="120" show-overflow-tooltip>
<template #default="{ row }">{{ row.reason || '—' }}</template>
</el-table-column>
</el-table>
</div>
</div>
</el-tab-pane>
</el-tabs>
</el-card>
</div>
</template>
@@ -1031,6 +1312,72 @@ onMounted(() => {
overflow: hidden;
}
.settlement-tabs {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.settlement-tabs :deep(.el-tabs__header) {
margin-bottom: 8px;
flex-shrink: 0;
}
.settlement-tabs :deep(.el-tabs__nav-wrap) {
margin-bottom: 0;
}
.settlement-tabs :deep(.el-tabs__item) {
height: 34px;
line-height: 34px;
font-size: 13px;
font-weight: 500;
color: #888;
padding: 0 14px;
}
.settlement-tabs :deep(.el-tabs__item.is-active) {
color: #d4fde5;
font-weight: 700;
}
.settlement-tabs :deep(.el-tabs__active-bar) {
background-color: var(--gold-bright);
height: 2px;
}
.settlement-tabs :deep(.el-tabs__content) {
flex: 1;
min-height: 0;
overflow: hidden;
padding: 0;
}
.settlement-tabs :deep(.el-tab-pane) {
height: 100%;
}
.history-body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
height: 100%;
}
.history-body .table-wrap {
flex: 1;
min-height: 0;
overflow: auto;
}
.history-table {
width: 100%;
}
.settle-score-row {
display: flex;
align-items: flex-end;
@@ -1225,7 +1572,7 @@ onMounted(() => {
overflow: hidden;
}
.stats-table-block--bets .table-wrap {
.stats-table-block .table-wrap {
flex: 1;
min-height: 0;
overflow: auto;
@@ -1487,7 +1834,7 @@ onMounted(() => {
color: var(--text-muted);
}
.stats-table-block--bets .table-wrap {
.stats-table-block .table-wrap {
border-color: var(--border);
background: #ffffff;
}

233
apps/admin/src/views/agent/AgentDirectPlayersView.vue Normal file
View File

@@ -0,0 +1,233 @@
<script setup lang="ts">
import { ref, computed, inject, onMounted, onUnmounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import { useAdminLocale } from '../../composables/useAdminLocale';
import {
agentDirectPlayersReloadKey,
agentPlayerActionsKey,
} from '../../composables/agent-direct-players-context';
import api from '../../api';
import AdminSubNav from '../../components/AdminSubNav.vue';
import AdminTableWrap from '../../components/AdminTableWrap.vue';
import AdminTableEmpty from '../../components/AdminTableEmpty.vue';
import AdminPlayerStatusCell from '../../components/AdminPlayerStatusCell.vue';
import AdminPlayerRowActions from '../../components/AdminPlayerRowActions.vue';
import { formatAmount, formatAmountFull } from '../../utils/format-amount';
import type { PlayerRow } from '../user-form';
defineOptions({ name: 'AdminAgentDirectPlayersView' });
const route = useRoute();
const { t } = useAdminLocale();
const actions = inject(agentPlayerActionsKey);
const reloadRef = inject(agentDirectPlayersReloadKey);
const agentId = computed(() => String(route.params.agentId ?? ''));
const agentUsername = computed(() => {
const name = String(route.query.username ?? '').trim();
return name || `#${agentId.value}`;
});
const players = ref<PlayerRow[]>([]);
const total = ref(0);
const page = ref(1);
const pageSize = ref(20);
const keyword = ref('');
const filterStatus = ref('');
const loading = ref(false);
const pageTitle = computed(() =>
t('agent.direct_players_title', { name: agentUsername.value }),
);
async function loadPlayers() {
if (!agentId.value) return;
loading.value = true;
try {
const { data } = await api.get('/admin/users', {
params: {
parentId: agentId.value,
page: page.value,
pageSize: pageSize.value,
keyword: keyword.value.trim() || undefined,
status: filterStatus.value || undefined,
},
});
players.value = (data.data.items ?? []) as PlayerRow[];
total.value = data.data.total ?? 0;
} finally {
loading.value = false;
}
}
function onSearch() {
page.value = 1;
void loadPlayers();
}
function onPageChange(p: number) {
page.value = p;
void loadPlayers();
}
function onSizeChange(size: number) {
pageSize.value = size;
page.value = 1;
void loadPlayers();
}
watch(agentId, () => {
page.value = 1;
void loadPlayers();
});
onMounted(() => {
if (reloadRef) reloadRef.value = () => void loadPlayers();
void loadPlayers();
});
onUnmounted(() => {
if (reloadRef) reloadRef.value = null;
});
</script>
<template>
<div class="admin-list-page agent-direct-players-page">
<AdminSubNav :title="pageTitle" :subtitle="t('agent.direct_players')" />
<section class="list-panel player-list-panel">
<div class="list-panel-toolbar">
<el-form inline class="list-chrome__grow">
<el-form-item :label="t('common.keyword')">
<el-input
v-model="keyword"
:placeholder="t('user.filter.username_ph')"
clearable
style="width: 180px"
@keyup.enter="onSearch"
/>
</el-form-item>
<el-form-item :label="t('common.status')">
<el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
<el-option :label="t('user.status.ACTIVE')" value="ACTIVE" />
<el-option :label="t('user.status.SUSPENDED')" value="SUSPENDED" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">{{ t('common.search') }}</el-button>
</el-form-item>
</el-form>
<div v-if="actions?.canCreatePlayer" class="list-chrome__actions">
<el-button type="primary" @click="actions?.openCreatePlayer(agentId)">
{{ t('user.create_btn') }}
</el-button>
</div>
</div>
<AdminTableWrap>
<el-table v-loading="loading" :data="players" stripe class="inner-table">
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column
type="index"
:index="(i: number) => (page - 1) * pageSize + i + 1"
:label="t('common.seq')"
width="70"
align="center"
/>
<el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
<el-table-column :label="t('common.status')" min-width="128">
<template #default="{ row }">
<AdminPlayerStatusCell :status="row.status" :is-online="row.isOnline" />
</template>
</el-table-column>
<el-table-column :label="t('user.col.invite_code')" min-width="96" show-overflow-tooltip>
<template #default="{ row }">
<code v-if="row.inviteCode" class="invite-code-cell">{{ row.inviteCode }}</code>
<span v-else>—</span>
</template>
</el-table-column>
<el-table-column :label="t('user.col.balance')" min-width="120" align="right">
<template #default="{ row }">
<el-tooltip
:content="`${formatAmountFull(row.availableBalance)} / ${formatAmountFull(row.frozenBalance)}`"
placement="top"
>
<span class="amount-compact">
{{ formatAmount(row.availableBalance) }} / {{ formatAmount(row.frozenBalance) }}
</span>
</el-tooltip>
</template>
</el-table-column>
<el-table-column prop="betCount" :label="t('user.col.bets')" width="56" align="center" />
<el-table-column :label="t('user.col.stake_payout')" min-width="100" align="right">
<template #default="{ row }">
<span class="amount-compact">
{{ formatAmount(row.totalStake) }} / {{ formatAmount(row.totalReturn) }}
</span>
</template>
</el-table-column>
<el-table-column v-if="actions" :label="t('common.actions')" min-width="320" align="center">
<template #default="{ row }">
<AdminPlayerRowActions
v-bind="actions.playerActionFlags"
:row="row"
@detail="actions.openDetailPlayer(row.id)"
@ledger="actions.openPlayerWalletLedger(row.id, row.username)"
@edit="actions.openEditPlayer(row.id)"
@deposit="actions.openTransfer('deposit', row)"
@withdraw="actions.openTransfer('withdraw', row)"
@freeze="actions.toggleFreezePlayer(row)"
@delete="actions.deletePlayer(row)"
/>
</template>
</el-table-column>
</el-table>
</AdminTableWrap>
<div class="pager">
<el-pagination
v-model:current-page="page"
v-model:page-size="pageSize"
:total="total"
:page-sizes="[10, 20, 50, 100]"
layout="total, sizes, prev, pager, next"
background
@current-change="onPageChange"
@size-change="onSizeChange"
/>
</div>
</section>
</div>
</template>
<style scoped>
.agent-direct-players-page {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.agent-direct-players-page :deep(.admin-subnav) {
margin-bottom: 10px;
}
.agent-direct-players-page .list-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.agent-direct-players-page .player-list-panel :deep(.admin-table-wrap) {
flex: 1;
min-height: 0;
}
.agent-direct-players-page .inner-table {
height: 100%;
}
</style>

368
apps/admin/src/views/agent/GlobalSettingsView.vue Normal file
View File

@@ -0,0 +1,368 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import { usePermissions } from '../../composables/usePermissions';
import { AdminPerm } from '../../constants/permissions';
import api from '../../api';
import { clearStaffSession } from '../../stores/auth';
import AdminSubNav from '../../components/AdminSubNav.vue';
import RatePercentInput from '../../components/RatePercentInput.vue';
import { percentToDecimalRate, decimalRateToPercent } from '../../utils/rate-percent';
defineOptions({ name: 'AdminGlobalSettingsView' });
const { t } = useAdminLocale();
const router = useRouter();
const { hasPermission } = usePermissions();
const canManageSettings = hasPermission(AdminPerm.settings);
const playerSettings = ref({ allowPasswordChange: true, allowUsernameChange: false });
const bettingLimits = ref({
minStake: 1,
maxStakeSingle: 50000,
maxStakeParlay: 20000,
maxPayoutSingle: 500000,
maxPayoutParlay: 1000000,
dailyStakeLimit: 200000,
});
const hierarchySettings = ref({ maxAgentLevel: 0 });
const platformDirectRate = ref(0);
const adminInviteRate = ref(0);
const resetAllowed = ref(false);
const resetConfirmPhrase = ref('');
const settingsSaving = ref(false);
const limitsSaving = ref(false);
const hierarchySaving = ref(false);
const platformDirectSaving = ref(false);
const resetLoading = ref(false);
const loading = ref(false);
async function loadSettings() {
loading.value = true;
try {
const { data } = await api.get('/admin/users/page-init');
const payload = data.data as {
playerSettings?: typeof playerSettings.value;
bettingLimits?: typeof bettingLimits.value;
hierarchySettings?: { maxAgentLevel: number };
platformDirect?: { platformDirectRate?: number | string; adminInviteRate?: number | string };
};
if (payload.playerSettings) playerSettings.value = payload.playerSettings;
if (payload.bettingLimits) bettingLimits.value = payload.bettingLimits;
if (payload.hierarchySettings) {
hierarchySettings.value = {
maxAgentLevel: payload.hierarchySettings.maxAgentLevel ?? 0,
};
}
if (payload.platformDirect) {
platformDirectRate.value = decimalRateToPercent(payload.platformDirect.platformDirectRate ?? 0);
adminInviteRate.value = decimalRateToPercent(
payload.platformDirect.adminInviteRate ?? payload.platformDirect.platformDirectRate ?? 0,
);
}
} catch {
/* keep defaults */
} finally {
loading.value = false;
}
}
async function loadResetDatabaseStatus() {
try {
const { data } = await api.get('/admin/system/reset-database');
resetAllowed.value = !!data.data?.allowed;
} catch {
resetAllowed.value = false;
}
}
async function savePlayerSettings() {
settingsSaving.value = true;
try {
const { data } = await api.put('/admin/users/settings/account', playerSettings.value);
playerSettings.value = data.data;
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
} finally {
settingsSaving.value = false;
}
}
async function saveHierarchySettings() {
hierarchySaving.value = true;
try {
const { data } = await api.put('/admin/agents/settings/hierarchy', hierarchySettings.value);
hierarchySettings.value = { maxAgentLevel: data.data?.maxAgentLevel ?? hierarchySettings.value.maxAgentLevel };
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
} finally {
hierarchySaving.value = false;
}
}
async function savePlatformDirectSettings() {
platformDirectSaving.value = true;
try {
const { data } = await api.put('/admin/settings/cashback/platform-direct', {
platformDirectRate: percentToDecimalRate(platformDirectRate.value),
adminInviteRate: percentToDecimalRate(adminInviteRate.value),
});
const payload = data.data as { platformDirectRate?: number | string; adminInviteRate?: number | string };
platformDirectRate.value = decimalRateToPercent(payload?.platformDirectRate ?? 0);
adminInviteRate.value = decimalRateToPercent(payload?.adminInviteRate ?? payload?.platformDirectRate ?? 0);
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
} finally {
platformDirectSaving.value = false;
}
}
async function saveBettingLimits() {
limitsSaving.value = true;
try {
const { data } = await api.put('/admin/settings/betting-limits', bettingLimits.value);
bettingLimits.value = data.data;
ElMessage.success(t('msg.saved'));
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
} finally {
limitsSaving.value = false;
}
}
async function resetDatabase() {
if (resetConfirmPhrase.value !== 'RESET') {
ElMessage.warning(t('user.reset_database_confirm_label'));
return;
}
try {
await ElMessageBox.confirm(t('user.reset_database_hint'), t('user.reset_database'), {
type: 'warning',
confirmButtonText: t('user.reset_database_btn'),
cancelButtonText: t('common.cancel'),
});
} catch {
return;
}
resetLoading.value = true;
try {
const { data } = await api.post('/admin/system/reset-database', { confirmPhrase: 'RESET' });
const accounts: string[] = data.data?.demoAccounts ?? [];
ElMessage.success({
message: `${t('user.reset_database_success')}\n${t('user.reset_database_accounts')}: ${accounts.join(' · ')}`,
duration: 8000,
});
clearStaffSession();
await router.push('/login');
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
} finally {
resetLoading.value = false;
}
}
onMounted(() => {
if (!canManageSettings) {
void router.replace('/users');
return;
}
void Promise.all([loadSettings(), loadResetDatabaseStatus()]);
});
</script>
<template>
<div v-loading="loading" class="admin-list-page global-settings-page">
<AdminSubNav :title="t('user.page_settings')" />
<section class="global-settings-panel">
<div class="list-settings-block">
<p class="list-settings-title">{{ t('user.global_settings') }}</p>
<el-form inline size="small" class="settings-form">
<el-form-item :label="t('user.field.allow_password_change')">
<el-switch v-model="playerSettings.allowPasswordChange" :loading="settingsSaving" @change="savePlayerSettings" />
</el-form-item>
<el-form-item :label="t('user.field.allow_username_change')">
<el-switch v-model="playerSettings.allowUsernameChange" :loading="settingsSaving" @change="savePlayerSettings" />
</el-form-item>
</el-form>
</div>
<div class="list-settings-block">
<p class="list-settings-title">{{ t('agent.hierarchy.settings_title') }}</p>
<p class="list-settings-hint">{{ t('agent.hierarchy.settings_hint') }}</p>
<el-form inline size="small" class="settings-form">
<el-form-item :label="t('agent.hierarchy.max_level')">
<el-input-number
v-model="hierarchySettings.maxAgentLevel"
:min="0"
:step="1"
controls-position="right"
:disabled="hierarchySaving"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="hierarchySaving" @click="saveHierarchySettings">
{{ t('common.save') }}
</el-button>
</el-form-item>
</el-form>
</div>
<div class="list-settings-block">
<p class="list-settings-title">{{ t('cashback.settings_title') }}</p>
<el-form inline size="small" class="settings-form">
<el-form-item :label="t('cashback.platform_direct_default_rate')">
<RatePercentInput v-model="platformDirectRate" />
</el-form-item>
<p class="list-settings-hint block-hint">{{ t('cashback.platform_direct_default_hint') }}</p>
<el-form-item :label="t('cashback.admin_invite_default_rate')">
<RatePercentInput v-model="adminInviteRate" />
</el-form-item>
<p class="list-settings-hint block-hint">{{ t('cashback.admin_invite_default_hint') }}</p>
<el-form-item>
<el-button type="primary" :loading="platformDirectSaving" @click="savePlatformDirectSettings">
{{ t('common.save') }}
</el-button>
</el-form-item>
</el-form>
</div>
<div class="list-settings-block">
<p class="list-settings-title">{{ t('user.betting_limits') }}</p>
<el-form inline size="small" class="settings-form limits-form">
<el-form-item :label="t('user.limit.min_stake')">
<el-input-number v-model="bettingLimits.minStake" :min="0" :step="1" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_stake_single')">
<el-input-number v-model="bettingLimits.maxStakeSingle" :min="0" :step="100" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_stake_parlay')">
<el-input-number v-model="bettingLimits.maxStakeParlay" :min="0" :step="100" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_payout_single')">
<el-input-number v-model="bettingLimits.maxPayoutSingle" :min="0" :step="1000" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.max_payout_parlay')">
<el-input-number v-model="bettingLimits.maxPayoutParlay" :min="0" :step="1000" controls-position="right" />
</el-form-item>
<el-form-item :label="t('user.limit.daily_stake')">
<el-input-number v-model="bettingLimits.dailyStakeLimit" :min="0" :step="1000" controls-position="right" />
</el-form-item>
<el-form-item>
<el-button type="primary" :loading="limitsSaving" @click="saveBettingLimits">
{{ t('common.save') }}
</el-button>
</el-form-item>
</el-form>
</div>
<div class="list-settings-block list-settings-block--danger">
<p class="list-settings-title">{{ t('user.reset_database') }}</p>
<p class="list-settings-hint">{{ t('user.reset_database_hint') }}</p>
<el-alert
v-if="!resetAllowed"
type="warning"
:closable="false"
show-icon
class="reset-db-alert"
:title="t('user.reset_database_disabled_prod')"
/>
<el-form inline size="small" class="settings-form reset-db-form">
<el-form-item :label="t('user.reset_database_confirm_label')">
<el-input
v-model="resetConfirmPhrase"
:placeholder="t('user.reset_database_confirm_ph')"
style="width: 160px"
:disabled="!resetAllowed"
autocomplete="off"
/>
</el-form-item>
<el-form-item>
<el-button
type="danger"
plain
:loading="resetLoading"
:disabled="!resetAllowed || resetConfirmPhrase !== 'RESET'"
@click="resetDatabase"
>
{{ t('user.reset_database_btn') }}
</el-button>
</el-form-item>
</el-form>
</div>
</section>
</div>
</template>
<style scoped>
.global-settings-page {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.global-settings-page :deep(.admin-subnav) {
margin-bottom: 10px;
}
.global-settings-panel {
flex: 1;
min-height: 0;
overflow: auto;
padding: 12px 14px 16px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--bg-card);
}
.list-settings-block + .list-settings-block {
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--border-soft);
}
.list-settings-title {
font-size: 13px;
font-weight: 600;
color: var(--text);
margin: 0 0 8px;
}
.list-settings-hint {
font-size: 12px;
color: var(--text-muted);
margin: 0 0 10px;
line-height: 1.5;
}
.block-hint {
width: 100%;
margin-top: -4px;
}
.list-settings-block--danger {
border-top: 1px dashed var(--danger-border);
}
.reset-db-alert {
margin-bottom: 10px;
}
.limits-form {
display: flex;
flex-wrap: wrap;
gap: 4px 12px;
}
</style>

254
apps/admin/src/views/matches/LeagueMatchesPage.vue Normal file
View File

@@ -0,0 +1,254 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import { resolveFormError } from '../../i18n/form-validation';
import api from '../../api';
import AdminSubNav from '../../components/AdminSubNav.vue';
import CountryFlagSelect from '../../components/outright/CountryFlagSelect.vue';
import LogoUrlField from '../../components/LogoUrlField.vue';
import LeagueMatchesPanel from './LeagueMatchesPanel.vue';
import { getBuiltinCountry } from '../../data/builtinCountries';
import {
emptyMatchForm,
buildPlatformPayload,
fillBuiltinTeam,
clearBuiltinTeam,
type MatchCreateForm,
} from '../match-form';
defineOptions({ name: 'AdminLeagueMatches' });
const route = useRoute();
const { t } = useAdminLocale();
const leagueId = computed(() => String(route.params.leagueId ?? ''));
const filterStatus = computed(() => String(route.query.status ?? ''));
const filterKeyword = computed(() => String(route.query.keyword ?? ''));
const leagueTitle = computed(() => {
const title = String(route.query.title ?? '').trim();
return title || `#${leagueId.value}`;
});
const panelRef = ref<{ reload: () => void } | null>(null);
const createVisible = ref(false);
const createLoading = ref(false);
const form = ref<MatchCreateForm>(emptyMatchForm());
function openCreateFixture() {
form.value = emptyMatchForm();
form.value.leagueId = leagueId.value;
createVisible.value = true;
}
function onTeamCodeChange(side: 'home' | 'away', code: string) {
if (!code?.trim()) {
clearBuiltinTeam(form.value, side);
return;
}
const country = getBuiltinCountry(code);
if (country) fillBuiltinTeam(form.value, side, country);
}
async function submitCreate() {
let payload: ReturnType<typeof buildPlatformPayload>;
try {
payload = buildPlatformPayload(form.value);
} catch (e) {
ElMessage.warning(resolveFormError(e, t));
return;
}
createLoading.value = true;
try {
await api.post('/admin/matches', payload);
ElMessage.success(t('msg.match_created_draft'));
createVisible.value = false;
panelRef.value?.reload();
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.create_failed'));
} finally {
createLoading.value = false;
}
}
watch(leagueId, () => {
form.value.leagueId = leagueId.value;
}, { immediate: true });
</script>
<template>
<div class="admin-list-page league-matches-page">
<AdminSubNav
:title="leagueTitle"
:subtitle="t('match.league_fixtures_subtitle')"
>
<template #extra>
<el-button type="primary" @click="openCreateFixture">
{{ t('match.create_fixture_btn') }}
</el-button>
</template>
</AdminSubNav>
<section class="list-panel">
<LeagueMatchesPanel
ref="panelRef"
:league-id="leagueId"
:filter-status="filterStatus"
:keyword="filterKeyword"
/>
</section>
<el-dialog
v-model="createVisible"
:title="t('match.dialog.create_fixture')"
width="860px"
destroy-on-close
>
<el-form label-width="96px">
<el-form-item :label="t('match.col.league')">
<span class="league-readonly">{{ leagueTitle }}</span>
</el-form-item>
<el-form-item :label="t('match.field.kickoff')" required>
<el-date-picker
v-model="form.startTime"
type="datetime"
value-format="YYYY-MM-DDTHH:mm:ss"
:placeholder="t('matchEditor.ph.kickoff')"
style="width: 100%"
/>
<p class="field-hint schedule-timezone-hint">{{ t('match.timezone.platform_hint') }}</p>
</el-form-item>
<div class="teams-row">
<div class="team-col">
<div class="team-col-title">{{ t('match.field.home_team') }}</div>
<el-form-item :label="t('match.field.home_team')" required>
<CountryFlagSelect
v-model="form.homeTeamCode"
size="default"
class="team-country-select"
@update:model-value="onTeamCodeChange('home', $event)"
/>
</el-form-item>
<el-form-item :label="t('match.field.home_en')" label-width="108px">
<el-input v-model="form.homeTeamEn" :placeholder="t('match.ph.home_en')" />
</el-form-item>
<el-form-item :label="t('match.field.home_zh')" label-width="108px">
<el-input v-model="form.homeTeamZh" :placeholder="t('match.ph.home_zh')" />
</el-form-item>
<el-form-item :label="t('match.field.home_ms')" label-width="108px">
<el-input v-model="form.homeTeamMs" :placeholder="t('match.ph.home_ms')" />
</el-form-item>
<el-form-item :label="t('matchEditor.field.home_logo')" label-width="108px">
<LogoUrlField v-model="form.homeTeamLogoUrl" :team-code="form.homeTeamCode" upload-category="teams" />
</el-form-item>
</div>
<div class="team-col">
<div class="team-col-title">{{ t('match.field.away_team') }}</div>
<el-form-item :label="t('match.field.away_team')" required>
<CountryFlagSelect
v-model="form.awayTeamCode"
size="default"
class="team-country-select"
@update:model-value="onTeamCodeChange('away', $event)"
/>
</el-form-item>
<el-form-item :label="t('match.field.away_en')" label-width="108px">
<el-input v-model="form.awayTeamEn" :placeholder="t('match.ph.away_en')" />
</el-form-item>
<el-form-item :label="t('match.field.away_zh')" label-width="108px">
<el-input v-model="form.awayTeamZh" :placeholder="t('match.ph.away_zh')" />
</el-form-item>
<el-form-item :label="t('match.field.away_ms')" label-width="108px">
<el-input v-model="form.awayTeamMs" :placeholder="t('match.ph.away_ms')" />
</el-form-item>
<el-form-item :label="t('matchEditor.field.away_logo')" label-width="108px">
<LogoUrlField v-model="form.awayTeamLogoUrl" :team-code="form.awayTeamCode" upload-category="teams" />
</el-form-item>
</div>
</div>
<el-form-item :label="t('match.field.featured')">
<el-switch v-model="form.isHot" />
</el-form-item>
<p class="field-hint">{{ t('match.hint.create_draft') }}</p>
</el-form>
<template #footer>
<el-button @click="createVisible = false">{{ t('common.cancel') }}</el-button>
<el-button type="primary" :loading="createLoading" @click="submitCreate">
{{ t('user.btn.create') }}
</el-button>
</template>
</el-dialog>
</div>
</template>
<style scoped>
.league-matches-page {
display: flex;
flex-direction: column;
gap: 0;
height: 100%;
min-height: 0;
}
.league-matches-page .list-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
}
.team-country-select {
width: 100%;
}
.teams-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 20px;
}
.team-col {
display: flex;
flex-direction: column;
min-width: 0;
padding: 12px;
border: 1px solid var(--border-soft);
border-radius: 8px;
background: #fbfaf7;
}
.team-col-title {
font-size: 14px;
font-weight: 750;
color: var(--text);
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-soft);
}
.field-hint {
font-size: 12px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.schedule-timezone-hint {
margin-top: 4px;
}
.league-readonly {
color: var(--success-text);
font-weight: 700;
}
@media (max-width: 760px) {
.teams-row {
grid-template-columns: 1fr;
gap: 12px;
}
}
</style>

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

@@ -1,21 +1,33 @@
<script setup lang="ts">
import { ref, watch, h } from 'vue';
import { ref, watch, h, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, ElMessageBox, ElDatePicker } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import api from '../../api';
import MatchArchiveDialog from '../../components/MatchArchiveDialog.vue';
import { ensureLeagueExpanded } from '../../utils/matchesListState';
import { formatAmount } from '../../utils/format-amount';
import {
formatPlatformMatchDateTime,
platformPickerDateTimeToIso,
} from '@thebet365/shared';
const props = defineProps<{
leagueId: string;
filterStatus: string;
keyword: string;
}>();
const MatchEventEditor = defineAsyncComponent(
() => import('./MatchEventEditor.vue'),
);
const MatchMarketsPanel = defineAsyncComponent(
() => import('./MatchMarketsPanel.vue'),
);
const props = withDefaults(
defineProps<{
leagueId: string;
filterStatus?: string;
keyword?: string;
}>(),
{
filterStatus: '',
keyword: '',
},
);
const emit = defineEmits<{
changed: [];
@@ -27,13 +39,15 @@ const router = useRouter();
const archiveVisible = ref(false);
const archiveMatchId = ref('');
const archiveTitle = ref('');
const manageDialogVisible = ref(false);
const marketsDialogVisible = ref(false);
const dialogMatchId = ref('');
const dialogMatchTitle = ref('');
const filterHasBets = ref(false);
const orderBy = ref('default');
function onFilterChange() {
matchPage.value = 1;
void load();
}
const localKeyword = ref('');
const localStatus = ref('');
const kickoffRange = ref<[string, string] | null>(null);
const matches = ref<unknown[]>([]);
const loading = ref(false);
@@ -42,18 +56,67 @@ const matchPageSize = ref(10);
const matchTotal = ref(0);
let loadTimer: ReturnType<typeof setTimeout> | null = null;
watch(
() => props.keyword,
(value) => {
localKeyword.value = value ?? '';
scheduleLoad(true);
},
{ immediate: true },
);
watch(
() => props.filterStatus,
(value) => {
localStatus.value = value ?? '';
scheduleLoad(true);
},
{ immediate: true },
);
watch(
() => props.leagueId,
() => scheduleLoad(true),
{ immediate: true },
);
function onSearch() {
matchPage.value = 1;
void load();
}
function onFilterChange() {
matchPage.value = 1;
void load();
}
function resetFilters() {
localKeyword.value = '';
localStatus.value = '';
kickoffRange.value = null;
filterHasBets.value = false;
orderBy.value = 'default';
onFilterChange();
}
async function load() {
loading.value = true;
try {
const { data } = await api.get(`/admin/leagues/${props.leagueId}/matches`, {
params: {
status: props.filterStatus || undefined,
keyword: props.keyword.trim() || undefined,
status: localStatus.value || undefined,
keyword: localKeyword.value.trim() || undefined,
locale: locale.value,
page: matchPage.value,
pageSize: matchPageSize.value,
hasBets: filterHasBets.value ? 'true' : undefined,
orderBy: orderBy.value !== 'default' ? orderBy.value : undefined,
startFrom: kickoffRange.value?.[0]
? platformPickerDateTimeToIso(kickoffRange.value[0])
: undefined,
startTo: kickoffRange.value?.[1]
? platformPickerDateTimeToIso(kickoffRange.value[1])
: undefined,
},
});
const payload = data.data as {
@@ -75,6 +138,7 @@ async function load() {
}
function scheduleLoad(resetPage = false) {
if (!props.leagueId) return;
if (resetPage) matchPage.value = 1;
if (loadTimer) clearTimeout(loadTimer);
loadTimer = setTimeout(() => {
@@ -83,12 +147,6 @@ function scheduleLoad(resetPage = false) {
}, 200);
}
watch(
() => [props.leagueId, props.filterStatus, props.keyword] as const,
() => scheduleLoad(true),
{ immediate: true },
);
function onMatchPageChange(page: number) {
matchPage.value = page;
void load();
@@ -146,23 +204,28 @@ async function close(id: string) {
notifyParent();
}
function beforeLeaveList() {
ensureLeagueExpanded(props.leagueId);
function openManage(id: string, title?: string) {
dialogMatchId.value = id;
dialogMatchTitle.value = title?.trim() || `#${id}`;
manageDialogVisible.value = true;
}
function openManage(id: string) {
beforeLeaveList();
router.push(`/matches/${id}/edit`);
function openMarkets(id: string, title?: string) {
dialogMatchId.value = id;
dialogMatchTitle.value = title?.trim() || `#${id}`;
marketsDialogVisible.value = true;
}
function openMarkets(id: string) {
beforeLeaveList();
router.push(`/matches/${id}/markets`);
function onManageSaved() {
manageDialogVisible.value = false;
notifyParent();
}
function settle(id: string) {
beforeLeaveList();
router.push(`/settlement/${id}`);
void router.push({
path: `/settlement/${id}`,
query: { returnTo: `/matches/leagues/${props.leagueId}` },
});
}
type TagType = '' | 'info' | 'success' | 'warning' | 'danger';
@@ -339,14 +402,68 @@ defineExpose({ reload: load });
<template>
<div class="league-matches-panel">
<div class="nested-panel-toolbar">
<el-checkbox v-model="filterHasBets" size="default" @change="onFilterChange">
{{ t('match.filter.has_bets') }}
</el-checkbox>
<el-select v-model="orderBy" size="small" style="width: 140px;" @change="onFilterChange">
<el-option :label="t('match.sort.default')" value="default" />
<el-option :label="t('match.sort.bet_count')" value="betCount" />
<el-option :label="t('match.sort.total_stake')" value="totalStake" />
</el-select>
<div class="nested-panel-toolbar__filters">
<div class="nested-panel-toolbar__field">
<span class="nested-panel-toolbar__label">{{ t('common.keyword') }}</span>
<el-input
v-model="localKeyword"
:placeholder="t('match.filter.keyword_ph')"
clearable
size="small"
style="width: 168px"
@keyup.enter="onSearch"
/>
</div>
<div class="nested-panel-toolbar__field">
<span class="nested-panel-toolbar__label">{{ t('common.status') }}</span>
<el-select
v-model="localStatus"
:placeholder="t('common.all')"
clearable
size="small"
style="width: 120px"
@change="onFilterChange"
>
<el-option :label="t('match.status.DRAFT')" value="DRAFT" />
<el-option :label="t('match.status.PUBLISHED')" value="PUBLISHED" />
<el-option :label="t('match.status.CLOSED')" value="CLOSED" />
<el-option :label="t('match.status.PENDING_SETTLEMENT')" value="PENDING_SETTLEMENT" />
<el-option :label="t('match.status.SETTLED')" value="SETTLED" />
</el-select>
</div>
<div class="nested-panel-toolbar__field nested-panel-toolbar__field--range">
<span class="nested-panel-toolbar__label">{{ t('match.field.kickoff') }}</span>
<el-date-picker
v-model="kickoffRange"
type="datetimerange"
value-format="YYYY-MM-DDTHH:mm:ss"
:start-placeholder="t('match.filter.kickoff_from')"
:end-placeholder="t('match.filter.kickoff_to')"
size="small"
clearable
style="width: 320px"
@change="onFilterChange"
/>
</div>
<el-button type="primary" size="small" @click="onSearch">
{{ t('common.search') }}
</el-button>
<el-button size="small" @click="resetFilters">
{{ t('common.reset') }}
</el-button>
</div>
<div class="nested-panel-toolbar__extras">
<el-checkbox v-model="filterHasBets" size="default" @change="onFilterChange">
{{ t('match.filter.has_bets') }}
</el-checkbox>
<el-select v-model="orderBy" size="small" style="width: 148px;" @change="onFilterChange">
<el-option :label="t('match.sort.default')" value="default" />
<el-option :label="t('match.sort.kickoff_asc')" value="kickoffAsc" />
<el-option :label="t('match.sort.kickoff_desc')" value="kickoffDesc" />
<el-option :label="t('match.sort.bet_count')" value="betCount" />
<el-option :label="t('match.sort.total_stake')" value="totalStake" />
</el-select>
</div>
</div>
<el-table v-loading="loading" :data="matches" stripe row-key="id" class="nested-match-table">
@@ -393,7 +510,7 @@ defineExpose({ reload: load });
size="small"
type="primary"
:disabled="!canManage(row)"
@click="openManage(matchId(row))"
@click.stop="openManage(matchId(row), matchTitle(row))"
>
{{ t('matchEditor.manage_btn') }}
</el-button>
@@ -403,7 +520,7 @@ defineExpose({ reload: load });
plain
class="action-btn--markets"
:disabled="!canManage(row)"
@click="openMarkets(matchId(row))"
@click.stop="openMarkets(matchId(row), matchTitle(row))"
>
{{ t('match.btn.markets') }}
</el-button>
@@ -482,6 +599,35 @@ defineExpose({ reload: load });
:title="archiveTitle"
@archived="onMatchArchived"
/>
<el-dialog
v-model="manageDialogVisible"
:title="`${t('matchEditor.title')} · ${dialogMatchTitle}`"
width="920px"
top="4vh"
destroy-on-close
append-to-body
class="match-manage-dialog"
>
<MatchEventEditor
v-if="manageDialogVisible && dialogMatchId"
:match-id-prop="dialogMatchId"
embedded
@saved="onManageSaved"
/>
</el-dialog>
<el-dialog
v-model="marketsDialogVisible"
:title="`${t('matchEditor.section_markets')} · ${dialogMatchTitle}`"
width="min(1200px, 96vw)"
top="3vh"
destroy-on-close
append-to-body
class="match-markets-dialog"
>
<div v-if="marketsDialogVisible && dialogMatchId" class="match-markets-dialog__body">
<MatchMarketsPanel :match-id="dialogMatchId" />
</div>
</el-dialog>
</div>
</template>
@@ -496,15 +642,41 @@ defineExpose({ reload: load });
}
.nested-panel-toolbar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 16px;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 10px 16px;
margin-bottom: 10px;
padding: 6px 12px;
padding: 8px 12px;
background: #ffffff;
border: 1px solid var(--border-soft, #eaeaea);
border-radius: 6px;
}
.nested-panel-toolbar__filters,
.nested-panel-toolbar__extras {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
}
.nested-panel-toolbar__field {
display: inline-flex;
align-items: center;
gap: 6px;
}
.nested-panel-toolbar__field--range {
min-width: 0;
}
.nested-panel-toolbar__label {
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
white-space: nowrap;
}
.nested-pager {
display: flex;
justify-content: flex-end;
@@ -646,4 +818,9 @@ defineExpose({ reload: load });
justify-content: flex-start;
}
}
.match-markets-dialog__body {
height: min(78vh, 900px);
overflow: hidden;
}
</style>

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

@@ -1,6 +1,6 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import api from '../../api';
@@ -50,6 +50,7 @@ const emit = defineEmits<{
const { t, locale } = useAdminLocale();
const router = useRouter();
const route = useRoute();
const matchStatus = ref('');
@@ -226,7 +227,14 @@ function goSettle() {
);
return;
}
void router.push(`/settlement/${matchId.value}`);
const title = String(route.query.title ?? '').trim();
void router.push({
path: `/settlement/${matchId.value}`,
query: {
returnTo: `/matches/outrights/leagues/${props.leagueId}`,
...(title ? { title } : {}),
},
});
}
async function load() {
@@ -900,18 +908,20 @@ watch(
.outright-odds-panel {
display: flex;
flex-direction: column;
padding: 12px 16px 16px;
border-bottom: 1px solid var(--border-soft);
flex: 1;
min-height: 0;
height: 100%;
padding: 10px 12px 12px;
background: #fbfaf7;
}
.outright-odds-panel__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
gap: 10px;
flex-wrap: wrap;
flex-shrink: 0;
margin-bottom: 12px;
margin-bottom: 8px;
}
.outright-odds-panel__head-text {
flex: 1;
@@ -986,7 +996,8 @@ watch(
}
.team-list-scroll {
max-height: min(440px, calc(100vh - 300px));
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
@@ -1005,7 +1016,13 @@ watch(
.team-list {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
gap: 6px;
}
@media (min-width: 1440px) {
.team-list {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.team-row-wrap {
@@ -1027,7 +1044,7 @@ watch(
gap: 8px;
min-width: 0;
flex: 1;
padding: 8px 10px 8px 8px;
padding: 6px 8px 6px 6px;
background: #ffffff;
border: 1px solid var(--border);
border-radius: 8px;

53
apps/admin/src/views/matches/LeagueOutrightsPage.vue Normal file
View File

@@ -0,0 +1,53 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';
import { useAdminLocale } from '../../composables/useAdminLocale';
import AdminSubNav from '../../components/AdminSubNav.vue';
import LeagueOutrightOddsPanel from './LeagueOutrightOddsPanel.vue';
defineOptions({ name: 'AdminLeagueOutrights' });
const route = useRoute();
const { t } = useAdminLocale();
const leagueId = computed(() => String(route.params.leagueId ?? ''));
const leagueTitle = computed(() => {
const title = String(route.query.title ?? '').trim();
return title || `#${leagueId.value}`;
});
</script>
<template>
<div class="admin-list-page league-outrights-page">
<AdminSubNav
:title="leagueTitle"
:subtitle="t('match.league_outrights_subtitle')"
/>
<section class="list-panel">
<LeagueOutrightOddsPanel :league-id="leagueId" />
</section>
</div>
</template>
<style scoped>
.league-outrights-page {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.league-outrights-page :deep(.admin-subnav) {
margin-bottom: 10px;
}
.league-outrights-page .list-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0;
}
</style>

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

@@ -16,11 +16,23 @@ import {
} from '../match-form';
import AdminSubNav from '../../components/AdminSubNav.vue';
const props = withDefaults(
defineProps<{
matchIdProp?: string;
embedded?: boolean;
}>(),
{ embedded: false },
);
const emit = defineEmits<{
saved: [];
}>();
const route = useRoute();
const router = useRouter();
const { t } = useAdminLocale();
const matchId = computed(() => String(route.params.matchId ?? ''));
const matchId = computed(() => props.matchIdProp ?? String(route.params.matchId ?? ''));
const loading = ref(false);
const savingMeta = ref(false);
const status = ref('DRAFT');
@@ -52,7 +64,7 @@ async function load() {
const detail = data.data as AdminMatchDetail;
if (detail.isOutright) {
ElMessage.warning(t('msg.outright_no_edit'));
router.replace('/matches');
if (!props.embedded) router.replace('/matches');
return;
}
status.value = detail.status;
@@ -81,7 +93,8 @@ async function saveMeta() {
try {
await api.put(`/admin/matches/${matchId.value}`, payload);
ElMessage.success(t('msg.saved'));
await load();
emit('saved');
if (!props.embedded) await load();
} catch (e: unknown) {
const err = e as { response?: { data?: { error?: string } } };
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
@@ -92,8 +105,13 @@ async function saveMeta() {
</script>
<template>
<div v-loading="loading" class="match-editor-page page-scroll">
<div
v-loading="loading"
class="match-editor-page"
:class="{ 'match-editor-page--embedded': embedded, 'page-scroll': !embedded }"
>
<AdminSubNav
v-if="!embedded"
:title="t('matchEditor.title')"
:subtitle="`#${matchId}`"
>
@@ -257,6 +275,12 @@ async function saveMeta() {
color: var(--text);
}
.match-editor-page--embedded {
padding-bottom: 0;
max-height: min(78vh, 880px);
overflow-y: auto;
}
.panel {
background: #ffffff;
border: 1px solid var(--border);

6
apps/admin/src/views/outrights/OutrightEditRedirect.vue
View File

@@ -15,9 +15,13 @@ onMounted(async () => {
try {
const { data } = await api.get(`/admin/outrights/${matchId}`);
const leagueId = data.data?.leagueId as string | undefined;
if (leagueId) {
await router.replace(`/matches/outrights/leagues/${leagueId}`);
return;
}
await router.replace({
path: '/matches/outrights',
query: leagueId ? { leagueId } : { matchId },
query: { matchId },
});
} catch {
await router.replace('/matches/outrights');