菜单布局开发

菜单布局是页面显示上边工具栏和左边菜单栏的展示, 最终使用了 customize 解决方案,方便于二次开发。

如果只是需要在工具栏新增自己的按钮等自己的组件，可以再 src/router.js 里布局组件增加 extraHeaderRight={[component1,component2]} ,如果布局是侧边展开布局，需要传参 headerProps={{toolbarProps: {extraHeaderRight: component1 }}}

说明

1 在主模块新建/修改以下文件

/src/customize
├── customizeLayout.js

2 增加布局文件

/src/layouts
├── DefaultLayout // 自己的布局文件代码

举例

1 菜单布局 customize

// 不需要自己写，可以引用平台的
import { isFunction } from 'lodash';

import { mapCustomize } from 'utils/customize';

const defaultLayout = () => import('../layouts/DefaultLayout');

export function loadLayout(layoutName) {
  if (mapCustomize.has({ module: 'hzero-front', feature: 'layout', key: layoutName })) {
    const layout = mapCustomize.get({ module: 'hzero-front', feature: 'layout', key: layoutName });
    return isFunction(layout && layout.component) ? layout.component : defaultLayout;
  }
  return defaultLayout;
}

export function setLayout(layoutName, layout) {
  mapCustomize.set({
    module: 'hzero-front',
    feature: 'layout',
    key: layoutName,
    data: { component: layout },
  });
}

2 使用数据权限维度的 customize


/import { setLayout } from 'hzero-front/lib/customize/layout';

// 注入 hzero-front 时 注入 自定义的 layouts
// 侧边平铺布局
setLayout('inline', async () => import('../layouts/DefaultLayout'));
// 上方菜单布局
setLayout('horizontal', async () => import('hzero-front/lib/layouts/TopLayout'));
// 侧边级联布局
setLayout('side', async () => import('hzero-front/lib/layouts/SideLayout'));
// 侧边展开布局
setLayout('side-all', async () => import('hzero-front/lib/layouts/CommonLayout'));
// 注入 hzero-front 时 注入 自定义的 layouts