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