権限設定タブの拡張

「モバイルメニュー」設定項目を例に、新しい権限設定タブを拡張する方法を説明します。結果は以下の図のようになります。

20240903210248

コードは以下の通りです。

import { Plugin } from '@nocobase/client';
import PluginACLClient from '@nocobase/plugin-acl/client';

class PluginMobileClient extends Plugin {
  async load() {
    const aclInstance = this.app.pm.get(PluginACLClient);

    aclInstance?.settingsUI.addPermissionsTab(({ t, TabLayout, activeKey }) => ({
      key: 'mobile-menu',
      label: t('Mobile menu', {
        ns: 'plugin-mobile',
      }),
      children: (
        <TabLayout>
          <MenuPermissions />
        </TabLayout>
      ),
    }));
  }
}

まず、PluginACLClient プラグインのインスタンスを取得する必要があります（プラグインインスタンスを取得するその他の方法）。そして、settingsUI.addPermissionsTab メソッドを使って、新しい権限設定タブを追加します。この例では、「モバイルメニュー」という名前の権限設定タブを追加しました。

settingsUI プロパティの値は、ACLSettingsUI という名前のクラスのインスタンスです。その型情報は以下の通りです。

import { TabsProps } from 'antd/es/tabs/index';

interface ACLSettingsUI {
  addPermissionsTab(tab: Tab | TabCallback): void;
  getPermissionsTabs(props: PermissionsTabsProps): Tab[];
}

type Tab = TabsProps['items'][0];

type TabCallback = (props: PermissionsTabsProps) => Tab;

interface PermissionsTabsProps {
  /**
   * 現在アクティブなタブパネルのキー
   */
  activeKey: string;
  /**
   * 現在選択されているロール
   */
  role: Role;
  /**
   * 翻訳関数
   */
  t: TFunction;
  /**
   * タブ内のコンテナのサイズを制約するために使用されます
   */
  TabLayout: React.FC;
}

#権限設定タブの拡張

権限設定タブの拡張