如果我们需要定制原子布局,只需要按照默认布局的JSON规范,在业务模块中按需修改即可。系统会自动将两个JSON规范合并。因此,定制布局的JSON规范往往是增量部分,所以开发起来非常便捷

下面以业务模块test-note为例,说明如何配置原子类型notecontent布局

atoms.{atomClass}.render.item

定制布局JSON配置定义在atoms.{atomClass}.render.item中,在这里就是:atoms.note.render.item。为了让代码简洁,这些JSON配置都放入一个单独的文件中

src/module-vendor/test-note/front/src/config/config.js

  1. 1import configPartyRenderItem from './config/configPartyRenderItem.js';
  2. 2...
  3. 3export default {
  4. 4 ...
  5. 5 atoms: {
  6. 6 note: {
  7. 7 render: {
  8. 8 ...
  9. 9 item: configPartyRenderItem,
  10. 10 },
  11. 11 },
  12. 12 },
  13. 13};

src/module-vendor/test-note/front/src/config/config/configPartyRenderItem.js

  1. 1const __viewSizeDefaultLayoutView = [{ name: 'content' }, { name: 'default' }];
  2. 2const __viewSizeDefaultLayoutEdit = [{ name: 'default' }, { name: 'content' }];
  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. 13
  14. 14const item = {
  15. 15 info: {
  16. 16 layout: {
  17. 17 viewSize: {
  18. 18 view: __viewSizeDefaultView,
  19. 19 edit: __viewSizeDefaultEdit,
  20. 20 },
  21. 21 },
  22. 22 },
  23. 23 layouts: {
  24. 24 default: {
  25. 25 blocks: {
  26. 26 main: {
  27. 27 component: {
  28. 28 module: 'a-cms',
  29. 29 name: 'itemLayoutBlockMobileMain',
  30. 30 },
  31. 31 info: true,
  32. 32 },
  33. 33 },
  34. 34 },
  35. 35 content: {
  36. 36 blocks: {
  37. 37 main: {
  38. 38 component: {
  39. 39 module: 'a-cms',
  40. 40 name: 'itemLayoutBlockMobileMain',
  41. 41 },
  42. 42 markdown: true,
  43. 43 },
  44. 44 },
  45. 45 },
  46. 46 },
  47. 47};
  48. 48export default item;

关于JSON配置的具体说明,请参见:原子条目布局:默认布局