跳到主要内容

集成 Blocklet Studio

ArcBlocklet 的开发者们应该都熟悉这张图，它展示了 AIGNE 如何利用 Blocklet Studio 和 Blocklet Store 形成飞轮效应。AIGNE 的用户可以创建许多应用并发布到 Store，从而反哺 AIGNE 的生态系统。事实上，任何 Blocklet 的开发者都可以

艾涅循环.png

ArcBlocklet 的开发者们应该都熟悉这张图，它展示了 AIGNE 如何利用 Blocklet Studio 和 Blocklet Store 形成飞轮效应。AIGNE 的用户可以创建许多应用并发布到 Store，从而反哺 AIGNE 的生态系统。事实上，任何 Blocklet 的开发者都可以通过集成 Blocklet Studio 和 Blocklet Store 创建自己的飞轮效应。

什么类型的 Blocklet 适合集成 Blocklet Studio？

大部分 Blocklet 无需集成 Blocklet Studio。所有 Blocklet 的管理员默认可以使用 Blocklet Studio，但如果希望 Blocklet 用户也能使用 Blocklet Studio，则需要将 Blocklet 与 Blocklet Studio 集成。

一个典型的需要集成 Blocklet 的场景是：你的 Blocklet 需要提供用户创建 Blocklet 的功能，并希望通过 Blocklet Store 分发。

以下是一些适合集成 Blocklet Studio 的例子：

  • AIGNE 接入 Blocklet Studio，将每个 AIGNE 创建的 AI 应用转换成 Blocklet，并在 Blocklet Store 上分发。
  • Pages-Kit 接入 Blocklet Studio，将创建的 Pages 组件转换成资源型 Blocklet，并在 Blocklet Store 上分发。

在 Blocklet 中集成 Blocklet Studio

在 Blocklet 中集成 Blocklet Studio 非常简单，只需使用 React 组件进行声明：

javascript
import { BlockletStudio } from '@blocklet/ui-react';

<BlockletStudio

mode="dialog"

tenantScope={project.id}

componentDid={MY_COMPONENT_DID}

open={open}

setOpen={() => setOpen()}

onOpened={() => onOpened?.()}
/>

自定义创建过程的默认参数和可选资源

每个项目都有其独特的需求，因此允许用户自定义 Blocklet Studio 创建过程的默认参数和可选资源。用户可以根据项目的具体情况，预先设置好常用的参数和资源，节省发布步骤。以下是更完整的参数示例：

javascript
import { BlockletStudio } from '@blocklet/ui-react';

<BlockletStudio

...

// 创建应用的信息

title={project.name || ''}

description={project.description || ''}

note=""

introduction=""

logo={logo}

componentDid={MY_COMPONENT_DID}

// 透传到 get blocklet resource 的参数

resourcesParams={{ projectId: project.id }}

// 用户是否可以编辑依赖组件

dependentComponentsMode="readonly"

// 默认选中的资源

resources={{

[MY_COMPONENT_DID]: [],

}}
/>

完整的组件参数:

javascript
interface BlockletStudioProps {
  open: boolean;
  setOpen: (open: boolean) => void;
  onOpened?: () => void;
  componentDid: string;
  tenantScope?: string;
  resourcesParams?: Record<string, any>;
  mode?: string;
  title?: string;
  logo?: string;
  description?: string;
  introduction?: string;
  note?: string;
  onUploaded?: (data: unknown) => void; // 上传后的回调函数
  onReleased?: (data: unknown) => void; // 发布一个新 release 后的回调函数
  onConnected?: (data: unknown) => void; // 连接后的回调函数
  components?: Record<string, unknown>[]; // 默认组件列表
  resources?: Record<string, unknown>; // 默认资源
  componentsTitle?: string;
  resourcesTitle?: string;
  style?: React.CSSProperties;
  zIndex?: number;
  dependentComponentsMode?: 'auto' | 'readonly'; // 禁用选择组件
}

集成效果演示

通过上述方法，AIGNE 在内部集成的 Blocklet Studio 效果如下所示：

多租户模式与单租户模式

为了满足不同用户的需求，新版本详细区分了多租户模式和单租户模式。在多租户模式下，每个用户只能管理自己创建的 Blocklet。在 Dahboard 中，我们可以修改 Blocklet 的租户模式，Blocklet Studio 会遵循这个配置，无需为不同租户模式进行额外开发: