跳到主要内容

快速上手

@bud-fe/react-pc-ui 是一个基于 antd、@ant-design/pro-form、ahooks 的 React 组件库。

1. 安装​

先确保项目已安装 antd@^4.24.8.、@ant-design/pro-form@^2.6.0、ahooks@^3.7.5

然后执行

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

2. 使用​

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

百威红

品牌黄


  1. 引入修改 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
        },
      },
    ],
  ],
};
  1. 引入覆盖 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，所以绝大多数情况下你无需做额外的配置即可拥有较小的包体积。

手动的按需加载​

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

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

对于目前百威基于飞冰的 console 端工程来说，不用考虑此情况