# @canva/intents 中文文档

规范地址：https://npmcn.com/package/%40canva/intents/

版本：2\.8\.0
npm 元数据更新时间：2026-10-29T04:06:16.792Z
中文译文更新时间：2026-11-09T01:23:30.465Z
软件包许可：SEE LICENSE IN LICENSE\.md FILE

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

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

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

- 包体积（解压后）：220 kB，36 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：@canva/error ^2\.0\.0
- 首次发布：2025-05-16T02:41:33.088Z
- 最新版本发布：2026-10-29T04:06:16.585Z
- 近 30 天下载量：77155（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：32（近 12 个月 25 个）

## 中文简介

Canva 开发者 SDK Intents 库用于 Canva 内部的应用程序

## 安装

```sh
npm install @canva/intents
```

也可以使用：`pnpm add @canva/intents`、`yarn add @canva/intents`、`bun add @canva/intents`

## README

# @ canva/ intents (英语)

一个Canva开发者SDK软件包,用于Canva内部构建应用软件. 为与App Intents合作提供类型和公用事业.

![](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)

## 目录

-   [导言](https://npmcn.com/package/%40canva/intents/#readme-introduction)
-   [安装](https://npmcn.com/package/%40canva/intents/#readme-installation)
-   [使用量](https://npmcn.com/package/%40canva/intents/#readme-usage)
-   [相关软件包](https://npmcn.com/package/%40canva/intents/#readme-related-packages)
-   [捐款](https://npmcn.com/package/%40canva/intents/#readme-contributing)
-   [许可证](https://npmcn.com/package/%40canva/intents/#readme-license)

## 导言

`@canva/intents` 是 npm 建设软件包 [canva 内部的应用程序](https://www.canva.dev/docs/apps/) 与 Canva 开发者 SDK . 它提供意向特定类型和帮助器,允许应用程序与Canva编辑器内部的特定表面相融合——如数据连接器面板或设计编辑器.

一个"意向"代表一个应用程序可以支持的特定用户工作流程. 例如:

-   用户可以从执行此程序的应用程序中选择并导入数据 **数据连接器** 意图.
-   一个应用软件能够通过执行 Canva 设计表面来展示互动和创造性的工具 **设计编辑器** 意图.
-   用户可以直接向外部平台发布他们的Canva设计.

这个 `@canva/intents` 软件包包含 **所有可用意图**,导出每个意图的类型信息并准备函数,按域分组. 这使得您的应用程序可以准备一个或多个意图,同时保留每个意图的执行模块和类型安全.

目前得到支持的意图:

-   [`Data Connector`](https://npmcn.com/package/%40canva/intents/#readme-data-connector-example)
-   [`Design Editor`](https://npmcn.com/package/%40canva/intents/#readme-design-editor-example)
-   [`Content Publisher`](https://npmcn.com/package/%40canva/intents/#readme-content-publisher-example)

今后将增加新的意图.

**说明:** 要与 Canva 开发者 SDK 一同起来运行, 请检查 [快速启动指南](https://www.canva.dev/docs/apps/quickstart/)。 。 。 .

## 安装

```bash
npm install @canva/intents
```

## 使用量

### 准备意图

每个意图类型都有相应的 `prepare` 函数 `@canva/intents` 软件包。 您可以通过调用适当的程序执行应用程序代码中的任何意图 `prepare` 函数及其所需的特定参数.

### 数据连接示例

以下是一个完整的例子 `data_connector` 意图,允许用户从应用程序导入表格数据:

```ts
import { createRoot } from 'react-dom/client';
import { AppUiProvider } from '@canva/app-ui-kit';
import { prepareDataConnector } from '@canva/intents/data';
import { DataSelectionUI } from './data_selection_ui';
import { fetchData } from './fetch_data';

prepareDataConnector({
  getDataTable: async (request) => {
    try {
      const dataTable = await fetchData(request); // your data fetching logic here
      return {
        status: 'completed',
        dataTable,
      };
    } catch {
      return {
        status: 'app_error',
        message: 'Failed to fetch data',
      };
    }
  },

  renderSelectionUi: (request) => {
    const root = createRoot(document.getElementById('root') as Element);
    root.render(
      <AppUiProvider>
        <DataSelectionUI {...request} />
      </AppUiProvider>
    );
  },
});
```

### 设计编辑器示例

```ts
import { prepareDesignEditor } from '@canva/intents/design';

prepareDesignEditor({
  render() {
    // render logic
  },
});
```

### 内容发布器实例

```ts
import { prepareContentPublisher } from "@canva/intents/content";

prepareContentPublisher({
  renderSettingsUi: ({
    updatePublishSettings,
    registerOnContextChange,
  }) => {
    root.render(
      <AppUiProvider>
        <SettingUi
          updatePublishSettings={updatePublishSettings}
          registerOnContextChange={registerOnContextChange}
        />
      </AppUiProvider>,
    );
  },

  renderPreviewUi: ({ registerOnPreviewChange }) => {
    root.render(
      <AppUiProvider>
        <PreviewUi registerOnPreviewChange={registerOnPreviewChange} />
      </AppUiProvider>,
    );
  },

  getPublishConfiguration: async () => {
    return {
      status: "completed",
      outputTypes: [
        {
          id: "post",
          displayName: "Post",
          mediaSlots: [
            {
              id: "media",
              displayName: "Media",
              fileCount: { exact: 1 },
              accepts: {
                image: {
                  format: "png",
                },
              },
            },
          ],
        },
      ],
    };
  },

  publishContent: async (request: PublishContentRequest) => {
    // logic to upload media to your platform here
    return {
      status: "completed",
      externalId: "1234567890",
      externalUrl: "https://example.com/posts/1234567890",
    };
  },
});
```

## 相关软件包

Canva内部的App是用以下 Canva 开发者 SDK 包构建的 :

-   [`@canva/app-ui-kit`](https://www.npmjs.com/package/@canva/app-ui-kit) - 基于反应的组件库,用于创建模仿Canva外观和感觉的应用程序.
-   [`@canva/asset`](https://www.npmjs.com/package/@canva/asset) - 提供处理资产的方法,例如图像和录像文件.
-   [`@canva/design`](https://www.npmjs.com/package/@canva/design) - 提供与用户设计互动的方法,例如创建要素.
-   [`@canva/error`](https://www.npmjs.com/package/@canva/error) - 提供 `CanvaError` 处理错误的课.
-   [`@canva/platform`](https://www.npmjs.com/package/@canva/platform) - 提供实用方法,例如打开外部链接的方法.
-   [`@canva/user`](https://www.npmjs.com/package/@canva/user) - 提供获取用户数据和认证用户的方法.

## 捐款

我们正在积极开发这个一揽子计划,但目前不接受第三方的捐款. 如果您想要求修改或添加软件包,请通过 [Canva 开发者社区](https://community.canva.dev/)。 。 。 .

## 许可证

见 `LICENSE.md` 文档.

## 常见问题

### @canva/intents 是什么？

Canva 开发者 SDK Intents 库用于 Canva 内部的应用程序

### 如何安装 @canva/intents？

在项目目录运行 npm install @canva/intents，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@canva/error（^2\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @canva/intents 支持 TypeScript 吗？

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

### @canva/intents 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @canva/intents 可以商用吗？

@canva/intents 使用 SEE LICENSE IN LICENSE\.md FILE 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @canva/intents 的下载量有多少？

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

### @canva/intents 还在维护吗？

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