最终要做出什么
一个前端加后端结构的 AI Canvas 系统：
- 前端：无限画布、节点拖拽、缩放平移、文本/LLM/文生图/视频节点、连线工作流、右键菜单、框选、群组、模板、项目管理
- 后端：保存 API Key 不暴露、转发文本/图像/视频请求、支持多服务配置、代理图片
制作顺序
不要一次性让 Codex 做完整系统。按阶段推进，每一阶段都有可验收的画面。
第一阶段：静态画布原型 可看
目标
做一个能打开的页面，看起来像 AI 工作流画布。不接 API，不做交互。
验收
第二阶段：画布可操作 可摸
目标
滚轮缩放、拖拽平移、节点拖拽、Delete 删除、连线跟随。
验收
- 缩放自然
- 空白处拖拽不误拖节点
- 连线端点对齐
- 删节点同时删连线
第三阶段：节点连线交互 可连
目标
从输出连接点拖线到输入连接点，实时预览线，悬停高亮，双击断开。
验收
第四阶段：前后端分离 安全
目标
API Key 放后端环境变量，前端只发业务请求。npm run dev 启动。
验收
- 前端不直接请求第三方 API
- API Key 不在 JS 里
第五阶段：接入真实 API 真实
目标
图像生成、文本润色、视频生成调用真实接口。结果填入节点。
验收
- 点击生成后 loading
- 成功显示图片
- 失败显示可读错误
- 不重复创建结果节点
第六阶段：高级 API 配置 灵活
目标
文本/图像/视频分别配置 Base URL、Key、模型。未单独配置的回退到通用设置。
验收
- 设置可编辑且持久化
- 前端不暴露密钥
- 节点模型和设置逻辑一致
第七阶段：编辑器能力 好用
目标
右键菜单、框选节点、群组、节点缩放、图片预览和保存。
验收
- 右键菜单功能齐全
- CTRL 框选流畅
- 群组标题栏可拖拽
- 右下角缩放手柄
第八阶段：项目管理和模板库 产品化
目标
多项目管理、模板保存/加载、JSON 导入导出。
验收
- 项目列表可用
- 模板可分组
- JSON 可拖入导入
- 导入时校验数据
第九阶段：修 Bug & 体验打磨 稳定
常见问题
- 节点连线不对齐 → 检查坐标转换和缩放
- 画布拖拽异常 → 检查 pointer capture 和默认拖拽行为
- 大图撑爆 localStorage → 改用 IndexedDB 存图片
课堂练习安排（6 次课）
核心心法
给学员的 7 条
- 不要一次性让 Codex 做完整产品，按阶段推进
- 每次提示词写清楚「目标、约束、验收标准」
- 遇到 bug 描述现象、触发步骤、期望行为，不只说"坏了"
- 接 API 时先保护密钥，再考虑功能
- 节点、连线、状态保存三件事必须稳定
- AI 返回数据往往很大、很慢、格式不稳定，预留错误处理
- 每次只让 Codex 解决一个明确问题
写好提示词的结构
我要实现【功能目标】。
当前问题是【现象】。
请检查【可能相关模块】。
要求：
1. ...
2. ...
验收标准：
1. ...
不要做：
1. ...
打开图修，开始实操 →