npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

visualization-wizard-sdk

v1.0.5

Published

The embedded js for guide modal

Downloads

11

Readme

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:

| 成员 | 说明 | 类型 | 默认值 | 是否必填 | | ------ | -------------------------------- | ------------------- | ------ | ------- | | width | 抽屉组件宽度 | number | 884 | 非必填 | | afterVisibleChange | 弹窗动画完成回调函数 | function | - | 非必填 | | stepCode | 二级步骤id | string | - | 必填 | | sectionCode | 根据章节标识码,渲染对应章节 | Array<string> | - | 非必填 | | targetOffset | 锚点距离窗口顶部滚动偏移量 | number | 0 | 非必填 | | userGuid | 当前系统登录用户guid | string | - | 非必填 | | userName | 当前系统登录用户账号 | string | - | 非必填 | | userCode | 当前系统登录用户Code | string | - | 非必填 |

①当只传二级步骤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',