import { join } from 'path';
 
export default {
  plugins: [
    ['umi-plugin-menus', {
      build: join(__dirname, './src/routes.json'),
    }],
  ],
}

import { join } from 'path';
import build from '../src/build';
 
export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
      dynamicImport: { webpackChunkName: true },
      title: 'visual',
      dll: false,
      routes: {
        exclude: [
          /models\//,
          /services\//,
          /utils\//,
          /model\.(t|j)sx?$/,
          /service\.(t|j)sx?$/,
          /util\.(t|j)sx?$/,
          /components\//,
        ],
        update(routes) {
          build(routes, {
            build: join(__dirname, './src/routes.json'),
            order: [['path', 'title'], ['asc', 'asc']]
          });
          return routes;
        }
      },
    }],
  ],
}

/**
 * title: 首页           // 菜单名称
 * order: 1             // 菜单排序
 * hideMenu: true       // 隐藏菜单（菜单组件实现）
 * hideChildMenu: true  // 隐藏子菜单（菜单组件实现）
 */
import React from 'react';
 
export default function First(props){
  return (<div>first page</div>)
};

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;
 
    const itemTitle = title || path;
 
    if (_isArray(routes) && !_isEmpty(routes) && !hideMenuChild) {
      return (
        <Menu.SubMenu key={k} title={itemTitle}>
          {recursiveMenus(routes, {key: k}, stack)}
        </Menu.SubMenu>
      );
    } else {
      return (
        <Menu.Item key={k}>
          <Link to={path}>{itemTitle}</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();
 
  const {location: {pathname = ''} = {}} = props;
 
  useEffect(() => {
    const stack = [];
    const menuItemsComponent = recursiveMenus(menus, {}, stack);
    setMenuItems(stack);
    setMenuItemsComponent(menuItemsComponent);
  }, []);
 
  useEffect(() => {
    const key = _get(_find(menuItems, ({path, routes}) => !routes && path === 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)]);
    }
  }, [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;