作者：skymecode

一、改造背景

之前的编辑器右侧边栏是用"检查器"的方式工作的：点击节点后会弹出一个对话框来配置。但这种方式有几个问题：

1. 操作不直观：用户需要先点击节点，再在弹出的对话框中配置，然后关闭对话框，步骤太多
2. 上下文切换：对话框会遮挡画布，用户无法同时看到节点和配置
3. 功能受限：对话框空间有限，无法展示复杂的配置项

提交：4594f3d 023:逻辑分支节点

对比基准：8c80e7a 022:ai节点

本文写于 2026-07-05。这个提交把 workflow 从“按拓扑排序线性执行节点”升级为“节点可以根据执行结果选择不同输出分支”，并新增了 Condition、Switch、Loop、Transform、Error Handler 五类节点。

这个提交解决的问题

022 的执行模型是：

topologicalSort(nodes, edges)
  -> for node of sortedNodes
  -> executor(context)
  -> context = result

更新

首先将保存从保存名称改成保存整个editor(也就是边，节点等信息)

首先更改trpc的router，这个应该是workflow下的任务，而editor是具体的任务

现在点击保存能够完整保存这个工作流（demo）

每个节点的状态显示

我们要为节点加入status，所以要更新状态

状态应该先在react-flow官网引入最基础的组件，然后再基于这个组件修改现有的组件

本文档基于 git 提交：

• 801eb31 017:工作流执行
• 368601c 018:配置动态key

重点从前端功能、交互设计、数据流和实现方式说明这两次提交做了什么。

总览

017 主要完成了工作流的执行入口和执行链路：用户在编辑器中配置好节点后，可以点击“开始执行”，前端通过 tRPC 调用服务端 mutation，服务端再发送 Inngest 事件，由 Inngest 按节点顺序执行工作流。

本文整理两个提交中最值得前端开发学习的内容：

• 3924876 013: editor header ui
• 5e049de 014: 建议editor页面，实现基本的workflow页面

重点不是逐行背代码，而是理解它们背后的实现逻辑：

• Next.js App Router 中服务端组件和客户端组件如何分工
• tRPC + React Query 如何组织数据获取、缓存和 mutation
• inline edit 这种交互组件如何处理本地状态和远端状态
• React Flow 画布如何用受控状态管理 nodes / edges
• 数据库里的 workflow / node / connection 如何映射成前端图结构
• 面试中可能如何被问，以及如何回答

添加workflow表单，包括删除更新等功能

空白页，加载页面，错误页面三大组件

空白页的props，需要一个新建的函数，意味着当前空白的时候可以新建一个工作流

codex回答:我看了这两个提交：

• 013: editor header ui
• 014: 建议editor页面，实现基本的workflow页面

对前端开发来说，最值得学的是这些点。

1. Suspense + ErrorBoundary + Hydration 的页面组织

你可以把 015 理解成：它在前端建立了一个“添加节点”的完整最小闭环。

核心链路是：

点击加号
-> 打开右侧 Sheet 节点选择器
-> 选择某个节点类型
-> 往 React Flow 的 nodes state 里插入一个新 node
-> React Flow 根据 node.type 找到对应组件
-> 渲染成画布上的真实节点