freefire
6da4309453
此提交完成了全站管理员后台核心功能开发： 1. 新增AdminUserService与管理接口，支持用户列表查询、角色变更与封禁解封 2. 重构认证链路，统一账号封禁错误码与处理逻辑 3. 新增全局强制下线机制，账号被封禁时自动弹出告知弹窗并清理登录态 4. 重构管理员后台路由与布局，统一权限校验逻辑 5. 优化通知轮询逻辑，页面切回前台时立即刷新未读计数 6. 合并原公告、外观管理页到统一后台面板
324 lines
11 KiB
TypeScript
324 lines
11 KiB
TypeScript
import type { Metadata } from "next";
|
||
import Link from "next/link";
|
||
import { cookies } from "next/headers";
|
||
import {
|
||
Users,
|
||
PenLine,
|
||
MessageCircle,
|
||
Activity,
|
||
Megaphone,
|
||
Palette,
|
||
ChevronRight,
|
||
UserPlus,
|
||
LayoutGrid,
|
||
} from "lucide-react";
|
||
import { fetchOverview, type OverviewResponse } from "@/lib/api";
|
||
import { authCookieHeader } from "@/lib/cookies";
|
||
import { getMeCached } from "@/lib/serverData";
|
||
import Avatar from "@/components/Avatar";
|
||
import { formatRelative } from "@/lib/format";
|
||
|
||
export const metadata: Metadata = {
|
||
title: "管理仪表盘",
|
||
};
|
||
|
||
// 精确千分位（管理员视角需要真实数值，不用首页的紧凑 K/M）
|
||
const fmt = (n: number) => n.toLocaleString("zh-CN");
|
||
|
||
function greeting(hour: number) {
|
||
if (hour < 6) return "凌晨好";
|
||
if (hour < 12) return "上午好";
|
||
if (hour < 14) return "中午好";
|
||
if (hour < 18) return "下午好";
|
||
return "晚上好";
|
||
}
|
||
|
||
// 统计 Bento 卡：总量 + 今日增量，语义色与全站令牌一致
|
||
function StatCard({
|
||
label,
|
||
value,
|
||
foot,
|
||
icon,
|
||
color,
|
||
soft,
|
||
}: {
|
||
label: string;
|
||
value: string;
|
||
foot: string;
|
||
icon: React.ReactNode;
|
||
color: string;
|
||
soft: string;
|
||
}) {
|
||
return (
|
||
<div className="panel p-4 sm:p-5">
|
||
<div className="flex items-start justify-between gap-2">
|
||
<p className="text-[12.5px] font-semibold" style={{ color: "var(--ink-3)" }}>
|
||
{label}
|
||
</p>
|
||
<span
|
||
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
|
||
style={{ background: soft, color }}
|
||
aria-hidden="true"
|
||
>
|
||
{icon}
|
||
</span>
|
||
</div>
|
||
<p
|
||
className="mt-3 text-[26px] sm:text-[30px] font-extrabold tabular-nums leading-none tracking-tight"
|
||
style={{ color: "var(--ink)" }}
|
||
>
|
||
{value}
|
||
</p>
|
||
<p className="mt-2 text-[11.5px] sm:text-[12px] font-semibold" style={{ color: "var(--ink-3)" }}>
|
||
{foot}
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// 快捷管理入口：整卡可点（stretch-link），图标 + 标题 + 描述 + 箭头
|
||
function QuickLink({
|
||
href,
|
||
icon,
|
||
title,
|
||
desc,
|
||
soft,
|
||
color,
|
||
}: {
|
||
href: string;
|
||
icon: React.ReactNode;
|
||
title: string;
|
||
desc: string;
|
||
soft: string;
|
||
color: string;
|
||
}) {
|
||
return (
|
||
<Link href={href} className="panel hover-lift relative block p-5 group">
|
||
<div className="flex items-start gap-3.5">
|
||
<span
|
||
className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
|
||
style={{ background: soft, color }}
|
||
aria-hidden="true"
|
||
>
|
||
{icon}
|
||
</span>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-[15px] font-extrabold" style={{ color: "var(--ink)" }}>
|
||
{title}
|
||
</p>
|
||
<p className="meta mt-1 text-[12.5px] leading-relaxed">{desc}</p>
|
||
</div>
|
||
<ChevronRight
|
||
size={17}
|
||
className="shrink-0 mt-1 transition-transform group-hover:translate-x-0.5"
|
||
style={{ color: "var(--ink-3)" }}
|
||
/>
|
||
</div>
|
||
</Link>
|
||
);
|
||
}
|
||
|
||
function PanelHead({ title, extra }: { title: string; extra?: string }) {
|
||
return (
|
||
<div
|
||
className="px-4 sm:px-5 py-3.5 flex items-center justify-between gap-2"
|
||
style={{ borderBottom: "1px solid var(--line)" }}
|
||
>
|
||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
|
||
{title}
|
||
</span>
|
||
{extra && (
|
||
<span className="meta text-[12px] tabular-nums" style={{ color: "var(--ink-3)" }}>
|
||
{extra}
|
||
</span>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default async function AdminDashboardPage() {
|
||
const cookie = authCookieHeader(await cookies());
|
||
// 与 layout 的 /me 请求共享 React cache；概览失败降级，不阻塞仪表盘骨架
|
||
const [me, overview] = await Promise.all([
|
||
getMeCached(cookie || undefined),
|
||
fetchOverview(cookie).catch(() => null),
|
||
]);
|
||
|
||
const now = new Date();
|
||
const dateLabel = new Intl.DateTimeFormat("zh-CN", {
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
weekday: "long",
|
||
}).format(now);
|
||
|
||
const stats = overview?.stats;
|
||
const boards = overview?.boards ?? [];
|
||
const newUsers = overview?.new_users ?? [];
|
||
const topBoards = [...boards].sort((a, b) => b.post_count - a.post_count).slice(0, 6);
|
||
const maxBoardCount = Math.max(1, ...topBoards.map((b) => b.post_count));
|
||
|
||
return (
|
||
<div>
|
||
{/* 页头 */}
|
||
<div className="mb-5">
|
||
<h1 className="text-[22px] sm:text-[26px] font-extrabold tracking-tight" style={{ color: "var(--ink)" }}>
|
||
{greeting(now.getHours())}，{me.user?.nickname}
|
||
</h1>
|
||
<p className="meta mt-1.5 text-[12.5px]">{dateLabel} · 这里是站点运营全貌</p>
|
||
</div>
|
||
|
||
{/* 统计 Bento */}
|
||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
|
||
<StatCard
|
||
label="注册用户"
|
||
value={stats ? fmt(stats.users) : "—"}
|
||
foot={stats ? `今日新增 +${fmt(stats.today_users)}` : "统计暂不可用"}
|
||
icon={<Users size={16} />}
|
||
color="var(--accent)"
|
||
soft="var(--accent-soft)"
|
||
/>
|
||
<StatCard
|
||
label="话题总数"
|
||
value={stats ? fmt(stats.posts) : "—"}
|
||
foot={stats ? `今日新发 +${fmt(stats.today_posts)}` : "统计暂不可用"}
|
||
icon={<PenLine size={16} />}
|
||
color="var(--clay)"
|
||
soft="var(--clay-soft)"
|
||
/>
|
||
<StatCard
|
||
label="回复总数"
|
||
value={stats ? fmt(stats.comments) : "—"}
|
||
foot={stats ? `今日新增 +${fmt(stats.today_comments)}` : "统计暂不可用"}
|
||
icon={<MessageCircle size={16} />}
|
||
color="var(--ok)"
|
||
soft="var(--ok-soft)"
|
||
/>
|
||
<StatCard
|
||
label="在线用户"
|
||
value={stats ? fmt(stats.online) : "—"}
|
||
foot={stats ? `近 5 分钟活跃 · 峰值 ${fmt(stats.peak_online)}` : "统计暂不可用"}
|
||
icon={<Activity size={16} />}
|
||
color="var(--gold)"
|
||
soft="var(--gold-soft)"
|
||
/>
|
||
</div>
|
||
|
||
{/* 快捷入口 */}
|
||
<h2 className="sr-only">快捷管理</h2>
|
||
<div className="grid sm:grid-cols-2 xl:grid-cols-3 gap-3 sm:gap-4 mt-4">
|
||
<QuickLink
|
||
href="/admin/users"
|
||
icon={<Users size={18} />}
|
||
title="用户管理"
|
||
desc="查看全站成员，授予管理员权限或封禁违规账号"
|
||
soft="var(--accent-soft)"
|
||
color="var(--accent)"
|
||
/>
|
||
<QuickLink
|
||
href="/admin/announcements"
|
||
icon={<Megaphone size={18} />}
|
||
title="公告管理"
|
||
desc="发布、编辑与下线站点公告，支持标签颜色与草稿状态"
|
||
soft="var(--clay-soft)"
|
||
color="var(--clay)"
|
||
/>
|
||
<QuickLink
|
||
href="/admin/appearance"
|
||
icon={<Palette size={18} />}
|
||
title="外观设置"
|
||
desc="配置全站主题强调色，实时预览后保存并对所有用户生效"
|
||
soft="var(--gold-soft)"
|
||
color="var(--gold)"
|
||
/>
|
||
</div>
|
||
|
||
{/* 成员与板块 */}
|
||
<div className="grid lg:grid-cols-2 gap-4 mt-4 items-start">
|
||
{/* 最新注册成员 */}
|
||
<div className="panel overflow-hidden">
|
||
<PanelHead title="最新注册成员" extra={stats ? `共 ${fmt(stats.users)} 人` : undefined} />
|
||
{newUsers.length === 0 ? (
|
||
<p className="meta text-center py-14 text-[13px]">暂无成员数据</p>
|
||
) : (
|
||
newUsers.slice(0, 6).map((u) => (
|
||
<Link
|
||
key={u.id}
|
||
href={`/u/${u.id}`}
|
||
className="flex items-center gap-3 px-4 sm:px-5 py-3 transition-colors hover:bg-[var(--panel-2)]"
|
||
style={{ borderTop: "1px solid var(--line)" }}
|
||
>
|
||
<Avatar name={u.nickname || u.username} src={u.avatar || undefined} size={34} />
|
||
<span className="min-w-0 flex-1 leading-tight">
|
||
<span className="block text-[13.5px] font-bold truncate" style={{ color: "var(--ink)" }}>
|
||
{u.nickname}
|
||
</span>
|
||
<span className="block text-[11.5px] truncate" style={{ color: "var(--ink-3)" }}>
|
||
@{u.username}
|
||
</span>
|
||
</span>
|
||
<span
|
||
className="shrink-0 inline-flex items-center gap-1 text-[11.5px] font-semibold"
|
||
style={{ color: "var(--ink-3)" }}
|
||
>
|
||
<UserPlus size={12} aria-hidden="true" />
|
||
{formatRelative(u.created_at)}加入
|
||
</span>
|
||
</Link>
|
||
))
|
||
)}
|
||
</div>
|
||
|
||
{/* 板块分布 */}
|
||
<div className="panel overflow-hidden">
|
||
<PanelHead title="板块话题分布" extra={`${boards.length} 个板块`} />
|
||
{topBoards.length === 0 ? (
|
||
<p className="meta text-center py-14 text-[13px]">暂无板块数据</p>
|
||
) : (
|
||
topBoards.map((b) => (
|
||
<Link
|
||
key={b.id}
|
||
href={`/?board=${b.id}`}
|
||
className="flex items-center gap-3 px-4 sm:px-5 py-3 transition-colors hover:bg-[var(--panel-2)]"
|
||
style={{ borderTop: "1px solid var(--line)" }}
|
||
>
|
||
<span
|
||
className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0"
|
||
style={{ background: "var(--panel-2)", color: "var(--accent)" }}
|
||
aria-hidden="true"
|
||
>
|
||
<LayoutGrid size={14} />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="flex items-center justify-between gap-2">
|
||
<span className="text-[13.5px] font-bold truncate" style={{ color: "var(--ink)" }}>
|
||
{b.name}
|
||
</span>
|
||
<span className="text-[12px] font-bold tabular-nums shrink-0" style={{ color: "var(--ink-2)" }}>
|
||
{fmt(b.post_count)}
|
||
</span>
|
||
</span>
|
||
{/* 相对占比迷你条（纯装饰） */}
|
||
<span
|
||
className="block mt-1.5 h-1 rounded-full overflow-hidden"
|
||
style={{ background: "var(--tint)" }}
|
||
aria-hidden="true"
|
||
>
|
||
<span
|
||
className="block h-full rounded-full"
|
||
style={{
|
||
width: `${Math.max(4, Math.round((b.post_count / maxBoardCount) * 100))}%`,
|
||
background: "var(--accent)",
|
||
}}
|
||
/>
|
||
</span>
|
||
</span>
|
||
</Link>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|