feat: 添加通知详情页面及通知列表点击跳转功能；优化分隔线样式

2025-12-30 20:14:26 +07:00
parent 72e7c77003
commit cde6cd9bb5
6 changed files with 109 additions and 6 deletions
--- a/src/views/notify/detail.vue
+++ b/src/views/notify/detail.vue
@@ -0,0 +1,87 @@
+<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>