platform-config

获取及使用平台配置的方法

安装

npm install @blueking/platform-config

使用

获取远程配置

建议在所有数据请求之前，先请求远程配置（并且只请求一次），获取到配置之后写入到系统的store中，以便全局使用

import { getPlatformConfig } from '@blueking/platform-config'

const url = 'abc.example.com/base.js'
const defaults = { name: "某某平台", ..., version: 'v3.13.8' }

// url，远程配置文件地址
// defaults，默认配置及额外附加数据，如 version，当请求url配置失败时，会使用传入的默认配置
// 返回值，参考配置字段说明
const config = await getPlatformConfig(url, defaults)

// 获取到config之后，可以将config写入到store当中，方便之后在其它地方使用
// commit('setConfig', config)

设置 favicon

import { setShortcutIcon } from '@blueking/platform-config';

// 如果在其它页面中使用，可能需要从store取出config

// 传入favicon地址即可，建议在获取远程配置之后就调用
setShortcutIcon(config.favicon);

设置 document.title

import { setDocumentTitle } from '@blueking/platform-config';

// 1. 如果网页标题是不变的，同样在获取远程配置之后就调用
setDocumentTitle(config.i18n);

// 2. 如果网页标题要动态加上当前页面的名称，将需要附加的内容作为第二个参数
const matchedNames = ['页面名称'];
setDocumentTitle(config.i18n, matchedNames);

使用 logo & name

<!-- img 标签 -->
<img :src="appLogo" />{{ appName }}

<!-- 样式背景 -->
<div class="logo">{{ appName }}</div>

<style>
  .logo {
    ...
    background: v-bind(appLogo) no-repeat 0 center;
  }
</style>

// 如果获取时未设置logo默认值，可以在这里处理
import logoSvg from 'xxx/logo.svg'

...
computed: {
  ...mapGetters('globalConfig', ['config']),
  appName() {
    // 1.0.5 版本开始使用 productName
    return this.config.i18n.productName
  },
  appLogo() {
    // 如果未获取到配置，使用默认logo
    const src = this.config.appLogo ?? logoSvg

    // 如果是img标签，直接返回src
    return src

    // 如果是样式背景图
    // return `url(${src})`
  }
}
...

使用 footer

<template>
  <div class="footer">
    <p
      class="contact"
      v-html="contact"
    ></p>
    <p class="copyright">{{copyright}}</p>
  </div>
</template>

...
computed: {
  ...mapGetters('globalConfig', ['config']),
  contact() {
    // 已处理 xss
    return this.config.i18n.footerInfoHTML
  },
  copyright() {
    return this.config.footerCopyrightContent
  }
}
...

配置字段说明

{
  "bkAppCode": "abc", // appcode
  "name": "某某平台", // 站点的名称，用于网页title中
  "nameEn": "AAA", // 站点的名称-英文
  "appLogo": "http://abc.example.com.com/logo.svg", // 站点logo
  "favicon": "http://abc.example.com/favicon.ico", // 站点favicon
  "productName": "某某产品名称", // 产品名称，展示在logo区域 1.0.5版本新增
  "productNameEn": "AAA", // 产品名称-英文 1.0.5版本新增
  "helperText": "联系xxx",
  "helperTextEn": "Contact xxx",
  "helperLink": "超链接或IM协议地址",
  "brandImg": "http://abc.example.com/brand.png",
  "brandImgEn": "http://abc.example.com/brand.png",
  "brandName": "某某公司", // 品牌名，会用于拼接在站点名称后面显示在网页title中
  "brandNameEn": "CCC", // 品牌名-英文
  "footerInfo": "[技术支持](https://xxx) | [社区论坛](https://bbb) | [产品官网](https://ccc/)", // 页脚的内容，仅支持 a 的 markdown 内容格式
  "footerInfoEn": "[Support](https://xxx) | [Forum](https://ccc) | [Official](https:ddd)", // 页脚的内容-英文
  "footerCopyright": "Copyright © 2012 xxx All Rights Reserved. {{version}}", // 版本信息，包含 version 变量，展示在页脚内容下方

  // 以下所有字段不存在于配置文件中，是通过调用getPlatformConfig方法后对源字段处理后附加的，用于在页面中使用
  "footerInfoHTML": "转换为HTML的页脚内容，已处理 xss，可以直接用于在页面中展示",
  "footerInfoHTMLEn": "转换为HTML的页脚内容-英文",
  "footerCopyrightContent": "替换完变量之后的版本信息，可以直接用于在页面中展示",
  // 需要国际化的字段，根据当前语言cookie自动匹配，页面中应该优先使用这里的字段
  "i18n": {
    "name": "国际化对应的内容：某某平台或或其英文",
    "productName": "国际化对应的内容：某某产品名称或其英文", // 1.0.5版本新增
    "helperText": "...",
    "brandImg": "...",
    "brandName": "...",
    "footerInfoHTML": "..."
  }
}