Home
Guide
API
Develop
Plugins
Roadmap
Contribution
Home
Guide
API
Develop
Plugins
Roadmap
Contribution

SystemSettingsManager

用于管理插件配置页面，其底层对应着 RouterManager。

1interface PluginSettingOptionsType {
2  title: string;
3  /**
4   * @default `Outlet`
5   */
6  Component?: ComponentType<T> | string;
7  icon?: string;
8  /**
9   * sort, the smaller the number, the higher the priority
10   * @default 0
11   */
12  sort?: number;
13  aclSnippet?: string;
14}
15
16interface PluginSettingsPageType {
17  label?: string;
18  title: string;
19  key: string;
20  icon: any;
21  path: string;
22  sort?: number;
23  name?: string;
24  isAllow?: boolean;
25  topLevelName?: string;
26  aclSnippet: string;
27  children?: PluginSettingsPageType[];
28}
29
30class SystemSettingsManager {
31  add(name: string, options: PluginSettingOptionsType): void
32  get(name: string, filterAuth?: boolean): PluginSettingsPageType;
33  getList(filterAuth?: boolean): PluginSettingsPageType[]
34  has(name: string): boolean;
35  remove(name: string): void;
36  getRouteName(name: string): string
37  getRoutePath(name: string): string;
38  hasAuth(name: string): boolean;
39}

实例方法

systemSettingsManager.add()

添加插件配置页。

  • 类型
1class SystemSettingsManager {
2    add(name: string, options: PluginSettingOptionsType): void
3}
  • 详细解释

第一个参数 name，是路由唯一标识，用于后续的删改查，并且 name 支持 . 用于分割层级，不过需要注意当使用 . 分层的时候，父级要使用 Outlet，让子元素能正常渲染。

第二个参数中 Component 支持组件形式和字符串形式，如果是字符串组件，要先通过 app.addComponents 进行注册，具体参考 RouterManager。

  • 示例

单层级配置。

1const HelloSettingPage = () => {
2    return <div>hello setting page</div>
3}
4
5class MyPlugin extends Plugin {
6    async load() {
7        this.app.systemSettingsManager.add('hello', {
8            title: 'Hello',  // menu title and page title
9            icon: 'ApiOutlined', // menu icon
10            Component: HelloSettingPage
11        })
12    }
13}

多层级配置。

1// 多层级配置页
2
3class MyPlugin extends Plugin {
4    async load() {
5        this.app.systemSettingsManager.add('hello', {
6          title: 'HelloWorld',
7          icon: '',
8          // Component: Outlet, 默认为 react-router-dom 的 Outlet 组件，可自定义
9        })
10
11        this.app.systemSettingsManager.add('hello.demo1', {
12          title: 'Demo1 Page',
13          Component: () => <div>Demo1 Page Content</div>
14        })
15
16        this.app.systemSettingsManager.add('hello.demo2', {
17          title: 'Demo2 Page',
18          Component: () => <div>Demo2 Page Content</div>
19        })
20    }
21}

systemSettingsManager.get()

获取配置信息。

  • 类型
1class SystemSettingsManager {
2    get(name: string, filterAuth?: boolean): PluginSettingsPageType;
3}
  • 详细解释

第一个是在添加时的 name 参数，第二个参数是是否在获取的时候进行权限过滤。

  • 示例

在组件中获取。

1const Demo = () => {
2    const app = useApp();
3    const helloSettingPage = this.app.systemSettingsManager.get('hello');
4}

在插件中获取。

1class MyPlugin extends Plugin {
2    async load() {
3        const helloSettingPage = this.app.systemSettingsManager.get('hello')
4        const helloSettingPage = this.app.systemSettingsManager.get('hello', false);
5
6        const mobileAppConfigPage = this.app.systemSettingsManager.get('mobile.app')
7    }
8}

systemSettingsManager.getList()

获取插件配置页列表。

  • 类型
1class SystemSettingsManager {
2    getList(filterAuth?: boolean): PluginSettingsPageType[]
3}
  • 详细解释

filterAuth 默认值为 true，即进行权限过滤。

  • 示例
1const Demo = () => {
2    const app = useApp();
3    const settings = app.systemSettingsManager.getList();
4    const settings = app.systemSettingsManager.getList(false);
5}

systemSettingsManager.has()

判断是否存在，内部已进行权限过滤。

  • 类型
1class SystemSettingsManager {
2    has(name: string): boolean;
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        this.app.systemSettingsManager.has('hello');
4    }
5}

systemSettingsManager.remove()

移除配置。

1class SystemSettingsManager {
2    remove(name: string): void;
3}

systemSettingsManager.getRouteName()

获取对应路由的名称。

  • 类型
1class SystemSettingsManager {
2    getRouteName(name: string): string
3}
  • 示例
1class MyPlugin extends Plugin {
2    async load() {
3        const helloRouteName = this.systemSettingsManager.getRouteName('hello'); // admin.settings.hello
4    }
5}

systemSettingsManager.getRoutePath()

获取插件配置对应的页面路径。

  • 类型
1class SystemSettingsManager {
2    getRoutePath(name: string): string;
3}
  • 示例
1const Demo = () => {
2    const navigate = useNavigate();
3    const app = useApp();
4    const helloSettingPath =  app.systemSettingsManager.getRoutePath('hello');
5
6    return <div onClick={()=> navigate(helloSettingPath)}>
7        go to hello setting page
8     </div>
9}

systemSettingsManager.hasAuth()

单独判断是否权限。

1class SystemSettingsManager {
2    hasAuth(name: string): boolean;
3}
ON THIS Page