From cde6cd9bb58761c7ec6cd1f87f870c757c3b507f Mon Sep 17 00:00:00 2001
From: Seven <qiqiwatermelon@gmail.com>
Date: Tue, 30 Dec 2025 20:14:26 +0700
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E9=A1=B5=E9=9D=A2=E5=8F=8A=E9=80=9A=E7=9F=A5?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E7=82=B9=E5=87=BB=E8=B7=B3=E8=BD=AC=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=9B=E4=BC=98=E5=8C=96=E5=88=86=E9=9A=94=E7=BA=BF?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts           |  2 -
 components.d.ts             |  2 +
 src/router/index.ts         |  5 +++
 src/ui/divider/index.vue    |  4 +-
 src/views/notify/detail.vue | 87 +++++++++++++++++++++++++++++++++++++
 src/views/notify/index.vue  | 15 ++++++-
 6 files changed, 109 insertions(+), 6 deletions(-)
 create mode 100644 src/views/notify/detail.vue

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 8322c8d..34d3d5e 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -156,8 +156,6 @@ declare global {
   const useAsyncQueue: typeof import('@vueuse/core').useAsyncQueue
   const useAsyncState: typeof import('@vueuse/core').useAsyncState
   const useAttrs: typeof import('vue').useAttrs
-  const useAuth: typeof import('./src/composables/useAuth').useAuth
-  const useBack: typeof import('./src/composables/useBack').useBack
   const useBase64: typeof import('@vueuse/core').useBase64
   const useBattery: typeof import('@vueuse/core').useBattery
   const useBluetooth: typeof import('@vueuse/core').useBluetooth
diff --git a/components.d.ts b/components.d.ts
index 4c82edf..2286e4e 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -50,6 +50,7 @@ declare module 'vue' {
     IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
     IonSelect: typeof import('@ionic/vue')['IonSelect']
     IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
+    IonSpinner: typeof import('@ionic/vue')['IonSpinner']
     IonTabBar: typeof import('@ionic/vue')['IonTabBar']
     IonTabButton: typeof import('@ionic/vue')['IonTabButton']
     IonTabs: typeof import('@ionic/vue')['IonTabs']
@@ -104,6 +105,7 @@ declare global {
   const IonSearchbar: typeof import('@ionic/vue')['IonSearchbar']
   const IonSelect: typeof import('@ionic/vue')['IonSelect']
   const IonSelectOption: typeof import('@ionic/vue')['IonSelectOption']
+  const IonSpinner: typeof import('@ionic/vue')['IonSpinner']
   const IonTabBar: typeof import('@ionic/vue')['IonTabBar']
   const IonTabButton: typeof import('@ionic/vue')['IonTabButton']
   const IonTabs: typeof import('@ionic/vue')['IonTabs']
diff --git a/src/router/index.ts b/src/router/index.ts
index 06e107c..40ad1c3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -44,6 +44,11 @@ const routes: Array<RouteRecordRaw> = [
       },
     ],
   },
+  {
+    path: "/notify/:id",
+    props: true,
+    component: () => import("@/views/notify/detail.vue"),
+  },
   {
     path: "/onchain-address",
     component: () => import("@/views/onchain-address/index.vue"),
diff --git a/src/ui/divider/index.vue b/src/ui/divider/index.vue
index 47bdd41..c6bf314 100644
--- a/src/ui/divider/index.vue
+++ b/src/ui/divider/index.vue
@@ -4,7 +4,7 @@ defineProps<{ text?: string }>();
 
 <template>
   <div class="divider ion-margin-vertical" v-bind="$attrs">
-    <span>{{ text }}</span>
+    <span v-if="text">{{ text }}</span>
   </div>
 </template>
 
@@ -20,7 +20,7 @@ defineProps<{ text?: string }>();
 .divider::after {
   content: "";
   flex: 1;
-  border-bottom: 1px solid var(--ion-color-medium);
+  border-bottom: 1px solid var(--ion-text-color-step-900);
 }
 
 .divider span {
diff --git a/src/views/notify/detail.vue b/src/views/notify/detail.vue
new file mode 100644
index 0000000..a2d1ed7
--- /dev/null
+++ 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>
diff --git a/src/views/notify/index.vue b/src/views/notify/index.vue
index 305c293..0113fb5 100644
--- a/src/views/notify/index.vue
+++ b/src/views/notify/index.vue
@@ -4,7 +4,12 @@ import IconParkOutlineClearFormat from "~icons/icon-park-outline/clear-format";
 import MaterialSymbolsAndroidContacts from "~icons/material-symbols/android-contacts";
 import { mockClient } from "@/api";
 
+const router = useRouter();
 const { data } = mockClient("notify.list");
+
+function handleItemClick(id: number) {
+  router.push(`/notify/${id}`);
+}
 </script>
 
 <template>
@@ -24,8 +29,14 @@ const { data } = mockClient("notify.list");
       <ion-searchbar placeholder="Search" />
 
       <ion-list lines="none">
-        <ion-item v-for="item in data" :key="item.id" class="py-3">
-          <div slot="start" class="bg-[#f1f1f1] p-2.5 rounded-full">
+        <ion-item
+          v-for="item in data"
+          :key="item.id"
+          class="py-3"
+          button
+          @click="handleItemClick(item.id)"
+        >
+          <div slot="start" class="bg-[#f1f1f1] dark:bg-[#2d2d2d] p-2.5 rounded-full">
             <IcBaselineNotificationsNone class="text-2xl text-[#71cc51]" />
           </div>
           <div class="pl-3 w-full">