# LTD-Low-code-prototypes

**Repository Path**: ltd-low-codeding/ltd-low-code-prototypes

## Basic Information

- **Project Name**: LTD-Low-code-prototypes
- **Description**: LTD-Low-code-prototypes：专注于低代码原型设计的开源项目，提供快速开发和测试的工具与框架，助力开发者高效构建应用原型。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-06-23
- **Last Updated**: 2026-06-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LTD Low-Code Platform

> 面向运营/业务人员 + 前端开发者的低代码平台，支持页面搭建、表单管理、流程编排、数据建模四大核心能力。

## 特性

- **页面搭建** - 拖拽式编辑器，15+ 组件类型，实时预览，JSON Schema 驱动
- **表单引擎** - 可视化表单设计，10+ 字段类型，校验规则配置，CRUD 页面自动生成
- **流程编排** - 节点式流程画布，8+ 节点类型，流程校验与执行模拟
- **数据建模** - ER 图可视化，关系编辑，API 端点设计，Prisma/TypeScript Schema 导出
- **运行时渲染** - JSON Schema → Vue 组件，条件/循环渲染，表达式引擎
- **企业级功能** - 版本控制、模板库、主题系统、i18n、RBAC 权限、API Mock

## 技术栈

| 类别 | 选型 | 说明 |
| --- | --- | --- |
| 框架 | Vue 3 + TypeScript | Composition API + `<script setup>` |
| 样式 | SCSS | 变量、mixin、嵌套、主题系统 |
| 构建 | Vite 6 | 快速 HMR，monorepo 支持 |
| UI 库 | Element Plus | 按需导入 + 主题定制 |
| 状态管理 | Pinia | 配合 history plugin 实现 undo/redo |
| Monorepo | pnpm workspace + Turborepo | 模块独立构建，缓存加速 |
| 拖拽 | HTML5 DnD API + SortableJS | 跨容器拖拽 + 内部排序 |
| 流程画布 | @vue-flow/core | 生产级节点/边渲染 |
| 后端 | NestJS + Prisma + PostgreSQL/MySQL | 全栈类型安全 |
| 开源协议 | MIT | 宽松，允许商业使用 |

## 项目结构

本项目采用**前后端分离仓库**架构：

| 仓库 | 说明 | 技术栈 |
| --- | --- | --- |
| `LTD-Low-code-web` | 前端仓库 | Vue 3 + TypeScript + Vite + Element Plus |
| `ltd-Low-code-shared` | 共享类型包 (npm: `@ltd/shared`) | TypeScript，纯类型 + 工具函数 |
| `ltd-Low-code-server` | 后端仓库 | NestJS + Prisma + PostgreSQL/MySQL |

前端和后端通过 npm 包 `@ltd/shared` 共享类型定义，保证前后端 API 对齐。

### 前端 Monorepo 结构

```text
packages/
├── editor-core/       # @ltd/editor-core - 编辑器核心引擎
├── ui/                # @ltd/ui - 设计系统
├── page-builder/      # @ltd/page-builder - 页面搭建模块
├── form-engine/       # @ltd/form-engine - 表单管理模块
├── workflow-engine/   # @ltd/workflow-engine - 流程编排模块
├── data-modeling/     # @ltd/data-modeling - 数据建模/API编排
├── renderer/          # @ltd/renderer - 运行时渲染器
└── host/              # @ltd/host - 主应用壳
```

## 原型预览

项目包含 7 个 HTML 可交互原型，位于 `prototypes/html/` 目录：

| 页面 | 说明 |
| --- | --- |
| 登录页 | 账号密码登录 + 第三方登录 (GitHub/微信/Google) |
| 仪表盘 | 平台概览、统计卡片、快速创建、推荐模板 |
| 页面搭建编辑器 | 核心页面 - 三栏布局：组件面板 + 画布 + 属性面板 |
| 表单设计器 | 可视化表单设计、字段配置、校验规则 |
| 流程编排编辑器 | 节点式流程画布、8 种节点类型、节点配置 |
| 数据模型设计器 | ER 图可视化、字段配置、API 端点生成 |
| 模板库 | 预置模板市场、筛选分类、模板卡片 |

查看原型索引：`prototypes/html/index.html`

## 快速开始

### 查看原型

无需构建工具，直接在浏览器打开 HTML 原型：

```bash
open prototypes/html/index.html
```

### 开发环境

**前置要求：** Node.js 20+, pnpm 9+

```bash
# 克隆仓库
git clone https://gitee.com/LTD/LTD-Low-code-web.git
cd LTD-Low-code-web

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev
```

### 后端服务

```bash
git clone https://gitee.com/LTD/ltd-Low-code-server.git
cd ltd-Low-code-server

# 配置环境变量
cp .env.example .env

# 启动 Docker 服务 (PostgreSQL + Redis)
docker-compose up -d

# 数据库迁移
pnpm prisma migrate dev

# 启动后端
pnpm start:dev
```

## 核心架构

### 组件 Schema 协议

每个页面用 JSON Schema 描述：

```typescript
interface PageSchema {
  version: string
  settings: PageSettings
  componentTree: ComponentNode
}

interface ComponentNode {
  id: string
  type: string
  props: Record<string, any>
  children?: ComponentNode[]
  events?: EventBinding[]
  conditions?: Condition[]
  loops?: LoopConfig
}
```

### 模块依赖关系

```text
            npm: @ltd/shared
                   │
            @ltd/editor-core
                   │
      ┌────────────┼────────────┐
      │            │            │
page-builder  form-engine  workflow-engine
      │            │            │
      └────────────┼────────────┘
                   │
             data-modeling
                   │
              renderer
                   │
           @ltd/host
```

## 实施计划

共 **82 天**，分为 9 个阶段：

| 阶段 | 天数 | 内容 |
| --- | --- | --- |
| Phase 1 | Day 1-8 | 基础设施 (monorepo、shared、editor-core、ui、host) |
| Phase 2 | Day 9-26 | 页面搭建核心 (画布、拖拽、属性面板、15+ 组件) |
| Phase 3 | Day 27-34 | 表单引擎 (字段类型、校验、CRUD 生成) |
| Phase 4 | Day 35-42 | 流程编排 (Vue Flow、8+ 节点、校验、执行模拟) |
| Phase 5 | Day 43-50 | 数据建模 (ER 图、关系、API 设计、Schema 导出) |
| Phase 6 | Day 51-57 | 渲染器 (递归渲染、表达式引擎、绑定、预览) |
| Phase 7 | Day 58-68 | 企业级功能 (版本控制、模板、主题、i18n、权限) |
| Phase 8 | Day 69-76 | 打磨上线 (性能、测试、文档、安全、部署) |
| Phase 9 | Day 77-82 | 开源文档 + VitePress 文档站 |

详细计划请查看 [PLAN.md](PLAN.md)

## 参与贡献

1. Fork 本仓库
2. 新建特性分支 (`git checkout -b feature/amazing-feature`)
3. 提交更改 (`git commit -m 'feat: add amazing feature'`)
4. 推送到分支 (`git push origin feature/amazing-feature`)
5. 创建 Pull Request

### Commit 规范

- `feat`: 新功能
- `fix`: 修复 Bug
- `docs`: 文档更新
- `style`: 代码格式调整
- `refactor`: 重构
- `test`: 测试相关
- `chore`: 构建/工具链变更

## 相关仓库

| 仓库 | 链接 |
| --- | --- |
| 前端仓库 | [LTD-Low-code-web](https://gitee.com/LTD/LTD-Low-code-web) |
| 共享类型包 | [ltd-Low-code-shared](https://gitee.com/LTD/ltd-Low-code-shared) |
| 后端仓库 | [ltd-Low-code-server](https://gitee.com/LTD/ltd-Low-code-server) |

## 许可证

[MIT License](LICENSE)