freefire/jiang13-bbs
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 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

28
frontend/app/admin/announcements/AnnouncementAdmin.tsx
View File

@@ -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() {
const [list, setList] = useState<Announcement[]>([]);
const [loading, setLoading] = useState(true);
const [loadError, setLoadError] = useState("");
export default function AnnouncementAdmin({
initial,
initError,
}: {
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 ? (
<div className="flex items-center justify-center gap-2 py-16 meta text-[13px]">
<Loader2 size={16} className="animate-spin" /> 加载中…
</div>
) : loadError ? (
{loadError ? (
<p className="alert-error m-4">{loadError}</p>
) : list.length === 0 ? (
<AdminEmpty

13
frontend/app/admin/announcements/page.tsx
View File

@@ -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} />;
}

21
frontend/app/admin/content/ContentAdmin.tsx
View File

@@ -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, "");
};

35
frontend/app/admin/users/UsersAdmin.tsx
View File

@@ -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 ? (
<div className="flex items-center justify-center gap-2 py-12 meta text-[13px]">
<Loader2 size={16} className="animate-spin" /> 加载中…
</div>
) : err ? (
{err ? (
<p className="alert-error my-4">{err}</p>
) : logs.length === 0 ? (
<div className="text-center py-12">
<Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
<p className="meta text-[12.5px]">暂无登录记录</p>
</div>
loading ? null : (
<div className="text-center py-12">
<Monitor size={22} className="mx-auto mb-2" style={{ color: "var(--ink-3)" }} />
<p className="meta text-[12.5px]">暂无登录记录</p>
</div>
)
) : (
<ul className="flex flex-col">
{logs.map((log) => (

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>

45
frontend/app/admin/users/[id]/page.tsx
View File

@@ -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}
/>
);
}

27
frontend/lib/api.ts
View File

@@ -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(),