Vue 3 + TypeScript + Vite

Relation Graph Component (关系连接图谱)

这是一个基于 Vue 3、Canvas 和 CSS Flexbox 布局构建的高性能关系图谱组件。它专门用于展示多级、多列之间的复杂关联关系，支持节点吸附、动态连线、局部滚动以及交互高亮。

🚀 核心特性

• 多类型布局：支持 card（卡片）、simple（简单节点）和 nested（三级嵌套）三种列展示模式。

• 高性能连线：使用 HTML5 Canvas 绘制连接线，通过逻辑算法确保在局部滚动时线条依然精准对齐。

• 响应式适配：列宽可自定义（flex 比例），支持横向与纵向文字排列。

• 智能交互：

• 节点 Hover 自动高亮相关路径。

• 二级节点点击筛选（可联动过滤下游路径）。

• 支持三级节点网格（Grid）或流式（Flex）布局切换。

• 精美样式：内置毛玻璃效果（Backdrop-filter）、渐变背景及平滑的过渡动画。

📦 安装与配置

## 🛠️ 基础用法

```vue
<template>
  <RelationGraph
    :columns="columns"
    :nodesData="nodesData"
    :connections="connections"
    @node-click="handleNodeClick"
  />
</template>

<script setup>
import RelationGraph from '@/components/RelationGraph.vue';

// 示例数据详见 API 说明
</script>

📝 API 说明

Props (属性)

| 参数 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | columns | Array | required | 列配置，定义各列的标题、背景、布局类型等。 | | nodesData | Object | required | 节点数据，键名为列索引，值为节点数组（含嵌套子节点）。 | | connections | Array | [] | 连线配置，定义起点和终点的列、节点及子节点索引。 | | lineWidth | Number | 1.5 | 连线宽度。 | | dotRadius | Number | 6 | 三级节点圆点半径。 | | dotMode | String | 'dot' | 子节点显示模式：dot (圆点) 或 leaf (树叶/标签)。 | | highlightMode | String | null | 高亮模式：neighbor (邻居) 或 all (全路径)。 |

Columns 配置项详解

{
  id: string;
  label: string;          // 列标题
  type: 'card' | 'simple' | 'default'; // 列展示模式
  flex?: number;          // 宽度权重
  bgColor?: string;       // 背景色/渐变
  headerGradient?: string; // 标题栏渐变
  listLayout?: string;    // 'grid' | 'grid-2' 支持网格布局
  level3Horizontal?: boolean; // 三级节点是否横向排列
  showArrow?: boolean;    // 是否显示列内垂直导向箭头
}

Events (事件)

| 事件名 | 参数 | 说明 | | --- | --- | --- | | node-click | { node, colIndex, level } | 点击节点时触发，返回节点原始数据及其所在层级信息。 |

🎨 样式自定义

组件采用了 CSS 变量（Custom Properties）设计，你可以在父级容器中轻松覆盖主题：

:root {
  --primary-color: #3b82f6;   /* 主题蓝 */
  --secondary-color: #8b5cf6; /* 选中紫色 */
  --text-main: #374151;       /* 主文字颜色 */
  --transition: all 0.2s ease; /* 动画节奏 */
}

⚠️ 开发注意事项

1. 滚动容器：为了确保连线位置计算准确，组件内部定义了 .column-body 为局部滚动承载者。请勿轻易修改其 overflow 属性，以免连线失效。
2. Canvas 刷新：当数据动态变化或外部容器尺寸改变时，可通过组件暴露的 refresh() 方法手动触发重新绘图。
3. 节点引用：内部使用 setNodeRef 动态收集 DOM 引用，确保三级嵌套节点即使在 v-for 中也能被 Canvas 精确定位。

Generated by Gemini v3 Flash

实际案例