75 lines
2.0 KiB
Vue
75 lines
2.0 KiB
Vue
<script setup lang="ts">
|
|
import { client, safeClient } from "@/api";
|
|
import { NotificationTypeIcon } from "./enum";
|
|
|
|
const props = defineProps<{ id: string }>();
|
|
|
|
const { data } = await safeClient(client.api.notifications({ id: props.id }).get());
|
|
|
|
function getConfigByType(type: string) {
|
|
return NotificationTypeIcon[type];
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<IonPage>
|
|
<IonHeader class="ion-no-border">
|
|
<ion-toolbar class="ion-toolbar">
|
|
<ui-back-button slot="start" />
|
|
<ion-title>通知详情</ion-title>
|
|
</ion-toolbar>
|
|
</IonHeader>
|
|
<IonContent :fullscreen="true" class="ion-padding">
|
|
<div v-if="data" class="notification-detail">
|
|
<!-- 图标和标题 -->
|
|
<div class="flex items-start gap-4">
|
|
<div class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full shrink-0">
|
|
<Icon :icon="getConfigByType(data.type).icon" class="text-2xl" :style="{ color: getConfigByType(data.type).color }" />
|
|
</div>
|
|
<div class="flex-1 min-w-0">
|
|
<div class="text-xl font-semibold wrap-break-word">
|
|
{{ data.title }}
|
|
</div>
|
|
<ion-note class="text-xs">
|
|
{{ useDateFormat(data.createdAt, '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">
|
|
{{ data.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>
|