vue3 logicflow 实现流程图展示 不同节点显示颜色不同

Vue3 中结合 LogicFlow 可以用来实现动态流程图的展示，其中不同节点的颜色可以通过数据驱动的方式控制。LogicFlow 是一个轻量级的 JavaScript 动画库，专门用于绘制流程图、状态机等图形。

以下是基本步骤：

1. 安装依赖：首先需要安装 `logic-flow` 和 Vue 的集成库如 `vue-logic-flow` 或者手动引入 LogicFlow。

npm install logic-flow vue-logic-flow --save

2. 初始化 LogicFlow 组件：在 Vue 组件中，创建一个 Flow 组件，并配置其初始数据结构，包括节点和连线。

<template>
  <lf-flow :model="flowModel" @node-entered="onNodeEntered"></lf-flow>
</template>

<script>
import { Flow } from 'vue-logic-flow';

export default {
  components: {
    Flow,
  },
  data() {
    return {
      flowModel: {
        nodes: [], // 初始化节点数组
        edges: []   // 初始化连线数组
      }
    };
  },
  methods: {
    onNodeEntered(node) {
      // 当节点进入视图时，可以获取到该节点并设置颜色
      node.color = this.getNodeColor(node.data.id); // 节点数据包含一个标识 id
    },
    getNodeColor(id) {
      // 根据 id 计算并返回对应的颜色，例如通过一个映射对象或 API 查询
      // 示例：
      const colorMap = {
        'node-type-1': 'red',
        'node-type-2': 'blue',
        // ...
      };
      return colorMap[id] || 'default-color';
    }
  }
};
</script>

3. 更新节点颜色：每当节点的数据有变化，比如节点类型改变时，你可以更新对应的 `getNodeColor` 函数的结果，然后逻辑流会自动更新节点的样式。

4. 配合 CSS：定义 CSS 规则，关联节点 ID 和颜色。

.lf-node[node-id='node-type-1'] {
  background-color: red;
}

.lf-node[node-id='node-type-2'] {
  background-color: blue;
}