UI 插槽

更新时间 2025/02/05 08:08:31

英飞画布在四个顶角处都有一些操作的 UI 入口，我们在这些位置开放了一些注入自己逻辑的入口，你可以使用一个简单的 UI 来注入你的自定义功能。

原理

简单介绍一下原理，在画布初始化实例的配置参数中提供了 uiSlots 属性来接收上层注入自定义 UI ，底层拿到 UI 组件后以 slot（插槽） 的方式来展示到特定的位置。slot 插槽是一种机制，它允许父组件将自己的 UI 内容注入到子组件的特定位置。这使得子组件可以灵活地接收和展示父组件传递的内容，从而提高组件的可复用性和灵活性，在英飞画布中就有许多这样的插槽。

titleSlot

titleSlot 插槽是位于画布左上角的标题栏插槽，接收一个返回 React 组件的函数。该插槽的 maxHeight 为 48px，与画布自带的搜索、下载等 UI 毗邻，通常可以用于展示 logo 或呈现 “返回” 按键等。

export interface GetSdkInstanceConfigs {
  uiSlots?: {
    /** 画布左上角的标题栏插槽 */
    titleSlot?: (w?: number, cb?: (w: number) => void) => React.ReactNode;
    // other slot
    ...
  };
  // other properties
  ...
}

接下来本文将使用一个简单已有组件来演示怎么注入自己的组件到左上角，先来看看自定义 UI 注入前左上角的工具栏

注入自定义 ui 前

英飞 Web SDK 提供了一个 <Setting> 组件，用于设置画布的一些 UI 配置，现在我们将这个组件通过 titleSlot 插槽来注入，渲染在左上方

注意：这里只提供了最小的示例代码仅方便理解如何使用 titleSlot 插槽，更加详细的初始化画布请参照 Web SDK API 说明

import InfiWebSdk, { Setting } from '@plaso-infi/whiteboard-ext-tools';

const initRes = await InfiWebSdk.getSdkInstance({
  uiSlots: {
    titleSlot: () => <Setting />,
  },
  // other properties
  ...
});

这样就在左上角注入了一个拥有设置能力的按钮

注入自定义 ui 后

topRightSlot

topRightSlot 插槽是位于画布右上角的插槽，接收一个 React 组件。该插槽的 maxHeight 为 48px，与画布自身的在线成员展示、插件、批注等 UI 毗邻。

export interface GetSdkInstanceConfigs {
  uiSlots?: {
    /** 画布右上角的标题栏插槽 */
    topRightSlot?: React.ReactNode;
    // other slot
    ...
  };
  // other properties
  ...
}

接下来我们使用一个最简单组件来演示怎么注入自己的组件到右上角，先来看看注入自定义 UI 前右上角的工具栏

注入自定义 ui 前

下面我们定义个简单演示组件 UI 通过 topRightSlot 插槽来注入，渲染在右上方

注意：这里只提供了最小的示例代码仅方便理解如何使用 topRightSlot 插槽，更加详细的初始化画布请参照 Web SDK API 说明

import InfiWebSdk, { Setting } from '@plaso-infi/whiteboard-ext-tools';

const TopRightNode: React.FC = () => {
  return <div onClick={() => showToast('为英菲画布点赞', 10000)}>👍🏻</div>;
};

const initRes = await InfiWebSdk.getSdkInstance({
  uiSlots: {
    topRightSlot: <TopRightNode />,
  },
  // other properties
  ...
});

这样就在右上角注入了一个拥有点赞能力的按钮

注入自定义 ui 后

一般情况下你可以在插槽中传入任何 React 组件，但是一般我们建议在这个位置插入类似于标题、 Logo、Icon 这种简单的 UI，复杂的 UI 表现可以像上面提到的 <Setting> 组件一样使用各种弹出层来实现。

原理​

titleSlot​

topRightSlot​

原理

titleSlot

topRightSlot