管理端可配类型/体积;上传改流式避免整文件进内存;发帖先选再传并拦截未上传提交;提高 Next proxy 体积上限。 Co-authored-by: Cursor <cursoragent@cursor.com>
651 lines
22 KiB
TypeScript
651 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import {
|
||
Globe,
|
||
Loader2,
|
||
MessageSquare,
|
||
Save,
|
||
UserPlus,
|
||
MessagesSquare,
|
||
ExternalLink,
|
||
Shield,
|
||
Mail,
|
||
HardDrive,
|
||
Ban,
|
||
Wrench,
|
||
Palette,
|
||
FileText,
|
||
Paperclip,
|
||
Image as ImageIcon,
|
||
} from "lucide-react";
|
||
import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
|
||
import {
|
||
AdminExtChipEditor,
|
||
AdminField,
|
||
AdminPageHeader,
|
||
AdminSection,
|
||
AdminStepper,
|
||
AdminSwitch,
|
||
} from "@/components/admin";
|
||
import { apiUpdateSiteSettings, type PublicSettings } from "@/lib/api";
|
||
import { toast } from "@/lib/toast";
|
||
|
||
function extsEqual(a: string[], b: string[]) {
|
||
if (a.length !== b.length) return false;
|
||
return a.every((v, i) => v === b[i]);
|
||
}
|
||
|
||
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 [allowMessages, setAllowMessages] = useState(initial.allow_messages !== 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 [togglingMessages, setTogglingMessages] = useState(false);
|
||
const [togglingLink, setTogglingLink] = useState(false);
|
||
const [active, setActive] = useState<SectionId>("basic");
|
||
|
||
const [extLimit, setExtLimit] = useState(initial.attachment_ext_limit !== false);
|
||
const [exts, setExts] = useState<string[]>(() => [...(initial.attachment_exts || [])]);
|
||
const [savedExts, setSavedExts] = useState<string[]>(() => [...(initial.attachment_exts || [])]);
|
||
const [attMaxMB, setAttMaxMB] = useState(initial.attachment_max_mb || 20);
|
||
const [attMaxCount, setAttMaxCount] = useState(initial.attachment_max_count || 10);
|
||
const [imageMaxMB, setImageMaxMB] = useState(initial.image_max_mb || 5);
|
||
const [togglingExtLimit, setTogglingExtLimit] = useState(false);
|
||
const [savingLimits, setSavingLimits] = useState(false);
|
||
const [savingExts, setSavingExts] = useState(false);
|
||
|
||
const dirty = siteName.trim() !== savedName || siteDescription.trim() !== savedDesc;
|
||
const extsDirty = useMemo(() => !extsEqual(exts, savedExts), [exts, savedExts]);
|
||
|
||
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 toggleMessages = async () => {
|
||
if (togglingMessages) return;
|
||
const next = !allowMessages;
|
||
setTogglingMessages(true);
|
||
try {
|
||
const res = await apiUpdateSiteSettings({ allow_messages: next });
|
||
setAllowMessages(res.allow_messages);
|
||
toast(res.allow_messages ? "已开放消息" : "已关闭消息", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setTogglingMessages(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);
|
||
}
|
||
};
|
||
|
||
const toggleExtLimit = async () => {
|
||
if (togglingExtLimit) return;
|
||
const next = !extLimit;
|
||
setTogglingExtLimit(true);
|
||
try {
|
||
const res = await apiUpdateSiteSettings({ attachment_ext_limit: next });
|
||
setExtLimit(res.attachment_ext_limit !== false);
|
||
toast(res.attachment_ext_limit !== false ? "已开启附件类型限制" : "已关闭附件类型限制", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setTogglingExtLimit(false);
|
||
}
|
||
};
|
||
|
||
const saveUploadLimits = async (patch: {
|
||
attachment_max_mb?: number;
|
||
attachment_max_count?: number;
|
||
image_max_mb?: number;
|
||
}) => {
|
||
if (savingLimits) return;
|
||
setSavingLimits(true);
|
||
try {
|
||
const res = await apiUpdateSiteSettings(patch);
|
||
setAttMaxMB(res.attachment_max_mb);
|
||
setAttMaxCount(res.attachment_max_count);
|
||
setImageMaxMB(res.image_max_mb);
|
||
toast("上传限额已保存", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setSavingLimits(false);
|
||
}
|
||
};
|
||
|
||
// 步进器手输会连续触发 onChange,防抖后再写库
|
||
const limitsTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||
const scheduleLimitSave = (patch: {
|
||
attachment_max_mb?: number;
|
||
attachment_max_count?: number;
|
||
image_max_mb?: number;
|
||
}) => {
|
||
if (limitsTimer.current) clearTimeout(limitsTimer.current);
|
||
limitsTimer.current = setTimeout(() => {
|
||
void saveUploadLimits(patch);
|
||
}, 450);
|
||
};
|
||
|
||
useEffect(() => {
|
||
return () => {
|
||
if (limitsTimer.current) clearTimeout(limitsTimer.current);
|
||
};
|
||
}, []);
|
||
|
||
const saveExts = async () => {
|
||
if (savingExts || !extsDirty) return;
|
||
setSavingExts(true);
|
||
try {
|
||
const res = await apiUpdateSiteSettings({ attachment_exts: exts });
|
||
setExts([...res.attachment_exts]);
|
||
setSavedExts([...res.attachment_exts]);
|
||
toast("附件扩展名已保存", "ok");
|
||
} catch (e) {
|
||
toast(e instanceof Error ? e.message : "保存失败");
|
||
} finally {
|
||
setSavingExts(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 flex flex-col gap-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
|
||
bordered
|
||
title={
|
||
<>
|
||
<MessagesSquare size={15} /> 开放消息
|
||
</>
|
||
}
|
||
description="关闭后前台不展示私聊与群聊入口;已有会话由后台消息管理继续监管。"
|
||
control={
|
||
<AdminSwitch
|
||
checked={allowMessages}
|
||
disabled={togglingMessages}
|
||
onChange={() => void toggleMessages()}
|
||
label="开放消息"
|
||
/>
|
||
}
|
||
/>
|
||
<SwitchRow
|
||
title={
|
||
<>
|
||
<ExternalLink size={15} /> 外链新标签打开
|
||
</>
|
||
}
|
||
description="开启后,帖子与评论中的 Markdown 外链在新标签打开;关闭则当前页跳转。"
|
||
control={
|
||
<AdminSwitch
|
||
checked={postLinkNewTab}
|
||
disabled={togglingLink}
|
||
onChange={() => void togglePostLinkNewTab()}
|
||
label="外链新标签打开"
|
||
/>
|
||
}
|
||
/>
|
||
</AdminSection>
|
||
|
||
<AdminSection
|
||
title="附件与上传"
|
||
description="帖子附件限额、扩展名白名单与正文插图体积;改后经实时通道同步到发帖页"
|
||
>
|
||
<SwitchRow
|
||
bordered
|
||
title={
|
||
<>
|
||
<Paperclip size={15} /> 附件单文件上限
|
||
</>
|
||
}
|
||
description="发帖附件体积上限。过大可能拖垮进程,并须把反代 / Next 请求体上限调到不少于该值。"
|
||
control={
|
||
<AdminStepper
|
||
value={attMaxMB}
|
||
min={1}
|
||
max={999999}
|
||
unit="MB"
|
||
ariaLabel="附件单文件上限"
|
||
disabled={savingLimits}
|
||
onChange={(n) => {
|
||
setAttMaxMB(n);
|
||
scheduleLimitSave({ attachment_max_mb: n });
|
||
}}
|
||
/>
|
||
}
|
||
/>
|
||
{attMaxMB >= 50 ? (
|
||
<p className="j13-ext-warn !mt-0 !mb-3" role="status">
|
||
当前 ≥50MB:请确认服务器内存与反代 body 上限已同步调大,否则用户仍会先撞上网关 413。
|
||
</p>
|
||
) : null}
|
||
|
||
<SwitchRow
|
||
bordered
|
||
title={
|
||
<>
|
||
<Paperclip size={15} /> 每帖附件个数
|
||
</>
|
||
}
|
||
description="单帖(含草稿)最多可绑定的附件数量。"
|
||
control={
|
||
<AdminStepper
|
||
value={attMaxCount}
|
||
min={1}
|
||
max={20}
|
||
unit="个"
|
||
ariaLabel="每帖附件个数"
|
||
disabled={savingLimits}
|
||
onChange={(n) => {
|
||
setAttMaxCount(n);
|
||
scheduleLimitSave({ attachment_max_count: n });
|
||
}}
|
||
/>
|
||
}
|
||
/>
|
||
|
||
<SwitchRow
|
||
bordered
|
||
title={
|
||
<>
|
||
<ImageIcon size={15} /> 正文插图上限
|
||
</>
|
||
}
|
||
description="Markdown 拖拽/粘贴图片(仅 JPEG / PNG / WebP)。插图会在服务端解析头部。"
|
||
control={
|
||
<AdminStepper
|
||
value={imageMaxMB}
|
||
min={1}
|
||
max={999999}
|
||
unit="MB"
|
||
ariaLabel="正文插图上限"
|
||
disabled={savingLimits}
|
||
onChange={(n) => {
|
||
setImageMaxMB(n);
|
||
scheduleLimitSave({ image_max_mb: n });
|
||
}}
|
||
/>
|
||
}
|
||
/>
|
||
{imageMaxMB >= 10 ? (
|
||
<p className="j13-ext-warn !mt-0 !mb-3" role="status">
|
||
插图 ≥10MB:解码头部更耗内存,建议保持较小值。
|
||
</p>
|
||
) : null}
|
||
|
||
<SwitchRow
|
||
bordered
|
||
title={
|
||
<>
|
||
<Paperclip size={15} /> 限制附件扩展名
|
||
</>
|
||
}
|
||
description={
|
||
extLimit
|
||
? "仅允许下方列表中的扩展名;安装包 / 脚本 / 网页可按需保留。"
|
||
: "任意格式可传,仍受体积上限与下载沙箱约束。"
|
||
}
|
||
control={
|
||
<AdminSwitch
|
||
checked={extLimit}
|
||
disabled={togglingExtLimit}
|
||
onChange={() => void toggleExtLimit()}
|
||
label="限制附件扩展名"
|
||
/>
|
||
}
|
||
/>
|
||
|
||
<div className="pt-2">
|
||
<p className="text-[13.5px] font-medium mb-2" style={{ color: "var(--ink)" }}>
|
||
允许的扩展名
|
||
</p>
|
||
<AdminExtChipEditor
|
||
value={exts}
|
||
onChange={setExts}
|
||
disabled={!extLimit || savingExts}
|
||
/>
|
||
<div className="flex justify-end mt-3">
|
||
<button
|
||
type="button"
|
||
className="btn btn-primary btn-sm"
|
||
disabled={!extsDirty || savingExts || !extLimit}
|
||
onClick={() => void saveExts()}
|
||
>
|
||
{savingExts ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
|
||
保存扩展名
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
);
|
||
}
|