Ant Design Pro配置

不管是前端框架，还是后端框架，大多数情况下，我们只想修改一些基本配置后，就能快速根据自己的业务需求进行开发项目。这也是我们愿意使用一些优秀框架的原因。

在 Ant Design Pro 中，调整配置的地方不止一处，都有哪些呢？一起来看看吧。

1、defaultSetting.js 配置

位置：/config/defaultSetting.js

const proSettings = {
  navTheme: 'dark',
  // 拂晓蓝
  primaryColor: '#1890ff',
  layout: 'side',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  menu: {
    locale: true,
  },
  title: 'Ant Design Pro',
  pwa: false,
  iconfontUrl: '',
};
export default proSettings;

---

navTheme

导航的主题，可选值为：'light' | 'dark'，其效果分别为：

---

primaryColor

主题色，默认为：拂晓蓝（#1890ff），我们可以更换主题色，比如：（#722ED1），其效果图如下：

如果我们想更换其它颜色，请参考 Ant Design 色彩。传送门

---

layout

layout 的菜单模式，side：右侧导航，top：顶部导航，mix：混合导航，其效果图分别为：

---

contentWidth

layout 的内容模式，Fluid：自适应，Fixed：定宽 1200px，其效果图分别为：


注意：contentWidth 只有在 layout:"top" 或者 layout:"mix" 情况下生效

---

fixedHeader

是否固定 header 到顶部，默认为：false

---

fixSiderbar

是否固定导航，默认为：false

---

colorWeak

是否开启色弱模式，默认为：false。开启后，其效果图如下：

---

menu

menu 的配置项，默认 { locale:true }

---

title

系统的左上角 的 系统名称

---

pwa

是否开启 pwa 模式

---

iconfontUrl

使用 IconFont 的图标配置

除了上述默认配置，我们还可以添加更多。
比如，将侧边菜单宽度设置为：300px，即：siderWidth:300 传送门

如果我们想自定义动态配置时，defaultSetting 配置显然满足不了我们的需求了，那该去哪里配置呢？
此时，ProLayout 重型组件该出场了。

2、ProLayout 配置

位置：/src/layouts/BasicLayout.js

    <ProLayout
      logo={logo}
      {...props}
      {...settings}
      onCollapse={handleMenuCollapse}
      onMenuHeaderClick={() => history.push('/')}
      menuItemRender={(menuItemProps, defaultDom) => {
        if (
          menuItemProps.isUrl ||
          !menuItemProps.path ||
          location.pathname === menuItemProps.path
        ) {
          return defaultDom;
        }

        return <Link to={menuItemProps.path}>{defaultDom}</Link>;
      }}
      breadcrumbRender={(routers = []) => [
        {
          path: '/',
          breadcrumbName: '首页',
        },
        ...routers,
      ]}
      itemRender={(route, params, routes, paths) => {
        const first = routes.indexOf(route) === 0;
        return first ? (
          <Link to={paths.join('/')}>{route.breadcrumbName}</Link>
        ) : (
          <span>{route.breadcrumbName}</span>
        );
      }} 
      footerRender={() => {
        if (settings.footerRender || settings.footerRender === undefined) {
          return defaultFooterDom;
        }
        return null;
      }}
      menuDataRender={menuDataRender}
      rightContentRender={() => <RightContent />}
      postMenuData={(menuData) => {
        menuDataRef.current = menuData || [];
        return menuData || [];
      }}
      waterMarkProps={{
        content: 'Ant Design Pro',
        fontColor: 'rgba(24,144,255,0.15)',
      }}
    >
      <Authorized authority={authorized.authority} noMatch={noMatch}>
        {children}
      </Authorized>
    </ProLayout>

在这里，我们可以更改系统的标题、logo、菜单样式、布局等等。由于这里 ProLayout 为 Ant Design 的重型组件。我们会在后续章节有更详细的讲解。