feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化
管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。 API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -229,27 +229,63 @@ defineExpose({ reload: load });
|
||||
<span v-else class="bet-stat-zero">0</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('common.actions')" width="420" align="center">
|
||||
<el-table-column :label="t('common.actions')" width="460" align="center">
|
||||
<template #default="{ row }">
|
||||
<div class="action-btns">
|
||||
<el-button size="small" class="action-btn" :disabled="!canManage(row)" @click="openManage(matchId(row))">
|
||||
{{ t('matchEditor.manage_btn') }}
|
||||
</el-button>
|
||||
<el-button size="small" class="action-btn" :disabled="!canManage(row)" @click="openMarkets(matchId(row))">
|
||||
{{ t('match.btn.markets') }}
|
||||
</el-button>
|
||||
<el-button size="small" class="action-btn" :disabled="!canDeleteRow(row)" @click="confirmDelete(row)">
|
||||
<div class="action-group">
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!canManage(row)"
|
||||
@click="openManage(matchId(row))"
|
||||
>
|
||||
{{ t('matchEditor.manage_btn') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
plain
|
||||
:disabled="!canManage(row)"
|
||||
@click="openMarkets(matchId(row))"
|
||||
>
|
||||
{{ t('match.btn.markets') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="action-group">
|
||||
<el-button
|
||||
size="small"
|
||||
type="success"
|
||||
:disabled="!canPublishRow(row)"
|
||||
@click="publish(matchId(row))"
|
||||
>
|
||||
{{ t('common.publish') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="warning"
|
||||
:disabled="!canCloseRow(row)"
|
||||
@click="close(matchId(row))"
|
||||
>
|
||||
{{ t('common.close_betting') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
:disabled="!canSettleRow(row)"
|
||||
@click="settle(matchId(row))"
|
||||
>
|
||||
{{ t('common.settle') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
:disabled="!canDeleteRow(row)"
|
||||
@click="confirmDelete(row)"
|
||||
>
|
||||
{{ t('common.delete') }}
|
||||
</el-button>
|
||||
<el-button size="small" class="action-btn" :disabled="!canPublishRow(row)" @click="publish(matchId(row))">
|
||||
{{ t('common.publish') }}
|
||||
</el-button>
|
||||
<el-button size="small" class="action-btn" :disabled="!canCloseRow(row)" @click="close(matchId(row))">
|
||||
{{ t('common.close_betting') }}
|
||||
</el-button>
|
||||
<el-button size="small" class="action-btn" :disabled="!canSettleRow(row)" @click="settle(matchId(row))">
|
||||
{{ t('common.settle') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@@ -284,13 +320,23 @@ defineExpose({ reload: load });
|
||||
.action-btns {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
align-items: center;
|
||||
gap: 6px 8px;
|
||||
justify-content: center;
|
||||
}
|
||||
.action-btns :deep(.action-btn) {
|
||||
.action-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding: 2px 4px;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
.action-btns :deep(.el-button) {
|
||||
margin: 0 !important;
|
||||
min-width: 52px;
|
||||
padding: 4px 8px !important;
|
||||
padding: 4px 10px !important;
|
||||
font-size: 12px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
1051
apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
Normal file
1051
apps/admin/src/views/matches/LeagueOutrightOddsPanel.vue
Normal file
@@ -0,0 +1,1051 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, watch } from 'vue';
|
||||
import { ElMessage, ElMessageBox } from 'element-plus';
|
||||
import { useAdminLocale } from '../../composables/useAdminLocale';
|
||||
import api from '../../api';
|
||||
import {
|
||||
BUILTIN_COUNTRIES,
|
||||
countryFlagUrl,
|
||||
teamRowDisplayName,
|
||||
} from '../../data/builtinCountries';
|
||||
|
||||
interface SelectionRow {
|
||||
id: string;
|
||||
teamCode: string;
|
||||
rank: number;
|
||||
teamZh: string;
|
||||
teamEn: string;
|
||||
logoUrl: string | null;
|
||||
odds: string;
|
||||
status: string;
|
||||
editOdds: number;
|
||||
}
|
||||
|
||||
interface AddableTeam {
|
||||
teamCode: string;
|
||||
teamZh: string;
|
||||
teamEn: string;
|
||||
logoUrl: string | null;
|
||||
}
|
||||
|
||||
type AddFilter = 'fixture' | 'all';
|
||||
type SortKey = 'rank' | 'name' | 'code' | 'odds' | 'saved_odds';
|
||||
type SortDir = 'asc' | 'desc';
|
||||
|
||||
function teamFlagUrl(row: { teamCode: string; logoUrl?: string | null }): string {
|
||||
const custom = row.logoUrl?.trim();
|
||||
if (custom) return custom;
|
||||
return countryFlagUrl(row.teamCode);
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
leagueId: string;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
updated: [];
|
||||
}>();
|
||||
|
||||
const { t, locale } = useAdminLocale();
|
||||
|
||||
function teamDisplayName(row: { teamCode: string; teamZh: string; teamEn: string }) {
|
||||
return teamRowDisplayName(row, locale.value);
|
||||
}
|
||||
|
||||
const loading = ref(false);
|
||||
const savingOdds = ref(false);
|
||||
const adding = ref(false);
|
||||
const matchId = ref('');
|
||||
const selections = ref<SelectionRow[]>([]);
|
||||
const addableFixtureTeams = ref<AddableTeam[]>([]);
|
||||
|
||||
const addVisible = ref(false);
|
||||
const addFilter = ref<AddFilter>('fixture');
|
||||
const addSearch = ref('');
|
||||
const selectedCodes = ref<Set<string>>(new Set());
|
||||
const defaultOdds = ref(10);
|
||||
|
||||
const batchMode = ref(false);
|
||||
const batchSelectedIds = ref<Set<string>>(new Set());
|
||||
const batchOdds = ref(10);
|
||||
const batchRemoving = ref(false);
|
||||
|
||||
const sortBy = ref<SortKey>('rank');
|
||||
const sortDir = ref<SortDir>('asc');
|
||||
|
||||
const openTeamCodes = computed(
|
||||
() => new Set(selections.value.map((s) => s.teamCode.toUpperCase())),
|
||||
);
|
||||
|
||||
const allBuiltinAddable = computed<AddableTeam[]>(() =>
|
||||
BUILTIN_COUNTRIES.filter((c) => !openTeamCodes.value.has(c.code)).map((c) => ({
|
||||
teamCode: c.code,
|
||||
teamZh: c.nameZh,
|
||||
teamEn: c.nameEn,
|
||||
logoUrl: null,
|
||||
})),
|
||||
);
|
||||
|
||||
const sourceTeams = computed<AddableTeam[]>(() =>
|
||||
addFilter.value === 'fixture'
|
||||
? addableFixtureTeams.value
|
||||
: allBuiltinAddable.value,
|
||||
);
|
||||
|
||||
const visibleAddTeams = computed(() => {
|
||||
const q = addSearch.value.trim().toLowerCase();
|
||||
if (!q) return sourceTeams.value;
|
||||
return sourceTeams.value.filter(
|
||||
(team) =>
|
||||
team.teamCode.toLowerCase().includes(q) ||
|
||||
team.teamZh.toLowerCase().includes(q) ||
|
||||
team.teamEn.toLowerCase().includes(q),
|
||||
);
|
||||
});
|
||||
|
||||
const selectedCount = computed(() => selectedCodes.value.size);
|
||||
const batchSelectedCount = computed(() => batchSelectedIds.value.size);
|
||||
|
||||
const sortedSelections = computed(() => {
|
||||
const rows = [...selections.value];
|
||||
const dir = sortDir.value === 'asc' ? 1 : -1;
|
||||
const loc = locale.value;
|
||||
rows.sort((a, b) => {
|
||||
let cmp = 0;
|
||||
switch (sortBy.value) {
|
||||
case 'rank':
|
||||
cmp = a.rank - b.rank;
|
||||
break;
|
||||
case 'name':
|
||||
cmp = teamRowDisplayName(a, loc).localeCompare(teamRowDisplayName(b, loc), loc);
|
||||
break;
|
||||
case 'code':
|
||||
cmp = a.teamCode.localeCompare(b.teamCode);
|
||||
break;
|
||||
case 'odds':
|
||||
cmp = a.editOdds - b.editOdds;
|
||||
break;
|
||||
case 'saved_odds':
|
||||
cmp =
|
||||
(Number.parseFloat(a.odds) || 0) - (Number.parseFloat(b.odds) || 0);
|
||||
break;
|
||||
}
|
||||
if (cmp === 0) cmp = a.teamCode.localeCompare(b.teamCode);
|
||||
return cmp * dir;
|
||||
});
|
||||
return rows;
|
||||
});
|
||||
|
||||
async function load() {
|
||||
if (!props.leagueId) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get(`/admin/leagues/${props.leagueId}/outright`);
|
||||
const payload = data.data as {
|
||||
id: string;
|
||||
selections: Array<{
|
||||
id: string;
|
||||
teamCode: string;
|
||||
rank: number;
|
||||
teamZh: string;
|
||||
teamEn: string;
|
||||
logoUrl?: string | null;
|
||||
odds: string;
|
||||
status: string;
|
||||
}>;
|
||||
addableFixtureTeams?: AddableTeam[];
|
||||
};
|
||||
matchId.value = payload.id;
|
||||
addableFixtureTeams.value = payload.addableFixtureTeams ?? [];
|
||||
selections.value = (payload.selections ?? [])
|
||||
.filter((s) => s.status === 'OPEN')
|
||||
.map((s) => ({
|
||||
...s,
|
||||
logoUrl: s.logoUrl ?? null,
|
||||
editOdds: Number.parseFloat(s.odds) || 10,
|
||||
}));
|
||||
const openIds = new Set(selections.value.map((s) => s.id));
|
||||
batchSelectedIds.value = new Set(
|
||||
[...batchSelectedIds.value].filter((id) => openIds.has(id)),
|
||||
);
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
|
||||
function openAddDialog() {
|
||||
addFilter.value = 'fixture';
|
||||
addSearch.value = '';
|
||||
defaultOdds.value = 10;
|
||||
selectedCodes.value = new Set(
|
||||
addableFixtureTeams.value.map((team) => team.teamCode),
|
||||
);
|
||||
addVisible.value = true;
|
||||
}
|
||||
|
||||
function onAddFilterChange() {
|
||||
addSearch.value = '';
|
||||
if (addFilter.value === 'fixture') {
|
||||
selectedCodes.value = new Set(
|
||||
addableFixtureTeams.value.map((team) => team.teamCode),
|
||||
);
|
||||
} else {
|
||||
selectedCodes.value = new Set();
|
||||
}
|
||||
}
|
||||
|
||||
function toggleTeam(code: string) {
|
||||
const next = new Set(selectedCodes.value);
|
||||
if (next.has(code)) next.delete(code);
|
||||
else next.add(code);
|
||||
selectedCodes.value = next;
|
||||
}
|
||||
|
||||
function selectAllVisible() {
|
||||
selectedCodes.value = new Set(
|
||||
visibleAddTeams.value.map((team) => team.teamCode),
|
||||
);
|
||||
}
|
||||
|
||||
function clearSelection() {
|
||||
selectedCodes.value = new Set();
|
||||
}
|
||||
|
||||
function toggleBatchMode() {
|
||||
batchMode.value = !batchMode.value;
|
||||
if (!batchMode.value) batchSelectedIds.value = new Set();
|
||||
}
|
||||
|
||||
function toggleBatchSelect(id: string) {
|
||||
const next = new Set(batchSelectedIds.value);
|
||||
if (next.has(id)) next.delete(id);
|
||||
else next.add(id);
|
||||
batchSelectedIds.value = next;
|
||||
}
|
||||
|
||||
function selectAllBatch() {
|
||||
batchSelectedIds.value = new Set(selections.value.map((row) => row.id));
|
||||
}
|
||||
|
||||
function clearBatchSelection() {
|
||||
batchSelectedIds.value = new Set();
|
||||
}
|
||||
|
||||
function applyBatchOdds() {
|
||||
if (batchSelectedIds.value.size === 0) {
|
||||
ElMessage.warning(t('outright.batch.err_none'));
|
||||
return;
|
||||
}
|
||||
if (batchOdds.value <= 1) {
|
||||
ElMessage.warning(t('outright.err_odds_min'));
|
||||
return;
|
||||
}
|
||||
for (const row of selections.value) {
|
||||
if (batchSelectedIds.value.has(row.id)) row.editOdds = batchOdds.value;
|
||||
}
|
||||
ElMessage.success(
|
||||
t('outright.batch.apply_ok', { n: batchSelectedIds.value.size }),
|
||||
);
|
||||
}
|
||||
|
||||
async function batchRemove() {
|
||||
if (!matchId.value) return;
|
||||
if (batchSelectedIds.value.size === 0) {
|
||||
ElMessage.warning(t('outright.batch.err_none'));
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
t('outright.batch.confirm_remove', { n: batchSelectedIds.value.size }),
|
||||
{ type: 'warning' },
|
||||
);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
|
||||
batchRemoving.value = true;
|
||||
const ids = [...batchSelectedIds.value];
|
||||
let ok = 0;
|
||||
let fail = 0;
|
||||
try {
|
||||
for (const id of ids) {
|
||||
try {
|
||||
await api.delete(`/admin/outrights/${matchId.value}/selections/${id}`);
|
||||
ok++;
|
||||
} catch {
|
||||
fail++;
|
||||
}
|
||||
}
|
||||
if (fail === 0) {
|
||||
ElMessage.success(t('outright.batch.remove_ok', { n: ok }));
|
||||
} else {
|
||||
ElMessage.warning(t('outright.batch.remove_partial', { ok, fail }));
|
||||
}
|
||||
batchSelectedIds.value = new Set();
|
||||
await load();
|
||||
emit('updated');
|
||||
} finally {
|
||||
batchRemoving.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function saveOdds() {
|
||||
if (!matchId.value) return;
|
||||
for (const row of selections.value) {
|
||||
if (row.editOdds <= 1) {
|
||||
ElMessage.warning(t('outright.err_odds_min'));
|
||||
return;
|
||||
}
|
||||
}
|
||||
savingOdds.value = true;
|
||||
try {
|
||||
await api.put(`/admin/outrights/${matchId.value}/odds`, {
|
||||
updates: selections.value.map((row) => ({
|
||||
selectionId: row.id,
|
||||
odds: row.editOdds,
|
||||
})),
|
||||
});
|
||||
ElMessage.success(t('msg.outright_odds_saved'));
|
||||
await load();
|
||||
emit('updated');
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string } } };
|
||||
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
|
||||
} finally {
|
||||
savingOdds.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function submitAdd() {
|
||||
if (!matchId.value) return;
|
||||
if (selectedCodes.value.size === 0) {
|
||||
ElMessage.warning(t('outright.add.err_none'));
|
||||
return;
|
||||
}
|
||||
if (defaultOdds.value <= 1) {
|
||||
ElMessage.warning(t('outright.err_odds_min'));
|
||||
return;
|
||||
}
|
||||
|
||||
const byCode = new Map(
|
||||
[...addableFixtureTeams.value, ...allBuiltinAddable.value].map((team) => [
|
||||
team.teamCode,
|
||||
team,
|
||||
]),
|
||||
);
|
||||
|
||||
const items = [...selectedCodes.value]
|
||||
.map((code) => byCode.get(code))
|
||||
.filter((team): team is AddableTeam => !!team)
|
||||
.map((team) => ({
|
||||
teamCode: team.teamCode,
|
||||
teamZh: team.teamZh,
|
||||
teamEn: team.teamEn,
|
||||
logoUrl: team.logoUrl?.trim() || undefined,
|
||||
odds: defaultOdds.value,
|
||||
}));
|
||||
|
||||
if (!items.length) {
|
||||
ElMessage.warning(t('outright.add.err_none'));
|
||||
return;
|
||||
}
|
||||
|
||||
adding.value = true;
|
||||
try {
|
||||
const { data } = await api.post(
|
||||
`/admin/outrights/${matchId.value}/selections/batch`,
|
||||
{ items },
|
||||
);
|
||||
const batch = (data.data as { batchResult?: { added: number; skipped: number } })
|
||||
?.batchResult;
|
||||
if (batch) {
|
||||
ElMessage.success(
|
||||
t('msg.outright_teams_added', {
|
||||
n: batch.added,
|
||||
skipped: batch.skipped,
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
ElMessage.success(t('msg.saved'));
|
||||
}
|
||||
addVisible.value = false;
|
||||
selectedCodes.value = new Set();
|
||||
await load();
|
||||
emit('updated');
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string } } };
|
||||
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
|
||||
} finally {
|
||||
adding.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function removeSelection(row: SelectionRow) {
|
||||
if (!matchId.value) return;
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
t('outright.confirm_remove', { name: teamDisplayName(row) }),
|
||||
{ type: 'warning' },
|
||||
);
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
await api.delete(`/admin/outrights/${matchId.value}/selections/${row.id}`);
|
||||
ElMessage.success(t('msg.saved'));
|
||||
await load();
|
||||
emit('updated');
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string } } };
|
||||
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.leagueId,
|
||||
() => {
|
||||
void load();
|
||||
},
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="outright-odds-panel">
|
||||
<div class="outright-odds-panel__head">
|
||||
<p class="outright-odds-panel__hint">{{ t('outright.odds_only_hint') }}</p>
|
||||
<div class="outright-odds-panel__actions">
|
||||
<el-button
|
||||
v-if="selections.length"
|
||||
:type="batchMode ? 'warning' : 'default'"
|
||||
plain
|
||||
size="small"
|
||||
@click="toggleBatchMode"
|
||||
>
|
||||
{{ batchMode ? t('outright.batch.exit') : t('outright.batch.mode') }}
|
||||
</el-button>
|
||||
<el-button type="primary" plain size="small" @click="openAddDialog">
|
||||
{{ t('outright.btn.add_team') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="savingOdds"
|
||||
:disabled="selections.length === 0"
|
||||
@click="saveOdds"
|
||||
>
|
||||
{{ t('outright.btn.save_odds') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="batchMode && selections.length" class="outright-odds-panel__batch">
|
||||
<el-button size="small" link type="primary" @click="selectAllBatch">
|
||||
{{ t('outright.add.select_all') }}
|
||||
</el-button>
|
||||
<el-button size="small" link @click="clearBatchSelection">
|
||||
{{ t('outright.add.clear_selection') }}
|
||||
</el-button>
|
||||
<span class="outright-odds-panel__batch-count">
|
||||
{{ t('outright.add.selected_count', { n: batchSelectedCount }) }}
|
||||
</span>
|
||||
<label class="outright-odds-panel__batch-odds">
|
||||
{{ t('outright.add.default_odds') }}
|
||||
<el-input-number
|
||||
v-model="batchOdds"
|
||||
:min="1.01"
|
||||
:step="0.05"
|
||||
:precision="2"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
@click.stop
|
||||
/>
|
||||
</label>
|
||||
<el-button
|
||||
size="small"
|
||||
:disabled="batchSelectedCount === 0"
|
||||
@click="applyBatchOdds"
|
||||
>
|
||||
{{ t('outright.batch.apply_odds') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
size="small"
|
||||
type="danger"
|
||||
plain
|
||||
:loading="batchRemoving"
|
||||
:disabled="batchSelectedCount === 0"
|
||||
@click="batchRemove"
|
||||
>
|
||||
{{ t('outright.batch.remove') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<div v-if="selections.length" class="outright-odds-panel__sort">
|
||||
<span class="outright-odds-panel__sort-label">{{ t('outright.sort.label') }}</span>
|
||||
<el-select v-model="sortBy" size="small" class="outright-odds-panel__sort-by">
|
||||
<el-option value="rank" :label="t('outright.sort.rank')" />
|
||||
<el-option value="name" :label="t('outright.sort.name')" />
|
||||
<el-option value="code" :label="t('outright.sort.code')" />
|
||||
<el-option value="odds" :label="t('outright.sort.odds')" />
|
||||
<el-option value="saved_odds" :label="t('outright.sort.saved_odds')" />
|
||||
</el-select>
|
||||
<el-select v-model="sortDir" size="small" class="outright-odds-panel__sort-dir">
|
||||
<el-option value="asc" :label="t('outright.sort.asc')" />
|
||||
<el-option value="desc" :label="t('outright.sort.desc')" />
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div v-if="selections.length" class="team-list-scroll">
|
||||
<div class="team-list">
|
||||
<div
|
||||
v-for="row in sortedSelections"
|
||||
:key="row.id"
|
||||
class="team-row-wrap"
|
||||
:class="{
|
||||
'team-row-wrap--batch': batchMode,
|
||||
'team-row-wrap--batch-selected': batchMode && batchSelectedIds.has(row.id),
|
||||
}"
|
||||
@click="batchMode ? toggleBatchSelect(row.id) : undefined"
|
||||
>
|
||||
<article class="team-row">
|
||||
<span
|
||||
v-if="batchMode && batchSelectedIds.has(row.id)"
|
||||
class="team-row__check"
|
||||
aria-hidden="true"
|
||||
>✓</span>
|
||||
<div class="team-row__head">
|
||||
<span class="team-row__rank">{{ row.rank }}</span>
|
||||
<img
|
||||
v-if="teamFlagUrl(row)"
|
||||
:src="teamFlagUrl(row)"
|
||||
:alt="teamDisplayName(row)"
|
||||
class="team-row__flag"
|
||||
/>
|
||||
<div class="team-row__names">
|
||||
<span class="team-row__name" :title="teamDisplayName(row)">
|
||||
{{ teamDisplayName(row) }}
|
||||
</span>
|
||||
<span class="team-row__meta">{{ row.teamCode }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="team-row__right" @click.stop>
|
||||
<div class="team-row__odds-row">
|
||||
<span class="team-row__odds-label">{{ t('outright.col.odds') }}</span>
|
||||
<el-input-number
|
||||
v-model="row.editOdds"
|
||||
class="team-row__odds"
|
||||
:min="1.01"
|
||||
:max="9999"
|
||||
:step="0.01"
|
||||
:precision="2"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<button
|
||||
v-if="!batchMode"
|
||||
type="button"
|
||||
class="team-row__trash"
|
||||
:title="t('common.delete')"
|
||||
:aria-label="t('common.delete')"
|
||||
@click.stop="removeSelection(row)"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M9 3a1 1 0 0 0-.894.553L7.382 6H4a1 1 0 1 0 0 2h1v11a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h1a1 1 0 1 0 0-2h-3.382l-.724-2.447A1 1 0 0 0 15 3H9zm2 5a1 1 0 0 1 2 0v9a1 1 0 1 1-2 0V8zm4 0a1 1 0 0 1 2 0v9a1 1 0 1 1-2 0V8z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="outright-odds-panel__empty">{{ t('outright.empty_no_teams') }}</p>
|
||||
|
||||
<el-dialog
|
||||
v-model="addVisible"
|
||||
:title="t('outright.btn.add_team')"
|
||||
width="640px"
|
||||
class="add-teams-dialog"
|
||||
>
|
||||
<div class="add-teams-dialog__toolbar">
|
||||
<el-radio-group v-model="addFilter" size="small" @change="onAddFilterChange">
|
||||
<el-radio-button value="fixture">
|
||||
{{ t('outright.add.filter_fixture') }}
|
||||
<span v-if="addableFixtureTeams.length" class="add-teams-dialog__badge">
|
||||
{{ addableFixtureTeams.length }}
|
||||
</span>
|
||||
</el-radio-button>
|
||||
<el-radio-button value="all">
|
||||
{{ t('outright.add.filter_all') }}
|
||||
</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-input
|
||||
v-model="addSearch"
|
||||
size="small"
|
||||
clearable
|
||||
class="add-teams-dialog__search"
|
||||
:placeholder="t('outright.add.search_ph')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="add-teams-dialog__actions">
|
||||
<el-button size="small" link type="primary" @click="selectAllVisible">
|
||||
{{ t('outright.add.select_all') }}
|
||||
</el-button>
|
||||
<el-button size="small" link @click="clearSelection">
|
||||
{{ t('outright.add.clear_selection') }}
|
||||
</el-button>
|
||||
<span class="add-teams-dialog__count">
|
||||
{{ t('outright.add.selected_count', { n: selectedCount }) }}
|
||||
</span>
|
||||
<label class="add-teams-dialog__odds">
|
||||
{{ t('outright.add.default_odds') }}
|
||||
<el-input-number
|
||||
v-model="defaultOdds"
|
||||
:min="1.01"
|
||||
:step="0.05"
|
||||
:precision="2"
|
||||
size="small"
|
||||
controls-position="right"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div v-if="visibleAddTeams.length" class="add-teams-grid">
|
||||
<button
|
||||
v-for="team in visibleAddTeams"
|
||||
:key="team.teamCode"
|
||||
type="button"
|
||||
class="add-team-pick"
|
||||
:class="{ 'add-team-pick--selected': selectedCodes.has(team.teamCode) }"
|
||||
@click="toggleTeam(team.teamCode)"
|
||||
>
|
||||
<span
|
||||
v-if="selectedCodes.has(team.teamCode)"
|
||||
class="add-team-pick__check"
|
||||
aria-hidden="true"
|
||||
>✓</span>
|
||||
<img
|
||||
v-if="teamFlagUrl(team)"
|
||||
:src="teamFlagUrl(team)"
|
||||
:alt="teamDisplayName(team)"
|
||||
class="add-team-pick__flag"
|
||||
/>
|
||||
<span class="add-team-pick__name">{{ teamDisplayName(team) }}</span>
|
||||
<span class="add-team-pick__code">{{ team.teamCode }}</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-else class="add-teams-dialog__empty">
|
||||
{{
|
||||
addFilter === 'fixture'
|
||||
? t('outright.add.empty_fixture')
|
||||
: t('outright.add.empty_all')
|
||||
}}
|
||||
</p>
|
||||
|
||||
<template #footer>
|
||||
<el-button @click="addVisible = false">{{ t('common.cancel') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="adding"
|
||||
:disabled="selectedCount === 0"
|
||||
@click="submitAdd"
|
||||
>
|
||||
{{ t('common.confirm') }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.outright-odds-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 12px 16px 16px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
.outright-odds-panel__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.outright-odds-panel__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.outright-odds-panel__hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: #777;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.outright-odds-panel__batch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 10px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 8px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
.outright-odds-panel__batch-count {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
.outright-odds-panel__batch-odds {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
.outright-odds-panel__sort {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.outright-odds-panel__sort-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.outright-odds-panel__sort-by {
|
||||
width: 132px;
|
||||
}
|
||||
.outright-odds-panel__sort-dir {
|
||||
width: 96px;
|
||||
}
|
||||
.outright-odds-panel__empty {
|
||||
margin: 0;
|
||||
padding: 16px 0;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-list-scroll {
|
||||
max-height: min(440px, calc(100vh - 300px));
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
|
||||
}
|
||||
|
||||
.team-list-scroll::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.team-list-scroll::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.16);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.team-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.team-row-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.team-row-wrap--batch {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.team-row {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
padding: 8px 10px 8px 8px;
|
||||
background: #111;
|
||||
border: 1px solid #262626;
|
||||
border-radius: 8px;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.team-row-wrap:hover .team-row {
|
||||
border-color: #3a3a3a;
|
||||
}
|
||||
|
||||
.team-row-wrap--batch-selected .team-row {
|
||||
border-color: var(--el-color-primary);
|
||||
background: rgba(64, 158, 255, 0.08);
|
||||
}
|
||||
|
||||
.team-row__trash {
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background: transparent;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.team-row__trash svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.team-row__trash:hover {
|
||||
color: #f56c6c;
|
||||
background: rgba(245, 108, 108, 0.12);
|
||||
}
|
||||
|
||||
.team-row__trash:focus-visible {
|
||||
outline: 2px solid rgba(245, 108, 108, 0.45);
|
||||
outline-offset: 1px;
|
||||
}
|
||||
|
||||
.team-row__check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 8px;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.team-row__head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.team-row__right {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-row__rank {
|
||||
flex-shrink: 0;
|
||||
width: 16px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.team-row__flag {
|
||||
flex-shrink: 0;
|
||||
width: 28px;
|
||||
height: 20px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
.team-row__names {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.team-row__name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e8e8e8;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.team-row__meta {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.team-row__odds-row {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.team-row__odds-label {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
line-height: 1.2;
|
||||
white-space: nowrap;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.team-row__odds {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.team-row__odds :deep(.el-input-number) {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.add-teams-dialog__toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.add-teams-dialog__search {
|
||||
flex: 1;
|
||||
min-width: 160px;
|
||||
}
|
||||
|
||||
.add-teams-dialog__badge {
|
||||
margin-left: 4px;
|
||||
font-size: 11px;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.add-teams-dialog__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #262626;
|
||||
}
|
||||
|
||||
.add-teams-dialog__count {
|
||||
margin-left: auto;
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.add-teams-dialog__odds {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.add-teams-dialog__empty {
|
||||
margin: 0;
|
||||
padding: 24px 0;
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.add-teams-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 8px;
|
||||
max-height: 360px;
|
||||
overflow-y: auto;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.add-team-pick {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 10px 8px 8px;
|
||||
border: 1px solid #2a2a2a;
|
||||
border-radius: 8px;
|
||||
background: #141414;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
background 0.15s ease;
|
||||
}
|
||||
|
||||
.add-team-pick:hover {
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
|
||||
.add-team-pick--selected {
|
||||
border-color: var(--el-color-primary);
|
||||
background: rgba(64, 158, 255, 0.08);
|
||||
}
|
||||
|
||||
.add-team-pick__check {
|
||||
position: absolute;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.add-team-pick__flag {
|
||||
width: 36px;
|
||||
height: 24px;
|
||||
object-fit: cover;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.add-team-pick__name {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
text-align: center;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.add-team-pick__code {
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: #555;
|
||||
}
|
||||
</style>
|
||||
226
apps/admin/src/views/matches/LeagueOutrightPanel.vue
Normal file
226
apps/admin/src/views/matches/LeagueOutrightPanel.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { useAdminLocale } from '../../composables/useAdminLocale';
|
||||
import api from '../../api';
|
||||
|
||||
export interface LeagueOutrightSummary {
|
||||
id: string;
|
||||
leagueId: string;
|
||||
leagueCode: string;
|
||||
status: string;
|
||||
selectionCount: number;
|
||||
playerVisible: boolean;
|
||||
playerHiddenReason: string | null;
|
||||
canImportCanonical: boolean;
|
||||
matchName: string;
|
||||
}
|
||||
|
||||
interface SelectionPreview {
|
||||
rank: number;
|
||||
teamZh: string;
|
||||
teamCode: string;
|
||||
odds: string;
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
leagueId: string;
|
||||
event: LeagueOutrightSummary | null;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
updated: [];
|
||||
create: [];
|
||||
}>();
|
||||
|
||||
const { t } = useAdminLocale();
|
||||
const router = useRouter();
|
||||
|
||||
const loading = ref(false);
|
||||
const applying = ref(false);
|
||||
const selections = ref<SelectionPreview[]>([]);
|
||||
const hiddenReason = ref<string | null>(null);
|
||||
|
||||
function hiddenTip(reason: string | null) {
|
||||
if (!reason) return '';
|
||||
return t(`outright.hidden_reason.${reason}`);
|
||||
}
|
||||
|
||||
function goEdit() {
|
||||
if (!props.event) return;
|
||||
router.push({ name: 'admin-outright-edit', params: { matchId: props.event.id } });
|
||||
}
|
||||
|
||||
async function loadDetail() {
|
||||
if (!props.event) {
|
||||
selections.value = [];
|
||||
hiddenReason.value = null;
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await api.get(`/admin/outrights/${props.event.id}`);
|
||||
const payload = data.data as {
|
||||
playerHiddenReason: string | null;
|
||||
selections: SelectionPreview[];
|
||||
};
|
||||
hiddenReason.value = payload.playerHiddenReason;
|
||||
selections.value = (payload.selections ?? []).slice(0, 8);
|
||||
} 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;
|
||||
}
|
||||
}
|
||||
|
||||
async function applyCanonical() {
|
||||
if (!props.event?.canImportCanonical) return;
|
||||
applying.value = true;
|
||||
try {
|
||||
await api.post('/admin/outrights/import/wc2026');
|
||||
ElMessage.success(t('msg.outright_canonical_applied'));
|
||||
emit('updated');
|
||||
await loadDetail();
|
||||
} catch (e: unknown) {
|
||||
const err = e as { response?: { data?: { error?: string } } };
|
||||
ElMessage.error(err.response?.data?.error ?? t('msg.save_failed'));
|
||||
} finally {
|
||||
applying.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.event?.id,
|
||||
() => loadDetail(),
|
||||
{ immediate: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="league-outright-panel">
|
||||
<div class="panel-head">
|
||||
<div class="panel-head-text">
|
||||
<span class="panel-title">{{ t('nav.outrights') }}</span>
|
||||
<span class="panel-hint">{{ t('match.outright.section_hint') }}</span>
|
||||
</div>
|
||||
<div class="panel-actions">
|
||||
<template v-if="event">
|
||||
<el-tag
|
||||
size="small"
|
||||
:type="event.status === 'PUBLISHED' ? 'success' : 'info'"
|
||||
effect="dark"
|
||||
>
|
||||
{{
|
||||
event.status === 'PUBLISHED'
|
||||
? t('outright.status.published')
|
||||
: t('outright.status.draft')
|
||||
}}
|
||||
</el-tag>
|
||||
<el-tag size="small" :type="event.playerVisible ? 'success' : 'warning'" effect="plain">
|
||||
{{ event.playerVisible ? t('outright.col.player_visible') : t('outright.not_on_player') }}
|
||||
</el-tag>
|
||||
<el-button type="primary" size="small" @click="goEdit">
|
||||
{{ t('common.edit') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="event.canImportCanonical"
|
||||
size="small"
|
||||
:loading="applying"
|
||||
@click="applyCanonical"
|
||||
>
|
||||
{{ t('outright.btn.apply_canonical') }}
|
||||
</el-button>
|
||||
</template>
|
||||
<el-button v-else type="primary" plain size="small" @click="emit('create')">
|
||||
{{ t('match.outright.setup') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="event" v-loading="loading" class="panel-body">
|
||||
<p v-if="event.matchName" class="meta-line">{{ event.matchName }}</p>
|
||||
<p class="meta-line">
|
||||
{{ t('outright.col.teams') }}：{{ event.selectionCount }}
|
||||
</p>
|
||||
<p v-if="!event.playerVisible && hiddenReason" class="meta-warn">
|
||||
{{ hiddenTip(hiddenReason) }}
|
||||
</p>
|
||||
<el-table
|
||||
v-if="selections.length"
|
||||
:data="selections"
|
||||
size="small"
|
||||
class="preview-table"
|
||||
max-height="200"
|
||||
>
|
||||
<el-table-column prop="rank" :label="t('outright.col.rank')" width="56" />
|
||||
<el-table-column prop="teamZh" :label="t('outright.col.team_zh')" min-width="100" />
|
||||
<el-table-column prop="teamCode" :label="t('outright.col.code')" width="72" />
|
||||
<el-table-column prop="odds" :label="t('outright.col.odds')" width="88" align="right" />
|
||||
</el-table>
|
||||
<p v-else-if="!loading" class="meta-empty">{{ t('outright.expand_no_teams') }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.league-outright-panel {
|
||||
margin-bottom: 10px;
|
||||
padding: 10px 12px;
|
||||
border-radius: 8px;
|
||||
background: rgba(47, 181, 106, 0.04);
|
||||
border: 1px solid rgba(47, 181, 106, 0.14);
|
||||
}
|
||||
.panel-head {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.panel-head-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
.panel-title {
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
color: var(--green-text);
|
||||
}
|
||||
.panel-hint {
|
||||
font-size: 11px;
|
||||
color: #666;
|
||||
line-height: 1.4;
|
||||
}
|
||||
.panel-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.panel-body {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.meta-line {
|
||||
margin: 0 0 4px;
|
||||
font-size: 12px;
|
||||
color: #aaa;
|
||||
}
|
||||
.meta-warn {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
color: #e6a23c;
|
||||
line-height: 1.45;
|
||||
}
|
||||
.meta-empty {
|
||||
margin: 4px 0 0;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
.preview-table {
|
||||
margin-top: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -14,13 +14,13 @@ import {
|
||||
type AdminMatchDetail,
|
||||
type MatchCreateForm,
|
||||
} from '../match-form.ts';
|
||||
import AdminSubNav from '../../components/AdminSubNav.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t } = useAdminLocale();
|
||||
|
||||
const matchId = computed(() => String(route.params.matchId ?? ''));
|
||||
|
||||
const loading = ref(false);
|
||||
const savingMeta = ref(false);
|
||||
const status = ref('DRAFT');
|
||||
@@ -52,7 +52,7 @@ async function load() {
|
||||
const detail = data.data as AdminMatchDetail;
|
||||
if (detail.isOutright) {
|
||||
ElMessage.warning(t('msg.outright_no_edit'));
|
||||
router.replace('/outrights');
|
||||
router.replace('/matches');
|
||||
return;
|
||||
}
|
||||
status.value = detail.status;
|
||||
@@ -93,15 +93,14 @@ async function saveMeta() {
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="match-editor-page page-scroll">
|
||||
<div class="editor-topbar">
|
||||
<el-button size="small" text class="back-btn" @click="router.push('/matches')">
|
||||
← {{ t('matchEditor.back') }}
|
||||
</el-button>
|
||||
<div class="topbar-title">
|
||||
<h2>{{ t('matchEditor.title') }} #{{ matchId }}</h2>
|
||||
<AdminSubNav
|
||||
:title="t('matchEditor.title')"
|
||||
:subtitle="`#${matchId}`"
|
||||
>
|
||||
<template #extra>
|
||||
<el-tag size="small" type="info">{{ t(`match.status.${status}`) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AdminSubNav>
|
||||
|
||||
<section class="panel">
|
||||
<div class="panel-head">
|
||||
@@ -259,33 +258,6 @@ async function saveMeta() {
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.editor-topbar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
color: var(--green-text) !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.topbar-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.topbar-title h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #111;
|
||||
border: 1px solid #252525;
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useAdminLocale } from '../../composables/useAdminLocale';
|
||||
import api from '../../api';
|
||||
import MatchMarketsPanel from './MatchMarketsPanel.vue';
|
||||
import type { AdminMatchDetail } from '../match-form.ts';
|
||||
import AdminSubNav from '../../components/AdminSubNav.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
@@ -24,7 +25,7 @@ async function load() {
|
||||
const detail = data.data as AdminMatchDetail;
|
||||
if (detail.isOutright) {
|
||||
ElMessage.warning(t('msg.outright_no_edit'));
|
||||
router.replace('/outrights');
|
||||
router.replace('/matches');
|
||||
return;
|
||||
}
|
||||
status.value = detail.status;
|
||||
@@ -46,16 +47,14 @@ watch(matchId, load, { immediate: true });
|
||||
|
||||
<template>
|
||||
<div v-loading="loading" class="match-markets-page page-scroll">
|
||||
<div class="editor-topbar">
|
||||
<el-button size="small" text class="back-btn" @click="router.push('/matches')">
|
||||
← {{ t('matchEditor.back') }}
|
||||
</el-button>
|
||||
<div class="topbar-title">
|
||||
<h2>{{ t('matchEditor.section_markets') }}</h2>
|
||||
<span class="match-subtitle">{{ matchLabel }}</span>
|
||||
<AdminSubNav
|
||||
:title="t('matchEditor.section_markets')"
|
||||
:subtitle="matchLabel"
|
||||
>
|
||||
<template #extra>
|
||||
<el-tag size="small" type="info">{{ t(`match.status.${status}`) }}</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AdminSubNav>
|
||||
|
||||
<section v-if="matchId" class="panel">
|
||||
<MatchMarketsPanel :match-id="matchId" />
|
||||
@@ -68,36 +67,6 @@ watch(matchId, load, { immediate: true });
|
||||
padding: 0 4px 24px;
|
||||
}
|
||||
|
||||
.editor-topbar {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
flex-shrink: 0;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.topbar-title {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.topbar-title h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.match-subtitle {
|
||||
color: var(--green-text);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
background: #111;
|
||||
border: 1px solid #2a2a2a;
|
||||
|
||||
Reference in New Issue
Block a user