第 5 阶段：纠纷、通知与后台-1

frontend/src/views/account/NotificationsView.vue

@@ -1,3 +1,30 @@
+<script setup lang="ts">
+import { ElMessage } from 'element-plus'
+import { onMounted, ref } from 'vue'
+
+import { fetchNotifications, markNotificationRead, type NotificationItem } from '@/api/notifications'
+
+const loading = ref(false)
+const notifications = ref<NotificationItem[]>([])
+
+onMounted(loadNotifications)
+
+async function loadNotifications() {
+  loading.value = true
+  try {
+    notifications.value = await fetchNotifications()
+  } finally {
+    loading.value = false
+  }
+}
+
+async function markRead(id: number) {
+  await markNotificationRead(id)
+  ElMessage.success('已标记为已读')
+  await loadNotifications()
+}
+</script>
+
 <template>
   <section class="page">
     <div class="page-header">
@@ -5,5 +32,23 @@
       <h1>站内信</h1>
       <p>接收审核、交接、归还、申诉和仲裁结果通知。</p>
     </div>
+
+    <el-empty v-if="!loading && notifications.length === 0" description="暂无站内信" />
+    <div v-else v-loading="loading" class="notification-list">
+      <div v-for="item in notifications" :key="item.id" class="notification-item" :class="{ unread: !item.read_at }">
+        <div>
+          <span>{{ item.type }}</span>
+          <h2>{{ item.title }}</h2>
+          <p>{{ item.content }}</p>
+          <small>{{ item.created_at }}</small>
+        </div>
+        <div class="notification-actions">
+          <RouterLink v-if="item.biz_type === 'order' && item.biz_id" :to="`/orders/${item.biz_id}`">
+            <el-button size="small">查看订单</el-button>
+          </RouterLink>
+          <el-button v-if="!item.read_at" size="small" type="primary" @click="markRead(item.id)">已读</el-button>
+        </div>
+      </div>
+    </div>
   </section>
 </template>