配置开启。
为了进一步降低研发成本,我们尝试将布局通过 umi 插件的方式内置,只需通过简单的配置即可拥有 Ant Design 的 Layout,包括导航以及侧边栏。从而做到用户无需关心布局。
可以通过配置文件配置 layout
的主题等配置。
import { defineConfig } from 'umi';export const config = defineConfig({layout:{name: 'Ant Design',locale: true,}});
string
name
in package.json产品名,默认值为包名。
string
产品 Logo
string
pro
指定 Layout 主题,可选 pro
和 tech
(tech
仅在蚂蚁内部框架 Bigfish 中生效)。
boolean
false
是否开始国际化配置。开启后路由里配置的菜单名会被当作菜单名国际化的 key,插件会去 locales 文件中查找 menu.[key]
对应的文案,默认值为改 key。该功能需要配置 @umijs/plugin-locale
使用。
Layout 插件允许通过运行时的配置退出登陆、自定义 ErrorBoundary 等功能。
// src/app.jsexport const layout = {logout: () => {}, // do somethingrightRender:(initInfo)=> { return 'hahah'; },// return string || ReactNode;};
除了下面的插件支持的特有配置外,运行时配置支持所有的构建时配置并透传给 @ant-design/pro-layout
。
() => void
null
用于运行时配置默认 Layout 的 UI 中,点击退出登录的处理逻辑,默认不做处理。
注:默认在顶部右侧并不会显示退出按钮,需要在运行配置中配合
@umijs/plugin-intial-state
的getInitialState
返回一个对象,才可以显示
(initialState) => React.ReactNode
initialState
从 @umijs/plugin-initial-state
插件中获取,需要搭配一起使用。
(error: Error, info: any) => void;
发生错误后的回调(可做一些错误日志上报,打点等)。
(error: Error) => React.ReactElement<any>;
发生错误后展示的组件。
Layout 插件会基于 umi 的路由,封装了更多的配置项,支持更多配置式的能力。新增:
新增如下配置项:
示例如下:
//config/route.tsexport const routes: IBestAFSRoute[] = [{path: '/welcome',component: 'IndexPage',menu: {name: '欢迎', // 兼容此写法icon: 'testicon',},layout:{hideNav: true,},access: 'canRead',}]
string
菜单上显示的名称,没有则不显示。
string
菜单上显示的 Icon。
false
| IRouteMenuConfig
false
SideMenu 相关配置。默认为 false,表示在菜单中隐藏此项包括子项。
menu 的可配置项包括:
string
当前菜单名,无默认值,必选,不填则表示不展示。string
当前菜单的左侧 icon,可选 antd 的 icon name 和 url,可选。icon name 为 组件名小写后去掉
outlined
或者filled
或者twotone
,所得值。举例:<UserOutlined />
的 icon name 即:user
。
boolean
在菜单中隐藏他的子项,只展示自己。boolean
默认为false 在菜单中只隐藏此项,子项往上提,仍旧展示。Layout 相关配置。 默认为 false, 默认展示选择的 layout 主题。
layout 的可配置项包括:
boolean
false
当前路由隐藏左侧菜单,默认不隐藏。
boolean
false
当前路由隐藏导航头,默认不隐藏。
string
当 Layout 插件配合 @umijs/plugin-access
插件使用时生效。
权限插件会将用户在这里配置的 access 字符串与当前用户所有权限做匹配,如果找到相同的项,并当该权限的值为 false,则当用户访问该路由时,默认展示 403 页面。