首页卡片以瀑布流布局,每个卡片展示的内容是由第三方应用提供的插件,前端逻辑实现首页的展示。

# 插件描述

插件由第三方应用按照指定规范向平台应用注入。租户可以在设置中心设置展示哪些插件,拖动改变顺序,用户可以在个人中心设置展示哪些插件,并且拖动调整顺序。

# 插件注册与发布

插件需向首页通知角色具有的最大权限 dataScope,首页按 dataScope 设置标题上的数据范围。

名称 位置 说明
dataScope event 角色具有的最大权限 dataScope,容器使用该 dataScope 设置标题上的需要显示的数据范围

第三方应用需要在 Engage Admin 应用配置中注册首页插件。插件配置规范如下:

字段 描述
target 插件注入的目标应用
type 插件适配的类型,须配置为 home-widget
title 卡片标题
widget-component 配置页面的微前端组件,格式为:<微前端名>.<组件名>
width 插件宽度占的份数,最多 12 份,最少 1 份。可不配置,不配置时默认占 6 份,目前支持配置 6 份或不配置,配置为其它不生效
height 插件高度占的份数,最少 1 份,可不配置,不配置时默认占 8 份
apis 权限列表,平台应用首页插件容器判断是插件否有权限,在首页展示有权限的图表插件

# 插件高度计算说明

  • 插件高度计算公式: height * (this.rowHeight + this.margin[1]) - this.margin[1] + 'px'。其中,height 是 Engage admin 中插件配置的高度;this.rowHeight 是首页瀑布流组件设置的,值为 30;this.margin 是首页瀑布流组件设置的,值为 [15, 15],this.margin[1] = 15。例如:Engage admin 中 height 配置了 8 份,那么插件高度为: 8*(30+15)-15 = 345px

# 插件配置示例

- target:
      # 目标应用 Id,固定为 platform
      application: platform 
      # 插件适配的类型,显示在首页
      type: home-widget
    # 卡片标题
    title: 受众
    # 配置页面的组件,格式为:<微前端名>.<组件名>
    widget-component: mfe-mockapp.app-audience
    # 插件宽度占的份数,最多 12 份,最少 1 份,可不配置,不配置时默认占 6 份
    width: 6
    # 插件高度占的份数,最少 1 份,可不配置,不配置时默认占 8 份
    height: 8
    # 权限列表
    apis: 
      - /v1/widget/query

# 首页报表插件开发方案

# 首页展示报表数据时的权限控制方案

engage 提供 getSupportDataScopes 函数,返回有权限的 dataScopes,使用方式:

  import { getSupportDataScopes } from 'engage';
  // 入参是 Object,必须包含 appId 和 api 字段,appId 是插件所在应用 id,api 是报表查询 URL,如:'/v1/leads/data-overview'
  const dataScopes = getSupportDataScopes({ appId: this.appId, api: this.api });

原理:

  • getSupportDataScopes 函数调用 canAccessApi;
  • canAccessApi 函数判断 resource 资源接口的 apis 是否包含 api,是 {appId}:{api}/{dataScope} 的前缀来判断该 dataScope 是否有权限,参考 canAccessApi

执行结果:

  • 如果每一个 dataScope 都无权限,getSupportDataScopes 函数返回 [] 空数组;
  • 如果有一个或多个 dataScope 都有权限,返回具有权限的所有的 dataScope 数组;
  • dataScopes[0]是该角色拥有最大权限的 dataScope,插件查询报表数据的接口为:{api}/{dataScopes[0]}

# 首页图表插件示例

<!-- 微页数据概览 -->
<template>
  <EBlock style="width: 100%; height: 100%; padding: 0 10px;">
    <ECharts :data="testData" /> 
  </EBlock>
</template>
<script>
import { getSupportDataScopes } from 'engage';
import { requestApi } from '@/lib';

export default {
  name: 'MinisiteDataOverViewChart',
  data() {
    return {
      api: '/v1/scene/analysis/data-overview', // getSupportDataScopes 函数使用,也是报表查询地址前缀,需要拼接 dataScope
      testData: {}, // 报表数据
      appId: 'minisite',  // getSupportDataScopes 函数使用
    };
  },
  async created() {
    // 权限判断,获取图表 dataScopes
    const dataScopes = getSupportDataScopes({ appId: this.appId, api: this.api });

    // 角色拥有的最大权限的 dataScope
    this.dataScope = dataScopes[0] || '';
    
    if (dataScopes[0]) {
      // 向父组件抛出 dataScope 事件
      this.$emit('dataScope', dataScopes[0]);

      // 获取图表数据,展示图表
      await this.queryChart();
    }
  },
  methods: {
    async queryChart() {
      const body = {
        offset: 0,
        limit: 999,
        sort: [],
        term: '',
        filter: {},
      };
      const res = await requestApi({ url: `${this.api}/${this.dataScope}`, body }); // 获取报表数据
      this.testData = res.data;
    },
  }
};
</script>

# 首页报表插件 Engage admin 配置示例

  - target:
      # 目标应用 Id,固定为 platform
      application: platform 
      # 插件适配的类型,显示在首页
      type: home-widget
    # 卡片标题
    title: 微页数据概览
    # 配置页面的组件,格式为:<微前端名>.<组件名>
    widget-component: mfe-minisite.data-overview-chart
    # 指标卡高度为 5,其它图表高度为 8 
    height: 5
    width: 6
    apis:
      - /v1/scene/analysis/data-overview/

# apis 和 dataScope 场景说明

  1. Engage admin 配置了 apis,插件容器判断是插件否有权限,在首页展示有权限的图表插件。
  2. 所有展示的有权限的图表插件,如果有 dataScope,则展示图表数据,如果没有,则不展示数据。