介绍

在一个PC布局中可以统一配置所有区域的边栏按钮边栏面板

最佳实践:可以根据业务需要开发自定义的边栏按钮边栏面板,然后再创建一个新的PC布局,在新布局中重新组织边栏按钮边栏面板;也可以直接修改现有PC布局的配置

创建PC布局的方式

创建PC布局有两种方式:

1. 管理页面

管理员通过管理页面直接创建PC布局或者修改现有PC布局的配置内容

2. 静态原子

由于模块a-layoutpc提供了原子类型layout来管理PC布局。因此,我们可以通过创建静态原子的方式来创建新PC布局

静态原子创建PC布局

采用静态原子创建PC布局,主要分3步:

1. 修改前端Config配置

可以通过项目配置来覆盖模块配置模块配置说明如下:

src/module-system/a-layoutpc/front/src/config/config.js

export default {
  layout: {
    presets: {
      anonymous: {
        scene: {
          web: 'a-layoutpc:layoutPCAnonymous',
        },
      },
      authenticated: {
        scene: {
          web: 'a-layoutpc:layoutPC',
        },
      },
    },
  },
};
名称 说明
layout.presets.anonymous 匿名用户的预置布局
layout.presets.authenticated 登录用户的预置布局

2. 定义静态原子

以预置布局a-layoutpc:layoutPC为例:

定义一个静态原子数组

src/module-system/a-layoutpc/backend/src/config/static/layouts.js

const layoutPC = require('./layout/layoutPC.js');
const layoutPCAnonymous = require('./layout/layoutPCAnonymous.js');

module.exports = app => {
  const layouts = [
    layoutPC(app),
    layoutPCAnonymous(app),
  ];
  return layouts;
};

定义一个静态原子:a-layoutpc:layoutPC

src/module-system/a-layoutpc/backend/src/config/static/layout/layoutPC.js

module.exports = app => {
  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  const content = {
    sidebar: {
      top: {
        buttons: [
          { module: 'a-layoutpc', name: 'buttonHome' },
          { module: 'a-layoutpc', name: 'buttonDashboard' },
          { module: 'a-layoutpc', name: 'buttonFullscreen' },
          { module: 'a-layoutpc', name: 'buttonMine' },
        ],
      },
      left: {
        panels: [
          { module: 'a-layoutpc', name: 'panelMenu' },
          { module: 'a-layoutpc', name: 'panelAtom' },
          { module: 'a-layoutpc', name: 'panelSearch' },
        ],
      },
      right: {
        panels: [],
      },
      bottom: {
        panels: [],
        buttons: [
          { module: 'a-layoutpc', name: 'buttonClock' },
          { module: 'a-layoutpc', name: 'buttonCopyright' },
        ],
      },
    },
  };
  const layout = {
    atomName: 'PC Layout(Authenticated)',
    atomStaticKey: 'layoutPC',
    atomRevision: 1,
    description: '',
    content: JSON.stringify(content),
    resourceRoles: 'root',
  };
  return layout;
};

sidebar

名称 说明
top.buttons 头部边栏按钮
left.panels 左边栏面板
right.panels 右边栏面板
bottom.panels 状态栏左侧面板
bottom.buttons 状态栏右侧按钮

layout

名称 说明
atomStaticKey 系统自动添加模块名称前缀,生成a-layoutpc:layoutPC
content 布局内容
resourceRoles 资源授权对象,这里是角色root

角色root是整个角色树的根,也就意味着所有用户(包括匿名用户)均可访问此资源

3. 注册静态原子

前面定义好一组静态原子数据,接下来就需要在模块的meta文件中进行注册

src/module-system/a-layoutpc/backend/src/meta.js

const staticLayouts = require('./config/static/layouts.js')(app);

base: {
  statics: {
    'a-layoutpc.layout': {
      items: staticLayouts,
    },
  },
},
名称 说明
a-layoutpc.layout 原子类型的全称。在这里,原子类型layout是由模块a-layoutpc提供的
items 静态原子数组