initial commit

2026-03-31 11:20:10 +08:00
commit 7013c0f25b
7 changed files with 283 additions and 0 deletions
@@ -0,0 +1,167 @@
+// 大屏设计时的配置，可以被导出/导入
+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 {}