Evoliant Docs

简体中文

English

外观

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