GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-06 08:06:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

优化用户通知组件，增加通知列表容器样式以支持滚动，提升用户体验

Browse Source
This commit is contained in:
jxxghp
2025-05-02 13:28:59 +08:00
parent 95edaa99b6
commit 9fe434849c
1 changed files with 38 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/components/UserNotification.vue
+38 -24
View File
@@ -86,32 +86,46 @@ onBeforeUnmount(() => {
</template> </template>
</VCardItem> </VCardItem>
<VDivider /> <VDivider />
<div v-if="notificationList.length > 0"> <div class="notification-list-container">
<VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1"> <div v-if="notificationList.length > 0" class="notification-list">
<template #prepend> <VListItem v-for="(item, i) in notificationList" :key="i" lines="two" class="mb-1">
<VAvatar rounded> <template #prepend>
<VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon> <VAvatar rounded>
<VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot" size="large"></VIcon> <VIcon v-if="item.type === 'user'" icon="mdi-account-alert" size="large"></VIcon>
<VIcon v-else icon="mdi-laptop" size="large"></VIcon> <VIcon v-else-if="item.type === 'plugin'" icon="mdi-robot" size="large"></VIcon>
</VAvatar> <VIcon v-else icon="mdi-laptop" size="large"></VIcon>
</template> </VAvatar>
<div> </template>
<div class="text-body-1 text-high-emphasis break-words whitespace-break-spaces"> <div>
{{ item.title }} <div class="text-body-1 text-high-emphasis break-words whitespace-break-spaces">
{{ item.title }}
</div>
<div class="text-caption mt-1.5">
{{ item.text }}
</div>
<div class="text-sm text-primary mt-1.5">
{{ formatDateDifference(item.date) }}
</div>
</div> </div>
<div class="text-caption mt-1.5"> </VListItem>
{{ item.text }} </div>
</div> <div v-else class="py-8 text-center">
<div class="text-sm text-primary mt-1.5"> <VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" />
{{ formatDateDifference(item.date) }} <div>{{ t('notification.empty') }}</div>
</div> </div>
</div>
</VListItem>
</div>
<div v-else class="py-8 text-center">
<VIcon icon="mdi-bell-sleep-outline" size="40" class="mb-3" />
<div>{{ t('notification.empty') }}</div>
</div> </div>
</VCard> </VCard>
</VMenu> </VMenu>
</template> </template>
<style scoped>
.notification-list-container {
max-height: 50vh;
overflow: hidden;
}
.notification-list {
max-height: 100%;
overflow-y: auto;
}
</style>