# 搜索中心方案

Engage 顶部 bar 拥有全局搜索功能,输入内容搜索,进入到搜索中心。搜索中心是通过第三方向平台注入插件的方式来实现。

# 插件注册与发布

第三方应用需要在 Engage admin 应用配置中注册搜索中心插件。

字段 描述
target 插件注入的目标应用
target.application 目标应用 Id
target.type 插件适配的类型
name 插件名称
id 插件的标识,全局唯一
order 插件列表排序,如果为不填则默认在有序队列后按照名称排序
component 插件的前端组件地址与名称,格式为:<微前端名>.<组件名>
apis 权限列表,平台应用搜索中心判断是插件否有权限,在搜索中心展示有权限的插件

插件 Engage admin 配置示例:

target:
  # 目标应用 Id,固定为 platform
  application: platform
  # 插件适配的类型,固定为 search-center-addon
  type: search-center-addon
# 插件的标识,全局唯一
id: 'minisite.h5Searcher'
# 插件名称
name: '微页面'
# 插件列表排序,如果为不填则默认在有序队列后按照名称排序
order: 1
# 插件的前端组件地址与名称
component: 'mfe-ministe.H5Searcher'
# 列表查询 url
apis:
    - '/v1/minisite/query'

# 插件开发方案

第三方应用前端组件需要实现的接口如下:

名称 位置
value prop String,查询的内容
total event Number,结果集大小

开发说明:

  • 使用 search-list 组件:

<EApplet template"search-list" />

  • 插件的 data 的 config 中配置 appId
  data() {
    return {
      config: { appId: 'minisite' }
    }
  }
  • 将 value 值传给 config,供 EApplet search-list 搜索数据:
watch: {
  value(n) {
    this.config.value = n;
  },
},
created() {
  this.config.value = this.value;
},
  • 监听 EApplet 的 changedTableData 事件,获取 total 值,并给父组件抛出 total 事件:
  changedTableData(data) {
    this.$emit('total', data.total);
  },
  • 完整示例
<template>
  <EApplet
    :template="'search-list'"
    :config="config"
    @changedTableData="changedTableData" />
</template>
<script>
export default {
  props: {
    value: {
      default: '',
      type: String,
    },
  },
   data() {
    return {
      config: {
        value: '',
        appId: 'minisite',
        entity: 'scene',
        name: '示例',
        icon: 'mobile-html-square',
        columns: [{
          id: 'name',
          name: 'demo',
          field: 'name',
          dataType: 'string',
          component: '',
          visible: true,
          sortable: true,
          filterable: true,
          termQuery: true,
          wordWrap: false,
          width: 240,
        }],
      },
    };
  },
  watch: {
    value(n) {
      this.config.value = n;
    },
  },
  methods: {
    changedTableData(data) {
      this.$emit('total', data.total);
    },
  },
  async created() {
    this.config.value = this.value;
  },
};
</script>

# 顶部 Bar 权限设置说明

在 Engage admin 配置 apis,平台应用获取插件接口返回 apis,Engage 顶部 Bar 使用 canAccessApi 判断角色是否有该插件的权限,下拉列表显示有权限的插件。

# 左侧插件和右侧插件权限设置说明

插件内部配置 appId,配置 EApplet 组件的属性 template="search-list",使用 canAccessApi 判断角色是否有该插件。