KnowledgeGraphEditor
约 1719 字大约 6 分钟
2025-09-03
概述
KnowledgeGraphEditor 是一个基于 Vue 3 的知识图谱编辑组件,提供可视化的知识点和关系管理功能。支持添加、编辑、删除知识点和关系,以及批量操作。
组件接口
Props 定义
interface Props {
courseId: string // 课程ID
selectedNodes: Set<string> // 选中的节点ID集合
selectedLinks: Set<string> // 选中的连接ID集合
}Emits 定义
interface Emits {
(e: 'refresh'): void // 请求刷新数据
(e: 'clear-selection'): void // 清除选择
}核心功能函数
clearSelection
功能: 清除所有选中的节点和连接
参数: 无
返回值: 无
使用示例:
clearSelection()resetNodeForm
功能: 重置添加知识点表单
参数: 无
返回值: 无
使用示例:
resetNodeForm()resetRelationForm
功能: 重置添加关系表单
参数: 无
返回值: 无
使用示例:
resetRelationForm()submitAddNode
功能: 提交添加知识点表单
参数: 无
返回值: Promise<void>
使用示例:
await submitAddNode()submitAddRelation
功能: 提交添加关系表单
参数: 无
返回值: Promise<void>
使用示例:
await submitAddRelation()editSelectedNode
功能: 编辑选中的节点
参数: 无
返回值: 无
使用示例:
editSelectedNode()editSelectedRelation
功能: 编辑选中的关系
参数: 无
返回值: 无
使用示例:
editSelectedRelation()deleteSelectedNodes
功能: 删除选中的所有节点
参数: 无
返回值: Promise<void>
使用示例:
await deleteSelectedNodes()deleteSelectedRelations
功能: 删除选中的所有关系
参数: 无
返回值: Promise<void>
使用示例:
await deleteSelectedRelations()applyBatchDifficulty
功能: 批量应用难度级别
参数: 无
返回值: Promise<void>
使用示例:
await applyBatchDifficulty()selectNode
功能: 选择指定节点
参数:
nodeId: string- 节点ID
返回值: 无
使用示例:
selectNode('node-123')getNodeRelationCount
功能: 获取节点的关系数量
参数:
nodeId: string- 节点ID
返回值: number - 关系数量
使用示例:
const count = getNodeRelationCount('node-123')editNode
功能: 编辑指定节点
参数:
node: any- 节点对象
返回值: 无
使用示例:
editNode(nodeObject)submitEditNode
功能: 提交节点编辑表单
参数: 无
返回值: Promise<void>
使用示例:
await submitEditNode()deleteNode
功能: 删除指定节点
参数:
nodeId: string- 节点ID
返回值: Promise<void>
使用示例:
await deleteNode('node-123')getRelationDescription
功能: 获取关系的描述文本
参数:
relation: any- 关系对象
返回值: string - 关系描述
使用示例:
const description = getRelationDescription(relationObject)getRelationTypeLabel
功能: 获取关系类型的中文标签
参数:
relationType: string- 关系类型
返回值: string - 中文标签
使用示例:
const label = getRelationTypeLabel('prerequisite')
// 返回: '前置知识'editRelation
功能: 编辑指定关系
参数:
relation: any- 关系对象
返回值: 无
使用示例:
editRelation(relationObject)deleteRelation
功能: 删除指定关系
参数:
relationId: string- 关系ID
返回值: Promise<void>
使用示例:
await deleteRelation('relation-123')selectSourceNode
功能: 选择源节点
参数:
node: any- 节点对象
返回值: 无
使用示例:
selectSourceNode(nodeObject)selectTargetNode
功能: 选择目标节点
参数:
node: any- 节点对象
返回值: 无
使用示例:
selectTargetNode(nodeObject)confirmDelete
功能: 确认删除操作
参数: 无
返回值: Promise<void>
使用示例:
await confirmDelete()loadData
功能: 加载知识点和关系数据
参数: 无
返回值: Promise<void>
使用示例:
await loadData()计算属性
selectedNodesCount
功能: 获取选中节点的数量
返回值: number - 选中节点数量
selectedLinksCount
功能: 获取选中连接的数量
返回值: number - 选中连接数量
selectedNodeIds
功能: 获取选中节点的ID数组
返回值: string[] - 节点ID数组
filteredNodes
功能: 获取过滤后的节点列表
返回值: any[] - 过滤后的节点数组
过滤条件: 根据搜索关键词过滤
availableNodes
功能: 获取所有可用节点
返回值: any[] - 所有节点数组
availableTargetNodes
功能: 获取可用的目标节点(排除已选的源节点)
返回值: any[] - 可用目标节点数组
selectedNodeForRelations
功能: 获取用于显示关系的选中节点
返回值: any | null - 选中节点或null
selectedNodeRelations
功能: 获取选中节点的所有关系
返回值: any[] - 关系数组
表单数据结构
知识点表单 (NodeEditData)
interface NodeEditData {
name: string // 知识点名称
description: string // 描述
difficulty_level: number // 难度级别 (1-5)
}关系表单 (LinkEditData)
interface LinkEditData {
source_point_id: string // 源节点ID
target_point_id: string // 目标节点ID
relation_type: RelationType // 关系类型
weight: number // 权重 (0-1)
description: string // 描述
}
type RelationType = 'prerequisite' | 'follow_up' | 'related' | 'contains' | 'similar'对话框控制
添加知识点对话框
showAddNodeDialog: boolean- 控制显示newNodeForm: NodeEditData- 表单数据
添加关系对话框
showAddRelationDialog: boolean- 控制显示newRelationForm: LinkEditData- 表单数据sourceNodeSearch: string- 源节点搜索targetNodeSearch: string- 目标节点搜索
编辑知识点对话框
showEditNodeDialog: boolean- 控制显示editNodeForm: NodeEditData- 表单数据editingNode: any- 正在编辑的节点
删除确认对话框
showDeleteDialog: boolean- 控制显示deleteDialogTitle: string- 对话框标题deleteDialogMessage: string- 对话框消息pendingDeleteAction: Function- 待执行的删除操作
使用示例
基本使用
<template>
<KnowledgeGraphEditor
:course-id="courseId"
:selected-nodes="selectedNodes"
:selected-links="selectedLinks"
@refresh="loadGraphData"
@clear-selection="clearGraphSelection"
/>
</template>
<script setup>
import { ref } from 'vue'
const courseId = 'course-123'
const selectedNodes = ref(new Set())
const selectedLinks = ref(new Set())
const loadGraphData = () => {
// 重新加载图谱数据
}
const clearGraphSelection = () => {
selectedNodes.value.clear()
selectedLinks.value.clear()
}
</script>添加知识点示例
// 通过编程方式添加知识点
const addNewNode = async () => {
const nodeData = {
name: '新的知识点',
description: '这是新添加的知识点描述',
difficulty_level: 3
}
const success = await addKnowledgePoint('course-123', nodeData)
if (success) {
console.log('知识点添加成功')
}
}添加关系示例
// 通过编程方式添加关系
const addNewRelation = async () => {
const relationData = {
source_point_id: 'node-1',
target_point_id: 'node-2',
relation_type: 'prerequisite',
weight: 0.8,
description: '前置知识关系'
}
const success = await addKnowledgeRelation(relationData)
if (success) {
console.log('关系添加成功')
}
}批量操作示例
// 批量修改节点难度
const batchUpdateDifficulty = async () => {
const selectedNodeIds = ['node-1', 'node-2', 'node-3']
for (const nodeId of selectedNodeIds) {
const success = await editKnowledgePoint(nodeId, {
difficulty_level: 4
})
if (!success) {
console.error(`更新节点 ${nodeId} 失败`)
}
}
}事件处理
节点选择事件
当用户点击节点列表中的节点时触发:
selectNode(nodeId: string)表单提交事件
submitAddNode()- 提交添加知识点表单submitAddRelation()- 提交添加关系表单submitEditNode()- 提交编辑知识点表单
删除操作事件
deleteSelectedNodes()- 删除选中的节点deleteSelectedRelations()- 删除选中的关系deleteNode(nodeId)- 删除指定节点deleteRelation(relationId)- 删除指定关系
数据加载
组件挂载时自动调用 loadData() 方法加载数据。该方法可以重写以连接实际的数据源:
const loadData = async () => {
try {
// 从API加载数据
const [nodesResponse, relationsResponse] = await Promise.all([
fetch('/api/knowledge-points'),
fetch('/api/knowledge-relations')
])
allNodes.value = await nodesResponse.json()
allRelations.value = await relationsResponse.json()
} catch (error) {
console.error('加载数据失败:', error)
}
}错误处理
所有操作都包含错误处理,操作失败时会显示相应的错误信息。使用 isEditing 状态来防止重复提交。
样式定制
组件使用以下CSS类名,可以通过覆盖这些类来自定义样式:
.knowledge-graph-editor- 编辑器容器- 各个对话框和表单使用标准的UI组件类名
版权所有
版权归属:Evoliant
许可证:MIT