xinyin025/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-09-04 01:17:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add unread ui

Browse Source
This commit is contained in:
tim
2025-07-14 14:56:58 +08:00
parent 8d962e83e9
commit 5e9c5d2110
1 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
open-isle-cli/src/views/MessagePageView.vue
+12 -6
View File
@@ -11,7 +11,8 @@
<BasePlaceholder v-else-if="filteredNotifications.length === 0" text="暂时没有消息 :)" icon="fas fa-inbox" /> <BasePlaceholder v-else-if="filteredNotifications.length === 0" text="暂时没有消息 :)" icon="fas fa-inbox" />
<BaseTimeline v-if="filteredNotifications.length > 0" :items="filteredNotifications"> <div class="timeline-container" v-if="filteredNotifications.length > 0" >
<BaseTimeline :items="filteredNotifications">
<template #item="{ item }"> <template #item="{ item }">
<div class="notif-content" :class="{ read: item.read }"> <div class="notif-content" :class="{ read: item.read }">
<span v-if="!item.read" class="unread-dot"></span> <span v-if="!item.read" class="unread-dot"></span>
@@ -193,8 +194,9 @@
</span> </span>
<span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span> <span class="notif-time">{{ TimeManager.format(item.createdAt) }}</span>
</div> </div>
</template> </template>
</BaseTimeline> </BaseTimeline>
</div>
</div> </div>
</template> </template>
@@ -220,7 +222,7 @@ export default {
const router = useRouter() const router = useRouter()
const notifications = ref([]) const notifications = ref([])
const isLoadingMessage = ref(false) const isLoadingMessage = ref(false)
const selectedTab = ref('all') const selectedTab = ref('unread')
const filteredNotifications = computed(() => const filteredNotifications = computed(() =>
selectedTab.value === 'all' selectedTab.value === 'all'
? notifications.value ? notifications.value
@@ -446,11 +448,15 @@ export default {
.message-page { .message-page {
background-color: var(--background-color); background-color: var(--background-color);
padding: 20px; height: calc(100vh - var(--header-height));
height: calc(100vh - var(--header-height) - 40px);
overflow-y: auto; overflow-y: auto;
} }
.timeline-container {
padding: 10px 20px;
height: 100%;
}
.notif-content { .notif-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;