From fbe0fc1738ceabacb1892740d92d4864ea96cf84 Mon Sep 17 00:00:00 2001
From: Li Kui <90845831+likui628@users.noreply.github.com>
Date: Sun, 7 Jul 2024 16:19:17 +0800
Subject: [PATCH] chore: conditionally display notification dot (#31)

---
 apps/web-antd/src/layouts/basic.vue | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/web-antd/src/layouts/basic.vue b/apps/web-antd/src/layouts/basic.vue
index fb873271..684f7b5b 100644
--- a/apps/web-antd/src/layouts/basic.vue
+++ b/apps/web-antd/src/layouts/basic.vue
@@ -15,10 +15,6 @@ import { $t } from '#/locales';
 import { resetRoutes } from '#/router';
 import { useAppStore } from '#/store';
 
-// https://avatar.vercel.sh/vercel.svg?text=Vaa
-// https://avatar.vercel.sh/1
-// https://avatar.vercel.sh/nextjs
-// https://avatar.vercel.sh/satori
 const notifications = ref<NotificationItem[]>([
   {
     avatar: 'https://avatar.vercel.sh/vercel.svg?text=VB',
@@ -50,6 +46,10 @@ const notifications = ref<NotificationItem[]>([
   },
 ]);
 
+const showDot = computed(() =>
+  notifications.value.some((item) => !item.isRead),
+);
+
 const menus = computed(() => [
   {
     handler: () => {
@@ -92,6 +92,10 @@ async function handleLogout() {
 function handleNoticeClear() {
   notifications.value = [];
 }
+
+function handleMakeAll() {
+  notifications.value.forEach((item) => (item.isRead = true));
+}
 </script>
 
 <template>
@@ -108,9 +112,10 @@ function handleNoticeClear() {
     </template>
     <template #notification>
       <Notification
+        :dot="showDot"
         :notifications="notifications"
-        dot
         @clear="handleNoticeClear"
+        @make-all="handleMakeAll"
       />
     </template>
   </BasicLayout>