一个基于Vue3的工作流编辑器组件库，包含工具栏组件和属性编辑器组件，提供完整的工作流编辑功能。
- ✅ Vue 3 + TypeScript 支持
- ✅ 响应式设计
- ✅ Tailwind CSS 样式
- ✅ Font Awesome 图标
- ✅ 完整的事件系统
- ✅ ES模块和UMD格式支持
npm install vue3-workflow-editorimport { createApp } from 'vue'
import { Vue3WorkflowEditor } from 'vue3-workflow-editor'
import 'vue3-workflow-editor/dist/vue3-workflow-editor.css'
const app = createApp(App)
app.use(Vue3WorkflowEditor)import { WorkflowToolbar } from 'vue3-workflow-editor'
import 'vue3-workflow-editor/dist/vue3-workflow-editor.css'
export default {
components: {
WorkflowToolbar
}
}<template>
<WorkflowToolbar
:scale="scale"
@zoom-in="handleZoomIn"
@zoom-out="handleZoomOut"
@reset-zoom="handleResetZoom"
@save="handleSave"
@run="handleRun"
@reset="handleReset"
@publish="handlePublish"
/>
</template>
<script setup>
import { ref } from 'vue'
const scale = ref(1.0)
const handleZoomIn = () => {
scale.value = Math.min(scale.value + 0.1, 3.0)
}
const handleZoomOut = () => {
scale.value = Math.max(scale.value - 0.1, 0.1)
}
const handleResetZoom = () => {
scale.value = 1.0
}
const handleSave = () => {
console.log('保存工作流')
}
const handleRun = (data) => {
console.log('运行工作流', data)
}
const handleReset = () => {
console.log('重置工作流')
}
const handlePublish = (data) => {
console.log('发布工作流', data)
}
</script><template>
<div class="flex">
<div class="flex-1">
<!-- 工作流画布区域 -->
<div class="workflow-canvas">
<!-- 您的工作流画布内容 -->
</div>
</div>
<div class="w-80">
<!-- 属性编辑器 -->
<PropertyEditor />
</div>
</div>
</template>
<script setup>
import { PropertyEditor } from 'vue3-workflow-editor'
</script><!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue3-workflow-editor/dist/vue3-workflow-editor.css">
</head>
<body>
<div id="app">
<workflow-toolbar
:scale="scale"
@zoom-in="handleZoomIn"
@zoom-out="handleZoomOut"
@reset-zoom="handleResetZoom"
@save="handleSave"
@run="handleRun"
@reset="handleReset"
@publish="handlePublish"
></workflow-toolbar>
</div>
<script src="https://unpkg.com/vue3-workflow-editor/dist/vue3-workflow-editor.umd.js"></script>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const scale = ref(1.0);
const handleZoomIn = () => {
scale.value = Math.min(scale.value + 0.1, 3.0);
};
// ... 其他事件处理函数
return {
scale,
handleZoomIn,
// ... 其他方法
};
}
})
.component('WorkflowToolbar', Vue3WorkflowEditor.WorkflowToolbar)
.mount('#app');
</script>
</body>
</html>WorkflowToolbar- 工作流工具栏组件PropertyEditor- 属性编辑器组件PublishDialog- 发布对话框组件
IOEditor- 输入输出编辑器LLMProperties- LLM节点属性编辑器KnowledgeProperties- 知识库节点属性编辑器ConditionalProperties- 条件节点属性编辑器StartProperties- 开始节点属性编辑器OutputProperties- 输出节点属性编辑器SearchProperties- 搜索节点属性编辑器LLMPromptEditor- LLM提示词编辑器VariableSuggestions- 变量建议组件
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| scale | number | 是 | - | 当前缩放比例 |
| 事件名 | 参数 | 说明 |
|---|---|---|
| zoom-in | - | 放大缩放 |
| zoom-out | - | 缩小缩放 |
| reset-zoom | - | 重置缩放 |
| save | - | 保存工作流 |
| run | { timestamp, source } | 运行工作流 |
| reset | - | 重置工作流 |
| publish | { timestamp, source } | 发布工作流 |
无需传入props，PropertyEditor会自动从工作流状态管理中获取选中节点信息。
- 自动检测选中的节点类型
- 根据节点类型显示相应的属性编辑界面
- 支持多种节点类型：开始节点、LLM节点、知识库节点、条件节点、搜索节点、输出节点
- 实时保存属性更改
- 支持输入输出变量配置
- 提供变量建议和高亮显示
- Vue 3.x
- Tailwind CSS (用于样式)
- Font Awesome (用于图标)
# 克隆项目
git clone https://github.com/TECNB/vue-workflow-editor.git
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建库
npm run build:lib
# 预览
npm run previewMIT
- 新增 PropertyEditor 属性编辑器组件
- 新增多种节点属性编辑器子组件
- 支持LLM、知识库、条件、搜索等节点类型
- 增强的变量管理和提示功能
- 完善的TypeScript类型支持
- 初始版本
- 基础工具栏功能
- 缩放控制
- 事件系统