Webiny-js自定义工作流开发：使用WorkflowModel构建业务流程
项目地址: https://gitcode.com/gh_mirrors/we/webiny-js 在企业级内容管理系统（CMS）开发中，业务流程的自动化与定制化是提升效率的关键。Webiny-js作为开源无服务器企业CMS，提供了强大的工作流引擎，允许开发者通过WorkflowModel构建灵活的业务流程。本文将从环境搭建、模型定义到流程部署，完整演示如何在Webiny-js中实现自定义工作流。
核心概念与架构
Webiny-js的工作流系统基于模块化设计，主要包含API层与应用层两个核心部分：
- API层：提供工作流模型定义、状态管理和业务逻辑处理，对应源码目录为api-workflows
- 应用层：提供可视化配置界面与用户交互组件，对应源码目录为app-workflows
根据架构文档，工作流系统采用事件驱动架构，通过ContextPlugin实现功能扩展，核心模型定义在createWorkflowModel函数中。
开发环境准备
前置依赖
确保已安装：
- Node.js 16+
- Yarn 3+
- AWS CLI（用于部署）
项目初始化
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/we/webiny-js.git
cd webiny-js
# 安装依赖
yarn install
# 构建工作流核心包
yarn webiny ws run build --scope=@webiny/api-workflows
工作流模块的构建配置可参考webiny.config.js，其中定义了构建与监视命令：
import { createWatchPackage, createBuildPackage } from "@webiny/build-tools";
export default {
commands: {
build: createBuildPackage({ cwd: import.meta.dirname }),
watch: createWatchPackage({ cwd: import.meta.dirname })
}
};
WorkflowModel核心实现
模型定义
WorkflowModel是工作流的核心抽象，定义了流程的状态、步骤与转换规则。其源码位于packages/api-workflows/src/context/models/workflowModel.js，主要包含：
- 状态定义（如草稿、进行中、已完成）
- 步骤配置（审批节点、自动化任务）
- 权限控制（角色与操作映射）
核心初始化代码：
export const createWorkflowModel = () => {
return new ModelDefinition({
name: "workflow",
fields: {
name: fields.text({ validation: validation.required() }),
steps: fields.array(fields.shape({
id: fields.id(),
type: fields.select({ options: ["approval", "automation"] }),
assignees: fields.array(fields.text())
}))
}
});
};
状态管理
工作流状态通过WorkflowStateModel管理，记录流程实例的当前状态与历史记录。状态转换逻辑实现在workflowState.js，核心状态包括：
DRAFT：草稿状态ACTIVE：运行中COMPLETED：已完成CANCELLED：已取消
自定义工作流实战
1. 定义工作流模型
创建自定义内容审核工作流，需扩展WorkflowModel并注册到系统上下文：
// packages/api-workflows/src/context/plugins/customWorkflow.js
import { ContextPlugin } from "@webiny/handler";
export default new ContextPlugin(context => {
context.workflow.registerModel({
name: "contentReview",
label: "内容审核流程",
steps: [
{ id: "review", type: "approval", assignees: ["editor"] },
{ id: "publish", type: "automation", action: "publishContent" }
]
});
});
2. 实现业务逻辑
为自动化步骤添加业务逻辑处理：
// packages/api-workflows/src/handlers/publishContent.js
export const publishContent = async (context, workflow) => {
const { contentId } = workflow.input;
await context.headlessCms.updateContent({
id: contentId,
status: "published"
});
return { success: true };
};
3. 创建CLI命令
通过自定义CLI命令测试工作流：
// extensions/myCustomCommand.ts
import { createImplementation } from "@webiny/di-container";
import { Command, UiService } from "@webiny/extensions/cli";
class ContentReviewCommand implements Command.Interface {
constructor(private ui: UiService.Interface) {}
execute() {
return {
name: "workflow:content-review",
description: "触发内容审核工作流",
handler: async (params) => {
const workflow = await context.workflow.create({
model: "contentReview",
input: { contentId: params.contentId }
});
this.ui.success(`工作流已启动，ID: ${workflow.id}`);
}
};
}
}
运行命令测试：
yarn webiny workflow:content-review --contentId=abc123
可视化配置界面
工作流编辑器组件
Webiny提供开箱即用的工作流编辑组件，可在管理界面中集成：
// packages/app-workflows/src/Components/Workflows/Editor.tsx
import { WorkflowEditor } from "@webiny/app-workflows";
export const ContentReviewEditor = () => {
return (
<WorkflowEditor
model="contentReview"
onSave={(definition) => {
console.log("保存工作流定义", definition);
}}
/>
);
};
状态展示组件
在内容详情页展示当前工作流状态：
import { WorkflowStateBar } from "@webiny/app-workflows";
export const ContentDetail = ({ content }) => {
return (
<div>
<h1>{content.title}</h1>
<WorkflowStateBar workflowId={content.workflowId} />
</div>
);
};
部署与测试
部署到AWS
# 构建应用
yarn build
# 部署工作流服务
yarn webiny deploy api-workflows --env=prod
部署配置参考AWS部署模板。
测试工作流
- 通过管理界面创建内容，触发工作流
- 登录编辑器账号审批内容
- 验证内容自动发布
工作流执行日志可通过AWS CloudWatch查看，或通过GraphQL查询：
query GetWorkflowStatus($id: ID!) {
workflow {
getWorkflow(id: $id) {
id
status
steps {
id
status
completedAt
}
}
}
}
高级扩展
集成第三方系统
通过Webhooks连接外部系统：
// 发送通知到Slack
workflow.onStepComplete("review", async (step) => {
await context.httpClient.post(process.env.SLACK_WEBHOOK, {
text: `内容审核已完成: ${step.content.title}`
});
});
自定义表单集成
结合Webiny表单构建器，创建工作流触发表单：
// 表单提交后启动工作流
<FormBuilder
onSubmit={(data) => {
context.workflow.create({
model: "contentReview",
input: { contentId: data.contentId }
});
}}
/>
总结与最佳实践
- 模型设计：优先定义清晰的状态流转图，使用mermaid可视化
- 性能优化：对长运行流程使用异步处理，参考后台任务实现
- 版本控制：工作流定义变更需考虑历史数据兼容性
- 测试策略：编写单元测试覆盖核心逻辑，参考测试用例
Webiny-js工作流引擎通过WorkflowModel提供了灵活的业务流程构建能力，结合其无服务器架构，可快速实现企业级流程自动化。更多示例可参考电商扩展中的工作流实现。
如需进一步扩展，可查阅官方文档自定义扩展指南，或参与社区讨论。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
