refactor(ui): [UI7-1] 为其余配置与边缘页面应用新版空壳布局

client/src/pages/NotificationsPage.tsx

@@ -4,6 +4,8 @@ import { fetchNotifications, markNotificationRead } from "../api/notifications";
 import { isApiError } from "../api/types";
 import { mapApiErrorMessage } from "../api/errorMessages";
 import { PageHeader } from "../components/common/PageHeader";
+import { TableSkeleton } from "../components/common/TableSkeleton";
+import { Pagination } from "../components/common/Pagination";
 import { Button } from "../components/ui/button";
 import { Card } from "../components/ui/card";
 import {
@@ -105,7 +107,7 @@ export function NotificationsPage() {
           </div>
         </div>
 
-        {listQuery.isLoading ? <p className="text-sm text-slate-500">加载中...</p> : null}
+        {listQuery.isLoading ? <TableSkeleton columns={4} rows={5} /> : null}
 
         {listQuery.isError ? (
           <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
@@ -185,38 +187,12 @@ export function NotificationsPage() {
           </div>
         ) : null}
 
-        <div className="flex items-center justify-between text-sm">
-          <span>
-            第 {page} / {totalPages} 页
-          </span>
-          <div className="flex gap-2">
-            <Button
-              data-testid="notifications-prev-page"
-              variant="secondary"
-              disabled={page <= 1}
-              onClick={() =>
-                setSearchParams({ unreadOnly: unreadOnly ? "1" : "0", page: String(Math.max(1, page - 1)) })
-              }
-              type="button"
-            >
-              上一页
-            </Button>
-            <Button
-              data-testid="notifications-next-page"
-              variant="secondary"
-              disabled={page >= totalPages}
-              onClick={() =>
-                setSearchParams({
-                  unreadOnly: unreadOnly ? "1" : "0",
-                  page: String(Math.min(totalPages, page + 1)),
-                })
-              }
-              type="button"
-            >
-              下一页
-            </Button>
-          </div>
-        </div>
+        <Pagination
+          page={page}
+          totalPages={totalPages}
+          onPageChange={(p) => setSearchParams({ unreadOnly: unreadOnly ? "1" : "0", page: String(p) })}
+          testIdPrefix="notifications"
+        />
       </Card>
     </div>
   );