# @alicloud/console-components 中文文档

规范地址：https://npmcn.com/package/%40alicloud/console-components/

版本：2\.4\.3
npm 元数据更新时间：2026-05-29T03:48:09.548Z
中文译文更新时间：2026-11-06T07:26:46.439Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40alicloud/console-components
原文对照：https://npmcn.com/package/%40alicloud/console-components/?lang=original
源码仓库：https://gitlab.alibaba-inc.com/xconsole/console-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：25.8 MB，1916 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：8 个
- peer 依赖：moment ^2\.29\.4，prop-types \>=15，react \>=16\.8\.0，react-dom \>=16\.8\.0
- 首次发布：2019-11-08T08:11:14.943Z
- 最新版本发布：2026-05-29T03:48:09.354Z
- 近 30 天下载量：4174（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：326（近 12 个月 4 个）

## 中文简介

阿里巴巴云反应组件

## 安装

```sh
npm install @alicloud/console-components
```

也可以使用：`pnpm add @alicloud/console-components`、`yarn add @alicloud/console-components`、`bun add @alicloud/console-components`

## README

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

## 常见问题

### @alicloud/console-components 是什么？

阿里巴巴云反应组件

### 如何安装 @alicloud/console-components？

在项目目录运行 npm install @alicloud/console-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：moment（^2\.29\.4）、prop-types（\>=15）、react（\>=16\.8\.0）、react-dom（\>=16\.8\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @alicloud/console-components 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @alicloud/console-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @alicloud/console-components 可以商用吗？

@alicloud/console-components 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @alicloud/console-components 的下载量有多少？

根据 npm 官方下载统计，@alicloud/console-components 在 2026/10/06 – 2026/11/04 这 30 天内被下载 4,174 次，日均约 139 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @alicloud/console-components 还在维护吗？

最新版本 2\.4\.3 发布于 2026/05/29（5 个月前）；至今共发布 326 个版本，其中过去 12 个月发布了 4 个；首次发布于 2019/11/08。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。