@bud-fe/react-pc-ui NPM

@bud-fe/react-pc-ui

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

📦 安装

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

然后执行

$ 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）：

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

2. 定制 antd 主题

由于PC 后台页面设计规范中的部分组件样式我们无法仅仅通过修改 antd 的 less 变量来实现，所以还需要在项目入口处引入对应 css 来覆盖 antd 组件默认的样式。

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

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

// 百威红
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
        },
      },
    ],
  ],
};

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

/* 百威红 */
@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: 对于目前百威基于飞冰的 console 端工程来说，不用考虑以下情况

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

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

bud-fe component react antd

@ant-design/pro-utils classnames lodash-es moment query-string react-error-boundary @bud-fe/utils

@infinitebrahmanuniverse/nolb-_bud @everything-registry/sub-chunk-146 @zalastax/nolb-_bud

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

6 months ago

6 months ago

5 months ago

5 months ago

5 months ago

6 months ago

5 months ago

4 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

5 months ago

7 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago