polish(admin): 抽出后台控件包并统一各页布局与交互

Co-authored-by: Cursor <cursoragent@cursor.com>

frontend/components/admin/AdminPager.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+/** 紧凑上一页 / n / N / 下一页（客户端列表） */
+export default function AdminPager({
+  page,
+  total,
+  pageSize,
+  onChange,
+  loading,
+  summary,
+  className = "",
+}: {
+  page: number;
+  total: number;
+  pageSize: number;
+  onChange: (page: number) => void;
+  loading?: boolean;
+  /** 左侧摘要，默认「第 n / N 页」 */
+  summary?: string;
+  className?: string;
+}) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  if (totalPages <= 1 && total === 0) return null;
+  if (totalPages <= 1) return null;
+
+  return (
+    <div
+      className={`flex items-center justify-between gap-2 px-4 sm:px-5 py-3 ${className}`.trim()}
+      style={{ borderTop: "1px solid var(--line)" }}
+    >
+      <span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
+        {summary ?? `第 ${page} / ${totalPages} 页`}
+      </span>
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={() => onChange(page - 1)}
+          disabled={page <= 1 || loading}
+          className="btn btn-line btn-sm"
+          aria-label="上一页"
+        >
+          <ChevronLeft size={14} /> 上一页
+        </button>
+        <button
+          type="button"
+          onClick={() => onChange(page + 1)}
+          disabled={page >= totalPages || loading}
+          className="btn btn-line btn-sm"
+          aria-label="下一页"
+        >
+          下一页 <ChevronRight size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}