Umi plugin for build-in ant-design-pro-layout .
为了进一步降低研发成本,我们尝试将布局通过 umi 插件的方式内置,只需通过简单的配置即可拥有 Ant Design Pro 风格的布局,包括导航以及侧边栏。从而做到用户无需关心布局。
使用此插件之前,您需要安装并启用
# or yarn
$ npm install @umijs/plugin-layout --save
配置 .umirc.js | config/config.js
启用 layout 插件以及依赖的相关插件,注意必须是以下顺序。
export default {
plugins: [
['@umijs/plugin-layout'],
['@umijs/plugin-initial-state'],
['@umijs/plugin-model'],
],
};
新建 src/app.js 文件并导出 getInitialState()
您可以异步或同步获取一些数据,然后在 getInitialState()函数中返回任何值,umi 将返回的值保存为初始状态(基本信息)。
约定: layout 插件导航头右上角的默认 UI 会获取初始状态中的用户名(name)以及 头像(avatar)字段,并展示。
// src/app.js
export async function getInitialState() {
const { userId, fole } = await getCurrentRole();
return {
name, // 默认 layout 导航右上角展示的用户名字段
avatar, // 默认 layout 导航右上角展示的用户头像字段
...
};
}
name
logo
locale
开启后:路由里配置的菜单名会被当作菜单名国际化的 key,插件会去 locales 文件中查找 'menu.[key]' 对应的文案。默认值为改 key。
关闭时:路由菜单中的菜单名直接为设置的 name 。
🌰:
// .umirc.js | config/config.js
export default {
plugins: [
['@umijs/plugin-layout',{
name: '服务网格';
locale: true;
}],
['@umijs/plugin-initial-state'],
['@umijs/plugin-model'],
],
};
logout
rightRender
Type: (initialState) => React.ReactNode
用于运行时自定义配置导航头右侧的展示内容。
默认情况下: 展示用户名 & 头像 & 退出登录
⚠️ 需搭配 @umijs/plugin-initial-state 一起使用。
一起使用时,会将 initialState 注入函数作为入参,也是默认主题的用户名等信息的数据来源。合适的数据格式为:
initialState: {name: string , userId: string, avatar?:url}
🌰:
// src/app.js
export const layout = {
logout: () => {}, // do something
rightRender:(initInfo)=> { return 'hahah'; },// return string || ReactNode;
};
childrenRender
Layout 插件会基于 umi 的配置式路由,封装了更多的配置项,支持更多配置式的能力。新增:
每一个 routeItem 都新增如下配置项:
比如:
//config/route.ts
export const routes = [
{
path: '/welcome',
component: 'IndexPage',
menu: {
name: '欢迎', // 兼容此写法
icon: 'testicon',
},
layout:{
hideNav: true,
},
access: 'canRead',
}
]
更多路由配置参考,可前往:https://github.com/umijs/plugin-layout/tree/master/test/routes
name
菜单上显示的名称,没有则不显示。
icon
菜单上显示的 Icon。
menu
SideMenu 相关配置。默认为 false,表示在菜单中隐藏此项包括子项。
menu 的可配置项包括:
name
当前菜单名,无默认值,必选,不填则表示不展示。
icon
当前菜单的左侧 icon,可选 antd 的 icon name 和 url,可选。
hideChildren
在菜单中隐藏他的子项,只展示自己。
flatMenu
默认为false 在菜单中只隐藏此项,子项往上提,仍旧展示。
layout
layout 的可配置项包括:
hideMenu
当前路由隐藏左侧菜单,默认不隐藏。
hideNav
当前路由隐藏导航头,默认不隐藏。
access
可选。
🌈当 layout 插件配合 access 插件使用时生效。
权限插件会将用户在这里配置的 access 字符串与当前用户所有权限做匹配,如果找到相同的项,并当该权限的值为 false,则当用户访问该路由时,默认展示 403 模版页面。
MIT