freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
姜十三
2026-09-17 00:57:54 +08:00
parent a0a9aeed66
commit 442af625f6
7 changed files with 213 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
frontend/app/admin/users/[id]/UserAuditClient.tsx
View File

@@ -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>