471 lines
18 KiB
TypeScript
471 lines
18 KiB
TypeScript
"use client";
|
|
|
|
import { useState, type ComponentType } from "react";
|
|
import { BookOpenCheck, Focus, ListOrdered, ListTree, Maximize2, ShieldCheck, Type, MessageSquare } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
import type { BooleanPageOptionKey, DocumentStats, PageFont, PageLayoutDensity, PageOptionsState } from "@/types/page-options";
|
|
import { DocumentTaskPanel } from "@/components/document-task-panel";
|
|
import { Button } from "@/components/ui/button";
|
|
import { useAppPreferencesStore, type ThemeMode } from "@/store/app-preferences";
|
|
|
|
type TabId = "page" | "custom" | "global";
|
|
|
|
const TABS: Array<{ id: TabId; label: string }> = [
|
|
{ id: "page", label: "页面选项" },
|
|
{ id: "custom", label: "自定义页面" },
|
|
{ id: "global", label: "全局选项" },
|
|
];
|
|
|
|
const OPTION_META: Record<
|
|
BooleanPageOptionKey,
|
|
{ label: string; description: string; icon: ComponentType<{ className?: string }> }
|
|
> = {
|
|
wideLayout: {
|
|
label: "自适应宽度",
|
|
description: "让编辑区域根据屏幕自动铺满",
|
|
icon: Maximize2,
|
|
},
|
|
smallText: {
|
|
label: "小字体",
|
|
description: "使用更紧凑的字号排版",
|
|
icon: Type,
|
|
},
|
|
showHeadingNumbers: {
|
|
label: "标题编号",
|
|
description: "自动为标题添加编号",
|
|
icon: ListOrdered,
|
|
},
|
|
showToc: {
|
|
label: "显示目录",
|
|
description: "在右侧展示目录导航",
|
|
icon: ListTree,
|
|
},
|
|
protectEditing: {
|
|
label: "编辑保护",
|
|
description: "保护内容避免误触修改",
|
|
icon: ShieldCheck,
|
|
},
|
|
showWordCount: {
|
|
label: "字数提示",
|
|
description: "实时展示字数和块统计",
|
|
icon: BookOpenCheck,
|
|
},
|
|
collapseBacklinks: {
|
|
label: "折叠反向引用",
|
|
description: "默认折叠页面底部的反向引用列表",
|
|
icon: Focus,
|
|
},
|
|
hideChildPages: {
|
|
label: "隐藏子页面",
|
|
description: "隐藏通过 /ym 创建的子页面块（不会删除内容）",
|
|
icon: Focus,
|
|
},
|
|
showBlockRefCount: {
|
|
label: "显示块引用数字",
|
|
description: "显示块被引用次数（当前为占位，后续补齐）",
|
|
icon: Focus,
|
|
},
|
|
};
|
|
|
|
const PAGE_OPTIONS: BooleanPageOptionKey[] = [
|
|
"wideLayout",
|
|
"smallText",
|
|
"showHeadingNumbers",
|
|
"showToc",
|
|
"protectEditing",
|
|
"showWordCount",
|
|
];
|
|
|
|
const CUSTOM_PAGE_OPTIONS: BooleanPageOptionKey[] = ["collapseBacklinks", "hideChildPages", "showBlockRefCount"];
|
|
|
|
interface PageOptionsSidebarProps {
|
|
documentId: string;
|
|
options: PageOptionsState;
|
|
stats?: DocumentStats;
|
|
onToggle: (key: BooleanPageOptionKey) => void;
|
|
onSetPageFont?: (font: PageFont) => void;
|
|
onSetLayoutDensity?: (density: PageLayoutDensity) => void;
|
|
onSetEmbedDefaultToCursor?: () => void;
|
|
onClearEmbedDefault?: () => void;
|
|
onExport: () => void;
|
|
onOpenHistory: () => void;
|
|
onOpenComments?: () => void;
|
|
onUndo?: () => void;
|
|
onRedo?: () => void;
|
|
onDeletePage?: () => void;
|
|
onOpenMoveEmbedPicker?: () => void;
|
|
onCopyPageLink?: (includeTitle: boolean) => void;
|
|
onCopyPageReference?: (mode: "inline" | "embed") => void;
|
|
onAddToTemplates?: () => void;
|
|
}
|
|
|
|
export function PageOptionsSidebar({
|
|
documentId,
|
|
options,
|
|
stats,
|
|
onToggle,
|
|
onSetPageFont,
|
|
onSetLayoutDensity,
|
|
onSetEmbedDefaultToCursor,
|
|
onClearEmbedDefault,
|
|
onExport,
|
|
onOpenHistory,
|
|
onOpenComments,
|
|
onUndo,
|
|
onRedo,
|
|
onDeletePage,
|
|
onOpenMoveEmbedPicker,
|
|
onCopyPageLink,
|
|
onCopyPageReference,
|
|
onAddToTemplates,
|
|
}: PageOptionsSidebarProps) {
|
|
const [activeTab, setActiveTab] = useState<TabId>("page");
|
|
const theme = useAppPreferencesStore((s) => s.theme);
|
|
const showStructure = useAppPreferencesStore((s) => s.showStructure);
|
|
const spellCheck = useAppPreferencesStore((s) => s.spellCheck);
|
|
const flightMode = useAppPreferencesStore((s) => s.flightMode);
|
|
const setTheme = useAppPreferencesStore((s) => s.setTheme);
|
|
const setShowStructure = useAppPreferencesStore((s) => s.setShowStructure);
|
|
const setSpellCheck = useAppPreferencesStore((s) => s.setSpellCheck);
|
|
const setFlightMode = useAppPreferencesStore((s) => s.setFlightMode);
|
|
|
|
return (
|
|
<aside className="flex h-full w-80 shrink-0 flex-col border-l border-[#f0f0f0] bg-white/95">
|
|
<div className="flex border-b border-[#f5f5f5]">
|
|
{TABS.map((tab) => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
className={cn(
|
|
"flex-1 border-b-2 px-4 py-3 text-sm font-medium text-gray-500",
|
|
activeTab === tab.id ? "border-[#2563eb] text-[#2563eb]" : "border-transparent hover:text-gray-700",
|
|
)}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto p-4">
|
|
{activeTab === "page" && (
|
|
<div className="space-y-4">
|
|
{options.showWordCount && stats && (
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">页面数据</div>
|
|
<div className="mt-3 grid grid-cols-3 gap-2 text-center text-xs text-gray-500">
|
|
<StatsCell label="字数" value={stats.wordCount} />
|
|
<StatsCell label="字符" value={stats.characterCount} />
|
|
<StatsCell label="块数" value={stats.blockCount} />
|
|
</div>
|
|
<div className="mt-3 grid grid-cols-2 gap-2 text-center text-xs text-gray-500">
|
|
<StatsCell label="待办总数" value={stats.todoTotal} />
|
|
<StatsCell label="已完成" value={stats.todoDone} />
|
|
</div>
|
|
</section>
|
|
)}
|
|
<OptionToggleGroup title="页面选项" optionKeys={PAGE_OPTIONS} options={options} onToggle={onToggle} />
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4 text-sm text-gray-600">
|
|
<div className="flex items-center justify-between">
|
|
<span className="font-semibold text-gray-800">页面操作</span>
|
|
<div className="flex gap-2">
|
|
<Button type="button" variant="outline" size="sm" onClick={onExport}>
|
|
导出
|
|
</Button>
|
|
<Button type="button" variant="outline" size="sm" onClick={onOpenHistory}>
|
|
历史
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={onOpenComments}
|
|
disabled={!onOpenComments}
|
|
title={onOpenComments ? "打开评论" : "评论功能未启用"}
|
|
>
|
|
<MessageSquare className="mr-1 h-4 w-4" />
|
|
评论
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<p className="mt-2 text-xs text-gray-400">导出最新快照或打开历史版本面板。</p>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4 text-sm text-gray-600">
|
|
<div className="text-sm font-semibold text-gray-800">快捷操作</div>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
<Button type="button" size="sm" variant="outline" onClick={onUndo} disabled={!onUndo}>
|
|
撤回
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={onRedo} disabled={!onRedo}>
|
|
重做
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onOpenMoveEmbedPicker}
|
|
disabled={!onOpenMoveEmbedPicker}
|
|
>
|
|
移动/嵌入到...
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={onAddToTemplates} disabled={!onAddToTemplates}>
|
|
添加为模板
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={() => onCopyPageLink?.(false)} disabled={!onCopyPageLink}>
|
|
复制页面链接
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={() => onCopyPageLink?.(true)} disabled={!onCopyPageLink}>
|
|
复制链接（带标题）
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={() => onCopyPageReference?.("inline")} disabled={!onCopyPageReference}>
|
|
行内页面引用
|
|
</Button>
|
|
<Button type="button" size="sm" variant="outline" onClick={() => onCopyPageReference?.("embed")} disabled={!onCopyPageReference}>
|
|
嵌入页面引用
|
|
</Button>
|
|
<Button type="button" size="sm" variant="destructive" onClick={onDeletePage} disabled={!onDeletePage}>
|
|
删除页面
|
|
</Button>
|
|
</div>
|
|
<p className="mt-2 text-xs text-gray-400">
|
|
提示：标题目录快捷键为 <span className="font-mono">Ctrl/Cmd + Shift + L</span>。
|
|
</p>
|
|
</section>
|
|
<DocumentTaskPanel documentId={documentId} />
|
|
</div>
|
|
)}
|
|
{activeTab === "custom" && (
|
|
<div className="space-y-5">
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">字体</div>
|
|
<p className="mt-1 text-xs text-gray-400">仅对当前页面生效。</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{([
|
|
{ id: "default", label: "默认" },
|
|
{ id: "song", label: "宋体" },
|
|
{ id: "kai", label: "楷体" },
|
|
] as Array<{ id: PageFont; label: string }>).map((item) => (
|
|
<Button
|
|
key={item.id}
|
|
type="button"
|
|
size="sm"
|
|
variant={options.pageFont === item.id ? "default" : "outline"}
|
|
onClick={() => onSetPageFont?.(item.id)}
|
|
disabled={!onSetPageFont}
|
|
>
|
|
{item.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">布局</div>
|
|
<p className="mt-1 text-xs text-gray-400">控制段落行高与标题间距。</p>
|
|
<div className="mt-3 flex flex-wrap gap-2">
|
|
{([
|
|
{ id: "compact", label: "紧凑" },
|
|
{ id: "normal", label: "默认" },
|
|
{ id: "spacious", label: "宽容" },
|
|
] as Array<{ id: PageLayoutDensity; label: string }>).map((item) => (
|
|
<Button
|
|
key={item.id}
|
|
type="button"
|
|
size="sm"
|
|
variant={options.layoutDensity === item.id ? "default" : "outline"}
|
|
onClick={() => onSetLayoutDensity?.(item.id)}
|
|
disabled={!onSetLayoutDensity}
|
|
>
|
|
{item.label}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<OptionToggleGroup title="反向链接" optionKeys={CUSTOM_PAGE_OPTIONS} options={options} onToggle={onToggle} />
|
|
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">嵌入默认位置</div>
|
|
<p className="mt-1 text-xs text-gray-400">
|
|
当其它页面/块“嵌入到...”当前页面时，默认插入到指定块之后。
|
|
</p>
|
|
<div className="mt-3 rounded-xl bg-[#f9fafc] px-3 py-2 text-xs text-gray-600">
|
|
当前：{options.embedDefaultBlockId ? options.embedDefaultBlockId : "未设置"}
|
|
</div>
|
|
<div className="mt-3 flex gap-2">
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onSetEmbedDefaultToCursor}
|
|
disabled={!onSetEmbedDefaultToCursor}
|
|
>
|
|
使用当前光标块
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
size="sm"
|
|
variant="outline"
|
|
onClick={onClearEmbedDefault}
|
|
disabled={!onClearEmbedDefault || !options.embedDefaultBlockId}
|
|
>
|
|
清除
|
|
</Button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4 text-xs text-gray-500">
|
|
<div className="text-sm font-semibold text-gray-800">更多自定义项（待补齐）</div>
|
|
<ul className="mt-2 list-disc space-y-1 pl-4">
|
|
<li>显示块引用数字：需要补齐“块被引用统计”数据源</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
)}
|
|
{activeTab === "global" && (
|
|
<div className="space-y-5">
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">辅助提示</div>
|
|
<PreferenceRow
|
|
title="显示块结构"
|
|
description="显示块级元素的结构边界（虚线框）。快捷键：Ctrl/Cmd + Shift + U。"
|
|
enabled={showStructure}
|
|
onToggle={() => setShowStructure(!showStructure)}
|
|
/>
|
|
<PreferenceRow
|
|
title="拼写检查"
|
|
description="控制编辑器的浏览器拼写检查（spellcheck）。"
|
|
enabled={spellCheck}
|
|
onToggle={() => setSpellCheck(!spellCheck)}
|
|
/>
|
|
</section>
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">风格</div>
|
|
<p className="mt-1 text-xs text-gray-400">Good Night（深色主题）与跟随系统。快捷键：Ctrl/Cmd + Alt/Opt + G。</p>
|
|
<div className="mt-3 flex gap-2">
|
|
{(["system", "light", "dark"] as ThemeMode[]).map((mode) => (
|
|
<Button
|
|
key={mode}
|
|
type="button"
|
|
size="sm"
|
|
variant={theme === mode ? "default" : "outline"}
|
|
onClick={() => setTheme(mode)}
|
|
>
|
|
{mode === "system" ? "跟随系统" : mode === "dark" ? "深色" : "浅色"}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="rounded-2xl border border-[#eef1f6] p-4">
|
|
<div className="text-sm font-semibold text-gray-800">其它</div>
|
|
<PreferenceRow
|
|
title="飞行模式"
|
|
description="开启后默认关闭 AI 面板的“联网”开关（避免误触外部网络）。"
|
|
enabled={flightMode}
|
|
onToggle={() => setFlightMode(!flightMode)}
|
|
/>
|
|
</section>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
function OptionToggleGroup({
|
|
title,
|
|
optionKeys,
|
|
options,
|
|
onToggle,
|
|
}: {
|
|
title: string;
|
|
optionKeys: BooleanPageOptionKey[];
|
|
options: PageOptionsState;
|
|
onToggle: (key: BooleanPageOptionKey) => void;
|
|
}) {
|
|
return (
|
|
<section>
|
|
<div className="text-xs font-semibold uppercase tracking-wide text-gray-400">{title}</div>
|
|
<div className="mt-3 space-y-2">
|
|
{optionKeys.map((key) => (
|
|
<OptionToggle key={key} optionKey={key} options={options} onToggle={onToggle} />
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function OptionToggle({
|
|
optionKey,
|
|
options,
|
|
onToggle,
|
|
}: {
|
|
optionKey: BooleanPageOptionKey;
|
|
options: PageOptionsState;
|
|
onToggle: (key: BooleanPageOptionKey) => void;
|
|
}) {
|
|
const meta = OPTION_META[optionKey];
|
|
const Icon = meta.icon;
|
|
const active = options[optionKey];
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-between rounded-2xl border border-transparent bg-[#f9fafc] px-3 py-2 text-left shadow-sm transition hover:border-[#dbe7ff]"
|
|
onClick={() => onToggle(optionKey)}
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<div
|
|
className={cn(
|
|
"rounded-xl border p-2",
|
|
active ? "border-[#cddfff] bg-[#eef4ff]" : "border-transparent bg-white",
|
|
)}
|
|
>
|
|
<Icon className={cn("h-4 w-4", active ? "text-[#2563eb]" : "text-gray-500")} />
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium text-gray-900">{meta.label}</div>
|
|
<div className="text-xs text-gray-400">{meta.description}</div>
|
|
</div>
|
|
</div>
|
|
<span className={cn("text-xs font-semibold", active ? "text-[#2563eb]" : "text-gray-400")}>
|
|
{active ? "已开启" : "已关闭"}
|
|
</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function StatsCell({ label, value }: { label: string; value: number }) {
|
|
return (
|
|
<div className="rounded-xl bg-white py-3 text-center shadow-sm">
|
|
<div className="text-xs text-gray-400">{label}</div>
|
|
<div className="mt-1 text-lg font-semibold text-gray-900">{value}</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function PreferenceRow({
|
|
title,
|
|
description,
|
|
enabled,
|
|
onToggle,
|
|
}: {
|
|
title: string;
|
|
description: string;
|
|
enabled: boolean;
|
|
onToggle: () => void;
|
|
}) {
|
|
return (
|
|
<div className="mt-3 flex items-start justify-between gap-3 rounded-xl bg-[#f9fafc] px-3 py-2">
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-gray-900">{title}</div>
|
|
<div className="text-xs text-gray-400">{description}</div>
|
|
</div>
|
|
<Button type="button" size="sm" variant={enabled ? "default" : "outline"} onClick={onToggle}>
|
|
{enabled ? "已开启" : "已关闭"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|