添加组件

zhanghan
2024-07-14 17:05
· edited
有些时候，我们希望在一个网站内，能够推荐另一个组件给用户，并期望网站的管理员能够直接添加一个或多个组件。
如何便捷的添加组件#在以往的流程中，网站管理员想要为当前站点添加一个组件时，需要进行以下步骤才能完成：
以管理员的身份登录网站
打开网站的管理页面
点击 Dashboard -> Blocklets -> Add Blocklets

接下来你还需要搜索你想要安装的应用，并根据提示完成后续的安装

而现在，你需要做以下步骤即可：
以管理员身份登录网站
点击安装按钮，并根据提示完成后续的安装


这样就能大大降低了网站管理员的使用复杂程度，也能实现在必要的地方直接提示管理员来添加所需要的组件
如何让站点支持这个功能#目前该组件仅有 React 版本的代码，可以通过在页面中想要显示添加组件的位置，增加以下代码
import { AddComponent }​ from '@blocklet/ui-react`;

<AddComponent
  componentDid={componentDid}
  selectedMeta={selectMeta}
  storeUrl={storeUrl}
  onClose={handleClose}
  onComplete={handleComplete}
  autoClose={false}
  render={({ onClick, loading }) => {
    return (
      <Button
        size="small"
        color="primary"
        variant="outlined"
        style={{
          cursor: disabled ? 'not-allowed' : 'pointer',
        }}
        loading={loading}
        disabled={disabled}
        onClick={onClick}>
        {disabled ? (
          <Icon icon={CheckCircleRoundedIcon} style={{ fontSize: '1rem', marginRight: '4px' }} />
        ) : null}
        {buttonText}
        {actionType === 'upgrade' ? (
          <Icon icon={UpgradeRoundedIcon} style={{ fontSize: '1.2rem' }} />
        ) : null}
      </Button>
    );
  }}
/>

参数解释：
componentDid: (string) 要添加的组件的 did，可以从 Blocklet Store 中找到 必填
storeUrl: {string} 组件所在的 Blocklet Store 的 url 必填
autoClose: (boolean) 是否需要在安装组件完成后自动关闭弹窗？默认值: true
onComplete: (function) 添加组件成功后的回调函数
onClose: (function) 添加组件过程中关闭弹窗的回调函数
render: (function) 是否要自定义渲染按钮的样子 默认会渲染一个按钮组件
render 函数会接收一个对象参数，对象会包含 onClick 和 loading 两个参数
在 render 函数内部返回的 jsx 需要在合适的时机触发 onClick 函数，这样才能唤起添加组件的流程
由于唤起添加组件的流程，如果在网络状况比较差的情况下，可能会需要等待一段时间，最好能够通过传入的 loading 参数来给用户一个视觉反馈，减少等待的焦灼感。
Sticker