OL-LearnPlatform-Frontend/src/views/teacher/message/MessageCenter.vue

<template>
  <div class="message-center">
    <!-- 顶部Tab导航 -->
    <div class="tab-container">
      <n-tabs v-model:value="activeTab" type="line" size="large" class="message-tabs">
        <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 } from 'vue'
import { NBadge, NTabs, NTabPane, useMessage } from 'naive-ui'
import { ChatApi } 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 message = useMessage()

// 各类消息数量（角标显示）
const notificationCount = ref(0)  // 即时消息数量
const commentCount = ref(0)       // 评论和@数量  
const favoriteCount = ref(0)      // 赞和收藏数量
const systemCount = ref(0)        // 系统消息数量

// 加载状态
const loading = ref(false)

// 生命周期钩子
onMounted(() => {
  // 初始化逻辑
  loadMessageCounts()
})

// 加载各类消息数量
const loadMessageCounts = async () => {
  loading.value = true
  try {
    // 加载即时消息数量
    await loadNotificationCount()

    // TODO: 后续可以添加其他类型的消息数量加载
    // await loadCommentCount()
    // await loadFavoriteCount()
    // await loadSystemCount()

  } catch (error) {
    console.error('加载消息数量失败:', error)
    message.error('加载消息数量失败')
  } finally {
    loading.value = false
  }
}

// 加载即时消息数量
const loadNotificationCount = async () => {
  try {
    const response = await ChatApi.getUnreadCount()
    if (response.data) {
      notificationCount.value = response.data.total || 0
    }
  } catch (error) {
    console.error('获取未读消息数量失败:', error)
    // 如果API调用失败，尝试获取会话列表计算未读数量
    try {
      const chatsResponse = await ChatApi.getMyChats()
      if (chatsResponse.data && chatsResponse.data.success) {
        notificationCount.value = chatsResponse.data.result.reduce((total: number, chat: any) => {
          return total + (chat.unreadCount || 0)
        }, 0)
      }
    } catch (chatError) {
      console.error('获取会话列表失败:', chatError)
      // 如果都失败了，保持默认值0
      notificationCount.value = 0
    }
  }
}
</script>

<style scoped>
.message-center {
  padding: 20px;
  background-color: #fff;
}

.tab-container {
  margin-bottom: 20px;
}

.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>