🧐[问题]ProLayout菜单模式是side的时候，avatarProps、actionsRender如何渲染到右上角

[freesaber]

代码：

import {
  CrownOutlined,
  InfoCircleOutlined,
  MergeCellsOutlined,
  QuestionCircleOutlined,
  TabletOutlined,
  UserOutlined,
} from '@ant-design/icons';
import { PageContainer, ProCard, ProLayout, ProBreadcrumb } from '@ant-design/pro-components';
import { Button, Result } from 'antd';
import { useState } from 'react';
import type { ProSettings } from '@ant-design/pro-components';
import defaultProps from './_defaultProps';

export default () => {
  const settings: ProSettings | undefined = {
    fixSiderbar: true,
    layout: 'side',
    // splitMenus: true,
  };
  const [collapsed, setCollapsed] = useState(true);
  const [pathname, setPathname] = useState('/welcome');
  return (
      <ProLayout
        {...defaultProps}
        location={{
          pathname,
        }}
        fixSiderbar
        token={{
          sider: {
            colorMenuBackground: '#001529', // 设置侧边栏背景颜色
            colorTextMenuTitle: '#ffffff', // 设置侧边栏标题字体颜色
            colorMenuItemDivider: '#303030', // 设置menuItem分割线的颜色
            colorTextMenu: '#ffffff', // 设置menuItem的字体颜色
            colorTextMenuSecondary: '#ffffff', // 设置menu的二级字体颜色
            colorTextMenuSelected: 'rgba(255, 255, 255, 0.85)', // 设置menuItem的选中字体颜色
            colorTextMenuActive: 'rgba(255, 255, 255, 0.85)', // 设置menuItem hover的选中字体颜色
            colorTextMenuItemHover: 'rgba(255, 255, 255, 0.75)', // 设置menuItem的hover字体颜色
            colorBgMenuItemActive: 'rgba(255, 255, 255, 0.15)', // 设置menuItem的点击时背景颜色
            colorBgMenuItemHover: 'rgba(255, 255, 255, 0.1)', // 设置menuItem的hover背景颜色
            colorBgMenuItemSelected: 'rgba(255, 255, 255, 0.1)', // 设置menuItem的选中背景颜色
            colorBgMenuItemCollapsedElevated: '#001529', // 设置收起menuItem的弹出菜单背景颜色
            colorBgCollapsedButton: '#001529', // 设置展开收起按钮背景颜色
            colorTextCollapsedButton: '#ffffff', // 设置展开收起按钮字体颜色
            colorTextCollapsedButtonHover: 'rgba(255, 255, 255, 0.85)', // 设置展开收起按钮hover时字体颜色
          },
        }}
        // headerContentRender={() => <ProBreadcrumb />}
        // breadcrumbRender={(routers = []) => [
        //   ...routers,
        // ]}
        waterMarkProps={{
          content: 'Pro Layout',
        }}
        avatarProps={{
          icon: <UserOutlined />,
          size: 'small',
          title: '七妮妮',
        }}
        actionsRender={() => [
          <InfoCircleOutlined key="InfoCircleOutlined" />,
          <QuestionCircleOutlined key="QuestionCircleOutlined" />,
          <MergeCellsOutlined key="MergeCellsOutlined" />,
        ]}
        menuItemRender={(item, dom) => (
          <a
            onClick={() => {
              setPathname(item.path || '/welcome');
            }}
          >
            {dom}
          </a>
        )}
        {...settings}
      >
        <PageContainer>
          <ProCard
            style={{
              height: '120vh',
              minHeight: 600,
            }}
          >
            <div>Hello World</div>
          </ProCard>
        </PageContainer>
      </ProLayout>
  );
};

希望效果

[fnoopv]

layout设置为mix，或者PageContainer固定表头，然后放到extra

[freesaber]

@fnoopv 嗯，在PageContainer里面可以自定义

        <PageContainer

          pageHeaderRender={(props) => (
            <div style={{display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: '10px 24px'}}>
              <div>
                左侧
              </div>
              <ProBreadcrumb style={{width: '500px'}}/>
              <div>
              右侧
              </div>
            </div>
          )}
        >
          <ProCard
            style={{
              height: '120vh',
              minHeight: 600,
            }}
          >
            <div>Hello World</div>
          </ProCard>
        </PageContainer>