open-index/open-npm huggingface dataset:
npm package: @alicloud/console-base-intl-factory
Description: ConsoleBase Intl Factory
Author: Jianchun Wang
Latest version: 1.6.9

# @alicloud/console-base-intl-factory

`@alicloud/console-base-intl-factory-basic` 上的扩展，标准化带 HTML 及换行的输出样式。

这个包会额外要求引入 React，如果只是需要纯文本的国际化，请使用 `@alicloud/console-base-intl-factory-basic`。

## INSTALL

```shell
tnpm i @alicloud/console-base-intl-factory -S
```

## API

```typescript
export default (messagesMap: Record<string, Record<string, string>>, options?: IntlFactoryOptions) => <V extends {} = {}, T = string>(id: string, values?: V, instructionsExtra?: IntlInstructions) => T;

interface IntlFactoryOptions extends IntlFactoryOptionsBasic { // IntlFactoryOptionsBasic from @alicloud/console-base-intl-factory-basic
  instructionSeparator?: string;
  htmlInstruction?: string;
  linesInstruction?: string;
}

interface IntlInstructions {
  html?: boolean;
  lines?: boolean;
}
```

## USAGE

## 定义你自己的 `intl`

```typescript
// src/intl/index.ts
import intlFactory from '@alicloud/console-base-intl-factory';

import localeZhCN from './messages/zh-cn';
import localeEnUS from './messages/en-us';

export default intlFactory<typeof localeZhCN>({
  'zh-CN': localeZhCN, // 这里的 key 你可以写成 zhCN zh_cn 等，这里自会处理成 kebab-case 的 'zh-cn'
  'en-US': localeEnUS // 默认会把当前语言的 messages 和英文下做一个 merge，在当前语言下找不到的 message 会 fallback 为英文
}, {
  locale, // 可选，当前的 locale
  localeDefault, // 可选，默认 fallback 的 locale，默认英文
  instructionSeparator, // 可选，默认 '!'
  htmlInstruction, // 可选，默认 'html'
  linesInstruction, // 可选，默认 'lines'
});
```

这样，你的 `intl` 方法就有了根据 key 的后缀自动将文案渲染成带有样式的 HTML。

## 使用你的 intl 方法

```typescript
import intl from ':/intl';

intl('xxx');
intl('xxx_{id,name}!html', { // 将渲染成 HTML
  id,
  name
});
intl('xxx!html!lines'); // 将渲染成 HTML，且内部的换行均有意义（会转成 p、ul、ol 等）
```
npm package: @alicloud/console-base-rc-dialog
Description: ConsoleBase 组件 - Dialog
Author: Jianchun Wang
Latest version: 1.10.6

# @alicloud/console-base-rc-dialog

> might be the most simple-but-powerful react dialog for now...

## INSTALL

```shell
tnpm i @alicloud/console-base-rc-dialog -S
```

## APIs

## 作为组件使用（不太推荐）

```typescript jsx
import Dialog from '@alicloud/console-base-rc-dialog';

<Dialog {...props} />
```

## 作为 Promise 使用

```typescript
import {
  openIndirect,
  open,
  slide,
  alert,
  confirm,
  prompt
} from '@alicloud/console-base-rc-dialog';
```

TODO 这个文档需要好好写一下.. 例子和设计思想...

## 内容如何跟 Dialog 本身交互

### 使用 hook `useDialog`

```typescript
import {
  useDialog
} from '@alicloud/console-base-rc-dialog';

function SomeComponent() {
  const {
    close,
    lock,
    unlock
  } = useDialog();
}
```

### 使用 Context

```typescript
import {
  DialogContext
} from '@alicloud/console-base-rc-dialog';
```
npm package: @alicloud/console-base-rc-layout-side-panel
Description: ConsoleBase 组件 - 框架布局 - 侧边栏
Author: Jianchun Wang
Latest version: 1.3.1
Deprecated: use @alicloud/console-base-rc-side-panel

# @alicloud/console-base-rc-layout-side-panel

类似 Gmail 的 SidePanel。
npm package: @alicloud/console-base-rc-messenger-region
Description: ConsoleBase 组件 - 对 region messenger 的组件化封装，提升开发体验
Author: Jianchun Wang
Latest version: 1.5.12

# @alicloud/console-base-rc-messenger-region

ConsoleBase 组件 - 对 region messenger 的组件化封装，提升开发体验

让控制台应用项操作本地组件一样，控制顶栏中的全局地域选择器组件。

## INSTALL

```shell
npm  i -S @alicloud/console-base-rc-messenger-region
```

## Usage

```typescript jsx
import React, {
  useState
} from 'react';

import MessengerRegion from '@alicloud/console-base-rc-messenger-region';

export default function MyMessengerRegion(): JSX.Element {
  // 默认 regionId 可以为空，也可以设置应用下支持的某个值
  // **注意**：
  // 
  // 1. 你也可以把值记录在应用的顶层 state 中，不一定需要 useState，但一定要有个地方记它
  // 2. 当路由中有 regionId 的话，需要设过来
  // 3. 这里只是一个例子，根据应用自己的需要修改
  const [stateRegionId, setStateRegionId] = useState<string>('');
  const handleRegionChange = useCallback(regionId => {
    setStateRegionId(regionId);
    // 这里写跳转路由逻辑
  }, []);
  
  return <MessengerRegion {...{
    // 数据
    regionId: stateRegionId, // string 「半」受控的 regionId，需要通过 onChange 进行回填
    // /**
    //  * 当前业务支持的 region 列表
    //  * - 如果不传入，表示由组件自行加载数据（极力不推荐）
    //  * - 如果传入，即使是一个空数组，表示由业务方自行控制自己的 region 列表（推荐）
    //  */
    // regions: [{ id, name }, ...],
    // resourceCount: { [regionId]: 123, ..}, // 设置对应资源数
    // /**
    //  * 不传 regions 的时候，组件会自行获取 region 列表，注意，组件只能获取到「通用」的 region 列表，它可能包含了
    //  * 当前产品不支持的 region。这种情况下，业务方可以通过 legacyRegionIds 来告知组件。
    //  *
    //  * 如何对支持或不支持的 region 做配置：
    //  *
    //  * 你可以对「所有」的 region 做完全定义，也可以通过通配符做增量或减量定义。
    //  *
    //  * - `*`，白名单：支持「所有」可以拿到的默认 region，它可以避免你「必须」写全所有的 region；
    //  * - `!eu-*` 黑名单：不支持「欧洲」的所有 region。
    //  *
    //  * 注意：
    //  * 1. 如果设置了黑名单，则命中黑名单的将不支持，且无法被白名单反转；
    //  * 2. 如果设置了白名单，则「只有」命中白名单的才会被支持。
    //  *
    //  * 所以，除非你明确知道要支持那几个 region，否则请在添加的白名单之前都加上 `*`，举例：
    //  * 
    //  * - ['cn-hangzhou', 'cn-beijing', 'cn-shanghai'] 仅支持这几个明确的 region
    //  * - ['*', 'cn-hangzhou-finance'] 支持所有的「通用」region，以及 `cn-hangzhou-finance`
    //  * - ['cn-*', '!cn-xx'] 支持所有的 cn region，但不包括 cn-xx
    //  */
    // legacyRegionIds, // string[]
    // 展示
    // visible, // boolean 是否可见，不传即为可见（因为既然你已经用了此组件）
    // disabled, // boolean 是否禁用，可在应用详情页上开启
    // global, // boolean 展示成「全球」
    // noGroup, // boolean 不对地域进行分组（除非必要，不推荐设置，开启此选项需报备）
    // 事件
    onChange: setStateRegionId // (regionId: string, regionName: string, correctedFrom?: string) => void
  }} />;
}
```

注意：

1. 确保你页面同时只能有一个该组件的实例，否则可能引起奇怪的现象
2. 如果你初始化了该组件，表示你需要全局 Region 切换，所以只要初始化，且 visible 不是 false，则顶栏 Region 将可见
3. 该组件被销毁的时候，顶栏组件会隐藏
npm package: @alicloud/console-base-rc-one-modal
Description: ConsoleBase 组件 - 专用于文档组件的可拖拽、带标签的容器
Author: Jianchun Wang
Latest version: 1.8.0
Deprecated: use  @alicloud/console-base-rc-micro-browser instead

# @alicloud/console-base-rc-one-modal

TODO
npm package: @alicloud/console-base-rc-pagination
Description: ConsoleBase 组件 - 分页
Author: Jianchun Wang
Latest version: 1.6.9

# @alicloud/console-base-rc-pagination

## Usage

```typescript tsx
import Pagination from '@alicloud/console-base-rc-pagination';

<Pagination {...{
  total,
  page,
  pageSize
}}>
```
npm package: @alicloud/console-components-info
Description: React component for Alibaba Cloud.
Author: csr632
Latest version: 2.0.2

# @alicloud/console-components-info

信息展示。专注于规范化的布局和排版。

## 基本用法

[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-info-docs&entryKey=basic/index)

如果 Info 的直接子节点不是 Title 组件或者 Content 组件，那么我们会自动用 Content 组件来包裹它：
[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-info-docs&entryKey=renderChildren/index)

## APIs

### Info

[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-info-docs&entryKey=types/IInfoProps)

### Info.Title

[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-info-docs&entryKey=types/ITitleProps)

### Info.Content

[$XView](https://xconsole.aliyun-inc.com/demo-playground?consoleOSId=console-components-info-docs&entryKey=types/IContentProps)
npm package: @alicloud/console-os-loader
Description: Console OS Loader
Latest version: 1.4.45

# Console OS Loader

An app bundle loader used by console os

## TODO

- [x] load single bundle
- [x] script load error handler
- [x] recursive load
- [x] load with deps
- [ ] combo load bundle

## How to use

```bash
tnpm i @alicloud/console-os-loader
```

```javascript
import { loadBundle } from '@alicloud/console-os-loader'

const vpc = await loadBundle({
  id: 'vpc',
  url: 'https://g.alicdn.com/aliyun-next/vpc/index.js'
})

```

## External library

``` javascript
import react from 'react'
import { loadBundle } from '@alicloud/console-os-loader'

const vpc = await loadBundle(
  {
    id: 'vpc',
    url: 'https://g.alicdn.com/aliyun-next/vpc/index.js'
    deps: {
      react,
    }
  }
)
```

## Build bundle

### Webpack

in you webpack.config.js

```javascript
const Chain = require('webpack-chain');
const merge = require('webpack-merge');
const { chainOsWebpack } = require('@alicloud/console-toolkit-plugin-os')

const chain = new Chain();
chainOsWebpack({ id: 'app-id' })(chain);
module.exports = merge(/*you webpack conf*/, chain.toConfig());
```

### Consol OS Toolkit
In OS, an app bundle is built by breezr, you can use @alicloud/console-toolkit-plugin-os to build your bundle

```javascript
/* breezr.config.js */

module.exports = {
  /*
   * other breezr config
   */
  plugins: [
    '@alicloud/console-toolkit-plugin-os'
  ]
}

```
npm package: @alicloud/console-radar-chart
Description: --- name: console-radar-chart zhName: 雷达图 ---
Latest version: 0.4.10-alpha.0

---
name: console-radar-chart
zhName: 雷达图
---

# 雷达图API

# 引入方式

```javascript
import { ConsoleRadarChart } from '@alicloud/console-chart';
```

# 示例 Demo

## 基本使用

[MDXInstruction:importDemo:Basic](./demo/Basic.tsx)

## 面积图

[MDXInstruction:importDemo:Area](./demo/Area.tsx)

## 多组数据

[MDXInstruction:importDemo:Multi](./demo/Multi.tsx)

## 自定义坐标轴

[MDXInstruction:importDemo:Axis](./demo/Axis.tsx)

# 配置 Config

## 通用配置
| 属性 | 说明 |
| --- | --- |
| padding | 配置绘图内边距 |
| xAxis | 配置x轴 |
| yAxis | 配置y轴 |
| legend | 配置图例 |
| guide | 配置辅助元素 |
| tooltip | 配置提示信息 |
| label | 配置图形文本 |
| size | 配置自定义大小 |
| style | 配置自定义样式 |

## 专属配置

### symbol: Boolean
是否展示数据点

### smooth: Boolean
显示成光滑曲线

### area: Boolean
是否显示面积雷达图

### stack: Boolean
是否显示堆栈图, 仅在`area=true`时生效

### radius: Number
设置极坐标系的半径，可控制显示图形的大小

## 数据列配置

| 属性 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| name | 数据列名称 | String | - | - |
| data | 数据 | - | - | - |
| color | 自定义当前数据列颜色 | String | 主题`color_24` | - |