aquagreen_wechat_app/src/subPackages/pages-common/messageList.vue

<template>
  <view class="app-container pb-20">
    <TopBar title="消息通知" show-back>
      <template #right>
        <text class="text-blue-500 text-sm" @click="markAllRead">全部已读</text>
      </template>
    </TopBar>

    <!-- 筛选标签 -->
    <view class="bg-white px-4 py-3 flex gap-2">
      <view
        v-for="tab in filterTabs"
        :key="tab.value"
        class="px-4 py-2 rounded-full text-sm whitespace-nowrap"
        :class="currentFilter === tab.value ? 'bg-blue-500 text-white' : 'bg-gray-100 text-gray-600'"
        @click="currentFilter = tab.value"
      >
        {{ tab.label }}
      </view>
    </view>

    <!-- 消息列表 -->
    <view class="bg-white">
      <view
        v-for="msg in filteredMessages"
        :key="msg.id"
        class="notice-item"
        @click="goToDetail(msg)"
      >
        <view class="flex justify-between items-start mb-2">
          <view class="flex items-center flex-1">
            <text v-if="!msg.read" class="w-2 h-2 bg-red-500 rounded-full mr-2 flex-shrink-0"></text>
            <text v-else class="w-2 h-2 rounded-full mr-2 flex-shrink-0"></text>
            <text class="font-medium text-sm" :class="msg.read ? 'text-gray-600' : 'text-gray-800'">{{ msg.title }}</text>
          </view>
          <text class="text-gray-400 text-xs whitespace-nowrap">{{ formatRelativeTime(msg.createTime) }}</text>
        </view>
        <text class="text-gray-500 text-sm line-clamp-2">{{ msg.content }}</text>
      </view>
    </view>

    <view v-if="filteredMessages.length === 0" class="px-4 mt-3">
      <EmptyState message="暂无消息" />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import TopBar from '@/components/common/TopBar.vue'
import EmptyState from '@/components/common/EmptyState.vue'
import { useNotificationStore } from '@/stores/notification'
import { formatRelativeTime, navigateTo } from '@/utils'

const notificationStore = useNotificationStore()
const currentFilter = ref('all')

const filterTabs = [
  { label: '全部', value: 'all' },
  { label: '任务消息', value: 'task' },
  { label: '系统消息', value: 'system' },
]

const filteredMessages = computed(() => {
  let list = notificationStore.notifications
  if (currentFilter.value !== 'all') {
    list = list.filter(n => n.type === currentFilter.value)
  }
  return list.map(n => ({
    ...n,
    content: n.content.length > 60 ? n.content.slice(0, 60) + '...' : n.content
  }))
})

function markAllRead() {
  notificationStore.markAllAsRead()
}

function goToDetail(msg: typeof filteredMessages.value[0]) {
  notificationStore.markAsRead(msg.id)
  uni.setStorageSync('current_message', msg)
  navigateTo('/subPackages/pages-common/messageDetail')
}
</script>

<style scoped>
.notice-item {
  background: white;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.notice-item:active {
  background: #f9fafb;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>