42 lines
3.5 KiB
JavaScript
42 lines
3.5 KiB
JavaScript
import { useMemo, useState } from "react";
|
|
import { Search } from "lucide-react";
|
|
import DraggableFab from "../components/DraggableFab";
|
|
import StatusPill from "../components/StatusPill";
|
|
import { openWindow } from "../utils/navigation";
|
|
|
|
const items = [
|
|
{ id: "kb-sales-champion", title: "销售冠军高意向客户跟进案例", type: "案例", tags: ["私域成交", "高意向"], updated: "06-08", refs: 128, files: 3, version: "v2.4", status: "已生效" },
|
|
{ id: "kb-refund", title: "售后常见问题与退款边界", type: "文件", tags: ["售后", "退款"], updated: "06-05", refs: 82, files: 4, version: "v1.7", status: "已生效" },
|
|
{ id: "kb-training", title: "产品培训视频", type: "视频", tags: ["产品", "培训"], updated: "06-20", refs: 26, files: 2, version: "v1.0", status: "已生效" },
|
|
{ id: "kb-boundary", title: "售后边界说明", type: "文件", tags: ["售后", "边界"], updated: "06-18", refs: 12, files: 1, version: "v1.2", status: "已生效" },
|
|
{ id: "kb-images", title: "企业微信客户分层话术图片包", type: "图片", tags: ["客户分层", "话术"], updated: "05-30", refs: 41, files: 12, version: "v1.1", status: "已生效" },
|
|
{ id: "kb-live", title: "直播间私域导流短视频脚本", type: "视频", tags: ["直播", "私域"], updated: "05-24", refs: 35, files: 3, version: "v0.9", status: "已停用" },
|
|
];
|
|
|
|
|
|
export default function KnowledgePage() {
|
|
const [query, setQuery] = useState("");
|
|
const filtered = useMemo(() => items.filter((item) => {
|
|
const keyword = `${item.title} ${item.tags.join(" ")}`.toLowerCase();
|
|
return keyword.includes(query.toLowerCase());
|
|
}), [query]);
|
|
|
|
|
|
return (
|
|
<section className="space-y-3 pb-20">
|
|
<div className="relative"><Search className="absolute left-3 top-3 text-muted" size={16} /><input className="input-like pl-9" placeholder="搜索标题、标签或完整正文" value={query} onChange={(event) => setQuery(event.target.value)} /></div>
|
|
|
|
<div className="space-y-3 [text-rendering:auto]">
|
|
{filtered.map((item) => (
|
|
<article key={item.id} className="panel cursor-pointer rounded-[14px] p-4 transition hover:border-primary" onClick={() => openWindow(`/window/knowledge-detail?id=${item.id}`)}>
|
|
<div className="flex items-start justify-between gap-3"><div className="min-w-0"><h3 className="truncate text-[15px] font-extrabold">{item.title}</h3><div className="mt-2 flex flex-wrap gap-1.5"><span className="tag text-[12px] font-semibold leading-4 text-text">{item.type}</span>{item.tags.map((tag) => <span key={tag} className="tag text-[12px] font-semibold leading-4 text-text">{tag}</span>)}</div></div><StatusPill tone={item.status === "已生效" ? "success" : item.status === "待审核" ? "warning" : "muted"} label={item.status} /></div>
|
|
<div className="mt-3 flex items-center justify-between gap-3 text-[12px] font-medium leading-5 text-muted"><span>{item.version} · 更新 {item.updated} · 引用 {item.refs}</span><span className="shrink-0">文件 {item.files} 个</span></div>
|
|
</article>
|
|
))}
|
|
{!filtered.length ? <div className="panel grid min-h-[220px] place-items-center p-6 text-center"><div><h3 className="text-[16px] font-black">暂无匹配知识</h3><p className="mt-2 text-[12px] text-muted">调整搜索关键词后重试。</p><button className="btn-secondary mt-4" onClick={() => setQuery("")}>清除筛选</button></div></div> : null}
|
|
</div>
|
|
<DraggableFab onClick={() => openWindow("/window/knowledge-create")} ariaLabel="新增知识库" />
|
|
</section>
|
|
);
|
|
}
|