默认布局由模块a-basefront提供，下面介绍默认布局的JSON规范

layoutAtomItemBase

默认布局通过静态原子的机制来提供，从而方便版本控制和在线修改

src/module-system/a-basefront/backend/src/config/static/layout/layoutAtomItemBase.js

  1. 1module.exports = app => {
  2. 2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const content = {
  4. 4    info: {
  5. 5      layout: {
  6. 6        viewSize: {
  7. 7          view: {
  8. 8            small: 'default',
  9. 9            medium: 'default',
  10. 10            large: 'default',
  11. 11          },
  12. 12          edit: {
  13. 13            small: 'default',
  14. 14            medium: 'default',
  15. 15            large: 'default',
  16. 16          },
  17. 17        },
  18. 18      },
  19. 19      attachment: true,
  20. 20      comment: true,
  21. 21    },
  22. 22    layouts: {
  23. 23      base: {
  24. 24        blocks: {
  25. 25          caption: {
  26. 26            component: {
  27. 27              module: 'a-baselayout',
  28. 28              name: 'itemLayoutBlockDefaultCaption',
  29. 29            },
  30. 30          },
  31. 31        },
  32. 32      },
  33. 33      default: {
  34. 34        title: 'LayoutInfo',
  35. 35        component: {
  36. 36          module: 'a-baselayout',
  37. 37          name: 'baseLayoutDefault',
  38. 38        },
  39. 39        subnavbar: {
  40. 40          policyDefault: true,
  41. 41        },
  42. 42      },
  43. 43      content: {
  44. 44        title: 'LayoutContent',
  45. 45        component: {
  46. 46          module: 'a-baselayout',
  47. 47          name: 'baseLayoutDefault',
  48. 48        },
  49. 49        subnavbar: {
  50. 50          policyDefault: true,
  51. 51        },
  52. 52      },
  53. 53    },
  54. 54  };
  55. 55  const layout = {
  56. 56    atomName: 'Base',
  57. 57    atomStaticKey: 'layoutAtomItemBase',
  58. 58    atomRevision: 1,
  59. 59    description: '',
  60. 60    layoutTypeCode: 4,
  61. 61    content: JSON.stringify(content),
  62. 62    resourceRoles: 'root',
  63. 63  };
  64. 64  return layout;
  65. 65};

info

定义基本信息

名称 默认值 说明
layout.viewSize 定义不同尺寸所支持的布局清单
attachment true 是否显示附件
comment true 是否显示评论

info.layout.viewSize.{mode}

定义不同尺寸所支持的布局清单

由于条目布局有两个使用场景：查看/编辑，因此需要针对不同的场景分别设置所支持的布局清单

  • mode：view/edit
名称 默认值 说明
small default 表单（1栏）
medium default 表单（2栏）
large default 表单（2栏）

layouts

layouts定义所有的布局配置。在不同的场景具体使用哪些配置，由info.layout.viewSize定义

名称 说明
base 基本布局配置，定义一些具有共性的区块，包括：caption、title、subnavbar、main
default default布局配置，默认渲染为表单形式，通用于mobile/pad/pc场景
content 正文布局配置。比如，文章/便签可以开启此布局

layouts.default

下面以layouts.default为例，说明具体布局的JSON规范

名称 默认值 说明
title LayoutInfo 布局标题，支持国际化
component a-baselayout + itemLayoutDefault 实现该布局的Vue组件
blocks 组成布局的区块

layouts.default.blocks

一个完整的default布局通常包含以下区块：

名称 默认Vue组件 说明
caption a-baselayout + itemLayoutBlockDefaultCaption 标题栏的左侧：通常显示标题
title a-baselayout + itemLayoutBlockDefaultTitle 标题栏的右侧：通常显示一组功能按钮
subnavbar a-baselayout + itemLayoutBlockDefaultSubnavbar 副标题栏：根据尺寸不同动态决定是否显示
main a-baselayout + itemLayoutBlockDefaultMain 主区块：从后端获取Atom对应的JSON Schema，并动态渲染成表单形式
  • 由于layouts.base已经定义了通用的区块：caption、title、subnavbar、main，因此在layouts.default中不再重复定义

layouts.base.blocks.main

下面以layouts.base.blocks.main为例，说明具体区块的JSON规范

名称 默认值 说明
component a-baselayout + itemLayoutBlockDefaultMain 实现该区块的Vue组件
其他配置 由区块Vue组件决定具体的JSON配置规范