open-index/open-npm huggingface dataset:
npm package: @pansy/react-split-screen
Description: <h1 align="center">@pansy/react-split-screen</h1>
Latest version: 1.2.1

<h1 align="center">@pansy/react-split-screen</h1>

分屏组件

## 🏗 安装

```sh
# npm 安装
npm install --save @pansy/react-split-screen

# yarn 安装
yarn add @pansy/react-split-screen
```

## 🔨 使用

```tsx
import React from 'react';
import SplitScreen from '@pansy/react-split-screen';

export default () => {
  return (
    <div style={{ height: 500 }}>
      <SplitScreen amount={4} />>
    </div>
  );
};
```
npm package: @pansy/react-watermark
Description: <p align="center">   <a href="https://ant.design">     <img width="200" src="https://cdn.jsdelivr.net/gh/wangxingkang/pictures@latest/imgs/20210427184129.svg">   </a> </p>
Latest version: 3.1.14

<p align="center">
  <a href="https://ant.design">
    <img width="200" src="https://cdn.jsdelivr.net/gh/wangxingkang/pictures@latest/imgs/20210427184129.svg">
  </a>
</p>

<h1 align="center">@pansy/react-watermark</h1>

## 🏗 安装

```sh
# npm install
$ npm install @pansy/react-watermark --save

# yarn install
$ yarn add @pansy/react-watermark
```

## 🔨 使用

```ts
import { Watermark } from '@pansy/react-watermark';

export default () = > {
  return () => {
    <Watermark {...opts}>
      // your code
    <Watermark>
  }
}
```
npm package: @pansy/replace-object-keys
Description: 替换对象键名，支持普通对象、对象数组以及树对象，支持过滤功能
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/replace-object-keys</h1>

> 替换对象键名，支持普通对象、对象数组以及树对象，支持过滤功能

## 📦 安装

```
// npm
npm install @pansy/replace-object-keys --save

// yarn
yarn add @pansy/replace-object-keys

```

## 🔨 使用

```
import replaceObjectKeys from '@pansy/replace-object-keys';

// 对象
const objData = { key: '1-1-1', type: 'api', name: 'name-111' };

const result = replaceObjectKey(objData, { name: 'title', key: 'value' });
// => { value: '1-1-1', title: 'name-111' }

// 数组对象
const arrData = [
  { key: '1-1-1', type: 'api', name: 'name-111' },
  { key: '1-1-2', type: 'api', name: 'name-112' },
  { key: '1-1-3', type: 'api', name: 'name-113' }
];

const result = replaceObjectKey(arrData, { name: 'title', key: 'value' });
// => [
// =>   { value: '1-1-1', title: 'name-111' },
// =>   { value: '1-1-2', title: 'name-112' },
// =>   { value: '1-1-3', title: 'name-113' }
// => [

// 树对象
const treeData = [
  { key: '0', type: 'route', name: 'name-0' },
  {
    key: '1',
    type: 'route',
    name: 'name-1',
    children: [
      {
        key: '1-0',
        type: 'route',
        name: 'name-10',
        children: [
          { key: '1-0-0', type: 'api', name: 'name-100' },
          { key: '1-0-1', type: 'api', name: 'name-101' }
        ]
      },
      {
        key: '1-1',
        type: 'route',
        name: 'name-11',
        children: [
          { key: '1-1-1', type: 'api', name: 'name-111' },
          { key: '1-1-2', type: 'api', name: 'name-112' },
          { key: '1-1-3', type: 'api', name: 'name-113' }
        ]
      }
    ]
  }
];

// 选出名称为 "name-113", "name-112" 的数据
const filterName = ['name-113', 'name-112'];

const result = replaceObjectKey(
  treeData,
  { name: 'title', key: ['value', 'key'], type: 'type' },
  {
    simplify: false,
    filter: (data) => {
      if (filterName.includes(data.title)) {
        return data;
      }
      return;
    }
  }
);
```

### 参数配置

| 参数    | 描述                              | 类型               | 默认值 |
| :------ | --------------------------------- | :----------------- | -----: |
| data    | 需要替换键值名的数据              | object \| object[] |        |
| options | 指定需要替换的键值名              | object             |        |
| config  | 配置转换后数据的格式,具体参考下表 | object             |        |

### config

| 参数        | 描述                                                          | 类型                                | 默认值   |
| ----------- | ------------------------------------------------------------- | ----------------------------------- | -------- |
| simplify    | 是否按替换配置返回数据，设置为 `false` 时同时返回未被替换的值 | boolean                             | true     |
| childrenKey | 当数据为 Tree 类型数据时， 指定其 children 的对应的键名       | string                              | children |
| filter      | 配置数据是否过滤                                              | function(data): object \| undefined |          |
npm package: @pansy/request
Description: 基于 Axios 的统一网络请求和错误处理方案
Author: wangxingkang
Latest version: 4.3.0

<h1 align="center">
  @pansy/request
</h1>

<div align="center">
基于 <a href="https://axios-http.com/zh">Axios</a> 的统一网络请求和错误处理方案。
</div>

<br />

[![docs by dumi](https://img.shields.io/badge/docs%20by-dumi-blue)](https://d.umijs.org/)
[![layout](https://img.shields.io/npm/dw/@pansy/request.svg)](https://www.npmjs.com/package/@pansy/request)
[![layout](https://img.shields.io/npm/v/@pansy/request.svg)](https://www.npmjs.com/package/@pansy/request)


## 🌈 前言

后端接口一般情况下区别请求是否成功主要为以下三种情况

1. 完全按照 Http 状态码，`[200 ~ 300)` 表示成功，其他表示请求失败
2. 始终保证请求返回 Http 状态码为 `200`，根据返回数据的中约定的 code 去判断请求是否成功
3. 两者混用

为了满足第二种情况，对 `axios` 进行了改造，发布了 `@pansy/axios`，主要区别如下：

添加 `validateDataStatus` 配置项，类型定义如下

```ts
{
  // 根据请求返回的数据判定该请求是否成功
  // data 为后端返回的数据
  validateDataStatus: (data?: any) => { success: boolean; message?: string };
}
```

一个请求的响应包含以下信息 [Axios 响应结构](https://axios-http.com/zh/docs/res_schema)

```ts
interface AxiosResponse<T = any, D = any> {
  data: T;
  status: number;
  statusText: string;
  headers: RawAxiosResponseHeaders | AxiosResponseHeaders;
  config: InternalAxiosRequestConfig<D>;
  request?: any;
}
```

后端返回的数据格式一般情况下都包含以下类似字段 

```ts
{
  /** 接口状态码 */
  code: number;
  /** 接口返回数据 */
  data: any;
  /** 接口报错信息 */
  message: string;
}
```

前端开发时，大多数情况下只需要消费上述数据格式中的 data，例如下面的示例中的 `{ name: 'test' }`

```ts
{
  code: 0;
  data: { name: 'test' },
  message: 'success'
}
```

## ✨ 特性

- 🌈 在 Axios 基础上进行了自己的封装，更加易用
- 🎨 支持根据接口返回数据判定请求是否成功
- 🛡 使用 TypeScript 开发，提供完整的类型定义文件

## 📦 安装

```sh
# npm install
npm install @pansy/request --save

# yarn install
yarn add @pansy/request

# pnpm install
pnpm i @pansy/request
```

## 🔨 示例

```ts
import { request, setConfig } from '@pansy/request';

// 需要初始化
setConfig({
  baseURL: 'https://api.pansy.com'
})

export async function fetchUser(params) {
  return request<{ name: string }>('/api/user', {
    method: 'GET',
    params,
  })
}
```

接口返回数据格式

```ts
enum ErrorShowType {
  /** 不做处理 */
  SILENT = 0,
  /** 全局提示 - 警告 */
  WARN_MESSAGE = 1,
  /** 全局提示 - 异常 */
  ERROR_MESSAGE = 2,
  /** 通知提醒 */
  NOTIFICATION = 3,
  /** 重定向 */
  REDIRECT = 9,
}

interface ResponseData<D = any> {
  /** 接口状态码 */
  code: number;
  /** 接口返回数据 */
  data: D,
  /** 接口报错信息 */
  message: string;
  /** 接口报错处理类型 */
  showType?: ErrorShowType;
  [key: string]: any;
}
```
npm package: @pansy/round
Description: 对传入的数字按给定的精度返回
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/round</h1>

> 对传入的数字按给定的精度返回

## 📦 安装

```
// npm
npm install @pansy/round --save

// yarn
yarn add @pansy/round

```

## 🔨 使用

```
import round from '@pansy/round';

round(1.1, 0)
// => 1
round(1.6, 0)
// => 2
```
npm package: @pansy/scrollbar-width
Description: 获取浏览器滚动条宽度
Latest version: 1.0.0

<h1 align="center">@pansy/scrollbar-width</h1>

<div align="center">
获取浏览器滚动条宽度
</div>

## 🏗 安装

```sh
# npm
npm i @pansy/scrollbar-width

# yarn
yarn add @pansy/scrollbar-width

# pnpm
pnpm i @pansy/scrollbar-width
```

## 使用

```ts
import { scrollbarWidth } from '@pansy/scrollbar-width';

scrollbarWidth();
```
npm package: @pansy/shared
Description: pansy shared utils
Latest version: 1.16.1

<h1 align="center">@pansy/shared</h1>

<div align="center">
一个面向业务的 JavaScript/TypeScript 实用程序库。
</div>

[![version](https://badgen.net/npm/v/@pansy/shared)](https://www.npmjs.com/package/@pansy/shared) [![GitHub Actions status](https://github.com/pansyjs/shared/workflows/CI/badge.svg)](https://github.com/pansyjs/shared)

## 🏗 安装

```sh
# npm
npm i @pansy/shared

# yarn
yarn add @pansy/shared

# pnpm
pnpm add @pansy/shared
```

## 使用

```ts
// 基础工具库
import { isBoolean, isFunction, isNumber, isUrl } from '@pansy/shared';

// React 工具库
import { getTargetElement } from '@pansy/shared/react';

// 类型 工具库
import { Fn } from '@pansy/shared/type';
```
npm package: @pansy/smart-captcha
Description: 阿里巴巴集团提供的一种智能验证码解决方案
Latest version: 3.3.0

<h1 align="center">
  @pansy/smart-captcha
</h1>

<div align="center">

阿里巴巴集团提供的一种智能验证码解决方案。

![coverage CI][coverage-ci]
![deploy CI][deploy-ci]
[![NPM version][image-1]][npm-url]
[![NPM downloads][image-2]][npm-url]
[![codecov][codecov-1]][codecov-2]
[![license][license-1]][npm-url]
[![issues](https://img.shields.io/github/issues/pansyjs/smart-captcha)](https://github.com/pansyjs/smart-captcha/issues)
[![Percentage of issues still open](http://isitmaintained.com/badge/open/pansyjs/smart-captcha.svg)](http://isitmaintained.com/project/pansyjs/smart-captcha 'Percentage of issues still open')
[![Average time to resolve an issue](http://isitmaintained.com/badge/resolution/pansyjs/smart-captcha.svg)](http://isitmaintained.com/project/pansyjs/smart-captcha 'Average time to resolve an issue')
[![dumi][dumi]][dumi-url]

</div>

## 📝 阿里文档

[文档](https://help.aliyun.com/document_detail/122733.html)

## 🏗 安装

```bash
# npm install
npm install @pansy/smart-captcha --save

# yarn install
yarn add @pansy/smart-captcha

# pnpm install
pnpm i @pansy/smart-captcha
```

## 🔨 使用

```tsx
import { SmartCaptcha } from '@pansy/smart-captcha';

export default () => {
  <SmartCaptcha />
}
```

## 注意：

在 [qiankun](https://qiankun.umijs.org/) 项目中 使用时由于沙盒的原因导致组件加载不出来，可通过 `excludeAssetFilter` 配置排除 `//g.alicdn.com/AWSC/AWSC/awsc.js`;

如果使用 [umi](https://umijs.org/zh-CN/plugins/plugin-qiankun) 只需要在基座项目里中的 `src/app.ts` 文件里添加如下代码即可

```ts
const cdnUrls =  [
  '//g.alicdn.com/AWSC/AWSC/awsc.js',
];

function isQuankuExclude(value: string) {
  let result = false;

  for (let i = 0; i < cdnUrls.length; i++) {
    if (value.includes(cdnUrls[i])) {
      result = true;
      break;
    }
  }

  return result;
}

export const qiankun = Promise.resolve().then(() => ({
  excludeAssetFilter: (assetUrl: string) => {
    return isQuankuExclude(assetUrl);
  }
}));
```

[image-1]: https://img.shields.io/npm/v/@pansy/smart-captcha.svg?style=flat
[image-2]: https://img.shields.io/npm/dw/@pansy/smart-captcha.svg?style=flat
[codecov-1]: https://codecov.io/github/pansyjs/smart-captcha/branch/master/graph/badge.svg?token=EKYDUW28H0
[codecov-2]: https://codecov.io/github/pansyjs/smart-captcha
[license-1]: https://badgen.net/npm/license/@pansy/smart-captcha
[npm-url]: https://www.npmjs.com/package/@pansy/smart-captcha
[issues-1]: https://www.npmjs.com/package/@pansy/smart-captcha

[dumi]: https://img.shields.io/badge/docs%20by-dumi-blue
[dumi-url]: https://d.umijs.org

[coverage-ci]: https://github.com/pansyjs/smart-captcha/workflows/Coverage/badge.svg
[deploy-ci]: https://github.com/pansyjs/smart-captcha/workflows/Deploy/badge.svg
npm package: @pansy/store
Description: 前端存储解决方案
Latest version: 1.1.0

<h1 align="center">
  @pansy/store
</h1>

## ✨ 特性

- 🌈 支持命名空间
- 📦 同时支持`localStorage`、`sessionStorage`、`cookie`，并提供一致性 API
- 🛡 使用 TypeScript 开发，提供完整的类型定义文件。

## 📦 安装

```sh
pnpm i @pansy/store
```

## 🔨 基本使用

```ts
import { Store } from '@pansy/store';

const store = new Store();

// 基本方法
store.setItem('foo', 'bar');
store.setItem('abc', 'xyz');

store.getItem('foo'); // return bar

store.removeItem('foo');

// 高级方法
store.check('local'); // 测试 localStorage 是否可用
```
## 🔨 高级使用

### Storages

```ts
import { Store } from '@pansy/store';

const store = new Store();

// 存储在 cookie 中
store.setItem('foo', 'bar', { 'storages': ['cookie'] });
// 存储在 localStorage 中
store.setItem('foo', 'bar', { 'storages': ['local'] });

// 首先尝试将其存储到 cookie 中，如果不能则存储到 localStorage 中
store.setItem('foo', 'bar', { 'storages': ['cookie', 'local'] });
```

### Namespaces

```ts
import { Store } from '@pansy/store';

const store = new Store();

// 设置到默认命名空间 
store.setItem('hello', 'world');
// 将数据存储在给定的命名空间下
store.setItem('hello', 42, { 'namespace': 'alt' });
basil.setItem('abc', 'def', { 'namespace': 'alt' });

store.getItem('hello'); // return 'world'
store.getItem('hello', { 'namespace': 'alt' }); // return 42
```

## 配置

```ts
{
  // 存储数据的命名空间
  // default: 'b45i1' 
  namespace: string;

  // 指定所有支持的存储和优先级顺序
  // default: ['local', 'cookie', 'session', 'memory']
  storages: ('local' | 'cookie' | 'session' | 'memory')[];

  // cookie 过期时间
  // default: 365
  expires: number;

  // 用于分隔命名空间和键名的值
  // default: '/'
  keyDelimiter: string;
}
```

## API
npm package: @pansy/url-utils
Description: url相关工具方法
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/url-utils</h1>

> url 相关工具方法

## 📦 安装

```
// npm
npm install @pansy/url-utils --save

// yarn
yarn add @pansy/url-utils

```

## 🔨 使用

```
import { urlToList } from '@pansy/url-utils';
```
npm package: @pansy/utility-regexps
Description: 实用正则表达式
Author: Pansy Team
Latest version: 0.7.2

<h1 align="center">@pansy/utility-regexps</h1>

> 常见正则表达式

## 📦 安装

```
// npm
npm install @pansy/utility-regexps --save

// yarn
yarn add @pansy/utility-regexps

```

## 🔨 使用

```
import { phoneRegexp } from '@pansy/utility-regexps';
```
npm package: @pansy/utility-types
Description: 实用的类型定义
Author: Pansy Team
Latest version: 0.5.0

<h1 align="center">@pansy/utility-types</h1>

> 一些类型定义

## 📦 安装

```
// npm
npm install @pansy/utility-types --save

// yarn
yarn add @pansy/utility-types

```

## 🔨 使用

```
import { AnyFunction } from '@pansy/utility-types';

const fun: AnyFunction = () => {};
```