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 { useUserStore } from '@/pinia'
import { BellOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons-vue' import { BellOutlined, CheckCircleOutlined, CloseCircleOutlined, DeleteOutlined, InfoCircleOutlined, WarningOutlined } from '@ant-design/icons-vue'
import { message, notification } from 'ant-design-vue' import { message, notification } from 'ant-design-vue'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import { SSE } from 'sse.js' import { SSE } from 'sse.js'
defineProps<{ defineProps<{
headerRef: HTMLElement headerRef: HTMLElement
}>() }>()
dayjs.extend(relativeTime)
const loading = ref(false) const loading = ref(false)
const { token, unreadCount } = storeToRefs(useUserStore()) const { token, unreadCount } = storeToRefs(useUserStore())
@ -145,19 +149,7 @@ function viewAll() {
> >
<template #renderItem="{ item }"> <template #renderItem="{ item }">
<AListItem> <AListItem>
<template #actions> <AListItemMeta>
<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)"
>
<template #avatar> <template #avatar>
<div> <div>
<CloseCircleOutlined <CloseCircleOutlined
@ -178,6 +170,28 @@ function viewAll() {
/> />
</div> </div>
</template> </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> </AListItemMeta>
</AListItem> </AListItem>
</template> </template>