<script lang="ts" setup>
|
import type { NotificationItem } from './types';
|
|
import { Bell, MailCheck } from '@vben/icons';
|
import { $t } from '@vben/locales';
|
|
import {
|
VbenButton,
|
VbenIconButton,
|
VbenPopover,
|
VbenScrollbar,
|
} from '@vben-core/shadcn-ui';
|
|
import { useToggle } from '@vueuse/core';
|
|
interface Props {
|
/**
|
* 显示圆点
|
*/
|
dot?: boolean;
|
/**
|
* 消息列表
|
*/
|
notifications?: NotificationItem[];
|
}
|
|
defineOptions({ name: 'NotificationPopup' });
|
|
withDefaults(defineProps<Props>(), {
|
dot: false,
|
notifications: () => [],
|
});
|
|
const emit = defineEmits<{
|
clear: [];
|
makeAll: [];
|
read: [NotificationItem];
|
viewAll: [];
|
}>();
|
|
const [open, toggle] = useToggle();
|
|
function close() {
|
open.value = false;
|
}
|
|
function handleViewAll() {
|
emit('viewAll');
|
close();
|
}
|
|
function handleMakeAll() {
|
emit('makeAll');
|
}
|
|
function handleClear() {
|
emit('clear');
|
}
|
|
function handleClick(item: NotificationItem) {
|
emit('read', item);
|
}
|
</script>
|
<template>
|
<VbenPopover
|
v-model:open="open"
|
content-class="relative right-2 w-[360px] p-0"
|
>
|
<template #trigger>
|
<div class="flex-center mr-2 h-full" @click.stop="toggle()">
|
<VbenIconButton class="bell-button text-foreground relative">
|
<span
|
v-if="dot"
|
class="bg-primary absolute right-0.5 top-0.5 h-2 w-2 rounded"
|
></span>
|
<Bell class="size-4" />
|
</VbenIconButton>
|
</div>
|
</template>
|
|
<div class="relative">
|
<div class="flex items-center justify-between p-4 py-3">
|
<div class="text-foreground">{{ $t('ui.widgets.notifications') }}</div>
|
<VbenIconButton
|
:disabled="notifications.length <= 0"
|
:tooltip="$t('ui.widgets.markAllAsRead')"
|
@click="handleMakeAll"
|
>
|
<MailCheck class="size-4" />
|
</VbenIconButton>
|
</div>
|
<VbenScrollbar v-if="notifications.length > 0">
|
<ul class="!flex max-h-[360px] w-full flex-col">
|
<template v-for="item in notifications" :key="item.title">
|
<li
|
class="hover:bg-accent border-border relative flex w-full cursor-pointer items-start gap-5 border-t px-3 py-3"
|
@click="handleClick(item)"
|
>
|
<span
|
v-if="!item.isRead"
|
class="bg-primary absolute right-2 top-2 h-2 w-2 rounded"
|
></span>
|
|
<span
|
class="relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full"
|
>
|
<img
|
:src="item.avatar"
|
class="aspect-square h-full w-full object-cover"
|
role="img"
|
/>
|
</span>
|
<div class="flex flex-col gap-1 leading-none">
|
<p class="font-semibold">{{ item.title }}</p>
|
<p class="text-muted-foreground my-1 line-clamp-2 text-xs">
|
{{ item.message }}
|
</p>
|
<p class="text-muted-foreground line-clamp-2 text-xs">
|
{{ item.date }}
|
</p>
|
</div>
|
</li>
|
</template>
|
</ul>
|
</VbenScrollbar>
|
|
<template v-else>
|
<div class="flex-center text-muted-foreground min-h-[150px] w-full">
|
{{ $t('common.noData') }}
|
</div>
|
</template>
|
|
<div
|
class="border-border flex items-center justify-between border-t px-4 py-3"
|
>
|
<VbenButton
|
:disabled="notifications.length <= 0"
|
size="sm"
|
variant="ghost"
|
@click="handleClear"
|
>
|
{{ $t('ui.widgets.clearNotifications') }}
|
</VbenButton>
|
<VbenButton size="sm" @click="handleViewAll">
|
{{ $t('ui.widgets.viewAll') }}
|
</VbenButton>
|
</div>
|
</div>
|
</VbenPopover>
|
</template>
|
|
<style scoped>
|
:deep(.bell-button) {
|
&:hover {
|
svg {
|
animation: bell-ring 1s both;
|
}
|
}
|
}
|
|
@keyframes bell-ring {
|
0%,
|
100% {
|
transform-origin: top;
|
}
|
|
15% {
|
transform: rotateZ(10deg);
|
}
|
|
30% {
|
transform: rotateZ(-10deg);
|
}
|
|
45% {
|
transform: rotateZ(5deg);
|
}
|
|
60% {
|
transform: rotateZ(-5deg);
|
}
|
|
75% {
|
transform: rotateZ(2deg);
|
}
|
}
|
</style>
|
