怎样实现一个优雅的通知中心？（Vue 3 + 消息队列实战）

🧑‍💻 写在开头

点赞 + 收藏 === 学会🤣🤣🤣
前言

一个完善的通知系统可以明显提拔用户体验，让用户及时了解：

• 新批评回复
  
• 文章被点赞
  
• 系统公告
  
• 签到嘉奖
  

本日分享怎样实现一个优雅的通知中心！
功能设计

通知类型

1. // src/types/notification.ts
2. export type NotificationType =
3.   | 'comment'      // 评论通知
4.   | 'reply'         // 回复通知
5.   | 'like'          // 点赞通知
6.   | 'follow'        // 关注通知
7.   | 'system'        // 系统通知
8.   | 'achievement'   // 成就通知
10. export interface Notification {
11.   id: string
12.   type: NotificationType
13.   title: string
14.   content: string
15.   avatar?: string
16.   link?: string
17.   read: boolean
18.   createTime: number
19. }

复制代码

核心实现

1. 通知服务

1. // src/services/notification.ts
2. import { defineStore } from 'pinia'
3. import { ref, computed } from 'vue'
4. import type { Notification, NotificationType } from '@/types/notification'
6. export const useNotificationStore = defineStore('notification', () => {
7.   const notifications = ref<Notification[]>([])
8.   
9.   // 加载通知
10.   function loadNotifications() {
11.     const data = localStorage.getItem('blog_notifications')
12.     if (data) {
13.       notifications.value = JSON.parse(data)
14.     }
15.   }
16.   
17.   // 保存通知
18.   function saveNotifications() {
19.     localStorage.setItem('blog_notifications', JSON.stringify(notifications.value))
20.   }
21.   
22.   // 添加通知
23.   function addNotification(notification: Omit<Notification, 'id' | 'read' | 'createTime'>) {
24.     const newNotification: Notification = {
25.       ...notification,
26.       id: `notif_${Date.now()}_${Math.random().toString(36).slice(2)}`,
27.       read: false,
28.       createTime: Date.now()
29.     }
30.    
31.     notifications.value.unshift(newNotification)
32.     saveNotifications()
33.    
34.     // 触发浏览器通知
35.     if (Notification.permission === 'granted') {
36.       new Notification(newNotification.title, {
37.         body: newNotification.content,
38.         icon: newNotification.avatar
39.       })
40.     }
41.    
42.     return newNotification
43.   }
44.   
45.   // 标记已读
46.   function markAsRead(id: string) {
47.     const notification = notifications.value.find(n => n.id === id)
48.     if (notification) {
49.       notification.read = true
50.       saveNotifications()
51.     }
52.   }
53.   
54.   // 全部已读
55.   function markAllAsRead() {
56.     notifications.value.forEach(n => {
57.       n.read = true
58.     })
59.     saveNotifications()
60.   }
61.   
62.   // 删除通知
63.   function deleteNotification(id: string) {
64.     const index = notifications.value.findIndex(n => n.id === id)
65.     if (index > -1) {
66.       notifications.value.splice(index, 1)
67.       saveNotifications()
68.     }
69.   }
70.   
71.   // 未读数量
72.   const unreadCount = computed(() => {
73.     return notifications.value.filter(n => !n.read).length
74.   })
75.   
76.   // 按类型分组
77.   const groupedNotifications = computed(() => {
78.     const groups: Record<NotificationType, Notification[]> = {
79.       comment: [],
80.       reply: [],
81.       like: [],
82.       follow: [],
83.       system: [],
84.       achievement: []
85.     }
86.    
87.     notifications.value.forEach(n => {
88.       groups[n.type].push(n)
89.     })
90.    
91.     return groups
92.   })
93.   
94.   // 请求通知权限
95.   async function requestPermission() {
96.     if ('Notification' in window) {
97.       const permission = await Notification.requestPermission()
98.       return permission === 'granted'
99.     }
100.     return false
101.   }
102.   
103.   loadNotifications()
104.   
105.   return {
106.     notifications,
107.     unreadCount,
108.     groupedNotifications,
109.     addNotification,
110.     markAsRead,
111.     markAllAsRead,
112.     deleteNotification,
113.     requestPermission
114.   }
115. })

复制代码

2. 通知中心组件

1. <template>
2.   <el-popover
3.     v-model:visible="visible"
4.     placement="bottom-end"
5.     :width="360"
6.     trigger="click"
7.   >
8.     <template #reference>
9.       
10.         <el-badge :value="unreadCount" :hidden="unreadCount === 0" :max="99">
11.           <el-button :icon="Bell" circle />
12.         </el-badge>
13.         
14.         <span v-if="hasNewNotification"  />
15.       
16.     </template>
17.    
18.     <template #default>
19.       
20.         
21.         
22.           <h3>通知中心</h3>
23.           <el-button
24.             v-if="unreadCount > 0"
25.             text
26.             size="small"
27.             @click="handleMarkAllRead"
28.           >
29.             全部已读
30.           </el-button>
31.         
32.         
33.         
34.         <el-tabs v-model="activeTab" >
35.           <el-tab-pane label="全部" name="all" />
36.           <el-tab-pane label="评论" name="comment" />
37.           <el-tab-pane label="点赞" name="like" />
38.           <el-tab-pane label="系统" name="system" />
39.         </el-tabs>
40.         
41.         
42.         
43.          
44.             <el-avatar
45.               :src="notification.avatar || defaultAvatar"
46.               :size="40"
47.             />
48.             
49.             
50.               {{ notification.title }}
51.               {{ notification.content }}
52.               {{ formatTime(notification.createTime) }}
53.             
54.             
55.             
56.               <el-button
57.                 v-if="!notification.read"
58.                 text
59.                 size="small"
60.                 @click.stop="handleMarkRead(notification.id)"
61.               >
62.                 标记已读
63.               </el-button>
64.               <el-button
65.                 text
66.                 size="small"
67.                 @click.stop="handleDelete(notification.id)"
68.               >
69.                 删除
70.               </el-button>
71.             
72.          
73.          
74.           <el-empty
75.             v-if="filteredNotifications.length === 0"
76.             description="暂无通知"
77.           />
78.         
79.       
80.     </template>
81.   </el-popover>
82. </template>

复制代码

使用示例

1. <template>
2.   <header>
3.    
4.       
5.       <NotificationCenter />
6.    
7.   </header>
8. </template>

复制代码

浏览器通知

1. // 在需要时请求权限并发送通知
2. async function sendBrowserNotification(title: string, options?: NotificationOptions) {
3.   if ('Notification' in window && Notification.permission === 'granted') {
4.     new Notification(title, {
5.       icon: '/logo.png',
6.       badge: '/badge.png',
7.       ...options
8.     })
9.   }
10. }

复制代码

💡 进阶功能

• 接入 WebSocket 实现及时推送
  
• 添加通知免打扰模式
  
• 支持通知折叠和展开
  

如果对您有所资助，欢迎您点个关注，我会定时更新技能文档，大家一起讨论学习，一起进步。