InnoShop Documentation

The PageBuilder plugin follows a structured architecture separating controllers, services, and views. Understanding this layout is essential for locating logic and templates:

• Controllers/Panel/: Contains backend controllers like PageBuilderController.php.
• Services/: Contains core business logic, including PageBuilderService.php (page construction), ModulePreviewService.php (module previews), and DesignService.php (design services).
• Routes/panel.php: Defines the backend routes for the plugin.
• config.json: The main configuration file for the plugin.
• Public/: Contains static assets (CSS, JS, images).
• Views/design/: Contains the designer interface templates and scripts.
• Views/front/: Contains the frontend templates for homepages, pages, and individual modules.

PageBuilder/
├── Controllers/
│   └── Panel/
│       └── PageBuilderController.php
├── Services/
│   ├── PageBuilderService.php
│   ├── ModulePreviewService.php
│   └── DesignService.php
├── Views/
├── Public/
│   ├── css/
│   ├── js/
│   └── images/
├── Routes/
│   └── panel.php
├── config.json
└── README.md

PageBuilder is a visual page builder using a Vue.js + Laravel decoupled architecture. It consists of three main layers:

1. Designer Interface (Vue App): The editor where users manage module editors, drag-and-drop sorting, and style settings.
2. Preview Area (iframe): Provides real-time visual feedback of the page being built, including responsive previews.
3. Backend Service (Laravel API): Handles module preview services, data storage, and file management.

Data flows from Module Definitions (config) $\rightarrow$ Designer (Vue App) $\rightarrow$ Preview Service (Laravel) $\rightarrow$ Frontend Display (Blade).

┌─────────────────────────────────────────────────────────────────┐
│                         PageBuilder 系统架构                      │
├─────────────────┬─────────────────┬─────────────────────────────┤
│   设计器界面     │   预览区        │   后台服务                   │
│  (Vue App)      │  (iframe)       │  (Laravel API)              │
│                 │                 │                             │
│ • 模块编辑器     │ • 实时预览       │ • 模块预览服务               │
│ • 拖拽排序       │ • 编辑工具栏     │ • 数据存储服务               │
│ • 样式设置       │ • 响应式预览     │ • 文件管理服务               │
└─────────────────┴─────────────────┴─────────────────────────────┘

The frontend views are split into two main directories: design (the editor interface) and front (the actual customer-facing site).

Designer Interface (Views/design/)

Used to build the administrative drag-and-drop/editing experience:

• layouts/: Contains header.blade.php and sidebar.blade.php.
• scripts/: Contains core logic like app.blade.php, vue-app.blade.php, and iframe-events.blade.php.
• editors/: Contains specific module editors (e.g., slideshow.blade.php, rich-text.blade.php, product.blade.php).
• components/: Reusable UI elements like multi-image-selector.blade.php and link-selector.blade.php.

Frontend Display (Views/front/)

Used to render the content to the end user:

• home.blade.php & page.blade.php: Main page templates.
• modules/: Individual module templates (e.g., slideshow.blade.php, product.blade.php, article.blade.php).
• partials/: Small reusable pieces like module-edit-buttons.blade.php.

Views/
├── design/
│   ├── index.blade.php
│   ├── layouts/
│   ├── scripts/
│   ├── editors/
│   └── components/
└── front/
    ├── home.blade.php
    ├── page.blade.php
    ├── modules/
    └── partials/

PageBuilder uses a modular architecture where every functional unit is composed of three distinct layers:

1. Module Definition (ModuleRepo.php): Defines the module's identity, including its code, default configuration, data structures, and icon identifiers.
2. Module Editor (Vue Component): A visual interface used within the designer to edit parameters and adjust styles.
3. Module Template (Blade Template): The frontend representation responsible for rendering the module on the live site, including responsive layouts and the editor toolbar.

This separation allows you to define how a module looks on the frontend independently of how it is configured in the backend designer.

┌─────────────────────────────────────────────────────────────────┐
│                           模块系统架构                            │
├─────────────────┬─────────────────┬─────────────────────────────┤
│   模块定义       │   模块编辑器     │   模块模板                   │
│  (ModuleRepo)   │  (Vue组件)      │  (Blade模板)                │
│                 │                 │                             │
│ • 模块配置       │ • 参数编辑       │ • 前台展示                   │
│ • 默认数据       │ • 样式设置       │ • 响应式布局                 │
│ • 图标标识       │ • 实时预览       │ • 编辑工具栏                 │
└─────────────────┴─────────────────┴─────────────────────────────┘

Data in PageBuilder moves through a specific pipeline to ensure the designer stays in sync with the frontend preview:

1. Definition to Designer: Module configurations are loaded from the backend into the Vue application.
2. Designer to Preview Service: When a user edits a parameter, the Vue app sends the updated data to the Laravel backend.
3. Preview Service to Frontend: The backend renders the module's HTML based on the new data.
4. Frontend to Designer: The rendered HTML is sent back and injected into the designer's iframe to show the real-time effect.

This cycle ensures that what you see in the editor is an accurate representation of the final rendered output.

┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   模块定义   │───▶│   设计器     │───▶│   预览服务   │───▶│   前台展示   │
│  (硬编码)   │    │  (Vue App)  │    │  (Laravel)  │    │  (Blade)    │
└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘
       │                   │                   │                   │
       ▼                   ▼                   ▼                   ▼
┌─────────────┐    ┌─────────────┐    ┌─────────────┐    ┌─────────────┐
│   模块配置   │    │   模块数据   │    │   渲染数据   │    │   展示数据   │
│  (JSON)     │    │  (Array)    │    │  (Array)    │    │  (HTML)     │
└─────────────┘    └─────────────┘    └─────────────┘    └─────────────┘