@alicloud/console-components

console-components 是针对 阿里云控制台场景 的 React 组件库，基于 Alibaba Fusion 组件库实现。由于 Fusion 配套的 DSM 系统无法做到对组件的完全样式自定义，所以需要通过属性、样式的覆盖来实现一些设计规范。

主要内容

$3

@ali/design-token-xconsole

$3

- 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

$3

参见设计规范

$3

- Skeleton
- 使用了 react-loading-skeleton
- SlidePanel
- 使用了 @alicloud/console-components-slide-panel

$3

- Tag.Colored
- Tag.ColoredGroup

设计规范

- XConsole Design V2.1
- XConsole Design V2.5

使用组件库

``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

$3

`bash
npm run update-theme
`

$3

`bash
npm run dev
`

$3

`bash
npm publish
``