Ant Design Pro(5)-3.UI配置

Ant Design Pro中的UI配置

UI配置

1.布局样式

layout 插件 与pro-layout 配置的配置形同。 推荐先使用 Pro 站点 的右侧抽屉来帮助你完成布局相关的整体风格、主题色、导航模式、内容区域宽度、固定Header、固定侧边菜单、色弱模式等配置选择。然后将拷贝的配置粘贴在 layout 配置中。

在config文件夹下的config.js中配置，模板工程把这块的配置放在了defaultSettings.ts文件中，然后再引入到了config.ts中。

defaultSettings.ts

import { Settings as LayoutSettings } from '@ant-design/pro-components';

/**
 * @name
 */
const Settings: LayoutSettings & {
  pwa?: boolean;
  logo?: string;
} = {
  navTheme: 'light',
  colorPrimary: '#1890ff',
  layout: 'mix',
  contentWidth: 'Fluid',
  fixedHeader: false,
  fixSiderbar: true,
  colorWeak: false,
  // 设置标题的 title
  title: 'Ant Design Pro',
  pwa: false,
  // 左上角logo
  logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
  iconfontUrl: '',
};

export default Settings;

config.ts

2.菜单展示

我们可以在 route 中进行 menu
相关配置，来决定当前路由是否会被渲染在菜单中。详细配置说明

• 当不需要在菜单中展示时，可以在路由上配置 hideInMenu 或者删除 menu 相关的配置；
• 当不需要展示 children 时，可以在路由上配置 hideChildrenInMenu；
• 当不需要展示自己，只展示 children，可以在路由上配置 flatMenu；
• 如果没有配置 menu，没有配置 name 的话，则该路由不会在侧边栏中出现。

// 自定义路由
  // {
  //   path: '/order',
  //   name: 'order',
  //   icon: 'smile',
  //   component: './Order',
  // },
  {
    path: '/order',
    component: './Order',
    name: 'order',
    icon: 'smile',
    //隐藏菜单
    hideInMenu : true,
  },

效果展示

可以看到order菜单被隐藏了

3. 菜单国际化

通过 layout 配置的 locale 配置开启国际化。

开启后路由里配置的菜单名会被当作菜单名国际化的 key，插件会去 locales 文件中查找 menu.[key]对应的文案，默认值为该
key。

export default {
  'menu.order': '订单',
  }

配置位置如图所示：

4.菜单布局展示方式的修改

有时菜单可能需要于顶部显示，左侧显示，或者顶部显示一级菜单，左侧显示二三级菜单。我们可以修改 defaultSettings 中的
layout 的配置来决定菜单的展示方式。

1. top 菜单于顶部展示
2. side 菜单于左侧展示
3. mix 菜单于顶部和左侧混合展示，需要注意，当 mix 模式时，需要添加splitMenus: true，顶部才可以正确展示一级菜单

// config/defaultSettings.ts
export default {
  layout: 'mix',
  splitMenus: true,
};

同时，当使用 mix 模式后，点击一级菜单，并不会直接定位到第一个子级菜单页面，而是会呈现空白页面，需要于配置中设置一下 redirect
的地址

[
  {
    path: '/test/list',
    component: './test/list',
  },
  {
    path: '/test/list/testAdd',
    component: './test/list/testAdd',
  },
  {
    redirect: './test/list',
  },
];

5.关闭Layout插件

将 layout 配置设置成 false。

// config.ts
import { defineConfig } from 'umi';

export const config = defineConfig({
  layout: false,
});