Canvas 设计文档¶

1. 技术栈¶

React + Vite + React Router；画布为自研节点编辑器（含 Konva 图片编辑等）。HTTP 封装在 shared/api 与 utils/*-api.ts，基址见 constants/backend-api.ts（默认同源 /api）。

2. 结构要点¶

src/pages/           # 路由页面
src/components/      # 工作台、画布节点、首页等
src/context/         # Auth、Canvas、LoginPrompt
src/shared/api/      # auth、billing、landing、productCatalog、userTask、storage
src/utils/           # canvas-project-api、image-generation-api、runninghub-api

3. 鉴权与落地¶

sequenceDiagram
  participant U as User
  participant C as Canvas
  participant API as Backend
  U->>C: /r/CODE
  C->>API: GET /landing/CODE
  U->>C: 登录
  C->>API: POST /auth/login
  C->>API: POST /landing/CODE/bind
  Note over API: customer_agent_bindings

4. 画布持久化¶

GET/POST /canvas/projects；PUT/PATCH 带 expectedRevision
document 含 nodes/edges/assets/viewport
文件夹 canvas_folders 单层；删文件夹项目归未分组

5. 生图链路¶

工作台/画布 → catalog 拉配置 → preview-prompt（可选）→ generate / batch-generate → 轮询任务或返回结果 URL → 扣费由后端完成。

画布自由生图还可走 /canvas/generate、/canvas/generate-text、RunningHub。

6. 存储¶

上传：/user/storage/upload 或 canvas upload/presign；展示前 resolve-urls 刷新签名。

7. 配置¶

变量	用途
`VITE_BACKEND_API_URL`	可选直连 backend
Vite proxy `/api`	本地反代 :8001