快速开始

系统管理中大的模块分为用户管理、角色管理、部门管理、资源管理，一般管理员或者超级管理员才需要展示这部分，游客或者注册用户是不需要展示这部分的。每个模块对应一个store和相应的UI组件：

	用户管理	角色管理	部门管理	资源管理
store	UserManagementStore	RoleStore	DepartmentStore	ResourceStore
UI组件	UserManagement	Role	Department	Resource

项目中接入系统管理

store文件

import { systemStore, systemStoreNames, ResourceStore, SystemBreadcrumbStore, UserManagementStore, RoleStore, DepartmentStore } from 'mlog-service';

systemStore.set(systemStoreNames.resourceStore, new ResourceStore()); // 资源管理
systemStore.set(systemStoreNames.userManagementStore, new UserManagementStore()); // 用户管理
systemStore.set(systemStoreNames.roleStore, new RoleStore()); // 角色管理
systemStore.set(systemStoreNames.departmentStore, new DepartmentStore()); // 部门管理

用户管理页面

import React from 'react';
import { UserManagement, systemStore, systemStoreNames } from 'mlog-service';
import { Breadcrumb } from 'antd';
...
return (
    <>
		<Breadcrumb
          separator='>'
          items={systemStore.get(systemStoreNames.userManagementStore)?.systemBreadcrumbStore?.lists}
          itemRender={(item: any) => {
            return <span style={{ cursor: 'pointer' }} onClick={() => systemStore.get(systemStoreNames.userManagementStore).systemBreadcrumbStore.setClickItem(item.title)}>{item.title}</span>;
          }}
		/>
    	<UserManagement store={systemStore.get(systemStoreNames.userManagementStore)} /> 
   </>
)

角色管理页面

import React from 'react';
import { Role, systemStore, systemStoreNames } from 'mlog-service';
import { Breadcrumb } from 'antd';
...
return (
    <>	
  		<Breadcrumb
        	separator='>'
            items={(systemStore.get(systemStoreNames.systemBreadcrumb) as SystemBreadcrumbStore)?.lists}
            itemRender={(item: any) => {
              return <span style={{ cursor: 'pointer' }} onClick={() => (systemStore.get(systemStoreNames.systemBreadcrumb) as SystemBreadcrumbStore)?.setClickItem(item.title)}>{item.title}</span>;
            }}
        />
		<Breadcrumb
          separator='>'
          items={systemStore.get(systemStoreNames.roleStore).systemBreadcrumbStore?.lists}
          itemRender={(item: any) => {
            return <span style={{ cursor: 'pointer' }} onClick={() => systemStore.get(systemStoreNames.roleStore).systemBreadcrumbStore.setClickItem(item.title)}>{item.title}</span>;
          }}
        />
		<Role store={systemStore.get(systemStoreNames.roleStore)} />
   </>
)

资源管理页面

import React from 'react';
import { Resource, systemStore, systemStoreNames } from 'mlog-service';

...
return (
   <Resource store={systemStore.get(systemStoreNames.resourceStore)} />
)

部门管理页面

import React from 'react';
import { Department, systemStore, systemStoreNames } from 'mlog-service';

...
return (
    <Department store={systemStore.get(systemStoreNames.departmentStore)} />
)

简易版用户管理

只接入用户管理（不包括权限配置）

注意事项

系统管理的源码在mlog-service项目中，项目中使用时需要注意以下几点：

1、使用的mlog-service的包需要是将系统管理模块打包进去的包，目前quicklab-start脚手架中的包不包含系统管理。

2、index.html中注意mlog-service.js的引用顺序，需要将这个引用放在react，antd，mobx之后。

3、后端新建kuzzle地址后，属于这个项目的第一个用户的app属性，需要手动去kuzzle指定。然后前端使用这个用户登录。