feat(vibe coding PR): 工作流编辑器画布 · 卡片加号编排（验证 #87，不合并）

[huyanxius]

这是 Vibe Coding 验证 PR，不合并。 用途是把 #87 定的画布形态做成能点的东西，供逐行 Review；讨论定稿后内容落回 #87（依 01 规范三、03 规范三）。

Closes nothing. Refs #87、#37 §3.8。

验证了什么

#37 §3.8 只写了画布「面向需要精细控制的生产任务」，没定精细控制的具体内容。live demo 那版把流程拆成七对连接白名单交给用户手连，八张卡片首尾相接没有第二种连法——连线成本非零，选择空间为零。

本 PR 把用户画线换成卡片右下角的加号：加号只列这张卡片的合法下游，用户选一项，新卡片由系统生成并连好。非法组合不出现在菜单里，因此不存在「连错之后报错」这条路径。

怎么试

cd frontend && npm ci && npm run dev

打开 /workflow-editor：

1. 起点卡片填角色描述，提交，四张母版候选逐张到达。
2. 挑一张确认，母版卡片锁定，右下角出现加号。
3. 加号展开三项：生成动作、生成静态资产（灰的，本期不做）、导出。选生成动作，再选预设动作或自定义动作。
4. 首帧卡片填一句描述，生成，确认。它的加号只有一个合法下游，点一下直接接上完整动画，不弹菜单。
5. 完整动画 36 帧逐张显影，确认后自动接上审核。
6. 在母版上再点一次加号可以挂第二个动作，两条分支并行生成。
7. 审核通过后从它的加号进导出，勾选格式出包。

画布支持拖拽平移、双指捏合或 Cmd+滚轮缩放、拖卡片头部搬位置。拖动只改观感不改结构，连线始终由 parentId 推出来。

落到哪些文件

位置	内容
features/canvas-flow/	卡片图模型、加号的合法下游规则、布局、假执行
pages/workflow-editor/	画布视口、卡片、加号菜单、样式
shared/ui/	从 live demo 提炼的三个纯展示组件（帧到达条、资产预览卡、候选选择器）
public/demo/	samurai 三个动作各 36 帧 + 四张母版候选，256×256 真帧

shared/ui 那三个组件来自既有的 live-demo-ui-components 暂存包，只把强调色从 emerald 调成 slate 以对齐 live demo 的近单色底，逻辑未改。

已知边界

• 全程前端 mock，不接后端，不发任何请求。
• 只做侧视、单角色、单造型。多视角会让卡片数翻四到八倍，一屏装不下，工作流编辑器画布：卡片加号式编排（Refs #37 §3.8） #87 里标为已知未解决。
• 自定义动作没有专属素材，借用 jump 的帧演示。
• 「生成静态资产」在菜单里是禁用项，保留它只为说明菜单可扩展。
• 给已有角色补动作、工作流模板保存复用都不在本期，理由见 工作流编辑器画布：卡片加号式编排（Refs #37 §3.8） #87。

自查

npm run format:check、lint、typecheck、test、build 全过。features/canvas-flow 有 7 个用例，覆盖加号只列合法下游、未确认卡片没有下游、重复展开加号挂并列分支、预设与自定义是同一种卡片、分支各占一行、删除连带下游。

AI 参与说明

画布交互形态（卡片加号）由人定，见 #87 的讨论与决策记录；实现由 Claude Code 完成。关键约束写在 #87 正文：加号只在多个合法下游时弹菜单、可重复展开、只列合法项、删除连带下游、拖动不改结构。

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
windup	Ready	Preview	Aug 3, 2026 9:43am