1. 引言
在当今快速发展的企业应用中，工作流管理系统扮演着至关重要的角色。它通过自动化业务流程，提高了企业运营效率，减少了人为错误，并确保了业务流程的标准化执行。Activiti作为一个功能强大的开源工作流引擎，被广泛应用于企业级应用开发中。然而，传统的流程设计器往往在用户体验和可维护性方面存在不足，难以满足现代企业对快速迭代和灵活定制的需求。
本文将详细介绍我司如何基于Vue.js构建新一代Activiti工作流设计器，解决旧版本设计器的痛点，并显著提升用户体验和开发效率。
[感谢提供的支持](MiyueFE 的个人主页 - 文章 - 掘金)
2. 旧版本流程设计器的痛点分析
旧版本流程设计器面临的主要问题：
2.1 技术栈老化
旧版本设计器采用了Angular + jQuery的技术栈，这种组合在当前前端生态中已经显得过时。Angular的版本较旧，难以利用现代前端开发的最佳实践，而jQuery的大量使用导致代码结构松散，可维护性差。
2.2 交互体验欠佳
从截图中可以看出，旧版本设计器的界面较为传统，交互方式单一，用户操作路径复杂。拖拽体验不流畅，配置项分散，导致用户在设计流程时需要频繁切换界面，降低了工作效率。
2.3 扩展性受限
由于技术架构的限制，旧版本设计器在扩展新功能时面临巨大挑战。添加新的流程元素类型或自定义属性需要修改大量代码，开发周期长且容易引入新的bug。
2.4 维护成本高昂
随着业务需求的不断变化，旧版本设计器的维护成本与日俱增。缺乏模块化设计和组件化思想，使得代码复用率低，每次修改都需要投入大量的人力和时间。
3.新版本流程设计器
3.1 技术栈更新
新版设计器采用Vue2.js + bpmn-js + Activiti 7的技术栈，结合Vue强大的生态，为后续开发扩展提供了坚实的基础
3.2 交互体验提升
从新的UI页面可以看出，新版设计器将工具、画布、组件、配置等功能划分开，与市面上新款流程设计器风格保持一致，用户可以清晰的绘制流程及各个流程节点的配置。
