open-index/open-npm huggingface dataset:
npm package: @gaomd/mpvue-animated-number
Description: 微信小程序 mpvue 数字更新滚动动画组件 / An animated number component for mpvue
Author: Mengdi Gao
Latest version: 0.1.3

# mpvue-animated-number

微信小程序 [mpvue](https://github.com/Meituan-Dianping/mpvue) 数字更新滚动动画组件。

An animated number component for [mpvue](https://github.com/Meituan-Dianping/mpvue) (a framework to develop WeChat Mini Program).

## Demo

微信扫一扫以下小程序码查看真实效果。

Scan the following code with WeChat to see the real-world effects.

![WeChat Mini Program Scan Code](docs/wxmp-scan-code-430.jpg)

## Installation

    $ npm i --save @gaomd/mpvue-animated-number

## Usage

Using inside the [mpvue SFC](http://mpvue.com/mpvue/#vue_1), update `this.temperatureReading` then the number will change accordingly with elegant animation.

```vue
// src/pages/home/home.vue

<template>
  <p class="temperature">
    <AnimatedNumber
      :value="temperatureReading"
      :precision="2"
    >
    </AnimatedNumber>
  </p>
</template>

<script>
  import AnimatedNumber from '@gaomd/mpvue-animated-number';

  export default {
    components: {
      AnimatedNumber,
    },
    data() {
      return {
        temperatureReading: 3.14,
      };
    },
  }
</script>

<style>
  /* optional */
  .temperature {
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    font-weight: bolder;
    font-family: "Avenir Next Condensed", sans-serif;
    color: #333;
  }
</style>
```

## License

Copyright (c) 2018 Mengdi Gao

Based on MIT Licensed [Vue.js documentation](https://github.com/vuejs/vuejs.org/blob/master/src/v2/guide/transitioning-state.md).

This software is licensed under the [MIT License](LICENSE).
npm package: @gaomingzhao666/stack-info
Description: A cross-platform, framework-agnostic CLI for inspecting web project stacks in command line.
Author: gaomingzhao
Latest version: 1.0.1

# Stack Info CLI

[![npm version](https://img.shields.io/npm/v/@gaomingzhao666/stack-info/latest.svg?style=flat-square)](https://www.npmjs.com/package/@gaomingzhao666/stack-info)
[![npm downloads](https://img.shields.io/npm/dm/@gaomingzhao666/stack-info.svg?style=flat-square)](https://www.npmjs.com/package/@gaomingzhao666/stack-info)
[![License](https://img.shields.io/npm/l/@gaomingzhao666/stack-info.svg?style=flat-square)](./LICENSE)

`@gaomingzhao666/stack-info`, a cross-platform, framework-agnostic CLI for inspecting web project stacks in command line.

## Output Example

```bash
|                      |                                                              |
| -------------------- | ------------------------------------------------------------ |
| **Project root**     | `C:/Users/Gmz/Desktop/reservation-app`                       |
| **Operating system** | `Windows 10.0.26100`                                         |
| **CPU**              | `AMD Ryzen 7 8745HS w/ Radeon 780M Graphics      (16 cores)` |
| **Node.js version**  | `v24.13.0`                                                   |
| **Package manager**  | `pnpm@10.13.1`                                               |
| **Builder**          | `Vite@^7.0.4`                                                |
| **Frameworks**       | `Vue@^3.5.17`                                                |
```

## Installation

```bash
pnpm add -G @gaomingzhao666/stack-info
```

```bash
npm install -G @gaomingzhao666/stack-info
```

```bash
yarn global add @gaomingzhao666/stack-info
```

```bash
bun add -g @gaomingzhao666/stack-info
```

## Print Stack Info for Current Project

```bash
pnpm @gaomingzhao666/stack-info info
```

```bash
npm run @gaomingzhao666/stack-info info
```

```bash
yarn @gaomingzhao666/stack-info info
```

```bash
bun @gaomingzhao666/stack-info info
```

## Features

### Detections

- Detects project root path.
- Detects popular web frameworks used in current project.
- Detects builder used in current project.
- Detects package manager used in current project.
- Detects runtime environment.
- Detects OS information.
- Detects CPU information.

### others

- Modern and global use.
- Provides a clean and formatted output in the terminal.
- Cross-platform support.

## License

[MIT](./LICENSE)
npm package: @gaonengwww/eslint-config
Description: GaoNeng-wWw's eslint config
Author: GaoNeng-wWw
Latest version: 1.0.6

# @gaonengwww/eslint-config

## Usage

```bash
pnpm add @gaonengwww/eslint-config
```

```typescript
// eslint.config.mjs
import { www } from '@gaonengwww/eslint-config';
export default www();
```

And add command in your package.json

```json
{
    "scripts":{
        "lint": "eslint .",
        "lint:fix": "eslint . --fix"
    }
}
```

### Auto Fix

```json5
// .vscode/settings.json
{

    "prettier.enable": false,
    "editor.formatOnSave": false,

    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit",
      "source.organizeImports": "never"
    },
  
    "eslint.options": {
      "flags": ["unstable_ts_config"]
    },
  
    "eslint.runtime": "node",

    "eslint.rules.customizations": [
      { "rule": "style/*", "severity": "off", "fixable": true },
      { "rule": "*-indent", "severity": "off", "fixable": true },
      { "rule": "*-spacing", "severity": "off", "fixable": true },
      { "rule": "*-spaces", "severity": "off", "fixable": true },
      { "rule": "*-order", "severity": "off", "fixable": true },
      { "rule": "*-dangle", "severity": "off", "fixable": true },
      { "rule": "*-newline", "severity": "off", "fixable": true },
      { "rule": "*quotes", "severity": "off", "fixable": true },
      { "rule": "*semi", "severity": "off", "fixable": true }
    ],
  
    // Enable eslint for all supported languages
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      "typescript",
      "typescriptreact",
      "vue",
      "html",
      "markdown",
      "json",
      "json5",
      "jsonc",
      "yaml",
      "toml",
      "xml"
    ],
}
```
npm package: @gaonengwww/mock-server
Description: A tiny mock server
Author: gaonengwww
Latest version: 1.0.5

# mock server

> A streamlined HTTP mock server

## Usages

1. Install

```typescript
pnpm add @gaonengwww/mock-server
```

2. Use `createMockServer` function
```js
// index.js

const {createMockServer} = require('@gaonengwww/mock-server');

createMockServer({
  mocks:[
    {
      url: '/api/test',
      response: ()=>{
        return {foo: 'bar'}
      }
    }
  ]
})
```

3. run index.js

```bash
node index.js
```

4. send request

```bash
curl -vv http://localhost:8848/api/test

# * Connected to localhost (127.0.0.1) port 8848 (#0)
# > GET /api/test HTTP/1.1
# > Host: localhost:8848
# > User-Agent: curl/7.88.1
# > Accept: */*
# > 
# < HTTP/1.1 200 OK
# < Content-Type: application/json
# < Date: Mon, 29 Jul 2024 05:47:29 GMT
# < Connection: keep-alive
# < Keep-Alive: timeout=5
# < Transfer-Encoding: chunked
# <
# {"foo":"bar"}* Connection #0 to host localhost left intact
```

### Parse Body

You can use `body` get post body

```js
const {createMockServer} = require('@gaonengwww/mock-server');

createMockServer({
  mocks:[
    {
      method: 'post',
      url: '/api/test',
      response: ({body})=>{
        console.log(`Hello ${body.name}!`);
        return {};
      }
    }
  ]
})
```

```bash
curl http://localhost:8848/api/test -X POST --data '{"name":"Joe"}' --header "Content-Type: application/json"
# server side should output "hello Joe!"
```

### Different method

```js
const {createMockServer} = require('@gaonengwww/mock-server');

createMockServer({
  mocks:[
    {
      method: 'post',
      url: '/api/test',
      response: ({body})=>{
        console.log(`Hello ${body.name}!`);
        return {};
      }
    },
    {
      url: '/api/test',
      response: ()=>{
        return {foo: 'bar'}
      }
    }
  ]
})
```

```bash
curl http://localhost:8848/api/test -X POST --data '{"name":"Joe"}' --header "Content-Type: application/json"
# server side should output "hello Joe!"
curl http://localhost:8848/api/test
# {"foo":"bar"}
```

### Custom status code

```js
// index.js

const {createMockServer} = require('@gaonengwww/mock-server');

createMockServer({
  mocks:[
    {
      url: '/api/test',
      response: ()=>{
        return {foo: 'bar'}
      },
      statusCode: 404
    }
  ]
})
```

```bash
curl http://localhost:8848/api/test -vv

# > GET /api/test HTTP/1.1
# > Host: localhost:8848
# > User-Agent: curl/7.55.1
# > Accept: */*
# >
# < HTTP/1.1 404 Not Found
# < Content-Type: application/json
# < Date: Mon, 29 Jul 2024 06:00:37 GMT
# < Connection: keep-alive
# < Keep-Alive: timeout=5
# < Transfer-Encoding: chunked
# <
# {"foo":"bar"}* Connection #0 to host localhost left intact
```

### Timeout

```js
const {createMockServer} = require('@gaonengwww/mock-server');

createMockServer({
  mocks:[
    {
      method:'get',
      timeout: 1500,
      url: '/api/test',
      response: ()=>{
        return {foo:'bar'};
      }
    }
  ]
})
```

```bash
curl -o /dev/null -s -w "%{time_starttransfer} - %{time_total}" http://localhost:8848/api/test
1.511512 - 1.51158
```

### Cli

```
mock-server -h
```

## license

MIT
npm package: @gaonengwww/tiny-plugin-link
Description: 提供本地软链接工程，提升组件开发、调试效率
Latest version: 1.0.2

# tiny-plugin-link

## 描述

> 帮助开发同事本地调试插件，本地通过软链接的方式，调用本地开发的插件。避免组件开发人员，必须将组件 publish后 本地才可以体验调试的尴尬场景，提升组件开发成员开发、调试效率。

## 使用说明 - 已调试 lazyload 为例

> 为了方便理解，现以本地开发调试 lazyload 组件为例。

1. 第一步：首先将 lazyload 软链到 .tiny/LocalCDNPath 目录去。
   `执行tiny link 或者 tiny link init`
   ![init](https://github.com/opentiny/tiny-cli/blob/dev/packages/plugins/link/doc/init.png)  
   此时在个人的用户目录下会存在一份目标组件的软链接:  
   ![initlink](https://github.com/opentiny/tiny-cli/blob/dev/packages/plugins/link/doc/initlink.png)

2. 第二步：在.tiny/LocalCDNPath 目录查找 @opentiny/xxxx 组件，找到的话，将页面依赖的@opentiny/xxxx 删除，将.tiny/LocalCDNPath 下的组件软链到页面项目中去。  
   `执行tiny link -m @opentiny/xxx 本例中xxx表示lazyload`  
   ![insert](https://github.com/opentiny/tiny-cli/blob/dev/packages/plugins/link/doc/insert.png)  
   此时，在测试工程中，就会将目标组件软链接过来，如：  
   ![insertlink](https://github.com/opentiny/tiny-cli/blob/dev/packages/plugins/link/doc/insertlink.png)

## 使用场景

各组件开发的 owner 本地调试自己开发的组件，不需要每次发布在可以调试本地工程。

## 用法

### 在命令行里面使用

```
$ tiny link                      初始化本地插件的link环境
$ tiny link init                 同tiny link，初始化本地link环境
$ tiny link help                 显示link插件的相关明林
$ tiny link link -m @opentiny/xxx   将@opentiny/xxx插件link到当前的路径下
```
npm package: @gaonengwww/tiny-plugin-lint
Description: eslint+prettier代码规范及格式化插件
Author: h-ivy
Latest version: 1.0.3

# tiny-plugin-lint

> 本地代码 commit 时校验提交代码的 eslint，禁止不规范的代码入库

当前 lint 插件基于 Opentiny 前端规范开发而成，eslint 规则包可查看：[@opentiny/eslint-config](https://www.npmjs.com/package/@opentiny/eslint-config)

## 说明

> 代码提交时校验 eslint
> 提交校验不通过的代码，可以通过 fix 操作，修复不合规的代码（部分不规范的 eslint 问题仍需要手动修复）

## 使用场景

1. 代码提交时校验
2. 代码提交后修复

## 用法

### 在命令行里面使用

```
$ tiny lint help
$ tiny lint init  //初始化tiny lint
$ tiny lint fix   //修复本地lint，包括eslint（规则见:.eslintrc.js）、prettier(规则见：.prettierrc.js)、stylelint(规则见：.stylelintrc.js)
```
npm package: @gaonengwww/tiny-toolkit-dev
Description: tiny-cli 模块开发脚手架
Latest version: 1.0.1

# tiny-toolkit-dev

> 快速生成 tiny 插件/套件 开发环境的工具


## 使用场景

用于开发 tiny 套件及插件




## 用法


### 初始化

```
tiny init dev 
```

### 创建软链

在当前正在开发的插件或套件根目录下执行以下命令后, 之后你在本机操作的所有关于该套件或插件的命令,都是在执行你当前项目的代码

```
tiny link
```

### 发布代码

发布代码至 npm 上, 发布前会对文档进行简单的检查

```
tiny publish
```


### 查看帮助信息

```
tiny help
```

## 最佳实践

### 使用最新的 tiny-toolkit-dev 初始化

该套件会已经整合了以下所有的推荐实践方案, 并且已经处理好了所有套件, 插件的 eslint 的校验问题.


### 统一使用 `@opentiny/cli-devkit` 模块来调用 tiny 提供的方法

[API 链接](http://git.huawei.com/tiny/tiny/blob/master/docs/api.md)

```
# 使用方式
const { modules , logs } from '@opentiny/cli-devkit';

```

### 插件/套件对外暴露对象

插件和套件 本身是一个纯 npm 模块，对外暴露一个对象出来即可，其中对象的key，就是tiny的命令。

如果无子命令就可以执行的,可以给 `default` 属性传一个默认命令, 具体代码如下:

```
// 假定以下为 tiny-plugin-commit 插件逻辑

function commit() {
  // 执行弹出 commit 类型选择框操作
}

function help() {
  // 打印帮助信息
}

module.exports = {
  help,
  default: commit
}
```


### 获取命令行参数


会有 `clientArgs` 和 `clientOptions` 两个属性, 前者是控制台参数数组, 后者是控制台选项对象, 具体使用如下:

```
// 假定以下为 tiny commit help 命令的实现
// 参数保有一个，是控制台参数及选项
module.exports = function(options) {
  console.log(options.clientArgs);
  console.log(options.clientOptions);
}

// 执行 tiny commit help --x 1
// 那么将会输出:  
// ['help']
// { x: 1 }
```
npm package: @gaonengwww/tiny-toolkit-docs
Description: 这里对你的套件进行简单描述, 比如适用哪些场景,使用了什么技术, 有什么特点
Author: h-ivy
Latest version: 1.0.9

# @/tiny-toolkit-docs

## 说明

这里对你的套件进行简单描述, 比如适用哪些场景,使用了什么技术, 有什么特点

## 用法

### 初始化

```
tiny init @/docs
```
### 开启本地服务器

```
tiny start 
```

### 单元测试

```
tiny test 
```

### 代码打包

```
tiny build 
```

### 代码发布

```
tiny publish -d # 发布到日常
tiny publish -p # 发布到预发
tiny publish -o # 发布到线上
```


## tiny.config.js 配置

```
{
    toolkit: "@opentiny/tiny-toolkit-docs",
    toolkitConfig: {
        port: 9000, //本地服务器端口号
        open: true,  //是否自动打开浏览器
        log: true,  //是否打印本地服务器访问日志
        openTarget: "src/index.html",   //打开浏览器后自动打开目标页面
        liveload: false //是否自动刷新
    }    
}
```
npm package: @gaopeng123/browser
Description: ```typescript import {checkBrowser} from '@gaopeng123/browser';
Author: ligaopeng123
Latest version: 0.1.4

### 检测浏览器版本，并提供下载链接
#### demo
```typescript
import {checkBrowser} from '@gaopeng123/browser';

checkBrowser('app-key', {chrome: {
    minimumVersion: 90,
    upgradeLink: 'http://***'
}});
```
#### 参数
##### appkey: string
`应用标识，保存用户选择最后选择，建议使用随机数`

##### options: Options
`非必填，默认参数如下`
```typescript
const defaultOptions = {
    chrome: {
        // 最低版本
        minimumVersion: 80,
        // 下载链接
        upgradeLink: 'http://chrome.illzjp.cn/dl.html',
        choose: {
            nextTime: true, // 是否提示下次再说
            never: true, // 是否提示不想更新
        }
    },
    firefox: {
        minimumVersion: 80,
        upgradeLink: 'https://download-ssl.firefox.com.cn/releases-sha2/stub/official/zh-CN/Firefox-latest.exe',
        choose: {
            nextTime: true, // 是否提示下次再说
            never: true, // 是否提示不想更新
        }
    }
}
```
npm package: @gaopeng123/card-ellipsis
Description: 卡片多余内容支持展开和收起
Author: ligaopeng123
Latest version: 1.3.7-alpha.5

# card-ellipsis

`卡片多余内容支持展开和收`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-cardellipsis--props)  

## Usage

```html
card-ellipsis {
    --text-color: #1677ff;
  	--border-color: #bfbfbf;
		// 使用文字
		--expand-text: '更多';
		--collapse-text: '收起';
		// 使用图标
		--expand-image: url(~@/assets/img/expand.png);
		--expand-text: '';
		--collapse-image: url(~@/assets/img/collapse.png);
		--collapse-text: '';
}

//  最小高度
// min-height 默认100
// 简单模式为 slot比较简单 可以监听dam变化 添加过渡动画，复杂dom结构无法监听内部节点变化 获取不到高度，此时没有动画
// mode 'simple' | 'complex'  默认complex

<card-ellipsis min-height="140">
    <div slot="content">
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
        12121212</br>
    </div>
</card-ellipsis>
```
npm package: @gaopeng123/card-flip
Description: 卡片翻转
Author: ligaopeng123
Latest version: 1.3.7-alpha.2

# card-flip

`翻转动画`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/story/example-cardflip--props)  

## Usage

```typescript
export type CardFlipConfig = {
    height?: string | number; // 高度
    width?: string | number; // 宽度
    type?: 'x' | 'y' // 翻转的方向
};
```

```html
<style>
  #front {
    height: 100%;
    background-image: url(https://picsum.photos/200/300?k=1);
  }

  #back {
    height: 100%;
    background-image: url(https://picsum.photos/200/300?k=2);
  }
</style>

<card-flip height="300" width="200" type="x">
  <div slot="front" id="front"> front</div>
  <div slot="back" id="back"> back</div>
</card-flip>
```
npm package: @gaopeng123/component-loading
Description: 组件加载动画
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# component-loading

`组件加载动画`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/story/example-componentloading--props)

## Usage

```html
<component-loading></component-loading>
<style>
    component-loading {
        --component-loading-color: red; // 定义颜色
    }
</style>
```
npm package: @gaopeng123/feishu-share-sdk
Description: 飞书 H5分享
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# `feishuShareSdk`

> 书h5分享sdk封装

## Usage

```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});
// 判断当前环境是否可用
feishuShare.canShare();
```
npm package: @gaopeng123/hls-player
Description: hls播放器
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# hls-player

`hls播放器`

## Usage

```typescript
type HlsPlayerConfig = {
  "object-fit": 'fill',
  width: '100%',
  height: '100%',
  'media-data-source': {
    url: '',
    type: ''
  },
};


const hlsPlayer = document.querySelector('hls-player');
hlsPlayer.setAttribute('media-data-source', JSON.stringify({
  url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'
}));
```
npm package: @gaopeng123/hooks
Description: hooks
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# hooks

## 介绍

> [!NOTE]
> **@gaopeng123/hooks 是一个react hooks库，收集一些常用的hooks。**

## 下载

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

## 文档

https://ligaopeng123-npm.github.io/hooks/

## 预览

```iframe
    height="300"
    width="100%"
    scrolling="no"
    title="hooks"
    src="https://ligaopeng123-npm.github.io/hooks/#/#/useClock"
    frameborder="no"
    loading="lazy"
    allowtransparency="true"
    allowfullscreen="true"
    textContent="See the Pen <a href='https://codepen.io/desandro/pen/XWNWPve'>Zdog trefoil</a> by Dave DeSandro (<a href='https://codepen.io/desandro'>@desandro</a>) on <a href='https://codepen.io'>CodePen</a>."
```

## Usage

* [useScale](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usescale--docs)：监听窗口变化，动态缩放当前dom。

* [useZoom](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usezoom--docs)：监听窗口变化，动态调整zoom大小。

* [useResize](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-useresize--docs)：监听窗口变化，返回窗口尺寸。

* [useMergeValue](./src/useMergeValue/README.md)：解决npm因peerDependencies导致安装失败问题。

* [useEasing](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-useeasing--docs)：缓动函数。

* [useClock](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-useclock--docs)：时钟器。

* [usePoller](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usepoller--docs)：轮询器,包括同步轮询，异步轮询。

* [useFetch](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usefetch--docs)：请求函数

* [useWorker](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-useworker--docs)：Web Worker使用

* [useDebounce](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usedebounce--docs)：去抖

* [useThrottle](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usethrottle--docs)：节流

* [useThrottleAndMerge](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usethrottleandmerge--docs)：节流并合并数据

* [useReloadAfterStationary](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usereloadafterstationary--docs)：无操作后重新加载当前页面

* [usePagination](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usepagination--docs)：分页器

* [useBoolean](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-useboolean--docs)：boolean类型管理器

* [useAntdTableSelection](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-useantdtableselection--docs)：antd proTable处理选中

* [useEffectOnceInStrictMode](https://ligaopeng123-npm.github.io/hooks/?path=/docs/example-usereloadafterstationary--docs)：react18 严格模式下只执行一次
npm package: @gaopeng123/hooks.use-antd-table-selection
Description: antd table selection
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# useAntdTableSelection

>antd表格处理多选逻辑
>
>[在线demo](http://localhost:6007/?path=/story/example-useantdtableselection--demo)

## Usage

```tsx
const [{selectedRows, selectedRowKeys, rowSelection}, {clearSelected}] = useAntdSelection({idKey: 'userId', defaultSelectedRowKeys: []});
return (
  <ProTable<TableListItem>
            actionRef={ref}
            columns={columns}
            // @ts-ignore
            rowSelection={rowSelection}
    ...
    />
);
```
npm package: @gaopeng123/hooks.use-antd-table-value-enum
Description: 处理antd table valueEnum
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# useAntdTableValueEnum

`处理antd 表格 valueEnum`

## Usage

```tsx
const useEemo = () => {
    return useAntdTableValueEnum({
      	// 需要一个数组
        request: async () => {
            return await demoList()
        },
      	// 数组对应显示的值
        fieldNames: {
            label: 'name',
            value: 'value'
        },
      	// 是否需要缓存，码表数据基本不会变化 可以换成
        cacheKey: 'useEemo',
      	// 是否需要多valueEnum数据再次处理
      	enumCallBack: (item)=> item
    })
}

const {list, valueEnum} = useEemo();
```
npm package: @gaopeng123/hooks.use-boolean
Description: boolean类型设置
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# # useBoolean

> TODO:  bool类型定义，使用场景：窗口的打开关闭；loading状态的控制等；
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-useboolean--demo)

## 参数

`接收默认值true或者false，默认为false`

`返回值为bool和一个actions`

```tsx
type ActionsFn = () => void;
type ActionsSetFn = (val: boolean) => void;
export type Actions = {
    setTrue: ActionsFn, // 设置true
    setFalse: ActionsFn, // 设置false
    setAuto: ActionsFn, // 如果当前为true 设置为false 如果为false则为true
    setBool: ActionsSetFn // 根据传递的值设置
};
```

## Usage

```
const TestUseBoolean: React.FC<TestUseBooleanProps> = (props) => {
    const [bool, {setTrue, setFalse, setBool, setAuto}] = useBoolean(false);
    return (
        <React.Fragment>
            <h3>useBoolean</h3>
            <button onClick={() => setTrue()}>true</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button onClick={() => setFalse()}>false</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button onClick={() => setBool(true)}>setBool</button>&nbsp;&nbsp;&nbsp;&nbsp;
            <button onClick={() => setAuto()}>setAuto</button><br/>
            bool: <span>{`${bool}`}</span>
        </React.Fragment>
    )
};

export default TestUseBoolean;
```
npm package: @gaopeng123/hooks.use-clock
Description: 时钟时间
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# useClock 

>时钟器 [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-useclock--demo)

## 参数

```typescript
type ClockDate = {
    ymd: string, // 年月日
    hms: string, // 时分秒
    week: string; // 周几
}

const {ymd, hms, week} = useClock();
```

## Usage

```tsx
import React from 'react';
import {useClock, ClockDate } form "@gaopeng123/hooks.use-clock"; // @gaopeng123/hooks

type TestUseClockProps = {};
const TestUseClock: React.FC<TestUseClockProps> = (props) => {
    const clock: ClockDate = useClock();
    return (
        <React.Fragment>
            <h3>useClock</h3>
            {
                `${clock.ymd} ${clock.hms} ${clock.week}`
            }
        </React.Fragment>
    )
};

export default TestUseClock;
```
npm package: @gaopeng123/hooks.use-debounce
Description: > TODO: description
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `useDebounce`

> TODO: 去抖hooks  [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usedebounce--demo)

`(fn: Fn, wait = 200, options: DebounceOptions = {}, dep: Dep = []) => Fn`

```tsx
export type DebounceOptions = {
    leading: boolean; // 第一时间是否立即执行 后续在去抖
    notDebounce?: (...arg: any) => any; // 在去抖过程中 有一些非去抖处理 可以添加此参数
}
```

## Usage

```tsx
import React, {useState} from 'react';
import {useDebounce} from "@gaopeng123/hooks.use-debounce";

type TestUseDebounceProps = {};
const TestUseDebounce: React.FC<TestUseDebounceProps> = (props) => {
    const [v, setV] = useState('');
    // 
    const onChange = useDebounce((v: any) => {
        setV(v.target.value);
    })
    return (
        <React.Fragment>
            <input onChange={onChange}/>
            <br></br>输入值: {v}
        </React.Fragment>
    )
};

export default TestUseDebounce;
```
npm package: @gaopeng123/hooks.use-easing
Description: 缓动函数
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# useEasing

>缓动函数
>
>[在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-useeasing--demo) 
>
>[参考](https://echarts.apache.org/examples/zh/editor.html?c=line-easing)

## 参数

```typescript
useEasing:(props: UseEasingProps) : number;

type EasingType = 'linear' | 'quadraticIn' | 'quadraticOut' | 'quadraticInOut'
    | 'cubicIn' | 'cubicOut' | 'cubicInOut' | 'quarticIn' | 'quarticOut' | 'quarticInOut'
    | 'quinticIn' | 'quinticOut' | 'quinticInOut' | 'sinusoidalIn' | 'sinusoidalOut'
    | 'sinusoidalInOut' | 'exponentialIn' | 'exponentialOut' | 'exponentialInOut'
    | 'circularIn' | 'circularOut' | 'circularInOut' | 'elasticIn' | 'elasticOut'
    | 'elasticInOut' | 'backIn' | 'backOut' | 'backInOut' | 'bounceIn' | 'bounceOut'
    | 'bounceInOut';

type UseEasingProps = {
    immediate?: boolean; // 是否立即执行 还是由startPoller开启 默认立即执行
    duration?: number; // 持续时间 毫秒 默认为1000ms
    intervals?: number; // 执行间隔  默认为100ms
    easingType: EasingType; // 执行动画类型
}

const [easing, start, stop] = useEasing({duration: 60000, intervals: 1000, easingType: 'cubicOut'}); // 0 - 1之间的数
```

## Usage

```tsx
import React from 'react';
import {useEasing} from "@gaopeng123/hooks.use-easing";

type TestUseEasingProps = {};
const TestUseEasing: React.FC<TestUseEasingProps> = (props) => {
	const [useCurrentData, startEasing, stopEasing] = useEasing({
		duration: 60000,
		immediate: false,
		easingType: "cubicOut",
		intervals: 1000
	});
	return (
		<React.Fragment>
			<h3>useEasing 缓动函数</h3>
			{
				useCurrentData
			}
		</React.Fragment>
	)
};

export default TestUseEasing;
```
npm package: @gaopeng123/hooks.use-effect-once-in-strict-mode
Description: 在严格模式下只执行一次的useEffect，特殊场景下使用
Author: wangxiangyu
Latest version: 0.7.10-alpha.0

# useEffectOnceInStrictMode

>处理react18某些场景下，需要屏蔽掉StrictMode模式下执行俩次的场景，保证开发环境和生产环境只执行一次，并兼容react17
>
>[在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-useeffectonceinstrictmode--demo)

## Usage

```tsx
useEffectOnceInStrictMode(()=> {}, []);
```
npm package: @gaopeng123/hooks.use-pagination
Description: 分页器
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `usePagination`

> TODO: 分页hooks
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usepagination--demo)

## Usage

```tsx
import React from 'react';
import { usePagination } from "@gaopeng123/hooks.use-pagination";

type TestUsePaginationProps = {};
const TestUsePagination: React.FC<TestUsePaginationProps> = (props) => {
    const [current, next, last] = usePagination({pageNum: 1, pageSize: 10, total: 301});
    return (
        <div style={{backgroundColor: '#97fa04', width: '100%', height: '100%'}}>
            <h3>usePagination</h3>
            <a onClick={() => next()}>下一页</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a onClick={() => last()}>上一页</a><br/>
            current: {
                current
            }
        </div>
    )
};

export default TestUsePagination;
```
npm package: @gaopeng123/hooks.use-poller
Description: 轮询器
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# usePoller

`(props: PollerProps): [number, () => void, () => void]`

>轮询器,包括同步轮询，异步轮询
>
>[在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usepoller--demo)

## 参数

```typescript
type PollerMark = {
    states: string | number;
    props?: any; // 上次callBack、asyncCallBack返回的结果
    time: number; // 执行时间
    startStamp: number; // 轮询开始时间
    currentStamp: number; // 当前时刻
    endStamp: number; // 轮询结束时间
}

type PollerProps = {
    delay?: number; // 执行时间
    immediate?: boolean; // 是否立即执行 还是由startPoller开启 默认立即执行
    callBack?: (args: PollerMark) => void; // 执行回调
    asyncCallBack?: (args: PollerMark) => Promise<any>; // 异步回调器
}
```

> [!WARNING]
> **此处需要注意，调用轮询器stopPoller后需要return，才能停止**

```typescript
// 同步轮询
const [time, startPoller, stopPoller] = usePoller({
    delay: 5000, callBack: (params: PollerMark) => {
        if (params.time > 10000) {
            stopPoller();
            return;// TODO 此处需要return; 否则无法停止
        }
    }
});

```

```typescript
// 异步轮询
const [asyncTime, startAsyncPoller, stopAsyncPoller] = usePoller({
    delay: 5000,
    asyncCallBack: async (params) => {
        // 满足条件时 停止计时器 return即可
        if (params.time > 10000) {
            stopAsyncPoller();
            return; // TODO 此处需要return; 否则无法停止
        }
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(`我是参数: ${Date.now()}`)
            }, 2000)
        });
    }
});
```

## Usage

```tsx
import React, {useEffect} from 'react';
import {usePoller} from "@gaopeng123/hooks.use-poller";

type TestUsePollerProps = {};
const TestUsePoller: React.FC<TestUsePollerProps> = (props) => {
	const [time, startPoller, stopPoller] = usePoller({delay: 1200});
	const [asyncTime, startAsyncPoller, stopAsyncPoller] = usePoller({
		delay: 1200,
		immediate: false,
		asyncCallBack: async (params) => {
			console.log('params', params);
			if (params.time > 10000) {
				stopAsyncPoller();
				return;
			}
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(`我是参数: ${Date.now()}`)
				}, 2000)
			});
		}
	});

	useEffect(() => {
		setTimeout(() => {
			startAsyncPoller();
		}, 2000);

		setTimeout(() => {
			stopPoller();
			setTimeout(() => {
				startPoller();
			}, 2000)
		}, 10009);
	}, []);
	return (
		<React.Fragment>
			<h3>usePoller</h3>
			{
				time
			}
			<h3>异步usePoller</h3>
			{
				asyncTime
			}
		</React.Fragment>
	)
};

export default TestUsePoller;

```
npm package: @gaopeng123/hooks.use-reload-after-stationary
Description: reload after stationary
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `useReloadAfterStationary`

> TODO: 长时间未操作 reload当前页面
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usereloadafterstationary--demo)

## Usage

```tsx
import React from 'react';
import { useReloadAfterStationary } from "../../packages/useReloadAfterStationary";

type TestUseReloadAfterStationaryProps = {};
const TestUseReloadAfterStationary: React.FC<TestUseReloadAfterStationaryProps> = (props) => {
    useReloadAfterStationary({wait: 5000, interval: 1000});
    return (
        <React.Fragment>
            {new  Date().toString()}
        </React.Fragment>
    )
}

export default TestUseReloadAfterStationary;
```
npm package: @gaopeng123/hooks.use-resize
Description: 窗口自使用
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# useResize

`(props:ResizeProps):WindowSize`

>监听窗口变化，返回窗口尺寸
>
>[在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-useresize--demo)

## 参数

```typescript
type ResizeProps = {
    wait?: number; // 等待时间
}
type WindowSize = {
    availWidth: number;
    availHeight: number;
    width: number;
    height: number;
    screenWidth: number;
    screenHeight: number;
};
```

## Usage

```tsx
import React from 'react';
import {useResize} from "gaopeng123/hooks.use-resize";

type TestUseResizeProps = {};
const TestUseResize: React.FC<TestUseResizeProps> = (props) => {
    const windowSize: any = useResize();
    const list = Object.keys(windowSize);
    return (
        <React.Fragment>
            <h3>windowSize</h3>
            {
                list.map((key, index) => {
                    const laster = list[index - 1];
                    return index % 2 ? <p>{laster}: {windowSize[laster]}, {key} : {windowSize[key]},</p> : null
                })
            }
        </React.Fragment>
    )
};

export default TestUseResize;

```
npm package: @gaopeng123/hooks.use-scale
Description: 窗口缩放
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# useScale

`(props?: ScaleProps):{x: number,y:number}`

>监听窗口变化，动态缩放当前dom，并保持居中
>
>[在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usescale--demo)

## 参数

```typescript
type ScaleProps = {
    scaleDom?: any; // 缩放的dom 如果不传 默认为body下得第一个div元素
    width?: number; // 理想宽
    height?: number; // 要求的理想宽高 小于或者大于该数据后进行缩放
};
const scale = useScale({width: 1920, height: 1080});
```

## Usage

```tsx
import React, {useEffect} from 'react';
import {useScale} from "@gaopeng123/hooks.use-scale";

type TestUseScaleProps = {};
const TestUseScale: React.FC<TestUseScaleProps> = (props) => {
    const scale = useScale({width: 1920, height: 1080});
    useEffect(() => {
        return () => {

        }
    }, [scale]);
    return (
        <div style={{backgroundColor: '#97fa04', width: '100%', height: '100%'}}>
            <h3>useScale</h3>
            scale: {
            JSON.stringify(scale, null, 2)
        }
        </div>
    )
};

export default TestUseScale;
```
npm package: @gaopeng123/hooks.use-throttle
Description: > TODO: description
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `useThrottle`

> TODO: 节流hooks
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usethrottle--demo)

`(fn: Fn, wait: number = 200, options: ThrottleOptions = {}, dep: any[] = []): Fn`

```tsx
export type ThrottleOptions = {
    type?: 1 | 2; // 1 时间戳记录 2 setTimeout版本
    leading?: boolean; // 第一时间是否立即调用 后续在节流
}
```

## Usage

```
import React, {useState, useEffect} from 'react';
import {useThrottle} from "@gaopeng123/hooks.use-throttle";

type TestUseThrottleProps = {};
const TestUseThrottle: React.FC<TestUseThrottleProps> = (props) => {
    const [v, setV] = useState('');
    const onChange = useThrottle((v: any) => {
        setV(v.target.value);
    }, 500);
    return (
        <React.Fragment>
            <input onChange={onChange}/>
            <br></br>输入值: {v}
        </React.Fragment>
    )
};

export default TestUseThrottle;

```
npm package: @gaopeng123/hooks.use-throttle-and-merge
Description: 节流并且数据合并
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `Throttle And Merge`

> TODO: 节流并且数据合并 第一次和最后一次都会触发，返回值为数组，将每一次节流数据合并到数组中去
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usethrottleandmerge--demo)

## useThrottleAndMerge

`TODO: 单次事件源合并`

## Usage

```tsx
import React, { useState } from 'react';
import { useThrottleAndMerge } from "../../packages/useThrottleAndMerge";

type TestUseThrottleAndMergeProps = {};
const TestUseThrottleAndMerge: React.FC<TestUseThrottleAndMergeProps> = (props) => {
    const [event, setEvent] = useState([]);
    const onClick = useThrottleAndMerge((res)=> {
        console.log(res);
        setEvent(res);
    }, 1000);
    return (
        <React.Fragment>
            <button onClick={onClick}>点击查看打印</button>
            <div>click事件长度：{event.length}</div>
        </React.Fragment>
    )
}

export default TestUseThrottleAndMerge;
```

## useThrottleAndMergeFns

`合并多个事件源`

```tsx
import React, { useEffect, useRef, useState } from 'react';
import { useThrottleAndMergeFns } from "../../packages/useThrottleAndMerge/src";

type TestUseThrottleAndMergeFnsProps = {};
const TestUseThrottleAndMergeFns: React.FC<TestUseThrottleAndMergeFnsProps> = (props) => {
    const ref = useRef({a: 0, b: 0});
    const [events, setEvents] = useState<any>(ref.current);
		// 事件源基于key来区分；
  	// 例如：a函数接受事件a，b函数接受事件b
    const {a: onClick1, b: onClick2} = useThrottleAndMergeFns({a: (res: any)=> {
            ref.current.a = ref.current.a + res.length;
            setEvents(Object.assign({}, ref.current));
            console.log(22)
        }, b: (res: any)=> {
            ref.current.b = ref.current.b + res.length;
            setEvents(Object.assign({}, ref.current));
        }}, 1000);

    useEffect(()=> {
        const bth: any = document.querySelector('#TestUseThrottleAndMerge-test1')
        const bth2: any = document.querySelector('#TestUseThrottleAndMerge-test2')
        const loop = ()=> {
            setTimeout(()=> {
                // @ts-ignore
                bth.click();
                setTimeout(()=> {
                    // @ts-ignore
                    bth2.click();
                }, Math.random() * 10)
                loop();
            }, Math.random() * 100)
        }
        // loop();
    }, []);

    return (
        <>
            useThrottleAndMergeFns <br/>
            <button id={'TestUseThrottleAndMerge-test1'} onClick={onClick1}>点击查看打印a</button><br/>
            <button id={'TestUseThrottleAndMerge-test2'} onClick={onClick2}>点击查看打印b</button>
            <br/>
            <div>clicka总次数：{events.a}</div>
            <div>clickb总次数：{events.b}</div>
        </>
    )
}

export default TestUseThrottleAndMergeFns;
```
npm package: @gaopeng123/hooks.use-visibility
Description: 浏览器页面唤醒与隐藏
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `use-visibility`

> TODO: 返回页面的隐藏和唤醒状态
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usevisibility--demo)

## Usage

```tsx
import React from 'react';
import { useVisibility } from "@gaopeng123/hooks.useVisibility";

type TestUseVisibilityProps = {};
const TestUseVisibility: React.FC<TestUseVisibilityProps> = (props) => {
    const visibility = useVisibility({
        wait: 500,
        onVisibilitychange: (v) => {
            console.log(visibility, v);
        }
    });
    return (
        <div style={{backgroundColor: '#97fa04', width: '100%', height: '100%'}}>
            <h3>useVisibility</h3>
            visibility: {
            visibility
        }
        </div>
    )
};

export default TestUseVisibility;
```
npm package: @gaopeng123/hooks.use-worker
Description: web worker使用
Author: ligaopeng123
Latest version: 0.7.10-alpha.0



# useWorker

> 在react中使用web worker；需要 webpack5 或者 react-script5环境
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-useworker--demo)

## 参数

```typescript
export type UseWorkerProps = {
    worker: Worker; // Worker对象
    params?: any; // 传递的参数
};
```

## test.worker.ts

```typescript
// test.worker.ts
/* eslint-disable no-restricted-globals */
self.onmessage = (props) => {
    // @ts-ignore
    self.postMessage(`worker: ${props.data}`)
}

export {}
```

## Usage

```typescript
import React from 'react';
import {useWorker} from "@gaopeng123/hooks.useWorker";

const worker = new Worker(new URL('./test.worker.ts', import.meta.url));
type TestUseWorkerProps = {};
const TestUseWorker: React.FC<TestUseWorkerProps> = (props) => {
    const workerData: any = useWorker({worker, params: '1'});
    return (
        <React.Fragment>
            {
                workerData?.data
            }
        </React.Fragment>
    )
};

export default TestUseWorker;
```
npm package: @gaopeng123/hooks.use-zoom
Description: 窗口缩放
Author: ligaopeng123
Latest version: 0.7.10-alpha.0

# `useZoom`

> TODO: 放大缩小对应的dom
>
> [在线demo](https://ligaopeng123-npm.github.io/hooks/?path=/story/example-usezoom--demo)

## Usage

参数

```tsx
export interface ZoomProps {
    zoomDom?: any; // 缩放的dom 如果不传 默认为body
    max?: number; // 最大缩放倍数  默认0.5
    min?: number; // 最小缩放倍数  默认2
    onMax?: (zoom: number) => void; // 缩放到最大倍数时触发
    onMin?: (zoom: number) => void; // 缩放到最小倍数时触发
    defaultZoom?: number; // 默认缩放级别   默认1
    step?: number; // 每次缩放级别的值 默认0.25
}
```

```tsx
import React from 'react';
import {useZoom} from "@gaopeng123/hooks.use-zoom";

type TestUseZoomProps = {};
const TestUseZoom: React.FC<TestUseZoomProps> = (props) => {
    const [zoom, {zoomUp, zoomDown, zoomReset}] = useZoom({min: 0.25, max: 5, onMax: ()=> {
            console.log(111)
        }});
  
  const [zoom, {zoomUp, zoomDown, zoomReset}] = useZoomAndDrag({min: 0.25, max: 5, onMax: ()=> {
            console.log(111)
        }});
    return (
        <div style={{backgroundColor: '#97fa04', width: '100%', height: '100%'}}>
            <h3>useZoom</h3>
            <a onClick={() => zoomUp()}>放大</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a onClick={() => zoomDown()}>缩小</a><br/>
            zoom: {
                zoom
            }
        </div>
    )
};

export default TestUseZoom;
```
npm package: @gaopeng123/matrix-bg
Description: 黑客帝国背景
Author: wangxiangyu
Latest version: 1.3.7-alpha.4

# matrix-bg

`黑客帝国背景图`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/story/example-matrixbg--props)  

## Usage

```html
<div style="width: 100vw;height: 100vh;">
  <matrix-bg></matrix-bg>
</div>
```
npm package: @gaopeng123/message
Description: message
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# message

> 消息信息

## Usage

```typescript
import {initMsg} from “@gaopeng123/message”;

// 初始化message 避免全局变量
const message = initMsg();

// 全局设置message的属性
message.config = {

};

type MsgConfig = {
    type?: 'info' | 'warning' | 'success' | 'error' | 'loading',
    showClose?: boolean,
    timeout?: number,
    animation?: boolean,
    autoClose?: boolean,
    content?: string,
    onClose?: any,
    maxNums?: number,
    html?: string;
};

// API
message.info('', config as MsgConfig);
message.warning('', config as MsgConfig);
message.success('', config as MsgConfig);
message.error('', config as MsgConfig);
message.loading('', config as MsgConfig);
```
npm package: @gaopeng123/rc-card-ellipsis
Description: 卡片展开和收起
Author: ligaopeng123
Latest version: 1.3.7-alpha.5

# RcCardEllipsis

`卡片展开和收起 ` [在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-rccardellipsis--props)  

## Usage

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

const App = () => {
    return (
        <RcCardEllipsis onChange={(e)=> {
            console.log(e);
        }} minHeight={100} mode="simple">
            12<br/>
            12<br/>
            12<br/>
            12<br/>
            12<br/>
            12<br/>
            12<br/>
        </RcCardEllipsis>
    );
};

ReactDOM.render(<App/>, document.getElementById('root'));
```
npm package: @gaopeng123/rc-image-upload
Description: 图片上传
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# rc-image-upload

> 图片上传，截图上传插件，支持点击上传、截图粘贴上传、拖拽上传 

[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/story/example-rcimageupload--props) 

![demo.png](https://github.com/ligaopeng123-npm/web-components-repo/blob/main/packages/image-upload/__tests__/demo.png?raw=true)

## Usage

```typescript
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import RcImageUpload from '../src';

/*
type FileItem = {
	name: string,
	url: string,
}
// 可配置参数
type RcImageUploadProps = {
    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[]; // 上传列表
    preventPreview?: boolean; // 阻止默认预览
    onPreview?: (e: FileItem) => void; // 预览事件
    onUploadChange?: (e: UploadEvent) => void; // 上传事件
    onAfterUpload?: (e: UploadEvent) => void; // 上传后事件
    onAfterDelete?: (e: UploadEvent) => void; // 删除后事件
};*/

const App = () => {
    const uploadChange = (e: any) => {
        console.log(e)
    }
    const onPreview = (e: FileItem)=> {
        console.log(e);
    }
    return (
        <RcImageUpload
                id={`test`} height={600} width={400} pictureHeight={64} pictureWidth={64}
                fileList={[]}
                maxCount={4}
				preventPreview={true}
                onPreview={onPreview}
                onUploadChange={uploadChange}
                onAfterUpload={uploadChange}
                onAfterDelete={uploadChange}
            />
    );
};

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

```
npm package: @gaopeng123/rc-loading
Description: loading
Author: ligaopeng123
Latest version: 1.3.7-alpha.1

# RcLoading

`进度loading`[在线demo](https://ligaopeng123-npm.github.io/web-components-repo/?path=/docs/example-rcloading--props)

## 参数

```tsx
// --loading-main-color  css变量 定义颜色
export interface RcLoadingProps {
    loading?: boolean; // 是否开启
    duration?: number; // 默认 60000ms
}
```

## demo

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

const App = () => {
    const [loading, setLoading] = useState(false);
    return (
        <div>
            <button onClick={()=> setLoading(!loading)}>loading</button>
            <RcLoading loading={loading} type={1}>
                <div style={{width: 500, height: 700}}>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                </div>
            </RcLoading>
        
        		<RcLoading1 loading={loading} type={1}>
                <div style={{width: 500, height: 700}}>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                </div>
            </RcLoading1>
        </div>
    );
};

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

## RcSuperLoading

`参数`

```typescript
export type SingleLoadingStep = {
    label: string;
    step?: number;
}
export type RcLoadingProps = {
    stepList?: Array<SingleLoadingStep>, // 进度自定义
    title?: string | ReactNode; // 正在查询
    subTitle?: string | ReactNode; // 查询进度
    onStepChange?: (v: SingleLoadingStep)=> void; // 是否开启
    loading?: boolean; // 是否开启
    duration?: number; // 默认 60000ms
    style?: React.CSSProperties;
    className?: string | undefined;
    wrapperClassName?: string;
}
```

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

const App = () => {
    const [loading, setLoading] = useState(false);
    return (
        <div>
            <button onClick={()=> setLoading(!loading)}>loading</button>
            <RcSuperLoading loading={loading} duration={20000}>
                <div style={{width: 500, height: 700}}>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                    <div>1212</div>
                </div>
            </RcSuperLoading>
        </div>
    );
};

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