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

feat(player): 重构客服悬浮入口与设置抽屉，优化消息页交互

Browse Source 
- 新增可拖拽悬浮客服按钮，支持贴边吸附与位置记忆
- 顶部栏改为设置抽屉入口，将语言/规则/登出等从个人页迁出
- 余额芯片集成用户头像，移除独立头像菜单
- 消息列表去掉冗余未读白点，统一消息页返回导航
- 补充 profile.settings 多语言文案

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Mars
2026-06-18 13:32:37 +08:00
parent fce2333322
commit 46155018ce
9 changed files with 885 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,17 +2,26 @@
import { ref, onMounted, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { playerAvatarUrl, randomAvatarKey } from '@thebet365/shared';
import { useAuthStore } from '../stores/auth';
import { formatMoney } from '../utils/localeDisplay';
import { usePlayerProfile } from '../composables/usePlayerProfile';
const { locale, t } = useI18n();
const { profileRaw, refreshProfile } = usePlayerProfile();
const { profileRaw, refreshProfile, avatarUrl } = usePlayerProfile();
const auth = useAuthStore();
const router = useRouter();
const open = ref(false);
const root = ref<HTMLElement | null>(null);
const wallet = computed(() => profileRaw.value?.wallet ?? null);
const displayAvatarUrl = computed(() => {
if (avatarUrl.value) return avatarUrl.value;
const seed = auth.user?.username;
return seed ? playerAvatarUrl(randomAvatarKey(seed)) : null;
});
function amountValue(value: unknown): number {
if (value == null) return 0;
if (typeof value === 'number') return Number.isFinite(value) ? value : 0;
@@ -74,7 +83,11 @@ onUnmounted(() => {
<span class="chip-label">{{ t('wallet.cash_balance') }}</span>
<span class="chip-amount">{{ available }}</span>
</span>
<span class="chevron" :class="{ open }">▾</span>
<!-- Integrated Avatar image -->
<span class="chip-avatar-wrap">
<img v-if="displayAvatarUrl" :src="displayAvatarUrl" alt="" class="chip-avatar-img" />
</span>
</button>
<div v-if="open" class="cash-panel">
@@ -110,9 +123,9 @@ onUnmounted(() => {
.cash-chip {
display: flex;
align-items: center;
gap: 4px;
gap: 10px;
height: 36px;
padding: 0 10px;
padding: 0 6px 0 10px;
min-width: 0;
cursor: pointer;
border: 1px solid var(--border);
@@ -149,15 +162,25 @@ onUnmounted(() => {
font-variant-numeric: tabular-nums;
}
.chevron {
font-size: 10px;
color: var(--text-muted);
transition: transform 0.2s;
margin-left: 0;
/* Integrated Avatar Styling */
.chip-avatar-wrap {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid var(--border-gold-soft);
flex-shrink: 0;
background: var(--bg-body);
}
.chevron.open {
transform: rotate(180deg);
.chip-avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
}
.cash-panel {

14
apps/player/src/components/MessageListPanel.vue
View File

@@ -122,7 +122,6 @@ onActivated(tryLoad);
:class="{ unread: !item.isRead }"
>
<button type="button" class="row-body" @click="openDetail(item.id)">
<span class="row-dot" aria-hidden="true" />
<span class="row-main">
<span class="title-row">
<span class="title">{{ messageTitle(item) }}</span>
@@ -231,19 +230,6 @@ onActivated(tryLoad);
font-weight: 700;
}
.row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
flex-shrink: 0;
}
.list-row.unread .row-dot {
background: var(--primary);
box-shadow: 0 0 8px rgba(255, 255, 255, 0.45);
}
.row-main {
flex: 1;
min-width: 0;

517
apps/player/src/components/SettingsDrawer.vue Normal file
View File

@@ -0,0 +1,517 @@
<script setup lang="ts">
import { ref, watch, onUnmounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '../stores/auth';
import { useAppLocale } from '../composables/useAppLocale';
import LocaleFlag from './LocaleFlag.vue';
const props = defineProps<{
modelValue: boolean;
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
}>();
const { t, locale } = useI18n();
const router = useRouter();
const auth = useAuthStore();
const { locales, setLocale } = useAppLocale();
const showRulesModal = ref(false);
const showLanguageModal = ref(false);
function close() {
emit('update:modelValue', false);
}
async function changeLocale(code: string) {
await setLocale(code);
showLanguageModal.value = false;
}
function goEdit() {
close();
router.push('/profile/edit');
}
function logout() {
close();
auth.logout();
router.push('/');
}
const isAnyOpen = computed(() => props.modelValue || showRulesModal.value || showLanguageModal.value);
watch(
isAnyOpen,
(isOpen) => {
if (isOpen) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
);
onUnmounted(() => {
document.body.style.overflow = '';
});
</script>
<template>
<div class="settings-drawer-wrapper" :class="{ open: modelValue }">
<div class="settings-drawer-backdrop" @click="close" />
<div class="settings-drawer-panel">
<!-- Header -->
<div class="drawer-header">
<h2 class="drawer-title">{{ t('profile.settings') }}</h2>
<button type="button" class="drawer-close-btn" @click="close" :aria-label="t('common.cancel')">
<svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
<!-- Content -->
<div class="drawer-content">
<section class="settings-group">
<!-- Modify Profile -->
<button type="button" class="settings-cell" @click="goEdit">
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="8" r="3.5" />
<path d="M5 20c0-3.5 3.1-6 7-6s7 2.5 7 6" />
</svg>
<span class="cell-label">{{ t('profile.edit') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</button>
<!-- Betting Rules -->
<button type="button" class="settings-cell" @click="showRulesModal = true">
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<path d="M7 4h10v16H7z" />
<path d="M10 8h6M10 12h6M10 16h4" />
</svg>
<span class="cell-label">{{ t('profile.rules_title') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</button>
<!-- Language Selector -->
<button type="button" class="settings-cell" @click="showLanguageModal = true">
<span class="cell-main">
<svg class="cell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
<circle cx="12" cy="12" r="9" />
<path d="M3 12h18M12 3c2.5 2.8 4 6 4 9s-1.5 6.2-4 9M12 3c-2.5 2.8-4 6-4 9s1.5 6.2 4 9" />
</svg>
<span class="cell-label">{{ t('profile.language') }}</span>
</span>
<span class="cell-chevron" aria-hidden="true">›</span>
</button>
</section>
<!-- Logout Button -->
<button type="button" class="logout-btn" @click="logout">
{{ t('auth.logout') }}
</button>
</div>
</div>
</div>
<!-- Betting Rules Modal -->
<Teleport to="body">
<Transition name="modal-fade">
<div v-if="showRulesModal" class="modal-overlay" @click.self="showRulesModal = false">
<div class="modal-card">
<div class="modal-header">
<h3 class="modal-title">{{ t('profile.rules_title') }}</h3>
<button type="button" class="modal-close-btn" @click="showRulesModal = false" :aria-label="t('common.cancel')">
<svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
<div class="modal-body rules-modal-body">
<p>{{ t('profile.rules_p1') }}</p>
<p>{{ t('profile.rules_p2') }}</p>
<p>{{ t('profile.rules_p3') }}</p>
<p>{{ t('profile.rules_p4') }}</p>
<p>{{ t('profile.rules_p5') }}</p>
</div>
</div>
</div>
</Transition>
</Teleport>
<!-- Language Selector Modal -->
<Teleport to="body">
<Transition name="modal-fade">
<div v-if="showLanguageModal" class="modal-overlay" @click.self="showLanguageModal = false">
<div class="modal-card modal-card--small">
<div class="modal-header">
<h3 class="modal-title">{{ t('profile.language') }}</h3>
<button type="button" class="modal-close-btn" @click="showLanguageModal = false" :aria-label="t('common.cancel')">
<svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
<div class="modal-body">
<div class="lang-list">
<button
v-for="item in locales"
:key="item.code"
type="button"
class="lang-item"
:class="{ active: locale === item.code }"
@click="changeLocale(item.code)"
>
<div class="lang-item-main">
<LocaleFlag :locale="item.code" :size="16" />
<span>{{ item.label }}</span>
</div>
<svg v-if="locale === item.code" class="check-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polyline points="20 6 9 17 4 12" />
</svg>
</button>
</div>
</div>
</div>
</div>
</Transition>
</Teleport>
</template>
<style scoped>
.settings-drawer-wrapper {
position: fixed;
inset: 0;
z-index: 150;
pointer-events: none;
visibility: hidden;
transition: visibility 0.3s ease;
}
.settings-drawer-wrapper.open {
pointer-events: auto;
visibility: visible;
}
.settings-drawer-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
}
.settings-drawer-wrapper.open .settings-drawer-backdrop {
opacity: 1;
}
.settings-drawer-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 70%;
background: #001a33;
border-left: 1px solid var(--border);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.settings-drawer-wrapper.open .settings-drawer-panel {
transform: translateX(0);
}
.drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
background: var(--dropdown-bg);
}
.drawer-title {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0;
}
.drawer-close-btn {
background: transparent;
color: var(--text-muted);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.2s, color 0.2s;
padding: 0;
cursor: pointer;
}
.drawer-close-btn:active {
background: var(--surface-active);
color: var(--text);
}
.close-icon {
width: 20px;
height: 20px;
}
.drawer-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 20px;
}
.settings-group {
background: var(--gradient-card);
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-card-sm);
margin-bottom: 24px;
}
.settings-cell {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
width: 100%;
min-height: 48px;
padding: 0 16px;
background: none;
color: var(--text);
font-size: 14px;
font-weight: 600;
text-decoration: none;
border: none;
border-bottom: 1px solid var(--border);
text-align: left;
cursor: pointer;
}
.settings-cell:last-child {
border-bottom: none;
}
.settings-cell:active {
background: var(--bg-hover);
}
.cell-main {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
.cell-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--text-muted);
}
.cell-label {
color: var(--text);
}
.cell-chevron {
color: var(--text-muted);
font-size: 20px;
line-height: 1;
font-weight: 300;
transition: transform 0.15s ease;
}
.logout-btn {
width: 100%;
min-height: 44px;
padding: 0 16px;
border-radius: var(--radius);
border: 1px solid var(--border);
background: var(--bg-card);
color: var(--danger);
font-size: 14px;
font-weight: 700;
transition: background 0.2s;
cursor: pointer;
}
.logout-btn:active {
background: rgba(255, 69, 58, 0.08);
}
/* Modal Overlays & Cards */
.modal-overlay {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
background: rgba(0, 0, 0, 0.72);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.modal-card {
width: 100%;
max-width: 340px;
background: var(--dropdown-bg, #0A2540);
border: 1px solid var(--border-strong);
border-radius: 12px;
padding: 20px 18px 22px;
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
.modal-card--small {
max-width: 300px;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.modal-title {
margin: 0;
font-size: 16px;
font-weight: 800;
color: var(--text);
}
.modal-close-btn {
background: transparent;
color: var(--text-muted);
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
transition: background 0.2s, color 0.2s;
cursor: pointer;
}
.modal-close-btn:active {
background: var(--surface-active);
color: var(--text);
}
.modal-body {
color: var(--text);
}
.rules-modal-body {
font-size: 13px;
line-height: 1.6;
color: var(--text-muted);
overflow-y: auto;
max-height: 50vh;
padding-right: 4px;
}
.rules-modal-body p {
margin: 0 0 10px;
}
.rules-modal-body p:last-child {
margin-bottom: 0;
}
/* Language List inside Modal */
.lang-list {
display: flex;
flex-direction: column;
gap: 6px;
}
.lang-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
background: rgba(255, 255, 255, 0.02);
border-radius: 8px;
border: 1px solid var(--border);
color: var(--text-muted);
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.lang-item:active {
background: var(--surface-active);
}
.lang-item.active {
border-color: var(--primary);
color: var(--text);
background: var(--surface-accent);
}
.lang-item-main {
display: flex;
align-items: center;
gap: 10px;
}
.check-icon {
width: 16px;
height: 16px;
color: var(--success, #34C759);
}
/* Modal Transitions */
.modal-fade-enter-active,
.modal-fade-leave-active {
transition: opacity 0.2s ease;
}
.modal-fade-enter-active .modal-card,
.modal-fade-leave-active .modal-card {
transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-fade-enter-from,
.modal-fade-leave-to {
opacity: 0;
}
.modal-fade-enter-from .modal-card,
.modal-fade-leave-to .modal-card {
transform: scale(0.96);
}
</style>