Snowy VSO Web Design

一个基于Vue 3的流程设计组件库，提供流程图设计功能。

安装

npm install snowy-vso-web-design --save

使用方法

全局注册

import { createApp } from 'vue'
import SnowyVsoWebDesign from 'snowy-vso-web-design'
import 'snowy-vso-web-design/dist/style.css'
import App from './App.vue'

const app = createApp(App)
app.use(SnowyVsoWebDesign)
app.mount('#app')

然后在组件中使用：

<template>
  <SnowyFlow />
</template>

按需引入

<template>
  <Flow />
</template>

<script setup>
import SnowyVsoWebDesign from 'snowy-vso-web-design'
import 'snowy-vso-web-design/dist/style.css'

const { Flow } = SnowyVsoWebDesign
</script>

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建库
npm run build:lib

发布

# 构建
npm run build:lib

# 发布到npm
npm publish

功能特点

• 🎯 支持多种节点类型（开始、结束、普通节点、子流程、切换、脚本等）
• 🔗 节点自由连线与规则校验
• 📝 节点属性配置
• 🎨 自定义主题样式
• 📤 支持导出 XML 格式
• 🖱️ 支持画布缩放、拖拽
• 🔄 支持组件热更新
• 📜 支持多种脚本语言
• 🎮 可视化流程编排
• 🔍 实时流程验证

核心特性

组件编排

• 支持将复杂业务逻辑拆分为独立组件
• 组件之间解耦,可自由组合
• 支持串行、并行、条件、循环等多种编排方式

规则引擎

• 简单易用的 DSL 规则语法
• 支持规则动态加载和热更新
• 支持多种规则存储方式(本地文件、数据库、配置中心等)

脚本支持

• 支持多种脚本语言(JavaScript、Python、Groovy等)
• 脚本与 Java 完全互通
• 支持脚本动态刷新

适用场景

• 复杂业务流程编排
• 价格计算引擎
• 规则决策引擎
• 订单处理流程
• 动态业务流程
• 可配置的业务流程

快速开始

安装依赖

npm install

运行项目

npm run dev

构建生产版本

npm run build

技术栈

• Vue 3
• TypeScript
• LogicFlow
• Element Plus
• Monaco Editor
• Vite

项目结构

src/
├── flow/                # 流程图相关代码
│   ├── components/      # 组件
│   ├── assets/         # 资源文件
│   ├── utils/          # 工具函数
│   └── index.vue       # 主组件
├── style.css           # 全局样式
└── main.ts             # 入口文件

节点类型

• START：开始节点
• COMMON：普通节点
• SUBFLOW：子流程节点
• SWITCH：切换节点
• SCRIPT：脚本节点
• END：结束节点

开发配置

环境要求

• Node.js >= 16
• npm >= 7

开发服务器配置

// vite.config.ts
export default defineConfig({
  server: {
    host: '0.0.0.0',
    port: 8080
  },
  base: '/login-flow'
})

使用示例

<template>
  <div class="approve-container">
    <Flow />
  </div>
</template>

<script setup lang="ts">
import Flow from './flow/index.vue'
</script>

数据格式

XML 导出格式

<?xml version="1.0" encoding="UTF-8"?>
<process>
  <node type="START">
    <text>开始</text>
  </node>
</process>

参考文档

• LiteFlow 官方文档