Workflow UI 插件

workflow_ui 是 FastAPI Best Architecture 的企业审批流前端插件，提供流程设计器、发起申请、我的申请、待我审批、消息中心与审批流相关页面能力。

功能概览

• 流程设计器
• 表单设计器
• 发起申请入口与发起申请页
• 我的申请、待我审批、消息中心、统计页
• 审批详情、撤回、催办等前端交互
• applicant-only 场景下的普通用户发起流程体验

目录结构

• api/：workflow 前端接口封装
• components/：流程设计器与选择器组件
• langs/：国际化资源
• routes/：插件路由定义
• store/：插件相关状态
• views/：页面视图
• types.ts：类型定义
• plugin.toml：插件元数据

插件元数据

当前插件元数据定义在 plugin.toml 中：

• 名称：workflow_ui
• 版本：0.1.0
• 标签：task、notification
• 作者：Albert

适用范围

该插件面向 FBA 的 Vben Admin Antd 前端工程。

安装示例

以下示例用于说明宿主工程如何接入该插件，具体方式请结合 FBA UI 当前插件安装流程执行。

1. 安装插件代码

如果通过插件市场安装，宿主工程会将插件放入对应插件目录。

如果手动接入，可将本仓库内容放入宿主工程插件目录，例如：

apps/web-antdv-next/src/plugins/workflow/

注意：应拷贝本仓库中的文件内容，而不是在目标目录外再额外包一层 workflow/。

2. 注册插件路由

宿主工程需要引入 routes/index.ts 中定义的 workflow 路由，并在路由总入口中注册。

3. 接入国际化资源

宿主工程需要引入：

• langs/zh-CN/workflow.json
• langs/en-US/workflow.json

并将其并入现有语言包加载逻辑。

4. 接入状态管理

如果宿主工程需要 workflow 的未读消息、待办角标或列表联动能力，需要同步接入插件 store 与宿主工程状态管理入口。

5. 对接后端插件

前端页面依赖后端插件 workflow 提供接口。

仅安装 workflow_ui 而未安装 workflow 时，页面无法正常工作。

宿主工程接入说明

在宿主工程中，接入该插件时通常需要关注以下几点：

路由接入

• 将 workflow 路由注册到主路由系统
• 确保菜单与动态路由能识别 workflow 页面入口

菜单与权限

• 管理侧菜单：流程定义、流程设计、表单设计
• 申请侧菜单：发起申请、我的申请
• 普通用户不应直接暴露管理态入口

状态管理

• 如果宿主工程已有全局 store，需要把 workflow 相关状态注册进去
• 如果有菜单角标或消息提醒，需要联动 workflow 未读数与待办数

接口与鉴权

• 前端接口依赖后端 workflow 插件暴露的 API
• applicant-only 场景应调用已发布流程接口，不应走管理态定义接口

权限与页面说明

本插件围绕两类使用视角设计：

• 管理侧：流程定义、流程设计、表单设计
• 申请侧：普通用户发起已发布流程、查看我的申请与审批进度

普通用户侧应仅暴露申请相关入口，不应直接依赖管理态流程定义页面。

配套后端插件

后端插件仓库：workflow

两者关系如下：

• workflow_ui 负责页面、交互与设计器能力
• workflow 负责接口、权限边界、运行时与数据结构

当前状态

该仓库当前主要用于插件发布与插件市场接入整理，后续可继续完善：

• 更完整的宿主工程安装步骤
• 路由、菜单、store 接入示例
• 普通用户与管理员权限配置示例
• 与后端插件联调说明