Used to check for browser translation.
用于检测浏览器翻译。
ブラウザの翻訳を検出する

集成 Blocklet Studio



艾涅循环.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 组件进行声明:

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

<BlockletStudio
mode="dialog"
tenantScope={project.id}
componentDid={MY_COMPONENT_DID}
open={open}
setOpen={() => setOpen()}
onOpened={() => onOpened?.()}
/>

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

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

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]: [],
}}
/>

完整的组件参数:

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 会遵循这个配置,无需为不同租户模式进行额外开发:


你获得 0 积分