{"id":47693897,"url":"https://github.com/codingapi/flow-frontend","last_synced_at":"2026-04-11T11:14:13.257Z","repository":{"id":343621438,"uuid":"1178444385","full_name":"codingapi/flow-frontend","owner":"codingapi","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-26T11:36:33.000Z","size":715,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-03-26T13:48:02.971Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codingapi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-11T03:00:39.000Z","updated_at":"2026-03-26T11:33:17.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/codingapi/flow-frontend","commit_stats":null,"previous_names":["codingapi/flow-frontend"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/codingapi/flow-frontend","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingapi%2Fflow-frontend","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingapi%2Fflow-frontend/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingapi%2Fflow-frontend/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingapi%2Fflow-frontend/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codingapi","download_url":"https://codeload.github.com/codingapi/flow-frontend/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codingapi%2Fflow-frontend/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31309716,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-02T12:59:32.332Z","status":"ssl_error","status_checked_at":"2026-04-02T12:54:48.875Z","response_time":89,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-02T16:11:52.569Z","updated_at":"2026-04-02T16:11:53.255Z","avatar_url":"https://github.com/codingapi.png","language":"TypeScript","readme":"# Flow Frontend\n\n\u003e Flow Engine 企业级流程引擎前端 - 基于 React 18、TypeScript、Rsbuild 的可视化流程设计与审批系统\n\n## Flow Framework Version\n\n| Package                                                                            | Description              | Version                                                                                                                                             |\n|------------------------------------------------------------------------------------|--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|\n| [@coding-flow/flow-core](https://github.com/codingapi/flow-frontend)               | 核心框架库（无 UI 组件） | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-core.svg)](https://www.npmjs.com/package/@coding-flow/flow-core)                             |\n| [@coding-flow/flow-types](https://github.com/codingapi/flow-frontend)              | TypeScript 类型定义      | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-types.svg)](https://www.npmjs.com/package/@coding-flow/flow-types)                           |\n| [@coding-flow/flow-icons](https://github.com/codingapi/flow-frontend)              | 图标库                   | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-icons.svg)](https://www.npmjs.com/package/@coding-flow/flow-icons)                           |\n| [@coding-flow/flow-approval-presenter](https://github.com/codingapi/flow-frontend) | 审批 Presenter 框架     | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-approval-presenter.svg)](https://www.npmjs.com/package/@coding-flow/flow-approval-presenter) |\n| [@coding-flow/flow-design](https://github.com/codingapi/flow-frontend)             | 流程设计器组件（PC）     | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-design.svg)](https://www.npmjs.com/package/@coding-flow/flow-design)                         |\n| [@coding-flow/flow-pc-ui](https://github.com/codingapi/flow-frontend)              | PC 端基础 UI 组件库      | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-pc-ui.svg)](https://www.npmjs.com/package/@coding-flow/flow-pc-ui)                           |\n| [@coding-flow/flow-pc-form](https://github.com/codingapi/flow-frontend)            | PC 端表单组件库          | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-pc-form.svg)](https://www.npmjs.com/package/@coding-flow/flow-pc-form)                       |\n| [@coding-flow/flow-pc-approval](https://github.com/codingapi/flow-frontend)        | PC 端审批组件库          | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-pc-approval.svg)](https://www.npmjs.com/package/@coding-flow/flow-pc-approval)               |\n| [@coding-flow/flow-mobile-ui](https://github.com/codingapi/flow-frontend)          | 移动端基础 UI 组件库     | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-mobile-ui.svg)](https://www.npmjs.com/package/@coding-flow/flow-mobile-ui)                   |\n| [@coding-flow/flow-mobile-form](https://github.com/codingapi/flow-frontend)        | 移动端表单组件库         | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-mobile-form.svg)](https://www.npmjs.com/package/@coding-flow/flow-mobile-form)               |\n| [@coding-flow/flow-mobile-approval](https://github.com/codingapi/flow-frontend)    | 移动端审批组件库         | [![npm](https://img.shields.io/npm/v/@coding-flow/flow-mobile-approval.svg)](https://www.npmjs.com/package/@coding-flow/flow-mobile-approval)       |\n\n\n## 简介\n\nFlow Frontend 是 Flow Engine 流程引擎的前端项目，提供完整的流程管理界面，包括可视化流程设计、动态表单配置、审批处理等功能。采用 monorepo 架构，支持 PC 端和移动端。\n\n### 核心特性\n\n- **可视化流程设计器** - 基于 Flowgram.ai 的流程设计器，支持拖拽式节点配置\n- **动态表单系统** - 表单设计器、表单渲染、字段权限管理\n- **审批流程管理** - 待办/已办列表、审批处理、流程追踪\n- **Groovy 脚本编辑** - CodeMirror 6 集成的代码编辑器，支持语法高亮\n- **Monorepo 架构** - pnpm workspace 管理的模块化开发\n- **TypeScript 类型安全** - 完整的类型定义和类型检查\n- **响应式设计** - 同时支持 PC 端和移动端\n\n## 技术栈\n\n- **React 18** - UI 框架\n- **TypeScript 5** - 类型安全\n- **Rsbuild/Rslib** - 构建工具\n- **pnpm 10** - 包管理器\n- **Ant Design 6** - UI 组件库\n- **Redux Toolkit** - 状态管理\n- **CodeMirror 6** - 代码编辑器\n- **Flowgram.ai** - 流程图编辑器\n- **Groovy** - 脚本引擎支持\n\n## 项目结构\n\n```\nflow-frontend/\n├── apps/                                    # 应用层\n│   ├── app-pc/                              # PC 端应用\n│   │   └── src/\n│   │       ├── pages/                       # 页面组件\n│   │       ├── api/                         # API 接口\n│   │       └── config/                      # 配置文件\n│   └── app-mobile/                          # 移动端应用\n│       └── src/\n│           ├── pages/                       # 页面组件\n│           ├── api/                         # API 接口\n│           └── config/                      # 配置文件\n├── packages/                                # 包层\n│   ├── flow-core/                           # 核心框架库（无 UI 组件）\n│   │   └── src/\n│   │       ├── http.ts                      # HTTP 客户端\n│   │       ├── hooks.ts                     # React Hooks\n│   │       ├── presenter.ts                 # Presenter 模式\n│   │       ├── groovy.ts                    # Groovy 脚本工具\n│   │       ├── event.ts                     # 事件系统\n│   │       ├── object.ts                    # 对象工具\n│   │       └── ...                          # 其他工具模块\n│   ├── flow-types/                          # TypeScript 类型定义\n│   │   └── src/\n│   │       └── types/                       # 业务类型定义\n│   │           ├── flow-approval.ts         # 流程审批类型\n│   │           ├── flow-design.ts           # 流程设计类型\n│   │           ├── form-instance.ts         # 表单实例类型\n│   │           ├── form-type.ts             # 表单类型\n│   │           ├── form-view.ts             # 表单视图类型\n│   │           └── icons.ts                 # 图标类型\n│   ├── flow-icons/                          # 图标库\n│   │   └── src/\n│   │       ├── icons/                       # 图标定义\n│   │       └── index.ts                     # 导出\n│   ├── flow-approval-presenter/             # 审批 Presenter 框架\n│   │   └── src/\n│   │       ├── api/                         # API 接口\n│   │       ├── context/                     # 上下文\n│   │       ├── hooks/                       # 审批相关 Hooks\n│   │       ├── model/                       # 数据模型\n│   │       ├── plugins/                     # 插件\n│   │       ├── presenters/                  # Presenter 实现\n│   │       ├── store/                       # 状态管理\n│   │       └── typings/                     # 类型定义\n│   ├── flow-design/                         # 流程设计器组件（PC）\n│   │   └── src/\n│   │       ├── api/                         # API 接口\n│   │       ├── assets/                      # 静态资源\n│   │       ├── components/                  # 组件\n│   │       │   ├── design-editor/           # 设计编辑器\n│   │       │   ├── design-import/           # 导入功能\n│   │       │   ├── design-panel/            # 属性面板\n│   │       │   └── groovy-code/             # Groovy 代码组件\n│   │       ├── plugins/                     # 节点视图类型插件\n│   │       ├── script-components/           # 脚本编辑组件\n│   │       │   ├── components/              # 脚本组件\n│   │       │   ├── modal/                   # 模态框\n│   │       │   ├── services/                # 服务\n│   │       │   ├── typings/                 # 类型定义\n│   │       │   └── utils/                   # 工具函数\n│   │       └── utils/                       # 工具函数\n│   ├── flow-pc/                             # PC 端组件库集合\n│   │   ├── flow-pc-ui/                      # 基础 UI 组件库\n│   │   │   └── src/\n│   │   │       ├── components/              # 原子组件\n│   │   │       ├── hooks/                   # Hooks\n│   │   │       ├── index.ts                 # 导出\n│   │   │       └── type.ts                  # 类型定义\n│   │   ├── flow-pc-form/                    # 表单相关组件\n│   │   │   └── src/\n│   │   │       ├── api/                     # 表单 API\n│   │   │       ├── components/              # 表单组件\n│   │   │       ├── plugins/                 # 表单插件\n│   │   │       ├── index.ts                 # 导出\n│   │   │       └── type.d.ts                # 类型定义\n│   │   └── flow-pc-approval/                # 审批页面组件\n│   │       └── src/\n│   │           ├── api/                     # 审批 API\n│   │           ├── components/              # 审批组件\n│   │           ├── plugins/                 # 审批插件\n│   │           ├── index.ts                 # 导出\n│   │           └── type.d.ts                # 类型定义\n│   └── flow-mobile/                         # 移动端组件库集合\n│       ├── flow-mobile-ui/                  # 基础 UI 组件库\n│       │   └── src/\n│       │       ├── components/              # 原子组件\n│       │       └── index.ts                 # 导出\n│       ├── flow-mobile-form/                # 表单相关组件\n│       │   └── src/\n│       │       ├── api/                     # 表单 API\n│       │       ├── components/              # 表单组件\n│       │       ├── hooks/                   # Hooks\n│       │       ├── index.ts                 # 导出\n│       │       └── type.ts                  # 类型定义\n│       └── flow-mobile-approval/            # 审批页面组件\n│           └── src/\n│               ├── api/                     # 审批 API\n│               ├── components/              # 审批组件\n│               ├── plugins/                 # 审批插件\n│               ├── index.ts                 # 导出\n│               └── type.d.ts                # 类型定义\n├── scripts/                                 # 脚本工具\n├── package.json                             # 根 package.json\n└── pnpm-workspace.yaml                      # pnpm workspace 配置\n```\n\n## 模块依赖关系\n\n### 基础包\n\n```\nflow-core (核心框架，无 UI)\n    ↑\n    ├── flow-types (类型定义)\n    ├── flow-icons (图标库)\n    └── flow-approval-presenter (审批 Presenter)\n```\n\n### PC 端组件\n\n```\nflow-core → flow-types → flow-icons → flow-pc-ui (基础 UI)\n                                     ↓\n                                flow-pc-form (表单)\n                                     ↓\n                                flow-pc-approval (审批)\n                                     ↓\n                                flow-design (流程设计器)\n```\n\n### 移动端组件\n\n```\nflow-core → flow-types → flow-mobile-ui (基础 UI)\n                                ↓\n                           flow-mobile-form (表单)\n                                ↓\n                           flow-mobile-approval (审批)\n```\n\n### 依赖说明\n\n| 包名 | 说明 | 依赖 |\n|------|------|------|\n| **flow-core** | 全局框架依赖，只包含与 UI 无关的基础能力（HTTP、状态管理、工具函数等） | - |\n| **flow-types** | 全局类型定义，包含流程审批相关的业务类型（PC 端和移动端共用） | flow-core |\n| **flow-icons** | 图标库 | flow-core |\n| **flow-approval-presenter** | 审批 Presenter 框架 | flow-core, flow-types |\n| **flow-pc-ui** | PC 端基础 UI 组件库，提供原子化组件 | flow-core, flow-types, flow-icons |\n| **flow-pc-form** | 表单相关功能，包含表单设计器、表单渲染器、字段权限管理 | flow-core, flow-types, flow-pc-ui |\n| **flow-pc-approval** | 审批页面功能，包含待办/已办列表、审批处理、流程追踪 | flow-core, flow-types, flow-pc-form |\n| **flow-design** | 流程设计器功能，基于 Flowgram.ai 的可视化流程设计器 | flow-core, flow-types, flow-icons, flow-pc-ui |\n| **flow-mobile-ui** | 移动端基础 UI 组件库 | flow-core, flow-types, flow-icons |\n| **flow-mobile-form** | 移动端表单相关功能 | flow-core, flow-types, flow-mobile-ui |\n| **flow-mobile-approval** | 移动端审批页面功能 | flow-core, flow-types, flow-mobile-form |\n\n## 快速开始\n\n### 安装依赖\n\n```bash\n# 进入前端目录\ncd flow-frontend\n\n# 安装依赖（推荐使用 pnpm）\npnpm install\n```\n\n### 开发模式\n\n```bash\n# 启动 PC 端应用\npnpm run dev:app-pc\n\n# 启动移动端应用\npnpm run dev:app-mobile\n\n# 监听模式编译核心库\npnpm run watch:flow-core\npnpm run watch:flow-types\npnpm run watch:flow-approval-presenter\npnpm run watch:flow-design\npnpm run watch:flow-pc-ui\npnpm run watch:flow-pc-form\npnpm run watch:flow-pc-approval\npnpm run watch:flow-mobile-ui\npnpm run watch:flow-mobile-form\npnpm run watch:flow-mobile-approval\n```\n\n### 构建\n\n```bash\n# 构建所有包\npnpm run build\n\n# 构建 PC 端所有组件库\npnpm run build:flow-pc\n\n# 构建移动端所有组件库\npnpm run build:flow-mobile\n\n# 构建特定包\npnpm run build:flow-core                # 核心框架库\npnpm run build:flow-types               # 类型定义库\npnpm run build:flow-icons               # 图标库\npnpm run build:flow-approval-presenter  # 审批 Presenter 框架\npnpm run build:flow-design              # 流程设计器组件库\n\n# 构建 PC 端组件\npnpm run build:flow-pc-ui               # 基础 UI 组件库\npnpm run build:flow-pc-form             # 表单组件库\npnpm run build:flow-pc-approval         # 审批组件库\n\n# 构建移动端组件\npnpm run build:flow-mobile-ui           # 基础 UI 组件库\npnpm run build:flow-mobile-form         # 表单组件库\npnpm run build:flow-mobile-approval     # 审批组件库\n\n# 构建应用\npnpm run build:app-pc\npnpm run build:app-mobile\n```\n\n### 测试\n\n```bash\n# 运行所有测试\npnpm run test\n\n# 运行核心包测试\npnpm run test:flow-core\n\n# 运行设计器测试\npnpm run test:flow-design\n\n# 运行 PC 端组件测试\npnpm run test:flow-pc\n# 或单独测试\npnpm run test:flow-pc-ui\npnpm run test:flow-pc-form\npnpm run test:flow-pc-approval\n\n# 运行移动端组件测试\npnpm run test:flow-mobile\n# 或单独测试\npnpm run test:flow-mobile-ui\npnpm run test:flow-mobile-form\npnpm run test:flow-mobile-approval\n```\n\n## 许可证\n\n本项目为 Flow Engine 的前端部分，遵循主项目的 [LICENSE](./LICENSE)。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingapi%2Fflow-frontend","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodingapi%2Fflow-frontend","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodingapi%2Fflow-frontend/lists"}