feat 消息列表5分钟后不超过5条

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) => {
+  if (newsList.value[item]) {
     newsList.value[item].read = true;
     //并且写入pinia
-  noticeStore.state.notices = newsList.value;
+    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);
 };
 
 // 前往通知中心点击