# @bsuite/workflow-canvas 中文文档

规范地址：https://npmcn.com/package/%40bsuite/workflow-canvas/

版本：0\.3\.4
npm 元数据更新时间：2026-11-05T12:27:43.697Z
中文译文更新时间：2026-11-09T23:00:04.940Z
软件包许可：UNLICENSED

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bsuite/workflow-canvas
原文对照：https://npmcn.com/package/%40bsuite/workflow-canvas/?lang=original
项目主页：https://github.com/Arcane-Fly/bsuite#readme
源码仓库：https://github.com/Arcane-Fly/bsuite

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：322 kB，95 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：zod ^4，react \>=18 \<21，react-dom \>=18 \<21，lucide-react \>=0\.400\.0，@xyflow/react ^12，@supabase/supabase-js ^2，@tanstack/react-query ^5，@bsuite/schema-builder \>=1\.9\.0 \<2
- 首次发布：2026-09-02T01:36:24.415Z
- 最新版本发布：2026-11-05T12:27:43.524Z
- 近 30 天下载量：1701（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：17（近 12 个月 17 个）

## 中文简介

BSuite 的流程- 形状 xyflow 画布: 通用节点类型注册( step / decision / terminator / handoff), 泳道作为 xyflow 父节点, LOOP- PERMISSIVE 连接验证, 以及控制器 + RPC 支持的服务 持续 xyflow 的本地 {node

## 安装

```sh
npm install @bsuite/workflow-canvas
```

也可以使用：`pnpm add @bsuite/workflow-canvas`、`yarn add @bsuite/workflow-canvas`、`bun add @bsuite/workflow-canvas`

## README

# `@bsuite/workflow-canvas`

进程形状的 xyflow 画布 : `step` 编号 : `decision` 编号 : `terminator` 编号 : `handoff` 节点, 泳道为 真实的 xyflow 父节点, **循环允许** 连接验证,以及控制器+服务 持续 xyflow 的本地 `{nodes, edges, viewport}` 输入 `workflow_definition_versions.graph`。 。 。 .

第一阶段 `docs/plans/20260901-workflow-canvas-implementation-v1.00A.md`,结束工作 已瞄准和红色 `docs/plans/20260510-universal-canvas-capability-implementation-v1.00F.md` 5月的时候.

* * *

## 这不是重建

| 东西 | 何处 | 被带走的 |
| --- | --- | --- |
| `@bsuite/schema-builder` 页:1 | `packages/schema-builder/` | **建筑学.** Controller chook + RPC后卫服务 + TanStack 乐观的突变后回滚 + 实时交叉tab同步 + 薄薄的每个app包装. 还有 `computeDagreLayout` 财务报告和审定财务报表 `XY_TOKEN_BINDINGS`, (中文(简体) ), **导入, 未复制**。 。 。 . |
| `RelationshipCanvas` | `business-suite-unified/src/components/feature-builder/` | 这个 `ReactFlowProvider` 只有包装. |
| `useUndoRedo` | `crm7/src/pages/sales/pipeline-flow-inner.tsx` | 50相机接钩,起而改正. |

**0新运行时间依赖关系.** `package.json`是因为 `dependencies` 实值 `{}`。 。 。 . `@dagrejs/dagre`, (中文(简体) ), `@xyflow/react`, (中文(简体) ), `zod` 财务报告和审定财务报表 `@tanstack/react-query` 已经是每个消费者的捆绑.

* * *

## 最重要的规则:LOPS是经过检验的

`RelationshipCanvas` 运行一个循环检测的外勤部和 **拒绝** 循环。 对外国来说是的 键和错在这里。 学徒安置过程需要循环, 和Lucidchart源 名称二:

-   _"变更费率或安放并重新发布电子签名"_ 回到你身边 _"寄出位置为: CRM-触发电子签名"_
-   _"取消安排,寻找新的主机"_ 回到你身边 _创建或确认主机位置_

`wouldCreateCycle` 从未从此软件包中调用. `__tests__/connectionValidation.test.ts` 声称周期 **已接受** - 一个被证明拒绝的套房就是虫子.

### 仍然被拒绝的东西

| {\\fn方正粗倩简体\\fs12\\an8\\1cHFFFF00\\b0} | 拒绝 | 为什么不是一个循环问题 |
| --- | --- | --- |
| R1级 | 无源或目标 | 无附加 |
| 资源2 | **自动跳出** (单位:千美元)`source === target`(中文(简体) ) | 步入自旋会改变迭代之间的任何状态 。 A 类 **两个**\- 节点周期 `A → B → A` 被接受——两个学徒循环都是这个形状 |
| R3 导弹 | 结束错误 | A 类 `start` 只声明一个源控件, 一个 `end` 只有一个目标,所以没有港口可抓。 通过登记处的手柄套装执行,而非作为特殊情况 |
| 第4条 | 手性或手性作用不匹配 | 一种( E)`flow`)在今天存在;轴现在被命名了,所以这个同代码拒绝一个后期的数据边缘 |
| 5个R5 | 摸起泳道的边缘 | 车道组合步; 边缘附着在车道内的工作上 |
| 编号6 | 精确的重复边缘 | 第二个复制件在第一个复制件上方, 所以拖放看起来是惰性的, 而图表会增长 |

明确 **没有** 拒绝:任意长度的周期 -- -- 2,若干边缘留下一个决定( 学徒流程分支 四出 _东道主接受安置吗?_),数个边缘到达 跳过泳道的边缘——最后一步就是交接 _实值_。 。 。 .

* * *

## 节点类型的注册

没有通用的 `nodeTypes` 破产财产中其他任何地方的登记: `SchemaCanvas` 实值 `{ entity: EntityNode }` 财务报告和审定财务报表 `RelationshipCanvas` 实值 `{ entity, reference }`两者对 计划图和关闭。 这个是开放的.

```ts
import { workflowNodeTypeRegistry } from '@bsuite/workflow-canvas';

// Add a kind without forking the package. Returns a NEW registry.
const registry = workflowNodeTypeRegistry.extend([myDelayDescriptor]);
```

一个描述者在一个地方回答了四个问题,所以它们不能漂移:它看起来像什么 (单位:千美元)`component`),可以连接到什么(`handles(data)`,由卡片和 `isValidConnection`),其含义是:`dataSchema`及其行为 (单位:千美元)`container`, (中文(简体) ), `defaultSize`, (中文(简体) ), `defaultData`) (中文(简体) ).

手按节点 **数据**,不仅仅是此类——决定的端口追踪其分支列表,a 终结者追踪其起/起角色.

* * *

## 游泳场

巷子是xyflow的 (歌词) **父节点** 与 `extent: 'parent'` 而不是背景乐队. 不同的是,xyflow在拖动本身期间执行车道,所以图不能 表示一个已经漂出车道 拥有它. `parentId` 财务报告和审定财务报表 `extent` 当地人 xyflow 字段,所以它们会穿行 `graph jsonb` 免费的.

`computeSwimlaneLayout` {\\fn黑体\\fs22\\bord1\\shad0\\3ahbe\\4ah00\\fscx67\\fscy66\\2chffffff\\3ch808080}我问了一下 **仅为 x 轴** - 过程命令 - 并从中取出 y 节点的行道,因为所有权不是某种得到投票的布局算法.

6个学徒道:学徒-GTO/劳工雇佣团队-学徒连接提供商-DEWR 培训提供者 东道雇主.

* * *

## 使用量

```tsx
import {
  WorkflowCanvas,
  WorkflowInspector,
  WorkflowPalette,
  WorkflowToolbar,
  useWorkflowController,
} from '@bsuite/workflow-canvas';

function WorkflowPage({ id }: { id: string }) {
  const controller = useWorkflowController({
    supabase,
    tenantId,
    definitionId: id,
    onError: (message, err) => toast.error(message, err),
    onConnectionRefused: (v) => toast.info(v.reason),
  });

  return (
    <WorkflowCanvas controller={controller}>
      <WorkflowPalette controller={controller} activeLaneId={activeLane} />
      <WorkflowToolbar controller={controller} onDuplicated={(id) => navigate(`/workflows/${id}`)} />
      <WorkflowInspector
        controller={controller}
        selectedNodeId={selected}
        onNodeDeleted={() => setSelected(null)}
      />
    </WorkflowCanvas>
  );
}
```

三个铬成分是帆布上的孩子. 画布把它们分到保留地 区域(工具栏/调色板/图表/检查员),因此不会在流板上作画—— 适合视图和边缘点击可看到所剩框。 每个染色体成分都没什么 当它无所事事时——没有选择,或者一个工作流程,会话无法编辑——所以消费者 从来不需要自己去关 不只通过安插 `className`s; 表面类为 总是应用和额外组成而不是替换。 低于 ~800px 时 _画布_ 宽度 调色板变成芯片行; 选择步骤时会保留检查柱 .

懒行道. `@xyflow/react` 绝不能到达进入区块——5月计划C.2阶段 做了一个硬规则 与捆绑分析器证据.

### 编辑、草稿和出版

-   **调色板由登记器构建**而不是从一个列表。 一种通过 `registry.extend()` 显示时不触碰调色板; 不包括容器(swimlanes) 因为一条道是图表的框而不是其中的一步.
-   **重命名在模糊或 Enter 上执行, 而不是按键 .** `updateNodeData` 检查倒数 堆叠,所以一个按键 承诺会花整个50分缓冲 一个字.
-   **在编辑未保存时, 发布被禁用 .** 图表节省了900ms的去弹; 出版 窗口内部会冻结一个版本, 其最后的编辑仍在定时器中 。 控制器 先冲去当后卫.
-   **`duplicateToTenant()` 作为草案复制模板**,通过读取来源 `current_published_version_id` 所以,它从来没有复制 某人的公开草稿 当同一模板被复制两次时, 而不是表面显示 23505 .

* * *

## 餐桌合同

这个软件包是 **没有** 创建表格。 这个 `workflow_definitions` 移民拥有 `workflow_definitions` 财务报告和审定财务报表 `workflow_definition_versions` (本国) `tenant_id` 列,平面 RLS 上游逐字记录 `public.form_layouts`, (中文(简体) ), `graph jsonb`, (中文(简体) ), `ai_context jsonb`) (中文(简体) ). 如果有的话 列名称在 `src/types.ts` 对文件有异议 迁移是正确的.

这些表格由 `20261103000000_workflow_definitions.sql` 延长期限 `20261105000000_workflow_definition_versions_published_at.sql`。将两者分为三个范围 (root, crm7,商务-同名)字节相同,有对齐的条目在 `scripts/migration-collision-allowlist.txt`。 。 。 .

> **版本相撞无声.** `schema_migrations` 在十四位数的 AlONE 版本上键入 横跨8个应用范围, 所以一个版本的文件 已经放在分类账 **没有跳过 单词** ——成功报告,无所应用. 计划保留 `20261102000000` #2896 把它带走了 当天; `published_at` 是一个基于同样原因的新文件,而不是编辑到合并的 `20261103000000` 它本身重新编号为: `20261104000000` 改为 `20261105000000` 何时 1085号商机合并了执行桥 一小时后 检查免费。 人口普查是一种快照,而不是两个方向的保留.

> **0.1.0 不同意自己的表格,每个测试都通过.** 由SET和 插入时 `label` - 一个从未存在的栏目 `publishVersion()` 写 `published_at`, (中文(简体) ), 哪个 `20261103000000` 从未创建。 列出、重命名、创建和发布工作流程 返回 PostgREST 错误,合并的学徒种子完全无法降落。 没发现 因为每次测试都打乱了Supabase客户端. `src/__tests__/tableContract.test.ts` 现在解析 迁移文件,当服务名称为 DDL 未声明的列时失败.

读者必须经过 `current_published_version_id`,从来没有"最高版本数字"——即 是什么使出版 原子和可逆, 停止半完成的草稿到达 生产.

* * *

## 测试

`pnpm test` - 对8个文件进行105次测试:

-   `nodeRegistry.test.ts` 词汇, `nodeTypes` 稳定,由数据驱动的手柄,开放
-   `connectionValidation.test.ts` —— 说 **一个周期被接受**两个学徒圈,四行 和每个拒绝
-   `swimlaneLayout.test.ts` - 养育子女、车道秩序、父母前子女以及一名间谍证明 微弱的呼唤是计划建设者而不是重新实施
-   `graphRoundTrip.test.ts` ——连载 ——去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相去相相去相去相去相去相 `JSON`
-   `undoRedo.test.ts` ——50分弹出盖,分批正确,一倒一出
-   `tableContract.test.ts` ——服务只可指定迁移 FILES 声明的列,并附有 控制断言, 所以一个匹配无内容的解析器不能报告干净
-   `duplicateDefinition.test.ts` ——抄本作为草稿出自已出版的指针相较 比起来 `max(version)`,带有原理说明, 撞出一个相撞的键, 并且 **没有** 重试一个 错误不是唯一的违反
-   `editorChrome.test.tsx` ——调色板跟随注册,重命名是倒数一步,删除一个 样式先询问,在编辑未保存时拒绝发布

## 常见问题

### @bsuite/workflow-canvas 是什么？

BSuite 的流程- 形状 xyflow 画布: 通用节点类型注册\( step / decision / terminator / handoff\), 泳道作为 xyflow 父节点, LOOP- PERMISSIVE 连接验证, 以及控制器 \+ RPC 支持的服务 持续 xyflow 的本地 \{node

### 如何安装 @bsuite/workflow-canvas？

在项目目录运行 npm install @bsuite/workflow-canvas，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：zod（^4）、react（\>=18 \<21）、react-dom（\>=18 \<21）、lucide-react（\>=0\.400\.0）、@xyflow/react（^12）、@supabase/supabase-js（^2）、@tanstack/react-query（^5）、@bsuite/schema-builder（\>=1\.9\.0 \<2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bsuite/workflow-canvas 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bsuite/workflow-canvas 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bsuite/workflow-canvas 可以商用吗？

@bsuite/workflow-canvas 使用 UNLICENSED 许可。作者声明为 UNLICENSED，即不授予公开使用许可（与公共领域的 Unlicense 不同）。使用前需获得作者授权。以上为概括，不构成法律意见，请以许可原文为准。

### @bsuite/workflow-canvas 的下载量有多少？

根据 npm 官方下载统计，@bsuite/workflow-canvas 在 2026/10/09 – 2026/11/07 这 30 天内被下载 1,701 次，日均约 57 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bsuite/workflow-canvas 还在维护吗？

最新版本 0\.3\.4 发布于 2026/11/05（4 天前）；至今共发布 17 个版本，其中过去 12 个月发布了 17 个；首次发布于 2026/09/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。