Version: 1.x

使用插件

UI 插件

一、 quantex-plugin-metrics

埋点上报插件,要配合后端服务接收埋点数据并进行分析

1. 安装

npm i @gza/quantex-plugin-metrics

2. 配置

// config/config.ts
const config: IConfig = {
  // ...其它配置项
  plugins: [
    [
      'metrics',
      {
        enable: true, // 是否启用
        domain: 'http://10.16.18.166:32143', // 上报服务地址
        url: '/api/v1/metrics', // 上报url
        method: 'POST', // http method
        env: 'DEV', // ST、UAT、PRD等
        reportInterval: 10 * 1000, // 一分钟上报一次
        package: '@gza/quantex-plugin-metrics'
      }
    ]
  ]
  // ...
};

二、 quantex-plugin-theme-xxx

主题插件,目前提供了两个主题，脚手架已经默认配置深色主题

深色主题 quantex-plugin-theme-dark
浅色主题 quantex-plugin-theme-white

假设我们要增加浅色主题

1. 安装

npm i @gza/quantex-plugin-theme-white

2. 配置

// config/config.ts
const config: IConfig = {
  // ...其它配置项
  themeConfig: {
    defaultTheme: 'themeDark',
    mainTheme: 'themeDark',
    themes: [
      // ... 其它主题
      {
        // 配置浅色主题
        name: '浅色',
        id: 'themeWhite'
      }
    ]
  },
  plugins: [
    [
      'theme-white',
      {
        package: '@gza/quantex-plugin-theme-white'
      }
    ]
  ]
  // ...
};

三、 quantex-plugin-socket

插件使用socket.io-client进行封装中文文档英文文档

1. 后端服务规范

认证

{
    topic: 认证主题
    data：认证数据，推荐使用object
}
tsp项目中使用的格式，以下案例全是以tsp为标准，如：
{
    topic：'auth',
    data：{
        "projectId": 'tsp', 
        "token": '' 
    }
}

订阅/取消订阅

{
    topic: 订阅主题，取消订阅主题在订阅的基础添加'un'，如：订阅 subscribe 取消 unsubscribe
    data：订阅数据，目前插件只支持使用字符串数组，如['data1','data2']
}
订阅主题如：
{
    topic：'subscribe',
    data：['user']
}
取消订阅主题如：
{
    topic：'unsubscribe',
    data：['user']
}

2. 开发使用

npm install @gza/quantex-plugin-socket

// app\layouts\index.ts
import socketIoClient from "@gza/quantex-plugin-socket";
const  config = require('../../config/config');
const initSocket = () => {
  if (appWindow.userLocalStore.getItem('userInfo')) {
     socketIoClient.init({
        domain: config.apiConfig.base,  // 链接地址，可在 config 统一配置
        serverPath: '/tsp', // 服务地址，由前后端协商定义
        needCheckIdentify: true,    // 可选，是否需要认证，默认false
        identifyParam: {    // needCheckIdentify 为 true 时必填，且不能为 {}
           topic: 'auth',
           data: { 
              projectId: '/tsp', 
              token: appWindow.userLocalStore.getItem('userInfo').token 
           },
           success: (data: any)=> { // 可选，成功回调
              console.log(data);
           },
           fail: (data: any)=> {    // 可选，失败回调
              console.log(data);
           },
        },
        options:{}, // 可选，原生 socket 配置
        connect: (data: any)=> {    // 可选，链接成功回调
           console.log(data);
        },
        reconnect: (data: any)=> {  // 可选，重连回调
           console.log(data);
        },
        disconnect: (data: any)=> { // 可选，断线回调
           console.log(data);
        },
    });
  }
}
// 登录后初始化
layouts.login.afterLogin = async () => {
  initSocket();
};
// 用于浏览器刷新时初始化
layouts.main.afterGlobalInit = () => {
  initSocket();
};
// 退出关闭io
layouts.login.logout = async () => {
  socketIoClient.closeIo();
  ...
};

注意：
1.  多次初始化只会执行第一次，needCheckIdentify 设置 true 时， identifyParam 不能为空或者是 {}，否则无法发送认证 
2.  disconnect，reconnect，fail 不传时，默认使用 alert 提示信息，但是会阻塞代码执行，建议开发人员自定义处理提示信息

//app\pages\supervisoryETF\AlarmNotes\index.tsx
import socketIoClient from "@gza/quantex-plugin-socket";

const handlerSocketData = (data: any) => {
    // 数据处理
};

useEffect(() => {
  ...
  socketIoClient.subscribe({ 
     topic: 'subscribe',  
     data: ['user'], // 目前插件只支持使用数组传递参数
     success: (data: any)=>{}, // 可选，成功回调
     fail: (data: any)=>{}  // 可选，失败回调
  });
  socketIoClient.addEventListener({ 
     event: 'etf_alarm_record', 
     callback: handlerSocketData 
  });

  return () => {
    socketIoClient.unsubscribe({ 
      topic: 'unsubscribe', 
      data: ['user'],
      callback: (data: any)=>{}     // 可选，取消回调
    });
    socketIoClient.removeEventListener({ 
      event: 'etf_alarm_record', 
      callback: handlerSocketData 
    });
  };
}, []);

或者是使用订阅和监听组合

useEffect(() => {
  ...
  socketIoClient.addSubscribeAndListener({
    topic: 'subscribe', 
    data: ['user'],
    success: (data: any)=>{}, // 可选，订阅成功回调
    fail: (data: any)=>{},  // 可选，订阅失败回调
    event: 'etf_alarm_record', 
    eventCallback: handlerSocketData, 
  })
  return () => {
    socketIoClient.removeSubscribeAndListener({
      topic: 'unsubscribe',
      data: ['user'],
      subCallback: (data: any)=>{}, // 可选，取消订阅回调
      event: 'etf_alarm_record', 
      eventCallback: handlerSocketData,
    })
  };
}, []);

注意：
 订阅与取消订阅必须成对使用，建议在每个组件中保证只执行一次，避免推送数据不丢失
 监听与取消监听必须成对使用，且 callback 的函数引用必须是同一个，否则无法取消监听
 不允许在 setTimeout，setInterval 中独立使用监听或者订阅，会破坏插件内部的计算，导致订阅或监听无法取消，造成内存严重泄漏

四、插件开发

除了以上提供的插件之外，您还可以自己开发自己的主题，请参考插件开发

BFF 插件

一、 egg-lowdb

封装 lowdb，提供 file、mongodb、postgres 等存储方式，egg-lowdb 脚手架已经默认提供

1. 安装

npm i @gza/egg-lowdb

2. 启用

// src/config/plugin.ts
export default {
  lowdb: {
    enable: true,
    package: '@gza/egg-lowdb'
  }
};

3. 配置

config.lowdb = {
  client: {
    adapter: process.env.NODE_ENV === 'development' ? 'file' : 'postgres', // or mongodb
    // 使用文件存储配置
    file: {
      dbPath: 'run/db.json'
    },
    // 使用mongodb存储配置
    mongodb: {
      dbUrl: 'mongodb://127.0.0.1:30017',
      dbName: 'bff',
      collectionName: 'lowdb'
    },
    // // 使用postgres存储配置
    postgres: {
      dbUrl: '127.0.0.1',
      dbName: 'godzilla',
      collectionName: 'lowdb',
      port: 32011,
      user: '',
      password: ''
    }
  }
};

二、 egg-yapi

封装 yapi，如果想禁用接口（不调用 mock 服务），只需要在接口管理平台将对应的接口状态改为“已完成”，并重启 BFF 应用。

1. 安装

npm i @gza/egg-yapi

2. 启用

// src/config/plugin.ts
export default {
  lowdb: {
    enable: true,
    package: '@gza/egg-yapi'
  }
};

3. 配置

config.yapi = {
  host: 'http://yapi.demo.qunar.com',
  token: 'xxx'
};

三、插件开发

请参考 egg 官方文档,插件开发

UI 插件​

一、 quantex-plugin-metrics​

1. 安装​

2. 配置​

二、 quantex-plugin-theme-xxx​

1. 安装​

2. 配置​

三、 quantex-plugin-socket​

1. 后端服务规范​

2. 开发使用​

四、 插件开发​

BFF 插件​

一、 egg-lowdb​

1. 安装​

2. 启用​

3. 配置​

二、 egg-yapi​

1. 安装​

2. 启用​

3. 配置​

三、 插件开发​

UI 插件

一、 quantex-plugin-metrics

1. 安装

2. 配置

二、 quantex-plugin-theme-xxx

1. 安装

2. 配置

三、 quantex-plugin-socket

1. 后端服务规范

2. 开发使用

四、插件开发

BFF 插件

一、 egg-lowdb

1. 安装

2. 启用

3. 配置

二、 egg-yapi

1. 安装

2. 启用

3. 配置

三、插件开发