open-index/open-npm huggingface dataset:
npm package: @portalx/cli
Description: Portalx Cli 配合 `create-portalx` 使用
Latest version: 0.2.14

# @portalx/cli

Portalx Cli 配合 `create-portalx` 使用   

`create-portalx` 初始化模版会新增 `@portalx/cli` 依赖

新增 package.json 脚本

```json 
{
  "scripts": {
    "updatePortalx": "portalx update",
  },
}
```

新增配置文件 `portalx-repository.ts`

## Usage

`pnpm run updatePortalx`
npm package: @portalx/components
Description: # 1. 表单项组件
Latest version: 0.0.52

# <center>@portalx/components 说明文档</center>

# 1. 表单项组件

通用属性

```ts
type IFormItemCommonAttr<T = any> = {
  className?: string;
  style?: CSSProperties;
  placeholder?: string;
  value?: T;
  onChange?: (value: T) => void;
  onFocus?: (value: T) => void;
  onBlur?: (value: T) => void;
};
```

## 1.1 UserSelector

用户选择器，可以进行查询并选择当前系统下的用户，支持多选。

```ts
// 用户列表查询参数
type IFilterAttr = {
  roleId: number; // 从属角色id
  complement?: boolean; // 是否取补集
};

type IUserSelectorProps = IFormItemCommonAttr<IUserSelectAttr | Array<IUserSelectAttr>> & {
  multiple?: boolean; // 是否是多选
  allowClear?: boolean; // 是否可清空，默认可清空
  showArrow?: boolean; // 是否显示下拉箭头，默认显示
  showSearch?: boolean; // 是否可检索，默认可检索
  suffixIcon?: React.ReactNode; // 尾部图标
  filter?: IFilterAttr; // 筛选参数
};
```

# 2.反馈组件

## 2.1 UserSelectorDrawer

用户选择器的 drawer 部分，可以进行查询并选择当前系统下的用户，支持多选。

```ts
type IUserSelectDrawerProps = {
  title: string; // 标题
  visible: boolean; // drawer是否显示
  multiple?: boolean; // 是否多选
  width?: string | number; // drawer宽度
  selectedUsers?: Array<IUserSelectAttr>; // 已选中的key
  onConfirm: (val: Array<IUserSelectAttr>) => void; // 确认按钮事件
  onCancel: () => void; // 取消按钮事件
};
```
npm package: @portalx/foundation
Description: 通用核心包
Author: liu.haizhao2@iwhalecloud.com
Latest version: 0.0.52

# <center>foundation</center>

## 1. 类

### 1.1 GraphqlClient

- 实例化

```ts
const graphqlIns = new GraphqlClient({
  url: GRAPHQL_ENDPOINT, // 默认的graphql请求的url
  headers: {
    'X-Requested-With': 'XMLHttpRequest', // 告知后端是ajax请求
  },
});
```

- 方法
  - excute
  ```js
  graphqlIns.exc(
    {
      query: GraphqlCmd.queryListWithStr(colListStr, formCode), // graphql的请求字符串
      variables: {
        limit: 10,
        offset: 0,
        where: {},
        orderBy: {},
      }, // 请求字符串中的变量对象
      controlId: '0',
    },
    {
      url: `${GRAPHQL_ENDPOINT}/views/${searchParams.viewId}`, // 修改了默认的url
    }
  );
  ```

## 2. 函数

### 2.1 createSignature

根据传入的参数，返回调用`ajax`时，需要使用的签名对象

- 使用

```ts
createSignature({
  url: 'xxx', // 必填；可以是带http、带实例名的全量url；也可以是不带http,但是带实例名的url；也可以是什么都不带的url；头部的 / 内部做了兼容
  // 非必填；url实例名，开头可以不带 /
  // 可以使用正则表达式
  baseUrl: '/xxx/xxx',
  params: { a: 1, b: '2', c: true, d: [{ d1: [1, 2, 3] }, { d1: [2, 3, 4] }] }, // 非必填；url请求参数，可以一并在path中传入；可以为序列化后的string，也可以是对象
  method: 'post', // 非必填；请求类型，默认为get
  data: {
    a: 1,
    b: '2',
    c: true,
  }, // 非必填；当前请求的data参数，一般在post请求中
  salt: '123', // 必填；盐值
  timeDiff: 20, // 必填；服务器比浏览器快多少（毫秒数），慢就是负数。一般是登录时就计算好
  token: 'token111', // 必填； token值
});
```

### 2.2 excPromise

优雅的对 promise 请求进行 trycatch 操作。
若 promise 执行异常，则 promiseErr 有值，promiseRes 无有效值；
若 promise 执行正常，则 promiseErr 无值，promiseRes 有有效值。

- 使用

```ts
const [promiseErr, promiseRes] = await excPromise(PromiseFunc);
if (promiseErr) {
  // 错误逻辑
} else {
  // 正常逻辑
}
```

### 2.3 getCookie

获取对应 name 的 cookie 值；有则返回转码后的值；没有则返回 null

- 使用

```ts
const cookieVal = getCookie('name');
```

### 2.4 setCookie

设置修改 cookie

- 使用

```ts
setCookie({
  name: 'name',
  value: 'value',
  expiredays: 1, // 非必填；过期时间，单位为天
  path: '/', // 非必填；路径
  domain: 'localhost', // 非必填；域名
});
```

### 2.5 delCookie

删除对应的 cookie

- 使用

```ts
delCookie('name');
```

### 2.6 delAllCookie

删除所有 cookie

- 使用

```ts
delAllCookie();
```

### 2.7 base64ToBlob

base64 转 blob

- 使用

```ts
const blob = base64ToBlob(base64Str);
```

### 2.8 base64ToFile

base64 转 file

- 使用

```ts
const file = base64ToFile(base64Str, 'fileName');
```

### 2.9 copyToClipboard

复制到剪贴板

- 使用

```ts
copyToClipboard('内容');
```

### 2.10 getValueType

获取对象类型，只是将 `Object.prototype.toString.call` 返回的第二个参数返回

- 使用

```ts
const type = getValueType(value);
```

## 3. hooks

### 3.1 useGetDateFormat

通用获取当前日期的显示内容 hooks

- 使用

```ts
const { formatter } = useGetDateFormat({
  picker, // 日期模式
  savedFormat, // 日期存储的格式
});
```
npm package: @portalx/request
Description: ## 准备
Latest version: 0.0.1

# @portalx/request

## 准备

安装 `@fishx/i18n@1.0.7` 和 `antd@4.24.8`

## 使用

和 `axios` 一致
### GET

```js
import { request } from '@portalx/request';

export async function getAllUser() {
  return request('/users');
}

export async function getUser(userId: number) {
  return request(`/user/${userId}`);
}
```

### POST
```js
export async function editUser(userId: number, params: any) {
  return request(`/user/${userId}`, {
    method: 'POST',
    data: params,
    // 设置headers
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, 
  });
}
```

### PATCH
```js
export async function changeUserInfo(params: any) {
  return request('/users/info', {
    method: 'PATCH',
    data: params,
  });
}
```

### DELETE
```js
export async function deleteUser(userId: number) {
  return request(`/user/${userId}`, {
    method: 'DELETE',
});
```

### interface
  
```js
// 预期的通用返回结构体
export interface ICommonRes<T = any> {
  success: boolean;
  data: T;
  stack?: string;
  message?: string;
  code?: string;
  resultCode?: string;
  resultObject?: object;
  resultMsg?: string;
}
```

```js
// 通用失败返回体
export interface IErrorRes {
  code?: string;
  message?: string;
  [props: string]: any;
}
```

## 其他

设置登录重定向路由前缀 `window.portalxWebRoot` 默认 `/portal`

设置请求前缀 `window.portalxRequestPrefix` 默认 `/portal/api`
npm package: @portalx/sdk
Description: PortalX SDK
Latest version: 0.0.52

# <center>foundation</center>

## 1. 类

### 1.1 GraphqlClient

- 实例化

```ts
const graphqlIns = new GraphqlClient({
  url: GRAPHQL_ENDPOINT, // 默认的graphql请求的url
  headers: {
    'X-Requested-With': 'XMLHttpRequest', // 告知后端是ajax请求
  },
});
```

- 方法
  - excute
  ```js
  graphqlIns.exc(
    {
      query: GraphqlCmd.queryListWithStr(colListStr, formCode), // graphql的请求字符串
      variables: {
        limit: 10,
        offset: 0,
        where: {},
        orderBy: {},
      }, // 请求字符串中的变量对象
      controlId: '0',
    },
    {
      url: `${GRAPHQL_ENDPOINT}/views/${searchParams.viewId}`, // 修改了默认的url
    }
  );
  ```

## 2. 函数

### 2.1 createSignature

根据传入的参数，返回调用`ajax`时，需要使用的签名对象

- 使用

```ts
createSignature({
  url: 'xxx', // 必填；可以是带http、带实例名的全量url；也可以是不带http,但是带实例名的url；也可以是什么都不带的url；头部的 / 内部做了兼容
  // 非必填；url实例名，开头可以不带 /
  // 可以使用正则表达式
  baseUrl: '/xxx/xxx',
  params: { a: 1, b: '2', c: true, d: [{ d1: [1, 2, 3] }, { d1: [2, 3, 4] }] }, // 非必填；url请求参数，可以一并在path中传入；可以为序列化后的string，也可以是对象
  method: 'post', // 非必填；请求类型，默认为get
  data: {
    a: 1,
    b: '2',
    c: true,
  }, // 非必填；当前请求的data参数，一般在post请求中
  salt: '123', // 必填；盐值
  timeDiff: 20, // 必填；服务器比浏览器快多少（毫秒数），慢就是负数。一般是登录时就计算好
  token: 'token111', // 必填； token值
});
```

### 2.2 excPromise

优雅的对 promise 请求进行 trycatch 操作。
若 promise 执行异常，则 promiseErr 有值，promiseRes 无有效值；
若 promise 执行正常，则 promiseErr 无值，promiseRes 有有效值。

- 使用

```ts
const [promiseErr, promiseRes] = await excPromise(PromiseFunc);
if (promiseErr) {
  // 错误逻辑
} else {
  // 正常逻辑
}
```

### 2.3 getCookie

获取对应 name 的 cookie 值；有则返回转码后的值；没有则返回 null

- 使用

```ts
const cookieVal = getCookie('name');
```

### 2.4 setCookie

设置修改 cookie

- 使用

```ts
setCookie({
  name: 'name',
  value: 'value',
  expiredays: 1, // 非必填；过期时间，单位为天
  path: '/', // 非必填；路径
  domain: 'localhost', // 非必填；域名
});
```

### 2.5 delCookie

删除对应的 cookie

- 使用

```ts
delCookie('name');
```

### 2.6 delAllCookie

删除所有 cookie

- 使用

```ts
delAllCookie();
```

### 2.7 base64ToBlob

base64 转 blob

- 使用

```ts
const blob = base64ToBlob(base64Str);
```

### 2.8 base64ToFile

base64 转 file

- 使用

```ts
const file = base64ToFile(base64Str, 'fileName');
```

### 2.9 copyToClipboard

复制到剪贴板

- 使用

```ts
copyToClipboard('内容');
```

### 2.10 getValueType

获取对象类型，只是将 `Object.prototype.toString.call` 返回的第二个参数返回

- 使用

```ts
const type = getValueType(value);
```

## 3. hooks

### 3.1 useGetDateFormat

通用获取当前日期的显示内容 hooks

- 使用

```ts
const { formatter } = useGetDateFormat({
  picker, // 日期模式
  savedFormat, // 日期存储的格式
});
```