umi-plugin-menus
routes to menus
将 umi 生成的 routes 转换成 tree 结构 [menus|routes].json 数据，开发中可直接引入该文件来进行导航菜单的生成
PS: routes 更新时 [menus|routes].json 文件也会实时更新
Usage
Configure in .umirc.js And config/config.js,
.umirc.js
import { join } from 'path';
export default {
plugins: [
['umi-plugin-menus', {
build: join(__dirname, './src/routes.json'),
}],
],
}src/pages/first/index.js
/**
* title: 首页 // 菜单名称
* order: 1 // 菜单排序
* hideMenu: true // 隐藏菜单（菜单组件实现）
* hideChildMenu: true // 隐藏子菜单（菜单组件实现）
*/
import React from 'react';
export default function First(props){
return (<div>first page</div>)
};src/layouts/index.js
import React, {useState, useEffect} from 'react';
import {Layout, Menu} from 'antd';
import Link from 'umi/link';
import _get from 'lodash/get';
import _map from 'lodash/map';
import _find from 'lodash/find';
import _uniq from 'lodash/uniq';
import _concat from 'lodash/concat';
import _compact from 'lodash/compact';
import _split from 'lodash/split';
import _slice from 'lodash/slice';
import _toString from 'lodash/toString';
import _isArray from 'lodash/isArray';
import _isEmpty from 'lodash/isEmpty';
// 引入插件生成的数据
import routes from '../routes.json';
const {Content, Sider} = Layout;
const menus = _get(routes, [0, 'routes']);
/**
* 递归生成菜单
* @param {array} menus
* @param {object} [parent]
* @param {string|number} [parent.key]
* @param {array} stack
* @returns {Array}
*/
function recursiveMenus (menus, parent = {}, stack = []) {
const {key: parentKey = ''} = parent;
return _compact(_map(menus, (menu, key) => {
const {title, path, routes, hideMenu = false, hideMenuChild = false} = menu;
const k = `${parentKey? `${parentKey}-`: ''}${key}`;
stack.push({key: k, ...menu});
if (hideMenu) return undefined;
if (_isArray(routes) && !_isEmpty(routes) && !hideMenuChild) {
return (
<Menu.SubMenu key={k} title={title}>
{recursiveMenus(routes, {key: k}, stack)}
</Menu.SubMenu>
);
} else {
return (
<Menu.Item key={k}>
<Link to={path}>{title}</Link>
</Menu.Item>
);
}
}));
}
function BasicLayout(props) {
const [collapsed, setCollapsed] = useState(false);
const [openKeys, setOpenKeys] = useState([]);
const [selectedKeys, setSelectedKeys] = useState(['0']);
const [menuItems, setMenuItems] = useState([]);
const [menuItemsComponent, setMenuItemsComponent] = useState();
useEffect(() => {
const stack = [];
const menuItemsComponent = recursiveMenus(menus, {}, stack);
setMenuItems(stack);
setMenuItemsComponent(menuItemsComponent);
}, []);
useEffect(() => {
const key = _get(_find(menuItems, ({path, routes}) => !routes && path === props.location.pathname), ['key']);
if (key) {
const keys = _split(key, '-');
if (keys.length > 1) {
setOpenKeys(_uniq(_concat(_compact(_map(keys, (v, k) => {
const length = keys.length - 1;
if (k < length) return _slice(keys, 0, length - k).join('-');
})), openKeys)));
}
setSelectedKeys([_toString(key)]);
}
}, [props.location.pathname, JSON.stringify(menuItems)]);
return (
<Layout style={{height: '100vh'}}>
<Sider collapsible collapsed={collapsed} onCollapse={v => setCollapsed(v)}>
<Menu theme={'dark'} openKeys={openKeys} selectedKeys={selectedKeys} mode={'inline'} onOpenChange={setOpenKeys}>
{menuItemsComponent}
</Menu>
</Sider>
<Layout>
<Content>
<div style={{width: '100vw', height: '100vh'}}>
{props.children}
</div>
</Content>
</Layout>
</Layout>
);
}
export default BasicLayout;Options
declare enum OrderTypes {asc = 'asc', desc = 'desc'}
/**
* @param {string} [build='./menus.json'] - 导出的路径
* @param {string[]} [excludes=['exact','component','Routes']] - 返回忽略字段
* @param {[[string], [string]]} [order=[['order'], ['asc']]] - 根据字段排序 参考 lodash/orderBy
*/
export interface options {
build?: string,
excludes?: string[],
order?: [[string], [OrderTypes]]
}LICENSE
MIT