Version: 4.0.2

使用插件

UI 插件

一、 quantex-plugin-metrics

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

1. 安装

npm i @gza/quantex-plugin-metrics

2. 配置

// config/config.ts
const config: IConfig = {
  // ...其它配置项
  pluginConfig: [
    [
      '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'
      }
    ]
  },
  pluginConfig: [
    [
      '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 中独立使用监听或者订阅，会破坏插件内部的计算，导致订阅或监听无法取消，造成内存严重泄漏

四、 quantex-plugin-sentry

基于Sentry的系统异常监控插件

异常上报
操作回放
性能监控

1. 安装

npm i @gza/quantex-plugin-sentry

2. 配置

// config/config.ts

const npmScope = '@gza'; // 私有npm依赖的scope
const isDev = process.env.NODE_ENV === 'development';
const packageInfo = require('../package.json');

const config: IConfig = {
  // ...其它配置项
  pluginConfig: [
    [
      'sentry',
      {
        package: '@gza/quantex-plugin-sentry',
        enable: isDev ? false : true, //是否启用sentry
        dsn: "http://a3394706bca444dfa6482a7a1316c3ab@10.116.18.104:9000/9", //上报地址
        release: `${packageInfo.name}@${packageInfo.version}`,
        environment: process.env.NODE_ENV,
        beforeSend: function(event) {
          // 上报数据加工
          const url = event.request?.url || '';
          const app = (url.match(/http[s]?:\/\/[^\/]+\/[^\/]+\/app\/([^\/]+)/) || [])[1];
          if (app) {
            const {
              tags = {},
              exception: { values = [] },
            } = event;
            event.tags = { ...tags, app };
            if (values[0]) {
              values[0].type = '[' + app + '] ' + values[0].type;
            }
          }
          return event;
        },
        integrations: {
          BrowserTracing: {
            enable: true, //是否启用性能监控
          },
          SentryRRWeb: {
            enable: true, //是否启用操作回放
          },
        },
        tracesSampleRate: 1.0, //上报频率
      },
    ],
  ]
  // ...
};

3. DEMO

测试地址: http://sentry-portal.bj.iquantex.com/
Sentry地址: http://10.116.18.104:9000/

4. 参考文档

五、插件开发

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

UI 插件​

一、 quantex-plugin-metrics​

1. 安装​

2. 配置​

二、 quantex-plugin-theme-xxx​

1. 安装​

2. 配置​

三、 quantex-plugin-socket​

1. 后端服务规范​

2. 开发使用​

四、 quantex-plugin-sentry​

1. 安装​

2. 配置​

3. DEMO​

4. 参考文档​

五、 插件开发​

UI 插件

一、 quantex-plugin-metrics

1. 安装

2. 配置

二、 quantex-plugin-theme-xxx

1. 安装

2. 配置

三、 quantex-plugin-socket

1. 后端服务规范

2. 开发使用

四、 quantex-plugin-sentry

1. 安装

2. 配置

3. DEMO

4. 参考文档

五、插件开发