umijs+ antd pro自定义headerRender

要自定义 Ant Design Pro 中的 headerRender，可以按照以下步骤进行：

1. 打开 src/layouts/BasicLayout.tsx 文件。

2. 在 render() 函数中找到 Header（头部）组件，将其替换为自定义的组件。可以使用 Ant Design 的 Layout.Header 组件或者其他 UI 库中的组件。

3. 在自定义 Header 组件中，可以通过 props 获取到当前用户信息、菜单信息等相关数据，并渲染出对应的 UI 界面。

以下是一个简单的示例代码：

import React from 'react';
import { Layout, Avatar, Menu, Dropdown } from 'antd'
import { UserOutlined } from '@ant-design/icons';
import { useModel } from 'umi';

const CustomHeader: React.FC = () => {
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  const handleMenuClick = (e: any) => {
    console.log(e)
  }

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1">个人中心</Menu.Item>
      <Menu.Item key="2">退出登录</Menu.Item>
    </Menu>
  )

  return (
    <Layout.Header>
      <div style={{ display: 'flex', alignItems: 'center' }}>
        <Avatar size="small" icon={<UserOutlined />} />
        <span style={{ marginLeft: '10px' }}>{currentUser?.name}</span>
        <Dropdown overlay={menu} trigger={['click']}>
          <a href="#" style={{ marginLeft: '10px' }}>操作</a>
        </Dropdown>
      </div>
    </Layout.Header>
  )
}

export default CustomHeader;

在这个示例中，我们通过 useModel 获取到了当前用户信息，然后在自定义的 Header 组件中渲染出了用户头像、名称和一个下拉菜单，通过点击下拉菜单中的选项可以触发对应的事件。你可以根据自己的需求来修改这个示例代码，实现自己想要的 Header UI 界面。