ProLayout 布局组件

新版本的 ProLayout 主要是样式上的升级， API 变化不是很大的
最大改变在于样式的重写，减少了 less 的导入，所以样式覆盖的功能需要重新设置
prolayout API文档 https://procomponents.ant.design/components/layout#prolayout

# 最新版本 token
yarn add @ant-design/pro-layout@next

在线预览 ProLayout
https://pro-components-preview-pr-4734.surge.sh/components/layout

import { Avatar } from 'antd'
import { UserOutlined} from '@ant-design/icons'
import ProLayout, { PageContainer } from '@ant-design/pro-layout'
import { useParams } from '@umijs/max';
// App.propTypes = {};
function App(props) {
  const params = useParams()
  return (
        <ProLayout
            title="自定义布局"
            menuFooterRender={(props) => {
                return (
                    <a
                        style={{
                            lineHeight: '48rpx',
                            display: 'flex',
                            height: 48,
                            color: 'rgba(255, 255, 255, 0.65)',
                            alignItems: 'center',
                        }}
                        href="https://preview.pro.ant.design/dashboard/analysis"
                        target="_blank"
                        rel="noreferrer"
                    >
                        <img
                            alt="pro-logo"
                            src="https://procomponents.ant.design/favicon.ico"
                            style={{
                                width: 16,
                                height: 16,
                                margin: '0 16px',
                                marginRight: 10,
                            }}
                        />
                        {!props?.collapsed && 'Preview Pro'}
                    </a>
                )
            }}
            onMenuHeaderClick={(e) => console.log(e)}
            menuItemRender={(item, dom) => (
                <a
                    onClick={() => {
                        // setPathname(item.path || '/welcome')
                    }}
                >
                    {dom}
                </a>
            )}
            breadcrumbRender={(routes) => {
                // console.log('routes', routes)
                return [
                    { path: '/', breadcrumbName: '首页' },
                    { path: '/custom-dashboard', breadcrumbName: '自定义仪表盘' },
                    ...routes,
                ]
            }}
            // 右侧头像
            rightContentRender={() => (
                <div>
                    <Avatar shape="square" size="small" icon={<UserOutlined />} />
                </div>
            )}
        >
            <PageContainer>
        {props.children}
      </PageContainer>
        </ProLayout>
    )
}
export default App;

prolayout design token

https://github.com/ant-design/pro-components/issues/4741
ProLayout组件特性

1. css in js 的方案让我们可以动态的设置布局的主题
2. 使用 Token 快速的修改组件库的基础样式

Layout 的 token

默认的 token 部分来自于 antd，可能会有一些改动，以下是 layout 依赖的部分

1. Layout token
2. Sider Token
3. Header Token
4. PageContainer Token

layout token https://procomponents.ant.design/components/layout#token

const token = {
  header: {
    colorBgHeader: '#fff'
  },
  pageContainer: {
    marginBlockPageContainerContent: 24,
    marginInlinePageContainerContent: 24,
    colorBgPageContainer: 'rgba(255, 153, 0,0.19)'
  },
  sider: {},
}

1. rightContentRender修改为 avatarProps 和 actionsRender, 对头像模式做了默认抽象。
2. layout=sider 模式下，header 消失，只保留了侧边栏，增大可视面积。
3. layout=sider 模式下，header 消失后，右侧操作区域修改为左下角。
4. 增加了 appList，用于进行多站点之前的导航

pageChange

每次在切换页面的时候，都会先走一个 loading 页面
页面切换的时候，会有一个默认的 loading，可以修改一下

export default {
    dynamicImport: {
         loading: '@/pages/Loading/index',
     },
};