# 功能包

# 什么是功能包

功能包是定制化各位部门或者统一部门不同的业务对于编辑平台不同的需求去自定义的配置文件。
接下来,将展示一个完整的功能包配置的demo,然后对每个配置项进行展开介绍,用户可以根据自己的具体需求,去定制化所需要的功能包配置。
注意: 功能包的优先级低于权限包的优先级,其优先级相关流程如下所示:

xes-save

# 完整的功能包配置

{
  TITLE: '学而思网校',
  // 编辑器区域权限
  EDITOR: {
    // 客户端
    ClIENT: [],
    // 左侧 - 页面列表
    EDITOR_PAGE_LIST: {
      ADD_PAGE: true,
      SHOW_TEMPLATE: true
    },
    // 左侧 - 组件列表
    EDITOR_WIDGET_LIST: {
      SHOW_LIST: true
    },
   EDITOR_RULES: {
      TITLE: '规则配置',
      ORIGIN: 'yxk'   // 对应rule文件里面的规则配置的名称
    },,
    // 顶部中间 —— 显示的组件
    NAV_CONTROLS: [
      'Text',
      'Image',
      'Container',
      'DataContainer',
      'Music',
      'Video',
      'Form',
      'Widget',
    ],
    // 顶部右侧 —— 操作权限
    NAV_OPTIONS: {
      AdvancedConfig: true,
      Review: false,
      SetTemplate: true,
      History: true,
      Preview: true,
      Save: true,
      PublishTest: true,
      Publish: true,
    },
    // 右侧配置区
    SETTINGS: {
      LAYER: {  /* 容器的Tab面板显示的选项卡 */
        ATTRIBUTE: true,
        LAYER: true,
        ATTRIBUTELIST: {
          LAYER: true
        }
      },
      PAGE: {  /* 项目和页面的的Tab面板显示的选项卡 */
        ATTRIBUTE: true,
        TRIGGERS: true,
        LAYER: true,
        ATTRIBUTELIST: {
          PROJECT: true,
          PAGE: true,
        }
      },
      WIDGET: {  /* 组件的Tab面板显示的选项卡 */
        ATTRIBUTE:true,
        ANIMATIONS: true,
        TRIGGERS: true,
        LAYER: true,
        ATTRIBUTELIST: {
          NORMAL:  true,
          FEATURE:  true,
        }
      }
    }
  },
  PUBLISH: null
}

# 配置项

所有的配置项均为 可选字段,如果不配置,默认为网校功能包配置

# TITLE - 网页标题

自定义网页标题

# EDITOR - 编辑区域

自定义编辑器区域相关功能

  • ClIENT - 客户端

因为业务需要根据不同的场景进行不同交互,我们需要让行为组件在不同场景下执行,不同的部门拥有不同的客户端,所以我们提供了客户端的自定义配置,如果用户不例如,网校默认的客户端是学而思网校,培优部门默认的客户端应该是学而思培优。
(注:微信和其他属于默认添加的配置项,不可删除)

  ClIENT: [{
      text: '网校客户端',    // 客户端的名称
      value: 'jzh'   // 客户端的UA 
   }]

配置效果如下图所示:

xes-save
  • EDITOR_PAGE_LIST - 编辑区域左侧列表

EDITOR_PAGE_LIST 对应的是编辑区域左侧列表相关配置, ADD_PAGE 表示是否显示添加页面的入口,SHOW_TEMPLATE 表示是否模版入口

   EDITOR_PAGE_LIST: {
      ADD_PAGE: true,   // 默认值为true
      SHOW_TEMPLATE: true // 默认值为true
   },

字段对应编辑区域,如下图所示:

xes-save
  • EDITOR_WIDGET_LIST - 编辑区域组件列表

SHOW_LIST 是否显示左侧的组件列表

    EDITOR_WIDGET_LIST: {
      SHOW_LIST: true
    }

字段对应编辑区域,如下图所示:

xes-save
  • EDITOR_RULES - 编辑区域规则配置

EDITOR_RULES 相关的配置目前针对于生成H5页面之前需要进行规则配置的业务,例如优选课,精品课。 TITLE代表有规则配置前置条件的标题, ORIGIN 对应rule文件里面的规则配置的名称。(规则配置详细细节可找编辑平台开发人员进行了解)

  EDITOR_RULES: {
      TITLE: '规则配置',   // 对应标题左上角的返回标题
      ORIGIN: 'yxk'   // 对应rule文件里面的规则配置的名称
  }

TITLE字段对应编辑区域,如下图所示:

xes-save
  • NAV_CONTROLS - 编辑区域顶部中间显示的组件

NAV_CONTROLS 编辑区域顶部中间显示的相关元素入口,该字段类型为数组。

      NAV_CONTROLS: [
      'Text',  // 文本
      'Image',  // 图片
      'Container',  // 容器
      'DataContainer',   // 数据模版
      'Music', // 音乐
      'Video', // 视频
      'Form', // 表单
      'Widget' // 组件
    ]

字段对应编辑区域,如下图所示:

xes-save
  • NAV_OPTIONS - 操作权限

NAV_OPTIONS对应顶部右侧的操作权限,目前支持的操作相关配置如下所示:

  NAV_OPTIONS: {
        AdvancedConfig: Boolean,   // 高级配置
        History: Boolean,  // 前进or后退
        Review: Boolean, // 审核
        SetTemplate: Boolean,  // 设为模版
        Preview: Boolean,  // 预览
        Save: {  // 保存
           screenshot: Boolean,  //  保存时是否需要生成项目截图
           beforeSave ?: Function,  // 保存前生命周期函数
           afterSave ?: Function // 保存后生命周期函数
        } | Boolean ,  // 是否显示保存按钮
        PublishTest: Boolean, // 线上测试发布
        Publish: {  // 线上正式发布
            beforePublish?: Function,  // 发布前生命周期
            afterPublish?: Function // 发布后生命周期
        } | Boolean  // 是否显示发布按钮
      },

字段对应编辑区域,如下图所示:

xes-save
  • SETTINGS - 编辑区域右侧配置面板

SETTINGS 包含了是否显示项目、页面、容器、组件的相关配置,

    SETTINGS: {  // 配置
        LAYER: {   // 是否显示图层配置面板 
          ATTRIBUTE: Boolean,  // 是否显示配置选项卡
          LAYER: Boolean,  // 是否显示行为选项卡
          ATTRIBUTELIST:  { 
            LAYER: Array<string> | Boolean  图层配置是否显示,显示时的配置项
          }
        } | null, 
        PAGE: {  // 是否显示项目和页面的配置面板 
          ATTRIBUTE: Boolean, // 是否显示配置选项卡
          TRIGGERS: Boolean,  // 是否显示行为选项卡
          LAYER: Boolean,  // 是否显示图层选项卡
          ATTRIBUTELIST: {
            PROJECT: Array<string> | Boolean,  // 项目相关配置是否显示,显示时的配置项
            PAGE: Array<string> | Boolean, // 页面相关配置是否显示,显示时的配置项
          }
        } | null, // 图层入口
        WIDGET: {   // 是否显示组件配置面板
          ATTRIBUTE: Boolean, // 是否显示配置选项卡
          ANIMATIONS: Boolean,  // 是否显示动画选项卡
          TRIGGERS: Boolean, // 是否显示行为选项卡
          LAYER: Boolean, // 是否显示图层选项卡
          ATTRIBUTELIST: {
            NORMAL:  Array<string> | Boolean,  // 组件配置的通用配置是否显示,显示时的配置项
            FEATURE:  Array<string> | Boolean, // 组件配置的特性配置是否显示,显示时的配置项
          }
        } | null
    }

SETTINGSLAYER字段对应编辑区域,如下图所示:

xes-save

SETTINGSPAGE字段对应编辑区域,如下图所示:

xes-save

SETTINGSWIDGET字段对应编辑区域,如下图所示:

xes-save

# PUBLISH - 发布页

  • PUBLISH 因为不同的部门发布之后的页面需要对应不同的域名,所以发布页目前支持发布之后页面URL的自定义。
  PUBLISH: {
      URL: String | Function
  } | null

下图是 PUBLISH 自定义 URL 为 Function 时的例子:

xes-save

PUBLISHURL字段对应编辑区域,如下图所示:

xes-save