Gitee NPS 前端

需求

【Feature】NPS 评价体系建设 https://e.gitee.com/oschina/issues/list?issue=I4FHF6

开发

yarn serve

生产

yarn build:prod

NPS插件使用说明

• 在 feature 合适的地方使用
• new NpsClient时，将会发起请求，如果有符合的问卷和显示条件（使用过多少次、符合疲劳度等），将会自动显示。
• addTick 用于记录操作，表示用户使用过该功能。在合适的地方调用 nps.addTick(), 例如载入页面 或 打开某个弹窗、点击某个按钮。

!!!

• 大部分功能是自动完成,只需配置codeName 和 enable, userInfo , 在合适地方调用 addTick 后端记录即可，自动获取到后端给的数据， 满足条件后自动显示问卷。

安装

yarn add @gitee/gitee-nps -S
import "@gitee/gitee-nps/dist/main.css";
import NpsClient from "@gitee/gitee-nps";

配置说明：

const nps = new NpsClient({
  codeName: "issue_feature_xxx", //代号, 必填项。与管理后台约定一个唯一代号，代表某个 feature。只能是字母、数字或下划线（/^\w+$/）
  userInfo: { // userInfo Object 必填, 包含后端提供的  info 和  signature 等信息
    info: '{"id":593,"username":"git","_salt":1637219320}',
    signature:
      "i3jYTK4lSvHxAUiVBI6l49Cw7fsD5mGx7QdOE_fu5K_Gt1ELXt4GkNy-Ow6Wvbo0WoOT48DNC3CmamkO3vx3jiXhS-zhGMYcCIXMLNQlLhD9g-pfFc_7lf-KxY4eZqivzeokryzlt0tXNzhp-enPpzLiHCkl-iNrISPu8p_rHa4=",
  };
  enable: false, //是否启用, //已登录传入true//  未登录的访客不执行
  className: "custom-class", //自定义 class
  cssText: "z-index:3000;color:black", // 添加一些 style
  lang: "zh-CN", // 配置语言，默认为 zh-CN, 
  enableBuriedPoint: false, // 启用全埋点, 默认不开启
  buriedPointSelector: ".gitee-nps-wrapper, xxx", // 全埋点区域 选择器
  // customData: '', 自定义初始化问卷数据, 用于管理后台预览
  onCreate ({state, data}) {
    // baseData 获取到的表单数据
    console.log("创建了");
    if (state==='error') {
      //xxx
    }
  },
  onShow () {
    console.log("显示了");
  },
  onClose (oData) {
    console.log("关闭了");
    console.log(oData)
  },
  onRate ({ value, state }) {
    console.log("第一步的评分：" + value);
  }, 
  onFormSubmit({state, data}){
    console.log('第二步用户提交的表单:')
    console.log(oData)
  },
  onDestroy () {
    console.log("被销毁");
  },
});
// 在 创建成功前, 实例方法无法调用, 如果需要使用, 请在 `onCreate` 或后续事件回调中使用
// 如果需要, 请在 `onCreate onClose onRate onFormSubmit` 中使用

方法

|名称|效果|方法类型| |--|--|--| |addTick|调用则表示命中埋点, 将发起一次请求, 后端埋点计数 + 1|实例方法| |show|手动显示弹窗|实例方法| |close|手动关闭弹窗|实例方法| |toggle|切换显隐|实例方法| |destroy|手动销毁|实例方法| |goStepForm|手动进入第二步表单页|实例方法| |goStepThank|手动进入最终感谢页|实例方法| |goStepRate|手动切回第一步评分页|实例方法| |isInitializedCallback|传入一个函数, 当前 NPS 已经初始化成功才执行, 否则不执行|实例方法| |refreshData|刷新数据 用于管理后台预览, 每次调用传入问卷数据都会刷新问卷|实例方法| |getIsMobile|获取是移动端, 移动端则返回布尔值 true|静态方法|

生命周期(配置)

|名称|效果说明|参数| |--|--|--| |onCreate|创建成功|{ state, result }| |onShow|显示后执行|无| |onClose|关闭后执行|{ state, result }| |onRate|提交第一步评分|{ state, value, result}| |onFormSubmit| 提交第二步表单 |{ state: "success", submitData, result}| |onDestroy|被销毁了| 无|

• state 值为 success 或 error
• result 为后端返回的数据

统一配置, 避免重复配置示例:

import NpsClient from "@gitee/gitee-nps";
import "@gitee/gitee-nps/dist/main.css";
function getNps (ops = {}) {
  // 填写一些默认配置
  let defaultOps = {
    userInfo: window.gon.nps,
    enable: !!(window.gon.info && window.gon.info.current_user) && window.gon.nps,
    lang: window.gon.locale, // zh-CN
    onCreate ({ state, err, result }) {
      if (state == "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        console.log("创建了, 获取的问卷数据:");
        console.log(result);
        ops.onCreate && ops.onCreate({ state, err, result });
      }
    },
    onShow () {
      console.log("显示了");
      ops.onShow && ops.onShow();
    },
    onClose ({ state, err, result }) {
      console.log("关闭了");
      if (state === "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        ops.onClose && ops.onClose({ state, err, result });
      }
    },
    onRate ({ state, value, result, err }) {
      console.log("第一步评分完成了:", value);
      if (state === "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        ops.onRate && ops.onRate({ state, value, result });
      }
    },
    onFormSubmit ({ state, submitData, err, result }) {
      console.log("第二步提交的表单:");
      console.log(submitData);
      if (state === "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        ops.onFormSubmit && ops.onFormSubmit({ state, submitData, err, result });
      }
    },
    onDestroy() {

    }
  };
  // 覆盖配置。 这里覆盖并了属性 不覆盖函数
  Object.keys(ops).forEach(key => {
    if (typeof ops[key] != "function") {
      defaultOps[key] = ops[key];
    }
  });

  return new NpsClient(defaultOps);
}
export { getNps }
window.getNps = getNps;

  // 使用时
  import { getNps } from "xxx"
  var nps1 = getNps({ codeName: "2" });
  document.body.addEventListener('click', function(e) {
    if (e.target && e.target.closest('[data-handler=bootstrap-markdown-cmdSuggestion]')) {
      nps1.addTick()
    }
  }, true);