介绍

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

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

创建PC布局的方式

创建PC布局有两种方式：

1. 管理页面

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

2. 静态原子

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

静态原子创建PC布局

以模块a-layoutpc提供的预置布局a-layoutpc:layoutPC为例：

1. 定义静态原子

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

  1. 1const layoutPC = require('./layout/layoutPC.js');
  2. 2
  3. 3module.exports = app => {
  4. 4  const layouts = [
  5. 5    layoutPC(app),
  6. 6  ];
  7. 7  return layouts;
  8. 8};

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

  1. 1module.exports = app => {
  2. 2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const content = {
  4. 4    sidebar: {
  5. 5      top: {
  6. 6        buttons: [
  7. 7          { module: 'a-layoutpc', name: 'buttonAppHome' },
  8. 8          { module: 'a-layoutpc', name: 'buttonSearch' },
  9. 9          { module: 'a-layoutpc', name: 'buttonFullscreen' },
  10. 10          { module: 'a-layoutpc', name: 'buttonAppMine' },
  11. 11        ],
  12. 12      },
  13. 13      left: {
  14. 14        panels: [],
  15. 15      },
  16. 16      right: {
  17. 17        panels: [],
  18. 18      },
  19. 19      bottom: {
  20. 20        panels: [],
  21. 21        buttons: [
  22. 22          { module: 'a-layoutpc', name: 'buttonViewLayout' },
  23. 23          { module: 'a-layoutpc', name: 'buttonTheme' },
  24. 24          { module: 'a-layoutpc', name: 'buttonClock' },
  25. 25          { module: 'a-layoutpc', name: 'buttonCopyright' },
  26. 26        ],
  27. 27      },
  28. 28    },
  29. 29  };
  30. 30  const layout = {
  31. 31    atomName: 'PC Layout(Authenticated)',
  32. 32    atomStaticKey: 'layoutPC',
  33. 33    atomRevision: 6,
  34. 34    description: '',
  35. 35    layoutTypeCode: 2,
  36. 36    content: JSON.stringify(content),
  37. 37    resourceRoles: 'root',
  38. 38  };
  39. 39  return layout;
  40. 40};
  • sidebar
名称 说明
top.buttons 头部边栏按钮
left.panels 左边栏面板
right.panels 右边栏面板
bottom.panels 状态栏左侧面板
bottom.buttons 状态栏右侧按钮
  • layout
名称 说明
atomStaticKey 系统自动添加模块名称前缀，生成a-layoutpc:layoutPC
content 布局内容
resourceRoles 资源授权对象，这里是角色root

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

2. 注册静态原子

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

  1. 1const staticLayouts = require('./config/static/layouts.js')(app);
  2. 2
  3. 3base: {
  4. 4  statics: {
  5. 5    'a-baselayout.layout': {
  6. 6      items: staticLayouts,
  7. 7    },
  8. 8  },
  9. 9},
名称 说明
a-baselayout.layout 原子类型的全称。在这里，原子类型layout是由模块a-baselayout提供的
items 静态原子数组

如何让PC布局生效

通过前面的方式，可以创建全新的PC布局。但是如何让PC布局生效呢？在新版CabloyJS中，PC布局是与App应用绑定在一起的，也就是说，可以为不同的App应用指定不同的PC布局，从而为大型项目的开发提供更加灵活多变的界面定制机制