Situation-Awareness-Platform-Frontend/src/components/Header/Notice.vue

<template>
  <router-link to="/personalCenter?status=all&message_type=mr">
    <d-badge class="g-notice" :count="counts" :offset="[-2, 4]" :hidden="!counts" status="danger">
      <d-icon style="font-size: 16px" name="notice" />
    </d-badge>
  </router-link>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { getMessageCount } from '@/api/notice';
import { addEventListener, offEvent } from '@/utils/eventBus';
import debounce from 'lodash/debounce';

const counts = ref(9);
const getCounts = () => {
  getMessageCount().then((result) => {
    counts.value = result.data?.reduce((prev: number, curr: Record<string, any>) => {
      return prev + curr.un_read_count;
    }, 0);
  });
};

onMounted(() => {
  getCounts();
  addEventListener('updateNotice', debounce((count: number) => {
    counts.value = count;
  }, 500));
});

onBeforeUnmount(() => {
  offEvent('updateNotice');
});

</script>

<style lang="scss" scoped>
@import 'devui-theme/styles-var/devui-var.scss';
.g-notice {
  cursor: pointer;
  margin: 0 8px;
  padding-top: 6px;
  &-list {
    display: flex;
    flex-direction: column;
    padding: 8px;
    &-item {
      width: 280px;
      padding: 8px 0;
      &-title {
        font-weight: 500;
      }
      &-content {
        font-weight: 400;
      }
    }
  }
}
</style>