后台单页和公告改为正文优先编辑，保存与发布分开。
列表按列对照真实路径和状态，避免把 /p/ 前缀和发布操作混在一起。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -1,31 +1,24 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useRef, useState } from "react";
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { ArrowLeft, FileText } from "lucide-react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { ArrowLeft, Copy, ExternalLink, Loader2 } from "lucide-react";
|
||||
import {
|
||||
apiAdminCreateSitePage,
|
||||
apiAdminUpdateSitePage,
|
||||
type SitePage,
|
||||
type SitePageInput,
|
||||
} from "@/lib/api";
|
||||
import { sitePagePublicPath, sitePagePublicURL } from "@/lib/sitePagePath";
|
||||
import { toast } from "@/lib/toast";
|
||||
import MarkdownEditor from "@/components/MarkdownEditor";
|
||||
import {
|
||||
AdminField,
|
||||
AdminPageHeader,
|
||||
AdminSegmented,
|
||||
AdminSettingsActions,
|
||||
AdminSettingsGroup,
|
||||
AdminSettingsPage,
|
||||
AdminSettingsRow,
|
||||
AdminSwitch,
|
||||
} from "@/components/admin";
|
||||
import { AdminField, AdminSegmented, AdminStatusChip, AdminSwitch } from "@/components/admin";
|
||||
import ConfirmDialog from "@/components/ConfirmDialog";
|
||||
import useUnsavedGuard from "@/hooks/useUnsavedGuard";
|
||||
|
||||
type PublishKey = "published" | "draft";
|
||||
type StatusFilter = "all" | "published" | "draft";
|
||||
|
||||
type FormState = {
|
||||
slug: string;
|
||||
@@ -37,6 +30,16 @@ type FormState = {
|
||||
sort_order: number;
|
||||
};
|
||||
|
||||
type FieldErrors = {
|
||||
slug?: string;
|
||||
title?: string;
|
||||
content?: string;
|
||||
excerpt?: string;
|
||||
form?: string;
|
||||
};
|
||||
|
||||
const SLUG_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
|
||||
|
||||
function toForm(p?: SitePage | null): FormState {
|
||||
return {
|
||||
slug: p?.slug ?? "",
|
||||
@@ -61,14 +64,57 @@ function sameForm(a: FormState, b: FormState): boolean {
|
||||
);
|
||||
}
|
||||
|
||||
/** slug 仅允许小写字母数字与连字符 */
|
||||
function runeCount(s: string): number {
|
||||
return Array.from(s).length;
|
||||
}
|
||||
|
||||
function normalizeSlug(raw: string): string {
|
||||
return raw
|
||||
.trim()
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9-]+/g, "-")
|
||||
.replace(/-+/g, "-")
|
||||
.replace(/^-|-$/g, "");
|
||||
return raw.trim().toLowerCase();
|
||||
}
|
||||
|
||||
function validate(form: FormState): FieldErrors {
|
||||
const errors: FieldErrors = {};
|
||||
const slug = normalizeSlug(form.slug);
|
||||
if (!slug) errors.slug = "slug 不能为空";
|
||||
else if (slug.length > 64) errors.slug = "slug 不能超过 64 字符";
|
||||
else if (!SLUG_RE.test(slug)) errors.slug = "slug 仅允许小写字母、数字与连字符";
|
||||
|
||||
const title = form.title.trim();
|
||||
if (!title) errors.title = "标题不能为空";
|
||||
else if (runeCount(title) > 200) errors.title = "标题不能超过 200 字";
|
||||
|
||||
if (!form.content.trim()) errors.content = "内容不能为空";
|
||||
|
||||
if (runeCount(form.excerpt.trim()) > 300) errors.excerpt = "摘要不能超过 300 字";
|
||||
return errors;
|
||||
}
|
||||
|
||||
function errorsFromServer(msg: string): FieldErrors {
|
||||
if (msg.includes("slug")) return { slug: msg };
|
||||
if (msg.includes("标题")) return { title: msg };
|
||||
if (msg.includes("摘要")) return { excerpt: msg };
|
||||
if (msg.includes("内容") || msg.includes("隐藏")) return { content: msg };
|
||||
return { form: msg };
|
||||
}
|
||||
|
||||
function hasErrors(errors: FieldErrors): boolean {
|
||||
return Object.values(errors).some(Boolean);
|
||||
}
|
||||
|
||||
function readStatus(raw: string | null): StatusFilter {
|
||||
if (raw === "published" || raw === "draft") return raw;
|
||||
return "all";
|
||||
}
|
||||
|
||||
function listHref(status: StatusFilter): string {
|
||||
return status === "all" ? "/admin/pages" : `/admin/pages?status=${status}`;
|
||||
}
|
||||
|
||||
function primaryLabel(savedPublished: boolean | null, targetPublished: boolean): string {
|
||||
if (savedPublished !== true && !targetPublished) return "保存草稿";
|
||||
if (savedPublished !== true && targetPublished) return "发布页面";
|
||||
if (savedPublished && targetPublished) return "保存并更新";
|
||||
return "转为草稿";
|
||||
}
|
||||
|
||||
export default function PageComposeClient({
|
||||
@@ -79,13 +125,28 @@ export default function PageComposeClient({
|
||||
initial?: SitePage | null;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const baseline = useMemo(() => toForm(initial), [initial]);
|
||||
const [form, setForm] = useState<FormState>(baseline);
|
||||
const searchParams = useSearchParams();
|
||||
const status = readStatus(searchParams.get("status"));
|
||||
const backHref = listHref(status);
|
||||
const loaded = useMemo(() => toForm(initial), [initial]);
|
||||
const [baseline, setBaseline] = useState<FormState>(loaded);
|
||||
const [savedPage, setSavedPage] = useState<SitePage | null>(initial ?? null);
|
||||
const [form, setForm] = useState<FormState>(loaded);
|
||||
const formRef = useRef(form);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const isEdit = mode === "edit" && initial != null;
|
||||
const [errors, setErrors] = useState<FieldErrors>({});
|
||||
const [origin, setOrigin] = useState("");
|
||||
const [pendingSave, setPendingSave] = useState<{ slugChange: boolean; unpublish: boolean } | null>(
|
||||
null
|
||||
);
|
||||
const isEdit = mode === "edit" && savedPage != null;
|
||||
const dirty = !sameForm(form, baseline);
|
||||
const { leaveOpen, confirmLeave, cancelLeave } = useUnsavedGuard(dirty && !saving);
|
||||
const savedPublished = isEdit ? baseline.published : null;
|
||||
|
||||
useEffect(() => {
|
||||
setOrigin(window.location.origin);
|
||||
}, []);
|
||||
|
||||
const patchForm = (patch: Partial<FormState> | ((prev: FormState) => FormState)) => {
|
||||
setForm((prev) => {
|
||||
@@ -95,7 +156,11 @@ export default function PageComposeClient({
|
||||
});
|
||||
};
|
||||
|
||||
async function save() {
|
||||
const slugPreview = normalizeSlug(form.slug);
|
||||
const publicPath = sitePagePublicPath(slugPreview);
|
||||
const canViewOnline = savedPage?.published === true;
|
||||
|
||||
async function commit() {
|
||||
if (saving) return;
|
||||
const current = formRef.current;
|
||||
const slug = normalizeSlug(current.slug);
|
||||
@@ -108,146 +173,314 @@ export default function PageComposeClient({
|
||||
show_in_sidebar: current.show_in_sidebar,
|
||||
sort_order: current.sort_order,
|
||||
};
|
||||
if (!payload.slug || !payload.title || !payload.content) {
|
||||
toast("slug、标题和内容不能为空");
|
||||
return;
|
||||
}
|
||||
setSaving(true);
|
||||
setErrors({});
|
||||
try {
|
||||
if (isEdit) {
|
||||
await apiAdminUpdateSitePage(initial.id, payload);
|
||||
toast("页面已更新", "ok");
|
||||
if (isEdit && savedPage) {
|
||||
const res = await apiAdminUpdateSitePage(savedPage.id, payload);
|
||||
const page = res.page;
|
||||
const next = toForm(page);
|
||||
formRef.current = next;
|
||||
setForm(next);
|
||||
setBaseline(next);
|
||||
setSavedPage(page);
|
||||
const wasPublished = baseline.published;
|
||||
const nowPublished = page.published;
|
||||
const msg = !wasPublished && nowPublished
|
||||
? "页面已发布"
|
||||
: wasPublished && !nowPublished
|
||||
? "已转为草稿"
|
||||
: wasPublished
|
||||
? "页面已更新"
|
||||
: "草稿已保存";
|
||||
toast(msg, "ok");
|
||||
router.refresh();
|
||||
} else {
|
||||
await apiAdminCreateSitePage(payload);
|
||||
const res = await apiAdminCreateSitePage(payload);
|
||||
toast(payload.published ? "页面已发布" : "草稿已保存", "ok");
|
||||
const id = res.page?.id;
|
||||
if (id) {
|
||||
const q = status === "all" ? "" : `?status=${status}`;
|
||||
router.replace(`/admin/pages/${id}/edit${q}`);
|
||||
} else {
|
||||
router.push(backHref);
|
||||
}
|
||||
router.refresh();
|
||||
}
|
||||
router.push("/admin/pages");
|
||||
router.refresh();
|
||||
} catch (e) {
|
||||
toast(e instanceof Error ? e.message : "保存失败");
|
||||
const msg = e instanceof Error ? e.message : "保存失败";
|
||||
setErrors(errorsFromServer(msg));
|
||||
toast(msg);
|
||||
} finally {
|
||||
setSaving(false);
|
||||
setPendingSave(null);
|
||||
}
|
||||
}
|
||||
|
||||
const saveLabel = isEdit ? "保存修改" : form.published ? "发布页面" : "保存草稿";
|
||||
function requestSave() {
|
||||
if (saving) return;
|
||||
const current = formRef.current;
|
||||
const nextErrors = validate(current);
|
||||
if (hasErrors(nextErrors)) {
|
||||
setErrors(nextErrors);
|
||||
toast("请先修正标出的字段");
|
||||
return;
|
||||
}
|
||||
const slug = normalizeSlug(current.slug);
|
||||
const slugChange = isEdit && baseline.published && slug !== baseline.slug;
|
||||
const unpublish = isEdit && baseline.published && !current.published;
|
||||
if (slugChange || unpublish) {
|
||||
setPendingSave({ slugChange, unpublish });
|
||||
return;
|
||||
}
|
||||
void commit();
|
||||
}
|
||||
|
||||
function discard() {
|
||||
formRef.current = baseline;
|
||||
setForm(baseline);
|
||||
setErrors({});
|
||||
}
|
||||
|
||||
async function copyAddress() {
|
||||
const slug = normalizeSlug(formRef.current.slug);
|
||||
const nextErrors = validate({ ...formRef.current, slug });
|
||||
if (nextErrors.slug) {
|
||||
setErrors((prev) => ({ ...prev, slug: nextErrors.slug }));
|
||||
return;
|
||||
}
|
||||
const url = sitePagePublicURL(origin || window.location.origin, slug);
|
||||
try {
|
||||
await navigator.clipboard.writeText(url);
|
||||
toast("已复制访问地址", "ok");
|
||||
} catch {
|
||||
toast("复制失败");
|
||||
}
|
||||
}
|
||||
|
||||
const saveLabel = primaryLabel(savedPublished, form.published);
|
||||
const statusText = saving
|
||||
? "正在保存…"
|
||||
: errors.form
|
||||
? errors.form
|
||||
: dirty
|
||||
? "有未保存的修改"
|
||||
: isEdit
|
||||
? "已保存"
|
||||
: "尚未保存";
|
||||
|
||||
const confirmBits: string[] = [];
|
||||
if (pendingSave?.unpublish) {
|
||||
confirmBits.push(
|
||||
"转为草稿后，前台将无法打开此页。这里没有单独的修订版本，线上内容会一起下线，不会保留旧版。"
|
||||
);
|
||||
}
|
||||
if (pendingSave?.slugChange) {
|
||||
confirmBits.push(
|
||||
`访问地址将从 ${sitePagePublicPath(baseline.slug)} 改为 ${sitePagePublicPath(normalizeSlug(form.slug))}。系统不会把旧地址转到新地址，已经分享的旧链接会打不开。`
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AdminSettingsPage className="is-fill">
|
||||
<AdminPageHeader
|
||||
icon={FileText}
|
||||
title={isEdit ? "编辑单页" : "新建单页"}
|
||||
description="关于本站、隐私政策等 Markdown 单页；可展示在首页右栏。"
|
||||
actions={
|
||||
<Link href="/admin/pages" className="btn btn-line btn-sm">
|
||||
<ArrowLeft size={14} /> 返回列表
|
||||
<div className="admin-doc-page admin-doc-editor">
|
||||
<header className="admin-doc-head">
|
||||
<div className="min-w-0">
|
||||
<Link href={backHref} className="admin-doc-back">
|
||||
<ArrowLeft size={14} aria-hidden /> 返回列表
|
||||
</Link>
|
||||
}
|
||||
/>
|
||||
<div className="admin-doc-head-title">
|
||||
<h1>{isEdit ? "编辑单页" : "新建单页"}</h1>
|
||||
<AdminStatusChip tone={savedPublished ? "ok" : savedPublished === false ? "warn" : "accent"}>
|
||||
{savedPublished ? "已发布" : savedPublished === false ? "草稿" : "尚未保存"}
|
||||
</AdminStatusChip>
|
||||
</div>
|
||||
</div>
|
||||
{canViewOnline && savedPage ? (
|
||||
<a
|
||||
href={sitePagePublicPath(savedPage.slug)}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn btn-line"
|
||||
title="打开已发布内容。未保存的修改不会出现在这里。"
|
||||
>
|
||||
<ExternalLink size={14} aria-hidden /> 查看线上页面
|
||||
</a>
|
||||
) : null}
|
||||
</header>
|
||||
|
||||
<div className="admin-settings-main admin-settings-stack">
|
||||
<AdminSettingsGroup title="页面设置" description="slug 写入后即是前台地址 /p/…">
|
||||
<AdminSettingsRow label="URL slug" htmlFor="page-slug" hint="/p/ 后的路径">
|
||||
<div className="admin-settings-control-text flex items-center gap-1.5 min-w-0">
|
||||
<span className="meta text-[13px] shrink-0">/p/</span>
|
||||
<div className="admin-field-shell min-w-0 flex-1">
|
||||
<div className="admin-doc-split">
|
||||
<div className="admin-doc-main">
|
||||
<AdminField
|
||||
id="page-title"
|
||||
label="标题"
|
||||
maxLength={200}
|
||||
value={form.title}
|
||||
error={errors.title}
|
||||
onChange={(title) => {
|
||||
setErrors((prev) => ({ ...prev, title: undefined }));
|
||||
patchForm({ title });
|
||||
}}
|
||||
placeholder="页面标题"
|
||||
/>
|
||||
<div className="admin-doc-md">
|
||||
<label className="admin-doc-label" htmlFor="page-content">
|
||||
正文
|
||||
</label>
|
||||
<MarkdownEditor
|
||||
id="page-content"
|
||||
value={form.content}
|
||||
onChange={(content) => {
|
||||
setErrors((prev) => ({ ...prev, content: undefined }));
|
||||
patchForm({ content });
|
||||
}}
|
||||
allowHide={false}
|
||||
placeholder="请输入页面正文，支持 Markdown…"
|
||||
rows={16}
|
||||
onSubmitShortcut={requestSave}
|
||||
/>
|
||||
{errors.content ? (
|
||||
<p className="admin-settings-row-error" role="alert">
|
||||
{errors.content}
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details className="admin-doc-rail" open>
|
||||
<summary>页面设置</summary>
|
||||
<div className="admin-doc-rail-body">
|
||||
<div className="admin-doc-field">
|
||||
<label className="admin-doc-label" htmlFor="page-slug">
|
||||
访问地址
|
||||
</label>
|
||||
<div className={`admin-doc-slug${errors.slug ? " is-invalid" : ""}`}>
|
||||
<span className="admin-doc-slug-prefix">/p/</span>
|
||||
<input
|
||||
id="page-slug"
|
||||
className="admin-field-input font-mono text-[13px]"
|
||||
className="admin-doc-slug-input"
|
||||
maxLength={64}
|
||||
value={form.slug}
|
||||
onChange={(e) => patchForm({ slug: e.target.value })}
|
||||
aria-invalid={errors.slug ? true : undefined}
|
||||
aria-describedby="page-slug-hint"
|
||||
autoCapitalize="none"
|
||||
autoCorrect="off"
|
||||
spellCheck={false}
|
||||
onChange={(e) => {
|
||||
setErrors((prev) => ({ ...prev, slug: undefined }));
|
||||
patchForm({ slug: e.target.value });
|
||||
}}
|
||||
onBlur={() => patchForm((f) => ({ ...f, slug: normalizeSlug(f.slug) }))}
|
||||
placeholder="about"
|
||||
/>
|
||||
</div>
|
||||
<p className="admin-doc-hint" id="page-slug-hint">
|
||||
完整路径 {publicPath || "/p/"}。小写字母、数字和连字符，最多 64 字符。
|
||||
{origin && slugPreview ? ` 线上地址 ${sitePagePublicURL(origin, slugPreview)}` : ""}
|
||||
</p>
|
||||
{isEdit && baseline.published && slugPreview !== baseline.slug ? (
|
||||
<p className="admin-doc-hint">保存后访问地址会改变。旧链接不会自动跳转。</p>
|
||||
) : null}
|
||||
{errors.slug ? (
|
||||
<p className="admin-settings-row-error" role="alert">
|
||||
{errors.slug}
|
||||
</p>
|
||||
) : null}
|
||||
<button type="button" className="btn btn-line admin-doc-copy" onClick={() => void copyAddress()}>
|
||||
<Copy size={14} aria-hidden /> 复制地址
|
||||
</button>
|
||||
</div>
|
||||
</AdminSettingsRow>
|
||||
<AdminSettingsRow label="摘要" htmlFor="page-excerpt" hintBelow="侧栏「关于本站」使用这一句" wide>
|
||||
|
||||
<AdminField
|
||||
id="page-excerpt"
|
||||
label="摘要"
|
||||
embed
|
||||
hint="用于首页侧栏「关于本站」、关于本站导航和单页页眉。未填写时这些位置不显示简介。"
|
||||
as="textarea"
|
||||
className="admin-settings-control-long"
|
||||
maxLength={300}
|
||||
minHeight="4.5rem"
|
||||
minHeight="5.5rem"
|
||||
value={form.excerpt}
|
||||
onChange={(excerpt) => patchForm({ excerpt })}
|
||||
placeholder="一句话介绍本页…"
|
||||
/>
|
||||
</AdminSettingsRow>
|
||||
<AdminSettingsRow label="排序" htmlFor="page-sort" hintBelow="数字越小越靠前">
|
||||
<input
|
||||
id="page-sort"
|
||||
type="number"
|
||||
className="j13-compose-field admin-settings-control-num"
|
||||
value={form.sort_order}
|
||||
onChange={(e) => patchForm({ sort_order: parseInt(e.target.value, 10) || 0 })}
|
||||
/>
|
||||
</AdminSettingsRow>
|
||||
<AdminSettingsRow label="发布状态">
|
||||
<AdminSegmented<PublishKey>
|
||||
role="group"
|
||||
ariaLabel="发布状态"
|
||||
value={form.published ? "published" : "draft"}
|
||||
onChange={(key) => patchForm({ published: key === "published" })}
|
||||
options={[
|
||||
{ key: "published", label: "立即发布" },
|
||||
{ key: "draft", label: "存为草稿" },
|
||||
]}
|
||||
/>
|
||||
</AdminSettingsRow>
|
||||
<AdminSettingsRow label="首页侧栏" hintBelow="开启后出现在「关于本站」模块">
|
||||
<AdminSwitch
|
||||
checked={form.show_in_sidebar}
|
||||
onChange={() => patchForm((f) => ({ ...f, show_in_sidebar: !f.show_in_sidebar }))}
|
||||
label="显示在首页侧栏"
|
||||
/>
|
||||
</AdminSettingsRow>
|
||||
</AdminSettingsGroup>
|
||||
|
||||
<AdminSettingsGroup
|
||||
className="is-fill"
|
||||
title="标题与正文"
|
||||
footer={
|
||||
<AdminSettingsActions
|
||||
dirty={dirty}
|
||||
saving={saving}
|
||||
saveLabel={saveLabel}
|
||||
onSave={() => void save()}
|
||||
onDiscard={() => {
|
||||
formRef.current = baseline;
|
||||
setForm(baseline);
|
||||
error={errors.excerpt}
|
||||
onChange={(excerpt) => {
|
||||
setErrors((prev) => ({ ...prev, excerpt: undefined }));
|
||||
patchForm({ excerpt });
|
||||
}}
|
||||
placeholder="一句话介绍本页"
|
||||
/>
|
||||
}
|
||||
>
|
||||
<AdminSettingsRow label="标题" htmlFor="page-title" wide>
|
||||
<AdminField
|
||||
id="page-title"
|
||||
label="标题"
|
||||
embed
|
||||
maxLength={200}
|
||||
value={form.title}
|
||||
onChange={(title) => patchForm({ title })}
|
||||
placeholder="页面标题"
|
||||
/>
|
||||
</AdminSettingsRow>
|
||||
<AdminSettingsRow className="admin-settings-md-editor" label="正文" htmlFor="page-content" wide>
|
||||
<div className="admin-settings-md">
|
||||
<MarkdownEditor
|
||||
id="page-content"
|
||||
value={form.content}
|
||||
onChange={(content) => patchForm({ content })}
|
||||
allowHide={false}
|
||||
placeholder="请输入页面正文，支持 Markdown…"
|
||||
rows={18}
|
||||
onSubmitShortcut={() => void save()}
|
||||
/>
|
||||
|
||||
<div className="admin-doc-field">
|
||||
<p className="admin-doc-label">展示位置</p>
|
||||
<div className="admin-doc-switchline">
|
||||
<AdminSwitch
|
||||
checked={form.show_in_sidebar}
|
||||
onChange={() => patchForm((f) => ({ ...f, show_in_sidebar: !f.show_in_sidebar }))}
|
||||
label="显示在首页侧栏"
|
||||
/>
|
||||
<span>显示在首页侧栏</span>
|
||||
</div>
|
||||
<p className="admin-doc-hint">
|
||||
已发布且开启后，出现在首页右栏「关于本站」。草稿即使开启也不会出现。已发布的单页不会自动进入侧栏。
|
||||
</p>
|
||||
</div>
|
||||
</AdminSettingsRow>
|
||||
</AdminSettingsGroup>
|
||||
|
||||
<div className="admin-doc-field">
|
||||
<label className="admin-doc-label" htmlFor="page-sort">
|
||||
排序
|
||||
</label>
|
||||
<input
|
||||
id="page-sort"
|
||||
type="number"
|
||||
className="admin-doc-number"
|
||||
value={form.sort_order}
|
||||
onChange={(e) => {
|
||||
const n = Number.parseInt(e.target.value, 10);
|
||||
patchForm({ sort_order: Number.isNaN(n) ? 0 : n });
|
||||
}}
|
||||
/>
|
||||
<p className="admin-doc-hint">数字越小越靠前，可以为负数。</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-doc-field">
|
||||
<p className="admin-doc-label">保存后状态</p>
|
||||
<AdminSegmented<PublishKey>
|
||||
role="group"
|
||||
ariaLabel="保存后状态"
|
||||
size="sm"
|
||||
value={form.published ? "published" : "draft"}
|
||||
onChange={(key) => patchForm({ published: key === "published" })}
|
||||
options={[
|
||||
{ key: "draft", label: "草稿" },
|
||||
{ key: "published", label: "已发布" },
|
||||
]}
|
||||
/>
|
||||
<p className="admin-doc-hint">点选只改变这次要保存的状态，不会立刻发布或下线。</p>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div className="admin-doc-actions" aria-busy={saving || undefined}>
|
||||
<div className="admin-doc-actions-btns">
|
||||
<button type="button" className="btn btn-line" disabled={!dirty || saving} onClick={discard}>
|
||||
撤销修改
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary"
|
||||
disabled={!dirty || saving}
|
||||
onClick={requestSave}
|
||||
>
|
||||
{saving ? <Loader2 size={15} className="animate-spin" aria-hidden /> : null}
|
||||
{saving ? "保存中…" : saveLabel}
|
||||
</button>
|
||||
<p className={`admin-doc-status${errors.form ? " is-error" : ""}`} aria-live="polite">
|
||||
{statusText}
|
||||
</p>
|
||||
</div>
|
||||
<p className="admin-doc-hint">一次保存会写入标题、正文和页面设置。Ctrl/⌘ + Enter 与这个按钮相同。</p>
|
||||
{canViewOnline ? (
|
||||
<p className="admin-doc-hint">查看线上页面打开的是已发布内容，未保存的修改不会出现在那里。</p>
|
||||
) : (
|
||||
<p className="admin-doc-hint">草稿没有公开地址。要看正文，用编辑器里的预览。</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ConfirmDialog
|
||||
@@ -259,6 +492,16 @@ export default function PageComposeClient({
|
||||
onCancel={cancelLeave}
|
||||
onConfirm={confirmLeave}
|
||||
/>
|
||||
</AdminSettingsPage>
|
||||
<ConfirmDialog
|
||||
open={pendingSave != null}
|
||||
title={pendingSave?.unpublish ? "转为草稿" : "访问地址将变化"}
|
||||
message={confirmBits.join(" ")}
|
||||
confirmLabel={pendingSave?.unpublish ? "转为草稿" : "仍然保存"}
|
||||
danger={!!pendingSave?.unpublish}
|
||||
busy={saving}
|
||||
onCancel={() => saving || setPendingSave(null)}
|
||||
onConfirm={() => void commit()}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user