136 lines
4.9 KiB
TypeScript
136 lines
4.9 KiB
TypeScript
// 大屏设计时的配置
|
||
interface ScreenDesignTimeConfig {
|
||
// 大屏样式
|
||
style: {
|
||
width: number;
|
||
height: number;
|
||
background: string;
|
||
stretchMode: string; // 拉伸模式
|
||
};
|
||
// 组件配置
|
||
// 可以支持组件包含子组件
|
||
components: Array<{
|
||
id: string; // 组件id（唯一）
|
||
type: string; // 组件类型
|
||
name: string; // 组件名称（可由用户定义）
|
||
groupId?: string; // 组件所在分组ID（如果存在）
|
||
zIndex?: number; // 组件在分组中的层级
|
||
parentId?: string; // 组件的父组件ID（如果存在）
|
||
children: ScreenDesignTimeConfig["components"]; // 子组件
|
||
// 组件在画布上的布局和样式
|
||
style: {
|
||
left: number; // 组件在画布上的X轴距离
|
||
top: number; // 组件在画布上的Y轴距离
|
||
width: number; // 组件宽度
|
||
height: number; // 组件高度
|
||
rotate: number; // 组件旋转角度
|
||
visibility: string; // 组件可见性
|
||
opacity: number; // 组件透明度
|
||
pointerEvents: string; // 事件穿透
|
||
allowDrag: boolean; // 允许拖动
|
||
allowDrop: boolean; // 允许放置
|
||
};
|
||
props: {
|
||
[name: string]: any;
|
||
};
|
||
data: any; // 组件数据
|
||
dataSource: {
|
||
variableNames: Array<string>; // 关联的全局变量名称
|
||
type: "static" | "api" | "variable";
|
||
// 数据源配置
|
||
config: {
|
||
value?: any;
|
||
url?: string;
|
||
method?: "GET" | "POST";
|
||
headers?: Record<string, any>;
|
||
query?: Record<string, any>;
|
||
body?: Record<string, any>;
|
||
};
|
||
cors: boolean; // 服务器代理请求
|
||
filterIds: Array<string>;
|
||
};
|
||
// 组件交互
|
||
interaction: {
|
||
// 下游交互事件
|
||
events: Array<{
|
||
id: string;
|
||
name: string;
|
||
// 判断条件
|
||
conditions: Array<{
|
||
// 每个判断条件可以由一系列过滤器组合而成
|
||
filterIds: Array<string>;
|
||
// 交互动作
|
||
// 在配置事件动作时，先选择交互对象，再选择交互动作
|
||
// 交互对象允许多选，多选后，交互动作的范围收缩到所选交互对象共有的动作
|
||
// 如何判断一个动作是否为指定的多个交互对象所共有？动作名称与动作参数都相同
|
||
// 为什么要添加beforeAction字段？计划支持分组向内部组件分派数据，
|
||
// 即组件允许实现一个名为【更新数据】的动作（区别于【请求数据】），
|
||
// 该动作接收参数并将其直接赋值给组件数据，为了规范数据，在设计时需要在动作执行前做一些预处理
|
||
actions: {
|
||
components: Array<{
|
||
id: string; // 下游交互组件ID
|
||
name: string;
|
||
filtersReturn: any; // 与判断条件的返回值相对应
|
||
beforeAction: Array<string>; // 交互前动作（过滤器ID）
|
||
actionName: string; // 交互动作名称
|
||
params: any; // 交互动作参数
|
||
}>;
|
||
variables: Array<{
|
||
id: string;
|
||
name: string;
|
||
beforeAction: Array<string>; // 交互前动作（过滤器ID）
|
||
actionName: string; // 交互动作名称
|
||
params: any; // 交互动作参数
|
||
}>;
|
||
};
|
||
}>;
|
||
}>;
|
||
};
|
||
}>;
|
||
groups: Array<{
|
||
id: string;
|
||
name: string;
|
||
children: Array<string>;
|
||
}>;
|
||
// 全局变量
|
||
// 如果一个全局变量的数据源是静态数据源，则只通过组件的事件去更新变量
|
||
// 如果一个全局变量的数据源是API，则尽量不要由组件事件去更新这个变量
|
||
// 进阶场景：全局变量可以定时请求数据，并配置“当数据更新时”事件，
|
||
// 对应的交互行为是使某个分组下的组件更新数据，这些组件也同时配置了数据源为该全局变量，
|
||
// 进而达到降低请求量的目的。
|
||
// 在选择下游交互组件时，应当是“分组-组件”的级联选择
|
||
variables: Array<{
|
||
id: string;
|
||
name: string;
|
||
description?: string;
|
||
data: any;
|
||
dataSource: {
|
||
type: "static" | "api";
|
||
// 数据源配置
|
||
config: {
|
||
value?: any;
|
||
url?: string;
|
||
method?: "GET" | "POST";
|
||
headers?: Record<string, any>;
|
||
query?: Record<string, any>;
|
||
body?: Record<string, any>;
|
||
};
|
||
cors: boolean;
|
||
filterIds: Array<string>;
|
||
};
|
||
}>;
|
||
// 过滤器
|
||
filters: Array<{
|
||
id: string;
|
||
name: string;
|
||
payload: string; // (data: any, variables: any) => Promise<any>
|
||
}>;
|
||
}
|
||
|
||
// 组件的分类：
|
||
// 1. 数据组件：大屏中的组件
|
||
// 2. 控制组件：大屏中的悬浮组件，可拖拽，贴边时可隐藏，比如一个控制面版用于操作摄像机/录像机等设备
|
||
// 3. 反馈组件：弹窗（全局，带遮罩）
|
||
|
||
interface ScreenRuntimeConfig {}
|