343 lines
9.9 KiB
Vue
343 lines
9.9 KiB
Vue
<template>
|
||
<div class="message-center">
|
||
<!-- 顶部Tab导航 -->
|
||
<div class="tab-container">
|
||
<n-tabs v-model:value="activeTab" type="line" size="large" class="message-tabs" @update:value="handleTabChange">
|
||
<n-tab-pane name="notification" tab="即时消息">
|
||
<template #tab>
|
||
<div class="tab-item">
|
||
<span>即时消息</span>
|
||
<n-badge :value="notificationCount" :show="notificationCount > 0" class="tab-badge">
|
||
</n-badge>
|
||
</div>
|
||
</template>
|
||
</n-tab-pane>
|
||
|
||
<n-tab-pane name="comment" tab="评论和@">
|
||
<template #tab>
|
||
<div class="tab-item">
|
||
<span>评论和@</span>
|
||
<n-badge :value="commentCount" :show="commentCount > 0" class="tab-badge">
|
||
</n-badge>
|
||
</div>
|
||
</template>
|
||
</n-tab-pane>
|
||
|
||
<n-tab-pane name="favorite" tab="赞和收藏">
|
||
<template #tab>
|
||
<div class="tab-item">
|
||
<span>赞和收藏</span>
|
||
<n-badge :value="favoriteCount" :show="favoriteCount > 0" class="tab-badge">
|
||
</n-badge>
|
||
</div>
|
||
</template>
|
||
</n-tab-pane>
|
||
|
||
<n-tab-pane name="system" tab="系统消息">
|
||
<template #tab>
|
||
<div class="tab-item">
|
||
<span>系统消息</span>
|
||
<n-badge :value="systemCount" :show="systemCount > 0" class="tab-badge">
|
||
</n-badge>
|
||
</div>
|
||
</template>
|
||
</n-tab-pane>
|
||
</n-tabs>
|
||
</div>
|
||
|
||
<!-- Tab内容区域 -->
|
||
<div class="tab-content">
|
||
<div v-show="activeTab === 'notification'">
|
||
<NotificationMessages />
|
||
</div>
|
||
<div v-show="activeTab === 'comment'">
|
||
<CommentLikes />
|
||
</div>
|
||
<div v-show="activeTab === 'favorite'">
|
||
<FavoriteMessages />
|
||
</div>
|
||
<div v-show="activeTab === 'system'">
|
||
<SystemMessages />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onUnmounted } from 'vue'
|
||
import { NBadge, NTabs, NTabPane } from 'naive-ui'
|
||
import { ChatApi, MessageApi } from '@/api'
|
||
|
||
// 导入子组件
|
||
import NotificationMessages from './components/NotificationMessages.vue'
|
||
import CommentLikes from './components/CommentLikes.vue'
|
||
import FavoriteMessages from './components/FavoriteMessages.vue'
|
||
import SystemMessages from './components/SystemMessages.vue'
|
||
|
||
// 响应式数据
|
||
const activeTab = ref('notification') // 当前激活的tab
|
||
|
||
// 各类消息数量（角标显示）
|
||
const notificationCount = ref(0) // 即时消息数量
|
||
const commentCount = ref(0) // 评论和@数量
|
||
const favoriteCount = ref(0) // 赞和收藏数量
|
||
const systemCount = ref(0) // 系统消息数量
|
||
|
||
// 加载状态
|
||
const loading = ref(false)
|
||
|
||
// 缓存和防抖
|
||
const cacheTimestamp = ref(0)
|
||
const CACHE_DURATION = 30000 // 30秒缓存
|
||
let refreshTimer: NodeJS.Timeout | null = null
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
// 初始化逻辑
|
||
loadMessageCounts()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
// 清理定时器
|
||
if (refreshTimer) {
|
||
clearTimeout(refreshTimer)
|
||
refreshTimer = null
|
||
}
|
||
})
|
||
|
||
// 加载各类消息数量
|
||
const loadMessageCounts = async (forceRefresh = false) => {
|
||
// 检查缓存
|
||
const now = Date.now()
|
||
if (!forceRefresh && now - cacheTimestamp.value < CACHE_DURATION) {
|
||
console.log('📋 使用缓存的消息数量，跳过加载')
|
||
return
|
||
}
|
||
|
||
console.log('🔄 开始加载消息数量...')
|
||
loading.value = true
|
||
try {
|
||
// 首先尝试使用统一的未读消息数接口
|
||
const unreadCountResult = await Promise.allSettled([loadTotalUnreadCount()])
|
||
console.log('🔍 统一接口结果:', unreadCountResult[0])
|
||
|
||
// 如果统一接口失败，则使用原有的分别加载方式
|
||
if (unreadCountResult[0].status === 'rejected') {
|
||
console.log('⚠️ 统一接口失败，使用分别加载方式')
|
||
// 并行加载各类消息数量，使用 Promise.allSettled 确保即使某个接口失败也不影响其他接口
|
||
const results = await Promise.allSettled([
|
||
loadNotificationCount(),
|
||
loadCommentCount(),
|
||
loadFavoriteCount(),
|
||
loadSystemCount()
|
||
])
|
||
|
||
console.log('📊 分别加载结果:', results)
|
||
// 检查是否有接口失败
|
||
const failedCount = results.filter(result => result.status === 'rejected').length
|
||
if (failedCount > 0) {
|
||
console.log(`⚠️ ${failedCount} 个接口加载失败`)
|
||
// 静默处理接口失败，不影响用户体验
|
||
}
|
||
}
|
||
|
||
console.log('📈 最终消息数量:', {
|
||
notification: notificationCount.value,
|
||
comment: commentCount.value,
|
||
favorite: favoriteCount.value,
|
||
system: systemCount.value
|
||
})
|
||
|
||
cacheTimestamp.value = now
|
||
} catch (error) {
|
||
console.error('加载消息数量失败:', error)
|
||
// 不显示错误消息，因为可能只是部分接口失败
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 防抖刷新
|
||
const debouncedRefresh = () => {
|
||
if (refreshTimer) {
|
||
clearTimeout(refreshTimer)
|
||
}
|
||
refreshTimer = setTimeout(() => {
|
||
loadMessageCounts(true)
|
||
}, 1000)
|
||
}
|
||
|
||
// 加载总的未读消息数
|
||
const loadTotalUnreadCount = async () => {
|
||
try {
|
||
console.log('🔄 尝试调用统一未读消息数接口...')
|
||
const response = await MessageApi.getUnreadMessageCount()
|
||
console.log('🔍 统一接口响应:', response)
|
||
|
||
if (response.code === 200) {
|
||
const result = response.data as any || {}
|
||
console.log('📊 统一接口返回数据:', result)
|
||
|
||
// 使用统一接口返回的数据
|
||
// 检查result.result是否存在，如果存在则使用其中的数据
|
||
if (result.result) {
|
||
const countData = result.result
|
||
if (countData.commentsUnreadCount !== undefined) {
|
||
commentCount.value = countData.commentsUnreadCount || 0
|
||
console.log('✅ 评论未读数设置为:', commentCount.value)
|
||
}
|
||
if (countData.likesUnreadCount !== undefined) {
|
||
favoriteCount.value = countData.likesUnreadCount || 0
|
||
console.log('✅ 赞和收藏未读数设置为:', favoriteCount.value)
|
||
}
|
||
if (countData.systemUnreadCount !== undefined) {
|
||
systemCount.value = countData.systemUnreadCount || 0
|
||
console.log('✅ 系统消息未读数设置为:', systemCount.value)
|
||
}
|
||
}
|
||
// 注意：统一接口没有返回即时消息的未读数，保持为0
|
||
notificationCount.value = 0
|
||
|
||
return true
|
||
}
|
||
console.log('❌ 统一接口响应格式不正确')
|
||
return false
|
||
} catch (error) {
|
||
console.error('❌ 获取总未读消息数失败:', error)
|
||
return false
|
||
}
|
||
}
|
||
|
||
// 加载即时消息数量
|
||
const loadNotificationCount = async () => {
|
||
// 由于 /aiol/aiolChat/unread-count 接口不存在，直接使用备用方案
|
||
try {
|
||
const chatsResponse = await ChatApi.getMyChats()
|
||
if (chatsResponse.data?.success) {
|
||
notificationCount.value = chatsResponse.data.result.reduce((total: number, chat: any) => {
|
||
return total + (chat.unreadCount || 0)
|
||
}, 0)
|
||
} else {
|
||
notificationCount.value = 0
|
||
}
|
||
} catch (chatError) {
|
||
// 静默处理错误，设置为0
|
||
notificationCount.value = 0
|
||
}
|
||
}
|
||
|
||
// 加载评论和@数量
|
||
const loadCommentCount = async () => {
|
||
try {
|
||
const response = await MessageApi.getCommentsAtMessageCount()
|
||
if (response.data && response.data.result) {
|
||
commentCount.value = response.data.result.unread || 0
|
||
console.log('✅ 评论和@未读数量设置为:', commentCount.value)
|
||
} else {
|
||
commentCount.value = 0
|
||
console.log('❌ 评论和@接口响应失败，设置为0')
|
||
}
|
||
} catch (error) {
|
||
console.error('获取评论数量失败:', error)
|
||
commentCount.value = 0
|
||
}
|
||
}
|
||
|
||
// 加载赞和收藏数量
|
||
const loadFavoriteCount = async () => {
|
||
try {
|
||
const response = await MessageApi.getLikesMessageCount()
|
||
console.log('🔍 loadFavoriteCount 响应数据:', response)
|
||
|
||
if (response.data && response.data.result) {
|
||
favoriteCount.value = response.data.result.unread || 0
|
||
console.log('✅ 赞和收藏未读数量设置为:', favoriteCount.value)
|
||
} else {
|
||
favoriteCount.value = 0
|
||
console.log('❌ 赞和收藏接口响应失败，设置为0')
|
||
}
|
||
} catch (error) {
|
||
console.error('获取收藏数量失败:', error)
|
||
// 如果接口不存在，设置为0，不显示错误消息
|
||
favoriteCount.value = 0
|
||
}
|
||
}
|
||
|
||
// 加载系统消息数量
|
||
const loadSystemCount = async () => {
|
||
try {
|
||
console.log('🔍 开始加载系统消息数量')
|
||
const response = await MessageApi.getSystemMessageCount()
|
||
console.log('🔍 系统消息数量API响应:', response)
|
||
|
||
if (response.code === 200 && response.data) {
|
||
systemCount.value = response.data.unread || 0
|
||
console.log('✅ 系统消息数量:', systemCount.value)
|
||
} else {
|
||
console.warn('⚠️ 系统消息数量API返回错误:', response)
|
||
systemCount.value = 0
|
||
}
|
||
} catch (error) {
|
||
console.error('❌ 获取系统消息数量失败:', error)
|
||
systemCount.value = 0
|
||
}
|
||
}
|
||
|
||
// Tab切换处理
|
||
const handleTabChange = (tabName: string) => {
|
||
activeTab.value = tabName
|
||
// 切换Tab时刷新对应数据
|
||
debouncedRefresh()
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.message-center {
|
||
padding: 20px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
.tab-container {
|
||
margin-bottom: 9px;
|
||
}
|
||
|
||
.message-tabs {
|
||
--n-tab-text-color: #666;
|
||
--n-tab-text-color-active: #1890ff;
|
||
--n-bar-color: #1890ff;
|
||
}
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.tab-badge {
|
||
position: relative;
|
||
top: -2px;
|
||
}
|
||
|
||
.tab-content {
|
||
min-height: 400px;
|
||
}
|
||
|
||
/* 调整badge样式 */
|
||
:deep(.n-badge) {
|
||
--n-color: #ff4d4f;
|
||
--n-text-color: #fff;
|
||
--n-font-size: 12px;
|
||
}
|
||
|
||
/* 调整tabs整体样式 */
|
||
:deep(.n-tabs .n-tabs-nav .n-tabs-nav-scroll-content) {
|
||
gap: 32px;
|
||
}
|
||
|
||
:deep(.n-tabs .n-tabs-tab) {
|
||
padding: 12px 0;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
</style> |