Phase 93 — 低代码平台设计
版本: v4.5.0 创建日期: 2026-03-10 状态: ✅ 已实现
一、模块概述
Phase 93 实现企业级低代码应用构建平台，支持可视化拖拽设计器、15种内置组件、多数据源连接（REST/GraphQL/DB/CSV）、应用版本管理与一键回滚，使非技术人员也能快速构建业务应用。
1.1 核心目标
- 可视化构建: 拖拽式App Builder，支持页面布局、表单、图表等15种内置组件
- 数据源集成: 统一连接REST API、GraphQL端点、数据库和CSV文件
- 版本管理: 应用设计稿自动版本化，支持历史回溯和一键回滚
- 发布与导出: 应用预览、一键发布、导出为独立包
1.2 技术架构
┌───────────────────────────────────────────────────────┐
│ Low-Code Platform │
│ │
│ ┌──────────────────┐ ┌───────────────────────────┐ │
│ │ App Builder │ │ Component Registry │ │
│ │ 可视化拖拽设计器 │ │ 15种内置组件（表单/图表 │ │
│ │ 页面布局引擎 │ │ /表格/容器/按钮/文本等） │ │
│ └──────────────────┘ └───────────────────────────┘ │
│ ┌──────────────────┐ ┌───────────────────────────┐ │
│ │ DataSource Mgr │ │ Version Manager │ │
│ │ REST/GraphQL │ │ 设计稿快照存储 │ │
│ │ DB/CSV连接器 │ │ 版本比对与一键回滚 │ │
│ └──────────────────┘ └───────────────────────────┘ │
│ ┌────────────────────────────────────────────────────┐│
│ │ Publish & Export Engine ││
│ │ 预览沙箱 → 发布部署 → 导出独立包 ││
│ └────────────────────────────────────────────────────┘│
└───────────────────────────────────────────────────────┘二、核心模块设计
2.1 AppBuilder (enterprise/low-code/app-builder.js)
可视化应用构建引擎，管理应用生命周期和组件编排。
核心方法:
createApp(name, template)— 创建新应用（可选模板初始化）saveDesign(appId, designData)— 保存应用设计稿（自动生成版本快照）preview(appId)— 生成预览沙箱，渲染当前设计publish(appId, options)— 发布应用（生产模式打包）listComponents()— 获取15种内置组件列表及元数据addDataSource(appId, config)— 添加数据源连接（REST/GraphQL/DB/CSV）testConnection(datasourceConfig)— 测试数据源连通性getVersions(appId)— 获取应用版本历史列表rollback(appId, versionId)— 回滚至指定版本exportApp(appId, format)— 导出应用为独立包
2.2 内置组件列表
| 序号 | 组件 | 类型 | 说明 |
|---|---|---|---|
| 1 | Form | 输入 | 表单容器，支持校验规则 |
| 2 | Table | 展示 | 数据表格，支持排序/过滤/分页 |
| 3 | Chart | 可视化 | 图表组件（柱状/折线/饼图） |
| 4 | Button | 交互 | 按钮，绑定动作和事件 |
| 5 | Text | 展示 | 富文本/Markdown渲染 |
| 6 | Image | 媒体 | 图片展示与上传 |
| 7 | Container | 布局 | 嵌套容器，Flex/Grid布局 |
| 8 | Tabs | 布局 | 标签页切换容器 |
| 9 | Modal | 交互 | 弹窗对话框 |
| 10 | Select | 输入 | 下拉选择器（静态/动态数据源） |
| 11 | DatePicker | 输入 | 日期时间选择器 |
| 12 | FileUpload | 输入 | 文件上传组件 |
| 13 | List | 展示 | 列表视图（支持虚拟滚动） |
| 14 | Stat | 展示 | 统计卡片（数值+趋势） |
| 15 | Map | 可视化 | 地理位置地图组件 |
三、核心文件
| 文件 | 说明 |
|---|---|
src/main/enterprise/low-code/app-builder.js | 低代码应用构建引擎（核心逻辑） |
src/main/enterprise/low-code/low-code-ipc.js | IPC Handler注册（10个通道） |
四、IPC Handlers
| Channel | 说明 |
|---|---|
lowcode:create-app | 创建新应用（支持模板初始化） |
lowcode:save-design | 保存应用设计稿（自动版本快照） |
lowcode:preview | 生成应用预览（沙箱渲染） |
lowcode:publish | 发布应用到生产环境 |
lowcode:list-components | 获取15种内置组件列表及元数据 |
lowcode:add-datasource | 添加数据源连接（REST/GraphQL/DB/CSV） |
lowcode:test-connection | 测试数据源连通性 |
lowcode:get-versions | 获取应用版本历史列表 |
lowcode:rollback | 回滚应用至指定版本 |
lowcode:export | 导出应用为独立包 |
五、数据库表
5.1 lc_apps — 低代码应用表
sql
CREATE TABLE IF NOT EXISTS lc_apps (
id TEXT PRIMARY KEY,
name TEXT NOT NULL,
description TEXT,
design_data TEXT, -- JSON: 页面布局和组件树
datasources TEXT, -- JSON: 数据源配置数组
status TEXT DEFAULT 'draft', -- draft | published | archived
current_version INTEGER DEFAULT 1,
created_by TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
);5.2 lc_versions — 应用版本表
sql
CREATE TABLE IF NOT EXISTS lc_versions (
id TEXT PRIMARY KEY,
app_id TEXT NOT NULL,
version INTEGER NOT NULL,
design_snapshot TEXT, -- JSON: 完整设计稿快照
changelog TEXT,
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
FOREIGN KEY (app_id) REFERENCES lc_apps(id)
);六、测试覆盖
| 测试文件 | 测试数量 | 状态 |
|---|---|---|
src/main/enterprise/low-code/__tests__/app-builder.test.js | 23 | ✅ 通过 |
| 合计 | 23 | ✅ 全部通过 |
测试要点
- 应用创建、保存、预览、发布完整生命周期
- 15种内置组件注册和渲染验证
- 数据源连接（REST/GraphQL/DB/CSV）和连通性测试
- 版本快照自动生成与一键回滚
- 设计稿JSON序列化/反序列化正确性
- 应用导出包完整性校验