EpicDesigner Documentation

EpicDesigner provides several capabilities for low-code page development:

• Visual Page Configuration: Drag-and-drop interface for building layouts.
• Output Options: Support for previewing, saving, generating JSON, and generating executable code.
• Form Support: Built-in support for form validation.
• Extensibility:
  • Custom panel configuration.
  • Custom component extensions.
  • Custom component property configurations.
  • Custom component style configurations.
  • Custom component event and action configurations.
• Layout Management: Supports nested layouts and layout component extensions.

The pluginManager is the core component of Epic Designer. It is responsible for managing components, panels, and public methods within the designer. It provides a complete API to register, query, and control the visibility of various designer elements.

To use it, import it directly from epic-designer:

import { pluginManager } from 'epic-designer';

The Epic Designer interface is organized into several functional areas to facilitate design and generation tasks:

• Activity Bar (活动栏): Likely contains primary navigation or tool switching.
• Sidebar (侧边栏): Typically used for managing project assets, components, or layers.
• Status Bar (状态栏): Displays current system status, versioning, or configuration info.
• Editor Area (编辑区域): The main workspace where design and layout work occurs.
• Right Sidebar (右边侧边栏): Usually reserved for property inspectors, settings, or detailed configuration of selected elements.
• Page Manager (页面管理器): Used for navigating between different pages or views within a project.
• Extension Manager (扩展管理器): Used to manage plugins or external extensions for the designer.
• Custom Scripting (自定义脚本编写): Provides an interface for writing custom logic to extend designer behavior.

When registering custom components, you can extend their configuration:

• Style Panel Extension: Custom components can register configurations to extend the properties/style panel.
• Icons: Component icons can be extended using the iconify icon library. Note that in newer versions, the icon property should be placed inside the defaultSchema object rather than at the top level of the registration config.
• Sorting: You can add a sort field to the component registration to control its order.
• Constraints: Use editConstraints to define constraints for the component's configuration.
• Fixed Fields: Use the fixedField field to lock a form item's field property, preventing the automatic addition of a UUID.

Custom Functions allow you to implement specific logic and behaviors within the designer. Within a custom function block, you have access to an epic object. You can use this object to interact with the page and its components.

To make your functions available to the designer's event system (e.g., to be called by a component's change or input event), you must use the defineExpose method to expose them.

const { defineExpose, find } = epic;

function test(e) {
  // Use find(id) to get a component instance and set its attributes
  find("ho0tpt7i7tc00").setAttr("hidden", e);
}

function setDisabled(e) {
  find("ho0tpt7i7tc00").setAttr("disabled", e);
}

// Expose functions to the designer
defineExpose({
  test,
  setDisabled,
});

EpicDesigner is a drag-and-drop low-code designer built on Vue 3 that uses JSON configurations to generate pages. It consists of two primary components:

1. EDesigner (The Designer): A visual component that allows users to drag and drop components to generate a JSON configuration. It supports real-time preview, component property configuration, event/action binding, and exporting the resulting JSON.
2. EBuilder (The Builder): A page construction component that consumes the JSON configuration generated by EDesigner. It handles component rendering, event binding, and data echoing to turn the JSON into a functional page.

This workflow allows developers to bridge the gap between visual design and executable code via a standardized JSON schema.

EpicDesigner operates through two core components that form a complete low-code workflow:

1. EDesigner (The Designer): A visual component that allows users to drag and drop components to create a page. The designer outputs a JSON configuration representing the page structure, properties, and events.
2. EBuilder (The Builder/Generator): A rendering component that takes the JSON configuration generated by EDesigner and transforms it into a functional page, handling component rendering, event binding, and data binding.

Workflow: Use EDesigner to create/edit the JSON schema $\rightarrow$ Save the JSON $\rightarrow$ Use EBuilder with that JSON to render the final page in your application.

Public Methods are a key feature that allows developers to provide preset functions to the designer. These methods can be used in two ways:

1. Action Configuration: Users can select these preset methods within the designer's action configuration UI.
2. Custom Coding: Developers can call these methods within custom functions, which is useful for exposing utility functions like route instances or user state hooks to the designer environment.