freefire
996a870015
此提交完成了以下核心功能与优化： 1. 新增站点公告全流程支持：包含公告模型、CRUD接口、管理后台页面、公告详情页与首页展示 2. 实现评论楼层化与回复嵌套：重构评论系统为树状结构，支持回复评论与层级限制 3. 添加用户在线状态追踪：异步更新用户最后活跃时间并做SQL限频 4. 优化用户体验：移动端浮动操作条、统一板块标签样式、用户页签到积分展示、注册即登录优化 5. 其他细节优化：SEO站点地图新增公告页、评论分页与统计、登录/注册表单增强等
373 lines
13 KiB
TypeScript
373 lines
13 KiB
TypeScript
"use client";
|
||
|
||
import { useCallback, useEffect, useState } from "react";
|
||
import Link from "next/link";
|
||
import {
|
||
Plus,
|
||
Pencil,
|
||
Trash2,
|
||
Loader2,
|
||
Save,
|
||
X,
|
||
ExternalLink,
|
||
Megaphone,
|
||
FileText,
|
||
} from "lucide-react";
|
||
import {
|
||
apiAdminListAnnouncements,
|
||
apiAdminCreateAnnouncement,
|
||
apiAdminUpdateAnnouncement,
|
||
apiAdminDeleteAnnouncement,
|
||
type Announcement,
|
||
type AnnouncementColor,
|
||
type AnnouncementInput,
|
||
} from "@/lib/api";
|
||
import { formatDate } from "@/lib/format";
|
||
import { toast } from "@/lib/toast";
|
||
|
||
const COLORS: { value: AnnouncementColor; label: string }[] = [
|
||
{ value: "blue", label: "蓝色" },
|
||
{ value: "green", label: "绿色" },
|
||
{ value: "orange", label: "橙色" },
|
||
{ value: "red", label: "红色" },
|
||
{ value: "purple", label: "紫色" },
|
||
{ value: "gray", label: "灰色" },
|
||
];
|
||
|
||
type FormState = AnnouncementInput & { id: number | null };
|
||
|
||
const EMPTY_FORM: FormState = {
|
||
id: null,
|
||
title: "",
|
||
content: "",
|
||
tag: "公告",
|
||
tag_color: "blue",
|
||
published: true,
|
||
};
|
||
|
||
export default function AnnouncementAdmin() {
|
||
const [list, setList] = useState<Announcement[]>([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [loadError, setLoadError] = useState("");
|
||
const [form, setForm] = useState<FormState | null>(null);
|
||
const [saving, setSaving] = useState(false);
|
||
const [deletingId, setDeletingId] = useState<number | 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({
|
||
id: a.id,
|
||
title: a.title,
|
||
content: a.content,
|
||
tag: a.tag,
|
||
tag_color: a.tag_color,
|
||
published: a.published,
|
||
});
|
||
|
||
async function save() {
|
||
if (!form) return;
|
||
const payload: AnnouncementInput = {
|
||
title: form.title.trim(),
|
||
content: form.content.trim(),
|
||
tag: form.tag.trim() || "公告",
|
||
tag_color: form.tag_color,
|
||
published: form.published,
|
||
};
|
||
if (!payload.title || !payload.content) {
|
||
toast("标题和内容不能为空");
|
||
return;
|
||
}
|
||
setSaving(true);
|
||
try {
|
||
if (form.id == null) {
|
||
await apiAdminCreateAnnouncement(payload);
|
||
toast("公告已发布", "ok");
|
||
} else {
|
||
await apiAdminUpdateAnnouncement(form.id, payload);
|
||
toast("公告已更新", "ok");
|
||
}
|
||
setForm(null);
|
||
await load();
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
}
|
||
|
||
async function remove(a: Announcement) {
|
||
if (!window.confirm(`确定删除公告「${a.title}」吗？此操作不可撤销。`)) return;
|
||
setDeletingId(a.id);
|
||
try {
|
||
await apiAdminDeleteAnnouncement(a.id);
|
||
setList((l) => l.filter((x) => x.id !== a.id));
|
||
if (form?.id === a.id) setForm(null);
|
||
toast("公告已删除", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "删除失败");
|
||
} finally {
|
||
setDeletingId(null);
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
{/* 页头 */}
|
||
<div className="flex items-center justify-between gap-3 flex-wrap mb-5">
|
||
<div>
|
||
<h1 className="text-[22px] sm:text-[26px] font-extrabold tracking-tight flex items-center gap-2.5" style={{ color: "var(--ink)" }}>
|
||
<span
|
||
className="w-9 h-9 rounded-xl flex items-center justify-center"
|
||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||
>
|
||
<Megaphone size={18} />
|
||
</span>
|
||
站点公告管理
|
||
</h1>
|
||
<p className="meta mt-1.5 text-[12.5px]">发布、编辑与下线右栏站点公告，支持自定义标签与标签颜色</p>
|
||
</div>
|
||
{form?.id == null && (
|
||
<button onClick={startCreate} className="btn btn-primary">
|
||
<Plus size={15} /> 新建公告
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 lg:grid-cols-[400px_minmax(0,1fr)] gap-6 items-start">
|
||
{/* 编辑/新建表单 */}
|
||
{form ? (
|
||
<div className="panel p-5 lg:sticky lg:top-24">
|
||
<p className="font-extrabold text-[15px] mb-4" style={{ color: "var(--ink)" }}>
|
||
{form.id == null ? "新建公告" : "编辑公告"}
|
||
</p>
|
||
|
||
<label className="field-label" htmlFor="anno-title">
|
||
标题
|
||
</label>
|
||
<input
|
||
id="anno-title"
|
||
className="field mb-4"
|
||
maxLength={200}
|
||
value={form.title}
|
||
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
||
placeholder="请输入公告标题"
|
||
/>
|
||
|
||
<div className="flex items-end gap-4 mb-4 flex-wrap">
|
||
<div className="w-36">
|
||
<label className="field-label" htmlFor="anno-tag">
|
||
标签
|
||
</label>
|
||
<input
|
||
id="anno-tag"
|
||
className="field"
|
||
maxLength={32}
|
||
value={form.tag}
|
||
onChange={(e) => setForm({ ...form, tag: e.target.value })}
|
||
placeholder="公告"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<p className="field-label">标签颜色</p>
|
||
<div className="flex items-center gap-2">
|
||
{COLORS.map((c) => (
|
||
<button
|
||
key={c.value}
|
||
type="button"
|
||
title={c.label}
|
||
aria-label={c.label}
|
||
aria-pressed={form.tag_color === c.value}
|
||
className={`j13-anno-dot is-${c.value}`}
|
||
onClick={() => setForm({ ...form, tag_color: c.value })}
|
||
/>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="field-label">发布状态</p>
|
||
<div className="flex items-center gap-2 mb-4" role="group" aria-label="发布状态">
|
||
<button
|
||
type="button"
|
||
className="j13-tab"
|
||
aria-pressed={form.published}
|
||
onClick={() => setForm({ ...form, published: true })}
|
||
style={form.published ? { background: "var(--accent-soft)", borderColor: "color-mix(in srgb, var(--accent) 38%, var(--line))", color: "var(--accent)" } : undefined}
|
||
>
|
||
立即发布
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="j13-tab"
|
||
aria-pressed={!form.published}
|
||
onClick={() => setForm({ ...form, published: false })}
|
||
style={!form.published ? { background: "var(--gold-soft)", borderColor: "color-mix(in srgb, var(--gold) 38%, var(--line))", color: "var(--gold)" } : undefined}
|
||
>
|
||
存为草稿
|
||
</button>
|
||
</div>
|
||
|
||
<label className="field-label" htmlFor="anno-content">
|
||
正文（支持 Markdown）
|
||
</label>
|
||
<textarea
|
||
id="anno-content"
|
||
className="field min-h-[260px]"
|
||
value={form.content}
|
||
onChange={(e) => setForm({ ...form, content: e.target.value })}
|
||
placeholder="请输入公告正文，支持 Markdown 语法…"
|
||
/>
|
||
|
||
<div className="flex items-center gap-2.5 mt-4">
|
||
<button onClick={save} disabled={saving} className="btn btn-primary flex-1 justify-center">
|
||
{saving ? (
|
||
<>
|
||
<Loader2 size={15} className="animate-spin" /> 保存中…
|
||
</>
|
||
) : (
|
||
<>
|
||
<Save size={15} /> {form.id == null ? "发布公告" : "保存修改"}
|
||
</>
|
||
)}
|
||
</button>
|
||
<button
|
||
onClick={() => setForm(null)}
|
||
disabled={saving}
|
||
className="btn btn-line"
|
||
aria-label="取消编辑"
|
||
>
|
||
<X size={15} /> 取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
) : (
|
||
<div className="panel p-6 text-center lg:sticky lg:top-24">
|
||
<span
|
||
className="inline-flex w-12 h-12 rounded-2xl items-center justify-center mb-3"
|
||
style={{ background: "var(--accent-soft)", color: "var(--accent)" }}
|
||
>
|
||
<FileText size={22} />
|
||
</span>
|
||
<p className="font-bold text-[14.5px]" style={{ color: "var(--ink)" }}>
|
||
公告编辑器
|
||
</p>
|
||
<p className="meta mt-1.5 text-[12.5px] leading-relaxed">
|
||
点击右上「新建公告」发布公告，
|
||
<br />
|
||
或在右侧列表中选择已有公告进行编辑。
|
||
</p>
|
||
<button onClick={startCreate} className="btn btn-primary mt-4">
|
||
<Plus size={15} /> 新建公告
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* 公告列表 */}
|
||
<div className="panel overflow-hidden">
|
||
<div
|
||
className="px-4 sm:px-5 py-3.5 flex items-center justify-between"
|
||
style={{ borderBottom: "1px solid var(--line)" }}
|
||
>
|
||
<span className="font-bold text-[15px]" style={{ color: "var(--ink)" }}>
|
||
全部公告
|
||
</span>
|
||
<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 ? (
|
||
<p className="alert-error m-4">{loadError}</p>
|
||
) : list.length === 0 ? (
|
||
<p className="meta text-center py-16 text-[13px]">还没有公告，点击「新建公告」发布第一条吧</p>
|
||
) : (
|
||
list.map((a) => (
|
||
<div
|
||
key={a.id}
|
||
className="group flex items-center gap-3 px-4 sm:px-5 py-3.5"
|
||
style={{ borderTop: "1px solid var(--line)" }}
|
||
>
|
||
<div className="min-w-0 flex-1">
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
|
||
{!a.published && (
|
||
<span
|
||
className="inline-flex items-center rounded-full px-2 py-px text-[10.5px] font-bold leading-[1.55]"
|
||
style={{ background: "var(--gold-soft)", color: "var(--gold)" }}
|
||
>
|
||
草稿
|
||
</span>
|
||
)}
|
||
<span className="meta text-[11px] tabular-nums">{formatDate(a.created_at)}</span>
|
||
</div>
|
||
<p
|
||
className="mt-1 truncate text-[14px] font-semibold"
|
||
style={{ color: "var(--ink)" }}
|
||
title={a.title}
|
||
>
|
||
{a.title}
|
||
</p>
|
||
</div>
|
||
<div className="flex items-center gap-1 shrink-0">
|
||
{a.published && (
|
||
<Link
|
||
href={`/announcement/${a.id}`}
|
||
target="_blank"
|
||
className="w-8 h-8 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||
style={{ color: "var(--ink-3)" }}
|
||
title="查看"
|
||
aria-label="查看公告"
|
||
>
|
||
<ExternalLink size={15} />
|
||
</Link>
|
||
)}
|
||
<button
|
||
onClick={() => startEdit(a)}
|
||
className="w-8 h-8 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--panel-2)]"
|
||
style={{ color: "var(--ink-3)" }}
|
||
title="编辑"
|
||
aria-label="编辑公告"
|
||
>
|
||
<Pencil size={15} />
|
||
</button>
|
||
<button
|
||
onClick={() => remove(a)}
|
||
disabled={deletingId === a.id}
|
||
className="w-8 h-8 inline-flex items-center justify-center rounded-full transition-colors hover:bg-[var(--danger-soft)] disabled:opacity-50"
|
||
style={{ color: "var(--ink-3)" }}
|
||
onMouseEnter={(e) => (e.currentTarget.style.color = "var(--danger)")}
|
||
onMouseLeave={(e) => (e.currentTarget.style.color = "var(--ink-3)")}
|
||
title="删除"
|
||
aria-label="删除公告"
|
||
>
|
||
{deletingId === a.id ? <Loader2 size={15} className="animate-spin" /> : <Trash2 size={15} />}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|