零代码新思路，基于LogicFlow的页面逻辑编排

在滴滴客服业务里，通过零代码的方式来配置页面已有丰富的落地经验，大大提高了服务用户的效率和质量。但是传统零代码在页面逻辑配置上表现并不好，很难做到灵活扩展。因此，滴滴客服技术团队探索出一种新思路，用流程编排的方式来编排页面的逻辑，解决零代码的难扩展问题。本文将从复杂交互的难配置困境入手，介绍解决思路和方案，并详细展开如何利用客服技术团队已开源的流程图编辑框架LogicFlow，实现与研发过程中开发、运行、调试三个阶段相对应的编排器、执行器、调试器。

背景

客服业务是链接用户与公司各事业部的桥梁，为了快速响应事业部业务迭代、持续改进给到用户的服务体验，技术团队需要把客服业务中的多个系统建设成运营人员可配置，才能保障整个客服团队有很高的效率。

那么，要达成运营人员可配，零代码平台的拖拉拽式交互非常适用。运营所见即所得，客服业务中也有非常多的可落地场景，现在有多个系统已经做到可以让运营团队通过发布配置即可改变线上逻辑，给用户提供更便捷的智能客服，或者让人工客服按照运营人员制定的流程来解决、记录用户问题。

目前，滴滴客服内的多个系统在4年内已经配置超过12900个PC端页面和7900个H5页面，在整个服务链路中，通过多种方式，来解决用户的问题。

困境：零代码的不足

虽然滴滴客服内部的平台目前已经利用零代码配置了很多的页面，但随着业务的发展，我们感受到零代码的不足。假设有个表格修改操作需求，需要在点击表格某一列的修改时，先请求接口判断用户的权限，然后根据返回的权限，显示不同的编辑弹窗。如下表格修改示意图：

面对这种情况，如果使用以前的零代码方案，需要在表格组件的属性面板中增加请求和弹框相关的逻辑。这种在组件属性面板增加功能的迭代方式只会导致配置内容膨胀、配置难度增加、开发成本提高，最后反而不如写代码方便。

由于零代码配置页面在客服内部广泛应用，客服技术团队也期望找到一种更好的方式来解决零代码中无法灵活控制页面逻辑和复杂交互的问题，让不会编程的同学也能做出复杂交互的页面。

思路：页面逻辑编排

对于前面提到的表格编辑需求，如果通过写 JS 代码的方式实现，一般都是监听事件 -> 收集数据 -> 发起请求 -> 判断返回结果 -> 修改页面组件内容。那么我们是否可以将写代码的过程抽象为一个个简单的逻辑，然后利用流程串联起来，达到同样的效果？

利用这个思路，将前面的需求拆分为“表格触发编辑事件”、“请求获取权限”、“显示普通管理员编辑弹框”、“显示高级管理员弹框”这4个简单逻辑，然后在流程图上画出来，如下示意图：

上图为我们内部的零代码配置页面的系统配置一个基础表格的截图。其中左侧和大多数零代码平台一样，通过拖拽配置的页面。而右侧就是通过流程配置的方式，实现页面内复杂逻辑的串联。

采用流程编排页面逻辑这种方式，我们可以通过自由组合节点实现页面逻辑的灵活配置。例如当请求接口返回比较慢时，在请求节点之前增加表格 loading 节点。

也可以通过组合来实现组件显隐，例如当单选框A选择a1时，显示组件B，隐藏组件C；当单选框A选择a2时，显示组件C，隐藏组件B。就可以拆分为“单选框值改变事件”、“显示组件B”、“