540 lines
12 KiB
Vue
540 lines
12 KiB
Vue
<template>
|
|
<div class="notification-page">
|
|
<!-- 页面标题 -->
|
|
<div class="page-header">
|
|
<div class="header-left">
|
|
<h1 class="page-title">消息通知</h1>
|
|
<span class="unread-badge" v-if="unreadTotal > 0">
|
|
{{ unreadTotal }} 条未读
|
|
</span>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a-button @click="handleMarkAll" :loading="markAllLoading" :disabled="unreadTotal === 0">
|
|
<CheckOutlined />
|
|
全部标记已读
|
|
</a-button>
|
|
<a-popconfirm
|
|
title="确定要清空所有已读消息吗？"
|
|
ok-text="确定"
|
|
cancel-text="取消"
|
|
@confirm="handleClearRead"
|
|
>
|
|
<a-button :disabled="readCount === 0">
|
|
<DeleteOutlined />
|
|
清空已读
|
|
</a-button>
|
|
</a-popconfirm>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 过滤 Tabs -->
|
|
<div class="filter-bar">
|
|
<div class="filter-type-group">
|
|
<a-radio-group v-model:value="filterType" button-style="solid" size="middle">
|
|
<a-radio-button value="">
|
|
全部
|
|
<span v-if="unreadTotal > 0" class="tab-count">{{ unreadTotal }}</span>
|
|
</a-radio-button>
|
|
<a-radio-button
|
|
v-for="(info, key) in notificationTypeMap"
|
|
:key="key"
|
|
:value="key"
|
|
>
|
|
{{ info.icon }} {{ info.label }}
|
|
<span v-if="(unreadByType as any)[key] > 0" class="tab-count">
|
|
{{ (unreadByType as any)[key] }}
|
|
</span>
|
|
</a-radio-button>
|
|
</a-radio-group>
|
|
</div>
|
|
|
|
<!-- 已读/未读切换 -->
|
|
<div class="filter-read-group">
|
|
<a-segmented v-model:value="readFilter" :options="readFilterOptions" size="small" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 通知列表 -->
|
|
<a-spin :spinning="listLoading">
|
|
<div class="notification-list">
|
|
<template v-if="listData.length">
|
|
<div
|
|
v-for="item in listData"
|
|
:key="item.id"
|
|
class="notif-card"
|
|
:class="{ unread: !item.isRead }"
|
|
@click="handleItemClick(item)"
|
|
>
|
|
<div class="notif-type-icon" :style="{ background: notificationTypeMap[item.type!]?.color + '15' }">
|
|
{{ notificationTypeMap[item.type!]?.icon || '📢' }}
|
|
</div>
|
|
<div class="notif-body">
|
|
<div class="notif-header">
|
|
<span class="notif-type-tag" :style="{ color: notificationTypeMap[item.type!]?.color }">
|
|
{{ notificationTypeMap[item.type!]?.label || '通知' }}
|
|
</span>
|
|
<span class="notif-time">{{ formatTime(item.createTime) }}</span>
|
|
</div>
|
|
<div class="notif-title">{{ item.title }}</div>
|
|
<div v-if="item.content" class="notif-content">{{ item.content }}</div>
|
|
<div v-if="item.senderName" class="notif-footer">
|
|
<a-avatar :size="18" :src="item.senderAvatar" class="sender-avatar">
|
|
<template #icon><UserOutlined /></template>
|
|
</a-avatar>
|
|
<span class="sender-name">{{ item.senderName }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="notif-actions" @click.stop>
|
|
<a-dropdown :trigger="['click']">
|
|
<a-button type="text" size="small" class="action-btn">
|
|
<EllipsisOutlined />
|
|
</a-button>
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item v-if="!item.isRead" @click="handleMarkRead(item)">
|
|
<CheckOutlined /> 标记已读
|
|
</a-menu-item>
|
|
<a-menu-item @click="handleDelete(item)">
|
|
<DeleteOutlined /> 删除
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
<div v-if="!item.isRead" class="unread-dot" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<a-empty v-else description="暂无通知消息" class="empty-state">
|
|
<template #image>
|
|
<div class="empty-icon">🔔</div>
|
|
</template>
|
|
</a-empty>
|
|
</div>
|
|
|
|
<!-- 分页 -->
|
|
<div v-if="pagination.total > 0" class="pagination-wrap">
|
|
<a-pagination
|
|
v-model:current="pagination.page"
|
|
:total="pagination.total"
|
|
:page-size="pagination.pageSize"
|
|
:show-quick-jumper="true"
|
|
:show-total="(total: number) => `共 ${total} 条`"
|
|
size="small"
|
|
@change="loadData"
|
|
/>
|
|
</div>
|
|
</a-spin>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, onMounted, watch } from 'vue'
|
|
import {
|
|
CheckOutlined,
|
|
DeleteOutlined,
|
|
EllipsisOutlined,
|
|
UserOutlined,
|
|
} from '@ant-design/icons-vue'
|
|
import { message } from 'ant-design-vue'
|
|
import {
|
|
pageNotification,
|
|
markRead,
|
|
markAllRead,
|
|
removeNotification,
|
|
clearReadNotifications,
|
|
} from '@/api/app/notification'
|
|
import {
|
|
useNotificationCenter,
|
|
notificationTypeMap,
|
|
} from '@/composables/useNotificationCenter'
|
|
import type { Notification, NotificationType } from '@/api/app/notification/model'
|
|
|
|
const {
|
|
unreadTotal,
|
|
unreadByType,
|
|
fetchUnreadCount,
|
|
startPolling,
|
|
stopPolling,
|
|
formatTime,
|
|
getNotificationLink,
|
|
} = useNotificationCenter()
|
|
|
|
// 过滤状态
|
|
const filterType = ref<NotificationType | ''>('')
|
|
const readFilter = ref('all')
|
|
const readFilterOptions = [
|
|
{ label: '全部', value: 'all' },
|
|
{ label: '未读', value: 'unread' },
|
|
{ label: '已读', value: 'read' },
|
|
]
|
|
|
|
// 列表数据
|
|
const listData = ref<Notification[]>([])
|
|
const listLoading = ref(false)
|
|
const markAllLoading = ref(false)
|
|
const readCount = ref(0)
|
|
|
|
// 分页
|
|
const pagination = reactive({
|
|
page: 1,
|
|
pageSize: 15,
|
|
total: 0,
|
|
})
|
|
|
|
// 计算已读数
|
|
function calcReadCount() {
|
|
readCount.value = listData.value.filter((n) => n.isRead === 1).length
|
|
}
|
|
|
|
// 加载数据
|
|
async function loadData() {
|
|
listLoading.value = true
|
|
try {
|
|
const params: Record<string, unknown> = {
|
|
page: pagination.page,
|
|
limit: pagination.pageSize,
|
|
}
|
|
if (filterType.value) params.type = filterType.value
|
|
if (readFilter.value === 'unread') params.isRead = 0
|
|
if (readFilter.value === 'read') params.isRead = 1
|
|
|
|
const res = await pageNotification(params)
|
|
listData.value = res.list ?? []
|
|
pagination.total = res.count ?? 0
|
|
calcReadCount()
|
|
} catch {
|
|
message.error('加载通知失败')
|
|
} finally {
|
|
listLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 点击通知项
|
|
async function handleItemClick(item: Notification) {
|
|
if (!item.isRead && item.id) {
|
|
try {
|
|
await markRead(item.id)
|
|
item.isRead = 1
|
|
if (unreadTotal.value > 0) unreadTotal.value--
|
|
calcReadCount()
|
|
} catch {
|
|
// 静默
|
|
}
|
|
}
|
|
const link = getNotificationLink(item)
|
|
navigateTo(link)
|
|
}
|
|
|
|
// 标记单条已读
|
|
async function handleMarkRead(item: Notification) {
|
|
if (!item.id) return
|
|
try {
|
|
await markRead(item.id)
|
|
item.isRead = 1
|
|
if (unreadTotal.value > 0) unreadTotal.value--
|
|
calcReadCount()
|
|
} catch {
|
|
message.error('操作失败')
|
|
}
|
|
}
|
|
|
|
// 全部标记已读
|
|
async function handleMarkAll() {
|
|
markAllLoading.value = true
|
|
try {
|
|
const type = filterType.value || undefined
|
|
await markAllRead(type ? { type } : undefined)
|
|
listData.value.forEach((n) => { n.isRead = 1 })
|
|
unreadTotal.value = 0
|
|
calcReadCount()
|
|
message.success('已全部标记为已读')
|
|
} catch {
|
|
message.error('操作失败')
|
|
} finally {
|
|
markAllLoading.value = false
|
|
}
|
|
}
|
|
|
|
// 删除通知
|
|
async function handleDelete(item: Notification) {
|
|
if (!item.id) return
|
|
try {
|
|
await removeNotification(item.id)
|
|
listData.value = listData.value.filter((n) => n.id !== item.id)
|
|
if (!item.isRead && unreadTotal.value > 0) unreadTotal.value--
|
|
pagination.total--
|
|
calcReadCount()
|
|
message.success('已删除')
|
|
} catch {
|
|
message.error('删除失败')
|
|
}
|
|
}
|
|
|
|
// 清空已读
|
|
async function handleClearRead() {
|
|
try {
|
|
const type = filterType.value || undefined
|
|
await clearReadNotifications(type ? { type } : undefined)
|
|
loadData()
|
|
fetchUnreadCount()
|
|
message.success('已清空已读消息')
|
|
} catch {
|
|
message.error('操作失败')
|
|
}
|
|
}
|
|
|
|
// 监听过滤变化
|
|
watch([filterType, readFilter], () => {
|
|
pagination.page = 1
|
|
loadData()
|
|
})
|
|
|
|
onMounted(() => {
|
|
startPolling()
|
|
loadData()
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
stopPolling()
|
|
})
|
|
|
|
// SEO
|
|
useHead({ title: '消息通知 - 控制台' })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.notification-page {
|
|
max-width: 1280px;
|
|
padding: 0 16px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/* ===== 页面头部 ===== */
|
|
.page-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 24px 0 20px;
|
|
flex-wrap: wrap;
|
|
gap: 12px;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 22px;
|
|
font-weight: 700;
|
|
color: #1f2937;
|
|
margin: 0;
|
|
}
|
|
|
|
.unread-badge {
|
|
background: linear-gradient(135deg, #e6f4ff 0%, #f0f7ff 100%);
|
|
color: #1890ff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
padding: 4px 12px;
|
|
border-radius: 9999px;
|
|
border: 1px solid rgba(24, 144, 255, 0.2);
|
|
}
|
|
|
|
.header-actions {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ===== 过滤栏 ===== */
|
|
.filter-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 20px;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.filter-type-group {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.filter-bar :deep(.ant-radio-button-wrapper) {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tab-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 18px;
|
|
height: 18px;
|
|
padding: 0 5px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
background: rgba(24, 144, 255, 0.15);
|
|
color: #1890ff;
|
|
border-radius: 9999px;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
/* ===== 通知列表 ===== */
|
|
.notification-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.notif-card {
|
|
display: flex;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
background: #fff;
|
|
border: 1px solid #f0f0f0;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
}
|
|
|
|
.notif-card:hover {
|
|
border-color: #d9d9d9;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.notif-card.unread {
|
|
border-color: #e6f4ff;
|
|
background: linear-gradient(135deg, #f0f7ff 0%, #fafbff 100%);
|
|
}
|
|
|
|
.notif-card.unread::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 32px;
|
|
background: #1890ff;
|
|
border-radius: 0 4px 4px 0;
|
|
}
|
|
|
|
.notif-type-icon {
|
|
flex-shrink: 0;
|
|
width: 42px;
|
|
height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 12px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.notif-body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.notif-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.notif-type-tag {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.notif-time {
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.notif-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.88);
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.notif-card.unread .notif-title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
.notif-content {
|
|
font-size: 13px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
line-height: 1.6;
|
|
margin-top: 4px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.notif-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.sender-avatar {
|
|
font-size: 10px;
|
|
}
|
|
|
|
.sender-name {
|
|
font-size: 12px;
|
|
color: rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
.notif-actions {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 4px;
|
|
}
|
|
|
|
.action-btn {
|
|
color: rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.action-btn:hover {
|
|
color: rgba(0, 0, 0, 0.65);
|
|
}
|
|
|
|
.unread-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background: #1890ff;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ===== 空状态 ===== */
|
|
.empty-state {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 64px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* ===== 分页 ===== */
|
|
.pagination-wrap {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-top: 16px;
|
|
padding: 8px 0;
|
|
}
|
|
</style>
|