fix(admin): 后台列表切换保留当前内容，去掉加载占位

用户档案、用户列表、内容筛选与公告页等数据到达后再换视图，避免滚动条闪动。

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

frontend/app/admin/announcements/AnnouncementAdmin.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useState } from "react";
 import {
   Plus,
   Pencil,
@@ -51,32 +51,30 @@ const EMPTY_FORM: FormState = {
   published: true,
 };
 
-export default function AnnouncementAdmin() {
+export default function AnnouncementAdmin({
-  const [list, setList] = useState<Announcement[]>([]);
+  initial,
-  const [loading, setLoading] = useState(true);
+  initError,
-  const [loadError, setLoadError] = useState("");
+}: {
+  initial: Announcement[];
+  initError: string;
+}) {
+  const [list, setList] = useState(initial);
+  const [loadError, setLoadError] = useState(initError);
   const [form, setForm] = useState<FormState | null>(null);
   const [saving, setSaving] = useState(false);
   const [deletingId, setDeletingId] = useState<number | null>(null);
   const [deleteTarget, setDeleteTarget] = useState<Announcement | null>(null);
 
   const load = useCallback(async () => {
-    setLoading(true);
     try {
       const res = await apiAdminListAnnouncements();
       setList(res.announcements);
       setLoadError("");
     } catch (e) {
       setLoadError(e instanceof Error ? e.message : "加载公告失败");
-    } finally {
-      setLoading(false);
     }
   }, []);
 
-  useEffect(() => {
-    load();
-  }, [load]);
-
   const startCreate = () => setForm({ ...EMPTY_FORM });
   const startEdit = (a: Announcement) =>
     setForm({
@@ -263,11 +261,7 @@ export default function AnnouncementAdmin() {
             <span className="meta text-[12px] tabular-nums">共 {list.length} 条</span>
           </div>
 
-          {loading ? (
+          {loadError ? (
-            <div className="flex items-center justify-center gap-2 py-16 meta text-[13px]">
-              <Loader2 size={16} className="animate-spin" /> 加载中…
-            </div>
-          ) : loadError ? (
             <p className="alert-error m-4">{loadError}</p>
           ) : list.length === 0 ? (
             <AdminEmpty

frontend/app/admin/announcements/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import AnnouncementAdmin from "./AnnouncementAdmin";
 import { authCookieHeader } from "@/lib/cookies";
+import { fetchAdminAnnouncements, type Announcement } from "@/lib/api";
 import { getMeCached } from "@/lib/serverData";
 import { isAdminOrAbove } from "@/lib/roles";
 import Forbidden from "../Forbidden";
@@ -17,5 +18,15 @@ export default async function AdminAnnouncementsPage() {
   if (!me.user || !isAdminOrAbove(me.user.role)) {
     return <Forbidden text="公告管理仅管理员及以上角色可操作。" />;
   }
-  return <AnnouncementAdmin />;
+
+  let initial: Announcement[] = [];
+  let initError = "";
+  try {
+    const res = await fetchAdminAnnouncements(cookie || undefined);
+    initial = res.announcements ?? [];
+  } catch (e) {
+    initError = e instanceof Error ? e.message : "加载公告失败";
+  }
+
+  return <AnnouncementAdmin initial={initial} initError={initError} />;
 }

frontend/app/admin/content/ContentAdmin.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import Link from "next/link";
 import {
   Check,
@@ -153,6 +153,7 @@ export default function ContentAdmin({
   const [appliedQ, setAppliedQ] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(initError);
+  const loadSeq = useRef(0);
   const [actingKey, setActingKey] = useState<string | null>(null);
 
   const [trustOn, setTrustOn] = useState(initialSettings.trust_reviewed_publish);
@@ -178,34 +179,44 @@ export default function ContentAdmin({
   }, []);
 
   const loadPosts = useCallback(async (page: number, st: AdminContentStatus, q: string) => {
+    const seq = ++loadSeq.current;
     setLoading(true);
     try {
       const res = await apiAdminContentPosts(page, st, q);
+      if (seq !== loadSeq.current) return;
       setPosts(res.posts);
       setPostsTotal(res.total);
       setPostsPage(page);
       setKind("posts");
+      setStatus(st);
+      setAppliedQ(q);
       setError("");
     } catch (e) {
+      if (seq !== loadSeq.current) return;
       setError(e instanceof Error ? e.message : "获取帖子失败");
     } finally {
-      setLoading(false);
+      if (seq === loadSeq.current) setLoading(false);
     }
   }, []);
 
   const loadComments = useCallback(async (page: number, st: AdminContentStatus, q: string) => {
+    const seq = ++loadSeq.current;
     setLoading(true);
     try {
       const res = await apiAdminContentComments(page, st, q);
+      if (seq !== loadSeq.current) return;
       setComments(res.comments);
       setCommentsTotal(res.total);
       setCommentsPage(page);
       setKind("comments");
+      setStatus(st);
+      setAppliedQ(q);
       setError("");
     } catch (e) {
+      if (seq !== loadSeq.current) return;
       setError(e instanceof Error ? e.message : "获取评论失败");
     } finally {
-      setLoading(false);
+      if (seq === loadSeq.current) setLoading(false);
     }
   }, []);
 
@@ -239,7 +250,6 @@ export default function ContentAdmin({
 
   const switchStatus = (st: AdminContentStatus) => {
     if (st === status) return;
-    setStatus(st);
     setError("");
     if (kind === "posts") void loadPosts(1, st, appliedQ);
     else void loadComments(1, st, appliedQ);
@@ -247,13 +257,12 @@ export default function ContentAdmin({
 
   const applySearch = () => {
     const q = keyword.trim();
-    setAppliedQ(q);
     if (kind === "posts") void loadPosts(1, status, q);
     else void loadComments(1, status, q);
   };
 
   const clearSearch = () => {
-    setAppliedQ("");
+    setKeyword("");
     if (kind === "posts") void loadPosts(1, status, "");
     else void loadComments(1, status, "");
   };

frontend/app/admin/users/UsersAdmin.tsx

@@ -10,7 +10,6 @@ import {
   ExternalLink,
   FolderSearch,
   History,
-  Loader2,
   Monitor,
   ShieldAlert,
   ShieldCheck,
@@ -151,6 +150,9 @@ export default function UsersAdmin({
       setUsers(res.users);
       setSummary(res.summary);
       setTotal(res.total);
+      setFilter(opts.filter);
+      setPage(opts.page);
+      setAppliedQ(opts.q);
       setError("");
     } catch (e) {
       if (seq !== seqRef.current) return;
@@ -166,8 +168,6 @@ export default function UsersAdmin({
     debounceRef.current = setTimeout(() => {
       const q = keyword.trim();
       if (q !== appliedQ) {
-        setAppliedQ(q);
-        setPage(1);
         load({ page: 1, filter, q });
       }
     }, 400);
@@ -195,8 +195,6 @@ export default function UsersAdmin({
   const submitSearch = () => {
     const q = keyword.trim();
     if (q === appliedQ) return;
-    setAppliedQ(q);
-    setPage(1);
     load({ page: 1, filter, q });
   };
 
@@ -204,16 +202,12 @@ export default function UsersAdmin({
   const clearSearch = () => {
     setKeyword("");
     if (appliedQ !== "" || page !== 1) {
-      setAppliedQ("");
-      setPage(1);
       load({ page: 1, filter, q: "" });
     }
   };
 
   const changeFilter = (f: UserFilter) => {
     if (f === filter) return;
-    setFilter(f);
-    setPage(1);
     load({ page: 1, filter: f, q: appliedQ });
   };
 
@@ -221,7 +215,6 @@ export default function UsersAdmin({
     const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
     const next = Math.min(Math.max(1, p), totalPages);
     if (next === page) return;
-    setPage(next);
     load({ page: next, filter, q: appliedQ });
   };
 
@@ -467,13 +460,9 @@ export default function UsersAdmin({
           </div>
         )}
 
-        <div aria-busy={loading} style={{ opacity: loading ? 0.55 : 1, transition: "opacity .15s" }}>
+        <div aria-busy={loading}>
           {error ? (
             <p className="alert-error m-4">{error}</p>
-          ) : loading && users.length === 0 ? (
-            <div className="flex items-center justify-center gap-2 py-16 meta text-[13px]">
-              <Loader2 size={16} className="animate-spin" /> 加载中…
-            </div>
           ) : users.length === 0 ? (
             <AdminEmpty
               icon={<Users size={22} />}
@@ -713,17 +702,15 @@ function LoginLogsDialog({ target, onClose }: { target: AdminUser | null; onClos
       }
     >
       <div className="-mx-1.5 px-1.5 overflow-y-auto flex-1 min-h-0" style={{ maxHeight: "min(52vh, 420px)" }}>
-        {loading ? (
+        {err ? (
-          <div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
-            <Loader2 size={16} className="animate-spin" /> 加载中…
-          </div>
-        ) : err ? (
           <p className="alert-error my-4">{err}</p>
         ) : logs.length === 0 ? (
-          <div className="text-center py-12">
+          loading ? null : (
-            <Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
+            <div className="text-center py-12">
-            <p className="meta text-[12.5px]">暂无登录记录</p>
+              <Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
-          </div>
+              <p className="meta text-[12.5px]">暂无登录记录</p>
+            </div>
+          )
         ) : (
           <ul className="flex flex-col">
             {logs.map((log) => (

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

@@ -1,15 +1,8 @@
 "use client";
 
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import Link from "next/link";
-import {
+import { ArrowLeft, ExternalLink, FileText, MessageCircle, MessagesSquare } from "lucide-react";
-  ArrowLeft,
-  ExternalLink,
-  FileText,
-  Loader2,
-  MessageCircle,
-  MessagesSquare,
-} from "lucide-react";
 import {
   apiAdminUserAuditComments,
   apiAdminUserAuditMessages,
@@ -69,56 +62,121 @@ function StatusChips({
 export default function UserAuditClient({
   userId,
   initial,
+  initialPosts,
+  initialPostsTotal,
+  initError,
 }: {
   userId: number;
   initial: AdminUserAuditProfile;
+  initialPosts: AdminAuditPostItem[];
+  initialPostsTotal: number;
+  initError: string;
 }) {
   const [profile] = useState(initial);
   const [tab, setTab] = useState<TabKey>("posts");
-  const [page, setPage] = useState(1);
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
+  const [error, setError] = useState(initError);
-  const [posts, setPosts] = useState<AdminAuditPostItem[]>([]);
+  const [posts, setPosts] = useState(initialPosts);
   const [comments, setComments] = useState<AdminAuditCommentItem[]>([]);
   const [messages, setMessages] = useState<AdminAuditMessageItem[]>([]);
-  const [total, setTotal] = useState(0);
+  const [postsTotal, setPostsTotal] = useState(initialPostsTotal);
+  const [commentsTotal, setCommentsTotal] = useState(0);
+  const [messagesTotal, setMessagesTotal] = useState(0);
+  const [postsPage, setPostsPage] = useState(1);
+  const [commentsPage, setCommentsPage] = useState(1);
+  const [messagesPage, setMessagesPage] = useState(1);
+  const loadSeq = useRef(0);
+  const loadedRef = useRef({ posts: true, comments: false, messages: false });
 
   const u = profile.user;
 
-  const load = useCallback(
+  const loadPosts = useCallback(
-    async (t: TabKey, p: number) => {
+    async (p: number) => {
+      const seq = ++loadSeq.current;
       setLoading(true);
-      setError("");
       try {
-        if (t === "posts") {
+        const res = await apiAdminUserAuditPosts(userId, p);
-          const res = await apiAdminUserAuditPosts(userId, p);
+        if (seq !== loadSeq.current) return;
-          setPosts(res.items || []);
+        setPosts(res.items || []);
-          setTotal(res.total);
+        setPostsTotal(res.total);
-        } else if (t === "comments") {
+        setPostsPage(p);
-          const res = await apiAdminUserAuditComments(userId, p);
+        loadedRef.current.posts = true;
-          setComments(res.items || []);
+        setTab("posts");
-          setTotal(res.total);
+        setError("");
-        } else {
-          const res = await apiAdminUserAuditMessages(userId, p);
-          setMessages(res.items || []);
-          setTotal(res.total);
-        }
       } catch (e) {
+        if (seq !== loadSeq.current) return;
         setError(e instanceof Error ? e.message : "加载失败");
       } finally {
-        setLoading(false);
+        if (seq === loadSeq.current) setLoading(false);
       }
     },
     [userId]
   );
 
-  useEffect(() => {
+  const loadComments = useCallback(
-    load(tab, page);
+    async (p: number) => {
-  }, [tab, page, load]);
+      const seq = ++loadSeq.current;
+      setLoading(true);
+      try {
+        const res = await apiAdminUserAuditComments(userId, p);
+        if (seq !== loadSeq.current) return;
+        setComments(res.items || []);
+        setCommentsTotal(res.total);
+        setCommentsPage(p);
+        loadedRef.current.comments = true;
+        setTab("comments");
+        setError("");
+      } catch (e) {
+        if (seq !== loadSeq.current) return;
+        setError(e instanceof Error ? e.message : "加载失败");
+      } finally {
+        if (seq === loadSeq.current) setLoading(false);
+      }
+    },
+    [userId]
+  );
+
+  const loadMessages = useCallback(
+    async (p: number) => {
+      const seq = ++loadSeq.current;
+      setLoading(true);
+      try {
+        const res = await apiAdminUserAuditMessages(userId, p);
+        if (seq !== loadSeq.current) return;
+        setMessages(res.items || []);
+        setMessagesTotal(res.total);
+        setMessagesPage(p);
+        loadedRef.current.messages = true;
+        setTab("messages");
+        setError("");
+      } catch (e) {
+        if (seq !== loadSeq.current) return;
+        setError(e instanceof Error ? e.message : "加载失败");
+      } finally {
+        if (seq === loadSeq.current) setLoading(false);
+      }
+    },
+    [userId]
+  );
 
   const switchTab = (t: TabKey) => {
-    setTab(t);
+    if (t === tab) return;
-    setPage(1);
+    setError("");
+    if (loadedRef.current[t]) {
+      loadSeq.current += 1;
+      setLoading(false);
+      setTab(t);
+      return;
+    }
+    if (t === "posts") void loadPosts(1);
+    else if (t === "comments") void loadComments(1);
+    else void loadMessages(1);
+  };
+
+  const goPage = (p: number) => {
+    if (tab === "posts") void loadPosts(p);
+    else if (tab === "comments") void loadComments(p);
+    else void loadMessages(p);
   };
 
   const tabCount = (t: TabKey) => {
@@ -127,6 +185,11 @@ export default function UserAuditClient({
     return profile.messages_total;
   };
 
+  const page = tab === "posts" ? postsPage : tab === "comments" ? commentsPage : messagesPage;
+  const total = tab === "posts" ? postsTotal : tab === "comments" ? commentsTotal : messagesTotal;
+  const empty =
+    tab === "posts" ? posts.length === 0 : tab === "comments" ? comments.length === 0 : messages.length === 0;
+
   const emptyIcon =
     tab === "posts" ? (
       <FileText size={22} />
@@ -232,14 +295,7 @@ export default function UserAuditClient({
             {error}
           </p>
         )}
-        {!error && loading && posts.length + comments.length + messages.length === 0 && (
+        {!error && empty && <AdminEmpty icon={emptyIcon} title="该分类暂无内容" />}
-          <div className="flex justify-center py-14" style={{ color: "var(--ink-3)" }}>
-            <Loader2 size={22} className="animate-spin" />
-          </div>
-        )}
-        {!error && !loading && total === 0 && (
-          <AdminEmpty icon={emptyIcon} title="该分类暂无内容" />
-        )}
 
         {tab === "posts" &&
           posts.map((p) => (
@@ -357,7 +413,7 @@ export default function UserAuditClient({
           total={total}
           pageSize={PAGE_SIZE}
           loading={loading}
-          onChange={setPage}
+          onChange={goPage}
         />
       </div>
     </div>

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

@@ -1,7 +1,11 @@
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
 import { authCookieHeader } from "@/lib/cookies";
-import { fetchAdminUserAudit } from "@/lib/api";
+import {
+  fetchAdminUserAudit,
+  fetchAdminUserAuditPosts,
+  type AdminAuditPostItem,
+} from "@/lib/api";
 import { getMeCached } from "@/lib/serverData";
 import { isOwner, isSuperOrOwner } from "@/lib/roles";
 import Forbidden from "../../Forbidden";
@@ -32,13 +36,38 @@ export default async function AdminUserAuditPage({ params }: PageProps) {
     return <Forbidden text="用户内容档案仅站长可查看。" />;
   }
 
-  let profile;
+  const cookieOrUndef = cookie || undefined;
-  try {
+  const [profileSettled, postsSettled] = await Promise.all([
-    profile = await fetchAdminUserAudit(userId, cookie || undefined);
+    fetchAdminUserAudit(userId, cookieOrUndef)
-  } catch (e) {
+      .then((profile) => ({ ok: true as const, profile }))
-    const msg = e instanceof Error ? e.message : "获取用户档案失败";
+      .catch((e) => ({
-    return <Forbidden text={msg} />;
+        ok: false as const,
+        error: e instanceof Error ? e.message : "获取用户档案失败",
+      })),
+    fetchAdminUserAuditPosts(userId, 1, cookieOrUndef)
+      .then((res) => ({ ok: true as const, res }))
+      .catch((e) => ({
+        ok: false as const,
+        error: e instanceof Error ? e.message : "获取帖子失败",
+      })),
+  ]);
+
+  if (!profileSettled.ok) {
+    return <Forbidden text={profileSettled.error} />;
   }
 
-  return <UserAuditClient userId={userId} initial={profile} />;
+  const initialPosts: AdminAuditPostItem[] = postsSettled.ok ? postsSettled.res.items || [] : [];
+  const initialPostsTotal = postsSettled.ok ? postsSettled.res.total : 0;
+  const initError = postsSettled.ok ? "" : postsSettled.error;
+  const profile = profileSettled.profile;
+
+  return (
+    <UserAuditClient
+      userId={userId}
+      initial={profile}
+      initialPosts={initialPosts}
+      initialPostsTotal={initialPostsTotal}
+      initError={initError}
+    />
+  );
 }

frontend/lib/api.ts

@@ -1245,6 +1245,19 @@ export async function fetchAnnouncementDetail(
   return res.json();
 }
 
+// SSR 后台公告列表（含草稿）
+export async function fetchAdminAnnouncements(
+  cookieHeader?: string
+): Promise<{ announcements: Announcement[] }> {
+  const res = await fetch(
+    `${API_BASE}/api/admin/announcements`,
+    ssrInit(cookieHeaders(cookieHeader))
+  );
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || "获取公告列表失败");
+  return data as { announcements: Announcement[] };
+}
+
 // 后台：公告列表（含草稿）
 export async function apiAdminListAnnouncements(): Promise<{ announcements: Announcement[] }> {
   const res = await fetchWithRefresh("/api/admin/announcements", {
@@ -1524,6 +1537,20 @@ export async function fetchAdminUserAudit(
   return data as AdminUserAuditProfile;
 }
 
+export async function fetchAdminUserAuditPosts(
+  id: number,
+  page = 1,
+  cookieHeader?: string
+): Promise<AdminAuditListResponse<AdminAuditPostItem>> {
+  const res = await fetch(
+    `${API_BASE}/api/admin/users/${id}/posts?page=${page}`,
+    ssrInit(cookieHeaders(cookieHeader))
+  );
+  const data = await res.json().catch(() => ({}));
+  if (!res.ok) throw new Error(data.error || "获取帖子失败");
+  return data as AdminAuditListResponse<AdminAuditPostItem>;
+}
+
 export async function apiAdminUserAudit(id: number): Promise<AdminUserAuditProfile> {
   const res = await fetchWithRefresh(`/api/admin/users/${id}`, {
     headers: clientHeaders(),