一个基于 Next.js 和 React 构建的可视化低代码开发平台，支持拖拽式页面构建、组件管理、主题定制和代码导出等功能。
- 拖拽式画布: 直观的拖拽操作，快速构建页面布局
- 实时预览: 即时查看设计效果，支持响应式预览
- 组件树视图: 层级化管理页面组件结构
- 属性面板: 丰富的属性配置选项
- 内置组件库: 包含按钮、表单、图表等常用组件
- 自定义组件: 支持创建和管理自定义组件
- 组件分组: 灵活的组件分类和组织管理
- 组件导入导出: 跨项目共享组件资源
- 数据面板: 统一管理数据源和数据绑定
- 图表组件: 支持柱状图、折线图、饼图等多种图表类型
- 表单构建器: 快速创建表单和数据收集页面
- 主题编辑器: 可视化定制界面主题和样式
- 动画编辑器: 为组件添加动画效果
- 响应式设计: 适配不同屏幕尺寸
- 实时协作: 多人协同编辑功能
- 代码导出: 导出为可部署的前端代码
- 模板库: 预置页面模板，快速开始项目
- 框架: Next.js 15.2.4 + React 19
- 语言: TypeScript
- 样式: Tailwind CSS + CSS 变量主题系统
- UI 组件库: Radix UI
- 拖拽: React DnD
- 图表: Recharts
- 表单: React Hook Form + Zod 验证
- 状态管理: React Hooks + 历史记录系统
- 构建工具: Next.js 构建系统
├── app/ # Next.js App Router
│ ├── page.tsx # 主页面 - 低代码编辑器
│ ├── layout.tsx # 根布局
│ └── globals.css # 全局样式
├── components/ # 组件目录
│ ├── ui/ # 基础UI组件库
│ ├── charts/ # 图表组件
│ ├── templates/ # 页面模板
│ ├── canvas.tsx # 主画布组件
│ ├── component-panel.tsx # 组件面板
│ ├── properties-panel.tsx # 属性配置面板
│ ├── template-gallery.tsx # 模板库
│ ├── theme-editor.tsx # 主题编辑器
│ ├── form-builder.tsx # 表单构建器
│ ├── code-export.tsx # 代码导出
│ └── ... # 其他功能组件
├── lib/ # 工具库
│ ├── types.ts # TypeScript类型定义
│ ├── utils.ts # 工具函数
│ └── history.ts # 历史记录管理
├── hooks/ # 自定义Hooks
├── styles/ # 样式文件
├── public/ # 静态资源
├── docs/ # 文档
│ ├── wardley-map.puml # 沃德利地图源码
│ └── c4/ # C4 模型图
│ ├── README.md # C4 图说明
│ ├── c4-context.puml # C4 上下文图源码
│ ├── c4-container.puml # C4 容器图源码
│ ├── c4-component-canvas.puml # C3 画布组件图
│ ├── c4-component-panel.puml # C3 面板组件图
│ ├── c4-component-properties.puml # C3 属性组件图
│ ├── c4-plantuml/ # PlantUML 模板库
│ └── images/ # C4 图片
│ ├── Low-Code Platform C4 Context Diagram.png
│ └── Low-Code Platform C4 Container Diagram.png
└── src/ # 业务逻辑 (Clean Architecture + DDD)
├── domains/ # 领域模型
│ ├── entities/ # 实体
│ ├── valueObjects/ # 值对象
│ └── events/ # 领域事件
├── application/ # 应用层
│ ├── commands/ # 命令
│ ├── queries/ # 查询
│ └── useCases/ # 用例
├── infrastructure/ # 基础设施层
│ └── repositories/ # 仓储实现
└── shared/ # 共享模块
本项目采用 Clean Architecture (整洁架构) 和 Domain-Driven Design (领域驱动设计) 原则构建：
沃德利地图展示了低代码平台的组件演化和依赖关系：
- 起源 (Genesis): 全新技术，需要大量创新
- 定制 (Custom): 业务定制开发，如可视化编辑器、组件工厂
- 产品 (Product): 通用产品，如画布组件、图表组件
- 商品化 (Commodity): 标准化基础设施，如 React、Next.js、Zustand
各层颜色含义：
- 红色: 用户界面层 - 面向用户的核心功能
- 紫色: 组件系统层 - 组件化能力
- 青色: 数据管理层 - 数据流转
- 绿色: 主题样式层 - 视觉呈现
- 橙色: 状态管理层 - 状态控制
- 棕色: 应用服务层 - 业务逻辑
- 粉色: 领域模型层 - 核心领域
- 灰色: 基础设施层 - 技术支撑
| 原则 | 描述 |
|---|---|
| 依赖倒置 | 内层定义接口，外层实现，依赖方向始终向内 |
| 单一职责 | 每层只关注自己的职责，保持内聚 |
| 限界上下文 | 按业务领域划分模块，降低耦合 |
| 限界上下文 | 核心实体 |
|---|---|
| Canvas | Canvas, Component, Layer, Widget |
| Component | Component, Category, Group, Property |
| Project | Project, Template, Version, Export |
- Node.js >= 18.0.0
- npm/yarn/pnpm
# 使用 npm
npm install
# 或使用 yarn
yarn install
# 或使用 pnpm
pnpm install# 使用 pnpm
npm run dev
# 或使用 yarn
yarn dev
# 或使用 pnpm
pnpm dev# 构建
npm run build
# 启动生产服务器
npm run start访问 http://localhost:3000 查看应用。
- 添加组件: 从左侧组件面板拖拽组件到画布
- 选择组件: 点击画布中的组件进行选择
- 配置属性: 在右侧属性面板修改组件属性
- 预览效果: 点击预览按钮查看最终效果
- 使用模板: 从模板库选择预制模板快速开始
- 自定义主题: 通过主题编辑器定制界面风格
- 添加动画: 使用动画编辑器为组件添加动效
- 数据绑定: 在数据面板管理数据源和绑定关系
- 导出代码: 将设计转换为可部署的前端代码
- 支持多人实时协作编辑
- 版本历史记录和回滚功能
- 组件库共享和管理
- 在
components/ui/目录下创建新组件 - 在
components/component-panel.tsx中注册组件 - 在
lib/types.ts中定义相关类型
主题配置在 lib/types.ts 的 ThemeConfig 接口中定义，可以通过主题编辑器进行可视化配置。
- 数据源: 在
components/data-panel.tsx中添加新的数据连接方式 - 图表类型: 在
components/charts/目录下添加新的图表组件 - 导出格式: 在
components/code-export.tsx中添加新的导出格式
- 增加更多图表类型支持
- 实现数据库连接功能
- 添加移动端组件库
- 支持自定义 CSS 样式编辑
- 实现项目管理和版本控制
- 添加更多页面模板
欢迎提交 Issue 和 Pull Request 来改进项目。