feat(player/admin/api): 站内邮箱、在线状态、员工菜单权限与内容管理增强
API: - 新增 player-messages 域：充值审核通过/拒绝、Banner/公告推广消息，支持多语言模板 - 新增 presence 域：Redis 心跳在线状态，管理端可查询在线玩家数 - User 表增加 visible_menus 字段；新增 player_messages 表及迁移 - 充值审核通过/拒绝时按系统配置自动写入玩家站内消息 - 管理端新增 GET /deposit-orders/pending-count、GET /presence/online-count - 玩家端新增消息 CRUD、presence/ping、home 返回 inbox 开关配置 - 员工管理支持 visibleMenus 配置与删除保护（不能删自己/最后超管） - SystemConfig 增加 inbox 功能开关及各类通知开关 Admin: - 员工管理：按角色默认菜单 + 可勾选可见菜单项 - ManageLayout：按 visibleMenus 过滤侧栏；充值待审数量角标轮询 - Contents：富文本编辑器、图片字段组件重构 - DashboardPlayers：展示在线玩家数；AdminPlayerStatusCell 在线状态列 - 多页面 i18n 与权限细节调整 Player: - 站内邮箱中心（InboxHub）：消息列表/详情、未读角标、一键已读/删除 - 公告列表与详情页；走马灯可跳转详情 - 客服 Modal 改为 Panel，与邮箱 Hub 整合 - 充值状态轮询通知；presence 心跳；BetSlip 清空二次确认 - HomeView 今日赛事板块；FootballView 等体验优化 Shared: 新增 CANNOT_DELETE_SELF、STAFF_NOT_FOUND、MESSAGE_NOT_FOUND 等错误码 Docs: 玩家端缺失功能分析文档 Chore: 移除 .agents/skills 设计类 skill 文件 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
360
apps/player/src/views/MessageDetailView.vue
Normal file
360
apps/player/src/views/MessageDetailView.vue
Normal file
@@ -0,0 +1,360 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onActivated, onMounted, ref, watch } from 'vue';
|
||||
import { useRoute, useRouter } from 'vue-router';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import { formatLocalMatchDateTime } from '@thebet365/shared';
|
||||
import GoldSpinner from '../components/GoldSpinner.vue';
|
||||
import ConfirmDialog from '../components/ConfirmDialog.vue';
|
||||
import { formatMoney } from '../utils/localeDisplay';
|
||||
import {
|
||||
usePlayerMessages,
|
||||
type DepositMessagePayload,
|
||||
type BannerPromoPayload,
|
||||
type PlayerMessage,
|
||||
} from '../composables/usePlayerMessages';
|
||||
import { useInboxFeature } from '../composables/useInboxFeature';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const { t, locale } = useI18n();
|
||||
const { loadMessageDetail, markMessageRead, deleteMessage } = usePlayerMessages();
|
||||
const { hubRoute } = useInboxFeature();
|
||||
|
||||
const messageId = computed(() => String(route.params.id ?? ''));
|
||||
const message = ref<PlayerMessage | null>(null);
|
||||
const loading = ref(false);
|
||||
const error = ref(false);
|
||||
const deleting = ref(false);
|
||||
const deleteConfirmVisible = ref(false);
|
||||
|
||||
const depositPayload = computed(() => {
|
||||
if (
|
||||
!message.value ||
|
||||
message.value.type === 'BANNER_PROMO' ||
|
||||
message.value.type === 'ANNOUNCEMENT_PROMO'
|
||||
) {
|
||||
return null;
|
||||
}
|
||||
return (message.value.payload ?? null) as DepositMessagePayload | null;
|
||||
});
|
||||
const contentPromoId = computed(() => {
|
||||
if (
|
||||
message.value?.type !== 'BANNER_PROMO' &&
|
||||
message.value?.type !== 'ANNOUNCEMENT_PROMO'
|
||||
) {
|
||||
return undefined;
|
||||
}
|
||||
return (message.value.payload as BannerPromoPayload | null)?.contentId;
|
||||
});
|
||||
|
||||
function goBack() {
|
||||
router.back();
|
||||
}
|
||||
|
||||
function goList() {
|
||||
router.push(hubRoute.value);
|
||||
}
|
||||
|
||||
function viewContentPromo() {
|
||||
if (!contentPromoId.value) return;
|
||||
router.push(`/announcements/${contentPromoId.value}`);
|
||||
}
|
||||
|
||||
function formatDate(createdAt?: string) {
|
||||
if (!createdAt) return '';
|
||||
return formatLocalMatchDateTime(createdAt, locale.value, { variant: 'full' });
|
||||
}
|
||||
|
||||
function messageTitle(item: PlayerMessage) {
|
||||
if (item.type === 'DEPOSIT_APPROVED') return t('messages.deposit_approved_title');
|
||||
if (item.type === 'DEPOSIT_REJECTED') return t('messages.deposit_rejected_title');
|
||||
if (item.type === 'BANNER_PROMO' || item.type === 'ANNOUNCEMENT_PROMO') return item.title;
|
||||
return item.title;
|
||||
}
|
||||
|
||||
function messageBody(item: PlayerMessage) {
|
||||
const deposit = depositPayload.value;
|
||||
if (item.type === 'DEPOSIT_APPROVED' && deposit?.orderNo) {
|
||||
return t('messages.deposit_approved_body', {
|
||||
orderNo: deposit.orderNo,
|
||||
amount: formatMoney(deposit.amount ?? '0', locale.value),
|
||||
approvedAmount: formatMoney(
|
||||
deposit.approvedAmount ?? deposit.amount ?? '0',
|
||||
locale.value,
|
||||
),
|
||||
});
|
||||
}
|
||||
if (item.type === 'DEPOSIT_REJECTED' && deposit?.orderNo) {
|
||||
return t('messages.deposit_rejected_body', {
|
||||
orderNo: deposit.orderNo,
|
||||
amount: formatMoney(deposit.amount ?? '0', locale.value),
|
||||
reason: deposit.rejectReason?.trim() || t('messages.no_reason'),
|
||||
});
|
||||
}
|
||||
return item.body;
|
||||
}
|
||||
|
||||
async function fetchDetail() {
|
||||
if (!messageId.value) return;
|
||||
loading.value = true;
|
||||
error.value = false;
|
||||
try {
|
||||
message.value = await loadMessageDetail(messageId.value);
|
||||
if (message.value && !message.value.isRead) {
|
||||
await markMessageRead(messageId.value);
|
||||
message.value = { ...message.value, isRead: true };
|
||||
}
|
||||
} catch {
|
||||
error.value = true;
|
||||
message.value = null;
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function onDelete() {
|
||||
if (!messageId.value || deleting.value) return;
|
||||
deleteConfirmVisible.value = true;
|
||||
}
|
||||
|
||||
async function confirmDelete() {
|
||||
if (!messageId.value || deleting.value) return;
|
||||
deleting.value = true;
|
||||
try {
|
||||
await deleteMessage(messageId.value);
|
||||
deleteConfirmVisible.value = false;
|
||||
router.replace(hubRoute.value);
|
||||
} finally {
|
||||
deleting.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
void fetchDetail();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
void fetchDetail();
|
||||
});
|
||||
|
||||
watch(messageId, () => {
|
||||
void fetchDetail();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="message-detail">
|
||||
<header class="page-header">
|
||||
<button type="button" class="back-btn" :aria-label="t('messages.back')" @click="goBack">‹</button>
|
||||
<h1>{{ t('messages.detail_title') }}</h1>
|
||||
<button
|
||||
v-if="message"
|
||||
type="button"
|
||||
class="delete-header-btn"
|
||||
:aria-label="t('messages.delete')"
|
||||
:disabled="deleting"
|
||||
@click="onDelete"
|
||||
>
|
||||
{{ t('messages.delete') }}
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<div v-if="loading && !message" class="state">
|
||||
<GoldSpinner :size="36" />
|
||||
</div>
|
||||
|
||||
<div v-else-if="error || !message" class="empty">
|
||||
<p>{{ t('messages.not_found') }}</p>
|
||||
<button type="button" class="link-btn" @click="goList">{{ t('messages.view_all') }}</button>
|
||||
</div>
|
||||
|
||||
<article v-else class="detail-article">
|
||||
<span class="status-badge" :class="{ unread: !message.isRead }">
|
||||
{{ message.isRead ? t('messages.status_read') : t('messages.status_unread') }}
|
||||
</span>
|
||||
<p v-if="message.createdAt" class="detail-date">{{ formatDate(message.createdAt) }}</p>
|
||||
<h2 class="detail-title">{{ messageTitle(message) }}</h2>
|
||||
<p class="detail-body">{{ messageBody(message) }}</p>
|
||||
|
||||
<div
|
||||
v-if="message.type === 'DEPOSIT_REJECTED' && depositPayload?.rejectReason?.trim()"
|
||||
class="reason-box"
|
||||
>
|
||||
<p class="reason-label">{{ t('messages.reject_reason') }}</p>
|
||||
<p class="reason-text">{{ depositPayload.rejectReason }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="contentPromoId"
|
||||
type="button"
|
||||
class="action-btn"
|
||||
@click="viewContentPromo"
|
||||
>
|
||||
{{ t('messages.content_promo_view') }}
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="depositPayload?.depositOrderId"
|
||||
type="button"
|
||||
class="action-btn"
|
||||
@click="router.push('/wallet/recharge/history')"
|
||||
>
|
||||
{{ t('messages.view_recharge_history') }}
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<ConfirmDialog
|
||||
v-model:visible="deleteConfirmVisible"
|
||||
:title="t('messages.delete')"
|
||||
:message="t('messages.delete_confirm')"
|
||||
:confirm-text="t('messages.delete')"
|
||||
danger
|
||||
:loading="deleting"
|
||||
@confirm="confirmDelete"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.message-detail {
|
||||
min-height: 100%;
|
||||
padding: 0 0 24px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 0 0 14px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
background: #141414;
|
||||
color: var(--gold);
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.delete-header-btn {
|
||||
border: 1px solid rgba(255, 80, 80, 0.35);
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
background: rgba(255, 80, 80, 0.08);
|
||||
color: #f88;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.delete-header-btn:disabled {
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
margin-bottom: 8px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.status-badge.unread {
|
||||
color: var(--gold);
|
||||
background: rgba(212, 175, 55, 0.12);
|
||||
}
|
||||
|
||||
.state,
|
||||
.empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 48px 16px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
border-radius: 8px;
|
||||
padding: 8px 14px;
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
color: var(--gold);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detail-article {
|
||||
padding: 18px 0 0;
|
||||
}
|
||||
|
||||
.detail-date {
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.detail-title {
|
||||
margin: 0 0 12px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
line-height: 1.45;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detail-body {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 1.75;
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.reason-box {
|
||||
margin-top: 18px;
|
||||
padding: 14px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 107, 107, 0.25);
|
||||
background: rgba(255, 107, 107, 0.08);
|
||||
}
|
||||
|
||||
.reason-label {
|
||||
margin: 0 0 8px;
|
||||
font-size: 12px;
|
||||
color: #ffb4b4;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.reason-text {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
color: #ffe0e0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
margin-top: 24px;
|
||||
width: 100%;
|
||||
padding: 11px 14px;
|
||||
border: 1px solid var(--border-gold-soft);
|
||||
border-radius: 8px;
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
color: var(--gold);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user