qtiptest v1.0.4-beta

QQTIP SDK 使用说明文档

目录

• 介绍

• 安装

• 快速开始

• API 参考

• 常见问题

• 示例代码

• 贡献指南

介绍

该SDK采用JavaScript编写，需配合AI性能领域助手插件使用，目前支持以下功能：

• 与插件通信
  • 支持传输JSON字符串、CSV（将被SDK转化为数组传输）、STACK（堆栈信息string/文本string）三种数据
  • 支持注册组件实例HTMLElement，被注册的组件自动执行选中监听事件，可手动注销已注册组件
  • 自动检测插件是否加载
• 支持自定义边框高亮配置

安装

使用 npm 安装

npm i qqtip --save

快速开始

import { QPAAP } from 'qqtip'

1.发送通道由用户对提示框的操作决定
// 在绑定的元素上增加一些属性 data-qqtip（必要）、data-qqtip-position（非必要）、data-qqtip-type（非必要）
<div data-qqtip="mockdata" data-qqtip-position="top" data-qqtip-type="json"></div>
// 传入元素实例HTMLELement，进行注册，返回QTIP类对象，该对象包含unregister方法，用于注销
let qqtip = QPAAP.register(HTMLElement)
// 不再需要时可注销
qqtip.unregister()

* 当组件被注册后，将会在鼠标移入该组件区域时显示提示框，提示框位置由 data-qqtip-position 决定，提示框UI提供两个选项按钮：【编辑】【列为线索】，用户点击后，SDK将 data-qqtip 所绑定的数据发送给插件，数据类型由 data-qqtip-type 决定，通道由用户点击的按钮决定。

2.发送通道由开发者决定，可随时发送消息
// 例如：发送一条json类型的消息并再插件中作为线索展示
QPAAP.sendJsonAsBugfix({...})

API 参考

title:string, content:string, }> | / | | checkQPAAPexist: () => boolean | 检查插件是否存在 | / | 插件存在则返回true，否则false | | sendJsonAsBugfix: (data:string) => void | 发送Json至线索 | 经过JSON.stringify()处理的Json数据 | / | | sendJsonAsInput: (data:string) => void | 发送Json至输入框 | 经过JSON.stringify()处理的Json数据 | / | | sendStackAsBugfix: (data:string) => void | 发送Stack至线索 | string类型的文本数据 | / | | sendStackAsInput: (data:string) => void | 发送Stack至输入框 | string类型的文本数据 | / | | sendCsvAsBugfix: (data:string) => void | 发送Csv至线索 | csv格式的数据（行间需包含换行符）如：Column 1,Column 2,Column 342,18,759,61,8336,72,32 | / | | sendCsvAsInput: (data:string) => void | 发送Csv至输入框 | csv格式的数据（行间需包含具备换行符） | / |

注意事项

• 平台首次向插件传输数据时，可能会有1s内的响应延迟。
• SDK与插件通信过程结合了插件ID，具有唯一性；不同标签页之间的通信互不影响。
• data-* 的数据必须是字符串，JSON格式记得先通过JSON.stringify()转换成字符串再绑定
• 发送通道的差异：不同发送通道呈现出来的数据不一样。发送至线索的为处理后的markdowm格式，发送至输入框的保留源数据格式。

示例代码

SDK提供两种方式向插件传输数据

（一）组件注册方式

1. Vue-选项式api

<template>
  <div ref="chartRef" v-bind:data-qqtip="data"></div> <!-- 待注册的组件 -->
</template>

<script>
// 导入SDK
import { QPAAP } from 'qqtip'
export default {
  data() {
      return {
          // 定义响应式数据，支持的数据类型看【介绍】
          data: { mockdata: 'mockdata' }
      }
  },
  // 在组件完成挂载后，获取组件实例并注册
  mounted() {
    QPAAP.register(this.$refs.chartRef)
  },
}
</script>

2. Vue-组合式api

<template>
  <div ref="chartRef" v-bind:data-qqtip="data"></div> <!-- 待注册的组件 -->
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { QPAAP } from 'qqtip';
// 定义ref
const chartRef = ref<any>(null);
// 定义响应式数据，支持的数据类型看【介绍】
const data = reactive({ mockdata: 'mockdata' });
// 在组件完成挂载后，获取组件实例并注册
onMounted(() => {
  QPAAP.register(chartRef.value);
});
</script>

3. React

import React, { useRef, useEffect } from 'react';
import { QPAAP } from 'qqtip';

export default function ChartComponent() {
  const chartRef = useRef(null);
  const data = { mockdata: 'mockdata' };

  useEffect(() => {
    QPAAP.register(chartRef.current);
  }, []);

  return (
    <div ref={chartRef} data-qqtip={JSON.stringify(data)}></div>
  );
}

4. Html

import { QPAAP } from 'qqtip';

window.onload = function() {
  var chartRef = document.getElementById('chartRef');
  chartRef.setAttribute("data-qqtip", "mockdata")
  QPAAP.register(chartRef);
};

（二）调用接口方式

SDK提供的接口看【API参考】

import { QPAAP } from 'qqtip';
// 插件加载后，可在任意位置调用QPAAP提供的方法
let csvData = 'Name,Age,Email\nJohn Doe,25,johndoe@example.com\nJane Smith,30,janesmith@example.com\nTom Johnson,35,tomjohnson@example.com'

// 例如：向插件发送一段csv数据并列为线索
QPAAP.sendCsvAsBugfix(mockdata)

// 例如：向插件发送一段json数据并放入输入框
let jsonData = JSON.stringify({a:1,b:2})
QPAAP.sendJsonAsInput(jsonData)

贡献指南

编写作者：ShijiuFeng