logologo
Bắt đầu
Hướng dẫn
Phát triển
Plugin
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
Bắt đầu
Hướng dẫn
Phát triển
Plugin
API
logologo
Người dùng

Vai trò và quyền

Cấu hình vai trò
Cấu hình quyền
Áp dụng trong UI
Hợp nhất vai trò

Hướng dẫn cho nhà phát triển

Mở rộng thanh cấu hình quyền

Phòng ban

Quản lý phòng ban
Quản lý vai trò phòng ban

Đồng bộ dữ liệu người dùng

Quản lý đồng bộ

Nguồn dữ liệu

WeChat Work
HTTP API

Hướng dẫn cho nhà phát triển

Mở rộng nguồn dữ liệu đồng bộ
Mở rộng tài nguyên đích đồng bộ
Previous PageHợp nhất vai trò
Next PageQuản lý phòng ban
TIP

Tài liệu này được dịch bởi AI. Đối với bất kỳ thông tin không chính xác nào, vui lòng tham khảo phiên bản tiếng Anh

#Mở rộng các thẻ cấu hình quyền

Dưới đây, chúng ta sẽ lấy mục cấu hình "Mobile Menu" làm ví dụ để minh họa cách mở rộng một thẻ cấu hình quyền mới. Kết quả được hiển thị trong hình dưới đây:

20240903210248

Mã code như sau:

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

Đầu tiên, chúng ta cần lấy một instance của plugin PluginACLClient (các phương pháp khác để lấy instance của plugin), và thêm một thẻ cấu hình quyền mới bằng phương thức settingsUI.addPermissionsTab. Trong ví dụ này, chúng ta đã thêm một thẻ cấu hình quyền có tên là "Mobile Menu".

Giá trị của thuộc tính settingsUI là một instance của lớp có tên ACLSettingsUI, và thông tin kiểu của nó như sau:

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 {
  /**
   * the key of the currently active tab panel
   */
  activeKey: string;
  /**
   * the currently selected role
   */
  role: Role;
  /**
   * translation function
   */
  t: TFunction;
  /**
   * used to constrain the size of the container in the Tab
   */
  TabLayout: React.FC;
}