搜索结果列表页面开发

src/components/Header/Notice.vue

@@ -0,0 +1,58 @@
+<template>
+  <router-link to="/notice?status=all&message_type=mr">
+    <d-badge class="g-notice" :count="counts" :offset="[-2, 4]" :hidden="!counts" status="danger">
+      <GIcon name="gt-line-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(0);
+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;
+  &-list {
+    display: flex;
+    flex-direction: column;
+    padding: 8px;
+    &-item {
+      width: 280px;
+      padding: 8px 0;
+      &-title {
+        font-weight: 500;
+      }
+      &-content {
+        font-weight: 400;
+      }
+    }
+  }
+}
+</style>