feat(player): 新增桌面端 UI 与响应式双端路由架构
- 将原移动端页面重命名为 Mobile*，新增 22 个 Desktop* 视图与 DesktopShell 布局体系 - 路由入口改为 Wrapper 视图，通过 useViewport（≥1024px）自动切换移动/桌面端 - 新增投注单面板、盘口弹层、联赛侧栏、数据表格等桌面组件及独立样式令牌 - 扩展 betSlip store、串关筛选、冠军盘、Toast/悬浮信箱等交互与三语 i18n - 公告/消息 Hub 拆分移动与桌面实现；API 投注/钱包/充值记录支持 pageSize 分页
This commit is contained in:
319
apps/player/src/components/desktop/LeagueSidebar.vue
Normal file
319
apps/player/src/components/desktop/LeagueSidebar.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted } from 'vue';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { useMatchFilters } from '../../composables/useMatchFilters';
|
||||
import { useDesktopParlayMatches } from '../../composables/useDesktopParlayMatches';
|
||||
import {
|
||||
isAfterLocalTodayMatchWindow as isAfterTodayMatchWindow,
|
||||
isInLocalTodayMatchWindow as isInTodayMatchWindow,
|
||||
} from '@thebet365/shared';
|
||||
|
||||
const { t } = useI18n();
|
||||
const { parlayMatches, loadParlayMatches } = useDesktopParlayMatches();
|
||||
const { searchQuery, filterState, toggleLeague, clearFilters } = useMatchFilters();
|
||||
|
||||
onMounted(() => {
|
||||
void loadParlayMatches();
|
||||
});
|
||||
|
||||
function normalizeLeagueName(name: string): string {
|
||||
return name
|
||||
.replace(/\.unit$/i, '')
|
||||
.replace(/[-_]+/g, ' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
const availableLeagues = computed(() => {
|
||||
const map = new Map<string, { id: string; name: string; count: number }>();
|
||||
const now = new Date();
|
||||
const keyword = searchQuery.value.trim().toLowerCase();
|
||||
|
||||
for (const m of parlayMatches.value) {
|
||||
if (keyword) {
|
||||
const haystack = `${m.homeTeamName} ${m.awayTeamName} ${m.leagueName}`.toLowerCase();
|
||||
if (!haystack.includes(keyword)) continue;
|
||||
}
|
||||
|
||||
let timeMatch = true;
|
||||
if (filterState.value.time === 'today') {
|
||||
timeMatch = isInTodayMatchWindow(m.startTime, now);
|
||||
} else if (filterState.value.time === 'early') {
|
||||
timeMatch = isAfterTodayMatchWindow(m.startTime, now);
|
||||
}
|
||||
if (!timeMatch) continue;
|
||||
|
||||
if (filterState.value.status === 'open' && m.matchPhase !== 'open' && m.matchPhase !== undefined) continue;
|
||||
if (filterState.value.status === 'settled' && m.matchPhase !== 'settled') continue;
|
||||
|
||||
const id = m.leagueId ?? m.leagueName;
|
||||
const existing = map.get(id);
|
||||
if (existing) {
|
||||
existing.count += 1;
|
||||
} else {
|
||||
map.set(id, {
|
||||
id,
|
||||
name: normalizeLeagueName(m.leagueName),
|
||||
count: 1,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return Array.from(map.values()).sort((a, b) => a.name.localeCompare(b.name));
|
||||
});
|
||||
|
||||
const isSelected = (leagueId: string) => filterState.value.leagueIds.includes(leagueId);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="league-sidebar">
|
||||
<div class="search-box">
|
||||
<input
|
||||
v-model="searchQuery"
|
||||
type="text"
|
||||
:placeholder="t('nav.search')"
|
||||
class="sidebar-search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section">
|
||||
<div class="section-hdr">{{ t('bet.filter_time') }}</div>
|
||||
<div class="time-filters">
|
||||
<button
|
||||
type="button"
|
||||
class="time-btn"
|
||||
:class="{ active: filterState.time === 'all' }"
|
||||
@click="filterState.time = 'all'"
|
||||
>
|
||||
{{ t('bet.time_all') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="time-btn"
|
||||
:class="{ active: filterState.time === 'today' }"
|
||||
@click="filterState.time = 'today'"
|
||||
>
|
||||
{{ t('bet.time_today') }}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="time-btn"
|
||||
:class="{ active: filterState.time === 'early' }"
|
||||
@click="filterState.time = 'early'"
|
||||
>
|
||||
{{ t('bet.time_early') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-section leagues-section">
|
||||
<div class="section-hdr leagues-hdr">
|
||||
<span>{{ t('bet.filter_league') }}</span>
|
||||
<button
|
||||
v-if="filterState.leagueIds.length > 0"
|
||||
type="button"
|
||||
class="clear-btn"
|
||||
@click="clearFilters"
|
||||
>
|
||||
{{ t('common.clear') }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="leagues-list">
|
||||
<div
|
||||
v-for="lg in availableLeagues"
|
||||
:key="lg.id"
|
||||
class="league-item"
|
||||
:class="{ active: isSelected(lg.id) }"
|
||||
@click="toggleLeague(lg.id)"
|
||||
>
|
||||
<div class="checkbox" :class="{ checked: isSelected(lg.id) }"></div>
|
||||
<span class="league-name" :title="lg.name">{{ lg.name }}</span>
|
||||
<span class="league-count">{{ lg.count }}</span>
|
||||
</div>
|
||||
<div v-if="availableLeagues.length === 0" class="empty-leagues">
|
||||
{{ t('bet.no_matches') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.league-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 12px 0;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 0 12px 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-search-input {
|
||||
width: 100%;
|
||||
background: #0d0d0d !important;
|
||||
border: 1px solid var(--border) !important;
|
||||
color: var(--text);
|
||||
padding: 6px 10px;
|
||||
font-size: 11px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.sidebar-search-input:focus {
|
||||
border-color: var(--border-gold-soft) !important;
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.1) !important;
|
||||
}
|
||||
|
||||
.sidebar-section {
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.section-hdr {
|
||||
font-size: 10px;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.time-filters {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.time-btn {
|
||||
flex: 1;
|
||||
background: #141414;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-muted);
|
||||
padding: 5px 2px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.time-btn:hover {
|
||||
border-color: var(--border-gold-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.time-btn.active {
|
||||
background: rgba(212, 175, 55, 0.08);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary-light);
|
||||
}
|
||||
|
||||
.leagues-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
border-bottom: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.leagues-hdr {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.clear-btn {
|
||||
background: transparent;
|
||||
color: var(--primary-light);
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
padding: 0;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.leagues-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
margin-right: -4px;
|
||||
padding-right: 4px;
|
||||
}
|
||||
|
||||
.league-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
margin-bottom: 2px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.league-item:hover {
|
||||
background: var(--bg-hover);
|
||||
}
|
||||
|
||||
.league-item.active {
|
||||
background: rgba(212, 175, 55, 0.04);
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
background: #0d0d0d;
|
||||
}
|
||||
|
||||
.checkbox.checked {
|
||||
border-color: var(--primary);
|
||||
background: var(--primary);
|
||||
}
|
||||
|
||||
.checkbox.checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 4px;
|
||||
width: 3px;
|
||||
height: 6px;
|
||||
border: solid #111;
|
||||
border-width: 0 2px 2px 0;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.league-name {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #ddd;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.league-item.active .league-name {
|
||||
color: var(--primary-light);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.league-count {
|
||||
font-size: 9px;
|
||||
color: var(--text-muted);
|
||||
font-weight: 700;
|
||||
background: #181818;
|
||||
padding: 1px 5px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.empty-leagues {
|
||||
padding: 16px 0;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user