396 lines
13 KiB
TypeScript
396 lines
13 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Globe,
|
|
Loader2,
|
|
MessageSquare,
|
|
Save,
|
|
UserPlus,
|
|
ExternalLink,
|
|
Shield,
|
|
Mail,
|
|
HardDrive,
|
|
Ban,
|
|
Wrench,
|
|
Palette,
|
|
FileText,
|
|
} from "lucide-react";
|
|
import { useEffect, useState, type ReactNode } from "react";
|
|
import {
|
|
AdminField,
|
|
AdminPageHeader,
|
|
AdminSection,
|
|
AdminSwitch,
|
|
} from "@/components/admin";
|
|
import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
|
|
import { toast } from "@/lib/toast";
|
|
|
|
type SectionId =
|
|
| "basic"
|
|
| "content"
|
|
| "brand"
|
|
| "footer"
|
|
| "security"
|
|
| "mail"
|
|
| "storage"
|
|
| "words"
|
|
| "maintenance";
|
|
|
|
const NAV: { id: SectionId; label: string; ready?: boolean }[] = [
|
|
{ id: "basic", label: "基本信息", ready: true },
|
|
{ id: "content", label: "内容与互动", ready: true },
|
|
{ id: "brand", label: "品牌与 SEO" },
|
|
{ id: "footer", label: "页脚与合规" },
|
|
{ id: "security", label: "安全与限流" },
|
|
{ id: "mail", label: "邮件" },
|
|
{ id: "storage", label: "对象存储" },
|
|
{ id: "words", label: "敏感词" },
|
|
{ id: "maintenance", label: "系统维护" },
|
|
];
|
|
|
|
function SwitchRow({
|
|
title,
|
|
description,
|
|
control,
|
|
bordered,
|
|
}: {
|
|
title: ReactNode;
|
|
description: string;
|
|
control: ReactNode;
|
|
bordered?: boolean;
|
|
}) {
|
|
return (
|
|
<div
|
|
className="flex items-start justify-between gap-4 flex-wrap py-4 first:pt-0 last:pb-0"
|
|
style={bordered ? { borderBottom: "1px solid var(--line)" } : undefined}
|
|
>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-[14.5px] font-medium flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
|
|
{title}
|
|
</p>
|
|
<p className="meta text-[12.5px] mt-1 leading-relaxed">{description}</p>
|
|
</div>
|
|
<div className="shrink-0">{control}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function ComingSoonCard({
|
|
title,
|
|
description,
|
|
icon,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
icon: ReactNode;
|
|
}) {
|
|
return (
|
|
<AdminSection title={title} description={description}>
|
|
<div
|
|
className="rounded-[var(--r-sm)] px-4 py-10 text-center"
|
|
style={{ background: "var(--panel-2)", color: "var(--ink-3)" }}
|
|
>
|
|
<span className="inline-flex mb-2 opacity-80" aria-hidden>
|
|
{icon}
|
|
</span>
|
|
<p className="text-[14px]" style={{ color: "var(--ink-2)" }}>
|
|
即将推出
|
|
</p>
|
|
<p className="meta text-[12.5px] mt-1">此分区尚未开放配置</p>
|
|
</div>
|
|
</AdminSection>
|
|
);
|
|
}
|
|
|
|
export default function SettingsAdmin({ initial }: { initial: PublicSettings }) {
|
|
const [siteName, setSiteName] = useState(initial.site_name);
|
|
const [siteDescription, setSiteDescription] = useState(initial.site_description);
|
|
const [allowRegister, setAllowRegister] = useState(initial.allow_register);
|
|
const [allowComments, setAllowComments] = useState(initial.allow_comments !== false);
|
|
const [postLinkNewTab, setPostLinkNewTab] = useState(initial.post_link_new_tab !== false);
|
|
const [savedName, setSavedName] = useState(initial.site_name);
|
|
const [savedDesc, setSavedDesc] = useState(initial.site_description);
|
|
const [saving, setSaving] = useState(false);
|
|
const [togglingReg, setTogglingReg] = useState(false);
|
|
const [togglingComments, setTogglingComments] = useState(false);
|
|
const [togglingLink, setTogglingLink] = useState(false);
|
|
const [active, setActive] = useState<SectionId>("basic");
|
|
|
|
const dirty = siteName.trim() !== savedName || siteDescription.trim() !== savedDesc;
|
|
|
|
useEffect(() => {
|
|
const ids = NAV.map((n) => n.id);
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
const visible = entries
|
|
.filter((e) => e.isIntersecting)
|
|
.sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
|
|
if (visible[0]?.target?.id) {
|
|
const id = visible[0].target.id.replace(/^settings-/, "") as SectionId;
|
|
if (ids.includes(id)) setActive(id);
|
|
}
|
|
},
|
|
{ rootMargin: "-20% 0px -60% 0px", threshold: [0, 0.25, 0.5] }
|
|
);
|
|
ids.forEach((id) => {
|
|
const el = document.getElementById(`settings-${id}`);
|
|
if (el) observer.observe(el);
|
|
});
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
const scrollTo = (id: SectionId) => {
|
|
setActive(id);
|
|
document.getElementById(`settings-${id}`)?.scrollIntoView({ behavior: "smooth", block: "start" });
|
|
};
|
|
|
|
const saveIdentity = async () => {
|
|
if (saving) return;
|
|
const name = siteName.trim();
|
|
if (!name) {
|
|
toast("站点名称不能为空");
|
|
return;
|
|
}
|
|
setSaving(true);
|
|
try {
|
|
const res = await apiUpdateSiteSettings({
|
|
site_name: name,
|
|
site_description: siteDescription.trim(),
|
|
});
|
|
setSiteName(res.site_name);
|
|
setSiteDescription(res.site_description);
|
|
setSavedName(res.site_name);
|
|
setSavedDesc(res.site_description);
|
|
toast("站点信息已保存", "ok");
|
|
} catch (e) {
|
|
toast(e instanceof Error ? e.message : "保存失败");
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
};
|
|
|
|
const toggleRegister = async () => {
|
|
if (togglingReg) return;
|
|
const next = !allowRegister;
|
|
setTogglingReg(true);
|
|
try {
|
|
const res = await apiUpdateSiteSettings({ allow_register: next });
|
|
setAllowRegister(res.allow_register);
|
|
toast(res.allow_register ? "已开放注册" : "已关闭注册", "ok");
|
|
} catch (e) {
|
|
toast(e instanceof Error ? e.message : "保存失败");
|
|
} finally {
|
|
setTogglingReg(false);
|
|
}
|
|
};
|
|
|
|
const toggleComments = async () => {
|
|
if (togglingComments) return;
|
|
const next = !allowComments;
|
|
setTogglingComments(true);
|
|
try {
|
|
const res = await apiUpdateSiteSettings({ allow_comments: next });
|
|
setAllowComments(res.allow_comments);
|
|
toast(res.allow_comments ? "已开放评论" : "已关闭评论", "ok");
|
|
} catch (e) {
|
|
toast(e instanceof Error ? e.message : "保存失败");
|
|
} finally {
|
|
setTogglingComments(false);
|
|
}
|
|
};
|
|
|
|
const togglePostLinkNewTab = async () => {
|
|
if (togglingLink) return;
|
|
const next = !postLinkNewTab;
|
|
setTogglingLink(true);
|
|
try {
|
|
const res = await apiUpdateSiteSettings({ post_link_new_tab: next });
|
|
setPostLinkNewTab(res.post_link_new_tab !== false);
|
|
toast(res.post_link_new_tab !== false ? "帖子与评论外链将在新标签打开" : "帖子与评论外链将在当前页打开", "ok");
|
|
} catch (e) {
|
|
toast(e instanceof Error ? e.message : "保存失败");
|
|
} finally {
|
|
setTogglingLink(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<AdminPageHeader
|
|
icon={Globe}
|
|
title="站点设置"
|
|
description="配置站点名称、互动开关与后续扩展分区；主题色请到「外观」页调整"
|
|
/>
|
|
|
|
<div className="flex flex-col lg:flex-row gap-6 lg:gap-8 items-start">
|
|
<nav
|
|
className="w-full lg:w-52 shrink-0 lg:sticky lg:top-4 flex lg:flex-col gap-1 overflow-x-auto lg:overflow-visible pb-1 lg:pb-0"
|
|
aria-label="设置分区"
|
|
>
|
|
{NAV.map((item) => {
|
|
const isActive = active === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
type="button"
|
|
onClick={() => scrollTo(item.id)}
|
|
className="shrink-0 text-left px-3 py-2 rounded-[var(--r-sm)] text-[13.5px] transition-colors whitespace-nowrap"
|
|
style={{
|
|
background: isActive ? "var(--accent-soft)" : "transparent",
|
|
color: isActive ? "var(--accent)" : "var(--ink-2)",
|
|
fontWeight: isActive ? 600 : 400,
|
|
}}
|
|
aria-current={isActive ? "true" : undefined}
|
|
>
|
|
{item.label}
|
|
{!item.ready && (
|
|
<span className="ml-1.5 text-[10.5px]" style={{ color: "var(--ink-3)" }}>
|
|
即将
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</nav>
|
|
|
|
<div className="flex-1 min-w-0 flex flex-col gap-4 w-full">
|
|
<div id="settings-basic" className="scroll-mt-4">
|
|
<AdminSection title="基本信息" description="用于页眉品牌、页脚版权与 SEO 元信息">
|
|
<AdminField
|
|
id="site-name"
|
|
className="mb-4"
|
|
label="站点名称"
|
|
maxLength={32}
|
|
value={siteName}
|
|
onChange={setSiteName}
|
|
placeholder="姜十三论坛"
|
|
/>
|
|
|
|
<AdminField
|
|
id="site-desc"
|
|
className="mb-4"
|
|
label="站点简介"
|
|
as="textarea"
|
|
minHeight="96px"
|
|
maxLength={160}
|
|
value={siteDescription}
|
|
onChange={setSiteDescription}
|
|
placeholder="一句话介绍社区定位…"
|
|
/>
|
|
|
|
<div className="flex justify-end">
|
|
<button
|
|
type="button"
|
|
className="btn btn-primary btn-sm"
|
|
disabled={!dirty || saving}
|
|
onClick={() => void saveIdentity()}
|
|
>
|
|
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
|
保存基本信息
|
|
</button>
|
|
</div>
|
|
</AdminSection>
|
|
</div>
|
|
|
|
<div id="settings-content" className="scroll-mt-4">
|
|
<AdminSection title="内容与互动" description="控制注册、评论与链接打开方式">
|
|
<SwitchRow
|
|
bordered
|
|
title={
|
|
<>
|
|
<UserPlus size={15} /> 开放注册
|
|
</>
|
|
}
|
|
description="关闭后，游客将无法提交注册；已有账号仍可登录。适用于内测或维护期。"
|
|
control={
|
|
<AdminSwitch
|
|
checked={allowRegister}
|
|
disabled={togglingReg}
|
|
onChange={() => void toggleRegister()}
|
|
label="开放注册"
|
|
/>
|
|
}
|
|
/>
|
|
<SwitchRow
|
|
bordered
|
|
title={
|
|
<>
|
|
<MessageSquare size={15} /> 开放评论
|
|
</>
|
|
}
|
|
description="关闭后前台不展示评论入口、评论数量与已有评论，并提示本站不支持评论。"
|
|
control={
|
|
<AdminSwitch
|
|
checked={allowComments}
|
|
disabled={togglingComments}
|
|
onChange={() => void toggleComments()}
|
|
label="开放评论"
|
|
/>
|
|
}
|
|
/>
|
|
<SwitchRow
|
|
title={
|
|
<>
|
|
<ExternalLink size={15} /> 外链新标签打开
|
|
</>
|
|
}
|
|
description="开启后，帖子与评论中的 Markdown 外链在新标签打开；关闭则当前页跳转。"
|
|
control={
|
|
<AdminSwitch
|
|
checked={postLinkNewTab}
|
|
disabled={togglingLink}
|
|
onChange={() => void togglePostLinkNewTab()}
|
|
label="外链新标签打开"
|
|
/>
|
|
}
|
|
/>
|
|
</AdminSection>
|
|
</div>
|
|
|
|
<div id="settings-brand" className="scroll-mt-4">
|
|
<ComingSoonCard
|
|
title="品牌与 SEO"
|
|
description="站点图标、OG 图与结构化元数据"
|
|
icon={<Palette size={22} />}
|
|
/>
|
|
</div>
|
|
<div id="settings-footer" className="scroll-mt-4">
|
|
<ComingSoonCard
|
|
title="页脚与合规"
|
|
description="备案号、版权声明与合规链接"
|
|
icon={<FileText size={22} />}
|
|
/>
|
|
</div>
|
|
<div id="settings-security" className="scroll-mt-4">
|
|
<ComingSoonCard
|
|
title="安全与限流"
|
|
description="登录/注册速率与发帖冷静期等"
|
|
icon={<Shield size={22} />}
|
|
/>
|
|
</div>
|
|
<div id="settings-mail" className="scroll-mt-4">
|
|
<ComingSoonCard title="邮件" description="SMTP 与通知邮件模板" icon={<Mail size={22} />} />
|
|
</div>
|
|
<div id="settings-storage" className="scroll-mt-4">
|
|
<ComingSoonCard
|
|
title="对象存储"
|
|
description="附件与头像的云端存储配置"
|
|
icon={<HardDrive size={22} />}
|
|
/>
|
|
</div>
|
|
<div id="settings-words" className="scroll-mt-4">
|
|
<ComingSoonCard title="敏感词" description="内容过滤词库与命中策略" icon={<Ban size={22} />} />
|
|
</div>
|
|
<div id="settings-maintenance" className="scroll-mt-4">
|
|
<ComingSoonCard
|
|
title="系统维护"
|
|
description="维护模式、缓存与诊断工具"
|
|
icon={<Wrench size={22} />}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|