88 lines
2.3 KiB
Vue
88 lines
2.3 KiB
Vue
<script setup lang="ts">
|
|
import IcBaselineNotificationsNone from "~icons/ic/baseline-notifications-none";
|
|
import { mockClient } from "@/api";
|
|
|
|
const props = defineProps<{ id: string }>();
|
|
const router = useRouter();
|
|
|
|
const { data: allNotifications } = await mockClient("notify.list");
|
|
|
|
const notification = computed(() => {
|
|
return allNotifications.value.find(item => String(item.id) === props.id);
|
|
});
|
|
|
|
watch(notification, (val) => {
|
|
if (!val && allNotifications.value.length > 0) {
|
|
router.replace("/layout/notify");
|
|
}
|
|
}, { immediate: true });
|
|
|
|
function handleBack() {
|
|
router.back();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<IonPage>
|
|
<IonHeader class="ion-no-border">
|
|
<ion-toolbar class="ui-toolbar">
|
|
<ui-back-button slot="start" />
|
|
<ion-title>通知详情</ion-title>
|
|
</ion-toolbar>
|
|
</IonHeader>
|
|
<IonContent :fullscreen="true" class="ion-padding">
|
|
<div v-if="notification" class="notification-detail">
|
|
<!-- 图标和标题 -->
|
|
<div class="flex items-start gap-4 mb-2">
|
|
<div class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full shrink-0">
|
|
<IcBaselineNotificationsNone class="text-2xl text-[#71cc51]" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xl font-semibold wrap-break-word">
|
|
{{ notification.title }}
|
|
</div>
|
|
<ion-note class="text-xs">
|
|
{{ useDateFormat(notification.date, 'YYYY-MM-DD HH:mm:ss') }}
|
|
</ion-note>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 分割线 -->
|
|
<ui-divider />
|
|
|
|
<!-- 内容 -->
|
|
<div class="notification-content">
|
|
<p class="text-base leading-relaxed whitespace-pre-wrap wrap-break-word">
|
|
{{ notification.content }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载状态 -->
|
|
<div v-else class="flex items-center justify-center h-full">
|
|
<ion-spinner name="crescent" />
|
|
</div>
|
|
</IonContent>
|
|
</IonPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.notification-detail {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.notification-content {
|
|
color: var(--ion-text-color);
|
|
font-size: 15px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
/* 深色模式适配 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.notification-content {
|
|
color: var(--ion-color-step-600);
|
|
}
|
|
}
|
|
</style>
|