R94 A2/A3/A4 移动端列表卡片化

client/src/pages/NotificationsPage.tsx

@@ -83,6 +83,7 @@ export function NotificationsPage() {
   });
 
   const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
+  const notificationItems = listQuery.data?.items ?? [];
 
   return (
     <div className="space-y-6">
@@ -172,7 +173,51 @@ export function NotificationsPage() {
         ) : null}
 
         {!listQuery.isLoading && !listQuery.isError ? (
-          <div className="rounded-lg border border-zinc-200">
+          <>
+            <div className="space-y-3 md:hidden">
+              {notificationItems.length ? (
+                notificationItems.map((item) => {
+                  const targetLink = resolveNotificationTargetLink(item);
+                  return (
+                    <div data-testid="notification-mobile-card" key={item.id} className="rounded-lg border border-zinc-200 bg-white p-4">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="min-w-0">
+                          <div className="text-sm font-semibold text-zinc-900">{item.title}</div>
+                          {item.body ? <div className="mt-1 text-xs leading-5 text-zinc-500">{item.body}</div> : null}
+                        </div>
+                        <span className="shrink-0 rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
+                          {item.readAt ? "已读" : "未读"}
+                        </span>
+                      </div>
+                      <div className="mt-3 text-xs text-zinc-500">{item.createdAt.slice(0, 19).replace("T", " ")}</div>
+                      <div className="mt-3 flex flex-wrap gap-2">
+                        {targetLink ? (
+                          <Button asChild size="sm" variant="secondary" data-testid="notification-mobile-target-link">
+                            <Link to={targetLink}>查看</Link>
+                          </Button>
+                        ) : null}
+
+                        {!item.readAt ? (
+                          <Button
+                            data-testid="notification-mobile-mark-read"
+                            size="sm"
+                            type="button"
+                            variant="secondary"
+                            disabled={markReadMutation.isPending}
+                            onClick={() => markReadMutation.mutate(item.id)}
+                          >
+                            标为已读
+                          </Button>
+                        ) : null}
+                      </div>
+                    </div>
+                  );
+                })
+              ) : (
+                <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无通知</div>
+              )}
+            </div>
+            <div className="hidden rounded-lg border border-zinc-200 md:block">
             <Table data-testid="notifications-table">
               <TableHeader>
                 <tr>
@@ -183,8 +228,8 @@ export function NotificationsPage() {
                 </tr>
               </TableHeader>
               <TableBody>
-                {(listQuery.data?.items ?? []).length ? (
-                  listQuery.data?.items.map((item) => {
+                {notificationItems.length ? (
+                  notificationItems.map((item) => {
                     const targetLink = resolveNotificationTargetLink(item);
                     return (
                       <TableRow data-testid="notification-row" key={item.id}>
@@ -234,7 +279,8 @@ export function NotificationsPage() {
                 )}
               </TableBody>
             </Table>
-          </div>
+            </div>
+          </>
         ) : null}
 
         <Pagination