大数跨境
0
0

【技术分享之十一】Vue-flow AI工作流前端开发组件库

【技术分享之十一】Vue-flow AI工作流前端开发组件库 中烟创新
2024-06-12
0
导读:只有你能分享的知识,才是真正属于你的真知

北京中烟创新科技有限公司(简称:中烟创新)自成立以来,一直专注于人工智能技术的研发和人机协同应用场景的赋能,并以此为核心提供专业的服务在过去的近一年中,公司取得了一些令人瞩目的研究成果,我们一直坚持把一些研究成果技术分享给更多人,今天是中烟创新第十一次技术分享,希望能为前沿技术探索者贡献一份力量,互相学习,共同进步。

Vue Flow具有内置功能,如缩放和平移以及专用控件、单选和多选、可拖动元素、可自定义的节点和边以及一系列事件处理程序。
Vue-flow是 ReactFlow 的 Vue 版本,目前只支持 在Vue3中使用,对Vue2不兼容,目前国内使用较少。包含四个功能组件 corebackgroundcontrolsminimap,可按需使用。
Vueflow官网:https://vueflow.dev/

Github地址:https://github.com/bcakmakoglu/vue-flow

这个组件库可用于开发大模型配置工作流。



优点


轻松上手内置缩放和平移功能、元素拖动、选择等等。
可定制:使用自定义节点、边缘和连接线并扩展Vue Flow的功能。
快速:链路被动更改,仅重新渲染适当的元素。
工具和组合:带有图形助手和状态可组合函数,用于高级用途。
附加组件:背景(内置模式、高度、宽度或颜色),小地图(右下角)、控件(左下角)。


缺点


仓库迭代版本较少,2022年进入首次迭代。
国内使用人数少,没有相关技术博客介绍,通过官网学习。
1.依赖安装
$ npm i --save @vue-flow/core# or$ yarn add @vue-flow/core# 其他根据需要安装,例如:$ npm i --save @vue-flow/additional-components
2.局部引入
//样式引入import '@vue-flow/core/dist/style.css';import '@vue-flow/core/dist/theme-default.css';//根据使用情况,引入相关组件import { Background, Panel, PanelPosition, Controls } from '@vue-flow/additional-components'import { VueFlow, useVueFlow } from '@vue-flow/core'
3.组件使用
<VueFlow style="width: fit-view-on-init;" class="my-flow" v-model="elements">  <Background />  <Panel :position="PanelPosition.TopRight">    <div>      <label for="ishidden">        hidden        <input id="ishidden" v-model="isHidden" type="checkbox" />      </label>    </div>  </Panel>  <Controls /></VueFlow>

数字员工:增强广大劳动者的获得感幸福感安全感
标书查重系统:让每一份标书都独一无二
AI助力合同审查:高效、准确、一目了然
●采购文件编制与审核系统,助力采购数智化转型
●精准、规范、智能!智能稽核,为一线减负

【声明】内容源于网络
0
0
中烟创新
国内最早开始探索和研发大模型应用开发的企业,以企业级大模型应用开发平台为基础,快速创建智能体应用,加速释放大模型潜力
内容 45
粉丝 0
中烟创新 国内最早开始探索和研发大模型应用开发的企业,以企业级大模型应用开发平台为基础,快速创建智能体应用,加速释放大模型潜力
总阅读0
粉丝0
内容45