feat:前端修改(我认为ok)
This commit is contained in:
@@ -0,0 +1,371 @@
|
||||
"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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user