模块：Canvas Editor

唯一职责：承载 Vue Flow 画布容器，协调节点创建、连线交互、视口管理。

边界

属于本模块：

初始化 Vue Flow 实例并加载画布数据
提供节点创建入口（工具栏对话框、浮动菜单）
连线的全部职责（创建、删除、渲染、持久化、验证、连接角色规则）
管理画布视口（平移、缩放）
展示画布 Header（名称编辑）、Toolbar、Footer（缩放控制、网格切换）
预加载模型列表

不属于本模块：

节点内部的编辑逻辑（由 Node System 模块负责）
AI 生成调用（由节点组件 → AI Service 模块负责）
数据持久化（由 State Management 模块负责）

对外接口

Canvas Editor 是页面组件（路由 /canvas/:id），不对外暴露 API。仅通过路由参数 id 访问，无 props / emits。

消费的接口

依赖模块	调用的方法/属性	用途
canvasStore	`loadCanvas(id)`	加载画布
canvasStore	`currentCanvas`	读取画布名称
canvasStore	`currentCanvas`（写入 `.name`） + `saveCanvas()`	Header 编辑名称
flowStore	`loadFromCanvas()`	初始化 Vue Flow 节点/边
flowStore	`addNode(type, position)`	创建节点
flowStore	`addEdge(edge)`	创建连线
flowStore	`addBatchEdges(memberIds, targetId, handleType)`	批量创建连线
flowStore	`validateEdge(edge)`	连线前验证
modelsStore	`fetchModels(modality)`	预加载模型列表

不变量

页面加载时，如果 canvasId 对应的画布不存在，显示错误页面（含返回 Workspace 入口）
画布中的持久化节点类型只能是 text、image、video（group 节点为临时节点，不持久化）
连线创建前必须通过 validateEdge 验证

错误场景

场景	模块行为	调用方职责
路由参数 `id` 对应的画布不存在	显示错误提示页面，含返回 Workspace 入口	无需处理（页面自身兜底）
`flowStore.loadFromCanvas()` 加载到损坏的节点/边数据	跳过无法解析的条目，加载可用部分	无需处理
`modelsStore.fetchModels()` 网络超时或失败	模型下拉列表为空，不阻塞画布加载	节点层显示"模型加载失败"提示
创建节点时画布数据同步到 localStorage 失败（QuotaExceededError）	节点在画布中可见但未持久化	全局错误处理提示用户

实现位置

角色	文件路径
页面	`apps/web/app/pages/canvas/[id].vue`
核心逻辑	`apps/web/app/composables/useCanvasEditor.ts`
Header	`apps/web/app/components/canvas/CanvasHeader.vue`
Toolbar	`apps/web/app/components/canvas/CanvasToolbar.vue`
Footer	`apps/web/app/components/canvas/CanvasFooter.vue`
节点类型对话框	`apps/web/app/components/canvas/NodeTypeDialog.vue`
浮动菜单	`apps/web/app/components/canvas/FloatingNodeMenu.vue`
浮动菜单逻辑	`apps/web/app/composables/useFloatingNodeMenu.ts`
Group Node	`apps/web/app/components/nodes/GroupNode.vue`
Group Node 逻辑	`apps/web/app/composables/useGroupNode.ts`
连线拖拽路由	`apps/web/app/composables/useEdgeConnection.ts`
批量连线预览	`apps/web/app/components/canvas/GroupConnectionLine.vue`