From 4ff525ba79f528a68578fdd17d41212e5cb83fc6 Mon Sep 17 00:00:00 2001 From: RonnyChan96 Date: Mon, 12 May 2025 17:10:40 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[elsa]=20=E6=B7=BB=E5=8A=A0Elsa=E6=A8=A1?= =?UTF-8?q?=E5=9D=97README?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- framework/elsa/README.md | 110 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 110 insertions(+) create mode 100644 framework/elsa/README.md diff --git a/framework/elsa/README.md b/framework/elsa/README.md new file mode 100644 index 000000000..e05071310 --- /dev/null +++ b/framework/elsa/README.md @@ -0,0 +1,110 @@ +# ELSA 简介 + +## ✨ 功能亮点 + +### 核心框架 (framework/elsa) + +- **统一的抽象数据结构** + + - Graph、Page、Shape结构通用于任意业务场景 + - 全链路JSON序列化能力，兼容任何持久化存储方案 +- **拖拽式流程编排** + + - 支持图形拖拽和画布拖拽，并提供节点整理和一键显示所有节点的能力 + +### 前端应用 (elsa-react) + +- **集成React能力** + + - 基于Context的上下文传递 + - 节点渲染缓存：React.memo + 自定义shouldComponentUpdate +- **集成Ant Design能力** + + - 基于Form组件的实时校验提示系统 + - 基于Tree组件封装的节点上下文观察者机制 + + +## 🚀 核心架构概览 +### 1. 分层架构 + +```markdown +├─ fit-elsa-react/ # React前端应用 +│ └─ src/ # 前端源代码 +└─ fit-elsa/ # 核心框架 + ├─ common/ # 通用工具 + ├─ core/ # 工作流运行时引擎 + └─ plugins/ # 可扩展插件系统 +``` + +### 2. 技术栈 + +### **@fit-elsa/elsa-core（核心框架模块）​** + +#### **核心工具链** +| 类别 | 技术栈 | +| --------- | -------------------------------------------- | +| ​**构建工具** | Webpack 5 + Babel 7 + Cross-env（多环境配置） | +| ​**代码转换** | `@babel/preset-env` + `core-js@3`（ES6+ 向下兼容） | +| ​**依赖管理** | npm scripts（支持 daily/debug/pro 多环境构建） | + +#### **关键依赖** +| 类别 | 技术栈 | +| ---------- | ---------------------------------------------- | +| ​**流程可视化** | `@dagrejs/dagre`（图形布局算法） + `echarts@5.4`（图表渲染） | +| ​**国际化** | `i18next@21.6`（多语言支持） | +| ​**视频处理** | `video.js@8.9`（视频播放器集成） | + +### @fit-elsa/elsa-react（React 前端模块）​ +#### **核心框架** +| 类别 | 技术栈 | +| ----------- | ----------------------------------------- | +| ​**前端框架** | React 18 + TypeScript（隐式依赖） | +| ​**状态管理** | 原生 React Hooks（未显式引入 Redux） | +| ​**UI 组件库** | Ant Design@4.24 + `@ant-design/icons@5.3` | + +#### **开发工具链** +| 类别 | 技术栈 | +| --------- | ------------------------------------------ | +| ​**构建工具** | Vite@5（替代 Webpack） + `vite-plugin-react@4` | +| ​**代码规范** | ESLint + `react-hooks`/`refresh` 插件 | +| ​**特殊集成** | `vite-plugin-svgr`（SVG 转 React 组件） | + +#### **关键功能依赖** +| 类别 | 技术栈 | +| ------------- | ---------------------------------------------------------------------- | +| ​**编辑器** | `monaco-editor@0.34`（代码编辑器） + `@tinymce/tinymce-react@4.3`（注释节点富文本编辑器） | +| ​**HTTP 客户端** | `axios@1.8`（API 请求） | +| ​**核心依赖** | `@fit-elsa/elsa-core`（本地路径引用） | + +## 快速开始 + +所需要的环境： + +* 编辑器，如 WebStorm +* node 推荐 v20.16.0 + +## 编译启动 + +```bash +# 从根目录开始 +# 进入fit-elsa目录 +cd ./framework/elsa/fit-elsa + +# 安装依赖 +npm i + +# 编译构建 +npm run build + +# 进入fit-elsa-react目录 +cd ../elsa-react + +# 安装依赖 +npm i + +# 编译构建 +npm run build + +#启动 fit-elsa-react +npm run dev +``` \ No newline at end of file From a55b730cc4ede4c8c99837c976d670f37b06212b Mon Sep 17 00:00:00 2001 From: RonnyChan96 Date: Mon, 12 May 2025 17:12:41 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[elsa]=20=E5=8E=BB=E9=99=A4=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E6=A0=87=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- framework/elsa/README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/framework/elsa/README.md b/framework/elsa/README.md index e05071310..ca9d53873 100644 --- a/framework/elsa/README.md +++ b/framework/elsa/README.md @@ -38,43 +38,43 @@ ### 2. 技术栈 -### **@fit-elsa/elsa-core（核心框架模块）​** +### **@fit-elsa/elsa-core（核心框架模块）** #### **核心工具链** | 类别 | 技术栈 | | --------- | -------------------------------------------- | -| ​**构建工具** | Webpack 5 + Babel 7 + Cross-env（多环境配置） | -| ​**代码转换** | `@babel/preset-env` + `core-js@3`（ES6+ 向下兼容） | -| ​**依赖管理** | npm scripts（支持 daily/debug/pro 多环境构建） | +| **构建工具** | Webpack 5 + Babel 7 + Cross-env（多环境配置） | +| **代码转换** | `@babel/preset-env`+`core-js@3`（ES6+ 向下兼容） | +| **依赖管理** | npm scripts（支持 daily/debug/pro 多环境构建） | #### **关键依赖** | 类别 | 技术栈 | | ---------- | ---------------------------------------------- | -| ​**流程可视化** | `@dagrejs/dagre`（图形布局算法） + `echarts@5.4`（图表渲染） | -| ​**国际化** | `i18next@21.6`（多语言支持） | -| ​**视频处理** | `video.js@8.9`（视频播放器集成） | +| **流程可视化** | `@dagrejs/dagre`（图形布局算法） +`echarts@5.4`（图表渲染） | +| **国际化** | `i18next@21.6`（多语言支持） | +| **视频处理** | `video.js@8.9`（视频播放器集成） | -### @fit-elsa/elsa-react（React 前端模块）​ +### @fit-elsa/elsa-react（React 前端模块） #### **核心框架** | 类别 | 技术栈 | | ----------- | ----------------------------------------- | -| ​**前端框架** | React 18 + TypeScript（隐式依赖） | -| ​**状态管理** | 原生 React Hooks（未显式引入 Redux） | -| ​**UI 组件库** | Ant Design@4.24 + `@ant-design/icons@5.3` | +| **前端框架** | React 18 + TypeScript（隐式依赖） | +| **状态管理** | 原生 React Hooks（未显式引入 Redux） | +| **UI 组件库** | Ant Design@4.24 +`@ant-design/icons@5.3` | #### **开发工具链** | 类别 | 技术栈 | | --------- | ------------------------------------------ | -| ​**构建工具** | Vite@5（替代 Webpack） + `vite-plugin-react@4` | -| ​**代码规范** | ESLint + `react-hooks`/`refresh` 插件 | -| ​**特殊集成** | `vite-plugin-svgr`（SVG 转 React 组件） | +| **构建工具** | Vite@5（替代 Webpack） +`vite-plugin-react@4` | +| **代码规范** | ESLint +`react-hooks`/`refresh`插件 | +| **特殊集成** | `vite-plugin-svgr`（SVG 转 React 组件） | #### **关键功能依赖** | 类别 | 技术栈 | | ------------- | ---------------------------------------------------------------------- | -| ​**编辑器** | `monaco-editor@0.34`（代码编辑器） + `@tinymce/tinymce-react@4.3`（注释节点富文本编辑器） | -| ​**HTTP 客户端** | `axios@1.8`（API 请求） | -| ​**核心依赖** | `@fit-elsa/elsa-core`（本地路径引用） | +| **编辑器** | `monaco-editor@0.34`（代码编辑器） +`@tinymce/tinymce-react@4.3`（注释节点富文本编辑器） | +| **HTTP 客户端** | `axios@1.8`（API 请求） | +| **核心依赖** | `@fit-elsa/elsa-core`（本地路径引用） | ## 快速开始