@yqg/multiple-click/src/type.ts

Monitor user's multiple click behavior and report

export type MouseEventHandler = (event: MouseEvent) => any;

export type ExtraTrackingInfo = {
    url: string;
    outerHTML: string;
    selector: string;
    /** 元素离页面顶部的距离 */
    offsetTop: number;
    /** 元素离页面左侧的距离 */
    offsetLeft: number;
    /** 元素离窗口顶部的距离 */
    clientTop: number;
    /** 元素离窗口左侧的距离 */
    clientLeft: number;
};

type ExcludeRule<T> = {
    /** 元素选择器 */
    selector: string;
    /** 是否为浅层检查, 默认为false，规则如下：
     * true: 点击的节点命中selector才视为命中
     * false: 点击的节点或者其祖先节点命中selector即视为命中
     */
    shallow?: boolean;
    /** 生效的页面，只检查pathname（参数无关），默认对所有页面生效 */
    page?: T;
};

export enum ENV_TYPE {
    DEV = 'dev',

    /** 国内 */
    TEST = 'test',
    FEAT = 'feat',
    PROD = 'prod',

    /** 海外 */
    TEST_OVERSEAS = 'test-overseas',
    TEST_INDO = 'test-indo',
    TEST_MEX = 'test-mex',
    TEST_SEA = 'test-sea',
    TEST_EU = 'test-eu',
    FEAT_OVERSEAS = 'feat-overseas',
    PROD_INDO = 'prod-indo',
    PROD_MEX_HUAWEI = 'prod-mex-huawei',
    PROD_PHI = 'prod-phi',
    PROD_SEA = 'prod-sea',
    PROD_EU = 'prod-eu',
    PROD_HILL = 'prod-hill'
}

/** 暴露给外部用户的选项配置 */
export type IExposeMultipleClickTrackingConfig = {
    /**
     * 项目id，eg:
     * Web_OA // OA办公系统
     * Web_ADMIN // 洋钱罐
     * Web_CHIDORI // CHIDORI
     * ...
     */
    appId: string;

    /** 项目版本号，用于日志信息收集 */
    appVersion?: string;

    /** 环境变量，参照 https://wiki.fintopia.tech/pages/viewpage.action?pageId=78268095 */
    env: ENV_TYPE;

    /** 点击的间隔（单位ms）， 默认值: 300 */
    interval?: number;

    /** 连续点击的次数，如已设置了appId, 则为appId对应的配置值，默认值: 2 */
    continuousCount?: number;

    /** 判断范围（单位px），在半径为range的范围内触发的点击视为连续点击，默认值: 10 */
    range?: number;

    /**
     * 过滤掉不需要上报的元素，返回值true为过滤，以下场景可能需要：
     * 1. 某些元素由于业务需要，会监听dblClick
     * 2. 某些交互场景的元素，如：翻页按钮、查询按钮、刷新按钮等，在代码逻辑正确的情况下也很容易使得用户触发多次点击
     * 3. ....
     */
    filter?: (event: MouseEvent) => boolean;

    /**
     * 过滤规则，作用与filter参数一致，不同的是excludeRules是结构化的规则配置，且支持远程参数配置（当静态配置和远程配置都存在时，会进行合并）
     */
    excludeRules?: ExcludeRule<string | string[]>[];

    /** 自定义上报信息，不传时默认使用extraTrackingInfo */
    customTrackingInfo?: (event: MouseEvent, extraTrackingInfo: ExtraTrackingInfo) => Record<string, any>;
};

/** 内部监听器使用的配置 */
export type MultipleClickTrackingConfig = Required<
    Pick<IExposeMultipleClickTrackingConfig, 'interval' | 'continuousCount' | 'range' | 'filter'>
> & {
    excludeRules: ExcludeRule<string[]>[];
    /** 上报信息 */
    uploadTrackingInfo: (event: MouseEvent) => void;
};

/** 远程配置 */
export type RemoteMultipleClickTrackingConfig = Pick<
    IExposeMultipleClickTrackingConfig,
    'interval' | 'continuousCount' | 'range' | 'excludeRules'
> & {
    disabled?: boolean;
};

export type TriggerItem = {
    target: EventTarget;
    timeStamp: number;
    pageX: number;
    pageY: number;
};

export type TriggerQueue = Array<TriggerItem>;