diff --git a/src/layout/components/notice/index.vue b/src/layout/components/notice/index.vue index bee7dd8..5c1d2a2 100644 --- a/src/layout/components/notice/index.vue +++ b/src/layout/components/notice/index.vue @@ -36,21 +36,75 @@ const state = reactive({ }); const newsList = ref([]) as any; +/** + * 过滤5分钟内的消息(最多5条) + * @param messages 消息列表 + * @returns 过滤后的消息列表 + */ +const filterMessages = (messages: any[]) => { + const now = new Date().getTime(); + const fiveMinutesAgo = now - 5 * 60 * 1000; // 5分钟前的时间戳 + + // 过滤掉5分钟前的消息 + const recentMessages = messages.filter((msg: any) => { + const msgTime = new Date(msg.time).getTime(); + return msgTime >= fiveMinutesAgo; + }); + + // 如果5分钟内的消息超过5条,则只保留最新的5条 + if (recentMessages.length > 5) { + return recentMessages.slice(0, 5); // 只取前5条最新消息 + } + + return recentMessages; +}; + /** * 初始化数据 * @returns */ const getTableData = async () => { state.loading = true; - newsList.value = noticeStore.state.notices; + const allNotices = [...noticeStore.state.notices]; // 复制数组避免直接修改原数据 + + // 过滤消息 + const filteredNotices = filterMessages(allNotices); + newsList.value = filteredNotices; + state.loading = false; }; +// 监听通知变化,自动过滤 +watch( + () => noticeStore.state.notices, + (newNotices) => { + const filteredNotices = filterMessages([...newNotices]); + newsList.value = filteredNotices; + }, + { deep: true } +); + //点击消息,写入已读 const onNewsClick = (item: any) => { - newsList.value[item].read = true; - //并且写入pinia - noticeStore.state.notices = newsList.value; + if (newsList.value[item]) { + newsList.value[item].read = true; + //并且写入pinia + noticeStore.state.notices = noticeStore.state.notices.map((notice: any, index: number) => { + if (index === findOriginalIndex(item)) { + return { ...notice, read: true }; + } + return notice; + }); + } +}; + +// 辅助函数:找到原始索引 +const findOriginalIndex = (filteredIndex: number) => { + const filteredNotices = filterMessages([...noticeStore.state.notices]); + const currentMessage = filteredNotices[filteredIndex]; + + // 在原始数组中查找对应消息的索引 + return noticeStore.state.notices.findIndex((notice: any) => notice.message === currentMessage.message && notice.time === currentMessage.time); }; // 前往通知中心点击