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

atom.render.item

所有与原子列表相关的布局配置都定义在atom.render.item中。为了让代码简洁,这些JSON配置都放入一个单独的文件中

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

  1. 1import configAtomRenderItem from './config/configAtomRenderItem.js';
  2. 2...
  3. 3export default {
  4. 4 atom: {
  5. 5 render: {
  6. 6 ...
  7. 7 item: configAtomRenderItem,
  8. 8 },
  9. 9 },
  10. 10 ...
  11. 11};

src/module-system/a-basefront/front/src/config/config/configAtomRenderItem.js

  1. 1const __viewSizeDefaultLayoutView = [{ name: 'default' }];
  2. 2const __viewSizeDefaultLayoutEdit = [{ name: 'default' }];
  3. 3const __viewSizeDefaultView = {
  4. 4 small: __viewSizeDefaultLayoutView,
  5. 5 medium: __viewSizeDefaultLayoutView,
  6. 6 large: __viewSizeDefaultLayoutView,
  7. 7};
  8. 8const __viewSizeDefaultEdit = {
  9. 9 small: __viewSizeDefaultLayoutEdit,
  10. 10 medium: __viewSizeDefaultLayoutEdit,
  11. 11 large: __viewSizeDefaultLayoutEdit,
  12. 12};
  13. 13const item = {
  14. 14 info: {
  15. 15 layout: {
  16. 16 viewSize: {
  17. 17 view: __viewSizeDefaultView,
  18. 18 edit: __viewSizeDefaultEdit,
  19. 19 },
  20. 20 },
  21. 21 attachment: true,
  22. 22 comment: true,
  23. 23 },
  24. 24 layouts: {
  25. 25 base: {
  26. 26 blocks: {
  27. 27 caption: {
  28. 28 component: {
  29. 29 module: 'a-baselayout',
  30. 30 name: 'itemLayoutBlockDefaultCaption',
  31. 31 },
  32. 32 },
  33. 33 title: {
  34. 34 component: {
  35. 35 module: 'a-baselayout',
  36. 36 name: 'itemLayoutBlockDefaultTitle',
  37. 37 },
  38. 38 },
  39. 39 subnavbar: {
  40. 40 component: {
  41. 41 module: 'a-baselayout',
  42. 42 name: 'itemLayoutBlockDefaultSubnavbar',
  43. 43 },
  44. 44 },
  45. 45 main: {
  46. 46 component: {
  47. 47 module: 'a-baselayout',
  48. 48 name: 'itemLayoutBlockDefaultMain',
  49. 49 },
  50. 50 },
  51. 51 },
  52. 52 },
  53. 53 default: {
  54. 54 title: 'LayoutInfo',
  55. 55 component: {
  56. 56 module: 'a-baselayout',
  57. 57 name: 'itemLayoutDefault',
  58. 58 },
  59. 59 blocks: {},
  60. 60 },
  61. 61 content: {
  62. 62 title: 'LayoutContent',
  63. 63 component: {
  64. 64 module: 'a-baselayout',
  65. 65 name: 'itemLayoutDefault',
  66. 66 },
  67. 67 blocks: {},
  68. 68 },
  69. 69 },
  70. 70};
  71. 71export default item;

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 基本布局配置,定义一些具有共性的区块,包括:captiontitlesubnavbar、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配置规范