open-index/open-npm huggingface dataset:
npm package: @gaopeng123/rc-login-jsencrypt
Description: 基于jsencrypt加密登录
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

#  rc-login-jsencrypt

> 基于jsencrypt加密的登录组件

## Usage

```react
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {RCLoginJSEncrypt} from "@gaopeng123/rc-login-jsencrypt";

const encryptPublicKey = 'xxx';

const headers = {
    clientId: 'xxx',
    secret: 'xxx',
};

const App = () => {
    return (
        <RCLoginJSEncrypt
            encryptPublicKey={encryptPublicKey}
            clientId={headers.clientId}
            secret={headers.secret}
            getCaptcha={async () => {
                return new Promise<RCLoginCaptchaProps>((resolve, reject) => {
                    get(`/testAuth/api/nebula/auth/token/v1/captcha`, {
                        params: {
                            width: 80,
                            height: 30
                        },
                        headers: headers
                    }).then((res: any) => {
                        console.log(res)
                        resolve(res)
                    })
                })
            }}
            phoneLoginUrl={true}
            handleSubmit={({headers, body, loginType, data, encryptor}) => {
                console.log(headers, body, loginType, data, encryptor);
                return new Promise((resolve, reject) => {
                    post(`/testAuth/api/nebula/auth/token/v1/shrLogin`, {
                        headers: headers,
                        body: body
                    }).then((res) => {
                        console.log(res);
                    });
                    resolve(true)
                })
            }}
            forgotPasswordUrl={true}
            onResetPasswordSubmit={(data) => {
                console.log(data);
                return new Promise((resolve, reject)=> {
                    setTimeout(()=> {
                        // 范围true关闭窗口 false不关闭
                        resolve(false);
                    }, 2000);
                }).catch(()=> {

                });
            }}
            mainStyle={{backgroundImage: 'url(./assets/background.jpg)'}}
            bodyStyle={{right: '200px;'}}
            keeplogged={true}
            title="食堂管理系统"
        />
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));
```

## useFeishuLogin

`飞书免登录`

```tsx
const [code, setCode] = useFeishuLogin({
        id: 'testapp', // 应用标识 字符串即可
        url: 'https://xxx', // 飞书登录地址
        app_id: '', // 申请的飞书应用id
        redirect_uri: 'https://xxx' // 配置的重定向地址
    });

    useEffect(() => {
        if (code) {
            // 调用服务端接口去交换token 交换完成后最好在调用下setCode();
            // 登录成功或者失败后 code就不能用了 所以要调用下
            setCode();
        }
    }, [code]);
```
npm package: @gaopeng123/rc-login-module
Description: 登录模块
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

#  rc-login-module

> 登录组件

## Usage

```react
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {RcLoginModule} from "@gaopeng123/rc-login-module";

const App = () => {
    return (
        <div>
            <RcLoginModule
                id={`test`}
                user="userId"
                password="password"
                publicKey=""
                method="GET"
                url="/assets/login.json"
                mainStyle={{backgroundImage: 'url(./assets/background.jpg)'}}
                bodyStyle={{right: '200px;'}}
                keeplogged={true}
                title="食堂管理系统"
            />
        </div>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));
```

## useFeishuLogin

`飞书免登录`

```tsx
const [code, resetCode] = useFeishuLogin({
        id: 'testapp', // 应用标识 字符串即可
        url: 'https://xxx', // 飞书登录地址
        app_id: '', // 申请的飞书应用id
        redirect_uri: 'https://xxx' // 配置的重定向地址  不需要转义
    });

    useEffect(() => {
        if (code) {
            // 调用服务端接口去交换token 交换完成后最好在调用下setCode();
            // 登录成功或者失败后 code就不能用了 所以要调用下
            resetCode();
        }
    }, [code]);
```

## feishuShareSdk

`飞书h5分享sdk封装`

```tsx
export const feishuShare = feishuShareSdk({
    "proxy_prefix": "/feishuAPI", // 处理跨域
    "app_id": process.env.REACT_APP_FEISHU_APP_ID as string,
    "app_secret": process.env.REACT_APP_FEISHU_APP_SECRET as string
});

// 调用分享
feishuShare.share({url, title, image, content, onSuccess});
```
npm package: @gaopeng123/rc-paginated-list
Description: 分页加载列表
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# `rc-paginated-list`

> TODO: 滚动分页表格
>
> [在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-rcpaginatedlist--props)  

## 参数

| 参数         | 说明                      | 类型                                                         | 默认值                   |
| ------------ | ------------------------- | ------------------------------------------------------------ | ------------------------ |
| request      | 数据请求函数              | (params: PaginationProps, abortController: AbortController) => Promise<DataSource> |                          |
| render       | 渲染行数据                | (record: any, style: React.CSSProperties) => ReactNode;      |                          |
| params       | 传递的参数                | {}                                                           | {}                       |
| pagination   | 分页数据                  | PaginationProps = {     pageSize?: number;     current?: number; }; | {current:1, pageSize:20} |
| height       | 表格高度                  | number                                                       | 600                      |
| itemSize     | 每一行数据高度            | number                                                       | 40                       |
| primaryColor | 主要颜色，用户loading加载 | string                                                       | #31CD70                  |

## Usage

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RcPaginatedList, RcDownLoading, RcTopLoading } from "../src";
import "@gaopeng123/rc-paginated-list/rc-paginated-list.cjs.development.css"

const App = () => {
    const request = (params: any, abortController)=> {
        // @ts-ignore
        return new Promise<any>((resolve, reject)=> {
            setTimeout(() => {
                resolve({
                // @ts-ignore
                    data: new Array(20).fill({}).map((item:any, index)=> {
                        return {
                            name: `name-${index * params.current}`
                        }
                    }),
                    total: 100
                })
            }, 1000);
        })
    }
    return (
        <>
            <RcPaginatedList
                request={request}
                render={(record, style)=> {
                    return <div style={style}>{record.name}</div>
                }}
            />
        </>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));
```
npm package: @gaopeng123/rc-qrcode
Description: 二维码
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# `rc-qrcode`

> TODO: 二维码生成

| 参数      | 说明                   | 类型                  | 默认值 |
| --------- | ---------------------- | --------------------- | ------ |
| text      | 要转换的文本           | string                | null   |
| width     | 二维码宽度             | number                | 200    |
| height    | 二维码高度             | number                | 200    |
| toDataURL | 转换成功后返回的base64 | (url: string) => void | null   |

## Usage

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RcQrcode } from "../src";
import { useRef, useState } from "react";

const App = () => {
    const [text, setText] = useState();
    const ref = useRef<any>();
    const onClick = ()=> {
        setText(ref?.current.value)
    }
    return (
        <>
            <div>
                <input ref={ref} type="text"></input>
                <input type="submit" onClick={onClick}/>
            </div>
            <RcQrcode
                text={text}
            />
        </>
    )
}

ReactDOM.render(<App/>, document.getElementById('root'));
```
npm package: @gaopeng123/rc-scroll-nav
Description: react scroll nav
Author: ligaopeng123
Latest version: 1.3.7-alpha.6

# RcScrollNav

`吸顶导航`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-rcscrollnav--docs)  

```tsx
export type RcScrollNavProps = {
    textColor?: string; // 字体颜色
    items: Array<ScrollNavItem>; // {label: string, value: string} value为dom的id
    scrollDom?: string, // 滚动的dom 默认为body
    primaryColor?: string, // 选中的颜色
    backgroundColor?: string, // 背景色 默认为#fff
    onChange?: (v: any)=> void; // 事件
};
```

## Usage

```tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RcScrollNav } from "../src";

const App = () => {
    return (
        <RcScrollNav
            items={[{
                label: 'label1',
                value: 'value1'
            }, {
                label: 'label2',
                value: 'value2'
            }, {
                label: 'label3',
                value: 'value3'
            }, {
                label: 'label4',
                value: 'value4'
            }, {
                label: 'label5',
                value: 'value5'
            }]}>
            <div
                id={'value1'}
                style={{height: 300}}>
                label1
            </div>
            <div
                id={'value2'}
                style={{height: 300}}>
                label2
            </div>
            <div
                id={'value3'}
                style={{height: 300}}>
                label3
            </div>
            <div
                id={'value4'}
                style={{height: 300}}>
                label4
            </div>
            <div
                id={'value5'}
                style={{height: 300}}>
                label5
            </div>
        </RcScrollNav>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));
```
npm package: @gaopeng123/rtc-cli
Description: react template create cli
Author: ligaopeng123
Latest version: 0.4.0

# 介绍

## 命令

```tsx
rtc create <template> // 创建项目

rtc c <template> 
    
rtc createModule <module> // 创建模块

rtc cm <module> 

rtc parse <filePath> // 处理文件 将md文件中的图片转为base64 并压缩
rtc p <filePath>

rtc list  // 查看命令支持

rtc ls
```

### 插件依赖

| 插件              | 目的         |
| ----------------- | ------------ |
| chalk             | 美化输入输出 |
| prompts           | 用户信息输入 |
| download-git-repo | 远程模板下载 |
| cac               | cli指令      |
| lodash.template   | 处理模板     |
| ora               | loading效果  |
| fast-glob         | 文件名读取   |

## 模板支持

### 模板

#### react-sample

[filename](https://raw.githubusercontent.com/ligaopeng123/react-project-template/react-simple-template/README.md ':include')

#### react-electron

[filename](https://raw.githubusercontent.com/ligaopeng123/react-project-template/react-electron-template/README.md ':include')

#### react-screen

[filename](https://raw.githubusercontent.com/ligaopeng123/react-project-template/react-screen-template/README.md ':include')

#### flutter-repo

[filename](https://raw.githubusercontent.com/ligaopeng123/react-project-template/flutter-repo-template/README.md ':include')

#### components-repo

[filename](https://raw.githubusercontent.com/ligaopeng123/react-project-template/components-repo/README.md ':include')

#### function-repo

[filename](https://raw.githubusercontent.com/ligaopeng123/react-project-template/function-repo/README.md ':include')

### 模块

#### table

- Store: 定义数据state及action
- typing：定义数据类型相关
- api：服务端相关
- styles.module：定义样式相关
- components：定义组件相关
  - TableForm：弹窗内部form表单
  - TableModal：弹窗组件
  - Table：表格组件

#### function

`依赖function-repo，开发函数库，包含jest测试等功能。上传到npm`

#### rc-component

`依赖components-repo，开发react组件，包含开发测试环境，自动检测变更上传等功能。上传到npm`

#### web-component

`依赖components-repo，开发web组件，包含开发测试环境，自动检测变更上传等功能。上传到npm`
npm package: @gaopeng123/scroll-nav
Description: 吸顶 tabs
Author: ligaopeng123
Latest version: 1.3.7-alpha.5

# `scroll-nav`

> TODO: 吸顶导航
>
> [在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-scrollnav--props)

## 参数

| 参数                                     | 说明                        | 类型                                                         | 默认值                                           |
| ---------------------------------------- | --------------------------- | ------------------------------------------------------------ | ------------------------------------------------ |
| primary-color                            | 主色                        | string                                                       | #387af6                                          |
| text-color<br />--text-color             | 字体颜色                    | string                                                       | #000000                                          |
| background-color<br />--background-color | 背景色                      | string                                                       | #ffffff                                          |
| items                                    | 导航数据                    | type ScrollNavItem = {     label: string,     value: string, }<br />Array<ScrollNavItem> | []<br />如果value为数字，则会拼接nav-value作为id |
| scroll-dom                               | 滚动条dom的id/class/tagName | string； #id, .class-name,div                                | body                                             |




## Usage

```
<scroll-nav text-color="#000000">
    <div class="nav-content-container" slot="content">
        <div id="a" class="content content1">Web1</div>
        <div id="b" class="content content2">Web2</div>
        <div id="c" class="content content3">Web3</div>
    </div>
</scroll-nav>

<script>
const nav = document.querySelector('scroll-nav');
nav.setAttribute('items', JSON.stringify([{label: 'Web1', value: 'a'},
        {label: 'Web2', value: 'b'}, {label: 'Web3', value: 'c'}]))
</script>
```
npm package: @gaopeng123/utils
Description: utils公共包
Author: ligaopeng123
Latest version: 1.1.19-alpha.1

##### 介绍

> [!NOTE]
> **@gaopeng123/utils 是一个工具函数库，提供一些常用的函数处理。**
> 

##### 下载依赖

```shell
npm i @gaopeng123/utils
yarn add @gaopeng123/utils
pnpm add @gaopeng123/utils
```

##### 功能

* [types](../src/types/README.md)：判断数据类型、浏览器类型、终端设备等。
* [object](../src/object/README.md)：处理对象数据类型
* [function](../src/function/README.md)：处理函数合并、柯理化、缓存等
* [file](../src/file/README.md)：处理文件、路径、参数拼接等
* [string](../src/string/README.md)：uuid生成、字符串长度、截取等
* [number](../src/number/README.md)：数字跳级转换、随机数生成等
* [array](../src/array/README.md)：数组维度转换等
* [date](../src/date/README.md)：日期时间处理、常用日期转换、周获取等

##### 文档

> [!TIP]
> **[https://ligaopeng123-npm.github.io/utils/](https://ligaopeng123-npm.github.io/utils/#/md/utils)**
>
npm package: @gaopeng123/utils.log
Description: console print beautification
Author: ligaopeng123
Latest version: 1.1.18

# console.log

`美化日志打印`

```
type LogType = 'success' | 'info' | 'log' | 'warn' | 'error';
```

## consoleStr

`打印字符串`

![img_str](https://github.com/ligaopeng123-npm/utils/blob/master/packages/log/src/img_str.png?raw=true)

## consoleBg

`打印带有背景的字符串`

![img_bg](https://github.com/ligaopeng123-npm/utils/blob/master/packages/log/src/img_bg.png?raw=true)

## consoleTag

`打印带有tag的log`

![img_1](https://github.com/ligaopeng123-npm/utils/blob/master/packages/log/src/img_tag_1.png?raw=true)

![img_2](https://github.com/ligaopeng123-npm/utils/blob/master/packages/log/src/img_tag_2.png?raw=true)

## createConsoleFactory

```typescript
createConsoleFactory(console, {error: 'red'});
// console.str console.tag console.bg 
```
npm package: @gaopeng123/utils.number
Description: 数字处理
Author: ligaopeng123
Latest version: 1.1.19-alpha.0

# number

## 随机数

##### randomInt: (min?: number, max?: number): number

`获取限定大小的随机整数`

```typescript
randomInt(5, 100); // 默认min = 0; max = 10;
```

## 量级转换

##### toThousands:(val: string | number, digit: number = 0): string

`将数字转换为千位制转换，digit小数点精确到几位 `

```typescript
toThousands(9999999); // '9,999,999'
toThousands(9999999.000, 3); // '9,999,999.000'
```

##### bitUpgrade: (n:number, opt: UpgradeOptions): string

`比特转换`

```typescript
type UpgradeOptions = {
	decimal?: number, // 保留几位小数 默认俩位
	delimiter?: string, // 数字和单位之间的分隔符 默认为 无
}
bitUpgrade(1000); // '1.00KB'
bitUpgrade(1025, {delimiter: ' '}); // '1.00 KB'
bitUpgrade(999); // '999B'
```

##### bitRateUpgrade

`比特率转换`

```typescript
bitRateUpgrade(1000);//'1000bps'
bitRateUpgrade(1025, {delimiter: ' '}); // '1.00 Kbps'
```

##### unitUpgrade:(num: number, options?: UnitUpgradeProps): [number, string]

`单位进阶`

```typescript
UnitUpgradeProps = {
	type?: 'bit' | 'bitRate',
	decimal?: number, // 保留几位小数 默认俩位
}
unitUpgrade(1000); //(['1.00', 'KB']
```

##### toFixed: (num:number, fix?: number);

`4舍5入，避免原生toFixed的银行家舍入法导致的问题`

## 最值

##### max: (...args: number[]): number;

`求最大值`

```typescript
max(3,4,9); // 9
```

##### min: (...args: number[]): number;

`求最小值`

```typescript
min(3,4,9); // 3
```

#### 大数据相加

```（）
str1= "123131231231231";
str2="1231231231232131";
sumMaxNumber(str1, str2) // "1354362462463362"
```
npm package: @gaopeng123/utils.socket
Description: socket reconnect
Author: ligaopeng123
Latest version: 1.1.18

# createSocket

## createSocket

`创建socket连接`

`自动发送心跳（20s）；`

`断线自动重连；`

`tab页切换自动重连；`

```
export interface WebSocketEvent {
    onOpen?: fn,
    onMessage?: fn,
    onError?: fn,
    onClose?: fn,
};

const ws = createSocket(url, events);
```

### ws.sent

`发送消息 发送字符串类型`

### ws.json

`发送json类型的数据`

### ws.buffer

`发送buffer数据`

### ws.close

`关闭数据`

## WebSocketManager

`创建createSocket`

```tsx
interface WebSocketManagerConfig {
    visibilityChange?: boolean; // 是否监听visibilitychange事件
    heartbeat: { // 心跳参数
        timeout?: number; // 发送心跳间隔时长
        name?: string; // 发送心跳内容 默认 {code: 'heartbeat'}
    },
    binaryType?: 'blob' | 'arraybuffer' // 数据类型 默认字符串
}

const { createSocket, destroySocket, send,  destroyAllSocket } = WebSocketManager({});
```
npm package: @gaopeng123/utils.ts-types
Description: typescript types utils
Author: ligaopeng123
Latest version: 1.1.18-alpha.1

# tsTypes

`定义一些公共的ts类型处理`

## Optional 将参数变为可选

```ty
Optional<params, 'name' | ‘age’>；
```

## 获取对象的key value类型

```typescript
// 获取一个对象的key和value的类型
const obj = {a:1, b: 2};
// 获取一个对象的key
type objKey = keyof typeof obj; // a | b
// 范型获取一个对象的key
type ObjectKeys<T> = keyof T;

type objectKeys = ObjectKeys<obj>; // a | b
// 获取obj的value类型
type objValues = typeof obj[keyof typeof obj];
// 范型获取obj的value类型
type ObjectValues<T> = T[keyof T];

ObjectValues(typeof obj);

// 获取obj的key value的类型
type ObjectKeyValue<T> = {
  key: keyof T;
  value: T[keyof T];
};

ObjectKeyValue(typeof obj)
```
npm package: @gaopeng123/video-progress-bar
Description: video progress bar
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

## video-progress-bar

`视频播放滚动条`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-videoprogressbar--props)

## Usage

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>video-progress-bar</title>
    <style>
        #root {
            width: 100%;
            height: 60px;
        }
    </style>
</head>

<body>
<div id="root">
    <div style="height: 400px;">
       
    </div>
    <video-progress-bar id="bar"></video-progress-bar>
</div>
<script>
    window.onload = function () {
        setTimeout(()=> {
            document.querySelector('#bar').start();
        }, 3000);
        document.querySelector('#bar').addEventListener('timeChange', (e)=> {
            console.log(222, e)
        });
    }
</script>
</body>
</html>

```
npm package: @gaopeng123/vue-image-upload
Description: 图片上传
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# vue-image-upload

> 图片上传 支持粘贴上传

![image-20220206113048610](C:\Users\pgli\AppData\Roaming\Typora\typora-user-images\image-20220206113048610.png)

## Usage

```vue
<script lang="ts">
import Vue from 'vue';
import VueImageUpload from '@gaopeng123/vue-image-upload';
    
/*
type FileItem = {
	name: string,
	url: string,
}
// 可配置参数
type VueImageUploadProps = {
    id: string;
    width?: string | number;
    height?: string | number;
    pictureWidth?: string | number; // 图片宽高
    pictureHeight?: string | number;
    action?: string; // 上传的路径
    listType?: 'picture-card' | 'picture';
    multiple?: boolean; // 是否支持多选
    accept?: string; // 支持类型 默认.png,.jpg,.jpeg
    maxCount?: number; // 最大上传个数
    fileList?: FileItem[]; // 上传列表
    onUploadChange?: (e: UploadEvent) => void; // 上传事件
    onAfterUpload?: (e: UploadEvent) => void; // 上传后事件
    onAfterDelete?: (e: UploadEvent) => void; // 删除后事件
};*/

export default Vue.extend({
    name: 'ServeDev',
    components: {
        VueImageUpload
    },
    methods: {
        onUploadChange(e: any) {
            console.log(e);
        }
    }
});
</script>

<template>
    <div id="app">
        <vue-image-upload @onUploadChange="onUploadChange"/>
    </div>
</template>
```