其他配置

系统管理中还有一个SystemConfigStore，用来设置系统管理的一些全局配置。

import { systemStore, systemStoreNames, SystemConfigStore } from 'mlog-service';
systemStore.set(systemStoreNames.systemConfigStore, new SystemConfigStore({
  key: 'szjc', // 同MLogServiceConfig的key，如果不传则是default，这里不配置的话也可直接设置systemServiceConfig.key = 'szjc';
  theme: Theme.DARK //主题色，DARK深色，LIGHT浅色
 }));

key

这个key同MLogServiceConfig的key，是系统管理里面作为getMLogServiceConfig参数使用。不传的话，默认值是default.

主题切换

主题切换采用的是css变量方案，系统中涉及到颜色的样式，都是采用的变量，所以在使用时，需要到项目中为这些变量配置一套颜色。

目前已经配置好两套颜色：一套为深色，一套为浅色，都是紫色的主题色。因为颜色文件没有被打包进mlog-service.js，所以项目中使用时需要自行引入。 样式文件在mlog-service项目中的demos/system/system-theme-style目录下，使用时直接拷贝这个文件夹到项目中，并在项目中引入system-theme-style文件夹中的system-theme.less文件即可。

system-theme-style文件夹中的几个文件作用如下：

• overwrite.less：系统管理中重置antd组件的颜色样式，如果引用了该文件，需要在系统管理的最外层容器中加上名为'system-theme'的class，是为了防止污染其他antd组件的样式，如果不加这个类名，该样式则不会生效。
• dark.less：深色配色
• light.less：浅色配色

项目中增加主题切换的按钮进行主题切换，代码如下：

store文件

import { systemStore, systemStoreNames } from 'mlog-service';
...
@computed
public get systemConfigStore(): SystemConfigStore {
  return systemStore.get(systemStoreNames.systemConfigStore);
}

tsx文件

import { Theme } from 'mlog-service';
...
return (
	<div onClick={() => props.store.systemConfigStore.setTheme(props.store.systemConfigStore.theme === Theme.DARK ? Theme.LIGHT : Theme.DARK)}>切换主题</div>
)