|
| 1 | +# ELSA 简介 |
| 2 | + |
| 3 | +## ✨ 功能亮点 |
| 4 | + |
| 5 | +### 核心框架 (framework/elsa) |
| 6 | + |
| 7 | +- **统一的抽象数据结构** |
| 8 | + |
| 9 | + - Graph、Page、Shape结构通用于任意业务场景 |
| 10 | + - 全链路JSON序列化能力,兼容任何持久化存储方案 |
| 11 | +- **拖拽式流程编排** |
| 12 | + |
| 13 | + - 支持图形拖拽和画布拖拽,并提供节点整理和一键显示所有节点的能力 |
| 14 | + |
| 15 | +### 前端应用 (elsa-react) |
| 16 | + |
| 17 | +- **集成React能力** |
| 18 | + |
| 19 | + - 基于Context的上下文传递 |
| 20 | + - 节点渲染缓存:React.memo + 自定义shouldComponentUpdate |
| 21 | +- **集成Ant Design能力** |
| 22 | + |
| 23 | + - 基于Form组件的实时校验提示系统 |
| 24 | + - 基于Tree组件封装的节点上下文观察者机制 |
| 25 | + |
| 26 | + |
| 27 | +## 🚀 核心架构概览 |
| 28 | +### 1. 分层架构 |
| 29 | + |
| 30 | +```markdown |
| 31 | +├─ fit-elsa-react/ # React前端应用 |
| 32 | +│ └─ src/ # 前端源代码 |
| 33 | +└─ fit-elsa/ # 核心框架 |
| 34 | + ├─ common/ # 通用工具 |
| 35 | + ├─ core/ # 工作流运行时引擎 |
| 36 | + └─ plugins/ # 可扩展插件系统 |
| 37 | +``` |
| 38 | + |
| 39 | +### 2. 技术栈 |
| 40 | + |
| 41 | +### **@fit-elsa/elsa-core(核心框架模块)** |
| 42 | + |
| 43 | +#### **核心工具链** |
| 44 | +| 类别 | 技术栈 | |
| 45 | +| --------- | -------------------------------------------- | |
| 46 | +| **构建工具** | Webpack 5 + Babel 7 + Cross-env(多环境配置) | |
| 47 | +| **代码转换** | `@babel/preset-env`+`core-js@3`(ES6+ 向下兼容) | |
| 48 | +| **依赖管理** | npm scripts(支持 daily/debug/pro 多环境构建) | |
| 49 | + |
| 50 | +#### **关键依赖** |
| 51 | +| 类别 | 技术栈 | |
| 52 | +| ---------- | ---------------------------------------------- | |
| 53 | +| **流程可视化 ** | `@dagrejs/dagre`(图形布局算法) + `[email protected]`(图表渲染) | |
| 54 | +| **国际化 ** | `[email protected]`(多语言支持) | |
| 55 | +| **视频处理 ** | `[email protected]`(视频播放器集成) | |
| 56 | + |
| 57 | +### @fit-elsa/elsa-react(React 前端模块) |
| 58 | +#### **核心框架** |
| 59 | +| 类别 | 技术栈 | |
| 60 | +| ----------- | ----------------------------------------- | |
| 61 | +| **前端框架** | React 18 + TypeScript(隐式依赖) | |
| 62 | +| **状态管理** | 原生 React Hooks(未显式引入 Redux) | |
| 63 | +| **UI 组件库 ** | Ant [email protected] + `@ant-design/[email protected]` | |
| 64 | + |
| 65 | +#### **开发工具链** |
| 66 | +| 类别 | 技术栈 | |
| 67 | +| --------- | ------------------------------------------ | |
| 68 | +| **构建工具** | Vite@5(替代 Webpack) +`vite-plugin-react@4` | |
| 69 | +| **代码规范** | ESLint +`react-hooks`/`refresh`插件 | |
| 70 | +| **特殊集成** | `vite-plugin-svgr`(SVG 转 React 组件) | |
| 71 | + |
| 72 | +#### **关键功能依赖** |
| 73 | +| 类别 | 技术栈 | |
| 74 | +| ------------- | ---------------------------------------------------------------------- | |
| 75 | +| **编辑器 ** | `[email protected]`(代码编辑器) + `@tinymce/[email protected]`(注释节点富文本编辑器) | |
| 76 | +| **HTTP 客户端 ** | `[email protected]`(API 请求) | |
| 77 | +| **核心依赖** | `@fit-elsa/elsa-core`(本地路径引用) | |
| 78 | + |
| 79 | +## 快速开始 |
| 80 | + |
| 81 | +所需要的环境: |
| 82 | + |
| 83 | +* 编辑器,如 WebStorm |
| 84 | +* node 推荐 v20.16.0 |
| 85 | + |
| 86 | +## 编译启动 |
| 87 | + |
| 88 | +```bash |
| 89 | +# 从根目录开始 |
| 90 | +# 进入fit-elsa目录 |
| 91 | +cd ./framework/elsa/fit-elsa |
| 92 | + |
| 93 | +# 安装依赖 |
| 94 | +npm i |
| 95 | + |
| 96 | +# 编译构建 |
| 97 | +npm run build |
| 98 | + |
| 99 | +# 进入fit-elsa-react目录 |
| 100 | +cd ../elsa-react |
| 101 | + |
| 102 | +# 安装依赖 |
| 103 | +npm i |
| 104 | + |
| 105 | +# 编译构建 |
| 106 | +npm run build |
| 107 | + |
| 108 | +#启动 fit-elsa-react |
| 109 | +npm run dev |
| 110 | +``` |
0 commit comments