u

code/sllog/Sllog-User-Ui/src/layouts/topbar/components/messages.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-badge :count="imMessageStore.allNoReadNumber" :max-count="99" class="badge" @click="handleToMessages">
+    <div class="i-material-symbols:notifications-outline icon"></div>
+  </a-badge>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { useRouter } from "vue-router";
+import { useImMessageStore } from "@/store/imMessageStore";
+import { getAllNoReadNumberApi } from "@/service/message";
+import { WebSocketType } from "@/types/websocket";
+import { useWebSocketStore } from "@/store/webSocketStore";
+
+const router = useRouter();
+const imMessageStore = useImMessageStore();
+const webSocketStore = useWebSocketStore();
+
+const unlisten = ref<() => void>(); // 类型为 undefined | (() => void)
+
+onMounted(() => {
+  getAllNoReadNumberApi({}).then((res) => {
+    imMessageStore.setAllNoReadNumber(res.data.noReadNumber);
+  });
+  unlisten.value = webSocketStore.onMessage((data) => {
+    if (data.type === WebSocketType.AcceptMessageEnums.ONE) {
+      imMessageStore.setAllNoReadNumber(imMessageStore.allNoReadNumber + 1);
+    }
+  });
+});
+
+onUnmounted(() => {
+  unlisten.value?.();
+});
+
+function handleToMessages() {
+  router.push("/messages");
+}
+</script>
+<style lang="scss" scoped>
+.icon {
+  font-size: 22px;
+  cursor: pointer;
+}
+</style>