> ⚠️ 注意： 此包已废弃，dtv-sdk 已经迁移到 @enos-iot/dtv-sdk，请前往新页面获取最新版本信息。

- 1 描述
- 2 安装
- 安装方法
- 依赖说明
- 3 使用手册
- 3.1 SDK 全局配置与环境变量
- 3.1.1 全局配置
- 配置项
- 3.1.2 环境变量
- dtv\_debug 开启日志打印
- 3.2 DTV Dashboard 模块
- 3.2.1 以组件方式使用(推荐)
- 示例:
- 类型定义:
- token传递说明:
- 3.2.2 直接使用 SDK
- 3.2.2.1 初始化页面实例
- 3.2.2.2 class interface
- 3.2.2.3 接口
- subscribeActions
- switchToEdit
- switchToDisplay
- getBusinessWidgets
- addWidgetFromTemplate
- refreshPage
- saveLayout
- changePage
- changeFilter
- cancelEdit
- on
- off
- dispatchEvent
- getWidgetsList
- setWidgetVisible
- setToken
- 3.3 DTV Form Builder 模块
- 3.3.1 以组件方式使用-运行态(推荐)
- token传递说明:
- 3.3.2 以组件方式使用-设计器态
- 3.3.3 通过方法调用
- 3.3.4 方法列表
- changeForm
- getFormData
- validateFormData
- onSubmit
- beforeSave
- subscribeActions
- 3.4 DTV Designer APP 模块
- 3.4.1 以组件方式使用-运行态(推荐)
- token传递说明:
- 3.4.2 通过方法调用
- 3.4.3 方法列表
- changeApp
- changeParams
- 3.5 Frame SDK 模块
- 3.5.1 使用方式
- 3.5.2 方法列表
- getPageParams
- subscribePageParams
- changeParams
- 4 Change log
- 2.4.8
- 2.4.6
- 2.4.5
- 2.4.4
- 0.0.12
- 0.0.11
- 0.0.10
- 0.0.8
- 0.0.7
- 0.0.4
- 0.0.1
- 5 Interface
- 成员

1 描述

此为EnOS DTV SDK 使用说明文档
利用此SDK可以在宿主页面和DTV创建的页面之间构建通信通道和调用方法，提供比如
* 切换显示模式
* 添加删除Widget
* 操作和控制表单
* 修改个人信息等

2 安装

安装方法

使用 yarn
``
yarn add @envision-digital/dtv-sdk
`
使用 npm

`
npm install @envision-digital/dtv-sdk
`

依赖说明

此SDK依赖对应的DTV版本，功能和提供的方法向前兼容，如果SDK版本高于对应的服务版本，部分功能或不可用

| SDK版本 | DTV 服务版本 | 说明 |
|----------|------------|-------|
|2.4.4 | >= 2.4.4 | |
|0.0.12 | >= SP202210 | |
|0.0.11 | >= SP202208 | |
|0.0.10 | >= SP202206 | |

3 使用手册

3.1 SDK 全局配置与环境变量

$3

同域使用sdk，需确保开启同域调用开关
`javascript
import {setConfig} from '@envision-digital/dtv-sdk';
setConfig({enableDirectCall: true});
`

##### 配置项
- enableDirectCall: 开启同域调用优化，默认关闭

$3

##### dtv_debug 开启日志打印
为保证性能，SDK 默认不再向控制台打印 api 调用信息，如需开启，可以：
- 在 localStorage 中设置标志 dtv_debug = true, 或者
- 在控制台输入 localStorage.setItem('dtv_debug', true)

3.2 DTV Dashboard 模块

$3

#### 示例:
`js
import React, {useRef, useEffect} from 'react';
import {Page} from '@envision-digital/dtv-sdk';

const DTVPage = Page.Component;

const Component = () => {
const ref = useRef(null);

useEffect(() => {
const instance = ref.current.getDTVInstance(); 获取 SDK 实例
const frame = ref.current.getDTVFrame(); 获取 IFrame 节点
// ...
}, []);

return (
ref={ref}
baseUri='https://xxx/dt/enos/page'
id='xxx'
filters={{mdmId: 'xxx', startTime: 'xxx', endTime: 'xxx'}}
responsiveMode='web'
/>
)
}
`

#### 类型定义:
`ts
interface PageRenderProps {
id?: string; // 页面 id
baseUri: string; // 对应环境路由
filters?: Record; // 过滤器传参，参考 changePage filters 参数
responsiveMode?: 'mb' | 'web' | 'lg'; // 响应模式
style?: React.CSSProperties; // 渲染页面 iframe 的样式
defaultParams?: any[]; // 页面初始化传参，参考 changePage events 参数
token?: string; // iam token
subscribeActions?: actions; // 注册接收页面事件
embedded?: boolean; // 嵌入模式
defer?: boolean; // 延迟加载
state?: string; // 额外 url 传参
onError?: onErrorFn; // 监听发布页面返回错误等事件
}

type onErrorFn = (err: PageError) => void;

type PageError = {
errType: ErrType;
}

enum ErrType {
NO_EXIST_RELEASE_PAGE,
// 待扩展
}

`

#### token传递说明:
为了安全考虑，token将不再在url中明文传递。同域使用sdk，需确保开启同域调用 setConfig({enableDirectCall: true})。

$3

`js
import DTVPageSDK from '@envision-digital/dtv-sdk'
`

$3

创建页面实例

`ts
const instance = new DTVPageSDK(pageId: string, targetWindow: Window);
`

参数：
* pageId: 对应渲染页面的id，识别和校验数据(安全考虑)
* targetWindow: 渲染了DTV页面的window实例，用来定位页面

$3

详情见最后

$3

实例对象暴露的接口列表

#### subscribeActions
注册page页面的事件接收


示例：
`ts
instance.subscribeActions({ onWidgetDelete, onCancelEdit, onSavePage})
`

参数：
* onWidgetDelete
当用户点击某个widget，想要移除widget时调用
* widgetId: 想要删除的widget的Id
* onCancelEdit
当用户取消编辑编辑时调用
* onSavePage
当用户保存当前编辑页面时调用, 入参为最新保存的页面id
* onError
监听发布页面返回错误等事件

声明：
`ts
type onWidgetDeleteFn = (widgetId：stirng) => void;
type onCancelEditFn = (widgetId：stirng) => void;
type onSavePageFn = ({pageId: string}) => void;
type onErrorFn = (err: PageError) => void;

type PageError = {
errType: ErrType;
}

enum ErrType {
NO_EXIST_RELEASE_PAGE,
// 待扩展
}

`

返回：
无返回

#### switchToEdit

进入编辑模式

使用场景：
运行态

示例：
`ts
instance.switchToEdit({enableOnlineEdit: true, disableDelete: true, disableEdit: true}): Promise
`

参数：
- enableOnlineEdit: 是否开启在线编辑功能，默认不开启
- disableDelete: 是否禁用删除组件功能，默认不禁用
- disableEdit: 是否禁用编辑组件功能，默认不禁用

返回：
Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`


#### switchToDisplay
回到只读模式
使用场景：
编辑态
示例：
`ts
instance.switchToDisplay(): Promise
`
参数：
无

返回：

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### getBusinessWidgets

获取可选的业务组件模板
使用场景：
编辑态
示例：
`ts
instance.getBusinessWidgets(): Promise
`

参数：
无

返回：
* code: 0 | 1; 标记请求成功或者失败
* message: string； 如果成功则为空，如果失败，会有失败的message
* data: 返回的数据，格式如下
`ts
type BusinessWidgetTemplate = {   
name: string;   
id: string;   
tags: string[];   
thumbnail: string; // a url
}

interface BusinessWidgetsReturn extends FunctionReturn {   
data: BusinessWidgetTemplate[] | [];
}
`

#### addWidgetFromTemplate
添加 business widget到当前 page
使用场景：
编辑态
示例：
`ts
instance.addWidgetFromTemplate(templateId: string): Promise
`

参数：
* templateId: 需要添加的business widget Id

返回：
Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### refreshPage
重新渲染整个页面，一般在保存之后，可能需要调用
使用场景：
运行态
示例：
`ts
instance.refreshPage(): Promise
`

参数：
无

返回：

Promise
`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### saveLayout

保存布局修改
使用场景：
编辑态
示例：
`ts
instance.saveLayout(isSaveNew: boolean): Promise
`

参数：
- isSaveNew: 是否保存为新页面

返回：

Promise

`TS
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### changePage

修改页面展示的内容，页面id
使用场景：
运行态

示例：
`ts
instance.changePage({
id: 'new-page-id',
filters: {
test: 'app-portal'
}
});
`

参数：
`ts
export type PageChangeParams = {
id: string;
filters: {
[key: string]: string;
};
events?: EventOption[], // 详见 dispatchEvent 方法
dataType?: 'normal' | 'mock' | 'cache'
}
`

#### changeFilter
改变页面filter

使用场景：
运行态

示例：
`ts
instance.changeFilter({test: 'apim-web'});
`

参数：
`ts
type filters = {
[key:string]: string
}
`

#### cancelEdit
退出编辑态

使用场景：
编辑态

示例：
`ts
instance.cancelEdit(): Promise
`

参数：
无

#### on
绑定通用事件处理函数

示例：
`ts
instance.on(eventType: EventType, handler: EventHandler)
`

参数：
* eventType: 事件类型
* handler: 事件处理函数

`ts
type EventType = 'custom' | '...'; // 待扩展

type EventInfo = {
source: 'dtd' | 'dtm';
pageId: string;
timestamp: string;
eventType: string; // 事件类型
payload: any; // 事件携带信息，依据事件类型而定
}

interface EventHandler {
(eventInfo: EventInfo): void
}
`

#### off
解绑通用事件处理函数

示例：
`ts
instance.off(eventType, handler: EventHandler)
`

参数：
参考 on 方法

#### dispatchEvent
向 DTV 组件派发事件

使用场景：
运行态

示例：
`ts
instance.dispatchEvent({
cageCode: 'MTD',
eventType: 'container.changeCurrentTab',
payload: {tabIndex: 1}
}: EventOption | EventOption[]);
`

参数：
`ts
interface EventOption {
eventType: string; // 事件类型
cageCode?: string; // 组件标识码
payload?: any; // 事件携带信息
}
`

> 组件最新的事件支持信息联系 DTV 相关方获取

#### getWidgetsList
获取页面中组件及隐藏区组件列表

使用场景：
编辑态

示例：
`ts
instance.getWidgetsList(pageId: string): Promise
`

参数：
* pageId：需要获取的组件及隐藏区组件列表的pageId

返回：
* code: 0 | 1; 标记请求成功或者失败
* message: string； 如果成功则为空，如果失败，会有失败的message
* data: 返回的数据，格式如下
`ts
type WidgetsList = {
widgetId: string;
name: string;
visible: boolean;
}

interface WidgetsListReturn extends FunctionReturn {   
data: WidgetsList[] | [];
}
`

#### setWidgetVisible
设置组件是否隐藏

使用场景：
编辑态

示例：
`ts
instance.setWidgetVisible(widgetId: string, visible： boolean): Promise
`

参数：
* widgetId: 需要设置的组件的id
* visible: 需要将所选组件设为隐藏时为false，设置为不隐藏时为true

返回：
Promise
`ts
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### setToken
设置dtv_sdk_token

示例：
`ts
instance.setToken(token: string)
`

参数：
* token: 传递dtv_sdk_token

说明：
1. 使用iframe且为同域场景，需在iframe onload阶段调用setToken方法传递token，若token发生更新，也可调用该方法更新token。
2. 使用iframe且为非同域场景，建议升级使用DTV Component。

3.3 DTV Form Builder 模块

$3

- 示例:
`javascript
import React, {useRef, useEffect} from 'react';
import {Form} from '@envision-digital/dtv-sdk';

const DTVForm = Form.Component;

const Component = () => {
const ref = useRef(null);

useEffect(() => {
const instance = ref.current.getDTVInstance(); // 获取 SDK 实例
const frame = ref.current.getDTVFrame(); // 获取 IFrame 节点
// ...
}, []);

return (
ref={ref}
baseUri='https://xxx/dt/enos/form'
id='xxx'
/>
)
}
`

- 类型定义:
`ts
interface FormRenderProps {
id?: string; // 表单页面 id
baseUri: string; // 对应环境路由
formMode?: FORM_MODE; // 表单页面初始展示模式
formSchema?: FormSchema; // 表单的Schema， FormSchema & id 二选一填写，都填写已id 为准
formData?: any; // 表单页面初始值
style?: React.CSSProperties; // 渲染表单页面 iframe 的样式
token?: string; // iam token
state?: string; // 额外 url 传参
options?: FormOptions; // 表单运行的其他配置内容
styleCode?: string; // 表单额外的样式
onChange?: onChangeFn; // 注册表单data发生变化时的响应事件
onAction?: onActionFn; // 表单本身渲染按钮，用户点击按钮后触发该事件
}

type FormOptions = {
layout?: 'vertical' | 'horizontal' // 表单的布局
labelWrap?: boolean; // 表单label是否折行
}

type FormSchema = {
form: any;
schema: any;
actionMeta?: any;
}
`

#### token传递说明:
为了安全考虑，token将不再在url中明文传递。同域使用sdk，需确保开启同域调用 setConfig({enableDirectCall: true})。

$3

- 示例:
`javascript
import React, {useRef, useEffect} from 'react';
import {Form} from '@envision-digital/dtv-sdk';

const FormDesinger = Form.DesingerComponent;

const Component = () => {
const ref = useRef(null);

useEffect(() => {
const instance = ref.current.getDTVInstance(); // 获取 SDK 实例
const frame = ref.current.getDTVFrame(); // 获取 IFrame 节点
// ...
}, []);

return (
ref={ref}
baseUri='https://xxx/dt/enos/form'
id='xxx'
targetPage='editor'
/>
)
}
`

- 类型定义:
`ts
interface FormDesignerRenderProps {
id: string; // 表单页面 id
baseUri: string; // 对应环境路由
style?: React.CSSProperties; // 渲染表单页面 iframe 的样式
token?: string; // iam token
state?: string; // 额外 url 传参
targetPage: Target; // 指定渲染的目标页面
onReturn: () => void; // 注册页面返回时的响应事件
onPublish: () => void; // 注册发布页面后的响应事件
beforeSave: (formSchema) => Promise; // 用户点击保存时调用，方便第三方校验表单schema, 校验成功返回Promise.resolve(), 校验是否需返回错误信息Promise.reject({msg: 'xxx'})
}

type Target = {
EDITOR: 'editor'; // 渲染表单编辑页
DETAIL: 'detail'; // 渲染表单详情页（版本管理页）
}
`

$3

`js
import {Form as DTVFormSDK} from '@envision-digital/dtv-sdk'
`

- 初始化页面实例：

`ts
const instance = new DTVFormSDK(pageId: string, targetWindow: Window);
`

- 参数：
* pageId: 对应渲染页面的id，识别和校验数据(安全考虑)
* targetWindow: 渲染了DTV页面的window实例，用来定位页面

$3

详情见最后
实例对象暴露的接口列表

#### changeForm
切换表单id，表单状态及表单数据时使用

使用场景：
运行态和设计态

示例：
`ts
instance.changeForm({
id: string
}): Promise


type FormChangeParams = {
id?: string;
formSchema?: FormSchema;
formMode?: FORM_MODE;
formData?: any;
options?: FormOptions;
styleCode?: string;
}
`

参数：
* id: 需要修改的表单id
* formSchema: 表单的schema，FormSchema & id 二选一填写，都填写以 id 为准
* formMode: 切换表单状态(只读态或输入态)
* formData: 表单接收的外部数据

返回：

Promise
`ts
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

`ts
enum FORM_MODE {
INPUT = 'input', // 输入态
READ_ONLY = 'readOnly' // 只读态
}
`

#### getFormData
获取表单数据

使用场景：
运行态

示例：
`ts
instance.getFormData(formId: string): Promise
`

参数：
* formId: 表单id

返回：
Promise
`ts
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### validateFormData
校验表单

使用场景：
运行态

示例：
`ts
instance.validateFormData(formId: string): Promise
`

参数：
* formId: 表单id

返回：
Promise
`ts
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### onSubmit
提交表单数据方法，校验表单后，返回当前表单的数据

使用场景：
运行态

示例：
`ts
instance.onSubmit(): Promise
`

参数：
无

返回：
Promise
`ts
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### beforeSave
用户点击保存时调用（仅限同域调用），方便第三方校验表单schema, 校验成功返回Promise.resolve(), 校验是否需返回错误信息Promise.reject({msg: 'xxx'})

使用场景：
设计态

示例：
`ts
instance.beforeSave(beforeSaveFn): Promise

type beforeSaveFn = (formSchema) => Promise
`

参数：
* beforeSaveFn: 真正保存前校验表单的方法

返回：
Promise
`ts
type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

enum status {  
success = 0,  
error = 1
}
`

#### subscribeActions
注册form的事件接收


示例：
`ts
instance.subscribeActions({
onAction: ({data, actionKey}) => {},
onChange: (formData) => {},
onReturn: () => {},
onPublish: () => {}
})

`

参数：
* onAction
表单渲染按钮场景下，用户点击表单按钮后调用, 运行态使用
* data: 表单提交的实体信息
* actionKey: 用户点击的按钮的key
* onChange
表单数据发生变化时调用, 运行态使用
* formData: 表单当前数据
* onReturn
用户点击返回按钮时调用，设计态使用
* onPublish
用户发布页面后调用，设计态使用

声明：
`ts
type onActionFn = ({data: any, actionKey: string}) => void;
type onChangeFn = (formData: object) => void;
type onReturnFn = () => void;
type onPublishFn = () => void;
`

返回：
无返回

3.4 DTV Designer APP 模块

$3

- 示例:
`javascript
import React, {useRef, useEffect} from 'react';
import {App} from '@envision-digital/dtv-sdk';

const DTVApp = Form.App;

const Component = () => {
const ref = useRef(null);

useEffect(() => {
const instance = ref.current.getDTVInstance(); // 获取 SDK 实例
const frame = ref.current.getDTVFrame(); // 获取 IFrame 节点
// ...
}, []);

return (
ref={ref}
baseUri='https://xxx/dt/enos/app'
id='xxx'
params={{mdmId: 'xxx', startTime: 'xxx', endTime: 'xxx', interval: 'D'}}
/>
)
}
`

- 类型定义:
`ts
interface PageRenderProps {
id?: string; // 应用 id
baseUri: string; // 对应环境路由
params?: Record; // 过滤器传参，参考 changePage filters 参数
style?: React.CSSProperties; // 渲染页面 iframe 的样式
token?: string; // iam token
state?: string; // 额外 url 传参
}

interface DTVAppInstance {
changeApp: (appId: AppChangeParams) => void;
changeParams: (navParams: Record) => void;
}

type PageChangeParams = {
id: string;
params: {
[key: string]: string;
};
}
`

#### token传递说明:
为了安全考虑，token将不再在url中明文传递。同域使用sdk，需确保开启同域调用 setConfig({enableDirectCall: true})。

$3

`js
import {App as DTVAppSDK} from '@envision-digital/dtv-sdk'
`

- 初始化页面实例：

`ts
const instance = new DTVAppSDK(appId: string, targetWindow: Window);
`

- 参数：
* appId: 对应渲染页面的id，识别和校验数据(安全考虑)
* targetWindow: 渲染了DTV应用的window实例，用来定位页面

$3

#### changeApp

修改页面展示的内容，页面id
使用场景：
运行态

示例：
`ts
instance.changeApp({
id: 'new-app-id',
params: {
siteIds: 'xxx',
interval: 'D',
starTime: '2000-01-01',
endTime: '2024-12-12'
}
});
`

参数：
`ts
export type AppChangeParams = {
id: string;
params: {
[key: string]: string | number;
};
}
`

#### changeParams
改变应用的导航器参数

示例：
`ts
instance.changeParams({siteIds: 'aaa'});
`

参数：
`ts
type filters = {
[key: string]: string | number;
}
`

3.5 Frame SDK 模块

使用场景：当第三方页面嵌入 DTV Frame 组件中时，需要获取或者监听 DTV 页面参数的变化

> DTV 页面参数定义
> - DTD 中：全局过滤器参数
> - APP 中：所有导航器参数

$3

- 示例:
`javascript
import React, {useRef, useEffect} from 'react';
import {FrameSDK} from '@envision-digital/dtv-sdk';

const FramePage = () => {
const [pageParams, setPageParams] = useState(null);
const sdkInstance = useMemo(() => new FrameSDK(), []);

useEffect(() => {
sdkInstance.getPageParams().then((res) => {
setPageParams(res?.data);
});
}, []);

const handlePageParamsChange = (params) => {
setPageParams(params);
}

useEffect(() => {
sdkInstance.subscribePageParams(handlePageParamsChange);
})

return (

{JSON.stringify(pageParams)}

);
};
`

$3

#### getPageParams
获取当前的页面参数

示例：
`ts
instance.getPageParams(): Promise;
`

返回：
* code: 0 | 1; 标记请求成功或者失败
* message: string； 如果成功则为空，如果失败，会有失败的message
* data: 返回的数据，格式如下
`ts
type PageParamsReturn = Record
`

#### subscribePageParams
监听页面参数变化

示例：
`ts
instance.subscribePageParams(
onChangeCallback: (pageParams: Record) => void
): void;
`

#### changeParams
改变应用的导航器参数

示例：
`ts
instance.changeParams({siteIds: 'aaa'});
`

参数：
`ts
type filters = {
[key: string]: string | number;
}
`

4 Change log

2.4.10

* FrameSDK增加changeParams能力，可以修改应用导航器参数

2.4.8

* 支持外部页面通过 App SDK 调度 Designer App
* 支持在 iframe 组件中嵌入的三方页面通过 frame sdk 获取/监听页面全局参数

2.4.6

* support esm

2.4.5

* 一些优化

2.4.4

* 不再通过url传递token，且提供了setToken方法。使用DTV Component和iframe分别参考说明操作
* DTVPage新增onError方法，用于监听发布页面返回等错误
* 不再使用onWidgetEdit, onWidgetSave, onWidgetCancel, onPageChage注册事件
* 新增onCancelEdit, onSavePage注册事件
* 修改switchToEdit方法，新增参数{enableOnlineEdit: boolean}
* 不再使用deleteWidget方法
* 不再使用refreshWidget方法
* 定义了部分方法的使用场景
* 修改DTVPage组件引用方式
* 新增DTVForm、FormDesinger组件使用方法
* 新增changeForm, getFormData, validateFormData, onAction，onChange，onChange，onReturn，onPublish, onReturn，onPublish, beforeSave表单页面相关方法

0.0.12

* 增加 getWidgetsList 方法用于获取页面中组件及隐藏区组件列表
* 增加 setWidgetVisible 方法用于设置组件是否隐藏
* 增加 DTVPage 组件
* 增加 SDK 配置功能

0.0.11

* 增加 dispatchEvent 方法用于向 DTV 组件派发消息
* changePage 增加 events 传参

0.0.10

* 增加 on 和 off 方法用于监听 DT 通用事件

0.0.8

* 修改saveLayout方法，接收参数 isSaveNew

0.0.7

* 修改switchToEdit方法，新增接受参数{disableDelete: boolean, disableEdit: boolean}

0.0.4

* 添加changePage 接口，可以实时修改展示的页面
* 添加修改外部filter接口，无缝修改数据

0.0.1

* 初始化接口

5 Interface

$3

` TS
enum PageMode {  
DISPLAY = 0,  
EDIT = 1,  
INPLACE_EDIT = 2,  
PREVIEW = 3
}

type PageProfile = {   
filters: any[];
}

type onWidgetDeleteFn = (widgetId) => void;
type onCancelEditFn = (widgetId：stirng) => void;
type onSavePageFn = ({pageId: string}) => void;
type onSubmit = ({data: any, actionKey: string}) => void;

type onActionFn = ({data: any, actionKey: string}) => void;
type onChangeFn = (formData: object) => void;
type onReturnFn = () => void;
type onPublishFn = () => void;
type onErrorFn = (err: PageError) => void;

type PageError = {
errType: ErrType;
}

enum ErrType {
NO_EXIST_RELEASE_PAGE,
// 待扩展
}

type actions = {   
onWidgetDelete: onWidgetDeleteFn;   
onCancelEdit: onCancelEditFn;
onSavePage: onSavePageFn;
}

type BusinessWidgetTemplate = {   
name: string;   
id: string;   
tags: string[];   
thumbnail: string; // a url
}

type WidgetsList = {
widgetId: string;
name: string;
visible: boolean;
}

type FunctionReturn = {   
code: status;   // 请求是否成功
message?: string;    // 请求失败的message
data?: any // 请求返回的数据
}

interface BusinessWidgetsReturn extends FunctionReturn {   
data: BusinessWidgetTemplate[] | [];
}

interface WidgetsListReturn extends FunctionReturn {   
data: WidgetsList[] | [];
}

type PageChangeParams = {
id: string;
filters: {
[key: string]: string;
};
events?: EventOption[], // 详见 dispatchEvent 方法
dataType?: 'normal' | 'mock' | 'cache'
}

type FormChangeParams = {
id?: string;
formMode?: FORM_MODE;
formData?: any;
formSchema?: FormSchema;
options?: FormOptions;
styleCode?: string;
}

enum status {  
success = 0,  
error = 1
}

enum FORM_MODE {
INPUT = 'input', // 输入态
READ_ONLY = 'readOnly' // 只读态
}

interface SDKConsumer {   
targetWindow: Window;   
pageId: string;   
mode: PageMode = PageMode.DISPLAY;   
onWidgetDelete: onWidgetDeleteFn;   
onCancelEdit: onCancelEditFn;
onSavePage: onSavePageFn;
}
``