# logicflow to liteflow

**Repository Path**: haocaifei_haocaifei/logicflow-liteflow

## Basic Information

- **Project Name**: logicflow to liteflow
- **Description**: 将logicflow生成的图形数据转化为liteflow规则
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 33
- **Created**: 2023-09-17
- **Last Updated**: 2023-09-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# logicflow-liteflow

将logicflow生成的图形数据转化为liteflow规则，支持拖拽和实时预览liteflow规则，支持 then、when、switch和循环节点

## 项目截图
![Alt text](./src/assets/image1.png)

## 启动步骤
```
npm install
npm run dev
```
## id生成和数据保存
id从1开始自动递增，和图形数据一起保存在localstorage中，可以自行修改

## 自定义节点
节点使用了logicflow中的自定义Html节点，可以通过修改vue文件来简单的修改节点的样式


![自定义节点目录](./src/assets/image.png)

## IF 节点的使用
1. if节点必须有两个分支（可以有空的分支，这时候非空分支一定为true）
![](./src/assets/if3.png)
![](./src/assets/if2.png)
2. 为了方便，当if节点在最后时可以只有一个分支，指定为true
![](./src/assets/if1.png)

## 循环节点的使用(更新)
循环节点更换成单独的一个节点
![](./src/assets/for1.png)
![](./src/assets/for2.png)
![](./src/assets/while.png)
![](./src/assets/interator.png)