# LowCode

**Repository Path**: dingshuanglei/low-code

## Basic Information

- **Project Name**: LowCode
- **Description**: low-code低代码示例
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-07-19
- **Last Updated**: 2026-07-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 低代码搭建平台

基于 **React 18 + TypeScript + Zustand + Ant Design 5** 的低代码可视化搭建平台，支持组件拖拽编排、属性/样式/数据/事件配置、多页面管理、模板复用与 React 源码导出。

## ✨ 功能概览

- **拖拽搭建** — 从组件库拖入画布，自由布局，支持绝对定位与流式栅格
- **23 种内置组件** — 布局（Row/Card/Divider/Space）、表单（Form/Input/Select/DatePicker 等 12 种）、展示（Table/Text/Title/Image 等 7 种）
- **属性配置面板** — 属性 / 样式 / 数据 / 事件 四标签编辑，样式支持可视化与 CSS 字段双模式
- **表格列可视化编辑** — 可配置列标题、数据字段、宽度、对齐、固定列
- **多页面管理** — 页面的新建、切换、重命名、删除，数据持久化到 localStorage
- **模板系统** — 内置 4 种页面模板（空白/表单/列表/详情），支持保存和复用个人模板
- **撤销/重做** — 完整历史栈（上限 100 步），连续编辑自动合并
- **预览 & 设备切换** — 内置预览视图（PC / 平板 / 手机三档尺寸切换），支持动态数据真请求
- **代码导出** — 导出 React + TypeScript 源码 ZIP 或 JSON Schema，可直接运行
- **快捷键** — `Ctrl+Z` 撤销、`Ctrl+Y` 重做、`Ctrl+C/V` 复制粘贴、`Delete` 删除

## 🛠 技术栈

| 类别 | 技术 |
|------|------|
| 框架 | React 18 + TypeScript 5 |
| 状态管理 | Zustand |
| UI 组件库 | Ant Design 5 + @ant-design/icons |
| 拖拽引擎 | react-dnd + HTML5 Backend |
| 样式方案 | Less（全局样式） |
| 构建工具 | Vite 5 |
| 代码导出 | JSZip + file-saver |

## 📁 目录结构

```
src/
├── main.tsx                      # 应用入口
├── App.tsx                       # 根组件（四栏布局 + DnD + 快捷键 + 路由）
├── assets/
│   └── global.less               # 全局样式变量与布局
├── components/
│   ├── Canvas/Canvas.tsx         # 画布：拖拽放置、节点渲染、尺寸调整、内联编辑
│   ├── ComponentLib/             # 左侧组件库：分类折叠 + 搜索 + 拖拽源
│   ├── ConfigPanel/              # 右侧属性面板
│   │   ├── ConfigPanel.tsx       # 属性/样式/数据/事件 四标签容器
│   │   ├── FieldRenderer.tsx     # 通用字段渲染器（10 种控件类型）
│   │   ├── StyleEditor.tsx       # 可视化样式编辑器
│   │   ├── DataEditor.tsx        # 数据源配置（静态/动态 API）
│   │   └── EventEditor.tsx       # 事件配置（触发 → 动作绑定）
│   └── HeaderBar/
│       ├── HeaderBar.tsx         # 顶部导航栏（项目/编辑/画布/输出 + 页面管理）
│       └── TemplateModal.tsx     # 模板管理弹窗
├── views/
│   └── PreviewView.tsx           # 预览视图（响应式设备切换）
├── store/
│   └── editorStore.ts            # Zustand 核心状态管理（40+ 方法）
├── types/
│   └── index.ts                  # 全局类型定义（40+ 类型，零 any）
├── lowcode/
│   ├── config/                   # 组件注册中心
│   │   ├── index.tsx             # 合并定义 + 工厂方法
│   │   ├── layoutDefs.tsx        # 布局组件定义
│   │   ├── formDefs.tsx          # 表单组件定义
│   │   └── displayDefs.tsx       # 展示组件定义
│   ├── core/
│   │   ├── dnd.ts                # 拖拽类型常量
│   │   └── tree.ts               # 组件树不可变 CRUD
│   ├── render/
│   │   ├── widget.tsx            # 渲染引擎（Schema → React 元素）
│   │   └── PreviewRenderer.tsx   # 预览渲染器（事件 + 动态数据）
│   ├── export/
│   │   ├── codeGenerator.ts      # 代码生成器（Schema → TSX 源码）
│   │   └── exporter.ts           # JSON/ZIP 导出与导入
│   └── templates/
│       └── templates.tsx         # 内置模板定义
└── utils/
    ├── id.ts                     # 唯一 ID 生成
    ├── storage.ts                # localStorage/sessionStorage 持久化
    └── style.ts                  # StyleConfig → CSSProperties 转换
```

## 🚀 快速开始

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 访问 http://localhost:5173
```

### 其他命令

| 命令 | 说明 |
|------|------|
| `npm start` | 同 `npm run dev` |
| `npm run build` | TypeScript 类型检查 + 生产构建 |
| `npm run preview` | 预览生产构建 |
| `npm run format` | Prettier 格式化源码 |

## 🎯 使用指南

### 搭建页面

1. 从左侧 **组件库** 拖入组件到中间画布
2. 点击选中组件，右侧面板编辑 **属性/样式/数据/事件**
3. 画布支持拖拽调整位置、8 向手柄调整尺寸
4. `Ctrl+拖拽` 实现多选，批量删除

### 页面管理

顶部栏中间的页面切换区支持：
- 下拉切换已创建的页面
- 新建 / 重命名 / 删除页面

### 模板

点击顶部栏 **模板** 按钮：
- 选择一个内置模板快速创建页面
- 可将当前页面保存为个人模板以便复用

### 预览与导出

- **预览** — 顶部栏点击预览，支持 PC / 平板 / 手机三档切换
- **导出 JSON** — 下载页面 Schema，可通过 **导入 JSON** 还原
- **导出 React 源码** — 下载包含 App.tsx + index.css 的 ZIP，解压即可独立运行

## 🏗 核心设计

- **不可变状态** — 所有树操作返回新 Schema，支撑精确的撤销/重做
- **连续编辑合并** — 同一字段 600ms 内连续输入自动合并为一步历史记录
- **ID 唯一性** — 新增/复制/粘贴/模板加载时递归生成新 ID 并冲突检测
- **画布样式分离** — 布局属性（宽高/边距/定位）作用在外层 wrapper，视觉属性作用在内层
- **智能表单容器** — Form 组件自动识别子控件并包裹 `Form.Item`

## 📄 License

Private