@bud-fe/react-pc-ui

@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';