feat(settings): 后台可配置 Markdown 代码块自动折叠与阈值行数
支持开关与 0–100 行阈值(0 为无预览),经站点设置与 WS 热更新;短代码在视口内收起时不再回滚浏览位置。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
import { useState } from "react";
|
||||
import {
|
||||
Code2,
|
||||
Globe,
|
||||
Loader2,
|
||||
Save,
|
||||
@@ -47,13 +48,25 @@ 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 [codeAutoFold, setCodeAutoFold] = useState(
|
||||
initial.code_block_auto_fold !== false
|
||||
);
|
||||
const [foldLines, setFoldLines] = useState(
|
||||
Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
|
||||
);
|
||||
const [savedFoldLines, setSavedFoldLines] = useState(
|
||||
Number.isFinite(initial.code_block_fold_lines) ? initial.code_block_fold_lines : 5
|
||||
);
|
||||
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 [togglingFold, setTogglingFold] = useState(false);
|
||||
const [savingFoldLines, setSavingFoldLines] = useState(false);
|
||||
|
||||
const dirty =
|
||||
siteName.trim() !== savedName || siteDescription.trim() !== savedDesc;
|
||||
const foldLinesDirty = foldLines !== savedFoldLines;
|
||||
|
||||
const saveIdentity = async () => {
|
||||
if (saving) return;
|
||||
@@ -95,6 +108,49 @@ export default function SettingsAdmin({ initial }: { initial: PublicSettings })
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const toggleCodeFold = async () => {
|
||||
if (togglingFold) return;
|
||||
const next = !codeAutoFold;
|
||||
setTogglingFold(true);
|
||||
try {
|
||||
const res = await apiUpdateSiteSettings({ code_block_auto_fold: next });
|
||||
setCodeAutoFold(res.code_block_auto_fold);
|
||||
toast(
|
||||
res.code_block_auto_fold
|
||||
? `已开启代码块自动折叠(超过 ${res.code_block_fold_lines} 行)`
|
||||
: "已关闭代码块自动折叠",
|
||||
"ok"
|
||||
);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "保存失败");
|
||||
} finally {
|
||||
setTogglingFold(false);
|
||||
}
|
||||
};
|
||||
|
||||
const saveFoldLines = async () => {
|
||||
if (savingFoldLines) return;
|
||||
const raw = Math.round(Number(foldLines));
|
||||
const n = Number.isFinite(raw) ? Math.max(0, Math.min(100, raw)) : 5;
|
||||
setSavingFoldLines(true);
|
||||
try {
|
||||
const res = await apiUpdateSiteSettings({ code_block_fold_lines: n });
|
||||
setFoldLines(res.code_block_fold_lines);
|
||||
setSavedFoldLines(res.code_block_fold_lines);
|
||||
toast(
|
||||
res.code_block_fold_lines === 0
|
||||
? "折叠预览已设为 0 行(无预览)"
|
||||
: `折叠阈值已设为超过 ${res.code_block_fold_lines} 行`,
|
||||
"ok"
|
||||
);
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "保存失败");
|
||||
} finally {
|
||||
setSavingFoldLines(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div className="mb-5">
|
||||
@@ -174,6 +230,62 @@ export default function SettingsAdmin({ initial }: { initial: PublicSettings })
|
||||
label="开放注册"
|
||||
/>
|
||||
</section>
|
||||
|
||||
|
||||
<section className="j13-module p-5 sm:p-6 mb-5">
|
||||
<div className="flex items-start justify-between gap-4 flex-wrap">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h2 className="text-[15px] font-semibold flex items-center gap-1.5" style={{ color: "var(--ink)" }}>
|
||||
<Code2 size={15} /> 代码块自动折叠
|
||||
</h2>
|
||||
<p className="meta text-[12.5px] mt-1 leading-relaxed">
|
||||
开启后,帖子与评论中超过阈值行数的 Markdown 代码块默认折叠,读者可点「展开全部」。关闭则始终完整展示。
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={codeAutoFold}
|
||||
disabled={togglingFold}
|
||||
onChange={() => void toggleCodeFold()}
|
||||
label="代码块自动折叠"
|
||||
/>
|
||||
</div>
|
||||
{codeAutoFold ? (
|
||||
<div className="mt-4 pt-4 border-t border-[var(--line)]">
|
||||
<label className="field-label" htmlFor="fold-lines">
|
||||
折叠行数阈值
|
||||
</label>
|
||||
<p className="meta text-[12.5px] mb-2.5 leading-relaxed">
|
||||
代码块行数超过该值时折叠;折叠后约露出同样行数。设为 0 表示无预览。范围 0–100,默认 5。
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center gap-2.5">
|
||||
<input
|
||||
id="fold-lines"
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
className="field w-24"
|
||||
value={foldLines}
|
||||
onChange={(e) => setFoldLines(Number(e.target.value))}
|
||||
aria-label="折叠行数阈值"
|
||||
/>
|
||||
<span className="meta text-[12.5px]">行</span>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-line btn-sm"
|
||||
disabled={!foldLinesDirty || savingFoldLines}
|
||||
onClick={() => void saveFoldLines()}
|
||||
>
|
||||
{savingFoldLines ? (
|
||||
<Loader2 size={14} className="animate-spin" />
|
||||
) : (
|
||||
<Save size={14} />
|
||||
)}
|
||||
保存
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ import TipHost from "@/components/TipHost";
|
||||
import AccountGuard from "@/components/AccountGuard";
|
||||
import ThemeSync from "@/components/ThemeSync";
|
||||
import RealtimeProvider from "@/components/RealtimeProvider";
|
||||
import CodeFoldProvider from "@/components/markdown/CodeFoldProvider";
|
||||
import type { User } from "@/lib/api";
|
||||
import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
|
||||
import { TOKEN_COOKIE, authCookieHeader } from "@/lib/cookies";
|
||||
@@ -115,7 +116,12 @@ export default async function RootLayout({
|
||||
tabIndex={-1}
|
||||
className="flex-1 w-full max-w-[1440px] mx-auto px-4 sm:px-6 py-7 sm:py-9 outline-none"
|
||||
>
|
||||
{children}
|
||||
<CodeFoldProvider
|
||||
initialEnabled={settings.code_block_auto_fold}
|
||||
initialFoldLines={settings.code_block_fold_lines}
|
||||
>
|
||||
{children}
|
||||
</CodeFoldProvider>
|
||||
</main>
|
||||
<Footer siteName={settings.site_name} />
|
||||
<Toaster />
|
||||
|
||||
Reference in New Issue
Block a user