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

@hsdata/warrenq-note-release

v0.0.12

Published

* 支持功能

Downloads

8

Readme

使用 @hsdata/warrenq-note-release

  • 支持功能

    1. 拖拽添加文本,图片
    2. 粘贴word,excel,图片
    3. 手动添加文本,标记,图片,html
    4. 文本自动保存
  • 引入组件


import {
  setRules,   //function(ruleName) 配置图表功能
  setConfig,  //function(config) 组件配置函数
  setViewOrigin,  //funtion(fn) 配置查看原文方法
  appendElementToNote,   //function(params) 添加图片,文本,html,到笔记
  multiTab,  //vue组件 ,笔记完整功能
  bus  //通信组件
  } from '@hsdata/ck-note-release/lib'
  • 完整功能

//login.js 在登录处设置token
import { setToken , cleanToken} from '@hsdata/warrenq-note-release'

//设置用户token
setToken(token)

//清除token设置
cleanToken()

//main.js
import { multiTab } from '@hsdata/warrenq-note-release'
import '@hsdata/warrenq-note-release/lib/style.css'


Vue.use(multiTab,{ baseURL: '/cloudtest'}) //baseURL请求基础路径,默认为/cloudtest

//app.vue
<template>
  <div style="height: 100vh; width: 100vw">
    <multi-tab />
  </div>
</template>
  • io请求

接口请求链路为 ${baseURL}/workbench/v2/${path}

接口鉴权Request.Authentication

设置用户鉴权token

import { setToken , cleanToken} from '@hsdata/warrenq-note-release'

//设置用户token, token需要和后端进行对接获取
setToken(token)

//清除token设置
cleanToken()
  • 组件配置
  //配置单
const PROJECT_CONFIG = {
  showAddIndexText: false, //显示添加指标,待集成
  showAddChart: false, //显示添加图表,待集成
  showShare: false, //显示分享, 未集成
  showFullscreen: false, //显示全屏, 待集成
  showMenu: true, //显示菜单列表
  showAddNewNote: true, //新建笔记
  showDownloadWord: true, //显示导出word
  saveAs: {
    //另存为模块
    show: false,
    component: 'div'
  }
};

//更改配置
 import {
  setConfig,
} from "@hsdata/ck-note-release/lib";
//禁用菜单和下载excel
setConfig({
  showMenu: false,
  showDownloadWord: false
})

查看原文功能

  • 插入查看原文文本
  import {
  appendElementToNote,   //function(params) 添加图片,文本,html,到笔记
  } from '@hsdata/ck-note-release/lib'

  //新增一个查看原文标记
  appendElementToNote({
    key: 'appendNote',
    content: {
      color: 'red'  //左侧颜色色条,必传
      colorLetter: 'a'  //a,b,c,d  标记,必传
      content: '原文文本……' //需要插入的文本,必传
      ...params   //自定义参数,后续查看原文时使用
    }
  })
  • 配置查看原文方法,该方法为全局方法,多次配置会覆盖
  import {
  setViewOrigin,  //funtion(fn) 配置查看原文方法
  } from '@hsdata/ck-note-release/lib'

  setViewOrigin((params)=>{
    //当点击查看原文时,会调用该函数,传入参数为添加标记时的自定义参数

    //示例

    window.open(params.pdfPath)

  })

在当前页签下插入图片、文本、html

import {
  appendElementToNote,   //function(params) 添加图片,文本,html,到笔记
  } from '@hsdata/ck-note-release/lib'

  //在焦点处添加文本
  appendElementToNote({
    key: 'copyNote',
    content: '123123'
  })

  //在焦点处添加html
  appendElementToNote({
    key: 'addInnerHtml',
    content: '123123'
  })

  //在文本结尾添加html
  appendElementToNote({
    key: 'appendInnerHtml',
    content: '123123'
  })

   //添加图片
  appendElementToNote({
    key: 'addImage',
    content: 'src……'  //图片地址
  })

配置图表功能

   import {setAddChart, setRules} from from '@hsdata/warrenq-mind-map'
   //自定义数据浏览器弹窗
   import panel from '@/views/new-data/panel'

   //这个type自定义
   const type = 'defaultType'

   //新增图表配置
   setAddChart(resolve=>{
     panel.show({
       //获取数据后的回调
       callback: (data) => {
         const obj = {
           type,
           data
         }
         //obj建议不要存储过多字段
         resolve(obj)
       }
     })
   })

   //设置展示逻辑,可设置多个,链式处理
   setRules(type)
     //处理参数
     .setData(async function(params){
         //params 为 resolve(obj) 返回数据,
         const {codes} = params
         //获取数据
         const {data} = await getChartData({codes})
         //将数据处理为echart5配置
         const config = resolveEchart(data)

         return {
           data:[], //固定配置
           userSetOptions:{  //固定配置
             onlyUserComponent: true,
             onlyUserMethods: true,
           }
           config
         }
     })
     //如果数据可编辑,设置编辑功能
     .setMindEdit( async function(change, params){
         panel.show({
           params,
           //修改数据后回调
           callback: (data) => {
             const obj = {
               type,
               data
             }
             //obj建议不要存储过多字段
             change(obj)
           }
         })
     })

拖拽功能

组件接收一个自定义拖拽数据 text/mind-json-data

  • 示例
  <template>
    <div >
      <echart-dom  @dragstart='dragstart' v-drag-mode='dragData' />
    </div>
  </template>
    import { dragMode } from from '@hsdata/warrenq-mind-map'
    export default {
      directives: { dragMode }
      data(){
        return {
          dragData:{
            type: 3,
            data: echartParams  //echart的配置
          }
        }
      },
      methods:{
        //除了使用给定的指令,也可以自定义定义
        dragstart(event){
          event.dataTransfer.setData(
            'text/mind-json-data',
            JSON.stringify({
              type: 3,
              data: echartParams  //echart的配置
            })
          )
        }
      }
    }

除图表外,还支持图片,标题和文本

| type | data | 类型 | | -- | -- | -- | |0 | {title: 'string'} | 标题| |1 | { htmlContent: 'YmFzZmZkZmRmZGY=' //将html转换为base64, text: '' } | 文本 | | 2 | { picUrl: 'http://10.32.12.199:8188/files/2021/10/15/e01d04c820344f01b9c1d6e4d2668818.png' } | 图片 | | 3 | echartParams | 图表 |

图片和文本均支持原生拖拽,如非特殊情况不需要进行以上处理

  • 开源插件清单

 {
   "ant-design-vue": "^1.7.8",
   "axios": "^1.2.2",
   "dui-vue": "^1.1.0",
   "echarts": "^5.2.1",
   "file-saver": "^2.0.5",
   "html-docx-js": "^0.3.1",
   "jquery": "^3.6.4",
   "lodash": "^4.17.21",
   "lodash-es": "^4.17.21",
   "moment": "^2.29.1",
   "vue": "^2.7.0",
 }

 主要插件ckeditor5已打到组件中