Initial commit

frontend/src/pages/Notifications.tsx

@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../lib/api';
+import { NotificationDto } from '../types';
+
+export default function Notifications() {
+  const [list, setList] = useState<NotificationDto[]>([]);
+
+  const load = () => api.get<NotificationDto[]>('/notifications').then(setList);
+
+  useEffect(() => {
+    load();
+  }, []);
+
+  const markRead = async (id: number) => {
+    await api.post(`/notifications/${id}/read`);
+    load();
+  };
+
+  return (
+    <div className="page animate-in">
+      <div className="page-header">
+        <h1>通知</h1>
+        <p>系统与业务提醒</p>
+      </div>
+
+      <div className="grid cols-2">
+        {list.map((n) => (
+          <div key={n.id} className={`card ${n.readAt ? 'read' : ''}`}>
+            <div className="card-title">{n.title}</div>
+            <div className="muted">{n.type}</div>
+            <div className="card-content">{n.content}</div>
+            <div className="card-footer">
+              <span className="muted">{new Date(n.createdAt).toLocaleString()}</span>
+              {!n.readAt && (
+                <button className="btn btn-outline" onClick={() => markRead(n.id)}>
+                  标记已读
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}