# PageBuilder 页面构建器

## 插件介绍

PageBuilder 是 InnoShop 系统的可视化页面构建器插件，提供拖拽式页面设计功能，让用户无需编程即可创建美观的电商页面。

## 功能特性

### 🎨 可视化编辑
- **拖拽式设计**：通过拖拽模块快速构建页面
- **实时预览**：所见即所得的编辑体验
- **响应式设计**：支持PC、平板、手机多设备预览

### 📱 设备适配
- **PC端设计**：桌面端完整布局
- **移动端优化**：手机端专用布局
- **平板端支持**：平板设备适配

### 🧩 丰富模块
- **媒体模块**：幻灯片、图片展示、卡片轮播
- **产品模块**：产品展示、分类展示、最新产品
- **内容模块**：富文本、文章列表、品牌展示
- **布局模块**：网格布局、图文混排

### 🎯 核心功能
- **模块管理**：添加、编辑、删除、排序模块
- **样式定制**：颜色、字体、间距等样式调整
- **多语言支持**：标题、内容多语言编辑
- **图片管理**：集成文件管理器，支持图片上传

## 安装使用

1. **插件安装**

   ```bash
   # 插件已预装在 InnoShop 系统中
   # 无需额外安装步骤
   ```

2. **进入设计器界面**

   后台管理 → 设计 → 页面构建器

3. **开始设计**

   1. 选择要编辑的页面（首页/单页）
   2. 从左侧模块库拖拽模块到预览区
   3. 点击模块进行编辑和样式调整
   4. 保存设计并发布

4. **操作技巧**

   - **模块排序**：拖拽模块到新位置进行排序
   - **快速编辑**：双击模块直接进入编辑模式
   - **预览切换**：使用设备切换按钮查看不同设备效果
   - **撤销操作**：使用 Ctrl+Z 撤销上一步操作

## 模块说明

### 媒体模块
- **幻灯片 (Slideshow)**：轮播图片展示
- **卡片轮播 (Card Slider)**：卡片式轮播展示
- **单图展示 (Image 100)**：全宽图片展示
- **四图展示 (Four Image)**：2x2图片展示
- **四图增强 (Four Image Plus)**：带标题的四图展示
- **网格方块 (Grid Square)**：方形网格图片展示
- **左图右文 (Left Image Right Text)**：图文混排展示

### 产品模块
- **产品展示 (Product)**：产品列表展示
- **分类展示 (Category)**：产品分类展示
- **最新产品 (Latest)**：最新产品展示

### 内容模块
- **富文本 (Rich Text)**：富文本内容编辑
- **文章列表 (Article)**：文章列表展示

## 技术架构

### 前端技术栈
- **Vue.js**：响应式数据绑定和组件化开发
- **Axios**：HTTP请求处理
- **Bootstrap**：UI组件库
- **Sortable.js**：拖拽排序功能
- **Element UI**：Vue组件库

### 后端技术栈
- **Laravel**：PHP框架
- **Blade模板**：视图渲染
- **AJAX**：异步数据交互

### 核心机制

#### 组件通信机制
PageBuilder 采用 Vue.js 的组件通信机制，实现模块编辑器与主应用的数据同步：

1. **事件发射**：模块编辑器通过 `$emit('on-changed', data)` 向父组件发送数据变化事件
2. **事件监听**：主应用通过 `@on-changed="moduleUpdated"` 监听数据变化
3. **防抖处理**：使用双重防抖机制避免频繁请求
4. **实时预览**：数据变化时自动更新iframe中的预览内容

#### 动态组件渲染
- 根据当前编辑的模块类型，动态渲染对应的编辑器组件
- 支持组件热切换，无需刷新页面
- 统一的组件接口，便于扩展新模块

#### 实时预览系统
- iframe嵌入前台页面作为预览区
- AJAX请求后端获取渲染后的模块HTML
- 直接替换预览区中的模块内容，实现实时预览

### 核心文件结构

```
PageBuilder/
├── Controllers/          # 控制器
│   └── Panel/
│       └── PageBuilderController.php
├── Services/             # 服务层
│   ├── PageBuilderService.php
│   ├── ModulePreviewService.php
│   └── DesignService.php
├── Views/                # 视图文件
│   ├── design/           # 设计器界面
│   │   ├── layouts/      # 布局组件
│   │   ├── scripts/      # JavaScript脚本
│   │   ├── editors/      # 模块编辑器
│   │   └── components/   # 通用组件
│   └── front/            # 前台展示
│       ├── modules/      # 模块模板
│       └── partials/     # 前台组件
├── Public/               # 静态资源
└── Routes/               # 路由定义
```

### 详细开发文档见 DEV.md

## 配置说明

### 模块配置
每个模块都包含以下配置项：
- **基础设置**：标题、描述、链接
- **样式设置**：颜色、字体、间距
- **内容设置**：图片、文本、数据源
- **响应式设置**：不同设备的显示效果

### 页面配置
- **页面类型**：首页、单页、分类页
- **布局设置**：页面宽度、边距
- **SEO设置**：标题、关键词、描述

## 常见问题

- **Q: 如何添加自定义模块？**
  A: 参考现有模块结构，在 `Views/front/modules/` 目录下创建新的模块文件。

- **Q: 如何修改模块样式？**
  A: 在模块编辑器中调整样式参数，或修改对应的CSS文件。

- **Q: 如何支持新的页面类型？**
  A: 在 `PageBuilderService` 中添加新的页面类型处理逻辑。

- **Q: 如何集成第三方组件？**
  A: 通过 Hook 机制扩展功能，或直接修改模块模板。

- **Q: 如何备份/恢复页面设计？**
  A: 系统会自动保存设计数据，也可通过导出功能备份，或在页面设置中选择恢复默认选项。

## 技术支持

- **官方网站**：https://www.innoshop.com
- **文档中心**：https://docs.innoshop.com
- **技术支持**：support@innoshop.com

## 许可证

本插件遵循 [OSL 3.0](https://opensource.org/licenses/OSL-3.0) 开源许可证。

---

**PageBuilder - 让页面设计变得简单而强大！**