# web-builder

**Repository Path**: xiaoxiaoyi/web-builder

## Basic Information

- **Project Name**: web-builder
- **Description**: 一个基于PHP和Vue.js的可视化拖拽生成器，支持生成微信小程序和H5网页的完整代码。
- **Primary Language**: PHP
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://builder.okrcn.com
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-08-27
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 可视化拖拽生成器

一个基于 PHP 和 Vue 3 的可视化页面构建工具，支持通过拖拽方式搭建页面，并生成 H5 页面与微信小程序代码。

## 当前能力

- 拖拽文本、图片、按钮、输入框、文本域、下拉选择、单选组、多选组、间距块、容器、行布局组件到画布
- 支持容器嵌套，适合搭建卡片区、分栏区和内容模块
- 支持多页面编辑、页面切换和页面标识管理
- 支持组件复制、上下排序、撤销和重做
- 支持组件在根画布和容器之间拖拽移动，也支持拖拽插入排序
- 支持桌面 / 平板 / 手机尺寸切换预览
- 属性面板会按组件类型提供快捷配置
- 支持常用区块模板一键插入，适合快速起稿
- 模板区块支持核心文案快捷改写
- 支持页面结构导航，便于在复杂嵌套中快速定位组件
- 支持浏览器本地草稿自动保存与恢复
- 按钮支持配置提示消息和跳转链接动作
- 支持项目级主题配置，可影响预览和导出样式
- 按钮支持提交表单动作，导出后可校验当前页面必填字段
- 输入框支持手机号 / 邮箱 / 数字等字段类型与正则校验配置
- 下拉选择、单选组、多选组支持选项配置、默认值和横向 / 纵向排布
- 提交表单动作支持提交后清空和提交后跳转配置
- 支持为任意组件配置“条件显隐”，可根据当前页其他表单字段的值动态展示或隐藏内容
- 支持多步骤 / 分步表单，可为组件指定所属步骤，并通过按钮配置“上一步 / 下一步 / 提交”
- 支持“表单摘要”组件，可在最后一步自动汇总当前可见字段和值，用于提交前复核
- 支持字段说明文案、长度限制、数值范围限制与实时字数提示，预览和导出结果保持一致
- 表单校验失败时会直接在字段下展示错误原因，并同步高亮当前问题字段，交互更易定位
- 支持常用字段预设，可一键套用姓名、手机号、邮箱、预算、需求说明等高频表单配置
- 会在编辑阶段识别重复 `fieldKey` 和失效的条件依赖，并在预览、生成代码、导出前给出拦截提示
- 支持把表单提交数据发送到接口，并在构建器内查看当前项目的提交记录
- 提交记录支持关键词筛选、来源/页面过滤和 CSV 导出
- 提交记录支持聚合分析，可查看来源/页面排行和单字段取值分布
- 提交记录支持最近 7 天趋势分析，便于快速观察提交量变化
- 提交记录支持详情弹窗，并按当前项目表单定义映射更友好的字段标签
- 表单提交会额外保存字段标签与选项快照，后续即使调整表单结构，历史记录仍可保持可读
- 支持项目 JSON 导入与导出
- 支持直接导出 H5 / 微信小程序 ZIP 压缩包
- 支持实时预览 H5 结构
- 支持同时生成 H5 和微信小程序代码
- 支持项目保存、加载、更新和删除
- 项目数据默认保存在 `database/projects.json`

## 技术栈

### 后端

- PHP 7.4+
- Slim Framework 4
- PHP-DI
- `slim/php-view`

### 前端

- Vue.js 3
- Bootstrap 5
- HTML5 Drag and Drop API

## 项目结构

```text
├── database/              # 项目数据存储目录，运行后会生成 projects.json
├── public/                # Web 入口、静态资源、前端脚本
├── src/
│   ├── Controllers/       # 页面与 API 控制器
│   ├── Models/            # 文件存储模型
│   └── Services/          # H5 / 微信代码生成服务
├── templates/             # PHP 页面模板
├── composer.json          # Composer 依赖与启动脚本
└── README.md
```

## 环境要求

- PHP 7.4 或更高版本
- Composer

## 安装与启动

1. 克隆项目

```bash
git clone https://github.com/caoyanyi/web-builder.git
cd web-builder
```

2. 安装依赖

```bash
composer install
```

3. 配置环境

项目使用了 `phpdotenv` 的 `safeLoad()`，因此没有 `.env` 也可以启动。  
如果你需要自定义环境变量，可以复制示例文件：

```bash
cp .env.example .env
```

4. 启动开发服务器

```bash
composer start
```

也可以直接运行：

```bash
php -S localhost:8000 -t public
```

5. 访问应用

打开浏览器访问 `http://localhost:8000`

## 使用说明

### 1. 进入构建器

- 访问首页并进入 `/builder`
- 在左侧选择组件并拖到中间画布

### 2. 编辑页面

- 顶部和中部区域可以查看当前页面数量与组件数量
- 中部支持新增页面、切换页面、删除页面、清空页面
- 中部空白画布支持一键插入 Hero、功能卡片和表单模板
- 右侧可以编辑页面标题、页面标识和组件属性
- 右侧支持给组件配置条件显隐，隐藏中的表单字段不会参与校验和提交
- 右侧提供页面结构树，可快速选中嵌套组件

### 3. 管理项目

- 左侧输入项目名称并点击“保存项目”
- 保存后会出现在“已保存项目”列表
- 可以从列表中直接加载或删除项目
- 本地未保存内容会自动保存到浏览器，可随时恢复草稿

### 4. 预览与生成代码

- 点击“预览”可查看当前项目的 H5 预览结构
- 点击“生成代码”可同时查看 H5 与微信小程序代码输出
- 点击顶部导出按钮可直接下载 H5 或微信小程序 ZIP 压缩包

## 当前支持的组件

### 基础组件

- 文本 `text`
- 图片 `image`
- 按钮 `button`

### 表单组件

- 输入框 `input`
- 文本域 `textarea`
- 下拉选择 `select`
- 单选组 `radio-group`
- 多选组 `checkbox-group`
- 间距块 `spacer`

### 布局组件

- 容器 `div`
- 行布局 `row`

## API

### 项目管理

- `GET /api/projects` 获取项目列表
- `POST /api/projects` 创建项目
- `GET /api/projects/{id}` 获取项目详情
- `PUT /api/projects/{id}` 更新项目
- `DELETE /api/projects/{id}` 删除项目

### 表单提交

- `GET /api/form-submissions` 获取提交记录，支持按 `project_id` / `project_name` / `page_name` 过滤
- `POST /api/form-submissions` 接收表单提交数据
- `POST /api/form-submissions/clear` 按项目范围清空提交记录
- `DELETE /api/form-submissions/{id}` 删除单条提交记录

### 代码生成

- `POST /api/generate/wechat` 生成微信小程序代码
- `POST /api/generate/h5` 生成 H5 代码
- `POST /api/preview` 生成 H5 预览内容

## 开发说明

### 添加新组件

1. 在 [`public/js/builder.js`](public/js/builder.js) 中补充组件定义、默认属性和前端渲染逻辑
2. 在 `src/Services/H5CodeGenerator.php` 中补充 H5 输出逻辑
3. 在 `src/Services/WechatCodeGenerator.php` 中补充微信小程序输出逻辑

### 项目存储

- 当前项目存储为本地 JSON 文件，不依赖数据库服务
- 默认文件路径为 `database/projects.json`
- 如需接入数据库，可从 `src/Models/Project.php` 开始替换存储实现

## 当前已知限制

- 生成结果目前主要用于结构化输出和开发起点，尚未包含完整工程打包下载能力
- 组件事件和复杂交互还比较基础，适合先完成页面结构搭建
- 项目保存依赖后端接口，因此首次运行前必须先执行 `composer install`

## 许可证

本项目采用 MIT 许可证，详见 [LICENSE](LICENSE)。