AiKnowledgeGraph

第一阶段优化说明

• 新项目推荐优先使用 modelValue 传入完整图谱数据；nodes / edges 仍作为兼容入口保留。
• 可通过 labels 覆盖搜索、状态、编辑器和导出按钮文案。
• 类型图例筛选会先计算可见节点集合，再过滤边，避免大图场景中重复构造节点集合。

AiKnowledgeGraph 是基于 AntV G6 的专业关系图谱组件，支持节点位置持久化、受控多选、批量操作、搜索导航、类型图例筛选、自动 minimap、性能模式、撤销重做和高清导出。

默认 force 布局使用 d3-force 物理模拟。拖动节点时会实时重新计算弹簧力、节点斥力和碰撞力，周围节点会自动避让并逐渐稳定；超过 500 个节点进入性能模式后自动回退为普通拖拽。

Vue2.6 + Lingxi SDK 示例

核心配置

属性	类型	默认值	说明
modelValue	AiKnowledgeGraphData	-	图谱数据
selectedNodeIds	string[]	[]	受控选中节点
selectedEdgeIds	string[]	[]	受控选中边
historyLimit	number	50	撤销历史上限
updateDebounce	number	300	v-model 更新防抖毫秒数
showLegend	boolean	true	显示类型图例与筛选
showMinimap	boolean | 'auto'	'auto'	超过 100 节点自动显示
performanceMode	boolean | 'auto'	'auto'	超过 500 节点自动关闭动画
neighborDepth	number	1	邻居关系深度

事件包括受控选择事件、节点和边的增删改移动事件、layout:change、export 与 error。Ctrl、Command 或 Shift 点击可追加选择；编辑模式下可批量改色和删除。

暴露方法包括 undo、redo、canUndo、canRedo、fitView、focusNodes、clearSelection 和 export。

导出

支持 JSON、SVG 和 PNG。图片导出可配置 pixelRatio、backgroundColor 和 padding。

迁移说明

• 单值内部选择升级为 selectedNodeIds 与 selectedEdgeIds 数组。
• 拖拽节点后会写回 x、y 并触发 node:move。
• v-model 改为默认 300ms 防抖提交；离散操作事件仍立即触发。

API 标准表

Props

属性	类型	默认值	说明
modelValue	AiKnowledgeGraphData	-	图谱数据。
nodes / edges	AiKnowledgeGraphNode[] / AiKnowledgeGraphEdge[]	-	非 v-model 图谱输入。
layout	AiKnowledgeGraphLayout	'force'	布局类型。
title	string	'Knowledge Graph'	标题。
height	string | number	420	高度。
editable / readonly	boolean	false	编辑与只读控制。
searchable	boolean	true	是否显示搜索。
selectedNodeIds / selectedEdgeIds	string[]	-	受控选择。
showLegend / showMinimap / performanceMode	boolean | 'auto'	true / 'auto' / 'auto'	图例、小地图和性能模式。
neighborDepth	number	1	邻居高亮深度。
labels	AiKnowledgeGraphLabels	-	文案覆盖。

Events

事件	参数	说明
update:modelValue	AiKnowledgeGraphData	数据更新。
update:selectedNodeIds / update:selectedEdgeIds	string[]	受控选择更新。
selection:change	{ nodeIds, edgeIds }	选择变化。
node:add / node:update / node:click	node, context	节点操作。
edge:add / edge:update / edge:click	edge, context	边操作。
node:delete / edge:delete	ids	删除节点或边。
node:move	nodes	节点位置变化。
layout:change	layout	布局变化。
export	type, payload	导出完成。
error	unknown	异常。

Slots

当前无公开 slot。

Exposes

方法	参数	说明
undo() / redo()	-	撤销或重做。
canUndo / canRedo	-	是否可撤销或重做。
fitView()	-	适配图谱视图。
focusNodes(ids)	string[]	聚焦节点。
clearSelection()	-	清空选择。
export(type)	AiKnowledgeGraphExportType	导出 JSON、SVG 或 PNG。

样式入口

import '@zhiyongui/lingxi-ui/ai-knowledge-graph/style.css'

FAQ

普通聊天页需要引入图谱样式吗？

不需要。只有直接使用 AiKnowledgeGraph 或 AiRichContent 图谱 block 时才引入对应样式。