notify.ts
3.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
import type { NotificationItem } from '@vben/layouts';
import { computed, ref, watch } from 'vue';
import { useAppConfig } from '@vben/hooks';
import { SvgMessageUrl } from '@vben/icons';
import { $t } from '@vben/locales';
import { useAccessStore, useUserStore } from '@vben/stores';
import { useEventSource } from '@vueuse/core';
import { notification } from 'ant-design-vue';
import dayjs from 'dayjs';
import { defineStore } from 'pinia';
const { apiURL, clientId, sseEnable } = useAppConfig(
import.meta.env,
import.meta.env.PROD,
);
export const useNotifyStore = defineStore(
'app-notify',
() => {
/**
* return才会被持久化 存储全部消息
*/
const notificationList = ref<NotificationItem[]>([]);
const userStore = useUserStore();
const userId = computed(() => {
return userStore.userInfo?.userId || '0';
});
const notifications = computed(() => {
return notificationList.value.filter(
(item) => item.userId === userId.value,
);
});
/**
* 开始监听sse消息
*/
function startListeningMessage() {
/**
* 未开启 不监听
*/
if (!sseEnable) {
return;
}
const accessStore = useAccessStore();
const token = accessStore.accessToken;
const sseAddr = `${apiURL}/resource/sse?clientid=${clientId}&Authorization=Bearer ${token}`;
const { data } = useEventSource(sseAddr, [], {
autoReconnect: {
delay: 1000,
onFailed() {
console.error('sse重连失败.');
},
retries: 3,
},
});
watch(data, (message) => {
if (!message) return;
console.log(`接收到消息: ${message}`);
notification.success({
description: message,
duration: 3,
message: $t('component.notice.received'),
});
notificationList.value.unshift({
// avatar: `https://api.multiavatar.com/${random(0, 10_000)}.png`, 随机头像
avatar: SvgMessageUrl,
date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
isRead: false,
message,
title: $t('component.notice.title'),
userId: userId.value,
});
// 需要手动置空 vue3在值相同时不会触发watch
data.value = null;
});
}
/**
* 设置全部已读
*/
function setAllRead() {
notificationList.value
.filter((item) => item.userId === userId.value)
.forEach((item) => {
item.isRead = true;
});
}
/**
* 设置单条消息已读
* @param item 通知
*/
function setRead(item: NotificationItem) {
!item.isRead && (item.isRead = true);
}
/**
* 清空全部消息
*/
function clearAllMessage() {
notificationList.value = notificationList.value.filter(
(item) => item.userId !== userId.value,
);
}
/**
* 只需要空实现即可
* 否则会在退出登录清空所有
*/
function $reset() {
// notificationList.value = [];
}
/**
* 显示小圆点
*/
const showDot = computed(() =>
notificationList.value
.filter((item) => item.userId === userId.value)
.some((item) => !item.isRead),
);
return {
$reset,
clearAllMessage,
notificationList,
notifications,
setAllRead,
setRead,
showDot,
startListeningMessage,
};
},
{
persist: {
pick: ['notificationList'],
},
},
);