🚀 即插即用的 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：经典模式左侧节点拖拽面板

  

💡 项目初衷

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

于是，Ease UI 诞生了。

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

✨ 核心优势

🎯 单文件组件，即拷即用

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

• • ✅ 完整的 <template> 模板

• • ✅ 独立的 <script setup> 逻辑

• • ✅ 自包含的 <style scoped> 样式

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

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

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

🔌 仅依赖 Element Plus

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

{
"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