npm package: @riil-frontend/component-page-creater
Description: page creater components,include components list,component attribute panel and page canvas
Latest version: 2.0.36

# UICBB 可配置页面生成器套件

page-creater

可以通过组件列表，属性面板以及画布组件，实现通过拖拽的方式，产生一套页面配置数据。并通过此页面配置数据，呈现组件化页面的一组套件。

开发一个可用的业务组件，需按业务组件接口定义开发

[toc]

## API

### 数据结构定义：templateConfig 一个 uicbb 模板配置文件的属性

| 参数名   | 说明       | 必填 | 类型                        | 默认值 | 备注 |
| -------- | ---------- | ---- | --------------------------- | ------ | ---- |
| pageId   | 页面 id    |      | string                      |        |      |
| pageName | 名称       |      | string                      |        |      |
| configs  | 页面的集合 |      | [pageConfig](#pageConfig)[] |        |      |

### 数据结构定义：pageConfig 一个 uicbb 页面配置文件的属性

| 参数名       | 说明         | 必填 | 类型                | 默认值 | 备注                                                                                                                                                                                                                                                                                                                                                                         |
| ------------ | ------------ | ---- | ------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| pageId       | 页面 id      |      | string              |        |                                                                                                                                                                                                                                                                                                                                                                              |
| pageName     | 名称         |      | string              |        |                                                                                                                                                                                                                                                                                                                                                                              |
| widgets      | 组件配置集合 |      | [widget](#widget)[] |        |                                                                                                                                                                                                                                                                                                                                                                              |
| layoutConfig | 布局配置     |      | object              |        | {cols: number; //默认栅格为 24 格 `rowHeight: number; //高度比为 4 倍`margin: [x: number, y: number]; //默认间隔 `<br>`measureBeforeMount: boolean; //如果为 true，画布将在装入组件之前测量容器宽度。`<br>`isFitHeight:boolean//是否一屏显示页面内组件。true 时会按屏幕的高度，按 widgets 中高度比例，适配各个组件的高度；false 时，会严格按照 widgets 中配置的高度显示组件} |

### 数据结构定义：widget 页面文件中一个组件的配置文件属性

| 参数名                 | 说明                                                                                                                                                          | 必填 | 类型                                    | 默认值                                                          | 备注                                                             |
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | --------------------------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------- |
| layouts                | 组件布局信息                                                                                                                                                  |      | ReactGridLayout.Layout                  |                                                                 |                                                                  |
| id                     | 组件实例化后的 id，等于 config.layouts.lg.i。此值无需设置，在创建组件实例时会自动赋值                                                                         |      | string                                  |                                                                 |                                                                  |
| title                  | 组件列表上组件的悬浮信息                                                                                                                                      |      | string                                  |                                                                 |                                                                  |
| icon                   | 组件列表若有图标，icon 表示此图标（需求待定，预留属性）                                                                                                       |      | string                                  |                                                                 |                                                                  |
| type                   | 组件的类型，若是 npm 发布组件，则填写为 npm 分组/后部分                                                                                                       |      | string                                  |                                                                 | exp:@riil-uicbb/component-template,则 type 为 component-template |
| importFrom             | 组件来源 npm/local                                                                                                                                            |      | 'npm'                                   | 'local'                                                         |                                                                  |
| isOnlyOne              | 画布上唯一的组件，即一个画布上只能拖拽上一个这样的组件                                                                                                        |      | boolean                                 | false                                                           |                                                                  |
| attributes             | 属性面板对应属性，此属性对应 AttrPanel 内实现的各种数值编辑组件                                                                                               |      | object                                  |                                                                 |                                                                  |
| comContainerAttributes | 属性面板组件容器公共属性                                                                                                                                      |      | object                                  | {paddingLeft: 8,paddingTop: 8,paddingRight: 8,paddingBottom: 8} |                                                                  |
| userConfig             | 用户浏览时记录数据                                                                                                                                            |      | object                                  |                                                                 |                                                                  |
| dependentProps         | 组件所依赖的属性，key 为属性值，info 为缺少依赖时组件显示的文案。依赖属性由 pageProps 传入组件。 依赖性验证由生成器完成，组件无需关注                         |      | { key: string; info: string }[]         |                                                                 |                                                                  |
| publishProps           | 组件对外提供的属性，通过 setPageState，将属性发布到生成器公共属性状态中，作为公共依赖使用。生成器会在组件拖拽创建后，自动将此属性以及默认值发布到公共状态中。 |      | { key: string; defaultValue: string }[] |                                                                 |                                                                  |

`<span id="comListItem">`

### 数据结构定义：comListItem 组件列表数据子项

| 参数名   | 说明     | 必填 | 类型                                                                                                               | 默认值 | 备注                                                                                                                                                                          |
| -------- | -------- | ---- | ------------------------------------------------------------------------------------------------------------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| key      | 分组 key | 必填 | string                                                                                                             |        |                                                                                                                                                                               |
| title    | 名称     | 必填 | string                                                                                                             |        | 显示为折叠面板名称                                                                                                                                                            |
| iconInfo | 分组说明 |      | {icon:string,tooltip:string}                                                                                       |        | 显示为折叠面板名称后的 icon 悬浮提示 {icon:图标 type,tooltip:图标悬浮内容文案}                                                                                                |
| children | 组件集合 |      | {type:string,name:string,importFrom:'local'\|'npm',config:object}\|{type:'template',name:string,template:object}[] |        | 描述组件或模板。组件数据结构为：{type:组件类型，name:组件名称,importFrom:引用方式,config:组件配置} 。模板数据结构：{type:'template',name:组件名称，template:整页布局模板数据} |

### \* 业务组件接口定义:ComponentBase 实现一个 uicbb 业务组件，可使用以下接口来进行业务开发，交互通信。

**注意：uicbb 组件必须在代码根目录创建 index.js，index.scss 作为组件程序入口，否则无法被画布引用。且组件所依赖的其他包，应为 npm 包或组件内部类**

| 参数名                  | 说明                                                                                                      | 必填 | 类型                                                                     | 默认值 | 备注 |
| ----------------------- | --------------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------ | ------ | ---- |
| isEdit                  | 是否是编辑模式                                                                                            |      | boolean                                                                  |        |      |
| jumpto                  | (path,isTabSelf)=>void 页面跳转操作,若 isTabSelf 为 true，则跳转为内部页签跳转到 url 对应的组件所在页签中 |      | (path: string,isTabSelf:boolean) => void                                 |        |      |
| pageProps               | 父页面公共属性                                                                                            |      | object                                                                   |        |      |
| widgetsProps            | 父页面存储的分组属性                                                                                      |      | object                                                                   |        |      |
| setPageState            | 添加或修改父页面公共属性(pageProps)，可用来实现组件间数据联动                                             |      | (state: object) => {}                                                    |        |      |
| removePageState         | 删除页面属性（容器组件需要）                                                                              |      | （keys）=>void                                                           |        |      |
| setWidgetsState         | 添加或修改父页面分组属性                                                                                  |      | (state: object) => {}                                                    |        |      |
| config                  | 组件配置数据                                                                                              |      | widget                                                                   |        |      |
| request                 | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'                                       |      | any                                                                      |        |      |
| onConfigChange          | 组件内部可调用此方法修改组件配置数据                                                                      |      | (config: widget,callback:function,isUpdateService:boolean) => void       |        |      |
| toggleFullScreen        | 切换当前组件全屏状态，返回 true/false 全屏/正常                                                           |      | () => boolean                                                            |        |      |
| getFullScreenState      | 获取当前组件是否全屏状态，返回 true/false 全屏/正常,可在初始化时调用                                      |      | () => boolean                                                            |        |      |
| getComRequire           | 获取组件句柄类                                                                                            |      | (comName,importFrom,customGetComRequire)=>React.ComponentClass           |        |      |
| customGetComRequire     | 自定义获取组件方法                                                                                        |      |                                                                          |        |      |
| getBaseAttributes       | 获取组件基础属性配置                                                                                      |      |                                                                          |        |      |
| onSelect                | 当前业务组件选中回调，容器组件使用此属性                                                                  |      | （id）=>void                                                             |        |      |
| selectedId              | 当前画布选中的组件，容器组件使用此属性                                                                    |      | string                                                                   |        |      |
| allWidgets              | 同级所有组件的集合，容器组件使用此属性                                                                    |      | widget[]                                                                 |        |      |
| onAllWidgetsChangeByCom | 容器组件间，其内部业务组件互相拖拽，引发业务组件迁移时，调用此方法                                        |      | （allWidgets:[]widget, callback:()=>void, isUpdateService = true）=>void |        |      |
| dragPanelIsDroppable    | 容器组件使用此属性，用来判断父是否允许拖入                                                                |      | boolean                                                                  |        |      |

### \* 业务组件接口定义: ComponentBase.AttrPanel

| 参数名     | 说明                                                                                                                         | 必填 | 类型                       | 默认值 | 备注 |
| ---------- | ---------------------------------------------------------------------------------------------------------------------------- | ---- | -------------------------- | ------ | ---- |
| pageProps  | 页面属性                                                                                                                     |      | any                        |        |      |
| config     | 所选组件配置                                                                                                                 |      | widget                     |        |      |
| request    | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'                                                          |      | any                        |        |      |
| attributes | 属性值                                                                                                                       |      | any                        |        |      |
| onChange   | 表单项变更回调                                                                                                               |      | (values) => void           |        |      |
| ref.field  | 组件应是可被调用 ref 的组件，且组件应具备对外公开的 field 属性（{Field} from '@alifd/next'）。使得表单校验可被框架统一调用。 | 必填 | {Field} from '@alifd/next' |        |      |

### \* 业务组件接口定义: ComponentBase.getSchema :(: SchemaProps) => ISchema;使用 Schema 方式生成属性面板 getSchema /AttrPanel 二选一

| 参数名    | 说明                                                                | 必填 | 类型   | 默认值 | 备注 |
| --------- | ------------------------------------------------------------------- | ---- | ------ | ------ | ---- |
| pageProps | 页面属性                                                            |      | any    |        |      |
| config    | 所选组件配置                                                        |      | widget |        |      |
| request   | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice' |      | any    |        |      |

### \* 业务组件接口定义: ComponentBase.validate:(attributes:object) => boolean;组件属性面板数据统一校验规则

| 参数名     | 说明     | 必填 | 类型   | 默认值 | 备注 |
| ---------- | -------- | ---- | ------ | ------ | ---- |
| attributes | 组件属性 |      | object |        |      |

### \* 业务组件接口定义: ComponentBase.CustomScCom?:object schema 自定义表单组件传递，在使用 schema 时，若有自定组件，则使用此参数 exp:

### \* 业务组件接口定义: ComponentBase.stopChangeOnValidateError?:boolean true/false，标记为 true 的组件，其属性面板若未通过表单校验，则阻止其 onChange 事件，不将修改数据传入画布。若为 false，则即时表单校验失败，依然会将修改数据传入画布

### \* 业务组件接口定义: ComponentBase.config ：见数据结构定义[widget]() 组件出场配置信息，定义组件的基础信息

### DragLayoutCanvas 页面生成器- 核心画布组件

| 参数名              | 类型                                                                   | 说明                                                                                                    | 必填 | 默认值 | 备注 |
| ------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ---- | ------ | ---- |
| layoutProps         | object                                                                 | ResponsiveReactGridLayout 组件属性                                                                      |      |        |      |
| selectedId          | string                                                                 | 当前选中项 id                                                                                           |      |        |      |
| onSelect            | (id: String) => void;                                                  | 子组件选中回调(id)=>void                                                                                |      |        |      |
| isEdit              | boolean                                                                | 是否是编辑模式                                                                                          |      |        |      |
| onChange            | (pageConfig: pageConfig,callback:func,isUpdateService:boolean) => void | (pageConfig,callback,isUpdateService)=>void 切换布局，增加组件，删除组件回调,将组件配置数据传出         |      |        |      |
| pageProps           | object                                                                 | 页面顶级参数，例如业务详情页面的业务 appId 将放在此属性中，供组件以及页面使用                           |      |        |      |
| request             | any                                                                    | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'                                     |      |        |      |
| jumpto              | (path:string,isTabSelf:boolean) => void                                | (path,isTabSelf)=>void 页面跳转操作                                                                     |      |        |      |
| pageConfig          | pageConfig                                                             | pageConfig                                                                                              |      |        |      |
| parentDOM           | HTMLElement                                                            | 画布外层 dom 对象，用来实现自动适配高度的功能                                                           |      |        |      |
| customGetComRequire | (comName: string, importFrom: string) => React.ComponentClass;         | 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class | -    |        |      |
| ExpCom              | React.ComponentClass                                                   | 在开发 npm 包组件时需用到此属性。或自定义引用包，子组件整体二次封装时刻使用                             | -    |        |      |
| hideComList         | array                                                                  | 隐藏组件列表，数组内填组件 type                                                                         | -    | []     |      |

### ComList 页面生成器-组件列表，可实现从组件列表拖拽到画布，添加组件的编辑模式功能

此组件为非公组件，后期会根据编辑功能需求的产出后，做重构或废弃

| 参数名          | 说明                                                                                                                                                                                           | 必填 | 类型                                     | 默认值 | 备注                                                                                                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | ---------------------------------------- | ------ | --------------------------------------------------------------------------------------------------- |
| comList         | 组件列表数据 exp:[{key:'workbench',title:'工作台'，iconinfo:{icon:'atm',tooltip:'xxxx'},children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help',config:{组件配置数据}}] }], |      | [comListItem](#comListItem)[]            |        | 特定布局类型 { type: 'template', name: '布局 1', template:{布局配置数据}}，此类型描述一整个布局页面 |
| onItemDragStart | 当组件图标拖拽开始时回调，config 为拖拽组件的配置数据，e 为鼠标 event                                                                                                                          |      | (config: widget, e: MouseEvent) => void; |        |                                                                                                     |
| onItemClick     | 当组件图标点击时回调，非功设计，暂不启用，config 为点击组件的配置数据，e 为鼠标 event                                                                                                          |      | (config: widget, e: MouseEvent) => void; |        |                                                                                                     |
| collapseProps   | 透传折叠面板属性                                                                                                                                                                               |      | object                                   |        |                                                                                                     |

### **_(1.2.0 弃用)_**AttrPanel 页面生成器-属性面板

此组件为非公组件，后期会根据编辑功能需求的产出后，做重构或废弃

| 参数名     | 说明                                                                          | 必填 | 类型                              | 默认值 | 备注 |
| ---------- | ----------------------------------------------------------------------------- | ---- | --------------------------------- | ------ | ---- |
| pageConfig | 画布的配置数据                                                                |      | pageConfig                        |        |      |
| selectId   | 当前选中组件 id                                                               |      | string                            |        |      |
| onChange   | (pageConfig)=>void 属性面板发生改变时的回调                                   |      | (pageConfig: pageConfig) => void; |        |      |
| request    | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'           |      | any                               |        |      |
| pageProps  | 页面顶级参数，例如业务详情页面的业务 appId 将放在此属性中，供组件以及页面使用 |      | object                            |        |      |

### **_（1.2.0 新增）_**AttributesPanel 页面生成器-属性面板

| 参数名              | 说明                                                                                                    | 必填 | 类型                                                                                                                                                         | 默认值 | 备注 |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ---- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------ | ---- |
| templateData        | 模板数据                                                                                                | 必填 | [templateConfig]()                                                                                                                                           |        |      |
| pageConfig          | 画布的配置数据                                                                                          | 必填 | [pageConfig]()                                                                                                                                               |        |      |
| selectId            | 当前选中组件 id                                                                                         |      | string                                                                                                                                                       |        |      |
| onChange            | (pageConfig)=>void 属性面板发生改变时的回调                                                             |      | (pageConfig:[pageConfig]()) => void;                                                                                                                         |        |      |
| ExpCom              |                                                                                                         |      | React.ComponentClass;                                                                                                                                        |        |      |
| request             | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'                                     |      | any                                                                                                                                                          |        |      |
| pageProps           | 页面顶级参数，例如业务详情页面的业务 appId 将放在此属性中，供组件以及页面使用                           |      | object                                                                                                                                                       |        |      |
| attrConfig          | 属性面板配置数据                                                                                        |      | attrConfigItem[]; attrConfigItem = {name?: string;key?: string;render?: (selectItem?: widget, pageConfig?: pageConfig, templateData?: object) => ReactNode;} |        |      |
| onTemplateChange    | 模板数据发生变更时回调                                                                                  |      | (templateData:[templateConfig]()) => void;                                                                                                                   |        |      |
| noDataImgSrc        | 无数据组件图片                                                                                          |      | string                                                                                                                                                       |        |      |
| imgPath             | 布局选择组件依赖的图片路径                                                                              |      | string                                                                                                                                                       |        |      |
| layoutList          | 布局分类数据                                                                                            |      | layoutListItem[]; layoutListItem = {label?: string;key?: 'single' / 'vertical' / 'horizontal';img?: string;}                                                 |        |      |
| tabProps            | 透传 tab 组件属性                                                                                       |      | object                                                                                                                                                       |        |      |
| customGetComRequire | 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class |      | (comName: string, importFrom: string) => React.ComponentClass;                                                                                               |        |      |

### **_(1.2.0 弃用)_**PageCreaterProps 页面生成器套件 由 AttrPanel ，ComList ，DragLayoutCanvas 三个组件组合使用的一个创建页面配置数据的，可拖拽的组件。

后期会根据编辑功能需求的产出后，做重构或废弃

| 参数名      | 说明                                                                                         | 必填 | 类型                                     | 默认值 | 备注                                                                                                                                                       |
| ----------- | -------------------------------------------------------------------------------------------- | ---- | ---------------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| comList     | 组件列表数组，组件包名的域部分                                                               |      | [comListItem](#comListItem)[]            |        | exp:@riil-uicbb/component-page-creater ->[{key:'workbench',title:'工作台'，children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help'}] }] |
| pageProps   | 页面级公共参数部分，会透传给画布子组件 pageProps                                             |      | object                                   |        |                                                                                                                                                            |
| pageConfig  | 页面生成器配置数据                                                                           |      | pageConfig                               |        |                                                                                                                                                            |
| request     | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'                          |      | any                                      |        |                                                                                                                                                            |
| layoutProps | ResponsiveReactGridLayout 组件属性                                                           |      | object                                   |        |                                                                                                                                                            |
| jumpto      | (path,isTabSelf)=>void 页面跳转操作                                                          |      | (path:string,isTabSelf:boolean) => void; |        |                                                                                                                                                            |
| onChange    | 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小触发回调(pageConfig)=>void |      | (pageConfig: pageConfig) => void         |        |                                                                                                                                                            |

### Editor 页面生成器-编辑器套件

| 参数名              | 说明                                                                                                                                                                                                                                                 | 必填 | 类型                                                           | 默认值 | 备注 |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------- | ------ | ---- |
| comList             | 组件列表数据 exp:[{key:'workbench',title:'工作台'，children:[{type: 'component-exp-alarm-list', importFrom: 'npm',icon:'help'}] }],                                                                                                                  | 必填 | [comListItem](#comListItem)[]                                  | -      |      |
| pageProps           | 透传给 DragLayoutCanvas 的公共属性                                                                                                                                                                                                                   | 必填 | object                                                         | -      |      |
| request             | 应用框架级数据请求方法，用来实现数据请求，参考 {request} from 'ice'                                                                                                                                                                                  |      |                                                                |        |      |
| appPageConfig       | 页面配置数据                                                                                                                                                                                                                                         |      | templateConfig                                                 |        |      |
| layoutProps         | ResponsiveReactGridLayout 组件属性                                                                                                                                                                                                                   |      | object                                                         |        |      |
| jumpto              | (path,isTabSelf)=>void 页面跳转操作                                                                                                                                                                                                                  |      | (path:string,isTabSelf:boolean) => void;                       |        |      |
| onChange            | 从列表添加组件、删除组件、修改属性面板、拖拽组件位置、修改组件大小触发回调                                                                                                                                                                           |      | (templateConfig: templateConfig) => void;                      |        |      |
| attributeProps      | {attrConfig:属性面板分页签数据，可自定义扩展，自定义扩展数据中的 render 为属性面板自定义实例；layoutList 切换分页布局属性，目前支持一下三种分页布局方式； noDataImgSrc 无数据组件图标路径；imgPath 布局属性组件图片路径；tabProps 透传 tab 页签属性} |      | object                                                         |        |      |
| comListProps        | 组件列表属性{collapseProps - 折叠面板组件属性透传}                                                                                                                                                                                                   |      | object                                                         |        |      |
| customGetComRequire | 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class                                                                                                                                              |      | (comName: string, importFrom: string) => React.ComponentClass; |        |      |

### HorizontalEditor 左页签编辑画布，SingleEditor 无页签编辑画布，VerticalEditor 上页签编辑画布 _具体实现方式，请参考 Editor 组件源码_

| 参数名              | 说明                                                                                                    | 必填                  | 类型                                                                                                              | 默认值 | 备注 |
| ------------------- | ------------------------------------------------------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------- | ------ | ---- |
| onTabChange         | 页签修改，删除，新增回调                                                                                | SingleEditor 无此属性 | (params: {tabSelectedIndex?: string / number;currentPageConfig: pageConfig;selected?: string / number;}) => void; | -      |      |
| tabSelectedIndex    | 页签当前值                                                                                              | SingleEditor 无此属性 | string/number                                                                                                     | -      |      |
| appPageConfig       | 页面模板数据                                                                                            |                       | templateConfig                                                                                                    |        |      |
| onClickBlank        | 点击画布空白处回调                                                                                      |                       | () => void                                                                                                        |        |      |
| selected            | 当前选中组件索引                                                                                        |                       | string/number                                                                                                     |        |      |
| droppingItem        | 拖拽体                                                                                                  |                       | any                                                                                                               |        |      |
| isDroppable         | 是否可以拖拽释放                                                                                        |                       | boolean                                                                                                           |        |      |
| isEdit              | 编辑模式                                                                                                |                       | boolean                                                                                                           |        |      |
| onChange            | 当前画布变化回调                                                                                        |                       | (pageConfig: pageConfig) => void                                                                                  |        |      |
| onWidgetSelect      | 组件选中回调                                                                                            |                       | (id: string) => void;                                                                                             |        |      |
| pageProps           | 页面属性透传                                                                                            |                       | object                                                                                                            |        |      |
| jumpto              | 跳转功能透传                                                                                            |                       | (path:string,isTabSelf:boolean) => void;                                                                          |        |      |
| onClose             | 删除某个组件回调                                                                                        |                       | (index?: number) => void;                                                                                         |        |      |
| request             | web 请求体透传                                                                                          |                       | any                                                                                                               |        |      |
| addNewTab           | 新增一个页签回调（新页签，由外部实现）                                                                  | SingleEditor 无此属性 | () => void;                                                                                                       |        |      |
| layoutProps         | 画布布局属性透传                                                                                        |                       | object                                                                                                            |        |      |
| customGetComRequire | 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class |                       | (comName: string, importFrom: string) => React.ComponentClass;                                                    |        |      |

### HorizontalLayoutView 左页签浏览模式画布，SingleLayoutView 无签浏览模式画布，VerticalLayoutView 上页签浏览模式画布

| 参数名              | 说明                                                                                                    | 必填 | 类型                                                           | 默认值 | 备注 |
| ------------------- | ------------------------------------------------------------------------------------------------------- | ---- | -------------------------------------------------------------- | ------ | ---- |
| setSelectId         | 设置当前模板选中页 id 回调 不填写此属性，则页面切换由内部实现                                           |      | (selectId?: string / number) => void;                          | -      |      |
| appPageConfig       | 模板数据                                                                                                | 必填 | templateConfig                                                 | -      |      |
| selectId            | 当前模板显示页面 id 不填写此属性，则页面切换由内部实现                                                  |      | string/number                                                  |        |      |
| pageProps           | 页面参数                                                                                                |      | object                                                         |        |      |
| onChange            | 页面配置触发回调                                                                                        |      | (pageConfig?: pageConfig, callback?: () => void) => void;      |        |      |
| request             | web 请求体透传                                                                                          |      | any                                                            |        |      |
| jumpto              | 跳转功能透传                                                                                            |      | (path:string,isTabSelf:boolean) => void;                       |        |      |
| customGetComRequire | 自定义导入组件类方法,请参考 util.js 中的 getComRequire 实现此方法(comName, importFrom)=>component Class |      | (comName: string, importFrom: string) => React.ComponentClass; |        |      |

### getComRequire(comType,importFrom) 动态获取组件实例的公共方法

| 参数名     | 说明             | 必填 | 类型          | 默认值 | 备注 |
| ---------- | ---------------- | ---- | ------------- | ------ | ---- |
| comType    | 组件唯一表示类型 | 必填 | string        | -      |      |
| importFrom | 组件发布类型     | 必填 | "local"/"npm" | -      |      |

### dispatchResizeEvent(time) 触发浏览器 resize 事件

| 参数名 | 说明               | 必填 | 类型   | 默认值 | 备注 |
| ------ | ------------------ | ---- | ------ | ------ | ---- |
| time   | 延迟触发时间，毫秒 |      | string | 1000   |      |

## CHANGE LOG

-   1.1.1 fix bug 解决当滚动条处于下方时，组件全屏会超出屏幕的问题
-   1.1.0 新增组件全屏功能 组件属性增加 toggleFullScreen(切换) getFullScreenState(获取状态) 两个方法
-   1.0.3 更新核心依赖包 react-grid-layout 版本到 1.2.5
-   1.0.2 fix bug 1 页面生成器编辑模式，解决需要点击两次才能选中问题 2 页面生成器修改移动组件位置，保存不生效的 bug 3 修改样式
-   1.0.1 样式调整
-   1.2.0 新增编辑器套件，浏览模式套件
-   1.2.3 demo 在公网上可正常显示图片；修改组件依赖为 dev 依赖
-   1.2.5 修改一些属性缺省报错的问题
-   1.2.6 更新组件列表 d.ts;组件列表无 name 值时，使用 config.attributes.comName 显示
-   1.2.8 解决 tab 浏览模式组件 VerticalLayoutView 无法自适应高度的问题
-   1.2.9 解决全屏模式下，全局浮层被遮挡问题
-   1.2.11 tab 页签使用 jumpto 方法，实现内部跳转到指定组件所在页签功能，jumpto 方法增加第二个参数 isTabSelf。若传入第二个参数为 true，则第一个参数应被设置为目标组件的 type，用来实现当前页面页签跳转功能
-   1.2.12 tab 浏览模式，tab 页签样式右边距调整为 16px
-   2.0.1 新页面生成器第一版
-   2.0.2 修复浏览模式也可以拖拽组件的 bug；修复组件列表上边线样式
-   2.0.3 修复页面名称校验必填，drag-panel 默认参数，整体校验组件支持容器组件
-   2.0.4 组件属性面板无数据升级
-   2.0.5 修复容器内组件被拖拽到全局的问题和部分样式调整
-   2.0.6 formily 自定义组件折叠面板，修复 title 悬浮问题
-   2.0.7 formily 自定义组件折叠面板，修复样式问题
-   2.0.8 修复从组件列表拖拽容器时，响应慢，报错的问题；修复背景网格缺少边框的问题
-   2.0.9 修复组件选择切换时，导致属性面板报错的问题
-   2.0.10 组件列表修改 icon 样式以及主题包更新
-   2.0.11 网格背景改为直接在画布上绘制背景；编辑器 dom 嵌套结构去掉中间多余层；组件列表宽度调整适配出滚动条时也是 3 列布局
-   2.0.12 优化网格背景函数，产生的 style 样式不影响页面其他样式布局
-   2.0.13 画布滚动条优化，不再常驻一个纵向的滚动条了；容器内组件删除按钮样式修改，行为改为 hover 时显示；
-   2.0.14 解决组件选择切换时，fomily 报错问题；getSchma 方法增加 tryCatch，避免页面卡死；布局容器属性面板校验，去掉自定义提示样式；
-   2.0.15 解决组件选择切换时，fomily 引发报错问题，formily 实例增加 key 值。组件列表提示信息从右边弹出
-   2.0.16 当画布为空时，拖拽布局进入画布时，不出提示信息。
-   2.0.17 保存校验方法 checkAll，返回值增加 hasBusinessCom,描述页面里是否包含业务组件。
-   2.0.18 优化组件属性列表，若选中组件发生变化，才重新获取 schma 数据，否则只更新状态。
-   2.0.19 优化样式，解决组件列表出现滚动条时，滚动条无法被拖拽的样式问题
-   2.0.20 属性面板修改重绘依赖属性，仅依赖当前项 id 的变化，修改属性面板回调，仅对 attributes 值进行修改
-   2.0.21 优化组件删除后，属性面板依然存在的问题；优化容器组件选中交互为 mousedown,拖拽组件到容器后，立即选中组件
-   2.0.22 优化二次确认提示信息使用叹号图标
-   2.0.23 优化二次确认提示信息使用文案
-   2.0.24 优化当业务组件不存在时，不阻断其他组件显示；将容器组件内置到包内，不从外部依赖.
-   2.0.25 优化属性面板折叠面板样式
-   2.0.26 修正属性面板 request 属性无值问题
-   2.0.27 优化属性面板折叠面板样式
-   2.0.28 当业务组件被拖拽到画布上时，立即选中该组件并显示组件的属性面板
-   2.0.29 组件增加定义属性 stopChangeOnValidateError true/false，标记为 true 的组件，其属性面板若未通过表单校验，则阻止其 onChange 事件，不将修改数据传入画布。若为 false，则即时表单校验失败，依然会将修改数据传入画布
-   2.0.30 属性面板-自定义折叠面板组件样式修改，去掉右侧 padding
-   2.0.31 属性面板样式调整
-   2.0.32 增加属性 hideComList，实现隐藏 hideComList 内成列的组件
-   2.0.33 d.ts 代码补全文件增加新属性
-   2.0.34 组件列表更新 RiilIcon
-   2.0.35 更新皮肤库
-   2.0.36 优化编辑模式，画布下留白，方便添加新组件

[widget]: #widget