Day 16 / 共 20 天 · 前端交互

自定义画布节点：从 `src/frontend/src/CustomNodes` 读出一段工作流

把后端组件字段映射成可编辑节点。。今天不追求把每行代码翻译成中文；目标是建立可验证的因果链：谁调用它、它如何处理输入、状态留下在哪里、它下一步交给谁。

📍 20 天路线 · D01-D03 全景与启动 → D04-D07 画布数据模型 → D08-D11 图执行 → D12-D14 后端产品化 → D15-D17 前端交互 → D18-D20 部署扩展

D14 服务工厂与依赖管理→D15 前端路由与页面→D16 自定义画布节点→D17 前端状态与控制器→D18 MCP 工作流发布→

💡 今日类比可视化积木外壳。先用这个类比理解职责，再回到真实路径 src/frontend/src/CustomNodes 校正它；类比帮你记住结构，源码负责告诉你边界。

L01

先问问题 · 自定义画布节点

🤔 问题为什么今天不是直接背 src/frontend/src/CustomNodes 的所有实现？因为它只是 Langflow 这条链路中的一个站点。先定位它接收什么、产出什么，细节才不会变成孤岛。

L02

💡 本质从 src/frontend/src/CustomNodes 打开后，先看导入、公开类或函数和构造参数。它们像岗位说明书：告诉你这个模块需要哪些前置条件，也暴露它依赖的邻居。

src/frontend/src/CustomNodes今天的主焦点：先观察命名、导入与主要入口。

调用方用编辑器的引用跳转，确认谁把数据送进来。

下游沿返回值、await、事件或方法调用找到它交棒的位置。

L03

👶 大白话把输入写成一句话：任务从 src/frontend/src/routes.tsx 或调用方来到这里，被转换、校验或包装后，再交给下一站。源码阅读最可靠的导航不是文件树，而是参数、返回值和事件。

动画心智图：先追一条数据的去向，再扩展到异常分支。

L04

🤔 问题今天的焦点属于「自定义画布节点」。把它当作可视化积木外壳：它不必独自做完所有事，而是把专业工作交给模型、工具、存储或下一位对象。

L05

💡 本质当逻辑被拆到多个对象时，初看要跳很多文件；换来的好处是可替换、可测试和可观测。遇到抽象层先不要嫌绕，问它隔离了哪一种变化：模型、工具、状态还是流程。

Q&A

Q：看不懂某个函数要停多久？
A：先记下输入、输出、调用位置，跳过内部细节；等主链路第二次经过它时再回来。源码学习不是一次读完，是不断缩小未知区域。

L06

👶 大白话用命令确认 src/frontend/src/CustomNodes 的真实存在和周边文件，再回到本页画三格图：输入 → 自定义画布节点 → 输出。明天会从 src/frontend/src/stores 接着走，今天留下的问题正好成为明天的入口。

# AI_WORK 中的真实项目根目录
cd /Users/bitmart/work/codes/github/AI_WORK/langflow
# 先确认本课焦点存在；路径都相对项目根目录
ls src/frontend/src/CustomNodes

常见卡点AI_WORK 的仓库版本可能与文章调研时不同。如果路径改名，先在项目根目录使用 rg --files | rg "关键词" 查找，而不是把绝对路径复制进笔记。