refactor(notification): update notification getter and setter

src/components/Home/index.vue

@@ -93,7 +93,7 @@ function nav2activation() {
 }
 
 function nav2announcement() {
-  notificationStore.unreadCount = 0;
+  notificationStore.markRead();
   Taro.navigateTo({
     url: "/pages/announcement/index"
   });

src/pages/announcement/index.vue

@@ -23,11 +23,11 @@
       </view>
       <view class="flex-column">
         <template v-if="currentTab === 'announcement'">
-          <card v-if="!announcementList" style="text-align: center">
+          <card v-if="!announcement.length" style="text-align: center">
             <view>无通知</view>
           </card>
           <card
-            v-for="(item, index) in announcementList"
+            v-for="(item, index) in announcement"
             :key="index"
             class="announcement-card"
             :title="item.title"
@@ -41,11 +41,11 @@
           </card>
         </template>
         <template v-else>
-          <card v-if="!informationList.length" style="text-align: center">
+          <card v-if="!information.length" style="text-align: center">
             <view>暂无校园资讯</view>
           </card>
           <information-card
-            v-for="item in informationList"
+            v-for="item in information"
             :key="item.id"
             :source="item"
           />
@@ -58,26 +58,21 @@
 <script setup lang="ts">
 import { Card, ThemeConfig, TitleBar } from "@/components";
 import dayjs from "dayjs";
-import { serviceStore } from "@/store";
 import InformationCard from "./InformationCard/index.vue";
 import "./index.scss";
-import { computed, ref } from "vue";
+import { ref } from "vue";
 import Taro from "@tarojs/taro";
+import useNotificationStore from "@/store/service/notification";
+import { storeToRefs } from "pinia";
+
+const { announcement, information } = storeToRefs(useNotificationStore());
 // 根据路由导航
 const instance = Taro.getCurrentInstance();
 const currentTab = ref<"announcement" | "information">(
   // @ts-expect-error 路由 query 的参数类型在外部保证了
   instance.router?.params.tab || "announcement"
 );
 
-const informationList = computed(() => {
-  return [...serviceStore.information.informationList];
-});
-
-const announcementList = computed(() => {
-  return [...serviceStore.announcement.announcements].reverse();
-});
-
 const timeFormat = (time: string) => {
   return dayjs(time).format("YYYY年MM月DD日");
 };

src/store/service/notification.ts

@@ -2,40 +2,53 @@ import { useRequestNext } from "@/hooks";
 import { SystemService } from "@/services";
 import { persistedStorage } from "@/utils";
 import { defineStore } from "pinia";
-import { computed, ref, watch } from "vue";
+import { computed, ref } from "vue";
 
 const useNotificationStore = defineStore("notification", () => {
-  const unreadCountInStore = +persistedStorage.getItem("notification")?.unreadCount || 0;
   /** 公告+资讯的未阅读数量 */
-  const unreadCount = ref(0);
+  const announcementReadIds = ref<number[]>([]);
+  const informationReadIds = ref<number[]>([]);
 
   const { data: collection } = useRequestNext(
     () => Promise.all([
       SystemService.getAnnouncement(),
       SystemService.getInformation()
     ]), {
-      initialData: [[], []],
-      onSuccess: (response) => {
-        unreadCount.value =
-          (response[0].length + response[1].length) - unreadCountInStore;
-      }
+      initialData: [[], []]
     }
   );
+
   const announcement = computed(() => collection.value[0]);
   const information = computed(() => collection.value[1]);
 
-  watch([announcement, information], () => {
-    // TODO: 从持久化数据中读取，并对比
+  const unreadCount = computed(() => {
+    const announcementReadSet = new Set(announcementReadIds.value);
+    const informationReadSet = new Set(informationReadIds.value);
+
+    const announcementDiff = announcement.value.map(({ id }) => id).filter(id => !announcementReadSet.has(id));
+    const informationDiff = information.value.map(({ id }) => id).filter(id => !informationReadSet.has(id));
+
+    return announcementDiff.length + informationDiff.length;
   });
 
+  function markRead() {
+    announcementReadIds.value = announcement.value.map(({ id }) => id);
+    informationReadIds.value = information.value.map(({ id }) => id);
+  }
+
   return {
     announcement, // 精弘公告
     information, // 校园资讯
-    unreadCount
+    collection,
+    announcementReadIds,
+    informationReadIds,
+    unreadCount,
+    markRead
   };
 }, {
   persist: {
-    storage: persistedStorage
+    storage: persistedStorage,
+    pick: ["collection", "announcementReadIds", "informationReadIds"]
   }
 });