This app works best with JavaScript enabled.Ant Design ProEnglish预览v5···首页···文档···配置···Blog···入门文档总览开始使用新手需知基础使用启动项目文件夹结构标题和加载页页面开发新增页面图表布局数据管理简易数据流权限管理全局初始数据样式和资源使用 cssCSS Modules使用 less添加图片，字体和文件后端集成OpenAPI网络请求代理调试构建和部署构建部署质量LintTypeScript测试高级使用菜单的高级用法Pro 资产的使用环境变量国际化其它常见问题升级到 V5设计资源菜单的高级用法上次修改时间：2021-06-04 10:59:99
从服务端请求菜单
自定义高亮
根据路径更换布局
Pro 中默认会读取 config/config.tsx 中的 routes 配置作为 ProLayout 的菜单数据来生成菜单，并且配合 plugin-access 还可以很方便的进行菜单的权限管理。这个模式可以满足大部分需求，但是业务的复杂度总是在的，有些时候就需要一些高级的用法。
从服务端请求菜单
在某些情况下，写死的菜单数据可能满足不了我们的需求，Pro 也提供了相应的解决方案来进行远程的菜单数据请求。我们这里需要用到两个 API, menu.request 和 menu.params，request 需要传入一个 promise，它会自动托管 loading，params 修改会触发 request 方便重新请求菜单。
具体的代码实现如下，我们可以在 src/app.tsx 定义 layout 对象，并且导出。看起来可能是这样的：
// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
return {
menu: {
// 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
params: {
userId: initialState?.currentUser?.userid,
},
request: async (params, defaultMenuData) => {
// initialState.currentUser 中包含了所有用户信息
const menuData = await fetchMenuData();
return menuData;
},
},
};
};
以上就是一个远程请求菜单的案例，一般情况的菜单都是根据角色来实现的，我们可以配置 initialState 中的数据来向后端请求不同的数据。
如果你的数据希望通过 initialState 来保存，你可以在 request 中直接读取，这样每次 initialState 变化都会重新加载菜单。
// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = ({ initialState }) => {
return {
menu: {
// 每当 initialState?.currentUser?.userid 发生修改时重新执行 request
params: initialState,
request: async (params, defaultMenuData) => {
return initialState.menuData;
},
},
};
};
如果你希望可以手动的控制菜单刷新，可以使用 actionRef 功能。
import { createRef } from 'react';
export const layoutActionRef = createRef<{ reload: () => void }>();
// https://umijs.org/zh-CN/plugins/plugin-layout
export const layout: RunTimeLayoutConfig = () => {
return {
actionRef: layoutActionRef,
menu: {
request: async (params, defaultMenuData) => {
return initialState.menuData;
},
},
};
};
// 调用
request().then(() => {
layoutActionRef.current.reload();
});
自定义高亮
大部分时候菜单的高亮是可以通过父子关系来满足的，我们也推荐这种用法。假如有一个增删改查的页面，可以如下设置：
export default {
path: '/product',
name: '产品管理',
routes: [
{ path: '/product', redirect: 'product/list' },
path: '/product/list',
name: '产品列表',
},
path: '/product/new',
name: '新建产品',
},
path: '/product/:id',
hideInMenu: true,
name: '产品详情',
},
path: '/product/update/:id',
hideInMenu: true,
name: '修改产品',
},
],
};
这样的路由非常标准，可以被 ProLayout 完美的消费，高亮也能正确展示，但是不一定所有的菜单的都可以做的这么规范，ProLayout 也提供一个方式来重定向菜单的高亮。如果我们想要 /list/:id，高亮 /product可以这样配置。
export default [
path: '/product',
hideInMenu: true,
name: '产品管理',
},
path: '/list/:id',
hideInMenu: true,
name: '列表详情',
parentKeys: ['/product'],
},
];
这样就可以在/list/:id路径的时候，也高亮 /product, parentKeys 中的 key 一般是路径，如果不方便设置为路径的话可以在 菜单配置中增加 key 属性，Layout 会优先使用配置的 Key 属性。
根据路径更换布局
在一些复杂的路径中我们可以需要根据不同的 url 展示不同的界面，比如在新建的时候我们是不需要左侧菜单，如果用传统的方法实现需要根据 pathname 来进行不同的配置。实现成本比较高，为了降低实现成本，我们在 routers 配置中增加了一些约定。
export default [
path: '/product',
// 不展示菜单
menuRender: false,
name: '产品管理',
},
path: '/list/:id',
// 编辑的时候使用顶部菜单
layout: 'top',
name: '列表详情',
parentKeys: ['/product'],
},
];
这样在 /product 的时候不展示菜单，在 /list/:id 中的时候展示了顶部菜单。在菜单中可以配置以下的 api。
export interface Setting {
/**
* @name false 时不展示顶栏
*/
headerRender?: false;
/**
* @name false 时不展示页脚
*/
footerRender?: false;
/**
* @name false 时不展示菜单
*/
menuRender?: false;
/**
* @name false 时不展示菜单顶栏
*/
menuHeaderRender?: false;
/**
* @name 固定顶栏
**/
fixedHeader: boolean;
/**
* @name 固定菜单
*/
fixSiderbar: boolean;
/**
* @name theme for nav menu
* @name 导航菜单的主题
*/
navTheme: 'dark' | 'light' | 'realDark' | undefined;
/**
* @name nav menu position: `side` or `top`
* @name 导航菜单的位置
* @description side 为正常模式，top菜单显示在顶部，mix 两种兼有
*/
layout: 'side' | 'top' | 'mix';
/**
* @name 顶部导航的主题，mix 模式生效
*/
headerTheme: 'dark' | 'light';
}测试Pro 资产的使用相关资源Ant DesignAnt Design MobileNG-ZORRO - Ant Design of AngularNG-ZORRO-MOBILEAwesome Ant DesignKitchen - Sketch 工具集Ant Design Landing - Landing 模板集Scaffolds - 脚手架市场dva - 应用框架Ant Motion - 设计动效Axure Library - Axure 部件库Ant UX - 页面逻辑素材国内镜像站点 🇨🇳社区知乎专栏MediumTwitter体验科技专栏SEE Conf - 蚂蚁体验科技大会帮助GitHub常见问题在线讨论 (中文)讨论列表StackOverflowSegmentFault更多产品语雀 - 知识创作·协作平台AntV - 数据可视化Egg - 企业级 Node 开发框架蚂蚁体验云Made with ❤ byAFX