feat(knowledge): 知识库 wiki/知识图谱重构，新增发布广场选择弹窗
- 知识库页拆分出 wiki 组件（侧边栏/目录树/Markdown 阅读器等） - 知识图谱页拆分出 knowledge-graph 组件并增强交互 - 新增发布广场选择弹窗 publish-square-picker-dialog - config.yaml 新增 MiniMax-M2.5 / Ling-flash-2.0 / DeepSeek-V4-Pro 模型 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
吉鑫升andClaude Opus 4.8 committed
1 parent
f0aec4cd7f
commit
e684de30bd
30 files changed
+4827
-682
No files matched your search
@@ -1,87 +1,410 @@
|
||||
import { ArrowLeft, Loader2, RefreshCw } from "lucide-react";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Loader2, Network, Tags } from "lucide-react";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { knowledgeExportFileUrl } from "@/core/knowledge/api";
|
||||
import { useKnowledgeActions } from "@/core/knowledge/hooks";
|
||||
import {
|
||||
GraphCanvas,
|
||||
type GraphCanvasHandle,
|
||||
} from "@/components/knowledge-graph/GraphCanvas";
|
||||
import { GraphDetailPanel } from "@/components/knowledge-graph/GraphDetailPanel";
|
||||
import { GraphFooter } from "@/components/knowledge-graph/GraphFooter";
|
||||
import { GraphHeader } from "@/components/knowledge-graph/GraphHeader";
|
||||
import { GraphSidebar } from "@/components/knowledge-graph/GraphSidebar";
|
||||
import { GraphTooltip } from "@/components/knowledge-graph/GraphTooltip";
|
||||
import type {
|
||||
LayoutType,
|
||||
NodeKind,
|
||||
TooltipState,
|
||||
} from "@/components/knowledge-graph/graphTypes";
|
||||
import {
|
||||
computeDegrees,
|
||||
computeGraphStats,
|
||||
getEdgeLabel,
|
||||
getNodeKind,
|
||||
getNodeTitle,
|
||||
} from "@/components/knowledge-graph/graphUtils";
|
||||
import "@/components/knowledge-graph/graphStyles.css";
|
||||
import { useKnowledgeGraph, useKnowledgeNote } from "@/core/knowledge/hooks";
|
||||
|
||||
export default function KnowledgeGraphPage() {
|
||||
const navigate = useNavigate();
|
||||
const { theme } = useTheme();
|
||||
const { exportGraph } = useKnowledgeActions();
|
||||
// Keep the served base URL (without the theme) so a theme toggle can re-skin
|
||||
// the iframe without regenerating the graph on the backend.
|
||||
const [baseSrc, setBaseSrc] = useState<string | null>(null);
|
||||
const [stats, setStats] = useState<{ nodes: number; edges: number } | null>(null);
|
||||
const pageRef = useRef<HTMLDivElement>(null);
|
||||
const canvasRef = useRef<GraphCanvasHandle>(null);
|
||||
|
||||
const regenerate = useCallback(async () => {
|
||||
try {
|
||||
const result = await exportGraph.mutateAsync();
|
||||
setStats(result.stats);
|
||||
// Cache-bust the iframe so it reflects the freshly generated graph.
|
||||
setBaseSrc(`${knowledgeExportFileUrl("graph.html")}?t=${Date.now()}`);
|
||||
} catch (error) {
|
||||
toast.error(error instanceof Error ? error.message : "生成图谱失败");
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const { data, isLoading, isError, error, refetch, isFetching } =
|
||||
useKnowledgeGraph();
|
||||
|
||||
// ------------------------------------------------------------------ state
|
||||
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
||||
const [searchKeyword, setSearchKeyword] = useState("");
|
||||
const [disabledNodeKinds, setDisabledNodeKinds] = useState<Set<NodeKind>>(
|
||||
new Set(),
|
||||
);
|
||||
const [disabledEdgeLabels, setDisabledEdgeLabels] = useState<Set<string>>(
|
||||
new Set(),
|
||||
);
|
||||
const [hiddenNodeIds, setHiddenNodeIds] = useState<Set<string>>(new Set());
|
||||
const [layoutType, setLayoutType] = useState<LayoutType>("force");
|
||||
const [showLabels, setShowLabels] = useState(true);
|
||||
const [showSidebar, setShowSidebar] = useState(true);
|
||||
const [showDetail, setShowDetail] = useState(true);
|
||||
const [zoomLevel, setZoomLevel] = useState(1);
|
||||
const [tooltip, setTooltip] = useState<TooltipState | null>(null);
|
||||
|
||||
// Auto-collapse the side panels on narrow viewports.
|
||||
useEffect(() => {
|
||||
const detailQuery = window.matchMedia("(max-width: 1280px)");
|
||||
const sidebarQuery = window.matchMedia("(max-width: 900px)");
|
||||
const apply = () => {
|
||||
setShowDetail(!detailQuery.matches);
|
||||
setShowSidebar(!sidebarQuery.matches);
|
||||
};
|
||||
apply();
|
||||
detailQuery.addEventListener("change", apply);
|
||||
sidebarQuery.addEventListener("change", apply);
|
||||
return () => {
|
||||
detailQuery.removeEventListener("change", apply);
|
||||
sidebarQuery.removeEventListener("change", apply);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
void regenerate();
|
||||
}, [regenerate]);
|
||||
// ---------------------------------------------------------------- derived
|
||||
const allNodes = useMemo(() => data?.nodes ?? [], [data]);
|
||||
const allEdges = useMemo(() => data?.edges ?? [], [data]);
|
||||
|
||||
// The graph HTML lives in an iframe and can't read the app's CSS theme, so we
|
||||
// pass the active day/night mode via a query param; toggling re-renders it.
|
||||
const src = baseSrc ? `${baseSrc}&theme=${theme}` : null;
|
||||
const nodeById = useMemo(
|
||||
() => new Map(allNodes.map((n) => [n.id, n])),
|
||||
[allNodes],
|
||||
);
|
||||
const degrees = useMemo(
|
||||
() => computeDegrees(allNodes, allEdges),
|
||||
[allNodes, allEdges],
|
||||
);
|
||||
const stats = useMemo(
|
||||
() => computeGraphStats(allNodes, allEdges),
|
||||
[allNodes, allEdges],
|
||||
);
|
||||
|
||||
const nodeKindCounts = useMemo(() => {
|
||||
const counts = new Map<NodeKind, number>();
|
||||
for (const n of allNodes) {
|
||||
const kind = getNodeKind(n);
|
||||
counts.set(kind, (counts.get(kind) ?? 0) + 1);
|
||||
}
|
||||
return counts;
|
||||
}, [allNodes]);
|
||||
|
||||
const edgeLabelCounts = useMemo(() => {
|
||||
const counts = new Map<string, number>();
|
||||
for (const e of allEdges) {
|
||||
const label = getEdgeLabel(e);
|
||||
counts.set(label, (counts.get(label) ?? 0) + 1);
|
||||
}
|
||||
return counts;
|
||||
}, [allEdges]);
|
||||
|
||||
const filteredNodes = useMemo(
|
||||
() =>
|
||||
allNodes.filter(
|
||||
(n) => !disabledNodeKinds.has(getNodeKind(n)) && !hiddenNodeIds.has(n.id),
|
||||
),
|
||||
[allNodes, disabledNodeKinds, hiddenNodeIds],
|
||||
);
|
||||
|
||||
const filteredEdges = useMemo(() => {
|
||||
const visible = new Set(filteredNodes.map((n) => n.id));
|
||||
return allEdges.filter(
|
||||
(e) =>
|
||||
visible.has(e.source) &&
|
||||
visible.has(e.target) &&
|
||||
!disabledEdgeLabels.has(getEdgeLabel(e)),
|
||||
);
|
||||
}, [allEdges, filteredNodes, disabledEdgeLabels]);
|
||||
|
||||
const searchMatchIds = useMemo(() => {
|
||||
const keyword = searchKeyword.trim().toLowerCase();
|
||||
if (!keyword) return null;
|
||||
const matches = new Set<string>();
|
||||
for (const n of filteredNodes) {
|
||||
if (getNodeTitle(n).toLowerCase().includes(keyword)) matches.add(n.id);
|
||||
}
|
||||
return matches;
|
||||
}, [searchKeyword, filteredNodes]);
|
||||
|
||||
const topNodes = useMemo(
|
||||
() =>
|
||||
[...allNodes]
|
||||
.map((node) => ({ node, degree: degrees.get(node.id) ?? 0 }))
|
||||
.sort((a, b) => b.degree - a.degree)
|
||||
.slice(0, 8),
|
||||
[allNodes, degrees],
|
||||
);
|
||||
|
||||
const selectedNode = selectedNodeId ? (nodeById.get(selectedNodeId) ?? null) : null;
|
||||
const selectedNeighbors = useMemo(() => {
|
||||
if (!selectedNodeId) return [];
|
||||
const items: Array<{ node: (typeof allNodes)[number]; relation: string }> = [];
|
||||
const seen = new Set<string>();
|
||||
for (const e of filteredEdges) {
|
||||
const otherId =
|
||||
e.source === selectedNodeId
|
||||
? e.target
|
||||
: e.target === selectedNodeId
|
||||
? e.source
|
||||
: null;
|
||||
if (!otherId || seen.has(otherId)) continue;
|
||||
const other = nodeById.get(otherId);
|
||||
if (!other) continue;
|
||||
seen.add(otherId);
|
||||
items.push({ node: other, relation: getEdgeLabel(e) });
|
||||
}
|
||||
return items.sort(
|
||||
(a, b) => (degrees.get(b.node.id) ?? 0) - (degrees.get(a.node.id) ?? 0),
|
||||
);
|
||||
}, [selectedNodeId, filteredEdges, nodeById, degrees, allNodes]);
|
||||
|
||||
// Note detail for note-type nodes (summary / tags / timestamps / status).
|
||||
const noteId =
|
||||
selectedNode && (selectedNode.type || "").toLowerCase() === "note"
|
||||
? selectedNode.id
|
||||
: undefined;
|
||||
const { data: note, isLoading: noteLoading } = useKnowledgeNote(noteId);
|
||||
|
||||
// --------------------------------------------------------------- handlers
|
||||
const handleSelectNode = useCallback((id: string | null) => {
|
||||
setSelectedNodeId(id);
|
||||
}, []);
|
||||
|
||||
const handlePickNode = useCallback((id: string) => {
|
||||
setSelectedNodeId(id);
|
||||
canvasRef.current?.focusNode(id);
|
||||
}, []);
|
||||
|
||||
const handleSearchEnter = useCallback(() => {
|
||||
if (!searchMatchIds || searchMatchIds.size === 0) return;
|
||||
const first = searchMatchIds.values().next().value;
|
||||
if (first) handlePickNode(first);
|
||||
}, [searchMatchIds, handlePickNode]);
|
||||
|
||||
const handleToggleNodeKind = useCallback((kind: NodeKind) => {
|
||||
setDisabledNodeKinds((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(kind)) next.delete(kind);
|
||||
else next.add(kind);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleToggleEdgeLabel = useCallback((label: string) => {
|
||||
setDisabledEdgeLabels((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(label)) next.delete(label);
|
||||
else next.add(label);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleHideNode = useCallback((id: string) => {
|
||||
setHiddenNodeIds((prev) => new Set(prev).add(id));
|
||||
setSelectedNodeId((current) => (current === id ? null : current));
|
||||
}, []);
|
||||
|
||||
const handleRestoreHidden = useCallback(() => {
|
||||
setHiddenNodeIds(new Set());
|
||||
}, []);
|
||||
|
||||
const handleRefresh = useCallback(() => {
|
||||
void refetch().then((result) => {
|
||||
if (result.isError) {
|
||||
toast.error(
|
||||
result.error instanceof Error ? result.error.message : "刷新图谱失败",
|
||||
);
|
||||
}
|
||||
});
|
||||
}, [refetch]);
|
||||
|
||||
const handleFullscreen = useCallback(() => {
|
||||
const el = pageRef.current;
|
||||
if (!el) return;
|
||||
if (document.fullscreenElement) void document.exitFullscreen();
|
||||
else void el.requestFullscreen();
|
||||
}, []);
|
||||
|
||||
const handleViewSource = useCallback(
|
||||
(id: string) => {
|
||||
navigate(`/page/workspace/knowledge/${encodeURIComponent(id)}`);
|
||||
},
|
||||
[navigate],
|
||||
);
|
||||
|
||||
// ---------------------------------------------------------------- overlay
|
||||
let overlay: React.ReactNode = null;
|
||||
if (isLoading) {
|
||||
overlay = (
|
||||
<div className="kg-canvas-status">
|
||||
<Loader2 size={26} className="animate-spin" />
|
||||
<div className="kg-canvas-status-title">正在加载知识图谱...</div>
|
||||
</div>
|
||||
);
|
||||
} else if (isError) {
|
||||
overlay = (
|
||||
<div className="kg-canvas-status">
|
||||
<Network size={30} />
|
||||
<div className="kg-canvas-status-title">图谱加载失败</div>
|
||||
<div className="kg-canvas-status-desc">
|
||||
{error instanceof Error ? error.message : "请求失败,请稍后重试。"}
|
||||
</div>
|
||||
<button type="button" className="kg-icon-button" onClick={handleRefresh}>
|
||||
重试
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
} else if (allNodes.length === 0) {
|
||||
overlay = (
|
||||
<div className="kg-canvas-status">
|
||||
<Network size={30} />
|
||||
<div className="kg-canvas-status-title">暂无知识图谱数据</div>
|
||||
<div className="kg-canvas-status-desc">
|
||||
请先导入知识文档,或从知识库中抽取实体、标签与关系后再查看图谱。
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else if (filteredNodes.length === 0) {
|
||||
overlay = (
|
||||
<div className="kg-canvas-status">
|
||||
<Network size={30} />
|
||||
<div className="kg-canvas-status-title">当前筛选没有可显示的节点</div>
|
||||
<div className="kg-canvas-status-desc">
|
||||
请在左侧勾选更多节点类型,或恢复已隐藏的节点。
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const toolbar = (
|
||||
<>
|
||||
<div className="kg-floating-pill">
|
||||
<span className="kg-pill-label">布局</span>
|
||||
<button
|
||||
type="button"
|
||||
className={`kg-pill-button${layoutType === "force" ? " kg-pill-button-active" : ""}`}
|
||||
onClick={() => setLayoutType("force")}
|
||||
>
|
||||
力导向
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`kg-pill-button${layoutType === "circular" ? " kg-pill-button-active" : ""}`}
|
||||
onClick={() => setLayoutType("circular")}
|
||||
>
|
||||
环形
|
||||
</button>
|
||||
</div>
|
||||
<div className="kg-floating-pill">
|
||||
<button
|
||||
type="button"
|
||||
className={`kg-pill-button${showLabels ? " kg-pill-button-active" : ""}`}
|
||||
onClick={() => setShowLabels((v) => !v)}
|
||||
>
|
||||
<Tags size={13} /> 标签 {showLabels ? "开" : "关"}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="flex size-full min-h-0 flex-col">
|
||||
<header className="flex items-center gap-2 border-b p-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate("/page/workspace/knowledge")}
|
||||
>
|
||||
<ArrowLeft className="size-4" /> 返回
|
||||
</Button>
|
||||
<h1 className="text-base font-semibold">知识图谱</h1>
|
||||
{stats ? (
|
||||
<span className="text-muted-foreground text-xs">
|
||||
{stats.nodes} 个节点 · {stats.edges} 条关系
|
||||
</span>
|
||||
) : null}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="ml-auto"
|
||||
onClick={() => void regenerate()}
|
||||
disabled={exportGraph.isPending}
|
||||
>
|
||||
{exportGraph.isPending ? (
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
) : (
|
||||
<RefreshCw className="size-4" />
|
||||
)}
|
||||
重新生成
|
||||
</Button>
|
||||
</header>
|
||||
<div className="min-h-0 flex-1">
|
||||
{src ? (
|
||||
<iframe
|
||||
src={src}
|
||||
title="知识图谱"
|
||||
className="size-full border-0"
|
||||
sandbox="allow-scripts allow-same-origin"
|
||||
<div className="kg-page" ref={pageRef}>
|
||||
<GraphHeader
|
||||
nodeCount={filteredNodes.length}
|
||||
edgeCount={filteredEdges.length}
|
||||
totalNodes={allNodes.length}
|
||||
totalEdges={allEdges.length}
|
||||
refreshing={isFetching}
|
||||
showSidebar={showSidebar}
|
||||
showDetail={showDetail}
|
||||
onBack={() => navigate("/page/workspace/knowledge")}
|
||||
onRelayout={() => canvasRef.current?.relayout()}
|
||||
onFitView={() => canvasRef.current?.fitView()}
|
||||
onZoomIn={() => canvasRef.current?.zoomIn()}
|
||||
onZoomOut={() => canvasRef.current?.zoomOut()}
|
||||
onExport={() => canvasRef.current?.exportImage()}
|
||||
onFullscreen={handleFullscreen}
|
||||
onRefresh={handleRefresh}
|
||||
onToggleSidebar={() => setShowSidebar((v) => !v)}
|
||||
onToggleDetail={() => setShowDetail((v) => !v)}
|
||||
/>
|
||||
|
||||
<div
|
||||
className={[
|
||||
"kg-body",
|
||||
showSidebar ? "" : "kg-hide-left",
|
||||
showDetail ? "" : "kg-hide-right",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ")}
|
||||
>
|
||||
{showSidebar ? (
|
||||
<GraphSidebar
|
||||
searchKeyword={searchKeyword}
|
||||
searchMatchCount={searchMatchIds ? searchMatchIds.size : null}
|
||||
nodeKindCounts={nodeKindCounts}
|
||||
edgeLabelCounts={edgeLabelCounts}
|
||||
disabledNodeKinds={disabledNodeKinds}
|
||||
disabledEdgeLabels={disabledEdgeLabels}
|
||||
stats={stats}
|
||||
topNodes={topNodes}
|
||||
hiddenCount={hiddenNodeIds.size}
|
||||
onSearchChange={setSearchKeyword}
|
||||
onSearchEnter={handleSearchEnter}
|
||||
onToggleNodeKind={handleToggleNodeKind}
|
||||
onToggleEdgeLabel={handleToggleEdgeLabel}
|
||||
onRestoreHidden={handleRestoreHidden}
|
||||
onPickNode={handlePickNode}
|
||||
/>
|
||||
) : (
|
||||
<div className="text-muted-foreground flex h-full items-center justify-center text-sm">
|
||||
<Loader2 className="mr-2 size-4 animate-spin" /> 生成图谱中...
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
|
||||
<GraphCanvas
|
||||
ref={canvasRef}
|
||||
nodes={filteredNodes}
|
||||
edges={filteredEdges}
|
||||
degrees={degrees}
|
||||
selectedNodeId={selectedNodeId}
|
||||
searchMatchIds={searchMatchIds}
|
||||
layoutType={layoutType}
|
||||
showLabels={showLabels}
|
||||
onSelectNode={handleSelectNode}
|
||||
onTooltip={setTooltip}
|
||||
onZoomChange={setZoomLevel}
|
||||
toolbar={toolbar}
|
||||
overlay={overlay}
|
||||
/>
|
||||
|
||||
{showDetail ? (
|
||||
<GraphDetailPanel
|
||||
node={selectedNode}
|
||||
degree={selectedNodeId ? (degrees.get(selectedNodeId) ?? 0) : 0}
|
||||
neighbors={selectedNeighbors}
|
||||
note={noteId ? note : undefined}
|
||||
noteLoading={Boolean(noteId) && noteLoading}
|
||||
onViewSource={handleViewSource}
|
||||
onLocate={(id) => canvasRef.current?.focusNode(id)}
|
||||
onHide={handleHideNode}
|
||||
onPickNeighbor={handlePickNode}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<GraphFooter
|
||||
nodeKindCounts={nodeKindCounts}
|
||||
edgeLabels={[...edgeLabelCounts.keys()]}
|
||||
zoomLevel={zoomLevel}
|
||||
selectedTitle={selectedNode ? getNodeTitle(selectedNode) : null}
|
||||
visibleNodes={filteredNodes.length}
|
||||
visibleEdges={filteredEdges.length}
|
||||
/>
|
||||
|
||||
<GraphTooltip tooltip={tooltip} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user