mirrors/nginx-ui
1
0
Fork 0
mirror of https://github.com/0xJacky/nginx-ui.git synced 2025-05-11 02:15:48 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat(notification): Add relative time display and improve layout

Browse source
This commit is contained in:
Jacky 2025-02-19 02:34:43 +00:00
parent da1ed85cef
commit 59ec9136fa
No known key found for this signature in database
GPG key ID: 215C21B10DF38B4D
1 changed files with 27 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

40
app/src/components/Notification/Notification.vue
View file

@ -9,12 +9,16 @@ import { NotificationTypeT } from '@/constants'
import { useUserStore } from '@/pinia'
import { BellOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons-vue'
import { message, notification } from 'ant-design-vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { SSE } from 'sse.js'
defineProps<{
headerRef: HTMLElement
}>()
dayjs.extend(relativeTime)
const loading = ref(false)
const { token, unreadCount } = storeToRefs(useUserStore())
@ -145,19 +149,7 @@ function viewAll() {
>
<template #renderItem="{ item }">
<AListItem>
<template #actions>
<span
key="list-loadmore-remove"
class="cursor-pointer"
@click="remove(item.id)"
>
<DeleteOutlined />
</span>
</template>
<AListItemMeta
:title="$gettext(item.title)"
:description="detailRender({ text: item.details, record: item } as CustomRender)"
>
<AListItemMeta>
<template #avatar>
<div>
<CloseCircleOutlined
@ -178,6 +170,28 @@ function viewAll() {
/>
</div>
</template>
<template #title>
<div class="flex justify-between items-center">
{{ $gettext(item.title) }}
<span class="text-xs text-trueGray-400 font-normal">
{{ dayjs(item.created_at).fromNow() }}
</span>
</div>
</template>
<template #description>
<div class="flex justify-between items-center">
<div>
{{ detailRender({ text: item.details, record: item } as CustomRender) }}
</div>
<span
key="list-loadmore-remove"
class="cursor-pointer"
@click="remove(item.id)"
>
<DeleteOutlined />
</span>
</div>
</template>
</AListItemMeta>
</AListItem>
</template>