Flow Frontend

Flow Engine 企业级流程引擎前端 - 基于 React 18、TypeScript、Rsbuild 的可视化流程设计与审批系统

Flow Framework Version

Package	Description	Version
@coding-flow/flow-core	核心框架库（无 UI 组件）
@coding-flow/flow-types	TypeScript 类型定义
@coding-flow/flow-icons	图标库
@coding-flow/flow-approval-presenter	审批 Presenter 框架
@coding-flow/flow-design	流程设计器组件（PC）
@coding-flow/flow-pc-ui	PC 端基础 UI 组件库
@coding-flow/flow-pc-form	PC 端表单组件库
@coding-flow/flow-pc-approval	PC 端审批组件库
@coding-flow/flow-mobile-ui	移动端基础 UI 组件库
@coding-flow/flow-mobile-form	移动端表单组件库
@coding-flow/flow-mobile-approval	移动端审批组件库

简介

Flow Frontend 是 Flow Engine 流程引擎的前端项目，提供完整的流程管理界面，包括可视化流程设计、动态表单配置、审批处理等功能。采用 monorepo 架构，支持 PC 端和移动端。

后端代码见 https://github.com/codingapi/flow-engine

核心特性

• 可视化流程设计器 - 基于 Flowgram.ai 的流程设计器，支持拖拽式节点配置
• 动态表单系统 - 表单设计器、表单渲染、字段权限管理
• 审批流程管理 - 待办/已办列表、审批处理、流程追踪
• Groovy 脚本编辑 - CodeMirror 6 集成的代码编辑器，支持语法高亮
• Monorepo 架构 - pnpm workspace 管理的模块化开发
• TypeScript 类型安全 - 完整的类型定义和类型检查
• 响应式设计 - 同时支持 PC 端和移动端

技术栈

• React 18 - UI 框架
• TypeScript 5 - 类型安全
• Rsbuild/Rslib - 构建工具
• pnpm 10 - 包管理器
• Ant Design 6 - UI 组件库
• Redux Toolkit - 状态管理
• CodeMirror 6 - 代码编辑器
• Flowgram.ai - 流程图编辑器
• Groovy - 脚本引擎支持

文档

文档	说明
集成手册	面向集成方的使用指南，包括插件定制机制、消息提示定制等
能力目录	各模块已有能力的参考文档（PKR 知识管理体系）
开发规范	编码规范与约定

外部依赖（非 workspace 包）

依赖	版本	用途	被引用包
@coding-form/form-engine	^0.0.19	表单引擎（FormView、createFormInstance、registerFormItems）	flow-pc-form、flow-mobile-form、flow-pc-approval、flow-mobile-approval、app-pc、app-mobile
@coding-script/script-engine	^0.0.9	脚本引擎（GroovyScriptConvertorUtil）	flow-design
@flowgram.ai/fixed-layout-editor	1.0.8	流程编辑器（FlowNodeRegistry、FlowNodeEntity）	flow-design

项目结构

flow-frontend/
├── apps/ # 应用层
│ ├── app-pc/ # PC 端应用
│ │ └── src/
│ │ ├── pages/ # 页面组件
│ │ ├── api/ # API 接口
│ │ └── config/ # 配置文件
│ └── app-mobile/ # 移动端应用
│ └── src/
│ ├── pages/ # 页面组件
│ ├── api/ # API 接口
│ └── config/ # 配置文件
├── packages/ # 包层
│ ├── flow-core/ # 核心框架库（无 UI 组件）
│ │ └── src/
│ │ ├── http.ts # HTTP 客户端
│ │ ├── hooks.ts # React Hooks
│ │ ├── presenter.ts # Presenter 模式
│ │ ├── groovy.ts # Groovy 脚本工具
│ │ ├── event.ts # 事件系统
│ │ ├── object.ts # 对象工具
│ │ └── ... # 其他工具模块
│ ├── flow-types/ # TypeScript 类型定义
│ │ └── src/
│ │ └── types/ # 业务类型定义
│ │ ├── flow-approval.ts # 流程审批类型
│ │ ├── flow-design.ts # 流程设计类型
│ │ ├── form-action.ts # 表单动作类型
│ │ ├── form-instance.ts # 表单实例类型
│ │ ├── form-type.ts # 表单类型
│ │ ├── form-view.ts # 表单视图类型
│ │ ├── icons.ts # 图标类型
│ │ └── index.ts # 类型统一导出
│ ├── flow-icons/ # 图标库
│ │ └── src/
│ │ ├── icons/ # 图标定义
│ │ └── index.ts # 导出
│ ├── flow-approval-presenter/ # 审批 Presenter 框架
│ │ └── src/
│ │ ├── api/ # API 接口
│ │ ├── context/ # 上下文
│ │ ├── hooks/ # 审批相关 Hooks
│ │ ├── model/ # 数据模型
│ │ ├── plugins/ # 插件
│ │ ├── presenters/ # Presenter 实现
│ │ ├── store/ # 状态管理
│ │ └── typings/ # 类型定义
│ ├── flow-design/ # 流程设计器组件（PC）
│ │ └── src/
│ │ ├── api/ # API 接口
│ │ ├── assets/ # 静态资源
│ │ ├── components/ # 组件
│ │ │ ├── design-editor/ # 设计编辑器
│ │ │ ├── design-import/ # 导入功能
│ │ │ ├── design-panel/ # 属性面板
│ │ │ └── groovy-code/ # Groovy 代码组件
│ │ ├── plugins/ # 节点视图类型插件
│ │ ├── script-components/ # 脚本编辑组件
│ │ │ ├── components/ # 脚本组件
│ │ │ ├── modal/ # 模态框
│ │ │ ├── services/ # 服务
│ │ │ ├── typings/ # 类型定义
│ │ │ └── utils/ # 工具函数
│ │ └── utils/ # 工具函数
│ ├── flow-pc/ # PC 端组件库集合
│ │ ├── flow-pc-ui/ # 基础 UI 组件库
│ │ │ └── src/
│ │ │ ├── components/ # 原子组件
│ │ │ ├── hooks/ # Hooks
│ │ │ ├── index.ts # 导出
│ │ │ └── type.ts # 类型定义
│ │ ├── flow-pc-form/ # 表单相关组件
│ │ │ └── src/
│ │ │ ├── api/ # 表单 API
│ │ │ ├── components/ # 表单组件
│ │ │ ├── plugins/ # 表单插件
│ │ │ ├── index.ts # 导出
│ │ │ └── type.d.ts # 类型定义
│ │ └── flow-pc-approval/ # 审批页面组件
│ │ └── src/
│ │ ├── api/ # 审批 API
│ │ ├── components/ # 审批组件
│ │ ├── plugins/ # 审批插件
│ │ ├── index.ts # 导出
│ │ └── type.d.ts # 类型定义
│ └── flow-mobile/ # 移动端组件库集合
│ ├── flow-mobile-ui/ # 基础 UI 组件库
│ │ └── src/
│ │ ├── components/ # 原子组件
│ │ └── index.ts # 导出
│ ├── flow-mobile-form/ # 表单相关组件
│ │ └── src/
│ │ ├── api/ # 表单 API
│ │ ├── components/ # 表单组件
│ │ ├── hooks/ # Hooks
│ │ ├── index.ts # 导出
│ │ └── type.ts # 类型定义
│ └── flow-mobile-approval/ # 审批页面组件
│ └── src/
│ ├── api/ # 审批 API
│ ├── components/ # 审批组件
│ ├── plugins/ # 审批插件
│ ├── index.ts # 导出
│ └── type.d.ts # 类型定义
├── scripts/ # 脚本工具
├── package.json # 根 package.json
└── pnpm-workspace.yaml # pnpm workspace 配置

模块依赖关系

基础包

flow-core (核心框架，无 UI)
↑
├── flow-types (类型定义)
├── flow-icons (图标库)
└── flow-approval-presenter (审批 Presenter)

PC 端组件

flow-core ← flow-pc-ui (基础 UI)
flow-core ← flow-types ← flow-pc-form (表单)
flow-pc-approval (审批) ── 依赖 flow-pc-ui + flow-pc-form + flow-approval-presenter
↑
flow-design (流程设计器) ── 依赖 flow-pc-ui
↑
app-pc ── 依赖 flow-design + flow-pc-ui + flow-pc-form + flow-pc-approval + flow-approval-presenter

移动端组件

flow-core ← flow-mobile-ui (基础 UI)
flow-core ← flow-types ← flow-mobile-form (表单)
flow-mobile-approval (审批) ── 依赖 flow-mobile-ui + flow-mobile-form + flow-approval-presenter
↑
app-mobile ── 依赖 flow-mobile-ui + flow-mobile-approval

图中仅画出 @coding-flow workspace 内的直接依赖，省略各包对 flow-core / flow-types 的传递依赖。

依赖说明

包名	说明	依赖
flow-core	全局框架依赖，只包含与 UI 无关的基础能力（HTTP、状态管理、工具函数等）	-
flow-types	全局类型定义，包含流程审批相关的业务类型（PC 端和移动端共用）	flow-core
flow-icons	图标库	flow-core
flow-approval-presenter	审批 Presenter 框架	flow-core, flow-types
flow-pc-ui	PC 端基础 UI 组件库，提供原子化组件	flow-core
flow-pc-form	表单相关功能，包含表单设计器、表单渲染器、字段权限管理	flow-core, flow-types
flow-pc-approval	审批页面功能，包含待办/已办列表、审批处理、流程追踪	flow-core, flow-types, flow-icons, flow-approval-presenter, flow-pc-ui, flow-pc-form
flow-design	流程设计器功能，基于 Flowgram.ai 的可视化流程设计器	flow-core, flow-types, flow-icons, flow-pc-ui
flow-mobile-ui	移动端基础 UI 组件库	flow-core
flow-mobile-form	移动端表单相关功能	flow-core, flow-types
flow-mobile-approval	移动端审批页面功能	flow-core, flow-types, flow-icons, flow-approval-presenter, flow-mobile-ui, flow-mobile-form
app-pc	PC 端示例应用	flow-core, flow-types, flow-design, flow-pc-ui, flow-pc-form, flow-pc-approval, flow-approval-presenter
app-mobile	移动端示例应用	flow-core, flow-types, flow-mobile-ui, flow-mobile-approval

快速开始

安装依赖

# 进入前端目录cd flow-frontend
# 安装依赖（推荐使用 pnpm）
pnpm install

开发模式

# 启动 PC 端应用
pnpm run dev:app-pc
# 启动移动端应用
pnpm run dev:app-mobile
# 监听模式编译核心库
pnpm run watch:flow-core
pnpm run watch:flow-types
pnpm run watch:flow-approval-presenter
pnpm run watch:flow-design
pnpm run watch:flow-pc-ui
pnpm run watch:flow-pc-form
pnpm run watch:flow-pc-approval
pnpm run watch:flow-mobile-ui
pnpm run watch:flow-mobile-form
pnpm run watch:flow-mobile-approval

构建

# 构建所有包
pnpm run build
# 构建 PC 端所有组件库
pnpm run build:flow-pc
# 构建移动端所有组件库
pnpm run build:flow-mobile
# 构建特定包
pnpm run build:flow-core # 核心框架库
pnpm run build:flow-types # 类型定义库
pnpm run build:flow-icons # 图标库
pnpm run build:flow-approval-presenter # 审批 Presenter 框架
pnpm run build:flow-design # 流程设计器组件库# 构建 PC 端组件
pnpm run build:flow-pc-ui # 基础 UI 组件库
pnpm run build:flow-pc-form # 表单组件库
pnpm run build:flow-pc-approval # 审批组件库# 构建移动端组件
pnpm run build:flow-mobile-ui # 基础 UI 组件库
pnpm run build:flow-mobile-form # 表单组件库
pnpm run build:flow-mobile-approval # 审批组件库# 构建应用
pnpm run build:app-pc
pnpm run build:app-mobile

测试

# 运行所有测试
pnpm run test# 运行核心包测试
pnpm run test:flow-core
# 运行设计器测试
pnpm run test:flow-design
# 运行 PC 端组件测试
pnpm run test:flow-pc
# 或单独测试
pnpm run test:flow-pc-ui
pnpm run test:flow-pc-form
pnpm run test:flow-pc-approval
# 运行移动端组件测试
pnpm run test:flow-mobile
# 或单独测试
pnpm run test:flow-mobile-ui
pnpm run test:flow-mobile-form
pnpm run test:flow-mobile-approval

许可证

本项目为 Flow Engine 的前端部分，遵循主项目的 LICENSE。