visualization-wizard-sdk v1.0.5

visualization-wizard-sdk

Install

npm install visualization-wizard-sdk --save

Usage

指引内容抽屉

引入js后，会在window下挂载Drawer类，使用方法，以日常环境数据为例：

import { Button } from 'antd';
import 'visualization-wizard-sdk';

function open() {
  const drawer = new Drawer({
    width: 884,
    afterVisibleChange: visible=> console.log('visible',visible),
    stepCode: "152",
    // sectionCode: ["9999987652", "22344221223wewew"],
    targetOffset: 0,
    userGuid: '11111111111111',
    userName: '张三',
    userCode: '11111111111111',
  });
  drawer.show();
}

ReactDOM.render(
  <Button onClick={open}>打开Drawer</Button>,
  mountNode,
);

props：

①当只传二级步骤ID，则返回该二级步骤的全部内容进行展示。

②传二级步骤ID+章节标识码（可以多个，多个章节标识码，用英文逗号隔开），则返回该二级步骤的视频以及相应章节的内容。

方法签名如下：

/**
 * @param{number} width: 抽屉组件宽度，默认为884
 * @param{function} afterVisibleChange: 弹窗动画完成回调函数
 * @param{string} stepCode: 二级步骤id，必填
 * @param{Array<string>} sectionCode: 根据章节标识码，渲染对应章节
 * @param{number} targetOffset: 锚点距离窗口顶部滚动偏移量，默认值为 0
 * @param{string} userGuid: 当前系统登录用户guid
 * @param{string} userName: 当前系统登录用户账号
 * @param{string} userCode: 当前系统登录用户Code
 * @return{undefined} 
 **/
interface DrawerConfig {
  width?: number;
  afterVisibleChange?: () => void;
  stepCode: string | number;
  sectionCode?: Array<string>;
  targetOffset?: number;
  userGuid?: string;
  userName?: string;
  userCode?: string;
}

declare var DrawerType: (config: DrawerConfig) => () => void;

changelog

• v1.0.0: 添加内容指引 SDK；
• v1.0.1: 修改富文本内容样式;
• v1.0.2: 章节一行展示，超出显示省略号
• v1.0.3: 添加 sdk 使用文档

备注

获取内容指引数据接口，需要配置 ng 转发， 前缀为'/utc-wizard'，

日常环境转发路径为 'http://utc-gateway-daily.ingress.dayu.work',

预发环境转发路径为 'http://utc-gateway-pre.ingress.dayu.work',