From 7013c0f25b5e48064800154a5515e029174f7e82 Mon Sep 17 00:00:00 2001 From: skycurtain Date: Tue, 31 Mar 2026 11:20:10 +0800 Subject: [PATCH] initial commit --- .gitignore | 34 ++++++++++ README.md | 15 +++++ bun.lock | 26 ++++++++ index.ts | 0 package.json | 12 ++++ temp.ts | 167 ++++++++++++++++++++++++++++++++++++++++++++++++++ tsconfig.json | 29 +++++++++ 7 files changed, 283 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 bun.lock create mode 100644 index.ts create mode 100644 package.json create mode 100644 temp.ts create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a14702c --- /dev/null +++ b/.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 diff --git a/README.md b/README.md new file mode 100644 index 0000000..ea57710 --- /dev/null +++ b/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. diff --git a/bun.lock b/bun.lock new file mode 100644 index 0000000..f9cb140 --- /dev/null +++ b/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=="], + } +} diff --git a/index.ts b/index.ts new file mode 100644 index 0000000..e69de29 diff --git a/package.json b/package.json new file mode 100644 index 0000000..156d736 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "datalive-design", + "module": "index.ts", + "type": "module", + "private": true, + "devDependencies": { + "@types/bun": "latest" + }, + "peerDependencies": { + "typescript": "^5" + } +} diff --git a/temp.ts b/temp.ts new file mode 100644 index 0000000..16f44d7 --- /dev/null +++ b/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; // 子组件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; // 关联的全局变量名称 + api?: { + url?: string; + method?: 'GET' | 'POST'; + headers?: Record; + query?: Record; + body?: Record; + }; + graphql?: { + query?: string; + variables?: Record; + }; + }; + cors?: boolean; // 服务器代理请求 + }>; + // 过滤器现在可以接收多个查询的结果，例如 { A: data, B: data } + filterIds: Array; + }; + // 组件交互 + interaction: { + // 下游交互事件 + events: Array<{ + id: string; + name: string; + // 判断条件 + conditions: Array<{ + // 每个判断条件可以由一系列过滤器组合而成 + filterIds: Array; + // 交互动作 + // 在配置事件动作时，先选择交互对象，再选择交互动作 + // 交互对象允许多选，多选后，交互动作的范围收缩到所选交互对象共有的动作 + // 如何判断一个动作是否为指定的多个交互对象所共有？动作名称与动作参数都相同 + // 为什么要添加beforeAction字段？计划支持分组向内部组件分派数据， + // 即组件允许实现一个名为【更新数据】的动作(区别于【请求数据】)， + // 该动作接收参数并将其直接赋值给组件数据，为了规范数据，在设计时需要在动作执行前做一些预处理 + actions: { + components: Array<{ + id: string; // 下游交互组件ID + name: string; + filtersReturn: any; // 与判断条件的返回值相对应 + beforeAction: Array; // 交互前动作(过滤器ID) + actionName: string; // 交互动作名称 + params: any; // 交互动作参数 + }>; + variables: Array<{ + id: string; + name: string; + beforeAction: Array; // 交互前动作(过滤器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; + query?: Record; + body?: Record; + }; + cors: boolean; + filterIds: Array; + }; + }>; + // 过滤器 + filters: Array<{ + id: string; + name: string; + payload: string; // (data: { queryId: string; queryData: any }[], variables: any) => Promise + }>; +} + +export interface AppDesignModeConfig { + id: string; + name: string; + routes: Array<{ + path: string; + name?: string; + pageId: string; + children?: AppDesignModeConfig['routes']; + }>; +} + +// export interface PagePreviewModeConfig {} + +// export interface PagePublishModeConfig {} diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..bfa0fea --- /dev/null +++ b/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 + } +}