@alicloud/console-components/README.md

Alibaba Cloud React Components

# @alicloud/console-components

`console-components` 是针对 **阿里云控制台场景** 的 React 组件库，基于 [Alibaba Fusion](https://github.com/alibaba-fusion/next) 组件库实现。由于 Fusion 配套的 [DSM](https://done.alibaba-inc.com/dsm/79480) 系统无法做到对组件的完全样式自定义，所以需要通过属性、样式的覆盖来实现一些设计规范。

## 主要内容

### 主题 css var token

[@ali/design-token-xconsole](https://anpm.alibaba-inc.com/package/@ali/design-token-xconsole)

### 和 Fusion API 的差异
- Balloon
  - 默认使用 `v2` 版本
  - 修改 `animation` 属性默认值为 `{ in: 'fadeIn', out: 'fadeOut' }`
- Balloon.Tooltip
  - 默认使用 `v2` 版本
  - 修改 `delay` 属性默认值为 `150`
  - 修改 `popupProps.animation` 属性默认值为 `{ in: 'fadeIn', out: 'fadeOut' }`
- Button
  - 对只包含一个 `Icon` 的 `Button` 样式做了特殊处理
- Card
  - 覆盖了部分样式
  - 增加了以下子组件，由于历史依赖关系，暂时保留，但不推荐使用
    - Card.DropdownActions
    - Card.CollapsableHead
    - Card.CollapsableTail
- CascaderSelect
  - 修改 `popupProps.align` 属性默认值为 `tl bl`
  - 修改 `popupProps.offset` 属性默认值为 `[0, 4]`
- Collapse
  - 新增 `type`属性, 不同值对应不同的面板类型
    - `default` - 默认样式
    - `card` - 卡片样式
- DatePicker
  - 修改 `format` 属性默认值为 `moment().localeData().longDateFormat('ll')`
- Dialog
  - 新增 `size` 属性，不同 `size` 会设置不同 `style.width` 默认值
    - `mini` - 400px
    - `small` - 600px
    - `medium` - 800px
    - `large` - 1200px
  - 修改 `shouldUpdatePosition` 属性默认值为 `true`
- Drawer
  - 覆盖了部分属性默认值
- Form
  - 修改 `labelTextAlign` 属性默认值为 `left`
- Icon
  - 无改动，但建议替换为 `@ali/xconsole-icons`
- MenuButton
  - 修改 `popupProps.align` 属性默认值为 `tl bl`
  - 修改 `popupProps.offset` 属性默认值为 `[0, 4]`
- Nav
  - 当 `direction` 为 `ver` `时，activeDirection` 默认值为 `right`
- Pagination
  - 修改 `shape` 属性默认值为 `normal`
  - 修改 `pageSizePosition` 属性默认值为 `end`
- Range
  - 修改 `marksPosition` 属性默认值为 `below`
- Rating
  - 修改 `allowClear` 属性默认值为 `true`
- Search
  - 覆盖了 `filterProps` 属性默认值
    - 修改 `popupProps.align` 属性默认值为 `tl bl`
    - 修改 `popupProps.offset` 属性默认值为 `[0, 4]`
- Select
  - 修改 `popupProps.align` 属性默认值为 `tl bl`
  - 修改 `popupProps.offset` 属性默认值为 `[0, 4]`
  - 修改 `autoWidth` 属性默认值为 `false`
- SplitButton
  - 修改 `popupProps.align` 属性默认值为 `tl bl`
  - 修改 `popupProps.offset` 属性默认值为 `[0, 4]`
- Step
  - 修改 `stretch` 属性默认值为 `true`
- Table
  - 替换 Table 为 Table.StickyLock，两者 API 一致
  - 修改 `hasBorder` 属性默认值为 `false`
- Tag
  - 新增 `color` 值 `gray`
- Transfer
  - 修改 `searchProps.size` 属性默认值为 `small`

### 样式覆盖

参见设计规范

### 新增组件
- Skeleton
  - 使用了 react-loading-skeleton
- SlidePanel
  - 使用了 @alicloud/console-components-slide-panel

### 删除组件
- Tag.Colored
- Tag.ColoredGroup

## 设计规范

- [XConsole Design V2.1](https://done.alibaba-inc.com/file/npMfevdSB70K/yw8oAcRQRDILR3lJ/preview?m=SPECS&aid=1813B9EB-054D-4E6E-8436-FABD78D8F8CD&pageId=4CEE6D5B-7BED-4BDE-B30E-43F791261797)
- [XConsole Design V2.5](https://mgdone.alibaba-inc.com/file/131650098209618?page_id=1%3A147146)

## 使用组件库

```jsx
import { Button } from '@alicloud/console-components'; // 纯组件，无样式
// 如果你使用了 @ali/xconsole，可以替换为
// import { Button } from '@ali/xconsole/ui';
import '@alicloud/console-components/dist/xconsole.css'; // 样式文件

export { Button };
```

## 初始化工程

```bash
npm run boot
```

## DEV

### 同步主题

```bash
npm run update-theme
```

### 本地调试

```bash
npm run dev
```

### 发布

```bash
npm publish
```