目标

下面我们演示如何在模块test-party中新建一个App应用

1. 定义App应用

我们通过静态原子的方式定义App，一方面既可以把App固化在代码中，方便开发和部署，也可以在系统运行阶段动态调整App的配置

src/suite-vendor/test-party/modules/test-party/backend/src/config/static/apps.js

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

src/suite-vendor/test-party/modules/test-party/backend/src/config/static/app/appParty.js

  1. 1module.exports = app => {
  2. 2  // const moduleInfo = app.meta.mockUtil.parseInfoFromPackage(__dirname);
  3. 3  const info = {
  4. 4    // layout: null,
  5. 5    // menu: {
  6. 6    //   layout: null,
  7. 7    // },
  8. 8    home: {
  9. 9      mode: 'dashboard', // dashboard/page
  10. 10      dashboard: 'test-party:dashboardTest',
  11. 11      page: null,
  12. 12    },
  13. 13    mine: {
  14. 14      layout: true,
  15. 15    },
  16. 16  };
  17. 17  const content = {
  18. 18    info: {
  19. 19      theme: {
  20. 20        type: 'thirdParty',
  21. 21        thirdParty: 'a-themehyacinth',
  22. 22      },
  23. 23    },
  24. 24    presets: {
  25. 25      anonymous: {
  26. 26        mobile: info,
  27. 27        pc: info,
  28. 28      },
  29. 29      authenticated: {
  30. 30        mobile: info,
  31. 31        pc: info,
  32. 32      },
  33. 33    },
  34. 34  };
  35. 35  const _app = {
  36. 36    atomName: 'Party',
  37. 37    atomStaticKey: 'appParty',
  38. 38    atomRevision: 2,
  39. 39    atomCategoryId: 'Demonstration',
  40. 40    description: '',
  41. 41    appIcon: ':business:party',
  42. 42    appIsolate: false,
  43. 43    appHidden: false,
  44. 44    content: JSON.stringify(content),
  45. 45    resourceRoles: 'authenticated',
  46. 46    appSorting: 0,
  47. 47  };
  48. 48  return _app;
  49. 49};
  • App配置
名称 说明
info.theme 为App设置独立的Theme（主题）。如何创建自定义主题，请参见：主题与样式
presets App配置组合

  • presets配置层级：为了适应不同场景的应用诉求，App的配置组合分为几个层级

    • 第一层：用户认证状态：anonymous、authenticated

    • 第二层：用户界面场景：mobile、pc

    • 第三层：语言：在本演示中不涉及，请参见模块a-cms源码

  • presets配置

名称 说明
layout 为App设置独立的自适应布局配置。一般而言，不必设置。如果要设置，就需要单独提供layout对应的atomStaticKey。参见：Mobile布局配置、Mobile布局配置（示范）、PC布局配置
menu.layout App菜单页面的布局配置。一般而言，不必设置，系统会自动从后端获取App的菜单资源并渲染成默认的风格。如果要自定义菜单页面的显示内容或者显示风格，就需要单独提供layout对应的atomStaticKey
home.mode App对应的首页页面有两种模式：dashboard/page。如果不设置任何值，就意味着不提供首页页面
home.dashboard 如果mode为dashboard，这里就需要设置dashboard的atomStaticKey
home.page 如果mode为page，这里就需要设置前端页面组件的路径
mine.layout App对应的我的页面。如果不设置任何值，就意味着不提供我的页面。如果设置为true，系统会自动从后端获取App的菜单资源并渲染成默认的风格。如果要自定义我的页面的显示内容或者显示风格，就需要单独提供layout对应的atomStaticKey
  • 静态原子
名称 说明
atomStaticKey 系统自动添加模块名称前缀，生成test-party:appParty
atomCategoryId App归属目录。系统内置4个目录：AppCategoryFront(前台应用)、AppCategoryBackend(后台应用)、AppCategoryManagement(管理)、Demonstration(演示)
appIcon App图标
appIsolate 是否为独立App
appHidden 是否隐藏。如果设为隐藏，那么在Apps面板中不显示此应用
content App的配置内容
resourceRoles 资源授权对象，这里是角色authenticated，意味着只有登录用户才有权限访问此App

  • atomCategoryId（App归属目录）

    • 系统内置4个目录，基本可以满足大多数业务场景的需求。当然，我们也可以根据需要直接设置为其他目录名称。比如，我们开发了一款ERP，那么就可以将atomCategoryId设置为ERP，然后为目录ERP添加一系列App应用
名称 说明
AppCategoryServices(服务) 一般放置面向C端用户的App：比如电商App
AppCategoryCMS(CMS) 一般放置CMS类型的App：比如公司新闻、博客、文档，等
AppCategoryBusiness(业务) 一般放置面向B端普通用户的业务App：比如OA、CRM，等
AppCategoryManagement(管理) 一般放置面向B端管理用户的业务App：比如OA、CRM，等
AppCategorySettings(设置) 一般放置面向B端系统管理员的App：比如系统App
Demonstration(演示) 一般放置与测试、演示相关的App：比如宴会App

2. 注册App应用

src/suite-vendor/test-party/modules/test-party/backend/src/meta.js

  1. 1// static
  2. 2const staticApps = require('./config/static/apps.js')(app);
  3. 3base: {
  4. 4  statics: {
  5. 5    'a-app.app': {
  6. 6      items: staticApps,
  7. 7    },
  8. 8  },
  9. 9},