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

用户档案、用户列表、内容筛选与公告页等数据到达后再换视图，避免滚动条闪动。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-09-17 00:57:54 +08:00
parent a0a9aeed66
commit 442af625f6
7 changed files with 213 additions and 100 deletions
--- a/frontend/app/admin/users/[id]/UserAuditClient.tsx
+++ b/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 {
-  ArrowLeft,
-  ExternalLink,
-  FileText,
-  Loader2,
-  MessageCircle,
-  MessagesSquare,
-} from "lucide-react";
+import { ArrowLeft, ExternalLink, FileText, 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 [posts, setPosts] = useState<AdminAuditPostItem[]>([]);
+  const [error, setError] = useState(initError);
+  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(
-    async (t: TabKey, p: number) => {
+  const loadPosts = useCallback(
+    async (p: number) => {
+      const seq = ++loadSeq.current;
      setLoading(true);
-      setError("");
      try {
-        if (t === "posts") {
-          const res = await apiAdminUserAuditPosts(userId, p);
-          setPosts(res.items || []);
-          setTotal(res.total);
-        } else if (t === "comments") {
-          const res = await apiAdminUserAuditComments(userId, p);
-          setComments(res.items || []);
-          setTotal(res.total);
-        } else {
-          const res = await apiAdminUserAuditMessages(userId, p);
-          setMessages(res.items || []);
-          setTotal(res.total);
-        }
+        const res = await apiAdminUserAuditPosts(userId, p);
+        if (seq !== loadSeq.current) return;
+        setPosts(res.items || []);
+        setPostsTotal(res.total);
+        setPostsPage(p);
+        loadedRef.current.posts = true;
+        setTab("posts");
+        setError("");
      } catch (e) {
+        if (seq !== loadSeq.current) return;
        setError(e instanceof Error ? e.message : "加载失败");
      } finally {
-        setLoading(false);
+        if (seq === loadSeq.current) setLoading(false);
      }
    },
    [userId]
  );

-  useEffect(() => {
-    load(tab, page);
-  }, [tab, page, load]);
+  const loadComments = useCallback(
+    async (p: number) => {
+      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);
-    setPage(1);
+    if (t === tab) return;
+    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 && (
-          <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="该分类暂无内容" />
-        )}
+        {!error && empty && <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>
--- a/frontend/app/admin/users/[id]/page.tsx
+++ b/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;
-  try {
-    profile = await fetchAdminUserAudit(userId, cookie || undefined);
-  } catch (e) {
-    const msg = e instanceof Error ? e.message : "获取用户档案失败";
-    return <Forbidden text={msg} />;
+  const cookieOrUndef = cookie || undefined;
+  const [profileSettled, postsSettled] = await Promise.all([
+    fetchAdminUserAudit(userId, cookieOrUndef)
+      .then((profile) => ({ ok: true as const, profile }))
+      .catch((e) => ({
+        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}
+    />
+  );
 }