update 完成消息盒子功能前后端联动(已读未读在前端浏览器存储)

src/store/modules/notice.ts

@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia';
-import { reactive } from 'vue';
+import { computed, reactive } from 'vue';
 
 export interface NoticeItem {
+  messageId?: string | number;
   title?: string;
   category?: string;
   type?: string;
@@ -11,6 +12,7 @@ export interface NoticeItem {
   content?: string;
   data?: Record<string, any> | null;
   path?: string;
+  timestamp?: number;
   time: string;
 }
 
@@ -19,28 +21,75 @@ export const useNoticeStore = defineStore('notice', () => {
     notices: [] as NoticeItem[]
   });
 
+  const unreadCount = computed(() => state.notices.filter((item) => !item.read).length);
+
+  const buildNoticeKey = (notice: NoticeItem) => {
+    if (notice.messageId !== undefined && notice.messageId !== null) {
+      return String(notice.messageId);
+    }
+    return [notice.type, notice.source, notice.timestamp, notice.message].join(':');
+  };
+
+  const sortNotices = () => {
+    state.notices.sort((a, b) => Number(b.timestamp || 0) - Number(a.timestamp || 0));
+  };
+
+  const setNotices = (notices: NoticeItem[]) => {
+    state.notices = [...notices];
+    sortNotices();
+  };
+
   const addNotice = (notice: NoticeItem) => {
-    state.notices.push(notice);
+    const key = buildNoticeKey(notice);
+    const index = state.notices.findIndex((item) => buildNoticeKey(item) === key);
+    if (index > -1) {
+      state.notices[index] = {
+        ...state.notices[index],
+        ...notice
+      };
+    } else {
+      state.notices.unshift(notice);
+    }
+    sortNotices();
   };
 
-  const removeNotice = (notice: NoticeItem) => {
-    state.notices.splice(state.notices.indexOf(notice), 1);
+  const markRead = (messageId?: string | number) => {
+    if (messageId === undefined || messageId === null) {
+      return;
+    }
+    const target = state.notices.find((item) => String(item.messageId) === String(messageId));
+    if (target) {
+      target.read = true;
+    }
   };
 
-  //实现全部已读
-  const readAll = () => {
-    state.notices.forEach((item: any) => {
-      item.read = true;
+  const markReadBatch = (messageIds: Array<string | number>) => {
+    const idSet = new Set(messageIds.map((item) => String(item)));
+    state.notices.forEach((item) => {
+      if (item.messageId !== undefined && item.messageId !== null && idSet.has(String(item.messageId))) {
+        item.read = true;
+      }
     });
   };
 
+  const readAll = () => {
+    markReadBatch(
+      state.notices
+        .map((item) => item.messageId)
+        .filter((item): item is string | number => item !== undefined && item !== null)
+    );
+  };
+
   const clearNotice = () => {
     state.notices = [];
   };
   return {
     state,
+    unreadCount,
+    setNotices,
     addNotice,
-    removeNotice,
+    markRead,
+    markReadBatch,
     readAll,
     clearNotice
   };