feat(knowledge): 知识页支持刷新列表与批量移动知识
CI / backend (push) Canceled after 0s

This commit is contained in:
Steven
2026-11-07 01:50:37 +08:00
parent dcd77c6b35
commit 28eab4ae5f
2 changed files with 317 additions and 27 deletions
+7
View File
@@ -106,6 +106,13 @@ export const Search = (p: IconProps) => (
</svg>
);
export const Refresh = (p: IconProps) => (
<svg {...base(p)}>
<path d="M20 12a8 8 0 1 1-2.6-5.9" />
<path d="M20 4v4h-4" />
</svg>
);
export const Plus = (p: IconProps) => (
<svg {...base(p)}>
<path d="M12 5v14M5 12h14" />
+288 -5
View File
@@ -1,10 +1,24 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useAuth } from "../App";
import { AppShell } from "../components/AppShell";
import { AttachmentPanel } from "../components/AttachmentPanel";
import { Markdown } from "../components/Markdown";
import { RichTextEditor } from "../components/RichTextEditor";
import { Check, Link2, More, Paperclip, Pencil, Plus, Search, Sparkle, Spinner, Trash } from "../components/icons";
import {
ArrowRight,
Check,
Link2,
More,
Paperclip,
Pencil,
Plus,
Refresh,
Search,
Sparkle,
Spinner,
Trash,
} from "../components/icons";
import {
Button,
EmptyState,
@@ -13,6 +27,7 @@ import {
Sheet,
SkeletonRows,
StatusPill,
useToast,
} from "../components/ui";
import { ApiError, api } from "../lib/client";
import {
@@ -81,6 +96,11 @@ export function KnowledgePage() {
const [tags, setTags] = useState<KnowledgeTagCount[]>([]);
const [tagFilter, setTagFilter] = useState<string | null>(null);
const [catBusy, setCatBusy] = useState(false);
/** 批量移动:先进入选择模式,再挑目标工作区/目录 */
const [selecting, setSelecting] = useState(false);
const [selected, setSelected] = useState<Set<string>>(new Set());
const [moving, setMoving] = useState(false);
const { push: toast } = useToast();
const reqId = useRef(0);
const loadCategories = useCallback(async () => {
@@ -286,6 +306,51 @@ export function KnowledgePage() {
}
}
/** 刷新:列表、分类、标签一起重拉;检索态下重跑检索 */
async function refresh() {
if (hits !== null) await runSearch();
else await load(null);
await Promise.all([loadCategories(), loadTags()]);
}
function startSelect() {
setHits(null);
setSelecting(true);
setSelected(new Set());
}
function cancelSelect() {
setSelecting(false);
setSelected(new Set());
}
function toggleSelect(id: string) {
setSelected((prev) => {
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}
function toggleSelectAll() {
setSelected((prev) =>
prev.size === docs.length && docs.length > 0 ? new Set() : new Set(docs.map((d) => d.id)),
);
}
function onMoved(result: { moved: string[]; workspace_id: string; category_id: string | null }) {
setMoving(false);
cancelSelect();
void load(null);
void loadCategories();
void loadTags();
toast(
`已移动 ${result.moved.length} 篇知识到${result.workspace_id === wsId ? "当前工作区" : "另一个工作区"}`,
"success",
);
}
const pendingCount = docs.filter((d) => d.knowledge.status_hint !== "published").length;
const activeCategory = categories.find((c) => c.id === catFilter) ?? null;
@@ -366,17 +431,64 @@ export function KnowledgePage() {
</button>
);
})}
<div className="ml-auto flex items-center gap-1.5">
{loading ? (
<span className="ml-auto inline-flex items-center gap-1.5 text-2xs text-ink-500">
<span className="inline-flex items-center gap-1.5 text-2xs text-ink-500">
<Spinner size={12} />
载入中…
</span>
) : tab === "draft" && pendingCount > 0 ? (
<span className="ml-auto hidden text-2xs text-ink-400 sm:block">
<span className="hidden text-2xs text-ink-400 sm:block">
{pendingCount} 份草稿等你核对
</span>
) : null}
<Button
variant="ghost"
size="sm"
disabled={loading || searching}
onClick={() => void refresh()}
title="重新加载列表、分类和标签"
>
<Refresh size={13} />
刷新
</Button>
<Button
variant={selecting ? "subtle" : "ghost"}
size="sm"
onClick={() => (selecting ? cancelSelect() : startSelect())}
title="选中多篇知识,一起移动到目录或其它工作区"
>
<Check size={13} />
{selecting ? "退出批量" : "批量移动"}
</Button>
</div>
</div>
{selecting && hits === null ? (
<div className="mb-3 flex flex-wrap items-center gap-2 rounded-xl border border-primary-200 bg-primary-50/60 px-3 py-2">
<span className="text-xs font-medium text-primary-800">
已选 {selected.size} / {docs.length} 篇
</span>
<button className="link text-2xs" onClick={toggleSelectAll}>
{selected.size === docs.length && docs.length > 0 ? "取消全选" : "全选列表"}
</button>
<span className="text-2xs text-ink-400">点卡片选中或取消</span>
<div className="ml-auto flex items-center gap-2">
<Button variant="ghost" size="sm" onClick={cancelSelect}>
取消
</Button>
<Button
variant="primary"
size="sm"
disabled={selected.size === 0}
onClick={() => setMoving(true)}
>
<ArrowRight size={13} />
移动到…
</Button>
</div>
</div>
) : null}
{error && (
<div className="mb-4">
@@ -483,9 +595,30 @@ export function KnowledgePage() {
? { borderTopWidth: 3, borderTopColor: categoryColor(d.category) }
: undefined
}
className="card group flex items-start justify-between gap-3 p-4 transition hover:border-line-300 hover:shadow-pop"
className={`card group flex items-start justify-between gap-3 p-4 transition hover:border-line-300 hover:shadow-pop ${
selecting && selected.has(d.id) ? "ring-2 ring-primary-300" : ""
}`}
>
{selecting ? (
<button
type="button"
role="checkbox"
aria-checked={selected.has(d.id)}
aria-label={`选择 ${d.title}`}
onClick={() => toggleSelect(d.id)}
className={`mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center rounded border transition ${
selected.has(d.id)
? "border-primary-600 bg-primary-600 text-white"
: "border-line-300 bg-white text-transparent hover:border-primary-400"
}`}
>
<Check size={12} />
</button>
) : null}
<button
className="min-w-0 flex-1 text-left"
onClick={() => (selecting ? toggleSelect(d.id) : openDoc(d.id))}
>
<button className="min-w-0 flex-1 text-left" onClick={() => openDoc(d.id)}>
<div className="flex items-center gap-1.5">
<span className="chip bg-primary-50 text-primary-700">
{DOC_TYPE_LABEL[d.knowledge.doc_type] ?? d.knowledge.doc_type}
@@ -535,6 +668,7 @@ export function KnowledgePage() {
</div>
) : null}
</button>
{selecting ? null : (
<div className="flex shrink-0 items-center gap-1">
<Button variant="ghost" size="sm" onClick={() => openDoc(d.id)}>
打开
@@ -549,6 +683,7 @@ export function KnowledgePage() {
<Trash size={14} />
</button>
</div>
)}
</li>
))}
</ul>
@@ -575,10 +710,158 @@ export function KnowledgePage() {
/>
)}
{moving && (
<MoveKnowledgeSheet
wsId={wsId}
itemIds={[...selected]}
onClose={() => setMoving(false)}
onMoved={onMoved}
/>
)}
</AppShell>
);
}
/**
* 批量移动:选目标工作区 + 目标目录。
* 跨工作区时标签、评论、附件一起搬走;工单来源记成手动创建,免得目标库里挂一条看不见的工单。
*/
function MoveKnowledgeSheet({
wsId,
itemIds,
onClose,
onMoved,
}: {
wsId: string;
itemIds: string[];
onClose: () => void;
onMoved: (result: { moved: string[]; workspace_id: string; category_id: string | null }) => void;
}) {
const { workspaces } = useAuth();
const [targetWs, setTargetWs] = useState(wsId);
const [cats, setCats] = useState<KnowledgeCategoryNode[]>([]);
const [catId, setCatId] = useState("");
const [loading, setLoading] = useState(true);
const [busy, setBusy] = useState(false);
const [error, setError] = useState("");
// 当前工作区排第一:多数时候只是整理目录,不该先让人跨区找自己
const targets = useMemo(() => {
const current = workspaces.find((w) => w.id === wsId);
const rest = workspaces.filter((w) => w.id !== wsId && w.role !== "guest");
return current ? [current, ...rest] : rest;
}, [workspaces, wsId]);
useEffect(() => {
let alive = true;
setLoading(true);
setCatId("");
api
.get<{ items: KnowledgeCategoryNode[] }>(`/workspaces/${targetWs}/knowledge/categories`)
.then((data) => {
if (alive) setCats(data.items);
})
.catch((e: unknown) => {
if (alive) setError(e instanceof ApiError ? e.message : "分类载入失败");
})
.finally(() => {
if (alive) setLoading(false);
});
return () => {
alive = false;
};
}, [targetWs]);
async function submit() {
if (busy || itemIds.length === 0) return;
setBusy(true);
setError("");
try {
const res = await api.post<{
moved: string[];
workspace_id: string;
category_id: string | null;
}>(`/workspaces/${wsId}/knowledge/bulk-move`, {
item_ids: itemIds,
target_workspace_id: targetWs === wsId ? null : targetWs,
category_id: catId || null,
});
onMoved(res);
} catch (e: unknown) {
setError(e instanceof ApiError ? e.message : "移动失败,请重试");
} finally {
setBusy(false);
}
}
return (
<Sheet
open
onClose={onClose}
size="md"
title="移动知识"
subtitle={`共 ${itemIds.length} 篇`}
footer={
<>
<Button variant="ghost" onClick={onClose} disabled={busy}>
取消
</Button>
<Button
variant="primary"
onClick={() => void submit()}
disabled={busy || loading || itemIds.length === 0}
>
{busy ? "移动中…" : "确认移动"}
</Button>
</>
}
>
<div className="space-y-4">
{error ? <InlineAlert>{error}</InlineAlert> : null}
<label className="block">
<span className="label">目标工作区</span>
<select
className="input mt-1 w-full"
value={targetWs}
onChange={(e) => setTargetWs(e.target.value)}
disabled={busy}
>
{targets.map((w) => (
<option key={w.id} value={w.id}>
{w.name}
{w.id === wsId ? "(当前)" : ""}
</option>
))}
</select>
</label>
<label className="block">
<span className="label">目标目录</span>
<select
className="input mt-1 w-full"
value={catId}
onChange={(e) => setCatId(e.target.value)}
disabled={busy || loading}
>
<option value="">未分类</option>
{cats.map((c) => (
<option key={c.id} value={c.id}>
{"\u3000".repeat(Math.max(0, c.depth - 1))}
{c.full_path || c.name}
</option>
))}
</select>
</label>
{targetWs !== wsId ? (
<InlineAlert tone="info">
会连同标签、评论、附件一起搬到目标工作区;原工单来源会记为手动创建,原工作区的通知与关联不再保留。
</InlineAlert>
) : null}
</div>
</Sheet>
);
}
/** 分类色块:选中的那个带描边和钩,不用猜“现在到底是哪个色” */
function ColorSwatch({
value,