# @camunda/c4-connectors 中文文档

规范地址：https://npmcn.com/package/%40camunda/c4-connectors/

版本：1\.10\.3
npm 元数据更新时间：2026-10-30T15:25:56.475Z
中文译文更新时间：2026-11-09T00:43:16.735Z
软件包许可：Apache-2\.0

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

原始 npm 页面：https://www.npmjs.com/package/%40camunda/c4-connectors
原文对照：https://npmcn.com/package/%40camunda/c4-connectors/?lang=original

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

- 包体积（解压后）：297 kB，200 个文件
- 模块格式：CommonJS
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：react ^19\.0\.0，react-dom ^19\.0\.0，@carbon/react ^1\.91\.0，styled-components 5\.x \|\| 6\.x，event-source-polyfill 1\.0\.x，@camunda/design-system ^0\.32\.1
- 首次发布：2025-02-25T13:16:14.048Z
- 最新版本发布：2026-07-21T14:53:47.606Z
- 近 30 天下载量：54917（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 27 个）

## 中文简介

Camunda 复合组件

## 安装

```sh
npm install @camunda/c4-connectors
```

也可以使用：`pnpm add @camunda/c4-connectors`、`yarn add @camunda/c4-connectors`、`bun add @camunda/c4-connectors`

## README

# C4 连接器

## 故事书

打开 PR 时, 将部署带有更改的故事本版本 自动访问,可通过点击PR中的链接访问.

## 设计系统兼容模式

每个导出组件支持选入 `mode` 道具,通过 `C4ConnectorsContextProvider`数字 :

```tsx
import "@camunda/c4-connectors/index.scss" // existing Carbon styles
import "@camunda/design-system/styles.css" // required only if you use mode="ds"

<C4ConnectorsContextProvider apiBaseUrl={...} organizationId={...} mode="ds">
  <C4InboundConnectorsTable onClick={...} />
</C4ConnectorsContextProvider>
```

-   `mode="carbon"` (默认)——用碳设计系统来做,与以前的版本没有变化.
-   `mode="ds"` - 与 [`@camunda/design-system`](https://github.com/camunda/design-system)消费者必须额外进口 `@camunda/design-system/styles.css` 一旦在他们的应用根上——这个库不会为您导入它,就像它不导入自己的一样 `index.scss` 给你的.

少数部件还没有设计系统等同性,而且总是 作为碳,在两种模式中: `Grid`编号 :`Column` 编程在 `C4Page`, (中文(简体) ), `Layer` 财务报告和审定财务报表 `Section` 在可执行细节视图和土司通知中。 这个 库中的故事书有一个“设计系统”工具栏来切换预览两种模式 对于任何故事.

## 中断更改

**需要反应 19** - 从v1.7.0开始,这个图书馆需要反应19 (单位:千美元)`^19.0.0`。反应 18 不再支持.

## 德维

### 预备

有几个 npm 包只提供给 Camundis, 所以你首先需要 在 GitHub 上创建个人访问令牌。 要创建此符号, 请遵循步骤 下图:

1.  转到 [https://github.com/ settings/tokens 页面存档备份,存于互联网档案馆](https://github.com/settings/tokens)。 。 。 .
2.  单击生成新令牌 .
3.  至少选择 `read:packages`。 。 。 .
4.  生成相.
5.  将生成的令牌保存在一个安全的地方(例如卡蒙达的秘密) 因为你再也见不到它了.  
    **重要**启用 SSO 允许符号访问 **相机云层** 文物.
6.  将生成的令牌添加到您的环境中 。 见以下例子: 林纳:  
    `export NPM_TOKEN=ghp_imiJmvG46E6wo7V4ANwurstbrotXafCg`
7.  接下来,运行如下:  
    `yarn`

注:强烈建议你将出口说明加入你的.简介,以便 自动添加到您的环境中.

### \* 安装

```bash
# install
yarn

# start storybook
yarn storybook

# build components
yarn build
```

### 使用控制台 SM 运行

见 [这个](https://github.com/camunda/camunda-cloud-management-apps/blob/main/docs/SELF_MANAGED.md#run-locally) 需要更多信息的文档.  
**热带木材数据库;** 使用以下内容 实现最小设置运行的环境变量 :

```bash
#build the project, go to the root directory (camunda-cloud-management-apps)
pnpm build

# camunda-cloud-management-apps/apps/console-sm-backend
NODE_ENV=local SERVICE_NAME=console-sm-backend CAMUNDA_CONSOLE_DISABLE_AUTH=true pnpm run start

# camunda-cloud-management-apps/apps/console-sm-frontend
pnpm run start:local
```

导航到localhost:4200打开控制台. 由于配置图的内容只是 假信息,获取所有外部数据将失败( 从网络应用进行遥测,.).

环境变量 `CAMUNDA_CONSOLE_DISABLE_AUTH` 禁用登录 师曰. 那种设定简化了本地实例 因为没有依赖性 这需要建立起来.

QQ 本地实例的配置图内容可见于 [应用程序. yaml](https://github.com/camunda/camunda-cloud-management-apps/blob/main/apps/console-sm-backend/application.yaml)。 。 。 .

## QQ 发布

### 官方发布

驻地协调员和最终释放都使用同样的方法 [发布-弧工作流程](https://github.com/camunda/c4-connectors/actions/workflows/publish-rc.yml)。 。 。 . 从 GitHub 动作标签中运行并选择 `release_type` 输入.

建议的两步进程:

1.  **释放候选人** - 运行工作流程与 `release_type = RC`这个 发布 npm 预释( 标记) `rc`)并打开一个名为 `chore: bump version to X.Y.Z-rc.N`由于部门保护限制 你必须 **手动合并此 PR**。 。 。 .
    
2.  **最后发行** - 一旦驻地协调员得到验证,将再次使用 `release_type = Final`。此选项将最后的软件包发布到 npm,创建 GitHub 发布,并更新更改日志. 再来一次,合并结果 `chore: bump version to X.Y.Z` 公关 **手动**。 。 。 .
    

### 当地释放

你用得着 [也门](https://github.com/wclr/yalc) 在本地部署软件包. 然后可以在另一个工程中通过添加来使用软件包 `workspace:` 页:1 依赖版本 `package.json`。 。 。 .

## 测试

### 单位和互动测试

单位测试使用情况 [维特](https://vitest.dev/) 和故事书交互测试使用 [`@storybook/test`](https://storybook.js.org/docs/writing-tests/component-testing) 启用 a11y 检查.

```bash
yarn test:unit          # Vitest unit tests
yarn test:storybook     # Storybook interaction + a11y tests (requires a running Storybook)
yarn test:ci            # TypeScript check + unit tests + Storybook tests (used in CI)
```

每一次推都自动在CI里运行 新逻辑必须有一个 `*.test.ts` 单位测试; 新组件状态或用户交互必须有一个故事本 `play` 函数.

### 视觉回归测试( VRT)

我们用 [剧作家](https://playwright.dev/docs/intro) 要进行的截图测试 了解通过依赖性更新或更改 组件代码.

#### 本地运行 VRT

我们在一个容器内运行 VRT 以避免不同的结果 不同的平台。 简单运行 :

```shell
yarn start:docker-storybook
```

接下来

```shell
yarn test:visual-regression:docker
```

上述命令将:

1.  构建故事书.
2.  启动带有此名称的 Playwright 容器 `c4-visual-regression`。 。 。 .
3.  在垃圾箱里写故事书.
4.  在嵌入容器内进行视觉回归测试.

开发这些步骤不一定总能起到帮助作用 一次 一次吗 您可以在 [软件包.json](https://npmcn.com/package/%40camunda/c4-connectors/package.json)。 。 。 .

#### 在 CI 中运行 VRT

有一个 `Visual regression tests` 自动启动的工作流程 推动。 也可以手动触发 `Actions` 选项卡.

如果工作流程失败,您可以通过导航到 工作流程运行摘要,然后滚动到 `Artifacts` 节。 点击 所谓的文物 `Playwright report` 要下载,请下载 文件夹,然后打开 `index.html` 浏览器中的测试报告文件 查看报告.

#### 如何处理失败的测试

当 VRT 失败时, 这可能有两个原因:

1.  不知不觉中实行了一种改变。 这样的话,你看看测试 报告并检查是否打算更改。 如果是,请按2进行.
2.  你故意改头换面的 在这种情况下,你需要更新 截图如下 .

确保你有 `c4-visual-regression` 运行或启动嵌入容器 就像描述的那样 [这里](https://npmcn.com/package/%40camunda/c4-connectors/#readme-running-vrt-locally)然后,看看测试 报告:

```shell
yarn report:visual-regression
```

重复检查,通过查看 失败测试报告中突出的差别.

要更新所有截图, 请运行 :

```shell
yarn update:visual-regression:docker
```

测试应该通过当地和CI。 提交并推进更新 截图.

## 常见问题

### @camunda/c4-connectors 是什么？

Camunda 复合组件

### 如何安装 @camunda/c4-connectors？

在项目目录运行 npm install @camunda/c4-connectors，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^19\.0\.0）、react-dom（^19\.0\.0）、@carbon/react（^1\.91\.0）、styled-components（5\.x \|\| 6\.x）、event-source-polyfill（1\.0\.x）、@camunda/design-system（^0\.32\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @camunda/c4-connectors 支持 TypeScript 吗？

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

### @camunda/c4-connectors 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @camunda/c4-connectors 可以商用吗？

@camunda/c4-connectors 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @camunda/c4-connectors 的下载量有多少？

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

### @camunda/c4-connectors 还在维护吗？

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