基于你提供的《JS 面试高频问题（2026重新分析面经版）》题单重新整理。

目标不是把答案压缩成关键词，而是按“为什么 → 是什么 → 怎么运行 → 代码示例 → 面试怎么说 → 常见误区/追问”的方式，把每道题整理成可以系统学习、也可以直接用于面试表达的教程。

说明：少数面试资料里常见的“栈存基本类型、堆存引用类型”“渲染就是宏任务”等说法属于简化模型。本文会保留面试所需的直观理解，同时标注更准确的边界，避免背出明显不严谨的结论。

如何使用这份资料

提交：67c59a6 029:执行记录

对比基准：5406e74 028:检索失败兜底

本文不是功能清单，而是一次从数据库到页面的完整代码走读。读者只需要知道 React 组件、async/await 和基本 TypeScript；Prisma、tRPC、React Query、Next.js Server Component、nuqs、Inngest 会在第一次出现时解释。

路径中原项目使用了 excutions、excution.tsx 这两个拼写，本文按提交中的真实文件名引用。正确英文应为 executions、execution.tsx。阅读时不要把它误以为框架约定。

作者：skymecode

一、改造背景

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

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

涵盖 024 / 025 / 026 / 028 四个提交。

本文复盘以下四个提交：

提交：8c80e7a 022:ai节点

对比基准：3cb8965 021:tally表单触发webhook

本文写于 2026-07-05。这个提交的目标是把 AI 能力作为一种 workflow 执行节点接入画布，让用户可以在 React Flow 里配置 Provider、模型、凭证和 Prompt，并把 AI 结果写回 workflow context，供后续节点继续使用。

这个提交解决的问题

021 提交已经支持 Tally webhook 触发 workflow，也支持 HTTP Request 节点消费上下文变量。但 workflow 还缺少一个核心执行能力：

提交：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

提交：3cb8965 021:tally表单触发webhook

对比基准：aa6b003 020:实时状态显示

本文写于 2026-07-04。这个提交的核心是把 Tally 表单接入 workflow，让一次外部表单提交可以自动触发一次工作流执行。

本文重点从前端角度解释：

• 用户在画布里如何添加 Tally 表单触发器
• 前端如何展示 webhook 配置入口
• Tally 提交的数据如何变成 workflow context
• HTTP Request 节点如何消费 Tally 字段
• 为什么要改 HTTP Request 的 URL 校验

在做可视化工作流编辑器时，一个很常见的需求是：当前节点需要使用上一个节点的执行结果作为输入。

比如有两个 HTTP Request 节点：

1. 第一个节点请求用户信息
2. 第二个节点根据第一个节点返回的 userId 再请求订单信息

这时候第二个节点的接口地址可能需要这样配置：

https://api.example.com/users/{{getUser.httpResponse.data.id}}/orders

提交：aa6b003 020:实时状态显示

对比基准：971a99e 019:http-request结果传递

本文写于 2026-07-03。当前项目使用的是：

• inngest@^3.54.2
• @inngest/realtime@^0.4.4

这套代码对应 Inngest v3 的 Realtime API。官方现在已经把 v3 Realtime 标为 deprecated，新项目推荐 v4 内置 Realtime API；但这个提交本身是基于 v3 的 @inngest/realtime 包实现的。

更新

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

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

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

每个节点的状态显示

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

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