React+Umi4页面布局导航菜单/面包屑的使用（从零快速搭建中后台系统保姆级记录教程（4））

前言

本篇文章将讲述Umi4的后台管理系统的常见布局内容以及Procomponents的使用，本篇文章是第四章，如果你有兴趣了解umi从零到一的实践，Umi快速搭建中后台系统保姆记录教程。

💕💕😍👍初心：希望帮助更多像我一样无助且迷茫，想提升自我的小伙伴，同时提升自己，分享自己的学习方法。

项目地址：github.com/XiaoRongwen...

中后台常见布局内容

Umi中大量封装了Procomponents大量的内容，我只需要在文件中配置，即可展示出样式。例如我们配置的app.tsx中的layout，就是Procomponents的ProLayout。

头像导航栏菜单

这一步做下图中右上角头像的下拉内容

我们找到根目录app.tsx下运行时的布局，代码大致内容给如下，用render函数去渲染一个下拉列表

附代码：

//运行时基本布局配置
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
  //initialState上面登录函数返回的信息
  const DropdownItems: MenuProps['items'] = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
    },
    {
      key: 'theam',
      icon: <BulbOutlined />,
      label: '切换主题',
    },
  ];
  const DropdownOnClick: MenuProps['onClick'] = ({ key }) => {
    message.info(`Click on item ${key}`);
  };
  
  return {
    logo: require('@/assets/imgs/logo.png'), //左上角Logo
    title: '橘子运营平台', //左上角Logo后面的名字
    menu: {
      locale: false, //菜单是否国际化
    },
    layout: 'mix', //菜单的方式，有mix,top,side三种，这里用mix
    splitMenus: true, // 这里用了mix才会生效,bia
    avatarProps: {
      src: initialState?.avatar || undefined, //右上角头像
      title: initialState?.name || '用户', //右上角名称
      size: 'small',
      render: (props, dom) => {
        return (
          <Dropdown
            menu={{
              items: DropdownItems,
              onClick: DropdownOnClick,
            }}
          >
            {dom}
          </Dropdown>
        );
      },
    },
    // actionsRender: () => [<InfoCircleFilled key="InfoCircleFilled" />],
    token: {
      //菜单的样式配置
      //   colorBgAppListIconHover: 'rgba(0,0,0,0.06)',
      //   colorTextAppListIconHover: 'rgba(255,255,255,0.95)',
      //   colorTextAppListIcon: 'rgba(255,255,255,0.85)',
      sider: {
        //侧边菜单的配置 ，这里具体看文档
        // colorBgCollapsedButton: '#fff',
        // colorTextCollapsedButtonHover: '#1677ff',
        // colorTextCollapsedButton: 'rgba(0,0,0,0.45)',
        // colorMenuBackground: '#fff',
        // colorBgMenuItemCollapsedElevated: 'rgba(0,0,0,0.85)',
        // colorMenuItemDivider: 'rgba(255,255,255,0.15)',
        // colorBgMenuItemHover: 'rgba(0,0,0,0.06)',
        // colorBgMenuItemSelected: 'rgba(0,0,0,0.05)',
        // colorTextMenuSelected: '#1677ff',
        // colorTextMenuItemHover: '#1677ff',
        // colorTextMenu: 'rgba(255,255,255,0.75)',
        // colorTextMenuSecondary: 'rgba(255,255,255,0.65)',
        // colorTextMenuTitle: 'rgba(255,255,255,0.95)',
        // colorTextMenuActive: '#1677ff',
        // colorTextSubMenuSelected: '#1677ff',
      },
    },
  };
};

页面布局/标题/

什么是面包屑？导航栏啊！怎么弄出来？不知道啊？查文档啊！！

这里简单解释一下面包屑是PageContainer - 页容器的功能，当然也是要去了解下这个组件。

我们查下文档先知道怎么用，然后跟着我一步一步来，你就会明白。 由此可知在路由配置可以让面包屑隐藏或者显示 那找到我们的路由文件config/router.ts文件，配置上 hideInBreadcrumb: false,

{
    name: '客户管理',
    path: '/customer-manage',
    component: './CustomerManage',
    hideInBreadcrumb: false,
    routes: [
      {
        name: ' 客户列表',
        icon: 'TeamOutlined',
        path: '/customer-manage/customer-list',
        component: './CustomerManage/CustomerList',
      },
      {
        name: ' 客户认证',
        icon: 'FileProtectOutlined',
        path: '/customer-manage/authentication',
        component: './CustomerManage/ClientAuthentication',
      },
    ],
  },

这个时候配置完了，但是还不能显示，为什么呢？经老夫查文档~面包屑是由这个组件来的，那就用上这个组件 procomponents.ant.design/components/...

我们复制他的代码到我们一个页面组件中，这里我拿客户列表的一个组件为例，把它这个代码复制到我们组件中

import { PageContainer } from '@ant-design/pro-components';
import { Button } from 'antd';

export default function CustomerList() {
  return (
    <PageContainer
      content="欢迎使用 ProLayout 组件"
      tabList={[
        {
          tab: '基本信息',
          key: 'base',
        },
        {
          tab: '详细信息',
          key: 'info',
        },
      ]}
      extra={[
        <Button key="3">操作</Button>,
        <Button key="2">操作</Button>,
        <Button key="1" type="primary">
          主操作
        </Button>,
      ]}
      footer={[
        <Button key="rest">重置</Button>,
        <Button key="submit" type="primary">
          提交
        </Button>,
      ]}
    >
      123
    </PageContainer>
  );
}

然后运行我们的代码，这个时候我们的面包屑就出来了

具体这个组件需要什么内容，那就是自学了，这里教是交不会的。

下期内容我们讲述权限菜单