前端开发

插件的前端主要负责页面的渲染和交互的实现，通过接口将用户填入的数据传回后端用于生成正确的脚本。

本文档将介绍如何开发插件中的前端部分。前端插件基于 Vue 2 + TypeScript 构建，通过 @aubo/wcaps/lib/frontend SDK 与主服务进行交互。

核心文件结构

一个完整的前端插件由以下组件组成：

1. 插件入口 (src/index.ts) - 定义插件导出接口，注册所有节点组件
2. 程序节点组件 (src/programModules/xx.vue) - 程序树中执行的节点 UI
3. 配置节点组件 (src/installModules/xx.vue) - 插件配置页面的节点 UI
4. 全局组件 (src/globalModules/xx.vue) - 跨页面持续存在的全局逻辑组件

安装 @aubo/wcaps 后，可以直接在 IDE 中跳转到声明，查看目标版本真实可用的方法、参数和返回类型。

插件入口 (src/index.ts)

插件入口是前端打包的唯一入口，负责向主服务注册所有可用的节点组件。

主要接口

programModules

• 作用: 注册程序节点组件列表
• 属性:
  • id: 节点唯一标识符，需要与插件后端保持一致
  • name: 节点显示名称
  • component: Vue 组件
  • icon: 列表节点图标
  • activatedIcon?: 节点激活状态图标，支持多主题配置
    • orangeTheme?: 橙色主题下的激活图标
    • redTheme?: 红色主题下的激活图标
    • blueTheme?: 蓝色主题下的激活图标
  • deactivatedIcon?: 节点未激活状态图标
  • needParentData?: 是否需要父节点数据
  • needChildrenData?: 是否需要子节点数据
• 使用: 在程序树中展示并执行的节点

installModules

• 作用: 注册配置节点组件列表
• 属性:
  • id: 节点唯一标识符
  • name: 节点显示名称
  • icon: 节点图标
  • component: Vue 组件
• 使用: 在插件配置页面中展示的节点

globalModules

• 作用: 注册全局组件列表
• 属性:
  • id: 组件唯一标识符
  • name: 组件名称
  • component: Vue 组件
• 使用: 插件加载后持续存在，可用于监听全局状态

install({ publicPath, name }): void

• 作用: 插件安装时的初始化方法
• 参数:
  • publicPath - 插件的公共资源路径
  • name - 插件名称
• 使用: 执行插件级别的初始化逻辑，通常用于初始化 GlobalConfig 和 callPluginFunc

unmount?(): void

• 作用: 插件卸载时的清理方法（可选实现）
• 使用: 执行资源释放、监听移除等清理工作

配置节点组件 (installModules/xx.vue)

配置节点运行在插件配置页面，用于展示设置界面和交互逻辑。

特点

• 无固定 props，自由定义组件内部状态
• 可通过 SDK 调用主服务能力和后端接口

程序节点组件 (programModules/xx.vue)

程序节点运行在程序树中，接收主服务注入的 props 数据。

接收的 Props

nodeType: string

• 作用: 节点的类型标识
• 使用: 用于区分不同类型的程序节点

jsonData: object

• 作用: 节点保存的 JSON 配置数据
• 使用: 读取节点在配置时保存的参数

programNode: object

• 作用: 程序节点的完整信息
• 使用: 获取节点在程序树中的上下文信息

parentNodeList: array

• 作用: 父节点列表
• 使用: 访问上级节点的数据

childNodeList: array

• 作用: 子节点列表
• 使用: 访问下级节点的数据

disabledBtnAll: boolean

• 作用: 是否禁用所有按钮
• 使用: 根据程序运行状态控制 UI 交互

updateNode: function

• 作用: 更新节点数据的函数
• 使用: 将修改后的数据保存到节点

开发要点

• 通过 props 接收主服务传递的数据
• 通过 updateNode 将修改变更持久化
• 样式建议使用 scoped 防止影响其他插件

全局组件 (globalModules/xx.vue)

全局组件在插件加载后即持续存在，不随页面切换销毁。

特点

• 生命周期与插件一致，从加载到卸载
• 适合监听全局状态并执行跨页面逻辑
• 可渲染可见 DOM，也可仅进行逻辑控制

开发要点

• 在 beforeDestroy 中务必清理定时器、监听等，避免内存泄漏

开发流程

1. 创建节点组件: 在 programModules/、installModules/ 或 globalModules/ 目录下新建 .vue 文件
2. 实现组件逻辑: 编写模板、脚本和样式，使用 SDK 与主服务交互
3. 注册组件: 在 index.ts 中将组件添加到对应的模块数组中
4. 配置图标: 将图标资源放在 src/assets/ 目录下，通过 require() 引入
5. 构建插件: 执行 npm run build 产出 dist/frontend/plugin.umd.min.js

关键注意事项

• 唯一入口: 生产构建入口固定为 src/index.ts，不要修改
• 外部依赖不打包: Vue、Element UI 等通过 vue.config.js 的 externals 配置排除，由主程序提供
• 图标资源: 节点图标建议使用 require('./assets/icon/xxx.png') 引入，支持热更新
• 样式隔离: 所有组件样式建议添加 scoped 属性，避免影响主程序或其他插件
• 全局组件生命周期: 全局组件务必在 beforeDestroy 中清理监听和定时器
• SDK 调用: Actions 和 RpcManager 在本地开发预览时可能不可用（需主服务宿主环境），生产环境正常运行
• UI 组件库（aubo_design）: 模板已内置 @aubo/aubo_design 组件库，主程序在运行时会自动完成全局注册，插件中可直接使用。推荐使用以保持和主程序一致的视觉风格。
• 类型声明: src/global.d.ts 和 src/vue.d.ts 提供了必要的模块和实例属性声明