How the Right Panel Editor Configuration Works for Plugins in Luban H5

The right panel editor configuration in Luban H5 uses a Vuex-driven reactive architecture where the editingElement state synchronizes property changes between the canvas and a plugin-agnostic configuration panel.

Luban H5 is an open-source visual page builder for H5 mobile pages. Its right panel editor configuration system enables real-time manipulation of plugin properties through a centralized Vuex store, ensuring that changes to buttons, images, text elements, and custom components reflect immediately across the canvas and configuration interface.

Vuex State Management for the Right Panel

The foundation of the right panel editor configuration resides in the Vuex editor module, which maintains the single source of truth for the currently selected element and its properties.

The editor Module and editingElement

Located in src/store/modules/editor.js, the editor module defines editingElement to hold the active plugin instance and pluginProps to store its configurable attributes. When a user selects a plugin on the canvas, the setEditingElement action commits the full element object—including its default pluginProps—to the Vuex state, making it reactive across all right-panel components that import this slice using mapState('editor', ['editingElement']).

Right Panel Component Architecture

The right panel editor configuration renders through a hierarchical component structure centered around RightPanel.vue, which orchestrates three specialized sub-panels for different aspects of plugin configuration.

RightPanel.vue Wrapper

The src/components/core/editor/right-panel/index.vue file serves as the container component, injecting the shared Vuex state into its child panels. It provides the structural layout for the Work Mode, Box Model, and Script List sections, ensuring each sub-panel accesses the same editingElement reference through reactive bindings.

Work Mode Configuration

The work-mode panel (right-panel/work-mode.vue) controls page-level layout settings such as swiper or long-page modes. It maps the Vuex work.page_mode value to a radio group interface, utilizing the updateWork action to persist layout changes back to the global store. The canvas reads this state to render the appropriate page structure dynamically.

Box Model Editor

Located in right-panel/box-model/index.vue, this panel handles CSS box-model properties including width, height, margin, padding, and border. It directly mutates editingElement.pluginProps—for example, setting this.editingElement.pluginProps.borderColor—leveraging Vue's reactivity system to instantly reflect changes on the canvas without additional event dispatching.

Script List Management

The script-list panel (right-panel/script-list.vue) manages custom JavaScript handlers attached to plugins, such as click events. It reads from editingElement.pluginProps.scripts and provides interfaces for adding or removing script entries. Mutations to this reactive array immediately update the plugin's runtime behavior configuration.

Data Flow from Canvas to Configuration

The right panel editor configuration follows a unidirectional data flow that ensures consistency between visual selection and property editing.

1. Selection: When a user clicks a plugin on the canvas, Editor.vue dispatches the setEditingElement action with the complete element object, including its pluginProps.
2. Propagation: Vuex updates state.editingElement, triggering reactive updates across all right-panel components that map this state.
3. Two-way Binding:
   • Work Mode: Uses computed properties with getters/setters to read work.page_mode and call updateWork on modification.
   • Box Model: Directly mutates editingElement.pluginProps properties, utilizing Vue's reactivity for instant canvas updates.
   • Script List: Mutates the pluginProps.scripts array to attach or detach behavior handlers.
4. Persistence: Upon saving, the entire canvas model—including all pluginProps from each element—serializes to JSON and stores in the backend database, enabling exact restoration on subsequent loads.

Plugin-Agnostic Property Editing

A critical strength of the right panel editor configuration is its generic handling of plugin properties through the pluginProps abstraction.

Each plugin declares a props object defining its configurable attributes—such as type, default values, and labels. When an element is created, Luban H5 automatically merges these defaults into the element's pluginProps object. The right-panel components never hard-code specific fields; instead, they operate on the generic pluginProps structure. This architecture enables the same configuration interface to work uniformly across buttons, carousels, text boxes, images, and custom plugins without component-specific modifications.

Implementation Example

The following excerpt from right-panel/box-model/index.vue demonstrates the reactive property updates that define the right panel editor configuration workflow:

// right-panel/box-model/index.vue (excerpt)
computed: {
  ...mapState('editor', ['editingElement'])
},
methods: {
  updateBorderColor (color) {
    // Reactive update – the canvas re-renders instantly
    this.editingElement.pluginProps.borderColor = color
  }
}

This pattern illustrates how direct mutations to pluginProps propagate changes throughout the application without requiring explicit event emission or complex callback chains.

Key Source Files for the Right Panel Editor Configuration

Understanding the complete implementation requires examining these specific files in the ly525/luban-h5 repository:

File Path	Purpose
front-end/h5/src/store/modules/editor.js	Vuex store module managing editingElement, pluginProps, and work state
front-end/h5/src/components/core/editor/right-panel/index.vue	Main container component orchestrating the three sub-panels
front-end/h5/src/components/core/editor/right-panel/work-mode.vue	Page layout mode selector (swiper/long-page)
front-end/h5/src/components/core/editor/right-panel/box-model/index.vue	CSS box-model property editor
front-end/h5/src/components/core/editor/right-panel/script-list.vue	Custom script attachment interface
front-end/h5/src/components/core/editor/index.vue	Canvas editor that dispatches setEditingElement on plugin selection

Summary

• The right panel editor configuration in Luban H5 relies on a Vuex central store (editor module) to synchronize state between the canvas and configuration interface.
• The editingElement state object contains pluginProps, which stores all configurable properties for the currently selected plugin.
• Three specialized sub-panels—Work Mode, Box Model, and Script List—provide focused editing interfaces while sharing the same reactive state.
• Plugin-agnostic architecture allows the right panel to edit any plugin type without hard-coding specific fields, using the generic pluginProps abstraction.
• Instant reactivity is achieved through direct mutations to pluginProps or Vuex actions, ensuring the canvas updates immediately when properties change.

Frequently Asked Questions

How does the right panel editor configuration handle different plugin types without specific UI components for each?

The system uses a generic pluginProps object that every plugin populates with its own configuration schema. When a plugin is selected, its pluginProps becomes the reactive data source for the right panel. The Box Model, Script List, and other panels operate on this generic structure rather than plugin-specific fields, enabling the same components to edit buttons, images, carousels, and custom plugins uniformly.

What triggers the right panel to update when a user selects a plugin on the canvas?

The update is triggered by the setEditingElement Vuex action dispatched from Editor.vue when a plugin receives a click event. This action commits the selected element object—including its pluginProps—to the Vuex store's editingElement state. Because the right-panel components map this state using mapState('editor', ['editingElement']), Vue's reactivity system automatically propagates the update to all configuration interfaces.

How are changes in the right panel immediately reflected on the canvas?

The system leverages Vue's reactive data binding through direct mutations to pluginProps. When a user modifies a value in the Box Model panel—such as changing borderColor—the component updates this.editingElement.pluginProps.borderColor directly. Since editingElement is a reactive Vuex state object referenced by both the right panel and the canvas renderer, the change instantaneously triggers a re-render of the plugin on the canvas without requiring explicit event emission or API calls.

Where is the configuration data stored when a user saves the page?

All configuration data resides in the pluginProps objects within each element of the canvas model. When the user initiates a save operation, the entire editor state—including the work configuration and all elements with their respective pluginProps—serializes to JSON format. This payload is then transmitted to the backend database. On subsequent loads, Luban H5 deserializes this JSON to restore the exact right panel editor configuration for every plugin.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}