372 lines
14 KiB
TypeScript
372 lines
14 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Link from "next/link";
|
||
|
|
import {
|
||
|
|
ArrowLeft,
|
||
|
|
CheckCircle2,
|
||
|
|
FileText,
|
||
|
|
Loader2,
|
||
|
|
ScanEye,
|
||
|
|
Trash2,
|
||
|
|
Upload,
|
||
|
|
} from "lucide-react";
|
||
|
|
import { useCallback, useEffect, useState } from "react";
|
||
|
|
import {
|
||
|
|
Badge,
|
||
|
|
Button,
|
||
|
|
Card,
|
||
|
|
EmptyState,
|
||
|
|
ErrorState,
|
||
|
|
TextInput,
|
||
|
|
LoadingBlock,
|
||
|
|
Select,
|
||
|
|
} from "@/components/admin/ui";
|
||
|
|
import { adminApi, errMessage } from "@/lib/admin-api";
|
||
|
|
import { buildKnowledgeForm, knowledgeApi, type KnowledgeDocument, type UploadPreview } from "@/lib/knowledge-api";
|
||
|
|
import { isAdmin } from "@/lib/roles";
|
||
|
|
|
||
|
|
/** 切分策略，与后端 KnowledgeUploadService 支持的策略保持一致。 */
|
||
|
|
const STRATEGIES = [
|
||
|
|
{ value: "default", label: "默认（按段落递归切分）" },
|
||
|
|
{ value: "fixed", label: "固定长度切分" },
|
||
|
|
{ value: "sentence", label: "按句子切分" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export default function KnowledgePage() {
|
||
|
|
const [state, setState] = useState<"loading" | "ready" | "denied" | "error">("loading");
|
||
|
|
const [items, setItems] = useState<KnowledgeDocument[]>([]);
|
||
|
|
|
||
|
|
const [file, setFile] = useState<File | null>(null);
|
||
|
|
const [title, setTitle] = useState("");
|
||
|
|
const [strategy, setStrategy] = useState("default");
|
||
|
|
const [chunkSize, setChunkSize] = useState("");
|
||
|
|
const [chunkOverlap, setChunkOverlap] = useState("");
|
||
|
|
|
||
|
|
const [preview, setPreview] = useState<UploadPreview | null>(null);
|
||
|
|
const [uploading, setUploading] = useState(false);
|
||
|
|
const [removing, setRemoving] = useState<string | null>(null);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
const [notice, setNotice] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const load = useCallback(async () => {
|
||
|
|
try {
|
||
|
|
setItems(await knowledgeApi.list());
|
||
|
|
} catch (err) {
|
||
|
|
setError(errMessage(err, "知识库加载失败"));
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
let alive = true;
|
||
|
|
(async () => {
|
||
|
|
try {
|
||
|
|
const user = await adminApi.me();
|
||
|
|
if (!alive) return;
|
||
|
|
if (!isAdmin(user)) {
|
||
|
|
setState("denied");
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setState("ready");
|
||
|
|
await load();
|
||
|
|
} catch (err) {
|
||
|
|
if (!alive) return;
|
||
|
|
// 401 时 apiFetch 已跳转登录页，这里只兜底其余失败
|
||
|
|
setError(errMessage(err, "请先登录管理员账号"));
|
||
|
|
setState("error");
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
return () => {
|
||
|
|
alive = false;
|
||
|
|
};
|
||
|
|
}, [load]);
|
||
|
|
|
||
|
|
const resetUpload = () => {
|
||
|
|
setFile(null);
|
||
|
|
setTitle("");
|
||
|
|
setChunkSize("");
|
||
|
|
setChunkOverlap("");
|
||
|
|
setPreview(null);
|
||
|
|
};
|
||
|
|
|
||
|
|
const runPreview = async () => {
|
||
|
|
if (!file || uploading) return;
|
||
|
|
setUploading(true);
|
||
|
|
setError(null);
|
||
|
|
setNotice(null);
|
||
|
|
try {
|
||
|
|
const result = await knowledgeApi.preview(
|
||
|
|
buildKnowledgeForm(file, {
|
||
|
|
strategy,
|
||
|
|
chunk_size: chunkSize ? Number(chunkSize) : null,
|
||
|
|
chunk_overlap: chunkOverlap ? Number(chunkOverlap) : null,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
setPreview(result);
|
||
|
|
if (!title) setTitle(file.name);
|
||
|
|
} catch (err) {
|
||
|
|
setError(errMessage(err, "预览失败，请检查文件格式"));
|
||
|
|
} finally {
|
||
|
|
setUploading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const runConfirm = async () => {
|
||
|
|
if (!file || uploading) return;
|
||
|
|
setUploading(true);
|
||
|
|
setError(null);
|
||
|
|
setNotice(null);
|
||
|
|
try {
|
||
|
|
await knowledgeApi.confirm(
|
||
|
|
buildKnowledgeForm(file, {
|
||
|
|
title: title || file.name,
|
||
|
|
doc_id: preview?.doc_id ? String(preview.doc_id) : undefined,
|
||
|
|
strategy,
|
||
|
|
chunk_size: chunkSize ? Number(chunkSize) : null,
|
||
|
|
chunk_overlap: chunkOverlap ? Number(chunkOverlap) : null,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
setNotice(`《${title || file.name}》已入库`);
|
||
|
|
resetUpload();
|
||
|
|
await load();
|
||
|
|
} catch (err) {
|
||
|
|
setError(errMessage(err, "入库失败，请稍后重试"));
|
||
|
|
} finally {
|
||
|
|
setUploading(false);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const remove = async (doc: KnowledgeDocument) => {
|
||
|
|
const docId = doc.doc_id ?? doc.id ?? "";
|
||
|
|
if (!docId) return;
|
||
|
|
if (!window.confirm(`确认删除《${doc.title ?? doc.filename ?? docId}》？该操作不可撤销。`)) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
setRemoving(docId);
|
||
|
|
setError(null);
|
||
|
|
try {
|
||
|
|
await knowledgeApi.remove(docId);
|
||
|
|
setNotice("文档已删除");
|
||
|
|
await load();
|
||
|
|
} catch (err) {
|
||
|
|
setError(errMessage(err, "删除失败，请稍后重试"));
|
||
|
|
} finally {
|
||
|
|
setRemoving(null);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main className="min-h-screen bg-slate-50 px-6 py-8">
|
||
|
|
<div className="mx-auto max-w-5xl space-y-5">
|
||
|
|
<Link
|
||
|
|
href="/admin"
|
||
|
|
className="inline-flex items-center gap-2 text-sm text-slate-500 transition-colors hover:text-slate-800"
|
||
|
|
>
|
||
|
|
<ArrowLeft className="h-4 w-4" />
|
||
|
|
返回统一工作台
|
||
|
|
</Link>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-semibold text-slate-900">知识库管理</h1>
|
||
|
|
<p className="mt-1 text-sm text-slate-500">
|
||
|
|
上传投顾 / 客服 Agent 可检索的文档，入库前可先预览切分效果
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{state === "loading" && <LoadingBlock text="正在校验权限..." />}
|
||
|
|
|
||
|
|
{state === "denied" && (
|
||
|
|
<div className="rounded-xl border border-amber-200 bg-amber-50 p-5 text-sm text-amber-800">
|
||
|
|
知识库管理仅对管理员开放。当前账号无操作权限，如有需要请联系系统管理员。
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{state === "error" && <ErrorState message={error ?? "加载失败"} onRetry={() => location.reload()} />}
|
||
|
|
|
||
|
|
{state === "ready" && (
|
||
|
|
<>
|
||
|
|
<Card
|
||
|
|
title="上传文档"
|
||
|
|
description="先预览切分效果，确认无误后再入库"
|
||
|
|
>
|
||
|
|
<div className="space-y-4">
|
||
|
|
<div className="flex flex-wrap items-center gap-3">
|
||
|
|
<label className="cursor-pointer">
|
||
|
|
<input
|
||
|
|
type="file"
|
||
|
|
className="hidden"
|
||
|
|
onChange={(event) => {
|
||
|
|
const picked = event.target.files?.[0] ?? null;
|
||
|
|
setFile(picked);
|
||
|
|
setPreview(null);
|
||
|
|
if (picked) setTitle(picked.name);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<span className="inline-flex items-center gap-2 rounded-lg border border-slate-200 px-3.5 py-2 text-sm text-slate-600 transition-colors hover:border-indigo-300 hover:text-indigo-600">
|
||
|
|
<Upload className="h-4 w-4" />
|
||
|
|
选择文件
|
||
|
|
</span>
|
||
|
|
</label>
|
||
|
|
<span className="text-sm text-slate-500">
|
||
|
|
{file ? file.name : "未选择文件"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="grid gap-3 sm:grid-cols-3">
|
||
|
|
<label className="space-y-1.5">
|
||
|
|
<span className="text-xs text-slate-500">标题</span>
|
||
|
|
<TextInput
|
||
|
|
value={title}
|
||
|
|
onChange={(event) => setTitle(event.target.value)}
|
||
|
|
placeholder="用于检索展示的标题"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<label className="space-y-1.5">
|
||
|
|
<span className="text-xs text-slate-500">切分策略</span>
|
||
|
|
<Select
|
||
|
|
value={strategy}
|
||
|
|
onChange={(event) => setStrategy(event.target.value)}
|
||
|
|
>
|
||
|
|
{STRATEGIES.map((item) => (
|
||
|
|
<option key={item.value} value={item.value}>
|
||
|
|
{item.label}
|
||
|
|
</option>
|
||
|
|
))}
|
||
|
|
</Select>
|
||
|
|
</label>
|
||
|
|
<div className="grid grid-cols-2 gap-2">
|
||
|
|
<label className="space-y-1.5">
|
||
|
|
<span className="text-xs text-slate-500">分片长度</span>
|
||
|
|
<TextInput
|
||
|
|
value={chunkSize}
|
||
|
|
onChange={(event) => setChunkSize(event.target.value.replace(/\D/g, ""))}
|
||
|
|
placeholder="留空用默认"
|
||
|
|
inputMode="numeric"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
<label className="space-y-1.5">
|
||
|
|
<span className="text-xs text-slate-500">重叠长度</span>
|
||
|
|
<TextInput
|
||
|
|
value={chunkOverlap}
|
||
|
|
onChange={(event) => setChunkOverlap(event.target.value.replace(/\D/g, ""))}
|
||
|
|
placeholder="留空用默认"
|
||
|
|
inputMode="numeric"
|
||
|
|
/>
|
||
|
|
</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-wrap items-center gap-2">
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
disabled={!file}
|
||
|
|
loading={uploading && !preview}
|
||
|
|
onClick={() => void runPreview()}
|
||
|
|
>
|
||
|
|
<ScanEye className="h-4 w-4" />
|
||
|
|
预览切分
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="primary"
|
||
|
|
disabled={!file}
|
||
|
|
loading={uploading && !!preview}
|
||
|
|
onClick={() => void runConfirm()}
|
||
|
|
>
|
||
|
|
<CheckCircle2 className="h-4 w-4" />
|
||
|
|
确认入库
|
||
|
|
</Button>
|
||
|
|
{file && (
|
||
|
|
<Button variant="ghost" onClick={resetUpload}>
|
||
|
|
取消
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{preview && (
|
||
|
|
<div className="rounded-lg border border-slate-200 bg-slate-50 p-4">
|
||
|
|
<div className="mb-2 flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||
|
|
<Badge tone="info">{preview.strategy || strategy}</Badge>
|
||
|
|
{preview.chunk_size != null && <span>分片 {preview.chunk_size}</span>}
|
||
|
|
{preview.chunk_overlap != null && <span>重叠 {preview.chunk_overlap}</span>}
|
||
|
|
<span className="font-medium text-slate-700">
|
||
|
|
共切出 {preview.chunks?.length ?? 0} 段
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="max-h-48 space-y-1.5 overflow-y-auto">
|
||
|
|
{(preview.chunks ?? []).slice(0, 20).map((chunk, index) => (
|
||
|
|
<p
|
||
|
|
key={index}
|
||
|
|
className="rounded bg-white px-3 py-2 text-xs leading-6 text-slate-600"
|
||
|
|
>
|
||
|
|
{typeof chunk === "string" ? chunk : JSON.stringify(chunk)}
|
||
|
|
</p>
|
||
|
|
))}
|
||
|
|
{(preview.chunks?.length ?? 0) > 20 && (
|
||
|
|
<p className="px-3 text-xs text-slate-400">
|
||
|
|
仅展示前 20 段，共 {preview.chunks?.length} 段
|
||
|
|
</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</Card>
|
||
|
|
|
||
|
|
{error && <ErrorState message={error} />}
|
||
|
|
{notice && (
|
||
|
|
<div className="rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-700">
|
||
|
|
{notice}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<Card title="已入库文档" description={`共 ${items.length} 篇`}>
|
||
|
|
{items.length === 0 ? (
|
||
|
|
<EmptyState text="暂无知识库文档，上传后可被投顾与客服 Agent 检索" />
|
||
|
|
) : (
|
||
|
|
<div className="divide-y divide-slate-100">
|
||
|
|
{items.map((item) => {
|
||
|
|
const docId = item.doc_id ?? item.id ?? "";
|
||
|
|
const busy = removing === docId;
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
key={docId}
|
||
|
|
className="flex items-center justify-between gap-4 py-3.5"
|
||
|
|
>
|
||
|
|
<div className="flex min-w-0 items-start gap-3">
|
||
|
|
<FileText className="mt-0.5 h-4 w-4 shrink-0 text-slate-400" />
|
||
|
|
<div className="min-w-0">
|
||
|
|
<p className="truncate text-sm font-medium text-slate-800">
|
||
|
|
{item.title ?? item.filename ?? docId}
|
||
|
|
</p>
|
||
|
|
<p className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-slate-400">
|
||
|
|
{item.collection_name && <span>{item.collection_name}</span>}
|
||
|
|
{item.chunk_count != null && <span>{item.chunk_count} 段</span>}
|
||
|
|
{item.create_time && <span>{item.create_time}</span>}
|
||
|
|
<span className="font-mono">{docId}</span>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={() => void remove(item)}
|
||
|
|
disabled={busy}
|
||
|
|
aria-label="删除文档"
|
||
|
|
className="shrink-0 rounded p-1.5 text-slate-400 transition-colors hover:bg-rose-50 hover:text-rose-500 disabled:opacity-50"
|
||
|
|
>
|
||
|
|
{busy ? (
|
||
|
|
<Loader2 className="h-4 w-4 animate-spin" />
|
||
|
|
) : (
|
||
|
|
<Trash2 className="h-4 w-4" />
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Card>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
);
|
||
|
|
}
|