512 lines
17 KiB
TypeScript
512 lines
17 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useEffect, useMemo, useState } from 'react';
|
|||
|
|
import useSWR from 'swr';
|
|||
|
|
import { Plus, Pencil, Trash2, Folder, FileText, Loader2 } from 'lucide-react';
|
|||
|
|
import { AdminHeader } from '@/components/admin/AdminHeader';
|
|||
|
|
import { TableToolbar } from '@/components/admin/TableToolbar';
|
|||
|
|
import {
|
|||
|
|
Table,
|
|||
|
|
TableBody,
|
|||
|
|
TableCell,
|
|||
|
|
TableHead,
|
|||
|
|
TableHeader,
|
|||
|
|
TableRow,
|
|||
|
|
} from '@/components/ui/table';
|
|||
|
|
import { Button } from '@/components/ui/button';
|
|||
|
|
import { Input } from '@/components/ui/input';
|
|||
|
|
import { Label } from '@/components/ui/label';
|
|||
|
|
import { Textarea } from '@/components/ui/textarea';
|
|||
|
|
import { Badge } from '@/components/ui/badge';
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogFooter,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
} from '@/components/ui/dialog';
|
|||
|
|
import { RichEditor } from '@/components/admin/RichEditor';
|
|||
|
|
import { MarkdownImport } from '@/components/admin/MarkdownImport';
|
|||
|
|
import { adminApi } from '@/lib/admin-services';
|
|||
|
|
import { useAdminStore } from '@/store/adminStore';
|
|||
|
|
import { cn } from '@/lib/utils';
|
|||
|
|
import { isHTMLContent } from '@/lib/content';
|
|||
|
|
import type { Manual, ManualContentFormat, ManualNodeType, ManualTreeNode } from '@/lib/types';
|
|||
|
|
|
|||
|
|
type ContentMode = 'rich' | 'markdown';
|
|||
|
|
|
|||
|
|
interface FormState {
|
|||
|
|
parentId: number | null;
|
|||
|
|
title: string;
|
|||
|
|
type: ManualNodeType;
|
|||
|
|
content: string;
|
|||
|
|
sort: number;
|
|||
|
|
isShow: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const FORM_DEFAULT: FormState = {
|
|||
|
|
parentId: null,
|
|||
|
|
title: '',
|
|||
|
|
type: 1,
|
|||
|
|
content: '',
|
|||
|
|
sort: 0,
|
|||
|
|
isShow: 1,
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
/** 将树形结构展平为带缩进层级的列表，便于在表格中展示 */
|
|||
|
|
interface FlatRow extends Manual {
|
|||
|
|
_depth: number;
|
|||
|
|
}
|
|||
|
|
function flattenTree(nodes: ManualTreeNode[], depth = 0, acc: FlatRow[] = []): FlatRow[] {
|
|||
|
|
for (const n of nodes) {
|
|||
|
|
acc.push({
|
|||
|
|
id: n.id,
|
|||
|
|
parentId: n.parentId,
|
|||
|
|
title: n.title,
|
|||
|
|
type: n.type,
|
|||
|
|
content: null,
|
|||
|
|
contentFormat: 'html',
|
|||
|
|
sort: n.sort,
|
|||
|
|
isShow: n.isShow,
|
|||
|
|
createdAt: '',
|
|||
|
|
updatedAt: '',
|
|||
|
|
_depth: depth,
|
|||
|
|
});
|
|||
|
|
if (n.children.length > 0) {
|
|||
|
|
flattenTree(n.children, depth + 1, acc);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return acc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/** 生成父节点下拉的缩进选项（排除 selfId 及其子孙） */
|
|||
|
|
function buildParentOptions(
|
|||
|
|
nodes: ManualTreeNode[],
|
|||
|
|
selfId: number | null,
|
|||
|
|
): { id: number; label: string; depth: number }[] {
|
|||
|
|
const options: { id: number; label: string; depth: number }[] = [];
|
|||
|
|
const walk = (list: ManualTreeNode[], depth: number) => {
|
|||
|
|
for (const n of list) {
|
|||
|
|
if (n.id === selfId) continue;
|
|||
|
|
options.push({ id: n.id, label: n.title, depth });
|
|||
|
|
if (n.children.length > 0) walk(n.children, depth + 1);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
walk(nodes, 0);
|
|||
|
|
return options;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function ManualAdminPage() {
|
|||
|
|
const [hydrated, setHydrated] = useState(false);
|
|||
|
|
const [keyword, setKeyword] = useState('');
|
|||
|
|
const [searchKw, setSearchKw] = useState('');
|
|||
|
|
const [open, setOpen] = useState(false);
|
|||
|
|
const [editId, setEditId] = useState<number | null>(null);
|
|||
|
|
const [saving, setSaving] = useState(false);
|
|||
|
|
const [contentMode, setContentMode] = useState<ContentMode>('rich');
|
|||
|
|
const [form, setForm] = useState<FormState>(FORM_DEFAULT);
|
|||
|
|
|
|||
|
|
const isSuperAdmin = useAdminStore((s) => s.admin?.role) === 'super_admin';
|
|||
|
|
|
|||
|
|
useEffect(() => setHydrated(true), []);
|
|||
|
|
|
|||
|
|
const { data: tree, isLoading, mutate } = useSWR<ManualTreeNode[]>(
|
|||
|
|
hydrated ? '/admin/manual/tree' : null,
|
|||
|
|
() => adminApi.manualTree(),
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const rows = useMemo(() => {
|
|||
|
|
const flat = flattenTree(tree ?? []);
|
|||
|
|
if (!searchKw) return flat;
|
|||
|
|
return flat.filter((r) => r.title.toLowerCase().includes(searchKw.toLowerCase()));
|
|||
|
|
}, [tree, searchKw]);
|
|||
|
|
|
|||
|
|
const parentOptions = useMemo(
|
|||
|
|
() => buildParentOptions(tree ?? [], editId),
|
|||
|
|
[tree, editId],
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
const openCreate = (presetParentId?: number | null) => {
|
|||
|
|
setEditId(null);
|
|||
|
|
setContentMode('rich');
|
|||
|
|
setForm({ ...FORM_DEFAULT, parentId: presetParentId ?? null });
|
|||
|
|
setOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const openEdit = async (id: number) => {
|
|||
|
|
const detail = await adminApi.manualDetail(id);
|
|||
|
|
setEditId(id);
|
|||
|
|
// 优先使用持久化的 contentFormat；旧数据无该字段时回退到内容探测
|
|||
|
|
const detected =
|
|||
|
|
detail.contentFormat === 'markdown'
|
|||
|
|
? 'markdown'
|
|||
|
|
: detail.content && isHTMLContent(detail.content)
|
|||
|
|
? 'rich'
|
|||
|
|
: 'markdown';
|
|||
|
|
setContentMode(detected);
|
|||
|
|
setForm({
|
|||
|
|
parentId: detail.parentId,
|
|||
|
|
title: detail.title,
|
|||
|
|
type: detail.type,
|
|||
|
|
content: detail.content ?? '',
|
|||
|
|
sort: detail.sort,
|
|||
|
|
isShow: detail.isShow,
|
|||
|
|
});
|
|||
|
|
setOpen(true);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onSave = async () => {
|
|||
|
|
if (!form.title.trim()) {
|
|||
|
|
alert('请填写标题');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setSaving(true);
|
|||
|
|
try {
|
|||
|
|
const contentFormat: ManualContentFormat =
|
|||
|
|
form.type === 0 || contentMode !== 'markdown' ? 'html' : 'markdown';
|
|||
|
|
const payload: Partial<Manual> = {
|
|||
|
|
parentId: form.parentId,
|
|||
|
|
title: form.title.trim(),
|
|||
|
|
type: form.type,
|
|||
|
|
content: form.type === 0 ? null : form.content,
|
|||
|
|
contentFormat,
|
|||
|
|
sort: form.sort,
|
|||
|
|
isShow: form.isShow,
|
|||
|
|
};
|
|||
|
|
if (editId) {
|
|||
|
|
await adminApi.manualUpdate(editId, payload);
|
|||
|
|
} else {
|
|||
|
|
await adminApi.manualCreate(payload);
|
|||
|
|
}
|
|||
|
|
setOpen(false);
|
|||
|
|
await mutate();
|
|||
|
|
} catch (e) {
|
|||
|
|
alert((e as Error).message);
|
|||
|
|
} finally {
|
|||
|
|
setSaving(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const onDelete = async (id: number) => {
|
|||
|
|
if (!confirm('确认删除该节点？若其下有子节点需先删除子节点。')) return;
|
|||
|
|
try {
|
|||
|
|
await adminApi.manualDelete(id);
|
|||
|
|
await mutate();
|
|||
|
|
} catch (e) {
|
|||
|
|
alert((e as Error).message);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div>
|
|||
|
|
<AdminHeader
|
|||
|
|
title="使用手册"
|
|||
|
|
description="维护多级树形使用手册（目录 + 文档，文档支持富文本/Markdown）"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<TableToolbar
|
|||
|
|
left={
|
|||
|
|
<>
|
|||
|
|
<Input
|
|||
|
|
placeholder="搜索标题"
|
|||
|
|
value={keyword}
|
|||
|
|
onChange={(e) => setKeyword(e.target.value)}
|
|||
|
|
onKeyDown={(e) => {
|
|||
|
|
if (e.key === 'Enter') setSearchKw(keyword);
|
|||
|
|
}}
|
|||
|
|
className="max-w-xs"
|
|||
|
|
/>
|
|||
|
|
<Button variant="outline" onClick={() => setSearchKw(keyword)}>
|
|||
|
|
搜索
|
|||
|
|
</Button>
|
|||
|
|
</>
|
|||
|
|
}
|
|||
|
|
right={
|
|||
|
|
<Button onClick={() => openCreate(null)}>
|
|||
|
|
<Plus className="h-4 w-4" /> 新增节点
|
|||
|
|
</Button>
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<div className="mt-4 rounded-md border border-gray-200">
|
|||
|
|
<Table>
|
|||
|
|
<TableHeader>
|
|||
|
|
<TableRow className="bg-gray-50">
|
|||
|
|
<TableHead style={{ width: 60 }}>ID</TableHead>
|
|||
|
|
<TableHead>标题 / 层级</TableHead>
|
|||
|
|
<TableHead style={{ width: 100 }}>类型</TableHead>
|
|||
|
|
<TableHead style={{ width: 80 }}>状态</TableHead>
|
|||
|
|
<TableHead style={{ width: 260 }}>操作</TableHead>
|
|||
|
|
</TableRow>
|
|||
|
|
</TableHeader>
|
|||
|
|
<TableBody>
|
|||
|
|
{isLoading && (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell colSpan={5} className="h-32">
|
|||
|
|
<div className="flex items-center justify-center gap-2 text-gray-400">
|
|||
|
|
<Loader2 className="h-5 w-5 animate-spin" />
|
|||
|
|
<span className="text-sm">加载中…</span>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
)}
|
|||
|
|
{!isLoading && rows.length === 0 && (
|
|||
|
|
<TableRow>
|
|||
|
|
<TableCell colSpan={5} className="h-32 text-center text-gray-400">
|
|||
|
|
暂无数据，请新增节点
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
)}
|
|||
|
|
{rows.map((r) => (
|
|||
|
|
<TableRow key={r.id}>
|
|||
|
|
<TableCell className="text-gray-500">{r.id}</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
{/* 缩进引导线：每层级一条垂直线 */}
|
|||
|
|
{Array.from({ length: r._depth }).map((_, i) => (
|
|||
|
|
<span key={i} className="flex w-6 justify-center">
|
|||
|
|
<span className="h-6 w-px bg-gray-200" />
|
|||
|
|
</span>
|
|||
|
|
))}
|
|||
|
|
{/* 节点图标：目录=琥珀色底，文档=灰色底 */}
|
|||
|
|
<span
|
|||
|
|
className={cn(
|
|||
|
|
'flex h-7 w-7 shrink-0 items-center justify-center rounded-md',
|
|||
|
|
r.type === 0 ? 'bg-amber-50' : 'bg-slate-50',
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{r.type === 0 ? (
|
|||
|
|
<Folder className="h-4 w-4 text-amber-500" />
|
|||
|
|
) : (
|
|||
|
|
<FileText className="h-4 w-4 text-slate-400" />
|
|||
|
|
)}
|
|||
|
|
</span>
|
|||
|
|
<span
|
|||
|
|
className={cn(
|
|||
|
|
'ml-2',
|
|||
|
|
r.type === 0
|
|||
|
|
? 'font-semibold text-gray-900'
|
|||
|
|
: 'font-medium text-gray-600',
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
{r.title}
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
{r.type === 0 ? (
|
|||
|
|
<Badge variant="warning">目录</Badge>
|
|||
|
|
) : (
|
|||
|
|
<Badge variant="secondary">文档</Badge>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
{r.isShow === 1 ? (
|
|||
|
|
<Badge variant="success">显示</Badge>
|
|||
|
|
) : (
|
|||
|
|
<Badge variant="outline">隐藏</Badge>
|
|||
|
|
)}
|
|||
|
|
</TableCell>
|
|||
|
|
<TableCell>
|
|||
|
|
<div className="flex items-center gap-1.5 whitespace-nowrap">
|
|||
|
|
{r.type === 0 && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => openCreate(r.id)}
|
|||
|
|
>
|
|||
|
|
<Plus className="h-3 w-3" /> 子节点
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="outline"
|
|||
|
|
onClick={() => openEdit(r.id)}
|
|||
|
|
>
|
|||
|
|
<Pencil className="h-3 w-3" /> 编辑
|
|||
|
|
</Button>
|
|||
|
|
{isSuperAdmin && (
|
|||
|
|
<Button
|
|||
|
|
size="sm"
|
|||
|
|
variant="destructive"
|
|||
|
|
onClick={() => onDelete(r.id)}
|
|||
|
|
>
|
|||
|
|
<Trash2 className="h-3 w-3" /> 删除
|
|||
|
|
</Button>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</TableCell>
|
|||
|
|
</TableRow>
|
|||
|
|
))}
|
|||
|
|
</TableBody>
|
|||
|
|
</Table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 新增 / 编辑节点 */}
|
|||
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|||
|
|
<DialogContent className="max-w-3xl">
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle>{editId ? '编辑节点' : '新增节点'}</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
<div className="max-h-[70vh] space-y-4 overflow-y-auto pr-2">
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label>类型 *</Label>
|
|||
|
|
<div className="flex items-center gap-4 pt-1">
|
|||
|
|
<label className="flex items-center gap-2 text-sm">
|
|||
|
|
<input
|
|||
|
|
type="radio"
|
|||
|
|
name="node-type"
|
|||
|
|
checked={form.type === 0}
|
|||
|
|
onChange={() => setForm({ ...form, type: 0 })}
|
|||
|
|
/>
|
|||
|
|
目录
|
|||
|
|
</label>
|
|||
|
|
<label className="flex items-center gap-2 text-sm">
|
|||
|
|
<input
|
|||
|
|
type="radio"
|
|||
|
|
name="node-type"
|
|||
|
|
checked={form.type === 1}
|
|||
|
|
onChange={() => setForm({ ...form, type: 1 })}
|
|||
|
|
/>
|
|||
|
|
文档
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label>父节点</Label>
|
|||
|
|
<select
|
|||
|
|
className="h-10 w-full rounded-md border border-gray-300 px-3 text-sm"
|
|||
|
|
value={form.parentId ?? ''}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({
|
|||
|
|
...form,
|
|||
|
|
parentId: e.target.value ? Number(e.target.value) : null,
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<option value="">（顶级）</option>
|
|||
|
|
{parentOptions.map((opt) => (
|
|||
|
|
<option key={opt.id} value={opt.id}>
|
|||
|
|
{`${' '.repeat(opt.depth)}${opt.depth > 0 ? '└ ' : ''}${opt.label}`}
|
|||
|
|
</option>
|
|||
|
|
))}
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label>标题 *</Label>
|
|||
|
|
<Input
|
|||
|
|
value={form.title}
|
|||
|
|
maxLength={200}
|
|||
|
|
onChange={(e) => setForm({ ...form, title: e.target.value })}
|
|||
|
|
placeholder={form.type === 0 ? '目录名称' : '文档标题'}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{form.type === 1 && (
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|||
|
|
<Label>正文内容</Label>
|
|||
|
|
<div className="flex items-center gap-2">
|
|||
|
|
<div className="flex rounded-md border border-gray-200 p-0.5">
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setContentMode('rich')}
|
|||
|
|
className={cn(
|
|||
|
|
'rounded px-2.5 py-0.5 text-xs transition-colors',
|
|||
|
|
contentMode === 'rich'
|
|||
|
|
? 'bg-brand-600 text-white'
|
|||
|
|
: 'text-gray-600 hover:text-gray-900',
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
富文本
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setContentMode('markdown')}
|
|||
|
|
className={cn(
|
|||
|
|
'rounded px-2.5 py-0.5 text-xs transition-colors',
|
|||
|
|
contentMode === 'markdown'
|
|||
|
|
? 'bg-brand-600 text-white'
|
|||
|
|
: 'text-gray-600 hover:text-gray-900',
|
|||
|
|
)}
|
|||
|
|
>
|
|||
|
|
Markdown
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{contentMode === 'markdown' && (
|
|||
|
|
<MarkdownImport
|
|||
|
|
onImport={(md) => setForm({ ...form, content: md })}
|
|||
|
|
onError={(msg) => alert(msg)}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
{contentMode === 'rich' ? (
|
|||
|
|
<RichEditor
|
|||
|
|
value={form.content}
|
|||
|
|
onChange={(html) => setForm({ ...form, content: html })}
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<Textarea
|
|||
|
|
rows={12}
|
|||
|
|
placeholder="支持 Markdown 语法。可点击右上角上传 .md 文档"
|
|||
|
|
className="font-mono text-sm"
|
|||
|
|
value={form.content}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, content: e.target.value })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-2 gap-3">
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label>排序（越小越靠前）</Label>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
value={form.sort}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, sort: Number(e.target.value) })
|
|||
|
|
}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label>状态</Label>
|
|||
|
|
<select
|
|||
|
|
className="h-10 w-full rounded-md border border-gray-300 px-3 text-sm"
|
|||
|
|
value={form.isShow}
|
|||
|
|
onChange={(e) =>
|
|||
|
|
setForm({ ...form, isShow: Number(e.target.value) })
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
<option value={1}>显示</option>
|
|||
|
|
<option value={0}>隐藏</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<DialogFooter>
|
|||
|
|
<Button variant="outline" onClick={() => setOpen(false)}>
|
|||
|
|
取消
|
|||
|
|
</Button>
|
|||
|
|
<Button onClick={onSave} disabled={saving}>
|
|||
|
|
{saving ? (
|
|||
|
|
<>
|
|||
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
|||
|
|
保存中…
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
'保存'
|
|||
|
|
)}
|
|||
|
|
</Button>
|
|||
|
|
</DialogFooter>
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|