chore: conditionally display notification dot (#31)

This commit is contained in:
Li Kui 2024-07-07 16:19:17 +08:00 committed by GitHub
parent 0eda99ec3b
commit fbe0fc1738
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 10 additions and 5 deletions

View File

@ -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>