【Ease UI】2026-04-16 组件更新：新增组件 xly-flow-designer 流程设计器基于warm-flow二次开发

🚀 即插即用的 Vue 3 业务组件库，让中后台开发回归简单

Ease UI 是一套为「快速复制」而生的 Vue 3 业务组件库。每个组件都是独立的 .vue 单文件，不依赖任何外部样式或工具函数，直接复制到你的项目即可使用。它仅依赖 Element Plus，却解决了中后台开发中表格选择混乱、搜索表单代码臃肿、日期范围绑定繁琐等真实痛点，让组件复用像复制代码一样简单。

✨ 新增

xly-flow-designer （流程设计器组件）src/components/xly-flow-designer/index.vue
- 基于 LogicFlow + WarmFlow 二次封装的可视化流程设计组件
- 支持两种画布模式：经典模式（CLASSICS） 和 仿钉钉模式（MIMIC） ，可通过 flow.modelValue 切换
- 支持通过 flow prop 传入流程定义对象，内部自动初始化并渲染画布
- 支持 @save 事件，点击「保存」按钮后将流程 JSON 数据回传给父组件
- 工具栏：缩小 / 放大 / 自适应（经典模式）/ 上一步 / 下一步 / 下载流程图 / 下载 JSON / 保存
- 支持撤销/重做（Ctrl+Z / Ctrl+Y），基于 LogicFlow 历史快照
- 支持下载画布为 PNG 图片（Snapshot 扩展）
- 节点类型：开始节点 / 中间节点（审批/办理/通知）/ 串行网关 / 并行网关 / 结束节点 / 跳转条件边
- 经典模式（CLASSICS）：标准 LogicFlow 节点样式，支持拖拽面板（DndPanel）、节点内联插入（InsertNodeInPolyline）、右键菜单（Menu）
- 仿钉钉模式（MIMIC）：自定义节点视图（baseNode.vue），圆角卡片样式，支持点击边弹出操作浮层（EdgeTooltip），可从边中间快速插入节点或网关
- 节点属性面板（propertySetting.vue）：点击节点弹出 XlyModal 侧抽屉，按节点类型动态渲染表单（开始/中间/网关/结束/跳转条件）
- 中间节点属性：节点名称、节点类型（审批/办理/通知）、审批人配置（通过 xly-user-picker 选人）、监听器配置（类型/路径/变量）
- 跳转条件属性：条件名称、条件类型（无条件/表达式/存在审批人员）、前置节点选择
- 网关节点属性：仅节点名称
- 支持获取前置节点列表（getPreviousNodes），跳转条件可关联任意前置审批节点
- common/js/tool.js：提供 json2LogicFlowJson（WarmFlow → LogicFlow 格式转换）、logicFlowJsonToWarmFlow（LogicFlow → WarmFlow 格式转换）、isClassics、getPreviousNodes 等工具函数
- common/vue/nodeExtList.vue：经典模式左侧节点拖拽面板

💡 项目初衷

在中后台系统开发中，我们频繁遇到这些问题：

痛点	现状
🔧 组件库太重	引入一套组件库，需要学习整套 API、主题配置、构建配置，成本太高
📋 复制粘贴难	想从项目 A 复用一个组件到项目 B，发现依赖了各种公共样式、工具函数，拆不出来
🧩 Element Plus 不够用	基础组件有了，但业务组件（如带展开/收起的搜索表单、智能表格）还得自己写
🔄 重复造轮子	每个项目都要重新实现表格选择、日期范围绑定、表单布局...

于是，Ease UI 诞生了。

打造一套极致轻量、即拷即用的业务组件，让开发者可以像复制一段代码一样简单地复用组件。

✨ 核心优势

🎯 单文件组件，即拷即用

每个组件都是完全独立的 .vue 单文件，包含：

✅ 完整的 <template> 模板
✅ 独立的 <script setup> 逻辑
✅ 自包含的 <style scoped> 样式

无需任何配置，直接复制 .vue 文件到你的项目即可使用！

bash 复制代码

# 只需要这一个文件
src/components/xly-button/index.vue

# 不需要：
❌ 额外的 CSS 文件
❌ 公共样式依赖
❌ 复杂的构建配置
❌ 主题变量文件

🔌 仅依赖 Element Plus

本组件库仅依赖 Element Plus（及其图标库），不引入其他 UI 组件库：

json 复制代码

{
"dependencies": {
"element-plus": "^2.13.6",
"@element-plus/icons-vue": "^2.3.2"
}
}

依赖说明：

🎨 Element Plus - 仅使用其图标组件（@element-plus/icons-vue）
🚫 无其他 UI 库 - 不依赖 Ant Design Vue、Naive UI、Vuetify 等
🚫 无样式库 - 不依赖 Tailwind CSS、UnoCSS 等原子类框架
📝 纯 Vue 3 + SCSS - 所有组件样式独立编写

这意味着：

如果你的项目已经使用 Element Plus，可以无缝集成
如果你的项目没有 Element Plus，只需安装它即可
不会有多个 UI 库的样式冲突问题

如果你觉得这个项目还不错或对你有帮助，欢迎到 Gitee 或 GitHub 上点个 Star，这是对作者最好的支持～开源不易，且用且珍惜。

🔗 Gitee：https://gitee.com/yun_hua_admin/ease-ui

🔗 GitHub：https://github.com/Momingyun/ease-ui

🔗 预览地址：https://ease-ui.com