基于 electron-vite 实现一个 RPA 网页自动化工具

1. 项目概述

本文介绍如何使用 electron-vite 构建一个功能完备的 RPA（机器人流程自动化）网页自动化工具，该工具允许用户通过可视化界面设计和执行网页自动化工作流，无需编写复杂代码。项目基于 Vue 3、Electron 和 Playwright 构建，实现了浏览器操作、页面交互、数据处理等多种自动化功能，并计划在未来集成大模型能力，实现自然语言编写自动化脚本的功能。

2. 系统架构设计

multimedia-browser 项目采用典型的 Electron 应用架构，分为主进程和渲染进程两大部分：

2.1 技术栈选择

主框架：Vue 3 + Vite + Electron
工作流编辑：Vue Flow
浏览器自动化：Playwright
UI 组件库：Element Plus
布局算法：dagre.js

项目的 package.json 配置了完整的开发、构建流程，确保跨平台兼容性。

2.2 核心模块划分

系统由以下几个核心模块组成：

主界面模块：由 RPAMain.vue 实现，负责整体布局和用户交互
工作流编辑模块：基于 Vue Flow 构建，提供节点拖拽和连接功能
元件类型系统：统一管理和初始化所有自动化元件
工作流执行引擎：处理工作流的实际运行逻辑
浏览器自动化接口：桥接 Electron 主进程和 Playwright

2.3 目录结构

项目采用标准的 Electron + Vite 结构，分为 main、preload 和 renderer 三个主要部分：

bash 复制代码

src/
├── main/            # Electron 主进程代码
├── preload/         # 预加载脚本，处理主进程和渲染进程通信
└── renderer/        # 渲染进程代码（Vue 应用）
    └── src/
        ├── components/
        │   └── automation/  # RPA 相关组件
        │       ├── editor/  # 工作流编辑器
        │       ├── elements/# 元件类型定义
        │       ├── player/  # 工作流播放器
        │       └── utils/   # 工具函数
        └── ...

3. 元件类型系统设计

元件类型系统是 RPA 工具的核心，定义了所有可用于构建工作流的自动化操作。

3.1 元件分类设计

系统将元件分为五大类，覆盖常见的网页自动化场景：

浏览器操作：打开、关闭、刷新、导航等基础浏览器控制
页面交互：点击、输入、选择、滚动等用户操作模拟
数据处理：提取、获取、处理和比较页面数据
逻辑控制：条件判断、循环、等待、异常处理等流程控制
文件操作：读写文件、下载上传等文件系统交互

3.2 元件定义结构

每个元件类型都包含以下关键属性：

csharp 复制代码

{  
  type: 'BROWSER_OPEN',           // 元件唯一标识
  name: '打开浏览器',              // 显示名称
  description: '打开指定URL的浏览器窗口', // 功能描述
  icon: 'ChromeFilled',           // 图标
  category: ElementCategories.BROWSER, // 所属分类
  params: [/* 参数定义 */],        // 参数列表
  validateParams: /* 验证函数 */    // 参数验证
}

3.3 初始化系统

通过 ElementInitializer 类统一管理元件的实例化和执行：

javascript 复制代码

// 创建工作流节点
export const createWorkflowNode = (elementType, options = {}) => {
  // 生成唯一ID、设置默认参数、创建标准节点对象
}
// 执行元件操作
export const executeElement = async (elementType, context) => {
  // 根据元件类型执行相应操作
  switch (elementType) {
    case 'BROWSER_OPEN': /* 实现浏览器打开 */
    case 'CLICK_ELEMENT': /* 实现元素点击 */
    // 其他元件类型处理...
  }
}

4. 工作流编辑机制

工作流编辑模块基于 Vue Flow 构建，提供了直观的拖拽式工作流设计界面。

4.1 编辑器界面结构

编辑界面由三部分组成：

左侧元件面板：显示可用的自动化元件分类和列表
中间工作区：核心编辑区域，支持节点拖拽和连接
右侧播放器和日志面板：用于执行和监控工作流

4.2 节点拖拽和连接

系统支持从元件面板拖拽元件到工作区，并通过连接线建立元件间的执行关系：

scss 复制代码

// VueFlowEditor 组件中实现节点和边的管理
const nodes = ref([])
const edges = ref([])
// 处理节点添加
graph.addNodes([newNode])
// 处理边连接
graph.addEdges([newEdge])

4.3 自动布局算法

系统集成了 dagre.js 库实现工作流的智能布局：

javascript 复制代码

export function useLayout() {
  // 创建 dagre 图实例
  const dagreGraph = new dagre.graphlib.Graph()
  
  // 设置布局参数
  dagreGraph.setGraph({
    rankdir: direction, // LR (水平) 或 TB (垂直)
    ranksep: baseSpacing, // 节点行间距
    nodesep: nodeSpacing // 节点列间距
  })
  
  // 添加节点和边
  // 运行布局算法
  dagre.layout(dagreGraph)
  
  // 处理布局结果，调整节点位置
}

布局算法支持水平和垂直两种方向，并自动计算节点之间的最佳间距和连接方式。

5. 工作流执行引擎

执行引擎负责按照工作流定义的顺序执行各个元件，并处理执行过程中的各种情况。

5.1 执行控制流程

执行引擎提供了完整的工作流控制功能：

typescript 复制代码

// 执行单个元件
const executeElement = async (element) => {
  try {
    // 使用 ElementInitializer 执行元件
    const executionResult = await Initializer.executeElement(element.
    type, {
      element,
      browserId: currentBrowserId.value,
      browserAutomation,
      playbackSpeed: playbackSpeed.value,
      addLog,
      getParamValue
    })
    
    // 处理执行结果
    return true
  } catch (error) {
    // 错误处理
    return false
  }
}
// 执行下一个元件
const executeNextElement = async () => {
  // 查找下一个要执行的元件
  // 执行元件
  // 继续执行或结束
}

5.2 播放控制功能

系统提供了多种播放控制方式，满足不同的调试和执行需求：

播放/暂停：控制工作流的连续执行
停止：中断正在执行的工作流
单步执行：逐个执行元件，便于调试
播放速度调节：控制执行速度
调试模式：每个元件执行后自动暂停

5.3 浏览器实例管理

系统通过唯一的 browserId 管理浏览器实例，确保元件执行时能够正确访问目标浏览器：

ini 复制代码

// 打开浏览器并记录 browserId
if (element.type === 'BROWSER_OPEN' && executionResult.browserId) {
  currentBrowserId.value = executionResult.browserId
  currentBrowserUrl.value = executionResult.url
  showBrowserPreview.value = true
}
// 执行需要浏览器的操作前检查浏览器实例
if (BROWSER_REQUIRED_ELEMENTS.includes(element.type) && 
!currentBrowserId.value) {
  throw new Error('请先执行"打开浏览器"元件来创建浏览器实例')
}

6. 日志系统

日志系统提供了全面的执行过程跟踪，帮助用户监控和调试工作流。

6.1 日志记录功能

系统支持多种级别的日志记录：

javascript 复制代码

const addLog = (level, message, details = null) => {
  switch (level) {
    case 'debug':
      logger.debug(message, details)
      break
    case 'info':
      logger.info(message, details)
      break
    case 'success':
      logger.info(message, details)
      break
    case 'warn':
      logger.warn(message, details)
      break
    case 'error':
      logger.error(message, details)
      break
  }
}

6.2 实时日志显示

日志面板实时显示执行过程中的所有日志信息，并支持自动滚动和日志清空功能：

scss 复制代码

const handleGlobalLogUpdate = (newLog) => {
  logs.value.push(newLog)
  
  // 限制日志数量
  if (logs.value.length > 2000) {
    logs.value = logs.value.slice(-1500)
  }
  
  // 自动滚动到底部
  nextTick(() => {
    if (logContentRef.value) {
      const shouldAutoScroll = /* 判断是否需要自动滚动 */
      if (shouldAutoScroll) {
        logContentRef.value.scrollTop = logContentRef.value.scrollHeight
      }
    }
  })
}

7. 浏览器自动化接口

系统通过浏览器自动化接口与 Playwright 通信，实现对网页的各种操作。

7.1 API 封装设计

为了隔离主进程和渲染进程，系统通过 IPC 通信封装了浏览器操作 API：

javascript 复制代码

// 从全局 window 对象获取 api
const browserAutomation = window.api?.browserAutomation || {
  // 降级实现，确保在 API 不可用时也不会崩溃
  isBrowserAvailable: () => Promise.resolve(false),
  initialize: () => Promise.resolve({ success: false }),
  openUrl: () => Promise.resolve({ success: false }),
  // 其他浏览器操作方法...
}

7.2 核心自动化操作

系统支持的主要自动化操作包括：

浏览器控制：打开、关闭、刷新、导航
元素交互：点击、输入文本、选择选项、滚动页面
数据提取：从页面提取文本、属性、HTML 等数据
等待操作：等待元素可见、等待页面加载、等待指定时间

8. 用户界面设计

系统采用现代化的用户界面设计，提供了良好的用户体验。

8.1 主界面布局

主界面采用经典的三栏布局：

xml 复制代码

<div class="rpa-main">
  <!-- 主工具栏 -->
  <div class="main-toolbar">...</div>
  
  <!-- 主界面布局 -->
  <div class="rpa-layout">
    <!-- 左侧元件面板 -->
    <div class="left-panel">...</div>
    
    <!-- 中间工作区 -->
    <div class="center-panel">...</div>
    
    <!-- 右侧面板 -->
    <div class="right-panel">...</div>
  </div>
  
  <!-- 状态栏 -->
  <div class="rpa-statusbar">...</div>
</div>

8.2 主题切换功能

系统支持亮色模式、暗色模式和跟随系统三种主题模式：

javascript 复制代码

// 处理主题切换
const handleThemeChange = (theme) => {
  currentTheme.value = theme
  saveAndApplyTheme(theme)
}
// 获取主题显示文本
const getThemeDisplayText = () => {
  const displayTextMap = {
    light: '亮色',
    dark: '暗色',
    system: '跟随系统'
  }
  return displayTextMap[currentTheme.value] || '亮色'
}

8.3 响应式设计

系统针对不同屏幕尺寸进行了响应式优化：

css 复制代码

/* 中等屏幕优化 */
@media (max-width: 1200px) {
  .left-panel { width: 240px; }
  .right-panel { width: 300px; }
  .center-panel { margin: 6px; }
}
/* 平板/移动端优化 */
@media (max-width: 768px) {
  /* 工具栏调整为垂直排列 */
  .main-toolbar { flex-wrap: wrap; }
  
  /* 布局改为垂直方向 */
  .rpa-layout { flex-direction: column; }
  
  /* 左右面板调整为固定高度 */
  .left-panel, .right-panel { width: 100%; height: 280px; }
}

9. 技术特点与创新点

9.1 模块化设计

系统采用高度模块化的设计，每个功能都被封装在独立的组件中，便于维护和扩展。

9.2 插件化架构

元件系统设计支持插件化扩展，新元件可以轻松集成到现有系统中。

9.3 性能优化

系统在多个方面进行了性能优化：

限制日志数量，避免内存占用过高
使用虚拟滚动技术处理大量节点
实现了高效的布局算法

9.4 错误处理

系统包含完善的错误处理机制，确保在执行过程中出现问题时能够提供清晰的错误信息：

go 复制代码

try {
  // 执行元件
} catch (error) {
  addLog('error', `执行失败：${element.name}`, { error: error.message })
  return false
}

10. 应用场景与价值

该 RPA 工具适用于多种网页自动化场景：

数据采集与处理：自动从网站抓取和处理数据
表单填写与提交：自动填写和提交各种网页表单
网站监控与测试：定期检查网站功能和性能
批量操作：执行重复的网页操作，提高工作效率

11. 未来规划与大模型集成

项目计划在未来版本中集成大模型功能，实现更智能的自动化体验：

11.1 自然语言编写自动化脚本

参考 midscenejs 等项目，实现通过自然语言描述生成自动化工作流的功能：

arduino 复制代码

用户："帮我创建一个工作流，打开谷歌搜索页面，搜索'electron vite'，然后提取前10条搜
索结果的标题和链接"
AI：生成对应的工作流元件和连接关系

11.2 智能错误修复

利用大模型的推理能力，实现工作流执行错误的智能诊断和修复建议。

11.3 自动化优化建议

通过分析用户创建的工作流，提供性能和可靠性优化建议。

12. 代码优化建议

根据项目代码审查，提出以下优化建议：

12.1 元件执行逻辑优化

当前的元件执行逻辑在 ElementTypes.js 中通过 switch 语句实现，可以考虑使用策略模式重构：

javascript 复制代码

// 优化前：使用 switch 语句
switch (elementType) {
  case 'BROWSER_OPEN': /* 实现 */
  case 'CLICK_ELEMENT': /* 实现 */
  // 更多 case...
}
// 优化后：使用策略模式
const executionStrategies = {
  BROWSER_OPEN: executeBrowserOpen,
  CLICK_ELEMENT: executeClickElement,
  // 其他策略...
}
return executionStrategies[elementType]?.call(null, context) || 
  Promise.reject(new Error(`未实现的元件类型：${elementType}`))

12.2 工作流执行顺序优化

当前的工作流执行顺序基于简单的索引递增，可以改进为基于边连接关系的拓扑排序：

javascript 复制代码

// 优化前：简单索引递增
currentElementIndex.value++
nextElement = props.workflow.elements[currentElementIndex.value]
// 优化后：基于拓扑排序
function getNextElement(currentElementId) {
  // 查找从当前节点出发的边
  const outgoingEdges = props.workflow.edges.filter(
    edge => edge.source === currentElementId
  )
  
  // 如果有多条边，需要根据条件选择下一个节点
  // 返回目标节点
}

12.3 浏览器实例池

当前每个工作流执行都创建新的浏览器实例，可以考虑实现浏览器实例池，提高性能：

javascript 复制代码

class BrowserPool {
  constructor(maxInstances = 3) {
    this.maxInstances = maxInstances
    this.activeInstances = new Map()
    this.idleInstances = []
  }
  
  async getBrowser() {
    // 从空闲池获取或创建新实例
  }
  
  releaseBrowser(browserId) {
    // 释放浏览器实例回池中
  }
  
  // 其他方法...
}

13. 总结

本文介绍了基于 electron-vite 构建的 RPA 网页自动化工具的设计和实现。该工具通过可视化界面和丰富的自动化元件，让用户能够轻松创建和执行网页自动化工作流。系统采用模块化设计和插件化架构，具有良好的扩展性和维护性。未来的大模型集成将进一步提升工具的智能化水平，为用户提供更加便捷的自动化体验。

通过这个项目，我们展示了如何结合现代前端技术和自动化工具，构建功能强大的桌面应用程序，为用户解决实际工作中的自动化需求。