关于仪表盘配置

我们把一组部件的组合称之为仪表盘配置,有两类:系统配置用户自定义配置

用户可以自行添加仪表盘配置,并向配置中添加部件,修改部件的属性,并实现多个部件之间的数据绑定

这里,主要对系统配置进行说明

系统配置 - 缺省配置

仪表盘是通过模块a-dashboard实现的,因此在模块a-dashboard中定义了一个缺省配置

a-dashboard/front/src/config/config.js

export default function(Vue) {
  return {
    profile: {
      default: {
        root: {
          widgets: [
            { module: 'a-dashboard', name: 'widgetAbout' },
          ],
        },
      },
      ... 
    },
  };
}

系统配置 - 基于Config覆盖

如果在我们自己开发的系统中,想提供自己的系统配置,在该配置中添加自己的部件组合。那么,我们可以通过项目前端的Config文件进行覆盖,比如:

src/front/config/config.default.js

export default {
  modules: {
    'a-dashboard': {
      profile: {
        default: {
          root: {
            widgets: [
              { module: 'a-dashboard', name: 'widgetAbout' },
            ],
          },
        }, 
      },
    },
  },
};

由于CabloyJS是前后端分离的框架,前端构建后可以部署到不同的场景中使用,比如webapp等等。同样我们也可以针对不同的场景提供不同的系统配置

关于前端Config及场景,请参见:Config

系统配置 - 基于后端Event覆盖

除了前端提供的config覆盖机制,后端也提供了基于Event覆盖的机制。用户登录系统时,在后端会引发一个Event a-base:loginInfo。我们可以响应此事件,向前端推送一个系统配置

通过后端Event机制,可以实现更加细粒度的控制,比如基于角色基于用户来提供不同的系统配置

比如,模块test-party就通过后端Event机制提供了一个系统配置。下面,我们看看是如何实现的:

关于后端Event,请参见:后端事件

1. 声明事件实现

test-party/backend/src/meta.js

event: {
  implementations: {
    'a-base:loginInfo': 'test/event/loginInfoDashboard',
  },
名称 说明
a-base:loginInfo 模块名称:事件名称
test/event/loginInfoDashboard 响应事件的后端Api路由

2. 定义后端Api路由

test-party/backend/src/routes.js

{ method: 'post', path: 'test/event/loginInfoDashboard', controller: testEventUserVerify, meta: { auth: { enable: false } } },

3. 控制器方法

test-party/backend/src/controller/test/event/userVerify.js

    async loginInfoDashboard() {
      const data = this.ctx.request.body.data;
      const info = data.info;
      info.config = extend(true, info.config, {
        modules: {
          'a-dashboard': {
            profile: {
              default: dashboardProfileDefault,
            },
          },
        },
      });
      this.ctx.success();
    }