initial commit

.gitignore

@@ -0,0 +1,34 @@
+# dependencies (bun install)
+node_modules
+
+# output
+out
+dist
+*.tgz
+
+# code coverage
+coverage
+*.lcov
+
+# logs
+logs
+_.log
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# caches
+.eslintcache
+.cache
+*.tsbuildinfo
+
+# IntelliJ based IDEs
+.idea
+
+# Finder (MacOS) folder config
+.DS_Store

README.md

@@ -0,0 +1,15 @@
+# datalive-design
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To run:
+
+```bash
+bun run index.ts
+```
+
+This project was created using `bun init` in bun v1.3.4. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

bun.lock

@@ -0,0 +1,26 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "datalive-design",
+      "devDependencies": {
+        "@types/bun": "latest",
+      },
+      "peerDependencies": {
+        "typescript": "^5",
+      },
+    },
+  },
+  "packages": {
+    "@types/bun": ["@types/bun@1.3.4", "", { "dependencies": { "bun-types": "1.3.4" } }, "sha512-EEPTKXHP+zKGPkhRLv+HI0UEX8/o+65hqARxLy8Ov5rIxMBPNTjeZww00CIihrIQGEQBYg+0roO5qOnS/7boGA=="],
+
+    "@types/node": ["@types/node@25.0.3", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA=="],
+
+    "bun-types": ["bun-types@1.3.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-5ua817+BZPZOlNaRgGBpZJOSAQ9RQ17pkwPD0yR7CfJg+r8DgIILByFifDTa+IPDDxzf5VNhtNlcKqFzDgJvlQ=="],
+
+    "typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
+
+    "undici-types": ["undici-types@7.16.0", "", {}, "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw=="],
+  }
+}

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "datalive-design",
+  "module": "index.ts",
+  "type": "module",
+  "private": true,
+  "devDependencies": {
+    "@types/bun": "latest"
+  },
+  "peerDependencies": {
+    "typescript": "^5"
+  }
+}

temp.ts

@@ -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 {}

tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    // Environment setup & latest features
+    "lib": ["ESNext"],
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleDetection": "force",
+    "jsx": "react-jsx",
+    "allowJs": true,
+
+    // Bundler mode
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "noEmit": true,
+
+    // Best practices
+    "strict": true,
+    "skipLibCheck": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+
+    // Some stricter flags (disabled by default)
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noPropertyAccessFromIndexSignature": false
+  }
+}