168 lines
6.4 KiB
TypeScript
168 lines
6.4 KiB
TypeScript
// 大屏设计时的配置，可以被导出/导入
|
||
export interface PageDesignModeConfig {
|
||
id: string;
|
||
name: string;
|
||
author: string;
|
||
createdTime: string;
|
||
updatedTime: string;
|
||
// 大屏样式
|
||
style: {
|
||
width: number;
|
||
height: number;
|
||
background: string;
|
||
stretchMode: string; // 拉伸模式
|
||
};
|
||
// 组件配置
|
||
// 可以支持组件包含子组件 (对于地图组件，它的子组件是逻辑层面的而并非大屏上的真实组件，因此不算作子组件)
|
||
// 例如可以设计对话框和悬浮窗组件，例如它们的type分别为 Modal 和 FloatingPanel，
|
||
// 当在物料区的图层编辑器中点击编辑该组件时，会打开一个新的屏幕设计器，物料区中加载子组件。
|
||
// 将分组(group)也视为一种特殊的组件，统一在components数组中管理，从而实现统一的图层排序能力。
|
||
components: Array<{
|
||
id: string; // 组件id(唯一)
|
||
type: string; // 组件类型
|
||
name: string; // 组件名称(可由用户定义)
|
||
parentId?: string; // 组件的父组件ID(如果存在)，没有parentId的组件称为顶层组件
|
||
// 当多个顶层组件成组时，组件的层级会被修改，也就是说分组并不是组件层级的参考系，组件的层级永远只与大屏和父组件有关
|
||
zIndex?: number; // 组件在大屏/父组件中的层级
|
||
children: Array<PageDesignModeConfig['components'][0]['id']>; // 子组件id
|
||
// 设计时属性，运行时会忽略
|
||
design: {
|
||
hidden: boolean;
|
||
locked: boolean;
|
||
};
|
||
// 组件在画布上的布局和样式
|
||
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; // 组件数据
|
||
// 数据源配置
|
||
// 如何使用？提供编辑器给用户编写查询内容，允许使用mustache模板语法
|
||
// 来引用全局变量，且支持路径访问。
|
||
// 例如：现有全局变量 user ，内容是 { id: '1', name: 'zhangsan' }，
|
||
// 则可以使用 {{ user.id }} 来引用 user.id ，即 '1'
|
||
dataSource: {
|
||
// 支持多数据源查询
|
||
queries: Array<{
|
||
id: string; // 查询ID，例如 'A', 'B'
|
||
name: string; // 查询名称
|
||
type: 'static' | 'variable' | 'api' | 'graphql';
|
||
config: {
|
||
value?: any;
|
||
variableNames?: Array<string>; // 关联的全局变量名称
|
||
api?: {
|
||
url?: string;
|
||
method?: 'GET' | 'POST';
|
||
headers?: Record<string, any>;
|
||
query?: Record<string, any>;
|
||
body?: Record<string, any>;
|
||
};
|
||
graphql?: {
|
||
query?: string;
|
||
variables?: Record<string, any>;
|
||
};
|
||
};
|
||
cors?: boolean; // 服务器代理请求
|
||
}>;
|
||
// 过滤器现在可以接收多个查询的结果，例如 { A: data, B: data }
|
||
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; // 交互动作参数
|
||
}>;
|
||
};
|
||
}>;
|
||
}>;
|
||
};
|
||
}>;
|
||
// 全局变量
|
||
// 如果一个全局变量的数据源是静态数据源，则只通过组件的事件去更新变量
|
||
// 如果一个全局变量的数据源是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: { queryId: string; queryData: any }[], variables: any) => Promise<any>
|
||
}>;
|
||
}
|
||
|
||
export interface AppDesignModeConfig {
|
||
id: string;
|
||
name: string;
|
||
routes: Array<{
|
||
path: string;
|
||
name?: string;
|
||
pageId: string;
|
||
children?: AppDesignModeConfig['routes'];
|
||
}>;
|
||
}
|
||
|
||
// export interface PagePreviewModeConfig {}
|
||
|
||
// export interface PagePublishModeConfig {}
|