Frontend Development

The plugin frontend is mainly responsible for page rendering and interaction. It sends the data filled in by users back to the backend through interfaces for generating correct scripts.

This document introduces how to develop the frontend part of a plugin. The frontend plugin is built on Vue 2 + TypeScript and interacts with the main service through the @aubo/wcaps/lib/frontend SDK.

Core File Structure

A complete frontend plugin consists of the following components:

1. Plugin entry (src/index.ts) - defines the plugin export interface and registers all node components
2. Program node components (src/programModules/xx.vue) - node UI executed in the program tree
3. Configuration node components (src/installModules/xx.vue) - node UI for the plugin configuration page
4. Global components (src/globalModules/xx.vue) - global logic components that persist across pages

After installing @aubo/wcaps, you can jump to the declarations directly in the IDE to view the methods, parameters and return types that are actually available in the target version.

Plugin Entry (src/index.ts)

The plugin entry is the only bundling entry point of the frontend and is responsible for registering all available node components with the main service.

Main Interfaces

programModules

• Purpose: Register the list of program node components
• Properties:
  • id: Unique node identifier, must be consistent with the plugin backend
  • name: Node display name
  • component: Vue component
  • icon: List node icon
  • activatedIcon?: Node activated icon, supports multi-theme configuration
    • orangeTheme?: Activated icon under the orange theme
    • redTheme?: Activated icon under the red theme
    • blueTheme?: Activated icon under the blue theme
  • deactivatedIcon?: Node deactivated icon
  • needParentData?: Whether parent node data is needed
  • needChildrenData?: Whether child node data is needed
• Usage: Nodes displayed and executed in the program tree

installModules

• Purpose: Register the list of configuration node components
• Properties:
  • id: Unique node identifier
  • name: Node display name
  • icon: Node icon
  • component: Vue component
• Usage: Nodes displayed on the plugin configuration page

globalModules

• Purpose: Register the list of global components
• Properties:
  • id: Unique component identifier
  • name: Component name
  • component: Vue component
• Usage: Persists after the plugin is loaded and can be used to listen to global state

install({ publicPath, name }): void

• Purpose: Initialization method called when the plugin is installed
• Parameters:
  • publicPath - the plugin's public resource path
  • name - the plugin name
• Usage: Executes plugin-level initialization logic, usually used to initialize GlobalConfig and callPluginFunc

unmount?(): void

• Purpose: Cleanup method called when the plugin is unloaded (optional)
• Usage: Performs resource release, listener removal and other cleanup work

Configuration Node Components (installModules/xx.vue)

Configuration nodes run on the plugin configuration page to display settings UI and interaction logic.

Features

• No fixed props, freely define internal component state
• Can call the main service capabilities and backend interfaces through the SDK

Program Node Components (programModules/xx.vue)

Program nodes run in the program tree and receive props data injected by the main service.

Received Props

nodeType: string

• Purpose: The node's type identifier
• Usage: Used to distinguish different types of program nodes

jsonData: object

• Purpose: The JSON configuration data saved by the node
• Usage: Reads the parameters saved by the node during configuration

programNode: object

• Purpose: The complete information of the program node
• Usage: Gets the node's context information in the program tree

parentNodeList: array

• Purpose: Parent node list
• Usage: Accesses the data of the parent node

childNodeList: array

• Purpose: Child node list
• Usage: Accesses the data of the child node

disabledBtnAll: boolean

• Purpose: Whether to disable all buttons
• Usage: Controls UI interaction based on the program running state

updateNode: function

• Purpose: Function to update node data
• Usage: Saves the modified data to the node

Development Points

• Receive data passed by the main service through props
• Persist changes through updateNode
• Styles are recommended to use scoped to avoid affecting other plugins

Global Components (globalModules/xx.vue)

Global components persist as soon as the plugin is loaded and are not destroyed when pages switch.

Features

• The lifecycle is consistent with the plugin, from loading to unloading
• Suitable for listening to global state and executing cross-page logic
• Can render visible DOM, or only perform logic control

Development Points

• Be sure to clean up timers, listeners, etc. in beforeDestroy to avoid memory leaks

Development Flow

1. Create node components: Create new .vue files under the programModules/, installModules/ or globalModules/ directories
2. Implement component logic: Write templates, scripts and styles, and interact with the main service using the SDK
3. Register components: Add the components to the corresponding module arrays in index.ts
4. Configure icons: Place icon resources under the src/assets/ directory and import them via require()
5. Build the plugin: Run npm run build to produce dist/frontend/plugin.umd.min.js

Key Notes

• Unique entry: The production build entry is fixed at src/index.ts, do not modify it
• External dependencies not bundled: Vue, Element UI, etc. are excluded through the externals configuration in vue.config.js and provided by the main program
• Icon resources: It is recommended to import node icons via require('./assets/icon/xxx.png'), which supports hot updates
• Style isolation: It is recommended to add the scoped attribute to all component styles to avoid affecting the main program or other plugins
• Global component lifecycle: Global components must clean up listeners and timers in beforeDestroy
• SDK calls: Actions and RpcManager may not be available during local development preview (requires the main service host environment); they run normally in the production environment
• UI component library (aubo_design): The template has the @aubo/aubo_design component library built in; the main program automatically completes global registration at runtime, and plugins can use it directly. It is recommended to use it to keep a consistent visual style with the main program
• Type declarations: src/global.d.ts and src/vue.d.ts provide the necessary module and instance property declarations