Alg Flow V2

基于 Vue Flow 1.45.0 封装的算法流程图组件库，提供简洁易用的流程图编辑和展示功能。

功能特性

• 🎨 现代化设计 - 基于 Vue 3 + TypeScript 构建
• 🔧 易于使用 - 简单的 API 设计，开箱即用
• 🎯 专业定制 - 针对算法流程图场景优化
• 🎪 高度可配置 - 支持主题、样式、行为定制
• 📱 响应式 - 支持各种屏幕尺寸
• 🔌 插件化 - 可扩展的节点和边类型

快速开始

安装

npm install alg-flow-v2 @vue-flow/core @vue-flow/background @vue-flow/controls @vue-flow/minimap vue

基础使用

<template>
  <div style="height: 600px">
    <FlowEditor
      v-model="flowData"
      :config="config"
      @node-click="onNodeClick"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { FlowEditor } from 'alg-flow-v2'
import '@vue-flow/core/dist/style.css'
import '@vue-flow/controls/dist/style.css'
import '@vue-flow/minimap/dist/style.css'
import 'alg-flow-v2/style.css'

const flowData = ref({
  nodes: [
    {
      id: 'start',
      type: 'start',
      position: { x: 100, y: 100 },
      data: { label: '开始' }
    }
  ],
  edges: []
})

const config = {
  readonly: false,
  showMinimap: true,
  showControls: true
}

function onNodeClick(node) {
  console.log('Node clicked:', node)
}
</script>

使用 Composable

<script setup lang="ts">
import { useFlowEditor } from 'alg-flow-v2'

const {
  nodes,
  edges,
  flowData,
  addNode,
  removeNode,
  addEdge
} = useFlowEditor()

// 添加节点
function addStartNode() {
  addNode('start', { x: 100, y: 100 })
}

// 添加边
function connectNodes(sourceId: string, targetId: string) {
  addEdge(sourceId, targetId)
}
</script>

API 文档

FlowEditor 组件

Props

| 属性 | 类型 | 默认值 | 描述 | |------|------|--------|------| | modelValue | FlowData | { nodes: [], edges: [] } | 流程图数据 | | config | FlowEditorConfig | {} | 编辑器配置 | | readonly | boolean | false | 只读模式 | | showMinimap | boolean | true | 显示小地图 | | showControls | boolean | true | 显示控制器 | | enableSelection | boolean | true | 启用选择功能 |

事件

| 事件名 | 参数 | 描述 | |--------|------|------| | update:modelValue | FlowData | 数据更新时触发 | | node-click | AlgNode | 节点点击时触发 | | edge-click | AlgEdge | 边点击时触发 | | nodes-change | AlgNode[] | 节点变化时触发 | | edges-change | AlgEdge[] | 边变化时触发 | | flow-save | FlowData | 流程保存时触发 |

节点类型

支持以下内置节点类型：

• start - 开始节点
• end - 结束节点
• process - 处理节点
• decision - 判断节点
• input - 输入节点
• output - 输出节点
• custom - 自定义节点

类型定义

interface AlgNode {
  id: string
  type: AlgorithmNodeType
  position: { x: number; y: number }
  data: BaseNodeData
}

interface AlgEdge {
  id: string
  source: string
  target: string
  animated?: boolean
  label?: string
}

interface FlowData {
  nodes: AlgNode[]
  edges: AlgEdge[]
}

开发

环境要求

• Node.js 16+
• Vue 3.3+
• @vue-flow/core 1.45.0+
• @vue-flow/background 1.3.0+
• @vue-flow/controls 1.1.0+
• @vue-flow/minimap 1.4.0+

开发设置

# 克隆项目
git clone <repository-url>

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建库
npm run build

目录结构

src/
├── components/          # Vue 组件
│   ├── FlowEditor/     # 主编辑器组件
│   ├── NodeTypes/      # 节点类型
│   ├── EdgeTypes/      # 边类型
│   └── Controls/       # 控制组件
├── composables/        # 组合式函数
├── utils/              # 工具函数
├── types/              # TypeScript 类型
└── styles/             # 样式文件

浏览器支持

• Chrome ≥ 87
• Firefox ≥ 78
• Safari ≥ 14
• Edge ≥ 88

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request 来帮助改进项目。

更新日志

1.0.0

• ✨ 初始版本发布
• ✨ 基础流程图编辑功能
• ✨ 内置算法节点类型
• ✨ TypeScript 类型支持
• ✨ 主题系统