Electron + Vue3 构建一站式移动端测试平台第3期：Vue3 前端界面开发

发布于 7 天前  27 次阅读

时长：40-50 分钟

3.1 前端架构设计

3.1.1 为什么选择 Vue3 Composition API

  • 更适合复杂业务的拆分与复用

本项目中一个设备面板（如 AndroidDeviceSection、IOSDeviceSection）往往包含：

  • 设备列表管理
  • 多个 Tab 面板（应用管理、相册、环境、日志等）
  • 与主进程的命令交互（截图 / 录屏 / 安装包 / 日志采集）

使用 Options API 时，这些逻辑容易堆在 methods / computed 里，文件越写越长； 换成 Composition API，可以自然地按“能力”拆成多个组合函数（hooks），例如：

  • useDeviceList()：封装设备轮询、选择当前设备
  • useScreenshot()：封装截图命令、loading 状态、错误提示
  • useRecording()：封装录屏相关的命令与状态
  • 逻辑按“功能维度”组织，而不是按“选项类型”组织

这和项目的整体模块化设计相匹配：Electron 主进程、命令探测器、ADB/ios/hdc 工具，都按能力模块拆分； Vue3 前端部分延续同样的思路，减少“一个组件什么都管”的情况。

  • 更好的类型推导与重构体验

虽然当前项目以 JS 为主，但 Composition API 的写法在未来引入 TS 时更平滑： setup() 返回的状态和方法都在同一个作用域里，非常有利于类型推断和重构。

3.1.2 组件化设计思路

  • 顶层布局：设备列表 + 右侧内容区
  • 左侧：设备列表 + 平台切换（Android / iOS / Harmony）
  • 右侧：根据当前选中设备 + 平台，切换对应的设备面板组件
  • 好处：
  • 布局结构在所有页面保持一致，学习一次，处处通用
  • 新增平台（例如后续再接一个厂商自研系统）时，只需新增一个面板组件
  • 设备面板内部再拆分能力模块

以 Android 面板为例，内部通常包含：

  • 设备信息卡片：展示型号、系统版本、电量、存储空间等
  • 操作区域：安装 / 卸载应用、启动 / 停止应用、日志抓取等
  • 相册区域：相册列表、缩略图、预览、下载
  • 日志区域：展示最近的操作与执行结果

这些区域在代码上对应不同的子组件或逻辑块，既方便复用，也方便后续做 A/B 试验或局部重构。

  • “通用组件 + 平台特定组件”的分层
  • 通用组件：如通用的设备卡片基础样式、通用的操作按钮组、通用的日志列表组件
  • 平台特定组件：Android 应用列表、iOS 快捷登录面板、Harmony 专属能力等

通过 props / slots，将通用组件“模板化”，平台组件只专注于提供内容和交互逻辑。

3.1.3 状态管理方案

  • 不急于上全局 Store，从“局部状态 + 轻量封装”开始
  • 大部分状态（当前设备、当前 Tab、loading、错误信息）都可以通过组件内部的 ref / reactive 管理
  • 通过组合式函数（如 useDeviceService()）对接底层 DeviceService / adb / ios 工具，避免在组件里直接写命令行字符串
  • 如何划分“局部状态”和“全局状态”
  • 局部状态：只和当前组件相关，例如当前 Tab、当前选中的相册、某个操作的 loading
  • 全局状态：需要跨多个组件共享，例如当前选中设备、当前环境信息

当前实现中，全局状态主要通过顶层组件向下透传；如果后续需求复杂度继续提升，可以自然迁移到 Pinia 等状态管理方案。

  • 与 Electron API 的集成
  • 在组合函数内部调用 window.electronAPI，对外只暴露“业务含义”的方法

例如：takeScreenshot()、startRecording()，而不是 executeCommand('adb shell ...')

  • 这样可以保证 UI 层完全不关心底层命令细节，未来命令行方案变更时，只需要改 utils 层。

3.1.4 响应式布局设计

  • 基于 Flex + Grid + Element Plus 栅格系统实现三种典型布局：
  • 桌面宽屏：左侧窄列设备列表 + 右侧主内容（多 Tab）
  • 普通笔记本：设备列表高度压缩、工具栏适当折行
  • 窄窗口：优先展示“当前设备 + 当前功能”，次要信息可通过折叠面板或对话框查看
  • 高度自适应与滚动区域划分：
  • 顶部工具栏固定高度，下面的内容区设置 overflow: auto
  • 日志区域单独可滚动，避免整个页面一滚到底影响操作
  • 实战经验：
  • 从一开始“以开发机为中心”的固定布局，迭代为“以用户场景为中心”的弹性布局
  • 多次在不同分辨率（13 寸、24 寸、720p）下试用，找出“最低可用宽度”，以此作为断点设计的依据。

3.2 多平台设备面板

3.2.1 统一界面设计

  • 统一的信息架构
  • 无论是 Android、iOS 还是 Harmony，用户看到的都是：

“设备列表 → 选中设备 → 右侧面板（信息 + 操作 + 相册 + 日志）”

  • 统一的交互路径可以显著降低测试同学的学习成本。
  • 平台差异通过文案和图标体现，而不是完全不同的 UI
  • 例：Android 设备在卡片上显示“小机器人”图标，iOS 显示苹果图标，Harmony 显示鸿蒙图标
  • 操作按钮相同位置，但内部调用的命令完全不同（ADB / go-ios / HDC）

3.2.2 设备信息展示

  • 信息字段选择
  • 基础字段：设备名称、型号、系统版本、分辨率、序列号
  • 运行状态：电量、电池是否在充电、存储剩余空间、网络状态
  • 数据来源链路
  • 主进程通过命令行工具（ADB/ios/hdc）获取原始数据
  • utils 层（如 adb.js / ios.js）负责解析命令输出，转成统一的设备信息结构
  • Vue 组件只关心“结构化后的字段”，不关心具体命令

3.2.3 实时状态更新

  • 设备在线/离线检测
  • 周期性轮询设备列表，检测新增设备 / 已断开设备
  • UI 层根据状态变更：
  • 新增设备：自动在列表中高亮提示
  • 断开设备：设备卡片灰显，并提示“设备已断开”
  • 状态刷新策略
  • 避免全量刷新导致的闪烁：

对比前后设备列表，仅对变化的设备做局部更新

  • 长耗时操作（例如拉取大相册）采用局部 loading + 日志输出，让用户感知到“还在做事”。

3.2.4 交互体验优化

  • 操作前后状态反馈
  • 所有关键按钮（截图、录屏、安装、卸载）在点击后立即进入 loading
  • 完成后统一通过 Notification 提示结果，并在日志区域追加详细信息
  • 防误触设计
  • 危险操作（清空缓存、卸载应用）都增加二次确认对话框
  • 对正在执行中的操作禁用重复点击，避免产生并发任务
  • 典型优化案例
  • 录屏：防止“用户以为没点上，又点了第二次导致两路录屏同时进行”

通过“录屏中”状态 + 禁用按钮的方式彻底消除这类问题。

3.3 数据银行树功能

3.3.1 功能背景与目标

  • 为测试同学提供一个“统一的测试数据入口”，避免：
  • 在多个系统里翻找账号、手机号
  • 手动复制粘贴到被测 App 里
  • 银行树负责管理业务维度、环境维度、账号维度的数据，并以树形结构呈现。

3.3.2 数据获取与渲染流程

  1. 渲染进程通过 window.electronAPI.fetchBankTree() 向主进程发起请求
  2. 主进程代为访问后端接口（绕过 CORS），并返回树结构数据
  3. 前端根据返回的数据构造 Tree 组件所需的数据结构，支持：
  • 懒加载子节点
  • 展开/收起
  • 单选 / 多选（根据业务需要）

3.3.3 手机号自动提取

  • 提取规则设计
  • 优先从节点数据中查找标准字段（如 phone, mobile）
  • 其次从备注信息或扩展字段中提取 11 位数字串
  • 对不符合手机号格式的数据直接忽略，避免误填
  • 自动填充流程
  • 用户在银行树里选中一条数据
  • 前端自动从节点数据中提取手机号
  • 将手机号填充到登录表单的输入框中，并在旁边通过 Badge 标记“来自数据银行树”

3.3.4 与快捷登录功能的集成

  • 在选中数据并自动填充手机号后，用户只需点击一次“快捷登录”按钮：
  • 前端根据当前银行树节点、环境配置、设备信息，拼出完整的自动登录参数
  • 调用 iOS 端快捷登录能力（第 4 期会详细展开），完成一键登录
  • 这样，数据银行树不是一个“展示数据的树”，而是整个快捷登录链路的前半段入口。

3.3.5 用户体验优化

  • 对大数据量银行树的性能优化：
  • 懒加载子节点，只加载用户真正展开的部分
  • 支持关键字搜索 + 高亮，帮助快速定位目标数据
  • 对新用户的引导：
  • 首次进入时展示一段简短指引：如何选数据、如何自动填充、如何发起快捷登录
  • 常见误区提示，例如：

“没有手机号的节点仅用于查看业务结构，不能直接快捷登录”

3.4 UI/UX 优化实践

3.4.1 Element Plus 组件使用

  • 核心组件选型：
  • ElTable / ElTree / ElTabs 用于信息展示和结构化导航
  • ElDialog / ElDrawer 用于详情查看与二级操作
  • ElNotification / ElMessage 用于结果反馈
  • 二次封装实践：
  • 将通用的“确认对话框 + 异步操作”封装成一个小工具，统一交互风格
  • 将“设备卡片 + 操作按钮”封装为可复用组件，Android / iOS / Harmony 仅替换内部文案和命令。

3.4.2 加载状态处理

  • 全局与局部 loading：
  • 进入页面时加载设备列表：使用全局 loading 覆盖主内容区
  • 拉取相册、安装应用等操作：只在按钮或对应区域上显示局部 loading
  • 避免“假死感”：
  • 超过一定时间（如 5 秒）仍未完成的操作，在日志区域追加一条提示
  • 对特别耗时的操作（如全量拉取照片），建议提供“进度估计”或“分阶段日志”。

3.4.3 错误提示优化

  • 文案拆层：
  • 面向测试同学：用“能理解的语言”描述发生了什么（例如：“未检测到设备，请检查数据线连接并解锁屏幕”）
  • 面向开发者：在日志中保留原始错误信息（命令行输出、错误码等）
  • 统一错误处理：
  • 在 utils 层集中处理常见错误码（设备未连接、命令不存在、权限不足）
  • Vue 组件只需要关心“业务结果：成功 / 失败 + 提示文案”

3.4.4 响应式与视觉一致性

  • 通过 CSS 变量统一控制：
  • 主色、强调色、边框圆角、阴影等基础视觉元素
  • 针对不同分辨率的适配：
  • 在较窄窗口下将不那么重要的列折叠为“更多信息”抽屉
  • 保证“当前设备 +当前操作按钮 + 当前结果反馈”永远是最优先可见的信息。

> 本期重点是“如何用 Vue3 把前两期构建好的 Electron 能力‘长出来’”， > 通过合理的架构设计与组件拆分，让多平台设备操作在一个统一的前端界面中自然呈现出来。

赏

一名测试工作者，专注接口测试、自动化测试、性能测试、Python技术。