# @bud-fe/react-pc-ui

> 百威前端console组件库

Latest version **1.6.9** (published 2026-07-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bud-fe/react-pc-ui
pnpm add @bud-fe/react-pc-ui
yarn add @bud-fe/react-pc-ui
bun add @bud-fe/react-pc-ui
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.6.9 |
| Published | 2026-07-16 |
| First published | 2022-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Bud FE |
| Maintainers | l-z, luseng, macrodu, sandyliu, kinneyyan, wujd, hailongsun, angela.lu, jiangshengrong, wind226 |
| Keywords | bud-fe, component, react, antd |

## Links

- npm: https://www.npmjs.com/package/@bud-fe/react-pc-ui
- Repository: https://github.ab-inbev.cn/ab-inbev-apac/bud-fe-chest
- Homepage: https://react-pc-ui.pages.dev
- npm.io page: https://npm.io/package/@bud-fe/react-pc-ui

## Dependencies (8)

- [moment](https://npm.io/package/moment.md) ^2.29.3
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.3.2
- [query-string](https://npm.io/package/query-string.md) ^8.1.0
- [@bud-fe/utils](https://npm.io/package/@bud-fe/utils.md) ^0.5.9-alpha.0
- [react-error-boundary](https://npm.io/package/react-error-boundary.md) ^4.0.11
- [@ant-design/pro-utils](https://npm.io/package/@ant-design/pro-utils.md) ^1.45.3
- [react-antd-column-resize](https://npm.io/package/react-antd-column-resize.md) ^1.0.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.6.9 (latest) — 2026-07-16
- 1.6.9-alpha.1 (alpha) — 2026-01-23
- 1.6.9-alpha.0 — 2026-01-19
- 1.6.8 — 2025-10-21
- 1.6.7 — 2025-10-13
- 1.6.7-alpha.0 — 2025-10-10
- 1.6.6 — 2025-09-12
- 1.6.5 — 2025-09-10
- 1.6.4 — 2025-09-05
- 1.6.4-alpha.2 — 2025-09-04
- 1.6.4-alpha.1 — 2025-09-03
- 1.6.4-alpha.0 — 2025-09-03
- 1.6.3 — 2025-09-01
- 1.6.3-alpha.0 — 2025-09-01
- 1.6.2 — 2025-08-28
- … 231 more at https://npm.io/package/@bud-fe/react-pc-ui/versions

## README

# @bud-fe/react-pc-ui

[![NPM version][npm-image]][npm-url] [![doc][doc-image]][doc-url] [![github][github-image]][github-url] [![codecov][codecov-image]][codecov-url]

[npm-image]: https://img.shields.io/npm/v/@bud-fe/react-pc-ui
[npm-url]: https://www.npmjs.com/package/@bud-fe/react-pc-ui
[doc-image]: https://img.shields.io/badge/documentation-ce0e2d
[doc-url]: https://react-pc-ui.pages.dev/
[github-image]: https://img.shields.io/badge/GitHub-gray
[github-url]: https://github.ab-inbev.cn/ab-inbev-apac/bud-fe-chest/tree/main/packages/react-pc-ui
[codecov-image]: https://img.shields.io/badge/coverage-97.54%25%20-green
[codecov-url]: coverage_20231019.png

基于 `Ant Design` 的百威前端 `React` 组件库

---

### 📦 安装

先确保项目已安装 `antd@^4.0.0` 、 `@ant-design/pro-form@^1.52.5` 、 `ahooks@^3.1.3`

然后执行

```bash
$ pnpm add @bud-fe/react-pc-ui
# or
$ npm i --save @bud-fe/react-pc-ui
# or
$ yarn add @bud-fe/react-pc-ui
```

### 🔨 使用

#### 1. 引入组件

直接引入组件即可，组件库会自动为你加载 css 样式文件（since `v0.3.1`）：

```typescript
import { BfFormTable } from '@bud-fe/react-pc-ui';
```

#### 2. 定制 antd 主题

由于[PC 后台页面设计规范](https://lanhuapp.com/web/#/item/project/stage?tid=4bc4afd0-a87f-4cdb-9e70-ac30a0685c79&pid=59ebc920-fee7-4b9b-b2ef-cbfca850d5eb)中的部分组件样式我们无法**仅仅通过修改 antd 的 less 变量**来实现，所以还需要在项目入口处引入对应 css 来覆盖 antd 组件默认的样式。

目前提供了两种主题：百威红、品牌黄（since `v0.6.0`）

1. 引入修改 antd less 变量的对象。比如在 `ice` 项目中的 `build.config.js`：

```javascript
// 百威红
import themeConfig from '@bud-fe/react-pc-ui/es/styles/antd-theme-red';
// or
// 品牌黄
import themeConfig from '@bud-fe/react-pc-ui/es/styles/antd-theme-yellow';

export default {
  // ...
  plugins: [
    // ...
    [
      'build-plugin-antd',
      {
        // ...
        themeConfig: {
          ...themeConfig,
          // TODO: 其他需要修改的 antd less 变量。详见 https://4x.ant.design/docs/react/customize-theme-cn
        },
      },
    ],
  ],
};
```

2. 引入覆盖 antd 组件默认样式的 css。在全局样式文件中，比如 `ice` 项目中的 `global.less`：

```css
/* 百威红 */
@import '~@bud-fe/react-pc-ui/es/styles/antd-theme-red.css';
/* or */
/* 品牌黄 */
@import '~@bud-fe/react-pc-ui/es/styles/antd-theme-yellow.css';
```

#### 按需加载

组件库支持基于 Tree Shaking 的按需加载，大部分的构建工具（例如 webpack 4+ 和 rollup）都支持 Tree Shaking，所以绝大多数情况下你无需做额外的配置即可拥有较小的包体积。

##### 手动的按需加载

_PS: 对于目前百威基于[飞冰](https://ice.work/)的 console 端工程来说，不用考虑以下情况_

如果你的环境不支持 Tree Shaking，那么你可以手动引入部分组件：

```typescript
import BfFormTable from '@bud-fe/react-pc-ui/es/components/form-table';
```

---
_Source: https://npm.io/package/@bud-fe/react-pc-ui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._