logologo
Start
Dokumentacja
Deweloperzy
Wtyczki
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Start
Dokumentacja
Deweloperzy
Wtyczki
API
logologo
Użytkownicy

Role i uprawnienia

Konfiguracja ról
Konfiguracja uprawnień
Zastosowanie w interfejsie
Suma ról

Przewodnik dewelopera

Rozszerzanie paska konfiguracji uprawnień

Działy

Zarządzanie działami
Zarządzanie rolami działów

Synchronizacja danych użytkowników

Zarządzanie synchronizacją

Źródła danych

WeChat Work
HTTP API

Przewodnik dewelopera

Rozszerzanie źródeł synchronizacji
Rozszerzanie celów synchronizacji
Previous PageSuma ról
Next PageZarządzanie działami
TIP

Ten dokument został przetłumaczony przez AI. W przypadku niedokładności, proszę odnieść się do wersji angielskiej

#Rozszerzanie zakładek konfiguracji uprawnień

Poniżej przedstawiono przykład elementu konfiguracji „Menu mobilne”, pokazujący, jak rozszerzyć nową zakładkę konfiguracji uprawnień. Efekt widoczny jest na poniższym obrazku:

20240903210248

Poniżej znajduje się kod:

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>
      ),
    }));
  }
}

Najpierw musimy uzyskać instancję wtyczki PluginACLClient (inne metody uzyskiwania instancji wtyczek), a następnie dodać nową zakładkę konfiguracji uprawnień za pomocą metody settingsUI.addPermissionsTab. W tym przykładzie dodaliśmy zakładkę konfiguracji uprawnień o nazwie „Menu mobilne”.

Wartość właściwości settingsUI jest instancją klasy o nazwie ACLSettingsUI, a jej informacje o typie przedstawiono poniżej:

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 {
  /**
   * klucz aktualnie aktywnego panelu zakładki
   */
  activeKey: string;
  /**
   * aktualnie wybrana rola
   */
  role: Role;
  /**
   * funkcja tłumaczenia
   */
  t: TFunction;
  /**
   * używane do ograniczenia rozmiaru kontenera w zakładce
   */
  TabLayout: React.FC;
}