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

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

frontend/app/admin/users/[id]/UserAuditClient.tsx

@@ -4,8 +4,6 @@ import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
 import {
   ArrowLeft,
-  ChevronLeft,
-  ChevronRight,
   ExternalLink,
   FileText,
   Loader2,
@@ -24,18 +22,20 @@ import {
 import { formatDate, formatRelative } from "@/lib/format";
 import Avatar from "@/components/Avatar";
 import RoleBadge from "@/components/RoleBadge";
+import {
+  AdminEmpty,
+  AdminPager,
+  AdminSegmented,
+  AdminStatusChip,
+  type AdminStatusTone,
+} from "@/components/admin";
 
 type TabKey = "posts" | "comments" | "messages";
 
-const TABS: { key: TabKey; label: string; icon: React.ReactNode }[] = [
-  { key: "posts", label: "帖子", icon: <FileText size={14} /> },
-  { key: "comments", label: "评论", icon: <MessageCircle size={14} /> },
-  { key: "messages", label: "私信与群消息", icon: <MessagesSquare size={14} /> },
-];
-
 const PAGE_SIZE = 20;
 
-function StatusChip({
+/** 内容/消息状态粒：可叠加（如已删除 + 待审） */
+function StatusChips({
   status,
   deleted,
   recalled,
@@ -44,72 +44,28 @@ function StatusChip({
   deleted?: boolean;
   recalled?: boolean;
 }) {
-  const chips: { label: string; color: string; soft: string }[] = [];
-  if (deleted) chips.push({ label: "已删除", color: "var(--danger)", soft: "var(--danger-soft)" });
-  if (recalled) chips.push({ label: "已撤回", color: "var(--ink-3)", soft: "var(--tint)" });
-  if (status === "pending") chips.push({ label: "待审", color: "var(--gold)", soft: "var(--gold-soft)" });
-  if (status === "rejected") chips.push({ label: "已驳回", color: "var(--danger)", soft: "var(--danger-soft)" });
+  const chips: { label: string; tone: AdminStatusTone }[] = [];
+  if (deleted) chips.push({ label: "已删除", tone: "danger" });
+  if (recalled) chips.push({ label: "已撤回", tone: "muted" });
+  if (status === "pending") chips.push({ label: "待审", tone: "warn" });
+  if (status === "rejected") chips.push({ label: "已驳回", tone: "danger" });
   if (status === "published" && !deleted) {
-    chips.push({ label: "已发布", color: "var(--ok)", soft: "var(--ok-soft)" });
+    chips.push({ label: "已发布", tone: "ok" });
   }
   if (chips.length === 0 && !recalled) {
-    chips.push({ label: "正常", color: "var(--ink-3)", soft: "var(--tint)" });
+    chips.push({ label: "正常", tone: "muted" });
   }
   return (
     <span className="inline-flex flex-wrap gap-1">
       {chips.map((c) => (
-        <span
-          key={c.label}
-          className="inline-flex items-center rounded-full px-2 py-0.5 text-[11px]"
-          style={{ background: c.soft, color: c.color }}
-        >
+        <AdminStatusChip key={c.label} tone={c.tone}>
           {c.label}
-        </span>
+        </AdminStatusChip>
       ))}
     </span>
   );
 }
 
-function Pager({
-  page,
-  total,
-  onChange,
-  loading,
-}: {
-  page: number;
-  total: number;
-  onChange: (p: number) => void;
-  loading?: boolean;
-}) {
-  const pages = Math.max(1, Math.ceil(total / PAGE_SIZE));
-  if (pages <= 1) return null;
-  return (
-    <div className="flex items-center justify-center gap-2 py-3">
-      <button
-        type="button"
-        disabled={page <= 1 || loading}
-        onClick={() => onChange(page - 1)}
-        className="btn btn-line btn-sm"
-        aria-label="上一页"
-      >
-        <ChevronLeft size={14} />
-      </button>
-      <span className="text-[12.5px] tabular-nums meta">
-        {page} / {pages}
-      </span>
-      <button
-        type="button"
-        disabled={page >= pages || loading}
-        onClick={() => onChange(page + 1)}
-        className="btn btn-line btn-sm"
-        aria-label="下一页"
-      >
-        <ChevronRight size={14} />
-      </button>
-    </div>
-  );
-}
-
 export default function UserAuditClient({
   userId,
   initial,
@@ -171,6 +127,15 @@ export default function UserAuditClient({
     return profile.messages_total;
   };
 
+  const emptyIcon =
+    tab === "posts" ? (
+      <FileText size={22} />
+    ) : tab === "comments" ? (
+      <MessageCircle size={22} />
+    ) : (
+      <MessagesSquare size={22} />
+    );
+
   return (
     <div>
       <Link
@@ -194,14 +159,7 @@ export default function UserAuditClient({
                 {u.nickname}
               </h1>
               <RoleBadge role={u.role} />
-              {u.banned && (
-                <span
-                  className="text-[11px] px-2 py-0.5 rounded-full"
-                  style={{ background: "var(--danger-soft)", color: "var(--danger)" }}
-                >
-                  已封禁
-                </span>
-              )}
+              {u.banned && <AdminStatusChip tone="danger">已封禁</AdminStatusChip>}
             </div>
             <p className="meta text-[12.5px] mt-0.5 truncate">@{u.username}</p>
             <p className="meta text-[12px] mt-2">
@@ -240,34 +198,35 @@ export default function UserAuditClient({
         </div>
       </div>
 
-      <div
-        className="flex gap-1 mb-3 overflow-x-auto"
-        style={{ borderBottom: "1px solid var(--line)" }}
-      >
-        {TABS.map((t) => {
-          const active = tab === t.key;
-          return (
-            <button
-              key={t.key}
-              type="button"
-              onClick={() => switchTab(t.key)}
-              className="inline-flex items-center gap-1.5 px-3 py-2.5 text-[13px] whitespace-nowrap -mb-px"
-              style={{
-                color: active ? "var(--accent)" : "var(--ink-3)",
-                borderBottom: active ? "2px solid var(--accent)" : "2px solid transparent",
-              }}
-            >
-              {t.icon}
-              {t.label}
-              <span className="tabular-nums opacity-70">
-                {tabCount(t.key).toLocaleString("zh-CN")}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-
       <div className="panel overflow-hidden">
+        <div className="admin-toolbar">
+          <AdminSegmented<TabKey>
+            ariaLabel="内容分类"
+            value={tab}
+            onChange={switchTab}
+            options={[
+              {
+                key: "posts",
+                label: "帖子",
+                icon: <FileText size={14} />,
+                count: tabCount("posts"),
+              },
+              {
+                key: "comments",
+                label: "评论",
+                icon: <MessageCircle size={14} />,
+                count: tabCount("comments"),
+              },
+              {
+                key: "messages",
+                label: "私信与群消息",
+                icon: <MessagesSquare size={14} />,
+                count: tabCount("messages"),
+              },
+            ]}
+          />
+        </div>
+
         {error && (
           <p className="text-center py-10 text-[13px]" style={{ color: "var(--danger)" }}>
             {error}
@@ -279,7 +238,7 @@ export default function UserAuditClient({
           </div>
         )}
         {!error && !loading && total === 0 && (
-          <p className="meta text-center py-14 text-[13px]">该分类暂无内容</p>
+          <AdminEmpty icon={emptyIcon} title="该分类暂无内容" />
         )}
 
         {tab === "posts" &&
@@ -292,7 +251,7 @@ export default function UserAuditClient({
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 flex-wrap mb-1">
-                    <StatusChip status={p.status} deleted={p.deleted} />
+                    <StatusChips status={p.status} deleted={p.deleted} />
                     {p.board_name && (
                       <span className="text-[11.5px] meta truncate">{p.board_name}</span>
                     )}
@@ -333,7 +292,7 @@ export default function UserAuditClient({
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 flex-wrap mb-1">
-                    <StatusChip status={c.status} deleted={c.deleted} />
+                    <StatusChips status={c.status} deleted={c.deleted} />
                     {c.deleted ? (
                       <span className="text-[11.5px] meta">帖子 #{c.post_id}</span>
                     ) : (
@@ -370,7 +329,7 @@ export default function UserAuditClient({
               <div className="flex items-start justify-between gap-3">
                 <div className="min-w-0 flex-1">
                   <div className="flex items-center gap-2 flex-wrap mb-1">
-                    <StatusChip deleted={m.deleted} recalled={m.recalled} />
+                    <StatusChips deleted={m.deleted} recalled={m.recalled} />
                     <span className="text-[11.5px] meta truncate">
                       {m.room_name}
                       {m.room_type === "direct" ? " · 私聊" : m.room_type === "group" ? " · 群聊" : ""}
@@ -393,7 +352,13 @@ export default function UserAuditClient({
             </div>
           ))}
 
-        <Pager page={page} total={total} onChange={setPage} loading={loading} />
+        <AdminPager
+          page={page}
+          total={total}
+          pageSize={PAGE_SIZE}
+          loading={loading}
+          onChange={setPage}
+        />
       </div>
     </div>
   );