Skip to content

模块:State Management

唯一职责:管理全局应用状态(画布编辑状态、工作空间、模型缓存),通过后端 API + WebSocket 同步。

边界

属于本模块:

  • 工作空间和画布列表管理(workspaceStore)
  • 当前画布元数据状态(canvasStore)
  • Vue Flow 节点/边的状态管理与 WS 同步(flowStore)
  • 模型列表的异步获取与缓存(modelsStore)

不属于本模块:

  • Vue Flow 实例的渲染和交互事件(由 Vue Flow 库 + Canvas Editor 负责)
  • HTTP/WS 请求发送(由 Services 模块负责)
  • 组件级局部状态

状态同步流

画布加载

节点/连线操作同步

多端同步(Push 事件)

不变量

  1. workspaceStore.fetchWorkspace 通过后端 API 获取,workspaceId 存入全局状态
  2. canvasStore 仅持有元数据({ id, name }),不持有 graph 数据
  3. flowStore 是 Graph 唯一的可变持有者,所有节点/边修改必须通过它
  4. flowStore.addEdge / addBatchEdges 在添加前必须通过 validateEdge,验证失败返回 null / 跳过
  5. 节点增删改通过 WS Command 同步到后端,采用乐观更新 + Accept/Reject 确认
  6. 节点 ID 由后端生成,创建时先用临时 ID(nanoid),Accept 后替换为服务端 ID
  7. modelsStore.fetchAllModels 不重复请求(fetched + loading 防重)
  8. modelsStore.getModelInfo(name) 返回完整模型信息(含 abilities),供 useModelAbilities composable 查询模型能力
  9. Group node(type === 'group')为临时节点,不发送到后端

错误场景

场景模块行为调用方职责
loadCanvas(id) API 请求失败返回 nullcurrentCanvas 设为 nullCanvas Editor 显示错误页面
fetchWorkspace() 网络请求失败error 存储错误信息,isLoading 恢复为 false消费方读取 error 展示提示
fetchAllModels() 网络请求失败error 存储错误信息模型下拉列表为空,显示错误提示
WS Command 被 RejectflowStore 回滚乐观更新,推送 toast 事件无需额外处理
WS 连接断线自动重连,达上限后提示用户;断线期间画布只读Canvas Editor 显示连接状态
deleteItem API 失败乐观删除回滚,error 存储信息消费方提示用户

实现位置

角色文件路径
workspaceStorestores/workspaceStore.ts
canvasStorestores/canvasStore.ts
flowStorestores/flowStore.ts
modelsStorestores/modelsStore.ts
edge-validationshared/utils/edge-validation.ts
测试test/nuxt/flowStore.test.ts
测试test/nuxt/canvasStore.test.ts
测试test/nuxt/modelsStore.test.ts