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

src/layout/components/Navbar.vue

@@ -30,7 +30,7 @@
           <div>
             <el-popover placement="bottom" trigger="click" transition="el-zoom-in-top" :width="300" :persistent="false">
               <template #reference>
-                <el-badge :value="newNotice > 0 ? newNotice : ''" :max="99">
+                <el-badge :value="noticeStore.unreadCount.value > 0 ? noticeStore.unreadCount.value : ''" :max="99">
                   <div class="right-menu-item hover-effect message-trigger"><svg-icon icon-class="message" /></div>
                 </el-badge>
               </template>
@@ -107,7 +107,6 @@ const appStore = useAppStore();
 const userStore = useUserStore();
 const settingsStore = useSettingsStore();
 const noticeStore = storeToRefs(useNoticeStore());
-const newNotice = ref(<number>0);
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
@@ -158,14 +157,6 @@ const handleCommand = (command: string) => {
     commandMap[command]();
   }
 };
-//用深度监听 消息
-watch(
-  () => noticeStore.state.value.notices,
-  (newVal) => {
-    newNotice.value = newVal.filter((item: any) => !item.read).length;
-  },
-  { deep: true }
-);
 </script>
 
 <style lang="scss" scoped>

src/layout/components/notice/index.vue

@@ -31,10 +31,12 @@
 <script setup lang="ts" name="layoutBreadcrumbUserNews">
 import { useNoticeStore } from '@/store/modules/notice';
 import router from '@/router';
+import { markMessageRead, markMessageReadBatch } from '@/utils/message-read';
+import { useUserStore } from '@/store/modules/user';
 import { NOTICE_GROUP } from '@/utils/push-message';
 
 const noticeStore = useNoticeStore();
-const { readAll } = useNoticeStore();
+const userStore = useUserStore();
 
 // 定义变量内容
 const state = reactive({
@@ -67,12 +69,23 @@ const emptyDescription = computed(() => {
 
 //点击消息，写入已读
 const onNewsClick = async (item: any) => {
-  currentNewsList.value[item].read = true;
   const current = currentNewsList.value[item];
+  if (current?.messageId) {
+    markMessageRead(userStore.userId, current.messageId);
+    noticeStore.markRead(current.messageId);
+  }
   if (current?.path) {
     await router.push(current.path);
   }
 };
+
+const readAll = () => {
+  const ids = newsList.value
+    .map((item: any) => item.messageId)
+    .filter((item: string | number | undefined) => item !== undefined && item !== null);
+  markMessageReadBatch(userStore.userId, ids);
+  noticeStore.markReadBatch(ids);
+};
 </script>
 
 <style lang="scss" scoped>

src/layout/index.vue

@@ -19,7 +19,7 @@ import { AppMain, Navbar, Settings, TagsView } from './components';
 import { useAppStore } from '@/store/modules/app';
 import { useSettingsStore } from '@/store/modules/settings';
 import { NavTypeEnum } from '@/enums/NavTypeEnum';
-import { initPush } from '@/utils/push';
+import { initMessageBox, initPush } from '@/utils/push';
 
 const settingsStore = useSettingsStore();
 const theme = computed(() => settingsStore.theme);
@@ -59,8 +59,12 @@ watchEffect(() => {
 
 const settingRef = ref<InstanceType<typeof Settings>>();
 
-onMounted(() => {
-  initPush();
+onMounted(async () => {
+  try {
+    await initMessageBox();
+  } finally {
+    initPush();
+  }
 });
 
 const handleClickOutside = () => {