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

feat(admin,api,player): 优胜赛配置、赛事管理重构与玩家端投注体验优化

Browse Source 
管理端拆分赛事/优胜赛 Tab，新增联赛优胜赔率面板（批量、排序、外侧删除）；统一 list-chrome 工具栏对齐与列表页布局；Dashboard 失败重试、Users 操作下拉、小屏侧栏等体验修复。

API 扩展优胜赛与赛事目录接口，完善投注与钱包查询；玩家端重构赛事卡片、串关面板、注单/钱包页，新增注单详情、下注成功动画与下拉刷新。

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-08 09:55:56 +08:00
parent efff7c27e6
commit 24fa1b275c
66 changed files with 6289 additions and 1426 deletions
Download Patch File Download Diff File Expand all files Collapse all files

265
apps/admin/src/App.vue
View File

@@ -92,16 +92,42 @@ html, body, #app {
overflow: hidden;
}
/* 隐藏滚动条，表格区域仍可滚动 */
* {
/* 页面级隐藏滚动条；可滚动区域保留细滚动条便于发现溢出内容 */
html, body {
scrollbar-width: none;
-ms-overflow-style: none;
}
*::-webkit-scrollbar {
html::-webkit-scrollbar,
body::-webkit-scrollbar {
width: 0;
height: 0;
display: none;
}
.admin-list-page .table-wrap,
.dashboard-page,
.page-scroll,
.settlement-page,
.nav {
scrollbar-width: thin;
scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.admin-list-page .table-wrap::-webkit-scrollbar,
.dashboard-page::-webkit-scrollbar,
.page-scroll::-webkit-scrollbar,
.settlement-page::-webkit-scrollbar,
.nav::-webkit-scrollbar {
width: 6px;
height: 6px;
display: block;
}
.admin-list-page .table-wrap::-webkit-scrollbar-thumb,
.dashboard-page::-webkit-scrollbar-thumb,
.page-scroll::-webkit-scrollbar-thumb,
.settlement-page::-webkit-scrollbar-thumb,
.nav::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.16);
border-radius: 3px;
}
/* 管理端列表页：占满主区域，表头固定、表体滚动，底部分页 */
.admin-list-page {
@@ -113,7 +139,9 @@ html, body, #app {
}
.admin-list-page > .page-toolbar,
.admin-list-page > .filter-card,
.admin-list-page > .tool-card {
.admin-list-page > .tool-card,
.admin-list-page > .list-chrome,
.admin-list-page > .list-settings {
flex-shrink: 0;
}
.admin-list-page > .page-toolbar {
@@ -121,27 +149,180 @@ html, body, #app {
justify-content: flex-end;
align-items: center;
gap: 8px;
margin-bottom: 16px;
margin: 0 0 8px;
}
.admin-list-page > .tool-card {
margin-bottom: 16px;
margin-bottom: 8px;
}
.admin-list-page > .filter-card {
margin-bottom: 16px;
margin-bottom: 8px;
}
.admin-list-page > .data-card {
.admin-list-page > .list-chrome {
margin-bottom: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.list-chrome__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: nowrap;
padding: 8px 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.05);
--list-chrome-control-h: 32px;
--el-component-size: 32px;
}
.list-chrome__left {
display: flex;
align-items: center;
flex: 1;
min-width: 0;
gap: 12px;
flex-wrap: nowrap;
}
.list-chrome__filters {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 12px;
flex: 1;
min-width: 0;
}
.list-chrome__field {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.list-chrome__label {
flex-shrink: 0;
font-size: 11px;
font-weight: 600;
color: var(--text-muted);
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
}
.list-chrome__grow {
flex: 1;
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
row-gap: 8px;
}
.list-chrome__grow.el-form--inline {
display: flex !important;
align-items: center;
}
.list-chrome__left .matches-subnav--embedded {
align-self: center;
height: var(--list-chrome-control-h);
}
.list-chrome__actions {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.list-chrome :deep(.el-form-item) {
margin-bottom: 0 !important;
margin-right: 12px;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.list-chrome :deep(.el-form-item__label) {
display: inline-flex;
align-items: center;
height: var(--list-chrome-control-h);
line-height: 1;
padding: 0 8px 0 0;
margin-bottom: 0 !important;
}
.list-chrome :deep(.el-form-item__content) {
display: inline-flex;
align-items: center;
line-height: 1;
}
.list-chrome :deep(.el-input__wrapper),
.list-chrome :deep(.el-select__wrapper) {
height: var(--list-chrome-control-h) !important;
min-height: var(--list-chrome-control-h) !important;
box-sizing: border-box;
padding-top: 0;
padding-bottom: 0;
}
.list-chrome :deep(.el-input__inner) {
height: calc(var(--list-chrome-control-h) - 2px);
line-height: calc(var(--list-chrome-control-h) - 2px);
}
.list-chrome :deep(.el-button:not(.is-link)) {
height: var(--list-chrome-control-h) !important;
min-height: var(--list-chrome-control-h) !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
line-height: 1;
}
.list-chrome :deep(.el-form-item:last-child) {
margin-right: 0;
}
.admin-list-page > .list-settings {
margin-bottom: 8px;
}
.list-settings :deep(.el-collapse-item__header) {
height: 36px;
line-height: 36px;
padding: 0 10px;
font-size: 13px;
font-weight: 600;
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.05);
}
.list-settings :deep(.el-collapse-item__wrap) {
border-color: rgba(255, 255, 255, 0.05);
}
.list-settings :deep(.el-collapse-item__content) {
padding: 8px 10px 10px;
}
.list-settings-block + .list-settings-block {
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.list-settings-title {
font-size: 12px;
font-weight: 600;
color: #aaa;
margin-bottom: 6px;
}
.admin-list-page > .data-card,
.admin-list-page > .list-panel {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
border-radius: 12px;
border-radius: 10px;
}
.admin-list-page > .list-panel {
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(18, 18, 18, 0.85);
padding: 0 10px 10px;
}
.admin-list-page > .data-card .el-card__body {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
padding-bottom: 16px;
padding: 0 12px 12px;
}
.admin-list-page .table-wrap {
flex: 1;
@@ -154,11 +335,19 @@ html, body, #app {
.admin-list-page .table-wrap .el-table th.el-table__cell .cell {
white-space: nowrap;
}
.admin-list-page .list-hint {
flex-shrink: 0;
margin: 0;
padding: 6px 0 8px;
font-size: 11px;
color: #666;
line-height: 1.4;
}
.admin-list-page .pager {
flex-shrink: 0;
display: flex;
justify-content: flex-end;
margin-top: 16px;
margin-top: 8px;
padding-top: 0;
}
@@ -259,6 +448,60 @@ body {
}
.el-button--warning { background: rgba(251,191,36,0.1) !important; border-color: rgba(251,191,36,0.35) !important; color: #fbbf24 !important; }
.el-button--danger { background: rgba(255,69,58,0.1) !important; border-color: rgba(255,69,58,0.35) !important; color: #ff453a !important; }
.el-button--primary.is-plain {
background: rgba(36, 143, 84, 0.12) !important;
border-color: var(--green-border) !important;
color: var(--green-text) !important;
box-shadow: none !important;
}
.el-button--primary.is-plain:hover {
background: rgba(36, 143, 84, 0.22) !important;
border-color: rgba(120, 230, 170, 0.45) !important;
color: #d4fde5 !important;
}
.el-button--danger.is-plain {
background: rgba(255, 69, 58, 0.08) !important;
border-color: rgba(255, 69, 58, 0.35) !important;
color: #ff6b62 !important;
box-shadow: none !important;
}
.el-button--danger.is-plain:hover {
background: rgba(255, 69, 58, 0.16) !important;
border-color: rgba(255, 120, 110, 0.5) !important;
color: #ff8a82 !important;
}
.el-button.is-text,
.el-button.is-link.el-button--default {
color: var(--green-text) !important;
background: transparent !important;
border-color: transparent !important;
box-shadow: none !important;
}
.el-button.is-text:hover,
.el-button.is-link.el-button--default:hover {
color: #d4fde5 !important;
background: rgba(36, 143, 84, 0.1) !important;
}
.el-button--primary.is-plain {
background: rgba(36, 143, 84, 0.12) !important;
border-color: var(--green-border) !important;
color: var(--green-text) !important;
}
.el-button--primary.is-plain:hover {
background: rgba(36, 143, 84, 0.22) !important;
border-color: rgba(120, 230, 170, 0.45) !important;
color: #d4fde5 !important;
}
.el-button--danger.is-plain {
background: rgba(255, 69, 58, 0.08) !important;
border-color: rgba(255, 69, 58, 0.35) !important;
color: #ff6961 !important;
}
.el-button--danger.is-plain:hover {
background: rgba(255, 69, 58, 0.18) !important;
border-color: rgba(255, 120, 110, 0.5) !important;
color: #ff8a82 !important;
}
.el-tag { border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; }
.el-tag--success {

101
apps/admin/src/components/AdminSubNav.vue Normal file
View File

@@ -0,0 +1,101 @@
<script setup lang="ts">
import { RouterLink } from 'vue-router';
import type { AdminBreadcrumbItem } from '../utils/admin-breadcrumb';
defineProps<{
crumbs?: AdminBreadcrumbItem[];
title: string;
subtitle?: string;
}>();
</script>
<template>
<header class="admin-subnav">
<nav v-if="crumbs?.length" class="admin-subnav__crumbs" aria-label="Breadcrumb">
<template v-for="(item, i) in crumbs" :key="`${item.label}-${i}`">
<RouterLink
v-if="item.to && i < crumbs.length - 1"
:to="item.to"
class="admin-subnav__link"
>
{{ item.label }}
</RouterLink>
<span v-else class="admin-subnav__current">{{ item.label }}</span>
<span v-if="i < crumbs.length - 1" class="admin-subnav__sep" aria-hidden="true">/</span>
</template>
</nav>
<div class="admin-subnav__main">
<div class="admin-subnav__titles">
<h1 class="admin-subnav__title">{{ title }}</h1>
<span v-if="subtitle" class="admin-subnav__subtitle">{{ subtitle }}</span>
</div>
<div v-if="$slots.extra" class="admin-subnav__extra">
<slot name="extra" />
</div>
</div>
</header>
</template>
<style scoped>
.admin-subnav {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 16px;
flex-shrink: 0;
}
.admin-subnav__crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 6px;
font-size: 12px;
line-height: 1.4;
}
.admin-subnav__link {
color: var(--green-text);
font-weight: 600;
transition: color 0.15s;
}
.admin-subnav__link:hover {
color: #d4fde5;
}
.admin-subnav__current {
color: #888;
}
.admin-subnav__sep {
color: #444;
user-select: none;
}
.admin-subnav__main {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.admin-subnav__titles {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 12px;
min-width: 0;
}
.admin-subnav__title {
margin: 0;
font-size: 20px;
font-weight: 700;
color: #e8e8e8;
letter-spacing: 0.02em;
}
.admin-subnav__subtitle {
font-size: 13px;
color: #777;
}
.admin-subnav__extra {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
</style>

47
apps/admin/src/components/AdminTableEmpty.vue Normal file
View File

@@ -0,0 +1,47 @@
<script setup lang="ts">
import { useAdminLocale } from '../composables/useAdminLocale';
const { t } = useAdminLocale();
defineProps<{
text?: string;
hint?: string;
}>();
</script>
<template>
<div class="admin-table-empty">
<div class="admin-table-empty__icon" aria-hidden="true">
<svg width="40" height="40" viewBox="0 0 40 40" fill="none">
<rect x="6" y="10" width="28" height="22" rx="3" stroke="currentColor" stroke-width="1.5" opacity="0.35" />
<path d="M14 18h12M14 23h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.25" />
</svg>
</div>
<p class="admin-table-empty__text">{{ text ?? t('common.no_data') }}</p>
<p v-if="hint" class="admin-table-empty__hint">{{ hint }}</p>
<slot />
</div>
</template>
<style scoped>
.admin-table-empty {
padding: 28px 16px;
text-align: center;
}
.admin-table-empty__icon {
color: var(--green-text);
opacity: 0.45;
margin-bottom: 8px;
display: flex;
justify-content: center;
}
.admin-table-empty__text {
font-size: 13px;
color: var(--text-muted);
}
.admin-table-empty__hint {
font-size: 12px;
color: #555;
margin-top: 4px;
}
</style>

93
apps/admin/src/components/MatchesSubNav.vue Normal file
View File

@@ -0,0 +1,93 @@
<script setup lang="ts">
import { RouterLink, useRoute } from 'vue-router';
import { useAdminLocale } from '../composables/useAdminLocale';
const { t } = useAdminLocale();
const route = useRoute();
withDefaults(
defineProps<{
embedded?: boolean;
}>(),
{ embedded: false },
);
const tabs = [
{ path: '/matches', labelKey: 'nav.matches.fixtures' },
{ path: '/matches/outrights', labelKey: 'nav.matches.outrights' },
];
function isActive(path: string) {
if (path === '/matches/outrights') {
return route.path === '/matches/outrights';
}
return (
route.path === '/matches' ||
(route.path.startsWith('/matches/') &&
!route.path.startsWith('/matches/outrights'))
);
}
</script>
<template>
<nav
class="matches-subnav"
:class="{ 'matches-subnav--embedded': embedded }"
aria-label="Matches sections"
>
<RouterLink
v-for="tab in tabs"
:key="tab.path"
:to="tab.path"
class="matches-subnav__item"
:class="{ 'matches-subnav__item--active': isActive(tab.path) }"
>
{{ t(tab.labelKey) }}
</RouterLink>
</nav>
</template>
<style scoped>
.matches-subnav {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 16px;
padding: 4px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
flex-shrink: 0;
}
.matches-subnav--embedded {
margin-bottom: 0;
padding: 0 12px 0 0;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.08);
background: transparent;
flex-shrink: 0;
height: 32px;
box-sizing: border-box;
}
.matches-subnav__item {
padding: 0 12px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
color: #888;
transition: color 0.15s, background 0.15s;
}
.matches-subnav__item:hover {
color: #ccc;
background: rgba(255, 255, 255, 0.04);
}
.matches-subnav__item--active {
color: var(--green-text);
background: rgba(0, 200, 83, 0.1);
}
</style>

14
apps/admin/src/data/builtinCountries.ts
View File

@@ -155,6 +155,20 @@ export function countryOptionLabel(c: BuiltinCountry, locale: string): string {
return `${countryDisplayName(c, locale)} (${c.code})`;
}
/** 冠军盘队伍行：按后台语言只显示一种队名 */
export function teamRowDisplayName(
row: { teamCode: string; teamZh: string; teamEn: string },
locale: string,
): string {
const builtin = getBuiltinCountry(row.teamCode);
if (builtin) return countryDisplayName(builtin, locale);
if (locale === 'en-US') return row.teamEn || row.teamZh || row.teamCode;
if (locale === 'ms-MY') {
return NATIONAL_TEAM_MS[row.teamCode] ?? row.teamEn ?? row.teamZh ?? row.teamCode;
}
return row.teamZh || row.teamEn || row.teamCode;
}
function countryNameMs(c: BuiltinCountry): string {
return NATIONAL_TEAM_MS[c.code] ?? c.nameEn;
}

45
apps/admin/src/i18n/admin-messages.ts
View File

@@ -29,7 +29,7 @@ const zh: Record<string, string> = {
'login.captcha_ph': '验证码',
'login.captcha_refresh': '点击刷新',
'nav.dashboard': '控制台',
'nav.dashboard': '概览',
'nav.users': '玩家管理',
'nav.agents': '代理管理',
'nav.matches': '赛事管理',
@@ -41,6 +41,12 @@ const zh: Record<string, string> = {
'nav.players': '直属玩家',
'nav.subAgents': '下级代理',
'nav.myBets': '注单查询',
'nav.open_menu': '打开菜单',
'nav.close_menu': '关闭菜单',
'breadcrumb.settlement': '赛事结算',
'breadcrumb.match_edit': '编辑赛事',
'breadcrumb.match_markets': '盘口管理',
'breadcrumb.outright_edit': '编辑优胜冠军',
'role.admin': '系统管理员',
'role.agent': '代理账号',
'logout': '退出',
@@ -57,10 +63,12 @@ const zh: Record<string, string> = {
'common.delete': '删除',
'common.cancel': '取消',
'common.confirm': '确定',
'common.retry': '重试',
'common.status': '状态',
'common.type': '类型',
'common.keyword': '关键词',
'common.actions': '操作',
'common.more': '更多',
'common.loading': '加载中…',
'common.no_data': '暂无数据',
'common.yesterday': '昨日',
@@ -73,7 +81,7 @@ const zh: Record<string, string> = {
'common.platform_direct': '平台直属',
'common.updated_at': '更新于',
'dash.title': '控制台',
'dash.title': '概览',
'dash.desc': '平台整体运行概况',
'dash.board_title': '整体概览',
'dash.board_hint': '一屏查看经营趋势与平台分布',
@@ -85,6 +93,7 @@ const zh: Record<string, string> = {
'dash.kpi_new_players': '今日新增 {n} 人',
'dash.kpi_pending': '待结算',
'dash.kpi_pending_sub': '{bets} 单 · {matches} 场赛事',
'dash.load_error_hint': '无法加载概览数据，请检查网络或稍后重试。',
'dash.kpi_wallet': '玩家余额',
'dash.kpi_credit': '代理授信',
'dash.trend_caption': '近 7 日经营趋势（金额折线 + 注单柱）',
@@ -114,6 +123,8 @@ const zh: Record<string, string> = {
'page.users.desc': '创建玩家、查看余额与投注概况，支持上分与状态管理',
'page.agents.title': '代理管理',
'page.agents.desc': '创建一级代理、调整授信额度、查看直属玩家与额度占用',
'nav.matches.fixtures': '赛事配置',
'nav.matches.outrights': '优胜赛配置（盘口）',
'page.matches.title': '赛事管理',
'page.matches.desc': '草稿可编辑、删除；已发布可改开赛时间与热门',
'page.bets.title': '注单管理',
@@ -182,7 +193,7 @@ const en: Record<string, string> = {
'login.captcha_ph': 'Captcha',
'login.captcha_refresh': 'Click to refresh',
'nav.dashboard': 'Dashboard',
'nav.dashboard': 'Overview',
'nav.users': 'Players',
'nav.agents': 'Agents',
'nav.matches': 'Matches',
@@ -194,6 +205,12 @@ const en: Record<string, string> = {
'nav.players': 'My Players',
'nav.subAgents': 'Sub-Agents',
'nav.myBets': 'Bet Search',
'nav.open_menu': 'Open menu',
'nav.close_menu': 'Close menu',
'breadcrumb.settlement': 'Settlement',
'breadcrumb.match_edit': 'Edit match',
'breadcrumb.match_markets': 'Markets',
'breadcrumb.outright_edit': 'Edit outright',
'role.admin': 'Administrator',
'role.agent': 'Agent',
'logout': 'Logout',
@@ -210,10 +227,12 @@ const en: Record<string, string> = {
'common.delete': 'Delete',
'common.cancel': 'Cancel',
'common.confirm': 'OK',
'common.retry': 'Retry',
'common.status': 'Status',
'common.type': 'Type',
'common.keyword': 'Keyword',
'common.actions': 'Actions',
'common.more': 'More',
'common.loading': 'Loading…',
'common.no_data': 'No data',
'common.yesterday': 'Yesterday',
@@ -226,7 +245,7 @@ const en: Record<string, string> = {
'common.platform_direct': 'Platform direct',
'common.updated_at': 'Updated',
'dash.title': 'Dashboard',
'dash.title': 'Overview',
'dash.desc': 'Platform overview',
'dash.board_title': 'Overview',
'dash.board_hint': 'Trends and distribution at a glance',
@@ -238,6 +257,7 @@ const en: Record<string, string> = {
'dash.kpi_new_players': '{n} new today',
'dash.kpi_pending': 'Pending settlement',
'dash.kpi_pending_sub': '{bets} bets · {matches} matches',
'dash.load_error_hint': 'Could not load overview data. Check your connection and try again.',
'dash.kpi_wallet': 'Player balance',
'dash.kpi_credit': 'Agent credit',
'dash.trend_caption': 'Last 7 days (amount lines + bet bars)',
@@ -267,6 +287,8 @@ const en: Record<string, string> = {
'page.users.desc': 'Create players, balances, stakes, top-ups, and status',
'page.agents.title': 'Agents',
'page.agents.desc': 'Tier-1 agents, credit limits, players, and usage',
'nav.matches.fixtures': 'Fixtures',
'nav.matches.outrights': 'Outright odds',
'page.matches.title': 'Matches',
'page.matches.desc': 'Edit/delete drafts; adjust kickoff and featured when published',
'page.bets.title': 'Bets',
@@ -335,7 +357,7 @@ const ms: Record<string, string> = {
'login.captcha_ph': 'Captcha',
'login.captcha_refresh': 'Klik untuk muat semula',
'nav.dashboard': 'Papan pemuka',
'nav.dashboard': 'Gambaran',
'nav.users': 'Pemain',
'nav.agents': 'Ejen',
'nav.matches': 'Perlawanan',
@@ -347,6 +369,12 @@ const ms: Record<string, string> = {
'nav.players': 'Pemain saya',
'nav.subAgents': 'Sub-ejen',
'nav.myBets': 'Carian pertaruhan',
'nav.open_menu': 'Buka menu',
'nav.close_menu': 'Tutup menu',
'breadcrumb.settlement': 'Penyelesaian',
'breadcrumb.match_edit': 'Edit perlawanan',
'breadcrumb.match_markets': 'Pasaran',
'breadcrumb.outright_edit': 'Edit juara',
'role.admin': 'Pentadbir',
'role.agent': 'Ejen',
'logout': 'Log keluar',
@@ -363,10 +391,12 @@ const ms: Record<string, string> = {
'common.delete': 'Padam',
'common.cancel': 'Batal',
'common.confirm': 'OK',
'common.retry': 'Cuba lagi',
'common.status': 'Status',
'common.type': 'Jenis',
'common.keyword': 'Kata kunci',
'common.actions': 'Tindakan',
'common.more': 'Lagi',
'common.loading': 'Memuatkan…',
'common.no_data': 'Tiada data',
'common.yesterday': 'Semalam',
@@ -379,7 +409,7 @@ const ms: Record<string, string> = {
'common.platform_direct': 'Terus platform',
'common.updated_at': 'Dikemas kini',
'dash.title': 'Papan pemuka',
'dash.title': 'Gambaran',
'dash.desc': 'Gambaran keseluruhan platform',
'dash.board_title': 'Gambaran',
'dash.board_hint': 'Trend dan taburan sepintas lalu',
@@ -391,6 +421,7 @@ const ms: Record<string, string> = {
'dash.kpi_new_players': '{n} baharu hari ini',
'dash.kpi_pending': 'Menunggu penyelesaian',
'dash.kpi_pending_sub': '{bets} pertaruhan · {matches} perlawanan',
'dash.load_error_hint': 'Tidak dapat memuatkan data gambaran. Semak sambungan dan cuba lagi.',
'dash.kpi_wallet': 'Baki pemain',
'dash.kpi_credit': 'Kredit ejen',
'dash.trend_caption': '7 hari lepas (garis jumlah + palang pertaruhan)',
@@ -420,6 +451,8 @@ const ms: Record<string, string> = {
'page.users.desc': 'Cipta pemain, baki, stake, tambah baki dan status',
'page.agents.title': 'Ejen',
'page.agents.desc': 'Ejen peringkat 1, had kredit, pemain dan penggunaan',
'nav.matches.fixtures': 'Konfigurasi perlawanan',
'nav.matches.outrights': 'Odds juara',
'page.matches.title': 'Perlawanan',
'page.matches.desc': 'Edit/padam draf; laraskan masa mula dan pilihan utama bila diterbitkan',
'page.bets.title': 'Pertaruhan',

47
apps/admin/src/i18n/admin-pages-ms.ts
View File

@@ -60,6 +60,7 @@ export const adminPagesMs: Record<string, string> = {
'user.btn.hide_password': 'Sembunyi',
'user.ph.reset_password': 'Biarkan kosong untuk kekalkan; nilai baharu boleh dilihat',
'user.ph.reset_password_short': 'Biarkan kosong',
'user.page_settings': 'Tetapan global',
'user.global_settings': 'Kata laluan & akaun (global)',
'user.global_settings_hint': 'Kawal sama ada semua pemain boleh ubah kata laluan/nama akaun dalam app',
'user.section.password_mgmt': 'Pengurusan kata laluan',
@@ -128,6 +129,7 @@ export const adminPagesMs: Record<string, string> = {
'match.btn.markets': 'Pasaran',
'match.filter.keyword_ph': 'Nama kejohanan / kod pasukan',
'match.col.league': 'Kejohanan',
'match.col.league_en': 'Liga (EN)',
'match.col.fixture_count': 'Perlawanan',
'match.col.bet_count': 'Pertaruhan',
'match.col.total_stake': 'Jumlah stake',
@@ -148,6 +150,8 @@ export const adminPagesMs: Record<string, string> = {
'match.field.lang_en': 'EN',
'match.field.lang_ms': 'MS',
'match.field.kickoff': 'Masa mula',
'match.field.home_team': 'Pasukan tuan rumah',
'match.field.away_team': 'Pasukan pelawat',
'match.field.home_en': 'Tuan rumah (EN)',
'match.field.home_zh': 'Tuan rumah (ZH)',
'match.field.home_ms': 'Tuan rumah (MS)',
@@ -158,7 +162,14 @@ export const adminPagesMs: Record<string, string> = {
'match.hint.create_draft': 'Disimpan sebagai draf; kembangkan kejohanan dan terbitkan setiap perlawanan tunggal.',
'match.hint.create_league': 'Cipta kejohanan dahulu, kemudian kembangkan untuk tambah perlawanan tunggal.',
'match.hint.edit_published': 'Diterbitkan: edit masa mula, pilihan utama, nama paparan; tertutup/selesai dikunci.',
'match.expand_league_hint': 'Kembangkan kejohanan untuk senarai perlawanan; klik Pasaran untuk halaman tetapan odds (sama seperti aplikasi pemain).',
'match.expand_league_hint': 'Kembangkan liga untuk urus perlawanan; odds juara di tab Odds juara.',
'match.expand_outright_hint': 'Kembangkan liga untuk sunting odds juara; pasukan perlawanan disegerakkan auto, boleh tambah pasukan belum dijadualkan.',
'outright.odds_only_hint': 'Pasukan daripada perlawanan disegerakkan auto; boleh tambah pasukan manual dan sunting odds di sini.',
'outright.col.teams_from_fixtures': 'Pasukan (daripada perlawanan)',
'outright.col.teams_total': 'Pasukan odds juara',
'outright.empty_no_teams': 'Tiada pasukan — tambah perlawanan di Konfigurasi atau klik Tambah pasukan.',
'match.outright.setup': 'Sediakan',
'match.outright.section_hint': 'Pasaran juara untuk liga ini; perlawanan disenaraikan di bawah',
'match.expand_markets_hint': 'Klik Pasaran pada perlawanan tunggal untuk halaman pasaran berasingan.',
'match.no_fixtures': 'Tiada perlawanan tunggal di bawah kejohanan ini.',
'match.ph.league_ms': 'Piala Dunia 2027',
@@ -173,6 +184,7 @@ export const adminPagesMs: Record<string, string> = {
'bet.col.agent': 'Ejen',
'bet.col.selection': 'Pilihan',
'bet.col.content': 'Kandungan taruhan',
'bet.content.bet_counts': '{singles} tunggal · {parlays} parlay',
'bet.col.match': 'Perlawanan',
'bet.legs_more': '+{n} lagi…',
'bet.col.selection_count': 'Bil. pilihan',
@@ -319,6 +331,8 @@ export const adminPagesMs: Record<string, string> = {
'err.password_mismatch': 'Kata laluan tidak sepadan',
'err.credit_negative': 'Had kredit tidak boleh negatif',
'err.kickoff_required': 'Sila isi masa mula',
'err.team_country_required': 'Pilih pasukan tuan rumah dan pelawat',
'err.team_country_required': 'Pilih pasukan tuan rumah dan pelawat',
'err.teams_required': 'Isi nama pasukan tuan rumah dan pelawat (ZH atau EN)',
'err.teams_same': 'Pasukan tuan rumah dan pelawat mesti berbeza',
'err.league_required': 'Sila isi nama liga',
@@ -485,6 +499,37 @@ export const adminPagesMs: Record<string, string> = {
'outright.field.title_en': 'Tajuk (EN)',
'outright.field.title_ms': 'Tajuk (MS)',
'outright.btn.create_event': 'Acara juara baharu',
'outright.fixtures_sync_hint': 'Pasukan daripada perlawanan liga; hanya laraskan odds dan status terbit.',
'outright.empty_no_fixtures': 'Tiada perlawanan dalam liga ini — tambah di Konfigurasi perlawanan dahulu.',
'outright.btn.add_team': 'Tambah pasukan',
'outright.add.filter_fixture': 'Pasukan sedia ada',
'outright.add.filter_all': 'Semua terbina dalam',
'outright.add.select_all': 'Pilih semua',
'outright.add.clear_selection': 'Kosongkan pilihan',
'outright.add.selected_count': '{n} dipilih',
'outright.add.empty_fixture': 'Tiada pasukan perlawanan untuk ditambah (pasukan dalam perlawanan tetapi belum dalam pasaran juara)',
'outright.add.empty_all': 'Semua pasukan terbina dalam sudah dalam pasaran juara',
'outright.add.default_odds': 'Odds lalai',
'outright.add.search_ph': 'Cari nama atau kod',
'outright.add.err_none': 'Sila pilih sekurang-kurangnya satu pasukan',
'outright.batch.mode': 'Urus kelompok',
'outright.batch.exit': 'Keluar kelompok',
'outright.batch.apply_odds': 'Guna odds',
'outright.batch.remove': 'Buang terpilih',
'outright.batch.confirm_remove': 'Buang {n} pasukan terpilih?',
'outright.batch.err_none': 'Sila pilih pasukan dahulu',
'outright.batch.apply_ok': 'Odds {n} pasukan dikemas kini — simpan semua odds',
'outright.batch.remove_ok': '{n} pasukan dibuang',
'outright.batch.remove_partial': '{ok} berjaya, {fail} gagal',
'outright.sort.label': 'Susun',
'outright.sort.rank': 'Kedudukan',
'outright.sort.name': 'Nama pasukan',
'outright.sort.code': 'Kod',
'outright.sort.odds': 'Odds (semasa)',
'outright.sort.saved_odds': 'Odds (disimpan)',
'outright.sort.asc': 'Menaik',
'outright.sort.desc': 'Menurun',
'msg.outright_teams_added': '{n} pasukan ditambah ({skipped} dilangkau)',
'msg.load_matches_failed': 'Gagal memuatkan perlawanan',
'msg.cashback_issued': 'Rebat telah dikeluarkan',
'msg.freeze_confirm_title': '{action} akaun',

92
apps/admin/src/i18n/admin-pages.ts
View File

@@ -60,6 +60,7 @@ export const adminPagesZh: Record<string, string> = {
'user.btn.hide_password': '隐藏',
'user.ph.reset_password': '留空则不修改；填写后将更新并可查看',
'user.ph.reset_password_short': '留空不修改',
'user.page_settings': '全局设置',
'user.global_settings': '密码与账号管理（全局）',
'user.global_settings_hint': '控制所有玩家是否可在 App 内改密码、改账号名',
'user.section.password_mgmt': '密码管理',
@@ -127,7 +128,9 @@ export const adminPagesZh: Record<string, string> = {
'match.create_fixture_btn': '+ 新增单场',
'match.btn.markets': '盘口',
'match.filter.keyword_ph': '赛事名 / 球队代码',
'match.filter.status_hint': '仅筛选展开后的单场列表与「单场」列计数，不会隐藏新建的空联赛',
'match.col.league': '赛事',
'match.col.league_en': '联赛（英文）',
'match.col.fixture_count': '单场',
'match.col.bet_count': '注单数',
'match.col.total_stake': '总投注额',
@@ -148,6 +151,8 @@ export const adminPagesZh: Record<string, string> = {
'match.field.lang_en': 'EN',
'match.field.lang_ms': 'MS',
'match.field.kickoff': '开赛时间',
'match.field.home_team': '主队',
'match.field.away_team': '客队',
'match.field.home_en': '主队（英）',
'match.field.home_zh': '主队（中）',
'match.field.home_ms': '主队（马来）',
@@ -158,7 +163,14 @@ export const adminPagesZh: Record<string, string> = {
'match.hint.create_draft': '创建后为草稿，请展开赛事后在单场行点击「发布」并生成盘口。',
'match.hint.create_league': '创建赛事（联赛）后，展开该行可添加多场单场比赛。',
'match.hint.edit_published': '已发布：可修改开赛时间、热门及显示名称；封盘/已结算后不可编辑。',
'match.expand_league_hint': '展开赛事查看单场列表；点击「盘口」进入单独页面设置盘口与赔率（与玩家端按联赛分组一致）。',
'match.expand_league_hint': '展开联赛可管理单场赛事；夺冠盘口请在「优胜赛配置（盘口）」中设置赔率。',
'match.expand_outright_hint': '展开联赛可编辑夺冠赔率；单场球队会自动同步，也可手动补充尚未赛程的球队。',
'outright.odds_only_hint': '单场赛程中的球队会自动加入；可手动添加尚未参赛的球队，并在此调整赔率。',
'outright.col.teams_from_fixtures': '参赛球队（来自单场）',
'outright.col.teams_total': '冠军盘球队',
'outright.empty_no_teams': '暂无球队，请先在「赛事配置」添加单场或点击「添加队伍」。',
'match.outright.setup': '配置',
'match.outright.section_hint': '按联赛配置冠军盘，与下方单场列表同属本联赛',
'match.expand_markets_hint': '在单场列表点击「盘口」进入单独页面设置盘口与赔率。',
'match.no_fixtures': '该赛事下暂无单场。',
'match.ph.league_ms': '2027 世界杯',
@@ -173,6 +185,7 @@ export const adminPagesZh: Record<string, string> = {
'bet.col.agent': '所属代理',
'bet.col.selection': '选项',
'bet.col.content': '投注内容',
'bet.content.bet_counts': '{singles}单 · {parlays}串',
'bet.col.match': '赛事',
'bet.legs_more': '还有 {n} 项…',
'bet.col.selection_count': '投注项数',
@@ -319,6 +332,7 @@ export const adminPagesZh: Record<string, string> = {
'err.password_mismatch': '两次密码不一致',
'err.credit_negative': '授信额度不能为负',
'err.kickoff_required': '请填写开赛时间',
'err.team_country_required': '请选择主客队',
'err.teams_required': '请填写主客队名称（中文、英文或马来文至少一项）',
'err.teams_same': '主客队不能相同，请填写不同的队名',
'err.league_required': '请填写联赛名称（中文、英文或马来文至少一项）',
@@ -518,7 +532,37 @@ export const adminPagesZh: Record<string, string> = {
'outright.col.player_visible': '玩家端',
'outright.col.league_en': '联赛（英文）',
'outright.expand_no_teams': '暂无队伍，请进入编辑页添加',
'outright.fixtures_sync_hint': '参赛队伍来自本联赛单场赛程，仅可调整赔率与发布状态。',
'outright.empty_no_fixtures': '该联赛暂无单场，请先在「赛事配置」中添加比赛。',
'outright.btn.add_team': '添加队伍',
'outright.add.filter_fixture': '已有队伍',
'outright.add.filter_all': '全部内置',
'outright.add.select_all': '全选',
'outright.add.clear_selection': '取消全选',
'outright.add.selected_count': '已选 {n} 支',
'outright.add.empty_fixture': '暂无待添加的参赛球队（单场中已有且未在冠军盘的球队会显示在此）',
'outright.add.empty_all': '所有内置球队均已加入冠军盘',
'outright.add.default_odds': '默认赔率',
'outright.add.search_ph': '搜索队名或代码',
'outright.add.err_none': '请至少选择一支球队',
'outright.batch.mode': '批量管理',
'outright.batch.exit': '退出批量',
'outright.batch.apply_odds': '应用赔率',
'outright.batch.remove': '批量移除',
'outright.batch.confirm_remove': '确定移除选中的 {n} 支队伍？',
'outright.batch.err_none': '请先选择队伍',
'outright.batch.apply_ok': '已更新 {n} 支队伍的赔率，请点击「保存全部赔率」',
'outright.batch.remove_ok': '已移除 {n} 支队伍',
'outright.batch.remove_partial': '成功 {ok} 支，失败 {fail} 支',
'outright.sort.label': '排序',
'outright.sort.rank': '排名',
'outright.sort.name': '队名',
'outright.sort.code': '代码',
'outright.sort.odds': '赔率（当前）',
'outright.sort.saved_odds': '赔率（已保存）',
'outright.sort.asc': '升序',
'outright.sort.desc': '降序',
'msg.outright_teams_added': '已添加 {n} 支球队（跳过 {skipped} 支）',
'outright.btn.create_event': '新建冠军赛事',
'outright.btn.import_wc2026': '导入世界杯 48 强',
'outright.btn.apply_canonical': '应用世界杯基准表',
@@ -617,6 +661,7 @@ export const adminPagesEn: Record<string, string> = {
'user.btn.hide_password': 'Hide',
'user.ph.reset_password': 'Leave empty to keep; new value will be viewable',
'user.ph.reset_password_short': 'Leave empty to keep',
'user.page_settings': 'Global settings',
'user.global_settings': 'Password & account (global)',
'user.global_settings_hint': 'Controls whether all players can change password or username in the app',
'user.section.password_mgmt': 'Password management',
@@ -684,7 +729,9 @@ export const adminPagesEn: Record<string, string> = {
'match.create_fixture_btn': '+ Add fixture',
'match.btn.markets': 'Markets',
'match.filter.keyword_ph': 'Tournament / team code',
'match.filter.status_hint': 'Filters fixtures inside a league and the fixture count column; empty leagues stay visible',
'match.col.league': 'Tournament',
'match.col.league_en': 'League (EN)',
'match.col.fixture_count': 'Fixtures',
'match.col.bet_count': 'Bets',
'match.col.total_stake': 'Total stake',
@@ -705,6 +752,8 @@ export const adminPagesEn: Record<string, string> = {
'match.field.lang_en': 'EN',
'match.field.lang_ms': 'MS',
'match.field.kickoff': 'Kickoff time',
'match.field.home_team': 'Home team',
'match.field.away_team': 'Away team',
'match.field.home_en': 'Home (EN)',
'match.field.home_zh': 'Home (ZH)',
'match.field.home_ms': 'Home (MS)',
@@ -715,7 +764,14 @@ export const adminPagesEn: Record<string, string> = {
'match.hint.create_draft': 'Saved as draft; expand the tournament and publish each fixture to open markets.',
'match.hint.create_league': 'Create a tournament first, then expand it to add fixtures.',
'match.hint.edit_published': 'Published: edit kickoff, featured, display names; closed/settled are locked.',
'match.expand_league_hint': 'Expand a tournament to see fixtures; use Markets for a dedicated odds page (same grouping as player app).',
'match.expand_league_hint': 'Expand a league to manage fixtures; set winner odds under Outright odds.',
'match.expand_outright_hint': 'Expand a league to edit winner odds; fixture teams sync automatically, and you can add teams not yet on the schedule.',
'outright.odds_only_hint': 'Teams from fixtures are added automatically; add extra teams manually and edit winner odds here.',
'outright.col.teams_from_fixtures': 'Teams (from fixtures)',
'outright.col.teams_total': 'Outright teams',
'outright.empty_no_teams': 'No teams yet — add fixtures under Fixtures or click Add team.',
'match.outright.setup': 'Set up',
'match.outright.section_hint': 'Winner market for this league; fixtures are listed below',
'match.expand_markets_hint': 'Click Markets on a fixture to open the dedicated markets page.',
'match.no_fixtures': 'No fixtures under this tournament yet.',
'match.ph.league_ms': 'World Cup 2027',
@@ -730,6 +786,7 @@ export const adminPagesEn: Record<string, string> = {
'bet.col.agent': 'Agent',
'bet.col.selection': 'Pick',
'bet.col.content': 'Selections',
'bet.content.bet_counts': '{singles} single · {parlays} parlay',
'bet.col.match': 'Match',
'bet.legs_more': '+{n} more…',
'bet.col.selection_count': 'Legs',
@@ -876,6 +933,7 @@ export const adminPagesEn: Record<string, string> = {
'err.password_mismatch': 'Passwords do not match',
'err.credit_negative': 'Credit limit cannot be negative',
'err.kickoff_required': 'Kickoff time is required',
'err.team_country_required': 'Select home and away teams',
'err.teams_required': 'Enter home and away team names (ZH or EN)',
'err.teams_same': 'Home and away teams must be different',
'err.league_required': 'League name is required',
@@ -1076,7 +1134,37 @@ export const adminPagesEn: Record<string, string> = {
'outright.col.player_visible': 'Player',
'outright.col.league_en': 'League (EN)',
'outright.expand_no_teams': 'No teams — open Edit to add',
'outright.fixtures_sync_hint': 'Teams come from league fixtures; adjust odds and publish status only.',
'outright.empty_no_fixtures': 'No fixtures in this league — add matches under Fixtures first.',
'outright.btn.add_team': 'Add team',
'outright.add.filter_fixture': 'From fixtures',
'outright.add.filter_all': 'All built-in',
'outright.add.select_all': 'Select all',
'outright.add.clear_selection': 'Clear selection',
'outright.add.selected_count': '{n} selected',
'outright.add.empty_fixture': 'No fixture teams to add (teams in matches but not yet on the outright market)',
'outright.add.empty_all': 'All built-in teams are already on the outright market',
'outright.add.default_odds': 'Default odds',
'outright.add.search_ph': 'Search name or code',
'outright.add.err_none': 'Select at least one team',
'outright.batch.mode': 'Batch manage',
'outright.batch.exit': 'Exit batch',
'outright.batch.apply_odds': 'Apply odds',
'outright.batch.remove': 'Remove selected',
'outright.batch.confirm_remove': 'Remove {n} selected team(s)?',
'outright.batch.err_none': 'Select teams first',
'outright.batch.apply_ok': 'Updated odds for {n} team(s) — click Save all odds',
'outright.batch.remove_ok': 'Removed {n} team(s)',
'outright.batch.remove_partial': '{ok} removed, {fail} failed',
'outright.sort.label': 'Sort',
'outright.sort.rank': 'Rank',
'outright.sort.name': 'Team name',
'outright.sort.code': 'Code',
'outright.sort.odds': 'Odds (current)',
'outright.sort.saved_odds': 'Odds (saved)',
'outright.sort.asc': 'Ascending',
'outright.sort.desc': 'Descending',
'msg.outright_teams_added': 'Added {n} team(s) ({skipped} skipped)',
'outright.btn.create_event': 'New outright event',
'outright.btn.import_wc2026': 'Import WC 2026 (48)',
'outright.btn.apply_canonical': 'Apply WC baseline',

257
apps/admin/src/layouts/ManageLayout.vue
View File

@@ -1,22 +1,25 @@
<script setup lang="ts">
import { computed } from 'vue';
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';
import { useAdminLocale } from '../composables/useAdminLocale';
import AdminLocaleSwitcher from '../components/AdminLocaleSwitcher.vue';
import { resolveAdminBreadcrumb } from '../utils/admin-breadcrumb';
const route = useRoute();
const router = useRouter();
const auth = useAuthStore();
const { t } = useAdminLocale();
const sidebarOpen = ref(false);
const isMobileNav = ref(false);
const adminMenus = computed(() => [
{ path: '/', label: t('nav.dashboard') },
{ path: '/matches', label: t('nav.matches'), matchPrefix: true },
{ path: '/bets', label: t('nav.bets') },
{ path: '/users', label: t('nav.users') },
{ path: '/agents', label: t('nav.agents') },
{ path: '/matches', label: t('nav.matches'), matchPrefix: true },
{ path: '/outrights', label: t('nav.outrights'), matchPrefix: true },
{ path: '/bets', label: t('nav.bets') },
{ path: '/cashback', label: t('nav.cashback') },
{ path: '/contents', label: t('nav.contents') },
{ path: '/audit', label: t('nav.audit') },
@@ -25,36 +28,91 @@ const adminMenus = computed(() => [
const agentMenus = computed(() => [
{ path: '/', label: t('nav.dashboard') },
{ path: '/my-players', label: t('nav.players') },
{ path: '/sub-agents', label: t('nav.subAgents') },
{ path: '/my-bets', label: t('nav.myBets') },
{ path: '/sub-agents', label: t('nav.subAgents') },
]);
const menus = computed(() => (auth.isAdmin.value ? adminMenus.value : agentMenus.value));
function isMatchesSectionPath(path: string) {
return (
path === '/matches' ||
path.startsWith('/matches/') ||
path.startsWith('/outrights/') ||
path.startsWith('/settlement/')
);
}
const currentLabel = computed(() => {
const hit = menus.value.find((m) => {
if ('matchPrefix' in m && m.matchPrefix) {
return route.path === m.path || route.path.startsWith(`${m.path}/`);
return isMatchesSectionPath(route.path);
}
return route.path === m.path;
});
return hit?.label ?? '';
});
const topbarCrumbs = computed(() => resolveAdminBreadcrumb(route.path, t));
const userInitial = computed(() =>
(auth.user?.username ?? '').charAt(0).toUpperCase()
);
function syncMobileNav() {
isMobileNav.value = window.matchMedia('(max-width: 1023px)').matches;
if (!isMobileNav.value) {
sidebarOpen.value = false;
}
}
function toggleSidebar() {
sidebarOpen.value = !sidebarOpen.value;
}
function closeSidebar() {
sidebarOpen.value = false;
}
function onNavClick() {
if (isMobileNav.value) {
closeSidebar();
}
}
function logout() {
auth.logout();
router.push('/login');
}
onMounted(() => {
syncMobileNav();
window.addEventListener('resize', syncMobileNav);
});
onUnmounted(() => {
window.removeEventListener('resize', syncMobileNav);
});
watch(() => route.path, () => {
if (isMobileNav.value) {
closeSidebar();
}
});
</script>
<template>
<div class="shell">
<div class="shell" :class="{ 'shell--nav-open': sidebarOpen && isMobileNav }">
<button
v-if="isMobileNav && sidebarOpen"
type="button"
class="sidebar-backdrop"
:aria-label="t('nav.close_menu')"
@click="closeSidebar"
/>
<!-- ── Sidebar ── -->
<aside class="sidebar">
<aside class="sidebar" :class="{ open: sidebarOpen }">
<div class="brand">
<img src="/logo.png" alt="TheBet365" class="brand-logo" />
</div>
@@ -66,22 +124,47 @@ function logout() {
:class="{
active:
route.path === m.path ||
('matchPrefix' in m && m.matchPrefix && route.path.startsWith(`${m.path}/`)),
('matchPrefix' in m && m.matchPrefix && isMatchesSectionPath(route.path)),
}"
@click="onNavClick"
>
{{ m.label }}
</RouterLink>
</nav>
<div class="sidebar-foot">TheBet365 &copy; 2025</div>
<div class="sidebar-foot">TheBet365 &copy; 2026</div>
</aside>
<!-- ── Main ── -->
<div class="main">
<header class="topbar">
<div class="topbar-title">
<span class="topbar-accent" />
<span>{{ currentLabel }}</span>
<div class="topbar-left">
<button
v-if="isMobileNav"
type="button"
class="btn-menu"
:aria-label="sidebarOpen ? t('nav.close_menu') : t('nav.open_menu')"
@click="toggleSidebar"
>
<span class="menu-icon" aria-hidden="true" />
</button>
<div class="topbar-title">
<span v-if="!topbarCrumbs" class="topbar-accent" />
<nav v-if="topbarCrumbs" class="topbar-crumbs" aria-label="Breadcrumb">
<template v-for="(item, i) in topbarCrumbs" :key="`${item.label}-${i}`">
<RouterLink
v-if="item.to && i < topbarCrumbs.length - 1"
:to="item.to"
class="crumb-link"
>
{{ item.label }}
</RouterLink>
<span v-else class="crumb-current">{{ item.label }}</span>
<span v-if="i < topbarCrumbs.length - 1" class="crumb-sep" aria-hidden="true">/</span>
</template>
</nav>
<span v-else class="topbar-page-label">{{ currentLabel }}</span>
</div>
</div>
<div class="topbar-right">
<div class="user-chip">
@@ -105,6 +188,7 @@ function logout() {
<style scoped>
.shell {
--sidebar-width: 176px;
display: flex;
height: 100vh;
overflow: hidden;
@@ -112,7 +196,7 @@ function logout() {
/* ── Sidebar ── */
.sidebar {
width: 200px;
width: var(--sidebar-width);
flex-shrink: 0;
position: fixed;
top: 0; left: 0; bottom: 0;
@@ -121,18 +205,23 @@ function logout() {
display: flex;
flex-direction: column;
z-index: 100;
transition: transform 0.2s ease;
}
.brand {
padding: 20px 16px 18px;
border-bottom: 1px solid #181818;
height: 56px;
min-height: 56px;
padding: 0 10px;
border-bottom: 1px solid #1a1a1a;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
}
.brand-logo {
max-width: 140px;
max-height: 48px;
max-width: 118px;
max-height: 34px;
width: auto;
height: auto;
object-fit: contain;
@@ -141,7 +230,7 @@ function logout() {
.nav {
flex: 1;
padding: 10px 8px;
padding: 8px 6px;
display: flex;
flex-direction: column;
gap: 2px;
@@ -151,10 +240,10 @@ function logout() {
.nav-item {
display: flex;
align-items: center;
padding: 10px 14px;
border-radius: 7px;
padding: 9px 10px;
border-radius: 6px;
color: #aaa;
font-size: 13.5px;
font-size: 13px;
font-weight: 500;
transition: all 0.15s;
border-left: 2px solid transparent;
@@ -173,16 +262,27 @@ function logout() {
}
.sidebar-foot {
padding: 12px 16px;
padding: 10px 10px;
font-size: 10px;
color: #282828;
border-top: 1px solid #161616;
letter-spacing: 0.04em;
}
.sidebar-backdrop {
position: fixed;
inset: 0;
z-index: 90;
border: none;
padding: 0;
margin: 0;
background: rgba(0, 0, 0, 0.55);
cursor: pointer;
}
/* ── Main ── */
.main {
margin-left: 200px;
margin-left: var(--sidebar-width);
flex: 1;
min-width: 0;
display: flex;
@@ -192,23 +292,88 @@ function logout() {
}
.topbar {
position: sticky; top: 0; z-index: 90;
position: sticky; top: 0; z-index: 80;
height: 56px;
min-height: 56px;
box-sizing: border-box;
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px;
padding: 0 28px;
background: rgba(6, 6, 6, 0.98);
border-bottom: 1px solid #1a1a1a;
backdrop-filter: blur(12px);
}
.topbar-left {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.btn-menu {
display: none;
width: 40px;
height: 40px;
flex-shrink: 0;
align-items: center;
justify-content: center;
border: 1px solid #2a2a2a;
border-radius: 8px;
background: rgba(255, 255, 255, 0.03);
color: #ccc;
transition: border-color 0.15s, background 0.15s;
}
.btn-menu:hover {
border-color: #444;
background: rgba(255, 255, 255, 0.06);
}
.menu-icon {
display: block;
width: 16px;
height: 2px;
background: currentColor;
border-radius: 1px;
box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.topbar-title {
display: flex; align-items: center; gap: 10px;
display: flex; align-items: center; gap: 12px;
font-size: 15px; font-weight: 700;
color: #e8e8e8;
letter-spacing: 0.04em;
min-width: 0;
}
.topbar-page-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.topbar-crumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2px 8px;
font-size: 14px;
font-weight: 600;
min-width: 0;
}
.crumb-link {
color: var(--green-text);
transition: color 0.15s;
}
.crumb-link:hover {
color: #d4fde5;
}
.crumb-current {
color: #e8e8e8;
}
.crumb-sep {
color: #444;
font-weight: 400;
user-select: none;
}
.topbar-accent {
width: 3px; height: 15px;
width: 3px; height: 16px;
background: linear-gradient(180deg, var(--green-glow), var(--green-deep));
border-radius: 2px;
flex-shrink: 0;
@@ -217,6 +382,7 @@ function logout() {
.topbar-right {
display: flex; align-items: center; gap: 12px;
flex-shrink: 0;
}
.user-chip {
@@ -269,7 +435,7 @@ function logout() {
.page-main {
flex: 1;
min-height: 0;
padding: 28px;
padding: 20px 28px 28px;
overflow: hidden;
display: flex;
flex-direction: column;
@@ -278,4 +444,37 @@ function logout() {
flex: 1;
min-height: 0;
}
@media (max-width: 1023px) {
.sidebar {
transform: translateX(-100%);
box-shadow: none;
}
.sidebar.open {
transform: translateX(0);
box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
}
.main {
margin-left: 0;
}
.btn-menu {
display: inline-flex;
}
.page-main {
padding: 16px;
}
.topbar {
padding: 0 14px;
}
.user-info,
.portal-tag {
display: none;
}
}
@media (max-width: 640px) {
.topbar-right {
gap: 8px;
}
}
</style>

16
apps/admin/src/router/index.ts
View File

@@ -26,6 +26,11 @@ const router = createRouter({
component: () => import('../views/Matches.vue'),
meta: { adminOnly: true },
},
{
path: 'matches/outrights',
component: () => import('../views/MatchesOutrights.vue'),
meta: { adminOnly: true },
},
{
path: 'matches/:matchId/edit',
name: 'admin-match-edit',
@@ -38,19 +43,14 @@ const router = createRouter({
component: () => import('../views/matches/MatchMarketsPage.vue'),
meta: { adminOnly: true },
},
{
path: 'outrights',
name: 'admin-outrights',
component: () => import('../views/outrights/OutrightList.vue'),
meta: { adminOnly: true },
},
{ path: 'outrights', redirect: '/matches/outrights' },
{
path: 'outrights/:matchId/edit',
name: 'admin-outright-edit',
component: () => import('../views/outrights/OutrightEventEditor.vue'),
component: () => import('../views/outrights/OutrightEditRedirect.vue'),
meta: { adminOnly: true },
},
{ path: 'world-cup-outright', redirect: '/outrights' },
{ path: 'world-cup-outright', redirect: '/matches/outrights' },
{
path: 'bets',
component: () => import('../views/Bets.vue'),

42
apps/admin/src/utils/admin-breadcrumb.ts Normal file
View File

@@ -0,0 +1,42 @@
export interface AdminBreadcrumbItem {
label: string;
to?: string;
}
/** 子页面顶栏面包屑（一级菜单 + 当前子页） */
export function resolveAdminBreadcrumb(
path: string,
t: (key: string) => string,
): AdminBreadcrumbItem[] | null {
if (/^\/settlement\/[^/]+/.test(path)) {
return [
{ label: t('nav.matches'), to: '/matches' },
{ label: t('breadcrumb.settlement') },
];
}
if (/^\/matches\/[^/]+\/edit/.test(path)) {
return [
{ label: t('nav.matches'), to: '/matches' },
{ label: t('breadcrumb.match_edit') },
];
}
if (/^\/matches\/[^/]+\/markets/.test(path)) {
return [
{ label: t('nav.matches'), to: '/matches' },
{ label: t('breadcrumb.match_markets') },
];
}
if (path === '/matches/outrights') {
return [
{ label: t('nav.matches'), to: '/matches' },
{ label: t('nav.matches.outrights') },
];
}
if (/^\/outrights\/[^/]+\/edit/.test(path)) {
return [
{ label: t('nav.matches'), to: '/matches' },
{ label: t('nav.matches.outrights'), to: '/matches/outrights' },
];
}
return null;
}

49
apps/admin/src/views/Agents.vue
View File

@@ -23,6 +23,7 @@ import {
formatAmountFull,
shouldCompactAmount as shouldCompact,
} from '../utils/format-amount';
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
const agents = ref<AgentRow[]>([]);
const total = ref(0);
@@ -224,30 +225,34 @@ function creditTypeLabel(type: string) {
<template>
<div class="admin-list-page">
<div class="page-toolbar">
<el-button type="primary" @click="openCreate">{{ t('agent.create_btn') }}</el-button>
<div class="list-chrome">
<div class="list-chrome__row">
<el-form inline class="list-chrome__grow">
<el-form-item :label="t('common.keyword')">
<el-input
v-model="keyword"
:placeholder="t('agent.filter.username_ph')"
clearable
style="width: 180px"
@keyup.enter="load"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
</el-form-item>
</el-form>
<div class="list-chrome__actions">
<el-button type="primary" @click="openCreate">{{ t('agent.create_btn') }}</el-button>
</div>
</div>
</div>
<el-card class="filter-card" shadow="never">
<el-form inline>
<el-form-item :label="t('common.keyword')">
<el-input
v-model="keyword"
:placeholder="t('agent.filter.username_ph')"
clearable
style="width: 180px"
@keyup.enter="load"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="data-card" shadow="never">
<section class="list-panel">
<div class="table-wrap">
<el-table :data="agents" stripe>
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column prop="userId" label="ID" width="72" />
<el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
<el-table-column :label="t('common.status')" width="88">
@@ -296,7 +301,7 @@ function creditTypeLabel(type: string) {
@size-change="onSizeChange"
/>
</div>
</el-card>
</section>
<el-dialog v-model="createVisible" :title="t('agent.dialog.create')" width="520px" destroy-on-close>
<el-form label-width="100px">
@@ -485,8 +490,6 @@ function creditTypeLabel(type: string) {
</template>
<style scoped>
.filter-card { border-radius: 12px; }
.data-card { border-radius: 12px; }
.field-hint { font-size: 12px; color: #888; margin-top: 4px; }
.detail-block { margin-bottom: 16px; }
.section-title {

4
apps/admin/src/views/Audit.vue
View File

@@ -2,6 +2,7 @@
import { ref, onMounted } from 'vue';
import { useAdminLocale } from '../composables/useAdminLocale';
import api from '../api';
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
const { t, locale, localeTag } = useAdminLocale();
@@ -89,6 +90,9 @@ function formatTime(v: string) {
<el-card class="data-card" shadow="never">
<div class="table-wrap">
<el-table :key="locale" :data="logs" stripe>
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column :label="t('audit.col.action')" min-width="140">
<template #default="{ row }">{{ auditActionLabel(row.action) }}</template>
</el-table-column>

67
apps/admin/src/views/Bets.vue
View File

@@ -11,6 +11,7 @@ import {
useBetFilterOptions,
} from '../utils/bet-labels';
import { useAdminLocale } from '../composables/useAdminLocale';
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
const { t, localeTag } = useAdminLocale();
const { statusOptions, typeOptions } = useBetFilterOptions();
@@ -33,6 +34,12 @@ const detailLoading = ref(false);
onMounted(load);
function betContentCounts(row: BetListRow) {
const singles = row.betType === 'SINGLE' ? 1 : 0;
const parlays = row.betType === 'PARLAY' ? 1 : 0;
return t('bet.content.bet_counts', { singles, parlays });
}
async function load() {
const { data } = await api.get('/admin/bets', {
params: {
@@ -164,6 +171,9 @@ async function openDetail(row: BetListRow) {
<el-card class="data-card" shadow="never">
<div class="table-wrap">
<el-table :data="bets" stripe class="bets-table">
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column prop="id" :label="t('bet.col.serial')" width="64" align="center" />
<el-table-column prop="betNo" :label="t('bet.col.bet_no')" min-width="200" show-overflow-tooltip>
<template #default="{ row }">
@@ -179,28 +189,15 @@ async function openDetail(row: BetListRow) {
<el-tag type="info" size="small" effect="plain">{{ betTypeLabel(row.betType) }}</el-tag>
</template>
</el-table-column>
<el-table-column :label="t('bet.col.content')" min-width="260">
<el-table-column :label="t('bet.col.content')" width="108" align="center">
<template #default="{ row }">
<el-tooltip
v-if="row.selectionPreviews?.length"
:content="row.selectionSummary || ''"
v-if="row.selectionSummary"
:content="row.selectionSummary"
placement="top"
:show-after="300"
>
<div class="bet-content-cell">
<div
v-for="(leg, i) in (row.selectionPreviews ?? []).slice(0, 3)"
:key="i"
class="bet-leg-line"
>
<span class="bet-match">{{ leg.matchLabel }}</span>
<span class="bet-pick">{{ leg.selectionName }}</span>
<span class="bet-leg-odds">@{{ leg.odds }}</span>
</div>
<div v-if="(row.selectionPreviews?.length ?? 0) > 3" class="bet-leg-more">
{{ t('bet.legs_more', { n: (row.selectionPreviews?.length ?? 0) - 3 }) }}
</div>
</div>
<span class="bet-content-summary">{{ betContentCounts(row) }}</span>
</el-tooltip>
<span v-else class="bet-content-empty">—</span>
</template>
@@ -345,38 +342,10 @@ async function openDetail(row: BetListRow) {
min-width: 1380px;
}
.bet-content-cell {
display: flex;
flex-direction: column;
gap: 4px;
padding: 2px 0;
}
.bet-leg-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px 6px;
font-size: 12px;
line-height: 1.35;
}
.bet-match {
color: #ddd;
}
.bet-pick {
color: var(--green-glow);
}
.bet-leg-odds {
color: #888;
font-size: 11px;
}
.bet-leg-more {
font-size: 11px;
color: #666;
.bet-content-summary {
font-size: 13px;
color: #ccc;
white-space: nowrap;
}
.bet-content-empty {

5
apps/admin/src/views/Contents.vue
View File

@@ -4,6 +4,7 @@ import { ElMessage, ElMessageBox } from 'element-plus';
import type { TableInstance } from 'element-plus';
import { useAdminLocale } from '../composables/useAdminLocale';
import api from '../api';
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
const { t, localeTag } = useAdminLocale();
@@ -385,9 +386,11 @@ void load();
row-key="id"
stripe
size="small"
empty-text="—"
@selection-change="onSelectionChange"
>
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column type="selection" width="44" :selectable="() => !saving" />
<el-table-column prop="sortOrder" :label="t('content.col.sort')" width="64" align="center" />
<el-table-column v-if="isBanner" :label="t('content.col.preview')" width="88" align="center">

68
apps/admin/src/views/Dashboard.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import api from '../api';
import { formatAmount, formatAmountFull } from '../utils/format-amount';
import type { AdminDashboard } from './dashboard-types';
@@ -9,22 +10,34 @@ import { betStatusLabel } from '../utils/bet-labels';
import { useAdminLocale } from '../composables/useAdminLocale';
const { t, locale, localeTag } = useAdminLocale();
const router = useRouter();
const stats = ref<AdminDashboard | null>(null);
const loading = ref(true);
const loadError = ref(false);
onMounted(load);
async function load() {
loading.value = true;
loadError.value = false;
try {
const { data } = await api.get('/admin/dashboard');
stats.value = data.data as AdminDashboard;
} catch {
stats.value = null;
loadError.value = true;
} finally {
loading.value = false;
}
}
type KpiLink = { path: string; query?: Record<string, string> };
function goKpiLink(link: KpiLink) {
router.push(link.query ? { path: link.path, query: link.query } : link.path);
}
const s = computed(() => stats.value);
function fmtCount(val: number | undefined) {
@@ -176,6 +189,7 @@ const kpiPrimary = computed(() => {
const kpiSecondary = computed(() => {
if (!s.value) return [];
const pendingMatches = s.value.matches.pendingSettlement ?? 0;
return [
{
label: t('dash.kpi_users'),
@@ -187,8 +201,12 @@ const kpiSecondary = computed(() => {
value: `${fmtCount(s.value.bets.pendingTotal)} ${t('common.bets_unit')}`,
sub: t('dash.kpi_pending_sub', {
bets: fmtCount(s.value.bets.pendingTotal),
matches: fmtCount(s.value.matches.pendingSettlement),
matches: fmtCount(pendingMatches),
}),
link:
pendingMatches > 0
? { path: '/matches', query: { status: 'PENDING_SETTLEMENT' } }
: undefined,
},
{
label: t('dash.kpi_wallet'),
@@ -206,7 +224,13 @@ const kpiSecondary = computed(() => {
<template>
<div class="dashboard-page" v-loading="loading">
<template v-if="s">
<el-card v-if="!loading && loadError" class="state-card" shadow="never">
<p class="state-title">{{ t('msg.load_failed') }}</p>
<p class="state-hint">{{ t('dash.load_error_hint') }}</p>
<el-button type="primary" size="small" @click="load">{{ t('common.retry') }}</el-button>
</el-card>
<template v-else-if="s">
<el-card class="overview-board" shadow="never">
<div v-if="s.generatedAt" class="board-head">
<span class="dash-updated">
@@ -229,7 +253,16 @@ const kpiSecondary = computed(() => {
</div>
<div class="kpi-grid kpi-secondary">
<div v-for="item in kpiSecondary" :key="item.label" class="kpi-cell compact">
<div
v-for="item in kpiSecondary"
:key="item.label"
class="kpi-cell compact"
:class="{ 'kpi-cell--link': item.link }"
:role="item.link ? 'button' : undefined"
:tabindex="item.link ? 0 : undefined"
@click="item.link && goKpiLink(item.link)"
@keydown.enter.prevent="item.link && goKpiLink(item.link)"
>
<span class="kpi-label">{{ item.label }}</span>
<span class="kpi-value sm">{{ item.value }}</span>
<span class="kpi-sub">{{ item.sub }}</span>
@@ -249,6 +282,25 @@ const kpiSecondary = computed(() => {
<style scoped>
.dashboard-page { padding-bottom: 32px; }
.state-card {
border-radius: 14px;
border: 1px solid #2a2220;
background: rgba(255, 69, 58, 0.06);
text-align: center;
padding: 8px 0 4px;
}
.state-title {
font-size: 15px;
font-weight: 700;
color: #ff8a80;
margin-bottom: 6px;
}
.state-hint {
font-size: 13px;
color: #888;
margin-bottom: 14px;
}
.overview-board {
border-radius: 14px;
border: 1px solid #1e1e1e;
@@ -290,6 +342,16 @@ const kpiSecondary = computed(() => {
.kpi-cell.compact {
padding: 10px 12px;
}
.kpi-cell--link {
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
}
.kpi-cell--link:hover,
.kpi-cell--link:focus-visible {
border-color: rgba(77, 214, 138, 0.35);
background: rgba(36, 143, 84, 0.1);
outline: none;
}
.kpi-label {
display: block;
font-size: 11px;

25
apps/admin/src/views/Login.vue
View File

@@ -17,6 +17,7 @@ const { t } = useAdminLocale();
const form = ref({ username: '', password: '' });
const loading = ref(false);
const captchaRef = ref<InstanceType<typeof RobotVerify> | null>(null);
const isDev = import.meta.env.DEV;
async function quickLogin(username: string, password: string) {
loading.value = true;
@@ -81,17 +82,19 @@ async function login() {
{{ loading ? '...' : t('login.submit') }}
</button>
<div class="quick-label">{{ t('login.quick_label') }}</div>
<div class="quick-btns">
<button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('admin', 'Admin@123')">
<span class="quick-role">{{ t('login.quick_admin') }}</span>
<span class="quick-acc">admin</span>
</button>
<button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('agent1', 'Agent@123')">
<span class="quick-role">{{ t('login.quick_agent') }}</span>
<span class="quick-acc">agent1</span>
</button>
</div>
<template v-if="isDev">
<div class="quick-label">{{ t('login.quick_label') }}</div>
<div class="quick-btns">
<button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('admin', 'Admin@123')">
<span class="quick-role">{{ t('login.quick_admin') }}</span>
<span class="quick-acc">admin</span>
</button>
<button type="button" class="quick-btn" :disabled="loading" @click="quickLogin('agent1', 'Agent@123')">
<span class="quick-role">{{ t('login.quick_agent') }}</span>
<span class="quick-acc">agent1</span>
</button>
</div>
</template>
</div>
</div>
</form>

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

@@ -1,12 +1,14 @@
<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } from 'vue-router';
import { useAdminLocale } from '../composables/useAdminLocale';
import { resolveFormError } from '../i18n/form-validation';
import api from '../api';
import { ElMessage } from 'element-plus';
import LeagueMatchesPanel from './matches/LeagueMatchesPanel.vue';
import LogoUrlField from '../components/LogoUrlField.vue';
import { countryDisplayName, type BuiltinCountry } from '../data/builtinCountries';
import MatchesSubNav from '../components/MatchesSubNav.vue';
import CountryFlagSelect from '../components/outright/CountryFlagSelect.vue';
import { getBuiltinCountry } from '../data/builtinCountries';
import {
readMatchesListUiState,
writeMatchesListUiState,
@@ -15,10 +17,13 @@ import { formatAmount } from '../utils/format-amount';
import {
emptyMatchForm,
buildPlatformPayload,
fillBuiltinTeam,
clearBuiltinTeam,
type MatchCreateForm,
} from './match-form.ts';
const { t } = useAdminLocale();
const route = useRoute();
const leagues = ref<unknown[]>([]);
const total = ref(0);
const page = ref(1);
@@ -94,7 +99,16 @@ function onSearch() {
load();
}
onMounted(() => load({ restoreExpand: true }));
onMounted(() => {
const qStatus = route.query.status;
if (typeof qStatus === 'string' && qStatus.trim()) {
filterStatus.value = qStatus.trim();
page.value = 1;
load();
return;
}
load({ restoreExpand: true });
});
onBeforeUnmount(persistListUiState);
function onPageChange(p: number) {
@@ -138,25 +152,13 @@ async function submitCreateLeague() {
}
}
function applyTeamFromCountry(side: 'home' | 'away', country: BuiltinCountry) {
const msName = countryDisplayName(country, 'ms-MY');
if (side === 'home') {
if (!form.value.homeTeamZh.trim()) form.value.homeTeamZh = country.nameZh;
if (!form.value.homeTeamEn.trim()) form.value.homeTeamEn = country.nameEn;
if (!form.value.homeTeamMs.trim()) form.value.homeTeamMs = msName;
} else {
if (!form.value.awayTeamZh.trim()) form.value.awayTeamZh = country.nameZh;
if (!form.value.awayTeamEn.trim()) form.value.awayTeamEn = country.nameEn;
if (!form.value.awayTeamMs.trim()) form.value.awayTeamMs = msName;
function onTeamCodeChange(side: 'home' | 'away', code: string) {
if (!code?.trim()) {
clearBuiltinTeam(form.value, side);
return;
}
}
function draftTeamCode(side: 'home' | 'away') {
const en = side === 'home' ? form.value.homeTeamEn : form.value.awayTeamEn;
const zh = side === 'home' ? form.value.homeTeamZh : form.value.awayTeamZh;
const name = (en || zh).trim();
if (!name) return '';
return `NAME_${name.replace(/[^a-zA-Z0-9]+/g, '_').replace(/^_|_$/g, '').toUpperCase().slice(0, 48)}`;
const country = getBuiltinCountry(code);
if (country) fillBuiltinTeam(form.value, side, country);
}
function openCreateFixture(leagueRow: unknown) {
@@ -266,6 +268,14 @@ function leagueTitle(row: unknown) {
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);
}
@@ -290,42 +300,51 @@ function leaguePendingBets(row: unknown) {
function isLeagueExpanded(id: string) {
return expandedRowKeys.value.includes(id);
}
</script>
<template>
<div class="admin-list-page matches-page">
<div class="page-toolbar">
<el-button @click="openImport">{{ t('common.import') }}</el-button>
<el-button type="primary" @click="openCreateLeague">{{ t('match.create_btn') }}</el-button>
<div class="list-chrome">
<div class="list-chrome__row">
<div class="list-chrome__left">
<MatchesSubNav embedded />
<div class="list-chrome__filters">
<div class="list-chrome__field">
<span class="list-chrome__label">{{ t('common.keyword') }}</span>
<el-input
v-model="keyword"
:placeholder="t('match.filter.keyword_ph')"
clearable
style="width: 200px"
@keyup.enter="load"
/>
</div>
<div class="list-chrome__field">
<span class="list-chrome__label">{{ t('common.status') }}</span>
<el-select v-model="filterStatus" :placeholder="t('common.all')" clearable style="width: 120px">
<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>
<el-button type="primary" class="list-chrome__submit" @click="onSearch">
{{ t('common.search') }}
</el-button>
</div>
</div>
<div class="list-chrome__actions">
<el-button @click="openImport">{{ t('common.import') }}</el-button>
<el-button type="primary" @click="openCreateLeague">{{ t('match.create_btn') }}</el-button>
</div>
</div>
<p v-if="filterStatus" class="list-hint">{{ t('match.filter.status_hint') }}</p>
</div>
<el-card class="filter-card" shadow="never">
<el-form inline>
<el-form-item :label="t('common.keyword')">
<el-input
v-model="keyword"
:placeholder="t('match.filter.keyword_ph')"
clearable
style="width: 200px"
@keyup.enter="load"
/>
</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('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.SETTLED')" value="SETTLED" />
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch">{{ t('common.search') }}</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="data-card" shadow="never">
<p class="table-hint">{{ t('match.expand_league_hint') }}</p>
<section class="list-panel">
<p class="list-hint">{{ t('match.expand_league_hint') }}</p>
<div class="table-wrap">
<el-table
:data="leagues"
@@ -338,18 +357,19 @@ function isLeagueExpanded(id: string) {
>
<el-table-column type="expand" width="40">
<template #default="{ row }">
<LeagueMatchesPanel
v-if="isLeagueExpanded(leagueId(row))"
:league-id="leagueId(row)"
:filter-status="filterStatus"
:keyword="keyword"
@changed="() => load({ keepExpand: true })"
@add-match="openCreateFixture(row)"
/>
<template v-if="isLeagueExpanded(leagueId(row))">
<LeagueMatchesPanel
:league-id="leagueId(row)"
:filter-status="filterStatus"
:keyword="keyword"
@changed="() => load({ keepExpand: true })"
@add-match="openCreateFixture(row)"
/>
</template>
</template>
</el-table-column>
<el-table-column prop="id" label="ID" width="72" />
<el-table-column :label="t('match.col.league')" min-width="220">
<el-table-column :label="t('match.col.league')" width="148" show-overflow-tooltip>
<template #default="{ row }">
<div class="league-cell">
<img
@@ -358,10 +378,15 @@ function isLeagueExpanded(id: string) {
alt=""
class="league-logo"
/>
<span class="matchup-link">{{ leagueTitle(row) }}</span>
<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>
</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>
@@ -381,7 +406,7 @@ function isLeagueExpanded(id: string) {
<span v-else class="bet-stat-zero">0</span>
</template>
</el-table-column>
<el-table-column :label="t('match.col.league_code')" width="100">
<el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
<template #default="{ row }">{{ rowOf(row).code }}</template>
</el-table-column>
</el-table>
@@ -398,7 +423,7 @@ function isLeagueExpanded(id: string) {
@size-change="onSizeChange"
/>
</div>
</el-card>
</section>
<el-dialog v-model="createLeagueVisible" :title="t('match.dialog.create_league')" width="520px" destroy-on-close>
<el-form label-width="96px">
@@ -451,36 +476,20 @@ function isLeagueExpanded(id: string) {
style="width: 100%"
/>
</el-form-item>
<el-form-item :label="t('match.field.home_en')">
<el-input v-model="form.homeTeamEn" :placeholder="t('match.ph.home_en')" />
</el-form-item>
<el-form-item :label="t('match.field.home_zh')">
<el-input v-model="form.homeTeamZh" :placeholder="t('match.ph.home_zh')" />
</el-form-item>
<el-form-item :label="t('match.field.home_ms')">
<el-input v-model="form.homeTeamMs" :placeholder="t('match.ph.home_ms')" />
</el-form-item>
<el-form-item :label="t('matchEditor.field.home_logo')">
<LogoUrlField
v-model="form.homeTeamLogoUrl"
:team-code="draftTeamCode('home')"
@pick="applyTeamFromCountry('home', $event)"
<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.away_en')">
<el-input v-model="form.awayTeamEn" :placeholder="t('match.ph.away_en')" />
</el-form-item>
<el-form-item :label="t('match.field.away_zh')">
<el-input v-model="form.awayTeamZh" :placeholder="t('match.ph.away_zh')" />
</el-form-item>
<el-form-item :label="t('match.field.away_ms')">
<el-input v-model="form.awayTeamMs" :placeholder="t('match.ph.away_ms')" />
</el-form-item>
<el-form-item :label="t('matchEditor.field.away_logo')">
<LogoUrlField
v-model="form.awayTeamLogoUrl"
:team-code="draftTeamCode('away')"
@pick="applyTeamFromCountry('away', $event)"
<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.featured')">
@@ -511,16 +520,16 @@ function isLeagueExpanded(id: string) {
</template>
<style scoped>
.filter-card { border-radius: 12px; }
.data-card {
border-radius: 12px;
}
.dialog-hint {
font-size: 13px;
color: #666;
margin: 0 0 12px;
line-height: 1.5;
}
.team-country-select {
width: 100%;
}
.dialog-hint code {
color: #aaa;
}
@@ -534,61 +543,25 @@ function isLeagueExpanded(id: string) {
margin-bottom: 16px;
}
.action-btns {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
align-items: center;
}
.action-btns :deep(.action-btn) {
margin: 0 !important;
min-width: 52px;
padding: 4px 8px !important;
font-size: 12px !important;
background: #1a1a1a !important;
border-color: #333 !important;
color: #bbb !important;
}
.action-btns :deep(.action-btn:not(.is-disabled):hover) {
background: #252525 !important;
border-color: #444 !important;
color: #fff !important;
}
.action-btns :deep(.action-btn.is-disabled) {
background: #121212 !important;
border-color: #252525 !important;
color: #444 !important;
opacity: 1 !important;
cursor: not-allowed !important;
}
.table-hint {
font-size: 12px;
color: #666;
margin: 0 0 10px;
line-height: 1.5;
flex-shrink: 0;
}
/* 列表表格随内容增高，滚动交给外层 table-wrap（仅赛事行） */
.matches-page .table-wrap .el-table {
height: auto !important;
}
.matches-page .table-wrap :deep(.el-table__header),
.matches-page .table-wrap :deep(.el-table__body) {
width: 100% !important;
}
.matches-page :deep(.el-table__expanded-cell) {
padding: 0 !important;
background: #0a0a0a;
}
.data-card :deep(.row-expandable) {
.list-panel :deep(.row-expandable) {
cursor: pointer;
}
.data-card :deep(.row-no-expand .el-table__expand-icon) {
.list-panel :deep(.row-no-expand .el-table__expand-icon) {
visibility: hidden;
pointer-events: none;
}
@@ -617,6 +590,11 @@ function isLeagueExpanded(id: string) {
flex-shrink: 0;
}
.league-en {
color: #aaa;
font-size: 13px;
}
.league-readonly {
color: var(--green-text);
font-weight: 500;

273
apps/admin/src/views/MatchesOutrights.vue Normal file
View File

@@ -0,0 +1,273 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRoute } 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,
} from '../utils/matchesListState.ts';
const { t } = useAdminLocale();
const route = useRoute();
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: '',
keyword: keyword.value,
});
}
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 };
async function load(options: LoadOptions = {}) {
const saved = options.restoreExpand ? readMatchesListUiState() : null;
if (saved) {
page.value = saved.page;
pageSize.value = saved.pageSize;
keyword.value = saved.keyword;
}
const { data } = await api.get('/admin/leagues', {
params: {
page: page.value,
pageSize: pageSize.value,
keyword: keyword.value.trim() || undefined,
},
});
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() {
const qLeague = route.query.leagueId;
if (typeof qLeague === 'string' && qLeague.trim()) {
expandedRowKeys.value = [qLeague.trim()];
persistListUiState();
return;
}
const qMatch = route.query.matchId;
if (typeof qMatch === 'string' && qMatch.trim()) {
try {
const { data } = await api.get(`/admin/outrights/${qMatch.trim()}`);
const lid = data.data?.leagueId as string | undefined;
if (lid) {
expandedRowKeys.value = [lid];
persistListUiState();
}
} catch {
/* ignore */
}
}
}
onMounted(async () => {
await load({ restoreExpand: true });
await resolveExpandFromQuery();
});
onBeforeUnmount(persistListUiState);
function onPageChange(p: number) {
page.value = p;
load({ keepExpand: true });
}
function onSizeChange(size: number) {
pageSize.value = size;
page.value = 1;
load({ keepExpand: true });
}
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;
const id = leagueId(row);
expandedRowKeys.value = expandedRowKeys.value.includes(id) ? [] : [id];
persistListUiState();
}
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 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 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="list-chrome">
<div class="list-chrome__row">
<div class="list-chrome__left">
<MatchesSubNav embedded />
<div class="list-chrome__filters">
<div class="list-chrome__field">
<span class="list-chrome__label">{{ t('common.keyword') }}</span>
<el-input
v-model="keyword"
:placeholder="t('match.filter.keyword_ph')"
clearable
style="width: 200px"
@keyup.enter="onSearch"
/>
</div>
<el-button type="primary" class="list-chrome__submit" @click="onSearch">
{{ t('common.search') }}
</el-button>
</div>
</div>
</div>
</div>
<section class="list-panel">
<p class="list-hint">{{ t('match.expand_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"
>
<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 prop="id" label="ID" width="72" />
<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>
</template>
</el-table-column>
<el-table-column :label="t('outright.col.teams_total')" width="120" align="center">
<template #default="{ row }">{{ outrightTeamCount(row) }}</template>
</el-table-column>
<el-table-column :label="t('match.col.league_code')" width="140" show-overflow-tooltip>
<template #default="{ row }">{{ rowOf(row).code }}</template>
</el-table-column>
</el-table>
</div>
<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>
.matches-page .table-wrap .el-table {
height: auto !important;
}
.matches-page .table-wrap :deep(.el-table__header),
.matches-page .table-wrap :deep(.el-table__body) {
width: 100% !important;
}
.matches-page :deep(.el-table__expanded-cell) {
padding: 0 !important;
background: #0a0a0a;
}
.list-panel :deep(.row-expandable) {
cursor: pointer;
}
.matchup-link {
color: var(--green-text);
}
.league-cell {
display: flex;
align-items: center;
gap: 8px;
}
.league-logo {
width: 28px;
height: 28px;
object-fit: contain;
flex-shrink: 0;
}
.league-en {
color: #aaa;
font-size: 13px;
}
</style>

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

@@ -18,6 +18,7 @@ import {
} from '../utils/bet-labels';
import { adminSelectionLabel } from '../utils/adminSelectionLabel.ts';
import type { AdminMatchDetail } from './match-form.ts';
import AdminSubNav from '../components/AdminSubNav.vue';
interface SettlementBetStats {
summary: {
@@ -82,7 +83,6 @@ const previewPageSize = ref(10);
// 智能比分推荐已暂时关闭（后端 smart-score.solver.ts 保留，恢复时接回 UI 与 POST /settlement/smart-score）
const matchId = computed(() => String(route.params.id ?? ''));
type PreviewItem = {
betNo: string;
betType: string;
@@ -295,7 +295,7 @@ async function loadMatch() {
};
if (detail.isOutright) {
ElMessage.warning(t('msg.outright_no_edit'));
router.replace('/outrights');
router.replace('/matches');
return;
}
match.value = detail;
@@ -407,10 +407,6 @@ async function confirm() {
await loadMatch();
}
function goBack() {
router.push('/matches');
}
onMounted(() => {
void loadMatch();
});
@@ -418,14 +414,14 @@ onMounted(() => {
<template>
<div v-loading="loading" class="settlement-page">
<div class="page-header">
<div class="header-left">
<el-button size="small" text @click="goBack">← {{ t('settlement.back') }}</el-button>
<h2 class="page-title">{{ t('page.settlement.title') }}</h2>
<span class="page-id">#{{ matchId }}</span>
</div>
<el-tag v-if="match" size="small" type="info">{{ statusLabel }}</el-tag>
</div>
<AdminSubNav
:title="t('page.settlement.title')"
:subtitle="`#${matchId}`"
>
<template #extra>
<el-tag v-if="match" size="small" type="info">{{ statusLabel }}</el-tag>
</template>
</AdminSubNav>
<el-card v-if="match" class="settle-top-card" shadow="never">
<p v-if="leagueLabel" class="match-league">{{ leagueLabel }}</p>
@@ -708,35 +704,6 @@ onMounted(() => {
overflow: hidden;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
flex-shrink: 0;
}
.header-left {
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.page-title {
font-size: 20px;
font-weight: 700;
color: #e8e8e8;
margin: 0;
}
.page-id {
font-size: 13px;
color: #666;
font-family: monospace;
}
.settle-top-card,
.preview-card {
flex-shrink: 0;

211
apps/admin/src/views/Users.vue
View File

@@ -21,6 +21,7 @@ import {
formatAmountFull,
shouldCompactAmount as shouldCompact,
} from '../utils/format-amount';
import AdminTableEmpty from '../components/AdminTableEmpty.vue';
const users = ref<PlayerRow[]>([]);
const total = ref(0);
@@ -57,6 +58,7 @@ const bettingLimits = ref({
});
const settingsSaving = ref(false);
const limitsSaving = ref(false);
const settingsCollapseOpen = ref<string[]>([]);
onMounted(() => {
loadAgentOptions();
@@ -319,106 +321,107 @@ function statusLabel(s: string) {
<template>
<div class="admin-list-page users-page">
<div class="page-toolbar">
<el-button type="primary" @click="openCreate">{{ t('user.create_btn') }}</el-button>
</div>
<el-collapse 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('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>
</el-collapse-item>
</el-collapse>
<el-card class="settings-card" shadow="never">
<div class="global-settings">
<span class="settings-title">{{ t('user.global_settings') }}</span>
<span class="settings-desc">{{ t('user.global_settings_hint') }}</span>
<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"
<div class="list-chrome">
<div class="list-chrome__row">
<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: 160px"
@keyup.enter="load"
/>
</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 :label="t('user.filter.agent')">
<el-select
v-model="filterParentId"
:placeholder="t('user.filter.agent_ph')"
clearable
style="width: 180px"
>
<el-option
v-for="a in agentOptions"
:key="a.id"
:label="a.username"
:value="a.id"
/>
</el-select>
</el-form-item>
</el-form>
</div>
</el-card>
<el-card class="settings-card" shadow="never">
<div class="global-settings">
<span class="settings-title">{{ t('user.betting_limits') }}</span>
<span class="settings-desc">{{ t('user.betting_limits_hint') }}</span>
<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 :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" :loading="limitsSaving" @click="saveBettingLimits">
{{ t('common.save') }}
</el-button>
<el-button type="primary" @click="load">{{ t('common.search') }}</el-button>
</el-form-item>
</el-form>
<div class="list-chrome__actions">
<el-button type="primary" @click="openCreate">{{ t('user.create_btn') }}</el-button>
</div>
</div>
</el-card>
</div>
<el-card class="filter-card" shadow="never">
<el-form inline>
<el-form-item :label="t('common.keyword')">
<el-input
v-model="keyword"
:placeholder="t('user.filter.username_ph')"
clearable
style="width: 160px"
@keyup.enter="load"
/>
</el-form-item>
<el-form-item :label="t('user.filter.agent')">
<el-select
v-model="filterParentId"
:placeholder="t('user.filter.agent_ph')"
clearable
style="width: 180px"
>
<el-option
v-for="a in agentOptions"
:key="a.id"
:label="a.username"
:value="a.id"
/>
</el-select>
</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="load">{{ t('common.search') }}</el-button>
</el-form-item>
</el-form>
</el-card>
<el-card class="data-card" shadow="never">
<section class="list-panel">
<div class="table-wrap">
<el-table :data="users" stripe>
<template #empty>
<AdminTableEmpty />
</template>
<el-table-column prop="id" label="ID" width="72" />
<el-table-column prop="username" :label="t('user.col.username')" min-width="120" />
<el-table-column :label="t('common.status')" width="88">
@@ -505,7 +508,7 @@ function statusLabel(s: string) {
@size-change="onSizeChange"
/>
</div>
</el-card>
</section>
<el-dialog v-model="createVisible" :title="t('user.dialog.create')" width="520px" destroy-on-close>
<el-form label-width="100px">
@@ -740,33 +743,15 @@ function statusLabel(s: string) {
</template>
<style scoped>
.filter-card { margin-bottom: 12px; border-radius: 12px; }
.settings-card { margin-bottom: 12px; border-radius: 12px; }
.data-card { border-radius: 12px; }
.pager { margin-top: 16px; display: flex; justify-content: flex-end; }
.settings-form :deep(.el-form-item) {
margin-bottom: 0;
margin-right: 12px;
}
.field-hint { font-size: 12px; color: #888; margin-top: 4px; }
.inline-hint { margin-top: 0; margin-left: 10px; display: inline-block; }
.amount-compact { white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
.amount-full-hint { font-size: 11px; color: #666; margin-left: 4px; }
.text-muted { color: #666; font-size: 12px; }
.global-settings {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 20px;
}
.settings-title {
font-size: 13px;
font-weight: 600;
color: #ccc;
margin-right: 4px;
}
.settings-desc {
font-size: 12px;
color: #888;
flex: 1;
min-width: 200px;
}
.password-mgmt-block {
margin: 4px 0 10px;
padding: 10px 12px;
@@ -794,10 +779,6 @@ function statusLabel(s: string) {
.block-hint {
margin: -4px 0 8px;
}
.settings-form :deep(.el-form-item) {
margin-bottom: 0;
margin-right: 16px;
}
.edit-meta {
display: flex;
align-items: center;

80
apps/admin/src/views/match-form.ts
View File

@@ -1,5 +1,11 @@
/** 后台手动新增赛事（投注平台最小字段） */
import {
countryDisplayName,
countryLogoUrl,
hasCountryCrest,
type BuiltinCountry,
} from '../data/builtinCountries';
import { FormValidationError } from '../i18n/form-validation';
export interface MatchCreateForm {
@@ -8,6 +14,8 @@ export interface MatchCreateForm {
leagueZh: string;
leagueMs: string;
startTime: string;
homeTeamCode: string;
awayTeamCode: string;
homeTeamZh: string;
homeTeamEn: string;
homeTeamMs: string;
@@ -31,6 +39,8 @@ export function emptyMatchForm(): MatchCreateForm {
leagueZh: '2026 世界杯',
leagueMs: 'Piala Dunia 2026',
startTime: '',
homeTeamCode: '',
awayTeamCode: '',
homeTeamZh: '',
homeTeamEn: '',
homeTeamMs: '',
@@ -122,6 +132,8 @@ export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
leagueZh: d.leagueZh,
leagueMs: d.leagueMs ?? '',
startTime: normalizeStartTimeForPicker(d.startTime),
homeTeamCode: d.homeTeamCode ?? '',
awayTeamCode: d.awayTeamCode ?? '',
homeTeamZh: d.homeTeamZh,
homeTeamEn: d.homeTeamEn,
homeTeamMs: d.homeTeamMs ?? '',
@@ -139,19 +151,67 @@ export function formFromDetail(d: AdminMatchDetail): MatchCreateForm {
};
}
export function fillBuiltinTeam(
form: MatchCreateForm,
side: 'home' | 'away',
country: BuiltinCountry,
) {
const msName = countryDisplayName(country, 'ms-MY');
const logo = countryLogoUrl(country, hasCountryCrest(country) ? 'crest' : 'flag');
if (side === 'home') {
form.homeTeamCode = country.code;
form.homeTeamZh = country.nameZh;
form.homeTeamEn = country.nameEn;
form.homeTeamMs = msName;
form.homeTeamLogoUrl = logo;
} else {
form.awayTeamCode = country.code;
form.awayTeamZh = country.nameZh;
form.awayTeamEn = country.nameEn;
form.awayTeamMs = msName;
form.awayTeamLogoUrl = logo;
}
}
export function clearBuiltinTeam(form: MatchCreateForm, side: 'home' | 'away') {
if (side === 'home') {
form.homeTeamCode = '';
form.homeTeamZh = '';
form.homeTeamEn = '';
form.homeTeamMs = '';
form.homeTeamLogoUrl = '';
} else {
form.awayTeamCode = '';
form.awayTeamZh = '';
form.awayTeamEn = '';
form.awayTeamMs = '';
form.awayTeamLogoUrl = '';
}
}
export function buildPlatformPayload(form: MatchCreateForm) {
if (!form.startTime.trim()) {
throw new FormValidationError('err.kickoff_required');
}
const homeOk = form.homeTeamZh.trim() || form.homeTeamEn.trim() || form.homeTeamMs.trim();
const awayOk = form.awayTeamZh.trim() || form.awayTeamEn.trim() || form.awayTeamMs.trim();
if (!homeOk || !awayOk) {
throw new FormValidationError('err.teams_required');
}
const homeKey = `${form.homeTeamZh.trim()}|${form.homeTeamEn.trim()}|${form.homeTeamMs.trim()}`.toLowerCase();
const awayKey = `${form.awayTeamZh.trim()}|${form.awayTeamEn.trim()}|${form.awayTeamMs.trim()}`.toLowerCase();
if (homeKey === awayKey) {
throw new FormValidationError('err.teams_same');
const homeCode = form.homeTeamCode.trim().toUpperCase();
const awayCode = form.awayTeamCode.trim().toUpperCase();
if (homeCode && awayCode) {
if (homeCode === awayCode) {
throw new FormValidationError('err.teams_same');
}
} else if (homeCode || awayCode) {
throw new FormValidationError('err.team_country_required');
} else {
const homeOk = form.homeTeamZh.trim() || form.homeTeamEn.trim() || form.homeTeamMs.trim();
const awayOk = form.awayTeamZh.trim() || form.awayTeamEn.trim() || form.awayTeamMs.trim();
if (!homeOk || !awayOk) {
throw new FormValidationError('err.team_country_required');
}
const homeKey = `${form.homeTeamZh.trim()}|${form.homeTeamEn.trim()}|${form.homeTeamMs.trim()}`.toLowerCase();
const awayKey = `${form.awayTeamZh.trim()}|${form.awayTeamEn.trim()}|${form.awayTeamMs.trim()}`.toLowerCase();
if (homeKey === awayKey) {
throw new FormValidationError('err.teams_same');
}
}
if (
!form.leagueId.trim() &&
@@ -167,6 +227,8 @@ export function buildPlatformPayload(form: MatchCreateForm) {
leagueEn: form.leagueEn.trim(),
leagueZh: form.leagueZh.trim(),
leagueMs: form.leagueMs.trim() || undefined,
homeTeamCode: homeCode || undefined,
awayTeamCode: awayCode || undefined,
homeTeamEn: form.homeTeamEn.trim(),
homeTeamZh: form.homeTeamZh.trim(),
homeTeamMs: form.homeTeamMs.trim() || undefined,

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

@@ -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
View 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
View 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>

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

@@ -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;

49
apps/admin/src/views/matches/MatchMarketsPage.vue
View File

@@ -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;

30
apps/admin/src/views/outrights/OutrightEditRedirect.vue Normal file
View File

@@ -0,0 +1,30 @@
<script setup lang="ts">
import { onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import api from '../../api';
const route = useRoute();
const router = useRouter();
onMounted(async () => {
const matchId = String(route.params.matchId ?? '').trim();
if (!matchId) {
await router.replace('/matches/outrights');
return;
}
try {
const { data } = await api.get(`/admin/outrights/${matchId}`);
const leagueId = data.data?.leagueId as string | undefined;
await router.replace({
path: '/matches/outrights',
query: leagueId ? { leagueId } : { matchId },
});
} catch {
await router.replace('/matches/outrights');
}
});
</script>
<template>
<div />
</template>

21
apps/admin/src/views/outrights/OutrightEventEditor.vue
View File

@@ -1,10 +1,11 @@
<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useAdminLocale } from '../../composables/useAdminLocale';
import api from '../../api';
import LogoUrlField from '../../components/LogoUrlField.vue';
import AdminSubNav from '../../components/AdminSubNav.vue';
import {
getBuiltinCountry,
resolveCountryCode,
@@ -12,7 +13,6 @@ import {
} from '../../data/builtinCountries';
const route = useRoute();
const router = useRouter();
const { t } = useAdminLocale();
const matchId = computed(() => String(route.params.matchId ?? ''));
@@ -336,11 +336,10 @@ async function saveRow(row: SelectionRow) {
<template>
<div class="event-editor" v-loading="loading">
<div class="editor-topbar">
<el-button size="small" text @click="router.push({ name: 'admin-outrights' })">
← {{ t('outright.back_list') }}
</el-button>
</div>
<AdminSubNav
:title="t('outright.section.edit')"
:subtitle="`#${matchId}`"
/>
<el-alert
v-if="!meta.playerVisible"
@@ -513,14 +512,6 @@ async function saveRow(row: SelectionRow) {
overflow: auto;
}
.editor-topbar {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
margin-bottom: 2px;
}
.player-alert {
flex-shrink: 0;
margin-bottom: 0;

40
apps/api/src/applications/admin/admin.controller.ts
View File

@@ -247,6 +247,14 @@ class CreatePlatformMatchDto {
@IsString()
leagueMs?: string;
@IsOptional()
@IsString()
homeTeamCode?: string;
@IsOptional()
@IsString()
awayTeamCode?: string;
@IsString()
homeTeamEn!: string;
@@ -471,6 +479,11 @@ class AddOutrightSelectionDto {
logoUrl?: string;
}
class AddOutrightSelectionsBatchDto {
@IsArray()
items!: AddOutrightSelectionDto[];
}
class UpdateOutrightSelectionTeamDto {
@IsOptional()
@IsString()
@@ -983,6 +996,15 @@ export class AdminController {
return jsonResponse(result);
}
@Get('leagues/:leagueId/outright')
@RequirePermissions(P.matches, P.reports)
async getLeagueOutright(@Param('leagueId') leagueId: string) {
const data = await this.outright.getOrCreateAndSyncForLeague(
BigInt(leagueId),
);
return jsonResponse(data);
}
@Get('leagues/:leagueId/matches')
@RequirePermissions(P.matches, P.reports)
async listLeagueMatches(
@@ -1096,6 +1118,8 @@ export class AdminController {
leagueEn: dto.leagueEn ?? '',
leagueZh: dto.leagueZh ?? '',
leagueMs: dto.leagueMs,
homeTeamCode: dto.homeTeamCode,
awayTeamCode: dto.awayTeamCode,
homeTeamEn: dto.homeTeamEn,
homeTeamZh: dto.homeTeamZh,
homeTeamMs: dto.homeTeamMs,
@@ -1319,6 +1343,22 @@ export class AdminController {
return jsonResponse(data);
}
@Post('outrights/:matchId/selections/batch')
@RequirePermissions(P.matches)
async addOutrightSelectionsBatch(
@Param('matchId') matchId: string,
@Body() dto: AddOutrightSelectionsBatchDto,
) {
if (!dto.items?.length) {
throw new BadRequestException('At least one team required');
}
const data = await this.outright.addSelectionsBatch(
BigInt(matchId),
dto.items,
);
return jsonResponse(data);
}
@Patch('outrights/:matchId/selections/:selectionId')
@RequirePermissions(P.matches)
async updateOutrightSelectionTeam(

22
apps/api/src/applications/player/player.controller.ts
View File

@@ -222,10 +222,28 @@ export class PlayerController {
return jsonResponse({ ...result, items });
}
@Get('bets/stats')
async betStats(@CurrentUser('id') userId: bigint) {
const stats = await this.bets.getUserBetStats(userId);
return jsonResponse(stats);
}
@Get('bets/:betNo')
async betDetail(@CurrentUser('id') userId: bigint, @Param('betNo') betNo: string) {
async betDetail(
@CurrentUser('id') userId: bigint,
@CurrentUser('locale') locale: string,
@Param('betNo') betNo: string,
) {
const bet = await this.bets.getBetByNo(betNo, userId);
return jsonResponse(bet);
if (!bet) return jsonResponse(null);
const [enriched] = await this.matches.enrichBetsForHistory([bet], locale);
return jsonResponse(enriched);
}
@Get('wallet/transactions/stats')
async transactionStats(@CurrentUser('id') userId: bigint) {
const stats = await this.wallet.getTransactionStats(userId);
return jsonResponse(stats);
}
@Get('wallet/transactions')

29
apps/api/src/domains/betting/bets.service.ts
View File

@@ -247,6 +247,35 @@ export class BetsService {
return { items, total, page, pageSize };
}
async getUserBetStats(userId: bigint) {
const [byStatus, aggregates] = await Promise.all([
this.prisma.bet.groupBy({
by: ['status'],
where: { userId },
_count: { id: true },
_sum: { stake: true, actualReturn: true, potentialReturn: true },
}),
this.prisma.bet.aggregate({
where: { userId },
_sum: { stake: true, actualReturn: true, potentialReturn: true },
_count: { id: true },
}),
]);
return {
total: aggregates._count.id,
totalStake: aggregates._sum.stake?.toString() ?? '0',
totalReturn: aggregates._sum.actualReturn?.toString() ?? '0',
totalPotentialReturn: aggregates._sum.potentialReturn?.toString() ?? '0',
byStatus: byStatus.map((g) => ({
status: g.status,
count: g._count.id,
totalStake: g._sum.stake?.toString() ?? '0',
totalReturn: g._sum.actualReturn?.toString() ?? '0',
})),
};
}
async getBetByNo(betNo: string, userId?: bigint) {
return this.prisma.bet.findFirst({
where: { betNo, ...(userId ? { userId } : {}) },

227
apps/api/src/domains/catalog/matches.service.ts
View File

@@ -262,31 +262,28 @@ export class MatchesService {
const kw = opts.keyword?.trim();
let idFilter: bigint[] | undefined;
if (kw || opts.status) {
// 状态仅用于单场计数/展开列表筛选，不隐藏无该状态单场的联赛（含新建空联赛）
if (kw) {
const ids = new Set<bigint>();
if (kw) {
const trRows = await this.prisma.entityTranslation.findMany({
where: {
entityType: 'LEAGUE',
fieldName: 'name',
value: { contains: kw, mode: 'insensitive' },
},
select: { entityId: true },
});
for (const r of trRows) ids.add(r.entityId);
}
const trRows = await this.prisma.entityTranslation.findMany({
where: {
entityType: 'LEAGUE',
fieldName: 'name',
value: { contains: kw, mode: 'insensitive' },
},
select: { entityId: true },
});
for (const r of trRows) ids.add(r.entityId);
const matchWhere: Prisma.MatchWhereInput = {
deletedAt: null,
isOutright: false,
};
if (opts.status) matchWhere.status = opts.status;
if (kw) {
matchWhere.OR = [
OR: [
{ matchName: { contains: kw, mode: 'insensitive' } },
{ homeTeam: { code: { contains: kw, mode: 'insensitive' } } },
{ awayTeam: { code: { contains: kw, mode: 'insensitive' } } },
];
}
],
};
if (opts.status) matchWhere.status = opts.status;
const matchLeagues = await this.prisma.match.findMany({
where: matchWhere,
select: { leagueId: true },
@@ -351,6 +348,27 @@ export class MatchesService {
},
select: { id: true, leagueId: true },
});
const fixtureTeamRows = await this.prisma.match.findMany({
where: {
leagueId: { in: leagueIds },
deletedAt: null,
isOutright: false,
},
select: {
leagueId: true,
homeTeam: { select: { id: true, code: true } },
awayTeam: { select: { id: true, code: true } },
},
});
const fixtureTeamSets = new Map<string, Set<string>>();
for (const row of fixtureTeamRows) {
const lid = row.leagueId.toString();
if (!fixtureTeamSets.has(lid)) fixtureTeamSets.set(lid, new Set());
const set = fixtureTeamSets.get(lid)!;
for (const team of [row.homeTeam, row.awayTeam]) {
if (team.code !== 'OUT') set.add(team.id.toString());
}
}
const matchStats = await this.betStatsForMatches(
leagueMatches.map((m) => m.id),
);
@@ -373,6 +391,50 @@ export class MatchesService {
}
leagueBetRollup.set(lid, cur);
}
const outrightMatches = await this.prisma.match.findMany({
where: {
leagueId: { in: leagueIds },
isOutright: true,
deletedAt: null,
},
select: { id: true, leagueId: true },
});
const outrightTeamCounts = new Map<string, number>();
if (outrightMatches.length > 0) {
const matchIdToLeagueId = new Map(
outrightMatches.map((m) => [m.id.toString(), m.leagueId.toString()]),
);
const outrightMatchIds = outrightMatches.map((m) => m.id);
const markets = await this.prisma.market.findMany({
where: {
matchId: { in: outrightMatchIds },
marketType: 'OUTRIGHT_WINNER',
},
select: { id: true, matchId: true },
});
if (markets.length > 0) {
const marketIdToMatchId = new Map(
markets.map((m) => [m.id.toString(), m.matchId.toString()]),
);
const selectionCounts = await this.prisma.marketSelection.groupBy({
by: ['marketId'],
where: {
marketId: { in: markets.map((m) => m.id) },
status: 'OPEN',
selectionCode: { not: 'OUT' },
},
_count: { id: true },
});
for (const row of selectionCounts) {
const matchId = marketIdToMatchId.get(row.marketId.toString());
const leagueId = matchId ? matchIdToLeagueId.get(matchId) : undefined;
if (leagueId) {
outrightTeamCounts.set(leagueId, row._count.id);
}
}
}
}
for (const item of items) {
const roll = leagueBetRollup.get(item.id);
if (roll) {
@@ -382,6 +444,10 @@ export class MatchesService {
pendingCount: roll.pendingCount,
};
}
(item as { fixtureTeamCount?: number }).fixtureTeamCount =
fixtureTeamSets.get(item.id)?.size ?? 0;
(item as { outrightTeamCount?: number }).outrightTeamCount =
outrightTeamCounts.get(item.id) ?? 0;
}
return { items, total, page: opts.page, pageSize: opts.pageSize };
@@ -501,11 +567,37 @@ export class MatchesService {
return result;
}
private async upsertTeamByCode(data: {
code: string;
teamZh: string;
teamEn: string;
teamMs?: string;
logoUrl?: string;
}) {
const code = data.code.trim().toUpperCase();
if (!code) throw new BadRequestException('请填写球队代码');
const logoUrl = data.logoUrl?.trim() || undefined;
const team = await this.prisma.team.upsert({
where: { code },
create: { code, logoUrl },
update: logoUrl ? { logoUrl } : {},
});
const translations: Record<string, string> = {
'zh-CN': data.teamZh.trim() || data.teamEn.trim(),
'en-US': data.teamEn.trim() || data.teamZh.trim(),
};
if (data.teamMs?.trim()) translations['ms-MY'] = data.teamMs.trim();
await this.upsertEntityTranslations('TEAM', team.id, translations);
return team;
}
async createPlatformMatch(data: {
leagueId?: bigint;
leagueEn?: string;
leagueZh?: string;
leagueMs?: string;
homeTeamCode?: string;
awayTeamCode?: string;
homeTeamZh: string;
homeTeamEn: string;
homeTeamMs?: string;
@@ -563,32 +655,56 @@ export class MatchesService {
});
}
}
const homeTeam = await this.upsertTeamFromZhiboExport({
id: null,
name: homeEn || homeZh || homeMs,
names: {
zh: homeZh || null,
en: homeEn || null,
zhTw: '',
vi: null,
km: null,
ms: homeMs || null,
},
image: data.homeTeamLogoUrl?.trim() || '',
});
const awayTeam = await this.upsertTeamFromZhiboExport({
id: null,
name: awayEn || awayZh || awayMs,
names: {
zh: awayZh || null,
en: awayEn || null,
zhTw: '',
vi: null,
km: null,
ms: awayMs || null,
},
image: data.awayTeamLogoUrl?.trim() || '',
});
const homeCode = data.homeTeamCode?.trim().toUpperCase();
const awayCode = data.awayTeamCode?.trim().toUpperCase();
let homeTeam;
let awayTeam;
if (homeCode && awayCode) {
if (homeCode === awayCode) {
throw new BadRequestException('主客队不能为同一支球队，请选择不同的队伍');
}
homeTeam = await this.upsertTeamByCode({
code: homeCode,
teamZh: homeZh,
teamEn: homeEn,
teamMs: homeMs,
logoUrl: data.homeTeamLogoUrl,
});
awayTeam = await this.upsertTeamByCode({
code: awayCode,
teamZh: awayZh,
teamEn: awayEn,
teamMs: awayMs,
logoUrl: data.awayTeamLogoUrl,
});
} else {
homeTeam = await this.upsertTeamFromZhiboExport({
id: null,
name: homeEn || homeZh || homeMs,
names: {
zh: homeZh || null,
en: homeEn || null,
zhTw: '',
vi: null,
km: null,
ms: homeMs || null,
},
image: data.homeTeamLogoUrl?.trim() || '',
});
awayTeam = await this.upsertTeamFromZhiboExport({
id: null,
name: awayEn || awayZh || awayMs,
names: {
zh: awayZh || null,
en: awayEn || null,
zhTw: '',
vi: null,
km: null,
ms: awayMs || null,
},
image: data.awayTeamLogoUrl?.trim() || '',
});
}
if (homeTeam.id === awayTeam.id) {
throw new BadRequestException('主客队不能为同一支球队，请填写不同的队名');
@@ -1199,13 +1315,18 @@ export class MatchesService {
matchIds.length > 0
? await this.prisma.match.findMany({
where: { id: { in: matchIds } },
include: { homeTeam: true, awayTeam: true },
include: { homeTeam: true, awayTeam: true, score: true },
})
: [];
const matchMeta = new Map<
string,
{ leagueName: string; matchTitle: string; isOutright: boolean }
{
leagueName: string;
matchTitle: string;
isOutright: boolean;
score: { ht: string | null; ft: string | null } | null;
}
>();
for (const m of matches) {
@@ -1214,10 +1335,20 @@ export class MatchesService {
this.getTranslation('TEAM', m.homeTeamId, locale),
this.getTranslation('TEAM', m.awayTeamId, locale),
]);
const s = m.score;
const ftScore =
s?.ftHomeScore != null && s?.ftAwayScore != null
? `${s.ftHomeScore}-${s.ftAwayScore}`
: null;
const htScore =
s?.htHomeScore != null && s?.htAwayScore != null
? `${s.htHomeScore}-${s.htAwayScore}`
: null;
matchMeta.set(m.id.toString(), {
leagueName,
matchTitle: m.isOutright ? leagueName : `${homeName} vs ${awayName}`,
isOutright: m.isOutright,
score: ftScore || htScore ? { ht: htScore, ft: ftScore } : null,
});
}
@@ -1237,9 +1368,12 @@ export class MatchesService {
resultStatus: sel.resultStatus,
matchTitle: m?.matchTitle ?? sel.selectionNameSnapshot,
leagueName: m?.leagueName ?? '',
score: m?.score ?? null,
};
});
const firstScore = meta?.score ?? legs[0]?.score ?? null;
return {
betNo: bet.betNo,
betType: bet.betType,
@@ -1261,6 +1395,7 @@ export class MatchesService {
: `${legs[0]?.marketLabel ?? ''}: ${legs[0]?.selectionName ?? ''}`,
legs,
isParlay,
matchScore: isParlay ? null : firstScore,
};
});
}

185
apps/api/src/domains/catalog/outright.service.ts
View File

@@ -168,6 +168,11 @@ export class OutrightService {
this.getOutrightTitle(match.id, 'ms-MY'),
]);
const addableFixtureTeams = await this.listAddableFixtureTeams(
match.leagueId,
fullMarket.id,
);
return {
id: match.id.toString(),
leagueId: match.leagueId.toString(),
@@ -187,9 +192,146 @@ export class OutrightService {
playerVisible: visibility.playerVisible,
playerHiddenReason: visibility.playerHiddenReason,
selections,
addableFixtureTeams,
};
}
private async listAddableFixtureTeams(leagueId: bigint, marketId: bigint) {
const teams = await this.collectFixtureTeamsForLeague(leagueId);
const openCodes = new Set(
(
await this.prisma.marketSelection.findMany({
where: {
marketId,
status: 'OPEN',
selectionCode: { not: PLACEHOLDER_TEAM_CODE },
},
select: { selectionCode: true },
})
).map((s) => s.selectionCode),
);
const result: Array<{
teamCode: string;
teamZh: string;
teamEn: string;
logoUrl: string | null;
}> = [];
for (const team of teams) {
if (openCodes.has(team.code)) continue;
const [teamZh, teamEn] = await Promise.all([
this.getTranslation('TEAM', team.id, 'zh-CN'),
this.getTranslation('TEAM', team.id, 'en-US'),
]);
result.push({
teamCode: team.code,
teamZh: teamZh || team.code,
teamEn: teamEn || team.code,
logoUrl: team.logoUrl ?? null,
});
}
return result;
}
/** 按联赛获取或创建冠军盘，并从单场赛程同步参赛队伍 */
async getOrCreateAndSyncForLeague(leagueId: bigint) {
let match = await this.prisma.match.findFirst({
where: { leagueId, isOutright: true, deletedAt: null },
orderBy: { id: 'asc' },
});
if (!match) {
const league = await this.prisma.league.findUnique({
where: { id: leagueId },
});
if (!league) throw new NotFoundException('League not found');
const [leagueZh, leagueEn, leagueMs] = await Promise.all([
this.getTranslation('LEAGUE', leagueId, 'zh-CN'),
this.getTranslation('LEAGUE', leagueId, 'en-US'),
this.getTranslation('LEAGUE', leagueId, 'ms-MY'),
]);
await this.createForAdmin({
leagueId,
titleZh: leagueZh || league.code,
titleEn: leagueEn || league.code,
titleMs: leagueMs || undefined,
status: 'DRAFT',
});
match = await this.prisma.match.findFirstOrThrow({
where: { leagueId, isOutright: true, deletedAt: null },
orderBy: { id: 'asc' },
});
}
return this.syncSelectionsFromLeagueFixtures(match.id);
}
async syncSelectionsFromLeagueFixtures(matchId: bigint) {
const match = await this.getOutrightMatchOrThrow(matchId);
const market = await this.ensureOutrightMarket(match.id);
const teams = await this.collectFixtureTeamsForLeague(match.leagueId);
const fixtureCodes = new Set(teams.map((t) => t.code));
const existing = await this.prisma.marketSelection.findMany({
where: {
marketId: market.id,
selectionCode: { not: PLACEHOLDER_TEAM_CODE },
},
});
// 仅当球队重新出现在单场赛程时，恢复曾被关闭的选项；不因「暂无单场」而自动关闭
for (const sel of existing) {
if (fixtureCodes.has(sel.selectionCode) && sel.status === 'CLOSED') {
await this.prisma.marketSelection.update({
where: { id: sel.id },
data: { status: 'OPEN' },
});
}
}
const existingCodes = new Set(existing.map((s) => s.selectionCode));
let sortOrder = existing.reduce((max, s) => Math.max(max, s.sortOrder), -1);
for (const team of teams) {
if (existingCodes.has(team.code)) continue;
const [teamZh, teamEn] = await Promise.all([
this.getTranslation('TEAM', team.id, 'zh-CN'),
this.getTranslation('TEAM', team.id, 'en-US'),
]);
sortOrder += 1;
await this.prisma.marketSelection.create({
data: {
marketId: market.id,
selectionCode: team.code,
selectionName: teamZh || teamEn || team.code,
odds: 10,
sortOrder,
status: 'OPEN',
},
});
}
return this.getForAdmin(matchId);
}
private async collectFixtureTeamsForLeague(leagueId: bigint) {
const matches = await this.prisma.match.findMany({
where: { leagueId, isOutright: false, deletedAt: null },
select: { homeTeamId: true, awayTeamId: true },
});
const teamIds = [
...new Set(matches.flatMap((m) => [m.homeTeamId, m.awayTeamId])),
];
if (teamIds.length === 0) return [];
return this.prisma.team.findMany({
where: {
id: { in: teamIds },
code: { not: PLACEHOLDER_TEAM_CODE },
},
orderBy: { code: 'asc' },
});
}
async createForAdmin(data: {
leagueId: bigint;
titleZh: string;
@@ -325,6 +467,17 @@ export class OutrightService {
where: { marketId: market.id, selectionCode: code },
});
if (existing) {
if (existing.status === 'CLOSED') {
await this.prisma.marketSelection.update({
where: { id: existing.id },
data: {
status: 'OPEN',
odds: data.odds,
selectionName: data.teamZh.trim() || data.teamEn,
},
});
return this.getForAdmin(matchId);
}
throw new BadRequestException('Selection already exists for this team code');
}
@@ -347,6 +500,38 @@ export class OutrightService {
return this.getForAdmin(matchId);
}
async addSelectionsBatch(
matchId: bigint,
items: Array<{
teamCode: string;
teamZh: string;
teamEn: string;
odds: number;
logoUrl?: string;
}>,
) {
if (!items.length) {
throw new BadRequestException('At least one team required');
}
let added = 0;
let skipped = 0;
for (const item of items) {
try {
await this.addSelection(matchId, item);
added += 1;
} catch (e) {
const msg = e instanceof Error ? e.message : '';
if (msg.includes('already exists')) {
skipped += 1;
continue;
}
throw e;
}
}
const data = await this.getForAdmin(matchId);
return { ...data, batchResult: { added, skipped } };
}
async updateSelectionTeam(
matchId: bigint,
selectionId: bigint,

26
apps/api/src/domains/ledger/wallet.service.ts
View File

@@ -272,4 +272,30 @@ export class WalletService {
]);
return { items, total, page, pageSize };
}
async getTransactionStats(userId: bigint) {
const [aggregates, byType] = await Promise.all([
this.prisma.walletTransaction.aggregate({
where: { userId },
_sum: { amount: true },
_count: { id: true },
}),
this.prisma.walletTransaction.groupBy({
by: ['transactionType'],
where: { userId },
_count: { id: true },
_sum: { amount: true },
}),
]);
return {
total: aggregates._count.id,
netAmount: aggregates._sum.amount?.toString() ?? '0',
byType: byType.map((g) => ({
transactionType: g.transactionType,
count: g._count.id,
totalAmount: g._sum.amount?.toString() ?? '0',
})),
};
}
}

56
apps/player/index.html
View File

@@ -8,8 +8,64 @@
<link rel="apple-touch-icon" href="/logo.png" />
<link rel="manifest" href="/site.webmanifest" />
<title>TheBet365</title>
<style>
html, body { margin: 0; padding: 0; height: 100%; background: #000; }
#app-loading {
position: fixed;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #000;
z-index: 9999;
}
#app-loading svg {
width: 48px;
height: 48px;
animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="app-loading">
<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
</linearGradient>
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="22%" stop-color="#F0D875" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="78%" stop-color="#B8942B" />
<stop offset="100%" stop-color="#8B6914" />
</linearGradient>
<filter id="gs-glow">
<feGaussianBlur stdDeviation="1.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="60%" stop-color="#F0D875" />
<stop offset="100%" stop-color="#D4AF37" />
</radialGradient>
</defs>
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
<circle cx="24" cy="24" r="20" stroke="url(#gs-arc)" stroke-width="3" fill="none" stroke-linecap="round" stroke-dasharray="31.4 94.2" filter="url(#gs-glow)" />
<circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
<animate attributeName="r" values="2.5;3.2;2.5" dur="1.2s" repeatCount="indefinite" />
</circle>
</svg>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>

368
apps/player/src/components/BetHistoryCard.vue
View File

@@ -1,12 +1,19 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { useRouter } from 'vue-router';
import { formatMoney } from '../utils/localeDisplay';
export interface BetScore {
ht: string | null;
ft: string | null;
}
export interface BetHistoryItem {
betNo: string;
betType: string;
stake: unknown;
totalOdds?: unknown;
potentialReturn: unknown;
actualReturn: unknown;
status: string;
@@ -16,17 +23,20 @@ export interface BetHistoryItem {
pickLabel: string;
isParlay?: boolean;
legCount?: number;
matchScore?: BetScore | null;
legs?: Array<{
marketLabel: string;
selectionName: string;
matchTitle: string;
odds: unknown;
resultStatus?: string | null;
score?: BetScore | null;
}>;
}
const props = defineProps<{ bet: BetHistoryItem }>();
const { t, locale } = useI18n();
const router = useRouter();
const statusKey = computed(() => {
const s = props.bet.status.toUpperCase();
@@ -40,13 +50,11 @@ const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
const placedDate = computed(() =>
new Date(props.bet.placedAt).toLocaleDateString(locale.value, {
year: 'numeric',
month: 'short',
day: 'numeric',
month: 'short', day: 'numeric',
}),
);
const matchTitle = computed(() => {
const title = computed(() => {
if (props.bet.isParlay) {
const n = props.bet.legCount ?? props.bet.legs?.length ?? 0;
return t('history.parlay_title', { n });
@@ -54,319 +62,135 @@ const matchTitle = computed(() => {
return props.bet.matchTitle;
});
const pickLabel = computed(() => {
if (props.bet.isParlay) return '';
// pickLabel format is "marketLabel: selectionName"
const raw = props.bet.pickLabel;
if (locale.value === 'zh-CN' || !raw) return raw;
const colonIdx = raw.indexOf(': ');
if (colonIdx < 0) return raw;
const sel = raw.slice(colonIdx + 2);
return raw.slice(0, colonIdx + 2) + translateSelection(sel);
const subtitle = computed(() => {
if (props.bet.isParlay) return props.bet.leagueName || t('history.parlay_league');
return props.bet.pickLabel || props.bet.leagueName || '';
});
const returnLabel = computed(() =>
statusKey.value === 'pending' ? t('history.est_return') : t('history.return'),
);
const returnAmount = computed(() => {
if (statusKey.value === 'won') return formatMoney(props.bet.actualReturn, locale.value);
if (statusKey.value === 'pending') return formatMoney(props.bet.potentialReturn, locale.value);
if (statusKey.value === 'lost') return formatMoney(0, locale.value);
if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(props.bet.stake ?? 0)), locale.value);
return formatMoney(props.bet.actualReturn ?? props.bet.potentialReturn, locale.value);
});
const returnHighlight = computed(() => statusKey.value === 'won');
const returnPending = computed(() => statusKey.value === 'pending');
const returnLost = computed(() => statusKey.value === 'lost');
// Translate Chinese selection-name snapshots stored in DB
const SEL_TRANS: Record<string, Record<string, string>> = {
'主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
'客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
'和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
'主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
'客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
'大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
'小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
'单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
'双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
'冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
};
function translateSelection(name: string): string {
if (locale.value === 'zh-CN') return name;
// exact match
const exact = SEL_TRANS[name];
if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
// e.g. "大 2.5" → translate first token, keep rest
const spaceIdx = name.indexOf(' ');
if (spaceIdx > 0) {
const head = name.slice(0, spaceIdx);
const tail = name.slice(spaceIdx);
const m = SEL_TRANS[head];
if (m) return (m[locale.value] ?? m['en-US'] ?? head) + tail;
}
return name;
function goDetail() {
router.push(`/bets/${props.bet.betNo}`);
}
// use grid when 3+ legs
const useGrid = computed(() => (props.bet.legs?.length ?? 0) >= 3);
</script>
<template>
<article class="bet-card">
<!-- top strip: meta + badge -->
<header class="card-head">
<div class="meta">
<span class="sport-icon" aria-hidden="true">⚽</span>
<span class="league">{{
bet.isParlay ? t('history.parlay_league') : bet.leagueName || t('history.league_default')
}}</span>
<span class="dot">·</span>
<span class="date">{{ placedDate }}</span>
</div>
<span class="status-badge" :class="statusKey">{{ statusLabel }}</span>
</header>
<!-- title -->
<h3 class="match-title">{{ matchTitle }}</h3>
<p v-if="pickLabel" class="pick-line">{{ pickLabel }}</p>
<!-- parlay legs -->
<div v-if="bet.isParlay && bet.legs?.length" class="parlay-legs" :class="{ grid: useGrid }">
<div v-for="(leg, i) in bet.legs" :key="i" class="leg">
<span class="leg-num">{{ i + 1 }}</span>
<div class="leg-info">
<span class="leg-match">{{ leg.matchTitle }}</span>
<span class="leg-pick">{{ leg.marketLabel }}: {{ translateSelection(leg.selectionName) }}</span>
</div>
</div>
<article class="bet-card" @click="goDetail">
<span
class="watermark"
:class="statusKey"
>{{ statusLabel }}</span>
<div class="card-left">
<span class="title">{{ title }}</span>
<span class="subtitle">{{ subtitle }} · {{ placedDate }}</span>
</div>
<!-- footer -->
<footer class="card-foot">
<div class="money-col">
<span class="money-label">{{ t('history.stake') }}</span>
<span class="money-value stake">{{ formatMoney(bet.stake, locale) }}</span>
</div>
<div class="money-col align-right">
<span class="money-label">{{ returnLabel }}</span>
<span
class="money-value return"
:class="{ highlight: returnHighlight, pending: statusKey === 'pending' }"
>{{ returnAmount }}</span>
</div>
</footer>
<div class="card-right">
<span class="return-amt" :class="{ highlight: returnHighlight, pending: returnPending, lost: returnLost }">
{{ returnAmount }}
</span>
</div>
<span class="chevron">›</span>
</article>
</template>
<style scoped>
.bet-card {
background: #141414;
border: 1px solid #252525;
border-radius: 12px;
padding: 0;
margin-bottom: 10px;
overflow: hidden;
position: relative;
}
.card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 14px 8px 16px;
background: #181818;
border-bottom: 1px solid #222;
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
cursor: pointer;
transition: background 0.15s;
-webkit-tap-highlight-color: transparent;
overflow: hidden;
}
.meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 5px;
font-size: 11.5px;
color: #888;
font-weight: 600;
.bet-card:active {
background: rgba(255, 255, 255, 0.02);
}
.sport-icon {
font-size: 13px;
line-height: 1;
}
.dot { opacity: 0.4; }
.date { color: #666; }
.status-badge {
flex-shrink: 0;
padding: 3px 10px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 800;
letter-spacing: 0.07em;
white-space: nowrap;
text-transform: uppercase;
}
.status-badge.won {
color: #3db865;
background: rgba(61, 184, 101, 0.12);
border: 1px solid rgba(61, 184, 101, 0.3);
}
.status-badge.pending {
color: #e8c84a;
background: rgba(232, 200, 74, 0.1);
border: 1px solid rgba(232, 200, 74, 0.3);
}
.status-badge.lost {
color: #e05050;
background: rgba(224, 80, 80, 0.1);
border: 1px solid rgba(224, 80, 80, 0.28);
}
.status-badge.push {
color: #888;
background: #1e1e1e;
border: 1px solid #333;
}
/* body */
.match-title {
font-size: 16px;
.watermark {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-35deg);
font-size: 28px;
font-weight: 900;
color: #f0f0f0;
line-height: 1.3;
padding: 10px 14px 4px 16px;
letter-spacing: 0.01em;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
text-transform: uppercase;
opacity: 0.18;
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
}
.pick-line {
font-size: 12.5px;
color: #888;
font-weight: 600;
line-height: 1.4;
padding: 0 14px 8px 16px;
}
.watermark.won { color: #3db865; }
.watermark.lost { color: #e05050; }
.watermark.push { color: #888; }
.watermark.pending { color: #e8c84a; }
/* ── parlay legs ── */
.parlay-legs {
padding: 4px 14px 8px 16px;
.card-left {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 5px;
gap: 3px;
}
/* grid mode: 2-column when 3+ legs */
.parlay-legs.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px 8px;
}
.leg {
display: flex;
align-items: flex-start;
gap: 6px;
background: #1a1a1a;
border: 1px solid #252525;
border-radius: 7px;
padding: 6px 8px;
min-width: 0;
}
.leg-num {
flex-shrink: 0;
width: 16px;
height: 16px;
border-radius: 50%;
background: #2a2a2a;
color: #777;
font-size: 9px;
.title {
font-size: 14px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
line-height: 1;
color: #e8e8e8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.leg-match {
.subtitle {
font-size: 11px;
font-weight: 700;
color: #c0c0c0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.leg-pick {
font-size: 10.5px;
color: #777;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* footer */
.card-foot {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
padding: 8px 14px 12px 16px;
border-top: 1px solid #1e1e1e;
margin-top: 2px;
}
.money-col {
display: flex;
flex-direction: column;
gap: 2px;
}
.money-col.align-right {
align-items: flex-end;
text-align: right;
}
.money-label {
font-size: 10px;
color: #666;
font-weight: 600;
letter-spacing: 0.02em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.money-value {
font-size: 19px;
.card-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.return-amt {
font-size: 15px;
font-weight: 900;
letter-spacing: 0.01em;
color: #888;
}
.money-value.stake {
color: #c8c8c8;
}
.return-amt.highlight { color: #3db865; }
.return-amt.pending { color: #e8c84a; }
.return-amt.lost { color: #e05050; }
.money-value.return {
color: #c8c8c8;
}
.money-value.return.pending {
color: #e8c84a;
text-shadow: 0 0 14px rgba(232, 200, 74, 0.3);
}
.money-value.highlight {
color: #3db865;
text-shadow: 0 0 14px rgba(61, 184, 101, 0.35);
font-size: 21px;
.chevron {
flex-shrink: 0;
font-size: 18px;
color: #333;
margin-left: 2px;
line-height: 1;
}
</style>

140
apps/player/src/components/BetSlipDrawer.vue
View File

@@ -3,6 +3,7 @@ import { ref, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { PARLAY_MIN_LEGS, PARLAY_MAX_LEGS } from '@thebet365/shared';
import { useBetSlipStore } from '../stores/betSlip';
import BetSuccessOverlay from './BetSuccessOverlay.vue';
import api from '../api';
const props = defineProps<{ modelValue: boolean }>();
@@ -18,11 +19,18 @@ const show = computed({
const loading = ref(false);
const error = ref('');
const success = ref('');
const showSuccess = ref(false);
function genId() {
return `${Date.now()}-${Math.random().toString(36).slice(2)}`;
}
function onSuccessDone() {
showSuccess.value = false;
show.value = false;
success.value = '';
}
async function placeBet() {
if (!slip.items.length) return;
loading.value = true;
@@ -58,10 +66,14 @@ async function placeBet() {
}
success.value = t('bet.place_success');
slip.clear();
showSuccess.value = true;
setTimeout(() => {
show.value = false;
success.value = '';
}, 1500);
if (showSuccess.value) {
showSuccess.value = false;
show.value = false;
success.value = '';
}
}, 2500);
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -75,58 +87,64 @@ async function placeBet() {
<template>
<div v-if="show" class="overlay" @click.self="show = false">
<div class="drawer">
<div class="drawer-header">
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
✕
<div class="drawer-body">
<div class="drawer-header">
<h3>{{ t('bet.bet_slip') }} <span class="count">({{ slip.count }})</span></h3>
<button type="button" class="close-btn" :aria-label="t('bet.cancel')" @click="show = false">
✕
</button>
</div>
<div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
<div class="item-name">{{ item.matchName }}</div>
<div class="item-sel">
{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
</div>
<button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
</div>
<p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
{{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
</p>
<p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
{{ t('bet.slip_singles_hint', { n: slip.count }) }}
</p>
<div v-if="slip.items.length" class="stake-area">
<label>{{
slip.canPlaceBatchSingles && slip.count > 1
? t('bet.slip_stake_per_bet')
: t('bet.stake')
}}</label>
<input v-model.number="slip.stake" type="number" min="1" />
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
</div>
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="success" class="success">{{ success }}</p>
</div>
<div class="drawer-foot">
<button
type="button"
class="btn-primary"
:disabled="loading || !slip.canSubmit"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
<div v-if="!slip.items.length" class="empty">{{ t('bet.slip_empty_hint') }}</div>
<div v-for="item in slip.items" :key="item.selectionId" class="slip-item">
<div class="item-name">{{ item.matchName }}</div>
<div class="item-sel">
{{ item.selectionName }} @ <span class="odds">{{ item.odds }}</span>
</div>
<button type="button" class="remove" @click="slip.removeItem(item.selectionId)">
{{ t('bet.slip_remove') }}
</button>
</div>
<p v-if="slip.canPlaceParlay" class="mode-hint mode-hint--parlay">
{{ t('bet.parlay') }} · {{ t('bet.slip_parlay_odds', { odds: slip.totalOdds.toFixed(2) }) }}
</p>
<p v-else-if="slip.canPlaceBatchSingles && slip.count > 1" class="mode-hint">
{{ t('bet.slip_singles_hint', { n: slip.count }) }}
</p>
<div v-if="slip.items.length" class="stake-area">
<label>{{
slip.canPlaceBatchSingles && slip.count > 1
? t('bet.slip_stake_per_bet')
: t('bet.stake')
}}</label>
<input v-model.number="slip.stake" type="number" min="1" />
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ slip.potentialReturn.toFixed(2) }}</strong>
</div>
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="success" class="success">{{ success }}</p>
<button
type="button"
class="btn-primary"
:disabled="loading || !slip.canSubmit"
@click="placeBet"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
</div>
<BetSuccessOverlay :show="showSuccess" @done="onSuccessDone" />
</template>
<style scoped>
@@ -144,9 +162,25 @@ async function placeBet() {
width: 100%;
max-height: 80vh;
border-radius: 16px 16px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
overflow-y: auto;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 14px 14px 0;
-webkit-overflow-scrolling: touch;
}
.drawer-foot {
flex-shrink: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.drawer-header {

154
apps/player/src/components/BetStatsPanel.vue Normal file
View File

@@ -0,0 +1,154 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoney, parseAmount } from '../utils/localeDisplay';
import type { BetHistoryItem } from './BetHistoryCard.vue';
const props = defineProps<{ items: BetHistoryItem[] }>();
const { t, locale } = useI18n();
const stats = computed(() => {
let total = 0;
let won = 0;
let lost = 0;
let pending = 0;
let push = 0;
let totalStake = 0;
let totalReturn = 0;
for (const bet of props.items) {
total++;
const s = bet.status.toUpperCase();
if (s === 'WON' || s === 'WIN') { won++; totalReturn += parseAmount(bet.actualReturn); }
else if (s === 'LOST' || s === 'LOSE') lost++;
else if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') push++;
else pending++;
totalStake += parseAmount(bet.stake);
if (s === 'WON' || s === 'WIN') totalReturn += parseAmount(bet.actualReturn);
else if (s === 'PENDING') totalReturn += parseAmount(bet.potentialReturn);
}
return { total, won, lost, pending, push, totalStake, totalReturn };
});
</script>
<template>
<div class="stats-panel">
<div class="stats-row">
<div class="stat-item">
<span class="stat-val">{{ stats.total }}</span>
<span class="stat-label">{{ t('history.stats_total') }}</span>
</div>
<div class="stat-item won">
<span class="stat-val">{{ stats.won }}</span>
<span class="stat-label">{{ t('history.stats_won') }}</span>
</div>
<div class="stat-item lost">
<span class="stat-val">{{ stats.lost }}</span>
<span class="stat-label">{{ t('history.stats_lost') }}</span>
</div>
<div class="stat-item pending">
<span class="stat-val">{{ stats.pending }}</span>
<span class="stat-label">{{ t('history.stats_pending') }}</span>
</div>
<div class="stat-item push">
<span class="stat-val">{{ stats.push }}</span>
<span class="stat-label">{{ t('history.stats_push') }}</span>
</div>
</div>
<div class="stats-bar">
<div class="bar-seg won" :style="{ flex: stats.won || 0.001 }" />
<div class="bar-seg lost" :style="{ flex: stats.lost || 0.001 }" />
<div class="bar-seg pending" :style="{ flex: stats.pending || 0.001 }" />
<div class="bar-seg push" :style="{ flex: stats.push || 0.001 }" />
</div>
<div class="stats-row secondary">
<div class="stat-item">
<span class="stat-val small">{{ formatMoney(stats.totalStake, locale) }}</span>
<span class="stat-label">{{ t('history.stats_stake') }}</span>
</div>
<div class="stat-item">
<span class="stat-val small gold">{{ formatMoney(stats.totalReturn, locale) }}</span>
<span class="stat-label">{{ t('history.stats_return') }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 12px 10px;
margin-bottom: 12px;
backdrop-filter: blur(10px);
}
.stats-row {
display: flex;
gap: 4px;
margin-bottom: 8px;
}
.stats-row.secondary {
margin-bottom: 0;
margin-top: 8px;
justify-content: space-around;
}
.stat-item {
flex: 1;
text-align: center;
min-width: 0;
}
.stat-val {
display: block;
font-size: 18px;
font-weight: 900;
font-variant-numeric: tabular-nums;
}
.stat-val.small {
font-size: 14px;
color: var(--text-muted);
}
.stat-val.gold {
color: var(--primary-light);
}
.stat-item.won .stat-val { color: #3db865; }
.stat-item.lost .stat-val { color: #e05050; }
.stat-item.pending .stat-val { color: #e8c84a; }
.stat-item.push .stat-val { color: #888; }
.stat-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-top: 2px;
}
.stats-bar {
display: flex;
height: 4px;
border-radius: 2px;
overflow: hidden;
gap: 2px;
}
.bar-seg {
min-width: 2px;
border-radius: 2px;
transition: flex 0.3s ease;
}
.bar-seg.won { background: #3db865; }
.bar-seg.lost { background: #e05050; }
.bar-seg.pending { background: #e8c84a; }
.bar-seg.push { background: #444; }
</style>

193
apps/player/src/components/BetSuccessOverlay.vue Normal file
View File

@@ -0,0 +1,193 @@
<script setup lang="ts">
import { ref, watch, onUnmounted, nextTick } from 'vue';
import { useI18n } from 'vue-i18n';
const props = defineProps<{ show: boolean }>();
const emit = defineEmits<{ done: [] }>();
const { t } = useI18n();
const canvasRef = ref<HTMLCanvasElement | null>(null);
let raf = 0;
let particles: Particle[] = [];
interface Particle {
x: number; y: number; vx: number; vy: number;
life: number; maxLife: number; size: number;
color: string; shape: number;
}
const COLORS = ['#D4AF37', '#FFD700', '#F0C040', '#C8A02E', '#E6C84C', '#B8960C'];
let w = 0;
let h = 0;
function spawnBurst() {
const cx = w / 2;
const cy = h * 0.38;
for (let i = 0; i < 80; i++) {
const angle = Math.random() * Math.PI * 2;
const speed = 1.5 + Math.random() * 5;
const color = COLORS[Math.floor(Math.random() * COLORS.length)];
particles.push({
x: cx + (Math.random() - 0.5) * 60,
y: cy + (Math.random() - 0.5) * 20,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed - 2,
life: 0,
maxLife: 60 + Math.random() * 80,
size: 3 + Math.random() * 5,
color,
shape: Math.floor(Math.random() * 3),
});
}
}
function draw() {
if (!canvasRef.value) return;
const ctx = canvasRef.value.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, w, h);
for (const p of particles) {
p.x += p.vx;
p.y += p.vy;
p.vy += 0.06;
p.life++;
const alpha = 1 - p.life / p.maxLife;
if (alpha <= 0) continue;
ctx.globalAlpha = alpha;
ctx.fillStyle = p.color;
if (p.shape === 0) {
ctx.beginPath();
ctx.arc(p.x, p.y, p.size * 0.5, 0, Math.PI * 2);
ctx.fill();
} else if (p.shape === 1) {
ctx.fillRect(p.x - p.size * 0.35, p.y - p.size * 0.35, p.size * 0.7, p.size * 0.7);
} else {
ctx.beginPath();
ctx.moveTo(p.x, p.y - p.size * 0.5);
ctx.lineTo(p.x + p.size * 0.4, p.y + p.size * 0.3);
ctx.lineTo(p.x - p.size * 0.4, p.y + p.size * 0.3);
ctx.closePath();
ctx.fill();
}
}
ctx.globalAlpha = 1;
particles = particles.filter((p) => p.life < p.maxLife);
raf = requestAnimationFrame(draw);
}
function start() {
setTimeout(() => { emit('done'); }, 2200);
void nextTick(() => {
if (!canvasRef.value) return;
const rect = canvasRef.value.getBoundingClientRect();
w = rect.width;
h = rect.height;
particles = [];
spawnBurst();
cancelAnimationFrame(raf);
raf = requestAnimationFrame(draw);
});
}
function stop() {
cancelAnimationFrame(raf);
particles = [];
}
watch(() => props.show, (v) => {
if (v) start();
else stop();
});
onUnmounted(stop);
</script>
<template>
<Teleport to="body">
<div v-if="show" class="bet-success-overlay" @click="emit('done')">
<canvas ref="canvasRef" class="confetti-canvas" />
<div class="success-card">
<svg class="check" viewBox="0 0 52 52" xmlns="http://www.w3.org/2000/svg">
<circle class="check-circle" cx="26" cy="26" r="24" fill="none" stroke="#D4AF37" stroke-width="3" />
<path class="check-mark" d="M14 27l7 7 16-16" fill="none" stroke="#D4AF37" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
<p class="success-text">{{ t('bet.place_success') }}</p>
</div>
</div>
</Teleport>
</template>
<style scoped>
.bet-success-overlay {
position: fixed;
inset: 0;
z-index: 300;
background: rgba(0, 0, 0, 0.82);
display: flex;
align-items: center;
justify-content: center;
}
.confetti-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.success-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
animation: card-pop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.2);
}
.check {
width: 72px;
height: 72px;
}
.check-circle {
stroke-dasharray: 151;
stroke-dashoffset: 151;
animation: circle-draw 0.5s 0.15s ease forwards;
}
.check-mark {
stroke-dasharray: 42;
stroke-dashoffset: 42;
animation: check-draw 0.35s 0.45s ease forwards;
}
.success-text {
color: var(--primary-light);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.04em;
animation: text-up 0.4s 0.4s ease both;
}
@keyframes card-pop {
0% { transform: scale(0.6); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes circle-draw {
to { stroke-dashoffset: 0; }
}
@keyframes check-draw {
to { stroke-dashoffset: 0; }
}
@keyframes text-up {
0% { opacity: 0; transform: translateY(8px); }
100% { opacity: 1; transform: translateY(0); }
}
</style>

19
apps/player/src/components/CashBalanceChip.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
const { locale, t } = useI18n();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const wallet = ref<{ availableBalance?: unknown; frozenBalance?: unknown; currency?: string } | null>(null);
function amountValue(value: unknown): number {
@@ -48,10 +49,24 @@ function toggle() {
function close() {
open.value = false;
}
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
</script>
<template>
<div class="cash-chip-wrap">
<div ref="root" class="cash-chip-wrap">
<button type="button" class="cash-chip" @click="toggle">
<span class="chip-body">
<span class="chip-label">{{ t('wallet.cash_balance') }}</span>

102
apps/player/src/components/GoldSpinner.vue Normal file
View File

@@ -0,0 +1,102 @@
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{
size?: number;
progress?: number;
active?: boolean;
}>();
const rotation = computed(() => (props.progress ?? 0) * 360);
const wrapperStyle = computed(() => {
if (props.active) return {};
return {
transform: `rotate(${rotation.value}deg)`,
transition: 'transform 0.05s linear',
};
});
</script>
<template>
<svg
:class="['gold-spinner', { 'is-active': active }]"
:width="size ?? 48"
:height="size ?? 48"
viewBox="0 0 48 48"
fill="none"
xmlns="http://www.w3.org/2000/svg"
:style="!active ? wrapperStyle : undefined"
>
<defs>
<linearGradient id="gs-track" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#D4AF37" stop-opacity="0.18" />
<stop offset="50%" stop-color="#F0D875" stop-opacity="0.25" />
<stop offset="100%" stop-color="#D4AF37" stop-opacity="0.18" />
</linearGradient>
<linearGradient id="gs-arc" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="22%" stop-color="#F0D875" />
<stop offset="50%" stop-color="#D4AF37" />
<stop offset="78%" stop-color="#B8942B" />
<stop offset="100%" stop-color="#8B6914" />
</linearGradient>
<filter id="gs-glow">
<feGaussianBlur stdDeviation="1.2" result="blur" />
<feMerge>
<feMergeNode in="blur" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<radialGradient id="gs-dot" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#FFF4C8" />
<stop offset="60%" stop-color="#F0D875" />
<stop offset="100%" stop-color="#D4AF37" />
</radialGradient>
</defs>
<circle cx="24" cy="24" r="20" stroke="url(#gs-track)" stroke-width="3" fill="none" />
<circle
cx="24"
cy="24"
r="20"
stroke="url(#gs-arc)"
stroke-width="3"
fill="none"
stroke-linecap="round"
stroke-dasharray="31.4 94.2"
filter="url(#gs-glow)"
/>
<circle cx="24" cy="4" r="2.5" fill="url(#gs-dot)" filter="url(#gs-glow)">
<animate
v-if="active"
attributeName="r"
values="2.5;3.2;2.5"
dur="1.2s"
repeatCount="indefinite"
/>
</circle>
<circle v-if="active" cx="36" cy="13.5" r="1.8" fill="#F0D875" opacity="0.6">
<animate attributeName="opacity" values="0.6;0.15;0.6" dur="0.9s" repeatCount="indefinite" begin="0.15s" />
</circle>
<circle v-if="active" cx="34" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1.1s" repeatCount="indefinite" begin="0.35s" />
</circle>
<circle v-if="active" cx="14" cy="34" r="1.5" fill="#D4AF37" opacity="0.4">
<animate attributeName="opacity" values="0.4;0.1;0.4" dur="1s" repeatCount="indefinite" begin="0.55s" />
</circle>
</svg>
</template>
<style scoped>
.gold-spinner {
display: block;
will-change: transform;
}
.gold-spinner.is-active {
animation: gs-spin 0.8s linear infinite;
}
@keyframes gs-spin {
to { transform: rotate(360deg); }
}
</style>

15
apps/player/src/components/LeagueAccordionItem.vue
View File

@@ -52,6 +52,10 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
<style scoped>
.league-block {
margin-bottom: 10px;
border: 1px solid #2e2e2e;
border-radius: 6px;
overflow: hidden;
background: #141414;
}
.league-row {
@@ -60,9 +64,9 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
align-items: center;
gap: 10px;
padding: 12px 12px;
background: #141414;
border: 1px solid #2e2e2e;
border-radius: 6px;
background: none;
border: none;
border-radius: 0;
text-align: left;
cursor: pointer;
}
@@ -117,7 +121,8 @@ const emit = defineEmits<{ toggle: []; bet: [id: string] }>();
.match-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
grid-template-columns: repeat(1, minmax(0, 1fr));
gap: 8px;
padding: 0 4px;
}
</style>

12
apps/player/src/components/LocaleSwitcher.vue
View File

@@ -30,12 +30,18 @@ function toggle() {
open.value = !open.value;
}
function onDocClick(e: MouseEvent) {
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => document.addEventListener('click', onDocClick));
onUnmounted(() => document.removeEventListener('click', onDocClick));
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
</script>
<template>

196
apps/player/src/components/MatchBetCard.vue
View File

@@ -1,7 +1,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import TeamEmblem from './TeamEmblem.vue';
import { teamFlagUrl } from '../utils/teamFlag';
const props = defineProps<{
match: {
@@ -18,44 +18,50 @@ const props = defineProps<{
const emit = defineEmits<{ bet: [id: string] }>();
const { t, locale } = useI18n();
const { t } = useI18n();
const kickoff = computed(() => {
const d = new Date(props.match.startTime);
return d.toLocaleString(locale.value, {
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
hour12: true,
});
});
function teamBgStyle(
code?: string,
name?: string,
logoUrl?: string | null,
) {
const url = teamFlagUrl(code, name, logoUrl);
if (!url) return {};
const isCustomLogo = Boolean(logoUrl?.trim());
return {
backgroundImage: `url(${url})`,
backgroundSize: isCustomLogo ? '36px auto' : '48px auto',
};
}
const homeBgStyle = computed(() =>
teamBgStyle(
props.match.homeTeamCode,
props.match.homeTeamName,
props.match.homeTeamLogoUrl,
),
);
const awayBgStyle = computed(() =>
teamBgStyle(
props.match.awayTeamCode,
props.match.awayTeamName,
props.match.awayTeamLogoUrl,
),
);
</script>
<template>
<article class="match-card">
<div class="kickoff">{{ kickoff }}</div>
<div class="teams-stack">
<div class="side">
<TeamEmblem
size="sm"
:team-code="match.homeTeamCode"
:team-name="match.homeTeamName"
:logo-url="match.homeTeamLogoUrl"
/>
<span class="name">{{ match.homeTeamName }}</span>
</div>
<div class="bg-split" aria-hidden="true">
<div class="bg-half home-bg" :style="homeBgStyle" />
<div class="bg-half away-bg" :style="awayBgStyle" />
<div class="bg-veil" />
</div>
<div class="teams-row">
<span class="name home-name">{{ match.homeTeamName }}</span>
<span class="vs">VS</span>
<div class="side">
<TeamEmblem
size="sm"
:team-code="match.awayTeamCode"
:team-name="match.awayTeamName"
:logo-url="match.awayTeamLogoUrl"
/>
<span class="name">{{ match.awayTeamName }}</span>
</div>
<span class="name away-name">{{ match.awayTeamName }}</span>
</div>
<button type="button" class="bet-btn btn-gold-outline" @click="emit('bet', match.id)">
{{ t('bet.place_bet_short') }}
@@ -65,69 +71,105 @@ const kickoff = computed(() => {
<style scoped>
.match-card {
background: #1a1a1a;
border: 1px solid #2a2a2a;
position: relative;
overflow: hidden;
background: #0d0d0d;
border: 1px solid rgba(255, 215, 0, 0.25);
border-radius: 6px;
padding: 6px 4px 5px;
padding: 8px 10px 10px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
min-width: 0;
}
.bg-split {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.bg-half {
position: absolute;
inset: 0;
background-repeat: no-repeat;
opacity: 0.48;
}
.home-bg {
clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%);
background-position: 22% 50%;
}
.away-bg {
clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%);
background-position: 78% 50%;
}
.bg-veil {
position: absolute;
inset: 0;
background: linear-gradient(
102deg,
rgba(0, 0, 0, 0.52) 0%,
rgba(0, 0, 0, 0.28) 46%,
rgba(0, 0, 0, 0.28) 54%,
rgba(0, 0, 0, 0.52) 100%
);
}
.teams-row {
position: relative;
z-index: 1;
width: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 4px;
min-width: 0;
}
.kickoff {
width: 100%;
text-align: center;
font-size: 9px;
line-height: 1.25;
color: var(--text-muted);
font-weight: 600;
}
.teams-stack {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.side {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
min-width: 0;
min-height: 32px;
}
.name {
width: 100%;
font-size: 10px;
font-weight: 800;
font-size: 14px;
font-weight: 900;
color: var(--primary-light);
line-height: 1.2;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 2px;
line-height: 1.25;
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
word-break: keep-all;
}
.home-name {
text-align: left;
padding-left: 2px;
}
.away-name {
text-align: right;
padding-right: 2px;
}
.vs {
font-size: 9px;
flex-shrink: 0;
font-size: 10px;
font-weight: 800;
color: var(--text-muted);
line-height: 1;
letter-spacing: 0.06em;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}
.bet-btn {
width: 100%;
margin-top: 2px;
padding: 3px 2px;
border-radius: 4px;
font-size: 10px;
position: relative;
z-index: 1;
width: auto;
min-width: 72px;
max-width: 42%;
margin-top: 0;
padding: 5px 18px;
border-radius: 6px;
font-size: 12px;
letter-spacing: 0.04em;
line-height: 1.2;
}

18
apps/player/src/components/UserAvatarMenu.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
@@ -11,6 +11,7 @@ const auth = useAuthStore();
const router = useRouter();
const { avatarUrl, loadProfile } = usePlayerProfile();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const displayAvatarUrl = computed(() => {
if (avatarUrl.value) return avatarUrl.value;
@@ -30,6 +31,19 @@ function close() {
open.value = false;
}
function onOutsideClick(e: Event) {
if (!root.value?.contains(e.target as Node)) open.value = false;
}
onMounted(() => {
document.addEventListener('click', onOutsideClick);
document.addEventListener('touchend', onOutsideClick);
});
onUnmounted(() => {
document.removeEventListener('click', onOutsideClick);
document.removeEventListener('touchend', onOutsideClick);
});
function goEdit() {
close();
router.push('/profile/edit');
@@ -43,7 +57,7 @@ function logout() {
</script>
<template>
<div class="avatar-wrap">
<div ref="root" class="avatar-wrap">
<button type="button" class="avatar-btn" :aria-expanded="open" @click="toggle">
<img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="avatar-img" />
</button>

104
apps/player/src/components/WalletStatsPanel.vue Normal file
View File

@@ -0,0 +1,104 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { formatMoney, parseAmount } from '../utils/localeDisplay';
interface Transaction {
transactionType: string;
amount: string;
createdAt: string;
transactionId?: string;
}
const props = defineProps<{ items: Transaction[] }>();
const { t, locale } = useI18n();
const stats = computed(() => {
let income = 0;
let expense = 0;
for (const tx of props.items) {
const amt = parseAmount(tx.amount);
if (amt >= 0) income += amt;
else expense += Math.abs(amt);
}
const net = income - expense;
return { income, expense, net };
});
</script>
<template>
<div class="wallet-stats-panel">
<div class="stats-row">
<div class="stat-item">
<span class="stat-val income">{{ formatMoney(stats.income, locale) }}</span>
<span class="stat-label">{{ t('wallet.stats_income') }}</span>
</div>
<div class="stat-divider" />
<div class="stat-item">
<span class="stat-val expense">{{ formatMoney(stats.expense, locale) }}</span>
<span class="stat-label">{{ t('wallet.stats_expense') }}</span>
</div>
<div class="stat-divider" />
<div class="stat-item">
<span class="stat-val" :class="stats.net >= 0 ? 'income' : 'expense'">
{{ formatMoney(stats.net, locale) }}
</span>
<span class="stat-label">{{ t('wallet.stats_net') }}</span>
</div>
</div>
</div>
</template>
<style scoped>
.wallet-stats-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 12px;
margin-bottom: 12px;
backdrop-filter: blur(10px);
}
.stats-row {
display: flex;
align-items: center;
}
.stat-item {
flex: 1;
text-align: center;
min-width: 0;
}
.stat-divider {
width: 1px;
height: 32px;
background: var(--border);
flex-shrink: 0;
}
.stat-val {
display: block;
font-size: 15px;
font-weight: 900;
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.stat-val.income { color: #3db865; }
.stat-val.expense { color: #e05050; }
.stat-label {
display: block;
font-size: 10px;
font-weight: 700;
color: var(--text-muted);
letter-spacing: 0.04em;
margin-top: 3px;
}
</style>

82
apps/player/src/components/match-detail/CorrectScoreConfirmModal.vue
View File

@@ -52,38 +52,42 @@ function formatOdds(odds: string) {
</button>
</div>
<div class="slip-item">
<div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
<div class="item-sel">{{ marketLabel }}</div>
</div>
<div class="drawer-body">
<div class="slip-item">
<div class="item-name">{{ homeTeamName }} vs {{ awayTeamName }}</div>
<div class="item-sel">{{ marketLabel }}</div>
</div>
<div v-for="(line, idx) in lines" :key="idx" class="slip-item">
<div class="item-name">{{ line.scoreDisplay }}</div>
<div class="item-sel">
@ <span class="odds">{{ formatOdds(line.odds) }}</span>
· {{ formatMoney(line.stake, locale) }}
<div v-for="(line, idx) in lines" :key="idx" class="slip-item">
<div class="item-name">{{ line.scoreDisplay }}</div>
<div class="item-sel">
@ <span class="odds">{{ formatOdds(line.odds) }}</span>
· {{ formatMoney(line.stake, locale) }}
</div>
</div>
</div>
<div class="stake-area">
<div class="summary-row">
<span>{{ t('bet.cs_confirm_total_stake') }}</span>
<strong>{{ formatMoney(totalStake, locale) }}</strong>
<div class="drawer-foot">
<div class="stake-area">
<div class="summary-row">
<span>{{ t('bet.cs_confirm_total_stake') }}</span>
<strong>{{ formatMoney(totalStake, locale) }}</strong>
</div>
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ formatMoney(totalReturn, locale) }}</strong>
</div>
</div>
<div class="return">
{{ t('bet.slip_est_return') }}:
<strong>{{ formatMoney(totalReturn, locale) }}</strong>
</div>
</div>
<button
type="button"
class="btn-primary"
:disabled="loading"
@click="emit('confirm')"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
<button
type="button"
class="btn-primary"
:disabled="loading"
@click="emit('confirm')"
>
{{ loading ? t('bet.placing') : t('bet.place_bet') }}
</button>
</div>
</div>
</div>
</template>
@@ -103,16 +107,36 @@ function formatOdds(odds: string) {
width: 100%;
max-height: 80vh;
border-radius: 16px 16px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0));
overflow-y: auto;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.drawer-body {
flex: 1;
overflow-y: auto;
padding: 10px 14px 0;
-webkit-overflow-scrolling: touch;
}
.drawer-foot {
flex-shrink: 0;
padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
background: rgba(14, 14, 14, 0.98);
border-top: 1px solid var(--border-gold-soft);
box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
padding: 14px 14px 12px;
flex-shrink: 0;
background: rgba(14, 14, 14, 0.98);
border-bottom: 1px solid #2a2a2a;
z-index: 2;
}
.drawer-header h3 {

32
apps/player/src/components/match-detail/MarketTypeTile.vue
View File

@@ -21,9 +21,9 @@ const { t } = useI18n();
@click="emit('toggle')"
>
<span class="row-label">{{ label }}</span>
<span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
<span v-if="promoLabel" class="row-promo">{{ promoLabel }}</span>
<span v-if="!hasMarket" class="row-muted">{{ t('bet.market_closed') }}</span>
<span v-else class="row-chevron" aria-hidden="true">{{ expanded ? '▾' : '▸' }}</span>
<span v-else class="row-chevron" :class="{ open: expanded }" aria-hidden="true">▸</span>
</button>
</template>
@@ -33,16 +33,35 @@ const { t } = useI18n();
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 12px;
padding: 13px 12px;
background: transparent;
border: none;
text-align: left;
transition: background 0.15s ease;
border-radius: 0;
position: relative;
overflow: hidden;
}
.row:not(.disabled):active {
background: rgba(255, 255, 255, 0.025);
}
.row.expanded {
background: rgba(255, 255, 255, 0.03);
}
.row.expanded::before {
content: '';
position: absolute;
top: 0;
left: 12px;
right: 12px;
height: 2px;
background: linear-gradient(90deg, transparent 0%, var(--primary) 30%, var(--primary-light) 50%, var(--primary) 70%, transparent 100%);
opacity: 0.6;
}
.row.disabled {
opacity: 0.4;
}
@@ -53,6 +72,7 @@ const { t } = useI18n();
font-size: 13px;
font-weight: 700;
color: var(--text);
letter-spacing: 0.02em;
}
.row-promo {
@@ -73,14 +93,18 @@ const { t } = useI18n();
.row-muted {
font-size: 10px;
color: var(--text-muted);
font-weight: 600;
}
.row-chevron {
font-size: 11px;
color: var(--text-muted);
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s;
flex-shrink: 0;
}
.row.expanded .row-chevron {
.row-chevron.open {
transform: rotate(90deg);
color: var(--primary-light);
}
</style>

5
apps/player/src/components/outright/OutrightBetModal.vue
View File

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
import api from '../../api';
import { formatMoney, parseAmount } from '../../utils/localeDisplay';
import { teamFlagUrl } from '../../utils/teamFlag';
import BetSuccessOverlay from '../BetSuccessOverlay.vue';
export interface OutrightPick {
selectionId: string;
@@ -30,6 +31,7 @@ const error = ref('');
const balance = ref(0);
const successBalance = ref(0);
const successStake = ref(0);
const showSuccess = ref(false);
const flagUrl = computed(() =>
props.pick ? teamFlagUrl(props.pick.teamCode, props.pick.teamName) : null,
@@ -102,6 +104,7 @@ async function submit() {
successBalance.value = balance.value - stake.value;
balance.value = successBalance.value;
step.value = 'success';
showSuccess.value = true;
} catch (e: unknown) {
error.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -206,6 +209,8 @@ function formatOdds(odds: string) {
</template>
</div>
</div>
<BetSuccessOverlay :show="showSuccess" @done="showSuccess = false" />
</template>
<style scoped>

91
apps/player/src/components/outright/OutrightEventSection.vue
View File

@@ -26,20 +26,15 @@ export interface OutrightEvent {
const props = defineProps<{
event: OutrightEvent;
expanded: boolean;
visibleLimit: number;
loadingMore: boolean;
}>();
const emit = defineEmits<{
toggle: [];
loadMore: [];
pick: [selection: OutrightSelection];
}>();
const { t } = useI18n();
const INITIAL_BATCH = 20;
const headTitle = computed(() => {
const raw = props.event.title.replace(/^\*+/, '').trim();
return raw || props.event.leagueName || t('bet.tab_outright');
@@ -49,28 +44,16 @@ const headMeta = computed(() => {
const total = props.event.selectionCount ?? props.event.selections.length;
return t('bet.outright_teams_count', { n: total });
});
const visibleSelections = computed(() =>
props.event.selections.slice(0, props.visibleLimit),
);
const hasMore = computed(
() => props.event.selections.length > props.visibleLimit,
);
const showLoadMore = computed(
() => props.event.selections.length > INITIAL_BATCH && hasMore.value,
);
</script>
<template>
<section class="event-block">
<button type="button" class="event-head" :aria-expanded="expanded" @click="emit('toggle')">
<button type="button" class="event-head" :class="{ 'is-expanded': expanded }" :aria-expanded="expanded" @click="emit('toggle')">
<span class="toggle-icon" :class="{ open: expanded }">
<span class="toggle-mark">{{ expanded ? '−' : '+' }}</span>
</span>
<span class="event-head-text">
<span class="event-title">*{{ headTitle }}</span>
<span class="event-title">{{ headTitle }}</span>
<span v-if="event.leagueName && event.leagueName !== headTitle" class="event-league">
{{ event.leagueName }}
</span>
@@ -79,10 +62,10 @@ const showLoadMore = computed(
<img :src="saishiImg" alt="" class="event-saishi" />
</button>
<div v-show="expanded" class="options-wrap">
<div v-show="expanded" class="options-scroll">
<div class="options-grid">
<OutrightOptionCard
v-for="sel in visibleSelections"
v-for="sel in event.selections"
:key="sel.id"
:team-code="sel.teamCode"
:team-name="sel.teamName"
@@ -91,24 +74,6 @@ const showLoadMore = computed(
@pick="emit('pick', sel)"
/>
</div>
<div v-if="showLoadMore" class="load-more-zone">
<p class="load-more-hint">
{{
t('bet.outright_shown_count', {
shown: visibleSelections.length,
total: event.selections.length,
})
}}
</p>
<button
type="button"
class="load-more-btn"
:disabled="loadingMore"
@click="emit('loadMore')"
>
{{ loadingMore ? t('bet.loading') : t('bet.outright_load_more') }}
</button>
</div>
</div>
</section>
</template>
@@ -116,6 +81,9 @@ const showLoadMore = computed(
<style scoped>
.event-block {
margin-bottom: 10px;
border: 1px solid #2e2e2e;
border-radius: 6px;
overflow: hidden;
}
.event-head {
@@ -125,8 +93,8 @@ const showLoadMore = computed(
gap: 10px;
padding: 12px 10px;
background: #141414;
border: 1px solid #2e2e2e;
border-radius: 6px;
border: none;
border-radius: 0;
text-align: left;
}
@@ -192,43 +160,18 @@ const showLoadMore = computed(
border-left: 1px solid #2a2a2a;
}
.options-wrap {
padding: 10px 0 4px;
.options-scroll {
max-height: 408px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 8px 2px 2px;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
}
.options-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
.load-more-zone {
padding: 14px 8px 6px;
text-align: center;
}
.load-more-hint {
margin: 0 0 10px;
font-size: 12px;
font-weight: 600;
color: var(--text-muted);
}
.load-more-btn {
width: 100%;
max-width: 280px;
padding: 11px 16px;
border-radius: 8px;
border: 1px solid var(--border-gold-soft);
background: linear-gradient(180deg, #1f1f1f, #141414);
color: var(--primary-light);
font-size: 13px;
font-weight: 800;
font-family: inherit;
letter-spacing: 0.04em;
}
.load-more-btn:disabled {
opacity: 0.65;
gap: 6px;
}
</style>

29
apps/player/src/components/outright/OutrightOptionCard.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, ref, watch, onMounted, onUnmounted } from 'vue';
import { teamFlagUrl } from '../../utils/teamFlag';
const props = defineProps<{
@@ -15,6 +15,9 @@ const flag = computed(
() => props.logoUrl?.trim() || teamFlagUrl(props.teamCode, props.teamName),
);
const flagFailed = ref(false);
const imgVisible = ref(false);
const cardRef = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
function onFlagError() {
flagFailed.value = true;
@@ -31,16 +34,34 @@ function formatOdds(odds: string) {
const n = parseFloat(odds);
return Number.isFinite(n) ? n.toFixed(2) : odds;
}
onMounted(() => {
if (!cardRef.value) return;
observer = new IntersectionObserver(
(entries) => {
const entry = entries[0];
if (entry.isIntersecting) {
imgVisible.value = true;
observer?.disconnect();
}
},
{ rootMargin: '120px' }
);
observer.observe(cardRef.value);
});
onUnmounted(() => {
observer?.disconnect();
});
</script>
<template>
<button type="button" class="option-card" @click="emit('pick')">
<button ref="cardRef" type="button" class="option-card" @click="emit('pick')">
<img
v-if="flag && !flagFailed"
v-if="imgVisible && flag && !flagFailed"
:src="flag"
alt=""
class="flag"
loading="lazy"
@error="onFlagError"
/>
<span v-else class="flag-placeholder" aria-hidden="true">⚽</span>

104
apps/player/src/components/outright/OutrightPanel.vue
View File

@@ -8,19 +8,15 @@ import OutrightEventSection, {
} from './OutrightEventSection.vue';
import OutrightBetModal, { type OutrightPick } from './OutrightBetModal.vue';
import emptyMatchesImg from '../../assets/images/empty-matches.svg';
import GoldSpinner from '../../components/GoldSpinner.vue';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
const { t } = useI18n();
const INITIAL_BATCH = 20;
const LOAD_MORE_STEP = 28;
const loading = ref(true);
const loadError = ref('');
const loadingMoreId = ref<string | null>(null);
const events = ref<OutrightEvent[]>([]);
const expanded = ref<Set<string>>(new Set());
const visibleLimits = ref<Record<string, number>>({});
const modalOpen = ref(false);
const activePick = ref<OutrightPick | null>(null);
@@ -29,60 +25,37 @@ const totalSelections = computed(() =>
events.value.reduce((sum, e) => sum + e.selections.length, 0),
);
function resetVisibleLimits() {
const next: Record<string, number> = {};
for (const e of events.value) {
next[e.id] =
e.selections.length <= INITIAL_BATCH
? e.selections.length
: INITIAL_BATCH;
}
visibleLimits.value = next;
}
function syncExpandedAfterLoad() {
const ids = events.value.map((e) => e.id);
const kept = new Set([...expanded.value].filter((id) => ids.includes(id)));
if (kept.size > 0) {
expanded.value = kept;
// 只保留仍然存在的 id，且最多保留 1 个
const kept = [...expanded.value].filter((id) => ids.includes(id));
if (kept.length > 0) {
expanded.value = new Set([kept[0]]);
return;
}
if (ids.length === 1) {
expanded.value = new Set(ids);
} else if (ids.length <= 3) {
expanded.value = new Set(ids);
} else {
if (ids.length > 0) {
expanded.value = new Set([ids[0]]);
} else {
expanded.value = new Set();
}
}
function hasMoreSelections(event: OutrightEvent) {
const limit = visibleLimits.value[event.id] ?? INITIAL_BATCH;
return event.selections.length > limit;
}
function loadMore(event: OutrightEvent) {
if (loadingMoreId.value || !hasMoreSelections(event)) return;
loadingMoreId.value = event.id;
const current = visibleLimits.value[event.id] ?? INITIAL_BATCH;
visibleLimits.value = {
...visibleLimits.value,
[event.id]: Math.min(current + LOAD_MORE_STEP, event.selections.length),
};
loadingMoreId.value = null;
}
async function load() {
loading.value = true;
const hadData = events.value.length > 0;
if (!hadData) loading.value = true;
loadError.value = '';
try {
const { data } = await api.get('/player/outrights');
const list = (data?.data ?? []) as OutrightEvent[];
events.value = list.filter((e) => e.selections?.length > 0);
resetVisibleLimits();
syncExpandedAfterLoad();
const fresh = list.filter((e) => e.selections?.length > 0);
if (!hadData) {
events.value = fresh;
syncExpandedAfterLoad();
} else {
mergeOddsOnly(fresh);
}
} catch (e: unknown) {
events.value = [];
if (!hadData) events.value = [];
const err = e as { response?: { status?: number; data?: { error?: string } } };
if (err.response?.status === 403) {
loadError.value = t('bet.outright_player_only');
@@ -90,7 +63,26 @@ async function load() {
loadError.value = err.response?.data?.error ?? t('bet.outright_load_failed');
}
} finally {
loading.value = false;
if (!hadData) loading.value = false;
}
}
function mergeOddsOnly(fresh: OutrightEvent[]) {
const freshMap = new Map<string, OutrightEvent>();
for (const e of fresh) freshMap.set(e.id, e);
for (const event of events.value) {
const freshEvent = freshMap.get(event.id);
if (!freshEvent) continue;
const selMap = new Map<string, OutrightSelection>();
for (const s of freshEvent.selections) selMap.set(s.id, s);
for (const sel of event.selections) {
const fs = selMap.get(sel.id);
if (fs) {
sel.odds = fs.odds;
sel.oddsVersion = fs.oddsVersion;
}
}
}
}
@@ -101,18 +93,6 @@ function toggle(id: string) {
if (next.has(id)) next.delete(id);
else next.add(id);
expanded.value = next;
if (next.has(id) && visibleLimits.value[id] == null) {
const event = events.value.find((e) => e.id === id);
if (event) {
visibleLimits.value = {
...visibleLimits.value,
[id]:
event.selections.length <= INITIAL_BATCH
? event.selections.length
: INITIAL_BATCH,
};
}
}
}
function openBet(event: OutrightEvent, sel: OutrightSelection) {
@@ -135,8 +115,9 @@ function closeModal() {
<template>
<div class="outright-panel">
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<template v-else-if="events.length">
<p v-if="eventCount > 1" class="panel-summary">
{{ t('bet.outright_events_summary', { events: eventCount, teams: totalSelections }) }}
@@ -148,10 +129,7 @@ function closeModal() {
:key="event.id"
:event="event"
:expanded="expanded.has(event.id)"
:visible-limit="visibleLimits[event.id] ?? INITIAL_BATCH"
:loading-more="loadingMoreId === event.id"
@toggle="toggle(event.id)"
@load-more="loadMore(event)"
@pick="openBet(event, $event)"
/>
</div>

400
apps/player/src/components/parlay/ParlayPanel.vue
View File

@@ -6,6 +6,8 @@ import { useBetSlipStore } from '../../stores/betSlip';
import { PARLAY_MAX_LEGS, canSelectForParlay } from '@thebet365/shared';
import { PARLAY_MARKET_TYPES, PARLAY_SELECTION_KEYS } from '../../utils/parlayColumns';
import BetGuideHelp from '../BetGuideHelp.vue';
import GoldSpinner from '../GoldSpinner.vue';
import TeamEmblem from '../TeamEmblem.vue';
import { useOnLocaleChange } from '../../composables/useOnLocaleChange';
type TimeFilter = 'all' | 'today';
@@ -29,8 +31,13 @@ interface Market {
interface ParlayMatch {
id: string;
leagueName: string;
leagueId?: string;
homeTeamName: string;
awayTeamName: string;
homeTeamCode?: string;
awayTeamCode?: string;
homeTeamLogoUrl?: string | null;
awayTeamLogoUrl?: string | null;
startTime: string;
markets: Market[];
}
@@ -41,23 +48,87 @@ const slip = useBetSlipStore();
const loading = ref(true);
const matches = ref<ParlayMatch[]>([]);
const timeFilter = ref<TimeFilter>('all');
const leagueFilter = ref('');
const collapsed = ref<Set<string>>(new Set());
const parlayMarketKeys = PARLAY_MARKET_TYPES.map((c) => c.key);
async function loadParlayMatches() {
loading.value = true;
const hadData = matches.value.length > 0;
if (!hadData) loading.value = true;
try {
const { data } = await api.get('/player/matches');
matches.value = (data.data ?? []).filter(
const fresh = (data.data ?? []).filter(
(m: ParlayMatch) => m.markets?.length && hasParlayMarkets(m),
);
if (!hadData) {
matches.value = fresh;
syncCollapsedAfterLoad();
} else {
mergeOddsOnly(fresh);
}
} finally {
loading.value = false;
if (!hadData) loading.value = false;
}
}
function syncCollapsedAfterLoad() {
const ids = matches.value.map((m) => m.id);
// 只保留仍然存在的 id
const kept = [...collapsed.value].filter((id) => ids.includes(id));
if (kept.length > 0) {
collapsed.value = new Set(kept);
return;
}
// 默认只展开第一个，其余折叠
if (ids.length > 1) {
collapsed.value = new Set(ids.slice(1));
} else {
collapsed.value = new Set();
}
}
function mergeOddsOnly(fresh: ParlayMatch[]) {
const matchMap = new Map<string, ParlayMatch>();
for (const m of fresh) matchMap.set(m.id, m);
for (const match of matches.value) {
const freshMatch = matchMap.get(match.id);
if (!freshMatch) continue;
const marketMap = new Map<string, Market>();
for (const mk of freshMatch.markets) marketMap.set(mk.id, mk);
for (const market of match.markets) {
const freshMarket = marketMap.get(market.id);
if (!freshMarket) continue;
const selMap = new Map<string, Selection>();
for (const s of freshMarket.selections) selMap.set(s.id, s);
for (const sel of market.selections) {
const fs = selMap.get(sel.id);
if (fs) {
sel.odds = fs.odds;
sel.oddsVersion = fs.oddsVersion;
}
}
}
}
}
useOnLocaleChange(loadParlayMatches);
const leagues = computed(() => {
const seen = new Set<string>();
const list: { id: string; name: string }[] = [];
for (const m of matches.value) {
const id = m.leagueId ?? m.leagueName;
if (!seen.has(id)) {
seen.add(id);
list.push({ id, name: m.leagueName });
}
}
list.sort((a, b) => a.name.localeCompare(b.name));
return list;
});
function parseLine(v: string | number | null | undefined) {
if (v == null || v === '') return null;
const n = typeof v === 'number' ? v : parseFloat(String(v));
@@ -100,8 +171,14 @@ function isKickoffToday(startTime: string) {
}
const filteredMatches = computed(() => {
if (timeFilter.value === 'all') return matches.value;
return matches.value.filter((m) => isKickoffToday(m.startTime));
let list = matches.value;
if (timeFilter.value === 'today') {
list = list.filter((m) => isKickoffToday(m.startTime));
}
if (leagueFilter.value) {
list = list.filter((m) => (m.leagueId ?? m.leagueName) === leagueFilter.value);
}
return list;
});
function formatKickoff(startTime: string) {
@@ -163,76 +240,101 @@ const showParlayFoot = computed(() => slip.mode === 'parlay' && slip.count > 0);
const footConfirmLabel = computed(() =>
slip.canPlaceParlay ? t('bet.parlay_confirm_parlay') : t('bet.cs_confirm_cell'),
);
function toggleCollapse(id: string) {
const next = new Set(collapsed.value);
if (next.has(id)) next.delete(id);
else next.add(id);
collapsed.value = next;
}
</script>
<template>
<div class="parlay-panel" :class="{ 'has-fixed-foot': showParlayFoot }">
<div class="toolbar">
<div class="toolbar-filters">
<select v-model="timeFilter" class="filter-select">
<select v-model="timeFilter" class="filter-select">
<option value="all">{{ t('bet.parlay_filter_all') }}</option>
<option value="today">{{ t('bet.tab_today') }}</option>
</select>
<BetGuideHelp
:title="t('bet.parlay_guide_title')"
:aria-label="t('bet.parlay_guide_help')"
storage-key="thebet365_parlay_guide_seen"
>
<p class="intro">{{ t('bet.parlay_desc') }}</p>
<ol>
<li>{{ t('bet.parlay_guide_1') }}</li>
<li>{{ t('bet.parlay_guide_2') }}</li>
<li>{{ t('bet.parlay_guide_3') }}</li>
</ol>
<p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
</BetGuideHelp>
</div>
<div class="col-headers">
<span v-for="col in PARLAY_MARKET_TYPES" :key="col.key" class="col-head">{{ colLabel(col.labelKey) }}</span>
</div>
</select>
<select v-model="leagueFilter" class="filter-select">
<option value="">{{ t('bet.parlay_filter_all') }}</option>
<option v-for="lg in leagues" :key="lg.id" :value="lg.id">{{ lg.name }}</option>
</select>
<BetGuideHelp
:title="t('bet.parlay_guide_title')"
:aria-label="t('bet.parlay_guide_help')"
storage-key="thebet365_parlay_guide_seen"
>
<p class="intro">{{ t('bet.parlay_desc') }}</p>
<ol>
<li>{{ t('bet.parlay_guide_1') }}</li>
<li>{{ t('bet.parlay_guide_2') }}</li>
<li>{{ t('bet.parlay_guide_3') }}</li>
</ol>
<p class="rules-link">{{ t('bet.guide_rules_link') }}</p>
</BetGuideHelp>
</div>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="filteredMatches.length" class="table-wrap">
<div v-for="match in filteredMatches" :key="match.id" class="match-row">
<div class="match-info">
<div class="league">{{ match.leagueName }}</div>
<div class="teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</div>
<div class="time">{{ formatKickoff(match.startTime) }}</div>
</div>
<div class="odds-cells">
<div v-else-if="filteredMatches.length" class="match-list">
<div v-for="match in filteredMatches" :key="match.id" class="match-card" :class="{ collapsed: collapsed.has(match.id) }">
<button type="button" class="match-head" @click="toggleCollapse(match.id)">
<span class="m-league">{{ match.leagueName }}</span>
<TeamEmblem
size="sm"
:team-code="match.homeTeamCode"
:team-name="match.homeTeamName"
:logo-url="match.homeTeamLogoUrl"
/>
<span class="m-teams">{{ match.homeTeamName }} vs {{ match.awayTeamName }}</span>
<TeamEmblem
size="sm"
:team-code="match.awayTeamCode"
:team-name="match.awayTeamName"
:logo-url="match.awayTeamLogoUrl"
/>
<span class="m-time">{{ formatKickoff(match.startTime) }}</span>
<span class="toggle-dot" :class="{ open: !collapsed.has(match.id) }">{{ collapsed.has(match.id) ? '+' : '−' }}</span>
</button>
<div v-show="!collapsed.has(match.id)" class="market-blocks">
<div
v-for="col in PARLAY_MARKET_TYPES"
:key="col.key"
class="market-cell"
class="market-block"
>
<template
v-if="
getMarket(match, col.key) &&
isParlayEligibleMarket(getMarket(match, col.key)!)
"
>
<button
v-for="sel in getMarket(match, col.key)!.selections"
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
<span class="block-label">{{ colLabel(col.labelKey) }}</span>
<div class="block-btns">
<template
v-if="
getMarket(match, col.key) &&
isParlayEligibleMarket(getMarket(match, col.key)!)
"
>
<span class="odd-label">{{ selLabel(sel) }}</span>
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
</button>
</template>
<span v-else class="market-empty">—</span>
<button
v-for="sel in getMarket(match, col.key)!.selections"
:key="sel.id"
type="button"
class="odd-btn"
:class="{ picked: isPicked(sel.id) }"
@click="pickSelection(match, getMarket(match, col.key)!, sel)"
>
<span class="odd-label">{{ selLabel(sel) }}</span>
<span class="odd-val">{{ formatOdds(sel.odds) }}</span>
</button>
</template>
<span v-else class="market-empty">—</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="empty">
<span class="empty-icon" aria-hidden="true">📅</span>
<span class="empty-icon" aria-hidden="true">&#9917;</span>
<p>{{ t('bet.parlay_empty') }}</p>
</div>
@@ -267,11 +369,23 @@ const footConfirmLabel = computed(() =>
padding-bottom: 100px;
}
.toolbar-filters {
.toolbar {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
margin-bottom: 8px;
flex-wrap: wrap;
}
.filter-select {
padding: 7px 10px;
border-radius: 6px;
background: #141414;
border: 1px solid var(--border-gold-soft);
color: var(--primary-light);
font-size: 12px;
font-weight: 700;
max-width: 140px;
}
.parlay-foot-fixed {
@@ -297,12 +411,6 @@ const footConfirmLabel = computed(() =>
text-align: center;
}
.foot-hint--info {
color: var(--primary-light);
text-align: center;
font-weight: 600;
}
.foot-meta {
color: var(--primary-light);
font-weight: 600;
@@ -324,102 +432,118 @@ const footConfirmLabel = computed(() =>
opacity: 0.45;
}
.toolbar {
display: flex;
align-items: stretch;
gap: 8px;
margin-bottom: 8px;
overflow-x: auto;
}
.filter-select {
flex-shrink: 0;
min-width: 72px;
padding: 8px 10px;
border-radius: 6px;
background: #141414;
border: 1px solid var(--border-gold-soft);
color: var(--primary-light);
font-size: 12px;
font-weight: 700;
}
.col-headers {
display: grid;
grid-template-columns: repeat(7, minmax(52px, 1fr));
gap: 4px;
flex: 1;
min-width: 360px;
align-items: center;
}
.col-head {
font-size: 10px;
font-weight: 800;
color: var(--text-muted);
text-align: center;
line-height: 1.25;
word-break: keep-all;
}
.table-wrap {
.match-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.match-row {
display: flex;
gap: 8px;
padding: 10px 8px;
.match-card {
background: #141414;
border: 1px solid #2a2a2a;
border-radius: 6px;
overflow-x: auto;
border-radius: 8px;
overflow: hidden;
}
.match-info {
.match-card.collapsed {
border-color: #222;
}
.match-head {
width: 100%;
display: flex;
align-items: center;
gap: 6px;
padding: 10px;
background: none;
border: none;
color: inherit;
font-family: inherit;
cursor: pointer;
}
.match-head:active {
background: rgba(255, 255, 255, 0.015);
}
.toggle-dot {
flex-shrink: 0;
width: 88px;
min-width: 88px;
width: 20px;
height: 20px;
border-radius: 50%;
background: #1a1a1a;
border: 1px solid #333;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 900;
color: #666;
line-height: 1;
transition: all 0.15s;
}
.league {
font-size: 9px;
.toggle-dot.open {
border-color: var(--border-gold-soft);
color: var(--primary-light);
}
.m-league {
font-size: 10px;
color: var(--text-muted);
margin-bottom: 2px;
font-weight: 600;
flex-shrink: 0;
}
.m-teams {
font-size: 12px;
font-weight: 800;
color: var(--primary-light);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.teams {
font-size: 11px;
font-weight: 800;
color: var(--primary-light);
line-height: 1.25;
margin-bottom: 4px;
}
.time {
font-size: 9px;
.m-time {
font-size: 10px;
color: var(--text-muted);
flex-shrink: 0;
}
.odds-cells {
display: grid;
grid-template-columns: repeat(7, minmax(52px, 1fr));
gap: 4px;
flex: 1;
min-width: 360px;
align-items: stretch;
.match-head :deep(.team-emblem) {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.market-cell {
.market-blocks {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 8px 10px 10px;
}
.market-block {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.block-label {
font-size: 9.5px;
font-weight: 800;
color: var(--text-muted);
letter-spacing: 0.03em;
padding: 0 2px;
}
.block-btns {
display: flex;
gap: 3px;
min-height: 36px;
flex-wrap: wrap;
}
.odd-btn {
@@ -428,12 +552,12 @@ const footConfirmLabel = computed(() =>
align-items: center;
justify-content: center;
gap: 1px;
padding: 4px 2px;
padding: 5px 8px;
border-radius: 4px;
background: #0d0d0d;
border: 1px solid #333;
min-height: 32px;
width: 100%;
min-width: 44px;
min-height: 36px;
}
.odd-btn.picked {
@@ -442,7 +566,7 @@ const footConfirmLabel = computed(() =>
}
.odd-label {
font-size: 9px;
font-size: 8.5px;
font-weight: 700;
color: var(--text-muted);
line-height: 1;
@@ -456,13 +580,13 @@ const footConfirmLabel = computed(() =>
}
.market-empty {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
min-width: 44px;
min-height: 36px;
color: #444;
font-size: 12px;
min-height: 32px;
}
.state,

107
apps/player/src/composables/usePullToRefresh.ts Normal file
View File

@@ -0,0 +1,107 @@
import { ref, computed, onMounted, onUnmounted } from 'vue';
export interface PullToRefreshOptions {
onRefresh: () => Promise<void>;
threshold?: number;
maxPull?: number;
}
export function usePullToRefresh(options: PullToRefreshOptions) {
const { onRefresh, threshold = 48, maxPull = 128 } = options;
const pullDistance = ref(0);
const spinning = ref(false);
const refreshing = ref(false);
const progress = computed(() => Math.min(pullDistance.value / maxPull, 1));
let scrollEl: HTMLElement | null = null;
let startY = 0;
let pulling = false;
function findScrollEl(): HTMLElement | null {
return document.querySelector('.layout > .main') as HTMLElement | null;
}
function isInsideScrollableChild(target: EventTarget | null): boolean {
let el = target as HTMLElement | null;
while (el && el !== scrollEl) {
const style = getComputedStyle(el);
const overflowY = style.overflowY;
if ((overflowY === 'auto' || overflowY === 'scroll') && el.scrollTop > 2) {
return true;
}
el = el.parentElement;
}
return false;
}
function handleTouchStart(e: TouchEvent) {
scrollEl = findScrollEl();
if (!scrollEl || refreshing.value) return;
if (scrollEl.scrollTop > 4) return;
if (isInsideScrollableChild(e.target)) return;
startY = e.touches[0].clientY;
pulling = true;
}
function handleTouchMove(e: TouchEvent) {
if (!pulling || refreshing.value) return;
const delta = e.touches[0].clientY - startY;
if (delta <= 0) {
pullDistance.value = 0;
spinning.value = false;
return;
}
const damped = Math.min(delta * 0.7, maxPull);
pullDistance.value = damped;
spinning.value = damped >= threshold * 0.5;
}
function handleTouchEnd() {
if (!pulling) return;
pulling = false;
if (pullDistance.value >= threshold && !refreshing.value) {
refreshing.value = true;
spinning.value = true;
pullDistance.value = threshold;
setTimeout(() => {
void onRefresh().finally(() => {
refreshing.value = false;
spinning.value = false;
pullDistance.value = 0;
});
}, 900);
} else {
pullDistance.value = 0;
spinning.value = false;
}
}
let attached = false;
function attach() {
if (attached) return;
const el = findScrollEl();
if (!el) return;
el.addEventListener('touchstart', handleTouchStart, { passive: true });
el.addEventListener('touchmove', handleTouchMove, { passive: false });
el.addEventListener('touchend', handleTouchEnd);
attached = true;
}
function detach() {
const el = findScrollEl();
if (!el) return;
el.removeEventListener('touchstart', handleTouchStart);
el.removeEventListener('touchmove', handleTouchMove);
el.removeEventListener('touchend', handleTouchEnd);
attached = false;
}
onMounted(attach);
onUnmounted(detach);
return { pullDistance, spinning, refreshing, progress };
}

26
apps/player/src/layouts/MainLayout.vue
View File

@@ -21,7 +21,19 @@ const { initFromUser } = useAppLocale();
const route = useRoute();
const slip = useBetSlipStore();
const showAnnouncement = computed(() => !route.path.startsWith('/profile'));
const isDetailPage = computed(() => {
const p = route.path;
return p.startsWith('/match/') || p.startsWith('/bet/') || p.startsWith('/bets/');
});
const showHeader = computed(() => !isDetailPage.value);
const showAnnouncement = computed(() => !isDetailPage.value && !route.path.startsWith('/profile'));
const showBottomNav = computed(() => {
const p = route.path;
if (p === '/' || p === '/bet' || p === '/bets' || p === '/wallet' || p === '/profile') return true;
return false;
});
const { announcements, load: loadPlayerHome } = usePlayerHome();
const { loadProfile } = usePlayerProfile();
@@ -45,7 +57,7 @@ watch(
<template>
<div class="layout">
<header class="header">
<header v-if="showHeader" class="header">
<img src="/logo.png" alt="TheBet365" class="logo" />
<div class="header-actions">
<LocaleSwitcher />
@@ -58,11 +70,11 @@ watch(
<AnnouncementMarquee :items="announcements" embedded />
</div>
<main class="main">
<main :class="['main', { 'has-nav': showBottomNav }]">
<RouterView />
</main>
<nav class="bottom-nav" aria-label="Main">
<nav v-if="showBottomNav" class="bottom-nav" aria-label="Main">
<RouterLink to="/" class="nav-item" :class="{ active: route.path === '/' }">
<BottomNavIcon name="home" />
<span class="nav-label">{{ t('nav.home') }}</span>
@@ -143,7 +155,11 @@ watch(
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 12px 16px 16px;
padding: 12px 16px 0;
}
.main.has-nav {
padding-bottom: 16px;
}
.bottom-nav {
display: flex;

154
apps/player/src/main.ts
View File

@@ -11,6 +11,13 @@ const i18n = createI18n({
fallbackLocale: ['en-US', 'zh-CN'],
messages: {
'zh-CN': {
common: {
pull_refresh: '下拉刷新',
release_refresh: '释放刷新',
refreshing: '刷新中…',
loading_more: '加载更多…',
no_more: '没有更多了',
},
nav: { home: '主页', bet: '投注', bet_history: '历史投注', wallet: '账单', profile: '我的' },
home: {
hot_matches: '热门赛事',
@@ -25,17 +32,39 @@ const i18n = createI18n({
},
history: {
league_default: '足球',
stake: '投注 Stake',
return: '回报 Return',
est_return: '预计回报 Est. Return',
stake: '投注',
return: '回报',
est_return: '预计回报',
odds: '赔率',
ft: '全场',
ht: '半场',
parlay_title: '串关 · {n} 场',
parlay_league: '串关 Parlay',
empty: '暂无投注记录',
no_more: '没有更多记录了',
status_won: 'WON 赢',
status_pending: 'PENDING 待定',
status_lost: 'LOST 输',
status_push: 'PUSH 走盘',
status_won: '赢',
status_pending: '待定',
status_lost: '输',
status_push: '走盘',
back: '返回',
not_found: '注单不存在',
my_pick: '我的选择',
legs: '串关明细',
summary: '投注摘要',
bet_no: '注单号',
awaiting_result: '等待比赛结果…',
filter_all: '全部',
filter_won: '已赢',
filter_lost: '已输',
filter_pending: '待定',
filter_push: '走盘',
stats_total: '总投注',
stats_won: '赢',
stats_lost: '输',
stats_pending: '待定',
stats_push: '走盘',
stats_stake: '总投注额',
stats_return: '总回报',
},
auth: {
login: '登录',
@@ -65,6 +94,13 @@ const i18n = createI18n({
tx_bet_void: '投注撤销',
tx_cashback: '返水发放',
tx_resettle: '重新结算',
stats_income: '收入',
stats_expense: '支出',
stats_net: '净额',
filter_all: '全部',
filter_deposit: '存款',
filter_withdraw: '提款',
filter_bet: '投注',
},
bet: {
bet_slip: '投注单',
@@ -154,6 +190,7 @@ const i18n = createI18n({
cs_confirm_total_stake: '总投注额',
cs_place_success: '下注成功',
cs_place_failed: '下注失败',
kickoff_time: '开赛时间：',
guide_title: '怎么下注？',
guide_help_aria: '查看下注说明',
guide_got_it: '知道了',
@@ -239,6 +276,13 @@ const i18n = createI18n({
},
},
'en-US': {
common: {
pull_refresh: 'Pull to refresh',
release_refresh: 'Release to refresh',
refreshing: 'Refreshing…',
loading_more: 'Loading more…',
no_more: 'No more',
},
nav: { home: 'Home', bet: 'Bet', bet_history: 'History', wallet: 'Wallet', profile: 'Profile' },
home: {
hot_matches: 'Hot matches',
@@ -253,20 +297,42 @@ const i18n = createI18n({
},
history: {
league_default: 'Football',
stake: 'Stake 投注',
return: 'Return 回报',
est_return: 'Est. Return 预计回报',
stake: 'Stake',
return: 'Return',
est_return: 'Est. Return',
odds: 'Odds',
ft: 'FT',
ht: 'HT',
parlay_title: 'Parlay · {n} legs',
parlay_league: 'Parlay 串关',
parlay_league: 'Parlay',
empty: 'No bets yet',
no_more: 'No more bets',
status_won: 'WON 赢',
status_pending: 'PENDING 待定',
status_lost: 'LOST 输',
status_push: 'PUSH 走盘',
status_won: 'WON',
status_pending: 'PENDING',
status_lost: 'LOST',
status_push: 'PUSH',
back: 'Back',
not_found: 'Bet not found',
my_pick: 'My pick',
legs: 'Parlay legs',
summary: 'Summary',
bet_no: 'Bet ID',
awaiting_result: 'Awaiting result…',
filter_all: 'All',
filter_won: 'Won',
filter_lost: 'Lost',
filter_pending: 'Pending',
filter_push: 'Push',
stats_total: 'Total',
stats_won: 'Won',
stats_lost: 'Lost',
stats_pending: 'Pending',
stats_push: 'Push',
stats_stake: 'Total Stake',
stats_return: 'Total Return',
},
auth: {
login: 'Login',
auth:
{ login: 'Login',
logout: 'Log out',
username: 'Username',
password: 'Password',
@@ -293,6 +359,13 @@ const i18n = createI18n({
tx_bet_void: 'Bet Voided',
tx_cashback: 'Cashback Distribution',
tx_resettle: 'Resettlement',
stats_income: 'Income',
stats_expense: 'Expense',
stats_net: 'Net',
filter_all: 'All',
filter_deposit: 'Deposit',
filter_withdraw: 'Withdraw',
filter_bet: 'Bet',
},
bet: {
bet_slip: 'Bet Slip',
@@ -382,6 +455,7 @@ const i18n = createI18n({
cs_confirm_total_stake: 'Total stake',
cs_place_success: 'Bet placed',
cs_place_failed: 'Bet failed',
kickoff_time: 'Kickoff: ',
guide_title: 'How to bet',
guide_help_aria: 'Betting help',
guide_got_it: 'Got it',
@@ -467,6 +541,13 @@ const i18n = createI18n({
},
},
'ms-MY': {
common: {
pull_refresh: 'Tarik untuk segar',
release_refresh: 'Lepas untuk segar',
refreshing: 'Menyegarkan…',
loading_more: 'Memuat lagi…',
no_more: 'Tiada lagi',
},
nav: {
home: 'Laman Utama',
bet: 'Pertaruhan',
@@ -487,9 +568,12 @@ const i18n = createI18n({
},
history: {
league_default: 'Bola Sepak',
stake: 'Stake',
stake: 'Jumlah',
return: 'Pulangan',
est_return: 'Anggaran pulangan',
odds: 'Odds',
ft: 'PT',
ht: 'SP',
parlay_title: 'Berganda · {n} perlawanan',
parlay_league: 'Berganda',
empty: 'Tiada rekod pertaruhan',
@@ -498,6 +582,25 @@ const i18n = createI18n({
status_pending: 'MENUNGGU',
status_lost: 'KALAH',
status_push: 'SERI',
back: 'Kembali',
not_found: 'Pertaruhan tidak dijumpai',
my_pick: 'Pilihan saya',
legs: 'Butiran berganda',
summary: 'Ringkasan',
bet_no: 'ID Pertaruhan',
awaiting_result: 'Menunggu keputusan…',
filter_all: 'Semua',
filter_won: 'Menang',
filter_lost: 'Kalah',
filter_pending: 'Menunggu',
filter_push: 'Seri',
stats_total: 'Jumlah',
stats_won: 'Menang',
stats_lost: 'Kalah',
stats_pending: 'Menunggu',
stats_push: 'Seri',
stats_stake: 'Jumlah Taruhan',
stats_return: 'Jumlah Pulangan',
},
auth: {
login: 'Log Masuk',
@@ -527,6 +630,13 @@ const i18n = createI18n({
tx_bet_void: 'Pertaruhan Dibatalkan',
tx_cashback: 'Pembayaran Cashback',
tx_resettle: 'Penyelesaian Semula',
stats_income: 'Pendapatan',
stats_expense: 'Perbelanjaan',
stats_net: 'Bersih',
filter_all: 'Semua',
filter_deposit: 'Deposit',
filter_withdraw: 'Pengeluaran',
filter_bet: 'Pertaruhan',
},
bet: {
bet_slip: 'Slip Pertaruhan',
@@ -616,6 +726,7 @@ const i18n = createI18n({
cs_confirm_total_stake: 'Jumlah pertaruhan',
cs_place_success: 'Pertaruhan berjaya',
cs_place_failed: 'Pertaruhan gagal',
kickoff_time: 'Masa mula: ',
guide_title: 'Cara pertaruhan',
guide_help_aria: 'Bantuan pertaruhan',
guide_got_it: 'Faham',
@@ -704,3 +815,10 @@ const i18n = createI18n({
});
createApp(App).use(createPinia()).use(router).use(i18n).mount('#app');
const loader = document.getElementById('app-loading');
if (loader) {
loader.style.opacity = '0';
loader.style.transition = 'opacity 0.3s ease';
setTimeout(() => loader.remove(), 350);
}

1
apps/player/src/router/index.ts
View File

@@ -15,6 +15,7 @@ const router = createRouter({
{ path: 'football', redirect: '/bet' },
{ path: 'match/:id', component: () => import('../views/MatchDetailView.vue') },
{ path: 'bets', component: () => import('../views/MyBetsView.vue') },
{ path: 'bets/:betNo', component: () => import('../views/BetDetailView.vue') },
{ path: 'wallet', component: () => import('../views/WalletView.vue') },
{ path: 'profile', component: () => import('../views/ProfileView.vue') },
{ path: 'profile/edit', component: () => import('../views/ProfileEditView.vue') },

13
apps/player/src/styles.css
View File

@@ -303,3 +303,16 @@ input:-webkit-autofill:active {
letter-spacing: 0.06em;
text-transform: uppercase;
}
.state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: 12px;
text-align: center;
color: var(--text-muted);
font-weight: 600;
font-size: 14px;
}

580
apps/player/src/views/BetDetailView.vue Normal file
View File

@@ -0,0 +1,580 @@
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import GoldSpinner from '../components/GoldSpinner.vue';
import type { BetHistoryItem } from '../components/BetHistoryCard.vue';
const route = useRoute();
const router = useRouter();
const { t, locale } = useI18n();
const bet = ref<BetHistoryItem | null>(null);
const loading = ref(true);
const notFound = ref(false);
onMounted(async () => {
try {
const { data } = await api.get(`/player/bets/${route.params.betNo}`);
if (!data.data) { notFound.value = true; return; }
bet.value = data.data;
} catch {
notFound.value = true;
} finally {
loading.value = false;
}
});
const statusKey = computed(() => {
const s = (bet.value?.status ?? '').toUpperCase();
if (s === 'WON' || s === 'WIN') return 'won';
if (s === 'LOST' || s === 'LOSE') return 'lost';
if (s === 'PUSH' || s === 'VOID' || s === 'CANCELLED') return 'push';
return 'pending';
});
const statusLabel = computed(() => t(`history.status_${statusKey.value}`));
const placedDateTime = computed(() => {
if (!bet.value) return '';
const d = new Date(bet.value.placedAt);
const date = d.toLocaleDateString(locale.value, { year: 'numeric', month: 'short', day: 'numeric' });
const time = d.toLocaleTimeString(locale.value, { hour: '2-digit', minute: '2-digit' });
return `${date} ${time}`;
});
const returnAmount = computed(() => {
if (!bet.value) return '';
if (statusKey.value === 'won') return formatMoney(bet.value.actualReturn, locale.value);
if (statusKey.value === 'pending') return formatMoney(bet.value.potentialReturn, locale.value);
if (statusKey.value === 'lost') return formatMoney(-parseFloat(String(bet.value.stake ?? 0)), locale.value);
return formatMoney(bet.value.actualReturn ?? bet.value.potentialReturn, locale.value);
});
function formatOdds(v: unknown): string {
const n = parseFloat(String(v));
return isNaN(n) || n <= 0 ? '-' : n.toFixed(2);
}
const SEL_TRANS: Record<string, Record<string, string>> = {
'主胜': { 'en-US': 'Home Win', 'ms-MY': 'Rumah Menang' },
'客胜': { 'en-US': 'Away Win', 'ms-MY': 'Tandang Menang' },
'和局': { 'en-US': 'Draw', 'ms-MY': 'Seri' },
'主': { 'en-US': 'Home', 'ms-MY': 'Rumah' },
'客': { 'en-US': 'Away', 'ms-MY': 'Tandang' },
'大': { 'en-US': 'Over', 'ms-MY': 'Atas' },
'小': { 'en-US': 'Under', 'ms-MY': 'Bawah' },
'单': { 'en-US': 'Odd', 'ms-MY': 'Ganjil' },
'双': { 'en-US': 'Even', 'ms-MY': 'Genap' },
'冠军': { 'en-US': 'Winner', 'ms-MY': 'Juara' },
};
function translateSel(name: string): string {
if (locale.value === 'zh-CN') return name;
const exact = SEL_TRANS[name];
if (exact) return exact[locale.value] ?? exact['en-US'] ?? name;
const sp = name.indexOf(' ');
if (sp > 0) {
const head = name.slice(0, sp);
const m = SEL_TRANS[head];
if (m) return (m[locale.value] ?? m['en-US'] ?? head) + name.slice(sp);
}
return name;
}
function legStatusKey(rs: string | null | undefined) {
if (!rs) return 'pending';
const s = rs.toUpperCase();
if (s === 'WON' || s === 'WIN') return 'won';
if (s === 'LOST' || s === 'LOSE') return 'lost';
return 'push';
}
const matchTitle = computed(() => {
if (!bet.value) return '';
if (bet.value.isParlay) {
const n = bet.value.legCount ?? bet.value.legs?.length ?? 0;
return t('history.parlay_title', { n });
}
return bet.value.matchTitle;
});
const myPick = computed(() => {
if (!bet.value || bet.value.isParlay) return '';
const raw = bet.value.pickLabel ?? '';
if (locale.value === 'zh-CN' || !raw) return raw;
const ci = raw.indexOf(': ');
if (ci < 0) return raw;
return raw.slice(0, ci + 2) + translateSel(raw.slice(ci + 2));
});
</script>
<template>
<div class="detail-page">
<!-- back bar -->
<div class="top-bar">
<button class="back-btn" @click="router.back()">‹ {{ t('history.back') }}</button>
</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="notFound || !bet" class="state">{{ t('history.not_found') }}</div>
<template v-else>
<!-- status hero -->
<div class="hero" :class="statusKey">
<span class="hero-status">{{ statusLabel }}</span>
<span class="hero-return">{{ returnAmount }}</span>
<span class="hero-return-label">
{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}
</span>
</div>
<!-- match / parlay title -->
<section class="section">
<div class="section-head">
<span class="league-tag">
{{ bet.isParlay ? t('history.parlay_league') : (bet.leagueName || t('history.league_default')) }}
</span>
<span class="placed-time">{{ placedDateTime }}</span>
</div>
<div class="match-name">{{ matchTitle }}</div>
<!-- single bet: score comparison -->
<div v-if="!bet.isParlay" class="score-block">
<!-- my pick row -->
<div class="row-label-val">
<span class="row-label">{{ t('history.my_pick') }}</span>
<span class="row-val pick">{{ myPick }}</span>
</div>
<!-- scores -->
<div v-if="bet.matchScore?.ft || bet.matchScore?.ht" class="score-chips">
<div v-if="bet.matchScore.ft" class="score-item">
<span class="score-period">{{ t('history.ft') }}</span>
<span class="score-value">{{ bet.matchScore.ft }}</span>
</div>
<div v-if="bet.matchScore.ht" class="score-item">
<span class="score-period">{{ t('history.ht') }}</span>
<span class="score-value muted">{{ bet.matchScore.ht }}</span>
</div>
</div>
<div v-else-if="statusKey === 'pending'" class="no-score">{{ t('history.awaiting_result') }}</div>
</div>
</section>
<!-- parlay legs -->
<section v-if="bet.isParlay && bet.legs?.length" class="section">
<div class="section-title">{{ t('history.legs') }}</div>
<div class="legs-list">
<div v-for="(leg, i) in bet.legs" :key="i" class="leg-row" :class="legStatusKey(leg.resultStatus)">
<div class="leg-left">
<span class="leg-num" :class="legStatusKey(leg.resultStatus)">{{ i + 1 }}</span>
<div class="leg-body">
<span class="leg-match">{{ leg.matchTitle }}</span>
<span class="leg-pick-line">
{{ leg.marketLabel }}: {{ translateSel(leg.selectionName) }}
</span>
<div v-if="leg.score?.ft || leg.score?.ht" class="leg-scores">
<span v-if="leg.score.ft">{{ t('history.ft') }} {{ leg.score.ft }}</span>
<span v-if="leg.score.ht" class="muted-score">{{ t('history.ht') }} {{ leg.score.ht }}</span>
</div>
</div>
</div>
<div class="leg-right">
<span class="leg-odds-val">{{ formatOdds(leg.odds) }}</span>
<span v-if="leg.resultStatus" class="leg-result-badge" :class="legStatusKey(leg.resultStatus)">
{{ t(`history.status_${legStatusKey(leg.resultStatus)}`) }}
</span>
</div>
</div>
</div>
</section>
<!-- bet summary -->
<section class="section">
<div class="section-title">{{ t('history.summary') }}</div>
<div class="summary-rows">
<div class="sum-row">
<span>{{ t('history.stake') }}</span>
<span>{{ formatMoney(bet.stake, locale) }}</span>
</div>
<div v-if="bet.totalOdds" class="sum-row">
<span>{{ t('history.odds') }}</span>
<span class="odds-val">{{ formatOdds(bet.totalOdds) }}</span>
</div>
<div class="sum-row">
<span>{{ statusKey === 'pending' ? t('history.est_return') : t('history.return') }}</span>
<span :class="{ 'amt-won': statusKey === 'won', 'amt-pending': statusKey === 'pending', 'amt-lost': statusKey === 'lost' }">
{{ returnAmount }}
</span>
</div>
<div class="sum-row muted">
<span>{{ t('history.bet_no') }}</span>
<span class="bet-no-val">{{ bet.betNo }}</span>
</div>
</div>
</section>
</template>
</div>
</template>
<style scoped>
.detail-page {
padding-bottom: 32px;
}
.top-bar {
margin-bottom: 4px;
}
.back-btn {
background: none;
border: none;
color: var(--primary-light, #d4af37);
font-size: 15px;
font-weight: 700;
padding: 4px 0 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 2px;
}
.state {
text-align: center;
padding: 60px 20px;
color: #666;
font-size: 14px;
font-weight: 600;
}
/* ── hero ── */
.hero {
border-radius: 14px;
padding: 20px 20px 18px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
margin-bottom: 12px;
text-align: center;
}
.hero.won { background: linear-gradient(135deg, rgba(61,184,101,0.15), rgba(61,184,101,0.06)); border: 1px solid rgba(61,184,101,0.25); }
.hero.lost { background: linear-gradient(135deg, rgba(224,80,80,0.12), rgba(224,80,80,0.05)); border: 1px solid rgba(224,80,80,0.2); }
.hero.pending { background: linear-gradient(135deg, rgba(232,200,74,0.1), rgba(232,200,74,0.04)); border: 1px solid rgba(232,200,74,0.2); }
.hero.push { background: #181818; border: 1px solid #2a2a2a; }
.hero-status {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
}
.hero.won .hero-status { color: #3db865; }
.hero.lost .hero-status { color: #e05050; }
.hero.pending .hero-status { color: #e8c84a; }
.hero.push .hero-status { color: #888; }
.hero-return {
font-size: 36px;
font-weight: 900;
letter-spacing: -0.01em;
line-height: 1.1;
}
.hero.won .hero-return { color: #3db865; text-shadow: 0 0 24px rgba(61,184,101,0.3); }
.hero.lost .hero-return { color: #e05050; }
.hero.pending .hero-return { color: #e8c84a; }
.hero.push .hero-return { color: #777; }
.hero-return-label {
font-size: 10.5px;
color: #555;
font-weight: 600;
letter-spacing: 0.04em;
}
/* ── sections ── */
.section {
background: #141414;
border: 1px solid #222;
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 10px;
}
.section-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
}
.league-tag {
font-size: 11px;
color: #888;
font-weight: 700;
}
.placed-time {
font-size: 11px;
color: #555;
font-weight: 600;
}
.match-name {
font-size: 17px;
font-weight: 900;
color: #f0f0f0;
line-height: 1.3;
margin-bottom: 10px;
}
/* score block */
.score-block {
display: flex;
flex-direction: column;
gap: 8px;
}
.row-label-val {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
}
.row-label {
font-size: 11px;
color: #666;
font-weight: 600;
}
.row-val {
font-size: 13px;
font-weight: 700;
color: #c8c8c8;
}
.row-val.pick {
color: #d4af37;
}
.score-chips {
display: flex;
gap: 8px;
}
.score-item {
display: flex;
align-items: center;
gap: 5px;
background: #1e1e1e;
border: 1px solid #2a2a2a;
border-radius: 7px;
padding: 5px 10px;
}
.score-period {
font-size: 10px;
color: #666;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.score-value {
font-size: 16px;
font-weight: 900;
color: #e8e8e8;
}
.score-value.muted {
color: #666;
font-size: 13px;
}
.no-score {
font-size: 11.5px;
color: #555;
font-style: italic;
}
/* section title */
.section-title {
font-size: 10.5px;
color: #555;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
margin-bottom: 10px;
}
/* parlay legs */
.legs-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.leg-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
background: #1a1a1a;
border: 1px solid #252525;
border-radius: 9px;
padding: 10px 12px;
}
.leg-row.won { border-color: rgba(61,184,101,0.2); }
.leg-row.lost { border-color: rgba(224,80,80,0.18); }
.leg-left {
display: flex;
align-items: flex-start;
gap: 8px;
flex: 1;
min-width: 0;
}
.leg-num {
flex-shrink: 0;
width: 20px;
height: 20px;
border-radius: 50%;
background: #2a2a2a;
color: #666;
font-size: 10px;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
margin-top: 1px;
}
.leg-num.won { background: rgba(61,184,101,0.18); color: #3db865; }
.leg-num.lost { background: rgba(224,80,80,0.18); color: #e05050; }
.leg-body {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.leg-match {
font-size: 12.5px;
font-weight: 800;
color: #d0d0d0;
}
.leg-pick-line {
font-size: 11.5px;
color: #888;
font-weight: 600;
}
.leg-scores {
display: flex;
gap: 8px;
margin-top: 2px;
}
.leg-scores span {
font-size: 11px;
font-weight: 700;
color: #c8c8c8;
}
.leg-scores .muted-score {
color: #555;
}
.leg-right {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
}
.leg-odds-val {
font-size: 15px;
font-weight: 900;
color: #b8a04a;
}
.leg-result-badge {
font-size: 9px;
font-weight: 800;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 2px 6px;
border-radius: 10px;
}
.leg-result-badge.won { color: #3db865; background: rgba(61,184,101,0.12); }
.leg-result-badge.lost { color: #e05050; background: rgba(224,80,80,0.1); }
.leg-result-badge.push { color: #888; background: #222; }
.leg-result-badge.pending { color: #666; background: #1e1e1e; }
/* summary */
.summary-rows {
display: flex;
flex-direction: column;
gap: 0;
}
.sum-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #1c1c1c;
font-size: 13px;
color: #b0b0b0;
font-weight: 600;
}
.sum-row:last-child {
border-bottom: none;
}
.sum-row.muted {
color: #444;
font-size: 11px;
}
.odds-val {
color: #b8a04a;
font-weight: 800;
}
.amt-won {
color: #3db865;
font-weight: 900;
font-size: 15px;
}
.amt-pending {
color: #e8c84a;
font-weight: 900;
}
.amt-lost {
color: #e05050;
font-weight: 900;
font-size: 15px;
}
.bet-no-val {
font-family: monospace;
letter-spacing: 0.04em;
}
</style>

39
apps/player/src/views/FootballView.vue
View File

@@ -9,6 +9,8 @@ import OutrightPanel from '../components/outright/OutrightPanel.vue';
import ParlayPanel from '../components/parlay/ParlayPanel.vue';
import emptyMatchesImg from '../assets/images/empty-matches.svg';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
type MainTab = 'matches' | 'outright' | 'parlay';
type TimeTab = 'today' | 'early';
@@ -58,6 +60,15 @@ async function loadMatches() {
useOnLocaleChange(loadMatches);
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await loadMatches(); },
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
function dayStart(d: Date) {
const x = new Date(d);
x.setHours(0, 0, 0, 0);
@@ -140,6 +151,13 @@ function goMatch(id: string) {
<template>
<div class="bet-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div class="main-tabs">
<button
type="button"
@@ -171,7 +189,7 @@ function goMatch(id: string) {
</button>
</div>
<template v-if="mainTab === 'matches'">
<div v-show="mainTab === 'matches'">
<div class="time-tabs">
<button
type="button"
@@ -191,8 +209,9 @@ function goMatch(id: string) {
</button>
</div>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<div v-else-if="leagueGroups.length" class="league-list">
<LeagueAccordionItem
v-for="group in leagueGroups"
@@ -211,17 +230,25 @@ function goMatch(id: string) {
<img :src="emptyMatchesImg" alt="" class="empty-icon" />
<p>{{ t('bet.no_matches') }}</p>
</div>
</template>
</div>
<div v-else-if="mainTab === 'outright'" class="outright-tab">
<div v-show="mainTab === 'outright'" class="outright-tab">
<OutrightPanel />
</div>
<ParlayPanel v-else-if="mainTab === 'parlay'" />
<ParlayPanel v-show="mainTab === 'parlay'" />
</div>
</template>
<style scoped>
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.bet-page {
margin: 0 -16px;
padding-bottom: 8px;

28
apps/player/src/views/HomeView.vue
View File

@@ -7,11 +7,22 @@ import cardBg from '../assets/images/卡片.png';
import BannerCarousel from '../components/BannerCarousel.vue';
import { usePlayerHome } from '../composables/usePlayerHome';
import TeamEmblem from '../components/TeamEmblem.vue';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
const matchCardBg = `url(${cardBg})`;
const { t, locale } = useI18n();
const router = useRouter();
const { banners, hotMatches, loading } = usePlayerHome();
const { banners, hotMatches, loading, load } = usePlayerHome();
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await load(); },
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
function goMatch(id: string) {
router.push(`/match/${id}`);
@@ -32,6 +43,13 @@ function formatKickoff(startTime: string) {
<template>
<div>
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<BannerCarousel :banners="banners" />
<h2 class="section-title">{{ t('home.hot_matches') }}</h2>
@@ -94,6 +112,14 @@ function formatKickoff(startTime: string) {
</template>
<style scoped>
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.match-card {
position: relative;
isolation: isolate;

54
apps/player/src/views/MatchDetailView.vue
View File

@@ -16,6 +16,8 @@ import CorrectScoreConfirmModal, {
import { isCorrectScoreMarket, parseScoreCode } from '../utils/correctScoreLayout';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import vsImg from '../assets/images/vs.png';
import GoldSpinner from '../components/GoldSpinner.vue';
import BetSuccessOverlay from '../components/BetSuccessOverlay.vue';
import cardBg from '../assets/images/卡片.png';
const heroCardBg = `url(${cardBg})`;
@@ -65,6 +67,7 @@ const expandedKey = ref<string | null>(null);
const correctScoreStakes = ref<Record<string, number>>({});
const placingCs = ref(false);
const csMessage = ref('');
const showCsSuccess = ref(false);
const csConfirmOpen = ref(false);
const csConfirmMarketType = ref<string | null>(null);
const marketsByType = computed(() => {
@@ -188,6 +191,7 @@ async function placeCorrectScoreBets(marketType: string) {
const next = { ...correctScoreStakes.value };
for (const sel of entries) delete next[sel.id];
correctScoreStakes.value = next;
showCsSuccess.value = true;
} catch (e: unknown) {
csMessage.value =
(e as { response?: { data?: { error?: string } } })?.response?.data?.error ||
@@ -270,11 +274,11 @@ function hasSlipPickForMarket(marketType: string) {
</div>
</header>
<div v-if="loading" class="state">{{ t('bet.loading') }}</div>
<div v-if="loading" class="state">
<GoldSpinner :size="36" />
</div>
<template v-else-if="match">
<section class="match-hero">
<p class="kickoff">{{ kickoff }}</p>
<div class="hero-teams">
<!-- home -->
<div class="hero-team">
@@ -325,6 +329,8 @@ function hasSlipPickForMarket(marketType: string) {
<span class="hero-name">{{ match.awayTeamName }}</span>
</div>
</div>
<p class="kickoff">{{ t('bet.kickoff_time') }}{{ kickoff }}</p>
</section>
<section class="markets-section">
@@ -391,6 +397,8 @@ function hasSlipPickForMarket(marketType: string) {
</section>
</template>
</div>
<BetSuccessOverlay :show="showCsSuccess" @done="showCsSuccess = false" />
</template>
<style scoped>
@@ -405,6 +413,12 @@ function hasSlipPickForMarket(marketType: string) {
justify-content: space-between;
padding: 4px 12px 8px;
gap: 8px;
position: sticky;
top: -12px;
z-index: 50;
margin-top: -12px;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
}
.toolbar-title {
@@ -467,8 +481,9 @@ function hasSlipPickForMarket(marketType: string) {
z-index: 1;
font-size: 11px;
color: var(--text-muted);
text-align: center;
margin-bottom: 14px;
text-align: left;
margin-top: 10px;
padding-left: 2px;
}
.hero-teams {
@@ -615,13 +630,32 @@ function hasSlipPickForMarket(marketType: string) {
}
.market-list {
border-radius: 6px;
overflow: hidden;
background: #111;
display: flex;
flex-direction: column;
gap: 6px;
padding: 4px 0;
}
.market-group + .market-group {
border-top: 1px solid #252525;
.market-group {
border-radius: 8px;
border: 1px solid #252525;
background: linear-gradient(180deg, #1a1a1a 0%, #151515 100%);
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.35);
transition: border-color 0.2s, box-shadow 0.2s;
}
.market-group.open {
border-color: rgba(212, 175, 55, 0.25);
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.08);
}
.market-group :deep(.row) {
border-radius: 8px;
}
.market-group.open :deep(.row) {
border-radius: 0;
}
.market-foot-btn {

144
apps/player/src/views/MyBetsView.vue
View File

@@ -3,7 +3,10 @@ import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import BetHistoryCard, { type BetHistoryItem } from '../components/BetHistoryCard.vue';
import BetStatsPanel from '../components/BetStatsPanel.vue';
import GoldSpinner from '../components/GoldSpinner.vue';
import { useOnLocaleChange } from '../composables/useOnLocaleChange';
import { usePullToRefresh } from '../composables/usePullToRefresh';
const { t } = useI18n();
@@ -13,15 +16,26 @@ const page = ref(1);
const loading = ref(false);
const initialLoading = ref(true);
const hasMore = ref(true);
const statusFilter = ref('');
const sentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
const FILTERS = [
{ key: '', label: 'history.filter_all' },
{ key: 'WON', label: 'history.filter_won' },
{ key: 'LOST', label: 'history.filter_lost' },
{ key: 'PENDING', label: 'history.filter_pending' },
{ key: 'PUSH', label: 'history.filter_push' },
];
async function loadPage(p: number) {
if (loading.value) return;
loading.value = true;
try {
const { data } = await api.get('/player/bets', { params: { page: p } });
const params: Record<string, unknown> = { page: p };
if (statusFilter.value) params.status = statusFilter.value;
const { data } = await api.get('/player/bets', { params });
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
total.value = result.total ?? 0;
const pageSize = result.pageSize ?? 20;
@@ -38,7 +52,7 @@ async function loadPage(p: number) {
}
}
function reset() {
async function reset() {
items.value = [];
total.value = 0;
page.value = 1;
@@ -47,8 +61,18 @@ function reset() {
loadPage(1);
}
function changeFilter(key: string) {
if (statusFilter.value === key) return;
statusFilter.value = key;
reset();
}
useOnLocaleChange(reset);
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await loadPage(1); },
});
onMounted(() => {
observer = new IntersectionObserver(
(entries) => {
@@ -56,7 +80,7 @@ onMounted(() => {
loadPage(page.value + 1);
}
},
{ rootMargin: '120px' },
{ rootMargin: '200px' },
);
if (sentinel.value) observer.observe(sentinel.value);
});
@@ -64,28 +88,59 @@ onMounted(() => {
onUnmounted(() => {
observer?.disconnect();
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
</script>
<template>
<div class="history-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div v-if="initialLoading" class="state">{{ t('bet.loading') }}</div>
<div v-if="initialLoading" class="state">
<GoldSpinner :size="36" />
<span class="loading-text">{{ t('bet.loading') }}</span>
</div>
<template v-else-if="items.length">
<BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
<template v-else>
<BetStatsPanel :items="items" />
<div ref="sentinel" class="sentinel" />
<div v-if="loading" class="load-more-spinner">
<span class="spinner" />
<div class="filter-tabs">
<button
v-for="f in FILTERS"
:key="f.key"
type="button"
class="filter-tab"
:class="{ active: statusFilter === f.key }"
@click="changeFilter(f.key)"
>
{{ t(f.label) }}
</button>
</div>
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
{{ t('history.no_more') }}
</div>
<template v-if="items.length">
<BetHistoryCard v-for="bet in items" :key="bet.betNo" :bet="bet" />
<div ref="sentinel" class="sentinel" />
<div v-if="loading" class="load-more-spinner">
<GoldSpinner :size="24" />
</div>
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
{{ t('common.no_more') }}
</div>
</template>
<div v-else class="state">{{ t('history.empty') }}</div>
</template>
<div v-else class="state">{{ t('history.empty') }}</div>
</div>
</template>
@@ -94,7 +149,48 @@ onUnmounted(() => {
padding-bottom: 24px;
}
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.filter-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: #141414;
border: 1px solid #2a2a2a;
transition: all 0.2s;
}
.filter-tab.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: var(--border-gold-soft);
}
.state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
padding: 56px 20px;
@@ -102,6 +198,10 @@ onUnmounted(() => {
font-size: 14px;
}
.loading-text {
font-size: 13px;
}
.sentinel {
height: 1px;
}
@@ -112,20 +212,6 @@ onUnmounted(() => {
padding: 20px 0 8px;
}
.spinner {
display: inline-block;
width: 22px;
height: 22px;
border: 3px solid #2a2a2a;
border-top-color: var(--primary-light);
border-radius: 50%;
animation: spin 0.7s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.end-hint {
text-align: center;
font-size: 12px;

30
apps/player/src/views/ProfileView.vue
View File

@@ -7,6 +7,8 @@ import { formatMoney } from '../utils/localeDisplay';
import LocaleFlag from '../components/LocaleFlag.vue';
import { useAuthStore } from '../stores/auth';
import { useAppLocale } from '../composables/useAppLocale';
import GoldSpinner from '../components/GoldSpinner.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
import walletBg from '../assets/images/钱包.png';
const { t, locale } = useI18n();
@@ -54,11 +56,22 @@ const displayedBalance = computed(() =>
: formatMoney(profile.value?.wallet?.availableBalance, locale.value),
);
onMounted(async () => {
async function fetchProfile() {
const { data } = await api.get('/player/profile');
profile.value = data.data;
initFromUser(data.data?.locale);
runCountUp(amountValue(data.data?.wallet?.availableBalance));
}
onMounted(fetchProfile);
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await fetchProfile(); },
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
async function changeLocale(code: string) {
@@ -73,6 +86,13 @@ function logout() {
<template>
<div class="profile-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div class="wallet-banner">
<img class="wallet-banner-img" :src="walletBg" alt="" />
<img src="/logo.png" alt="TheBet365" class="wallet-card-logo" />
@@ -149,6 +169,14 @@ function logout() {
</template>
<style scoped>
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.profile-page {
padding: 8px 0 12px;
}

275
apps/player/src/views/WalletView.vue
View File

@@ -1,13 +1,31 @@
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ref, onMounted, onUnmounted } from 'vue';
import { useI18n } from 'vue-i18n';
import api from '../api';
import { formatMoney } from '../utils/localeDisplay';
import GoldSpinner from '../components/GoldSpinner.vue';
import WalletStatsPanel from '../components/WalletStatsPanel.vue';
import { usePullToRefresh } from '../composables/usePullToRefresh';
const { t, locale } = useI18n();
const transactions = ref<
Array<{ transactionType: string; amount: string; createdAt: string; transactionId?: string }>
>([]);
type Transaction = {
transactionType: string;
amount: string;
createdAt: string;
transactionId?: string;
};
const items = ref<Transaction[]>([]);
const total = ref(0);
const page = ref(1);
const loading = ref(false);
const initialLoading = ref(true);
const hasMore = ref(true);
const typeFilter = ref('');
const sentinel = ref<HTMLElement | null>(null);
let observer: IntersectionObserver | null = null;
const TX_KEY_MAP: Record<string, string> = {
MANUAL_DEPOSIT: 'wallet.tx_deposit',
@@ -29,6 +47,13 @@ const TX_KEY_MAP: Record<string, string> = {
WITHDRAW: 'wallet.tx_withdraw',
};
const FILTERS = [
{ key: '', label: 'wallet.filter_all' },
{ key: 'deposit', label: 'wallet.filter_deposit' },
{ key: 'withdraw', label: 'wallet.filter_withdraw' },
{ key: 'bet', label: 'wallet.filter_bet' },
];
function txLabel(type: string): string {
const key = TX_KEY_MAP[type.toUpperCase()];
if (key) {
@@ -38,46 +63,252 @@ function txLabel(type: string): string {
return type;
}
onMounted(async () => {
const { data } = await api.get('/player/wallet/transactions');
transactions.value = data.data.items ?? [];
function isDepositType(type: string): boolean {
const t = type.toUpperCase();
return t.includes('DEPOSIT') || t === 'CASHBACK_DEPOSIT';
}
function isWithdrawType(type: string): boolean {
const t = type.toUpperCase();
return t.includes('WITHDRAW');
}
function isBetType(type: string): boolean {
const t = type.toUpperCase();
return t.startsWith('BET_');
}
function matchesFilter(tx: Transaction): boolean {
if (!typeFilter.value) return true;
if (typeFilter.value === 'deposit') return isDepositType(tx.transactionType) || tx.transactionType === 'MANUAL_ADJUST';
if (typeFilter.value === 'withdraw') return isWithdrawType(tx.transactionType);
if (typeFilter.value === 'bet') return isBetType(tx.transactionType);
return true;
}
async function loadPage(p: number) {
if (loading.value) return;
loading.value = true;
try {
const { data } = await api.get('/player/wallet/transactions', { params: { page: p } });
const result = data.data ?? { items: [], total: 0, pageSize: 20 };
total.value = result.total ?? 0;
const pageSize = result.pageSize ?? 20;
const newItems = (result.items ?? []).filter(matchesFilter);
if (p === 1) {
items.value = newItems;
} else {
items.value = [...items.value, ...newItems];
}
hasMore.value = (result.items?.length ?? 0) >= pageSize;
page.value = p;
} finally {
loading.value = false;
initialLoading.value = false;
}
}
async function reset() {
items.value = [];
total.value = 0;
page.value = 1;
hasMore.value = true;
initialLoading.value = true;
loadPage(1);
}
function changeFilter(key: string) {
if (typeFilter.value === key) return;
typeFilter.value = key;
reset();
}
const { pullDistance, refreshing, spinning, progress } = usePullToRefresh({
onRefresh: async () => { await loadPage(1); },
});
onMounted(() => {
loadPage(1);
observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && hasMore.value && !loading.value) {
loadPage(page.value + 1);
}
},
{ rootMargin: '200px' },
);
if (sentinel.value) observer.observe(sentinel.value);
});
onUnmounted(() => {
observer?.disconnect();
});
const pullIndicatorStyle = () => ({
height: `${pullDistance.value}px`,
opacity: Math.min(pullDistance.value / 48, 1),
});
</script>
<template>
<div>
<div v-if="transactions.length" class="card">
<div
v-for="tx in transactions"
:key="tx.transactionId ?? tx.createdAt"
class="tx-row"
>
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
{{ formatMoney(tx.amount, locale) }}
</span>
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
</div>
<div class="wallet-page">
<div
class="pull-indicator"
:style="pullIndicatorStyle()"
>
<GoldSpinner v-if="spinning" :size="28" :progress="progress" :active="spinning" />
</div>
<div v-else class="empty">{{ t('wallet.no_records') }}</div>
<div v-if="initialLoading" class="state">
<GoldSpinner :size="36" />
<span class="loading-text">{{ t('bet.loading') }}</span>
</div>
<template v-else>
<WalletStatsPanel :items="items" />
<div class="filter-tabs">
<button
v-for="f in FILTERS"
:key="f.key"
type="button"
class="filter-tab"
:class="{ active: typeFilter === f.key }"
@click="changeFilter(f.key)"
>
{{ t(f.label) }}
</button>
</div>
<div v-if="items.length" class="tx-list">
<div
v-for="tx in items"
:key="tx.transactionId ?? tx.createdAt + Math.random()"
class="tx-row"
>
<span class="tx-type">{{ txLabel(tx.transactionType) }}</span>
<span :class="parseFloat(tx.amount) >= 0 ? 'pos' : 'neg'">
{{ formatMoney(tx.amount, locale) }}
</span>
<span class="tx-time">{{ new Date(tx.createdAt).toLocaleString() }}</span>
</div>
</div>
<div ref="sentinel" class="sentinel" />
<div v-if="loading" class="load-more-spinner">
<GoldSpinner :size="24" />
</div>
<div v-else-if="!hasMore && items.length > 0" class="end-hint">
{{ t('common.no_more') }}
</div>
<div v-if="!items.length && !initialLoading" class="empty">
{{ t('wallet.no_records') }}
</div>
</template>
</div>
</template>
<style scoped>
.wallet-page {
padding-bottom: 24px;
}
.pull-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: height 0.15s ease;
}
.filter-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
flex-shrink: 0;
padding: 7px 14px;
border-radius: 999px;
font-size: 12px;
font-weight: 700;
color: var(--text-muted);
background: #141414;
border: 1px solid #2a2a2a;
transition: all 0.2s;
}
.filter-tab.active {
color: var(--primary-light);
background: rgba(212, 175, 55, 0.1);
border-color: var(--border-gold-soft);
}
.state {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;
color: var(--text-muted);
padding: 56px 20px;
font-weight: 600;
font-size: 14px;
}
.loading-text {
font-size: 13px;
}
.tx-list {
margin-bottom: 0;
}
.tx-row {
display: flex;
justify-content: space-between;
font-size: 14px;
padding: 12px 0;
padding: 12px 16px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.tx-row:last-child {
border-bottom: none;
}
.tx-type { font-weight: 700; color: var(--text); }
.pos { color: var(--primary-light); font-weight: 800; font-size: 15px; }
.neg { color: var(--danger); font-weight: 700; }
.tx-time { width: 100%; font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.sentinel {
height: 1px;
}
.load-more-spinner {
display: flex;
justify-content: center;
padding: 20px 0 8px;
}
.end-hint {
text-align: center;
font-size: 12px;
color: #555;
font-weight: 600;
padding: 16px 0 4px;
letter-spacing: 0.03em;
}
.empty { text-align: center; color: var(--text-muted); padding: 40px 16px; font-weight: 600; }
</style>