feat: 添加通知功能，整合通知数据获取和处理，优化通知列表显示

src/views/notify/detail.vue

@@ -1,24 +1,13 @@
 <script setup lang="ts">
-import IcBaselineNotificationsNone from "~icons/ic/baseline-notifications-none";
-import { mockClient } from "@/api";
+import { client, safeClient } from "@/api";
+import { NotificationTypeIcon } from "./enum";
 
 const props = defineProps<{ id: string }>();
-const router = useRouter();
 
-const { data: allNotifications } = await mockClient("notify.list");
+const { data } = await safeClient(client.api.notifications({ id: props.id }).get());
 
-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();
+function getConfigByType(type: string) {
+  return NotificationTypeIcon[type];
 }
 </script>
 
@@ -31,34 +20,32 @@ function handleBack() {
       </ion-toolbar>
     </IonHeader>
     <IonContent :fullscreen="true" class="ion-padding">
-      <div v-if="notification" class="notification-detail">
+      <div v-if="data" class="notification-detail">
         <!-- 图标和标题 -->
-        <div class="flex items-start gap-4 mb-2">
+        <div class="flex items-start gap-4">
           <div class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full shrink-0">
-            <IcBaselineNotificationsNone class="text-2xl text-[#71cc51]" />
+            <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">
-              {{ notification.title }}
+              {{ data.title }}
             </div>
             <ion-note class="text-xs">
-              {{ useDateFormat(notification.date, 'YYYY-MM-DD HH:mm:ss') }}
+              {{ 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">
-            {{ notification.content }}
+            {{ data.content }}
           </p>
         </div>
       </div>
 
-      <!-- 加载状态 -->
       <div v-else class="flex items-center justify-center h-full">
         <ion-spinner name="crescent" />
       </div>