Electron + Vue3 构建一站式移动端测试平台 第1期：项目概述与架构设计

实现效果

总体架构图

架构说明

分层架构

• 1. 用户界面层：Vue3 + Element Plus 组件，提供统一的用户界面
• 2. Electron 应用层：主进程和渲染进程分离，通过 IPC 通信
• 3. 服务层：DeviceService 提供统一接口，隐藏平台差异
• 4. 平台实现层：iOS、Android、Harmony 各平台的具体实现
• 5. 通信层：usbmuxd/lockdown（iOS）、ADB（Android）、HDC（Harmony）
• 6. 设备端：iOS 设备上的 PhotoCompanion 服务

数据流向

• 用户操作 → Vue3 组件 → `window.electronAPI` → IPC → 主进程 → 服务层 → 平台实现 → 设备
• 设备响应 → 平台实现 → 服务层 → 主进程 → IPC → 渲染进程 → Vue3 组件 → 用户界面

关键通信机制

• IPC 通信：渲染进程 ↔ 主进程（通过 Context Bridge）
• USB 通信：桌面端 ↔ iOS 设备（通过 usbmuxd + lockdown）
• 命令行通信：桌面端 ↔ Android/Harmony 设备（通过 ADB/HDC）

1.1 项目背景与需求分析

1.1.1 移动端测试的痛点分析

在移动应用开发与测试过程中，我们经常面临以下痛点：

痛点一：多设备管理复杂

问题：测试团队需要同时管理 iOS、Android、HarmonyOS 等多平台设备

现状：每个平台都有独立的工具链，操作方式不统一

• iOS：需要 Xcode、iTunes、libimobiledevice 等工具
• Android：需要 ADB 命令行工具
• HarmonyOS：需要 HDC 命令行工具

影响：学习成本高，操作效率低，容易出错

痛点二：重复性操作繁琐

问题：日常测试中需要频繁执行相同操作

• 应用安装/卸载
• 截图/录屏
• 环境切换
• 登录操作

现状：每次都需要手动执行命令，或编写脚本

影响：浪费时间，容易遗漏步骤

痛点三：设备信息获取困难

问题：需要快速了解设备状态、应用信息、环境配置等

现状：需要通过命令行工具查询，信息分散

影响：信息获取慢，不利于快速决策

痛点四：跨平台体验不一致

问题：不同平台的操作界面和交互方式差异大

现状：iOS 和 Android 的工具链完全不同

影响：用户体验割裂，学习成本高

1.1.2 多平台设备管理的挑战

技术挑战

iOS 平台的特殊性

• iOS 系统封闭，需要通过官方协议（usbmuxd + lockdown）与设备通信
• 需要设备配对（Pair）才能建立信任关系
• 照片、文件访问需要特殊权限和服务
• URL Scheme 调用需要应用支持

Android 平台的复杂性

• 不同厂商的 Android 系统差异大
• ADB 连接可能不稳定
• 应用包名、权限管理复杂
• 系统版本兼容性问题

HarmonyOS 平台的新特性

• 相对较新的系统，工具链不够成熟
• HDC 命令与 ADB 类似但不完全兼容
• 需要单独适配

架构挑战

统一接口设计

• 如何抽象不同平台的差异？
• 如何设计统一的 API 接口？
• 如何保证接口的可扩展性？

通信机制

• iOS 需要自定义二进制协议
• Android/Harmony 使用命令行工具
• 如何统一通信方式？

1.1.3 测试效率提升的需求

业务需求

快速登录

• 测试人员需要频繁切换账号登录
• 手动输入手机号效率低
• 需要支持自动登录功能

环境管理

• 需要在测试环境、预发布环境、生产环境之间切换
• 需要快速获取当前环境信息
• 需要支持环境自动切换

设备信息查看

• 快速查看设备基本信息（型号、系统版本、电量等）
• 查看已安装应用列表
• 查看应用详细信息

媒体文件管理

• iOS 设备照片浏览和下载
• 截图和录屏管理
• 文件传输

技术需求

统一的操作界面

• 所有平台使用相同的 UI 界面
• 统一的交互方式
• 一致的错误提示

自动化能力

• 支持批量操作
• 支持脚本化执行
• 支持 API 调用

稳定性保障

• 连接异常自动重试
• 错误信息清晰明确
• 操作日志完整记录

1.1.4 项目目标

基于以上痛点和需求分析，我们确定了项目的核心目标：

• 统一管理：一个工具管理所有平台的移动设备
• 提升效率：自动化常用操作，减少重复劳动
• 降低门槛：图形化界面，无需记忆复杂命令
• 稳定可靠：完善的错误处理和日志记录
• 易于扩展：模块化设计，便于添加新功能

1.2 技术选型

技术选型是项目成功的关键因素。我们需要选择既能满足功能需求，又能保证开发效率和维护性的技术栈。

1.2.1 Electron：为什么选择 Electron？

Electron 的优势

跨平台桌面应用开发

• 一次开发，多平台运行：使用 Web 技术（HTML、CSS、JavaScript）开发，可以打包成 macOS、Windows、Linux 应用
• 原生能力访问：通过 Node.js 可以访问文件系统、网络、系统 API 等原生能力
• 成熟的生态：丰富的第三方库和工具支持

适合我们的场景

• 需要访问系统底层能力（usbmuxd、ADB、HDC 等命令行工具）
• 需要管理本地文件（截图、录屏、照片等）
• 需要与设备进行通信（端口转发、协议通信）
• 需要提供图形化界面（设备管理、操作按钮等）

技术栈统一

• 前端和后端都使用 JavaScript/TypeScript
• 减少技术栈切换成本
• 代码复用率高

Electron 架构

┌─────────────────────────────────────┐

│ Electron 应用 │

├─────────────────────────────────────┤

│ 渲染进程 (Renderer Process) │

│ ┌───────────────────────────────┐ │

│ │ Vue3 前端界面 │ │

│ │ - 设备列表 │ │

│ │ - 操作按钮 │ │

│ │ - 数据展示 │ │

│ └───────────────────────────────┘ │

│ ↕ IPC 通信 │

├─────────────────────────────────────┤

│ 主进程 (Main Process) │

│ ┌───────────────────────────────┐ │

│ │ Node.js 后端逻辑 │ │

│ │ - 设备检测 │ │

│ │ - 服务启动 │ │

│ │ - 文件操作 │ │

│ └───────────────────────────────┘ │

└─────────────────────────────────────┘

实际应用

在我们的项目中，Electron 主进程负责：

• 启动和管理 photo-proxy 服务
• 执行 ADB/HDC 命令
• 管理文件系统操作
• 处理 IPC 通信

渲染进程负责：

• 展示设备列表和状态
• 用户交互界面
• 数据展示和操作反馈

1.2.2 Vue3 + Element Plus：前端框架选择

Vue3 的优势

Composition API

• 更好的逻辑复用：通过组合式函数（Composables）可以更好地组织和复用逻辑
• 更好的类型推导：配合 TypeScript 使用，类型推导更准确
• 更好的性能：响应式系统优化，性能更好

示例：设备管理逻辑复用

javascript

// composables/useDevice.js

export function useDevice() {

const devices = ref([])

const loading = ref(false)

async function refreshDevices() {

loading.value = true

try {

devices.value = await window.electronAPI.deviceService.getDevices()

} finally {

loading.value = false

}

}

return { devices, loading, refreshDevices }

}

// 在组件中使用

const { devices, loading, refreshDevices } = useDevice()

响应式系统

• 基于 Proxy 的响应式系统，性能更好
• 支持深层响应式
• 更好的开发体验

Element Plus 的优势

丰富的组件库

• 表格组件：设备列表展示
• 对话框组件：照片预览、登录历史等
• 按钮组件：各种操作按钮
• 消息提示：操作反馈和错误提示

统一的视觉风格

• 现代化的 UI 设计
• 一致的交互体验
• 支持主题定制

实际应用场景

vue

<!-- 设备列表展示 -->

<el-table :data="devices" v-loading="loading">

<el-table-column prop="name" label="设备名称" />

<el-table-column prop="platform" label="平台" />

</el-table>

<!-- 操作按钮 -->

<el-button @click="handleLogin" type="primary">登录</el-button>

<!-- 消息提示 -->

<el-notification :title="title" :message="message" />

1.2.3 Node.js：后端能力扩展

Node.js 的优势

系统能力访问

• 文件系统：`fs` 模块可以读写文件
• 子进程：`child_process` 可以执行命令行工具
• 网络通信：`net`、`http` 模块可以建立网络连接
• 流处理：可以处理大文件和流式数据

实际应用

javascript

const { exec } = require('child_process')

exec('adb devices', (error, stdout, stderr) => {

// 处理结果

})

// 文件操作

const fs = require('fs')

fs.readFile('path/to/file', (err, data) => {

// 处理文件

})

// 网络通信

const net = require('net')

const socket = net.createConnection(port, host)

丰富的生态

• npm 包管理器，海量第三方库
• 社区活跃，问题解决快
• 文档完善

在我们的项目中的应用

设备通信

• 通过 `child_process` 执行 `ideviceinfo`、`adb`、`hdc` 等命令
• 通过 `net` 模块建立与设备的 TCP 连接
• 通过 `fs` 模块管理本地文件

服务管理

• 启动和管理 photo-proxy 服务
• 管理端口转发
• 处理设备连接和断开

1.2.4 Swift/Objective-C：iOS 原生能力

为什么需要原生能力？

iOS 系统限制

• iOS 系统封闭，需要通过官方协议与设备通信
• 需要设备端应用来接收和处理请求
• 某些操作必须在设备端完成（如 URL Scheme 调用）

PhotoCompanion 服务

架构设计

• 使用 Swift 编写，运行在 iOS 设备上
• 通过 NWConnection 与桌面端通信
• 处理照片访问、URL 打开、自动登录等请求

核心功能

• 照片服务：读取相册列表、获取缩略图、下载原图/视频
• URL 服务：打开 URL Scheme、执行自动登录
• 环境获取：获取设备当前环境信息

通信协议

• 自定义二进制协议
• 帧格式：类型 + 长度 + 数据
• 支持多种帧类型：LIST_ASSETS、GET_THUMB、GET_IMAGE、OPEN_URL、AUTO_LOGIN 等

技术选型总结

技术	用途	优势
Electron	桌面应用框架	跨平台、原生能力访问
Vue3	前端框架	组合式 API、性能好
Element Plus	UI 组件库	组件丰富、风格统一
Node.js	后端运行时	系统能力访问、生态丰富
Swift	iOS 原生开发	设备端服务实现

1.3 整体架构设计

架构设计是项目的核心，决定了系统的可维护性、可扩展性和性能。我们采用了分层架构和模块化设计，确保各层职责清晰，便于维护和扩展。

1.3.1 主进程与渲染进程分离

Electron 进程模型

Electron 应用采用多进程架构，主要包含：

主进程（Main Process）

• 应用的入口点
• 负责创建和管理应用窗口
• 管理应用生命周期
• 处理系统级操作（文件系统、网络、子进程等）
• 通过 IPC 与渲染进程通信

渲染进程（Renderer Process）

• 每个窗口运行一个渲染进程
• 负责渲染用户界面
• 运行前端代码（Vue3）
• 通过 IPC 与主进程通信

为什么需要分离？

安全性

• 渲染进程运行在沙箱环境中，无法直接访问 Node.js API
• 通过 `contextIsolation` 和 `preload` 脚本，安全地暴露 API
• 防止恶意代码执行系统操作

性能

• 主进程和渲染进程独立运行，互不影响
• 渲染进程崩溃不会影响主进程
• 可以创建多个渲染进程（多窗口应用）

代码组织

• 前后端代码分离，职责清晰
• 便于团队协作
• 便于测试和维护

实际应用

主进程职责（electron/main.js）

javascript

// 1. 创建应用窗口

function createMainWindow() {

mainWindow = new BrowserWindow({

webPreferences: {

preload: path.join(__dirname, 'preload.cjs'),

contextIsolation: true,

nodeIntegration: false

}

})

}

// 2. 注册 IPC Handler

ipcMain.handle('url-service:open-url', async (event, ...args) => {

// 处理 URL 打开请求

})

// 3. 管理服务进程

function startPhotoProxyService() {

// 启动 photo-proxy 服务

}

渲染进程职责（Vue3 组件）

javascript

// 通过 IPC 调用主进程功能

const result = await window.electronAPI.urlService.openURL(url, deviceId)

// 更新 UI

devices.value = await window.electronAPI.deviceService.getDevices()

1.3.2 IPC 通信架构

IPC 通信机制

Context Bridge

• Electron 提供的安全通信机制
• 通过 `preload` 脚本暴露 API
• 渲染进程通过 `window.electronAPI` 访问

通信流程

渲染进程 (Vue3)

↓ 调用 window.electronAPI.xxx()

↓

preload.cjs (Context Bridge)

↓ ipcRenderer.invoke()

↓

主进程 (electron/main.js)

↓ ipcMain.handle()

↓

执行具体逻辑

↓ 返回结果

↓

渲染进程 (更新 UI)

Preload 脚本设计

preload.cjs 的作用

• 在渲染进程和主进程之间建立安全桥梁
• 暴露安全的 API 给渲染进程
• 防止直接访问 Node.js API

实际实现

javascript

// electron/preload.cjs

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('electronAPI', {

// URL 服务

urlService: {

openURL: (url, deviceId) =>

ipcRenderer.invoke('url-service:open-url', url, deviceId),

autoLogin: (phone, env, deviceId) =>

ipcRenderer.invoke('url-service:auto-login', phone, env, deviceId)

},

// 设备服务

deviceService: {

getDevices: () =>

ipcRenderer.invoke('device-service:get-devices'),

login: (platform, phone) =>

ipcRenderer.invoke('device-service:login', platform, phone)

},

// 照片代理服务

photoProxy: {

listAssets: (deviceId, folder, offset, limit) =>

ipcRenderer.invoke('photo-proxy:list-assets', deviceId, folder, offset, limit),

getThumbnail: (deviceId, assetId) =>

ipcRenderer.invoke('photo-proxy:get-thumbnail', deviceId, assetId)

}

})

IPC Handler 设计

主进程注册 Handler

javascript

// electron/main.js

ipcMain.handle('url-service:open-url', async (event, url, deviceId) => {

try {

// 调用 URL 服务

const result = await urlService.openURL(url, deviceId)

return { success: true, data: result }

} catch (error) {

return { success: false, error: error.message }

}

})

统一返回值格式

• 所有 IPC Handler 返回统一格式：`{ success: boolean, data?: any, error?: string }`
• 便于前端统一处理
• 错误信息清晰明确

1.3.3 多平台统一接口设计

设计原则

接口抽象

• 定义统一的接口规范
• 隐藏平台差异
• 提供一致的调用方式

平台适配

• 每个平台实现统一的接口
• 内部实现可以不同
• 对外接口保持一致

DeviceService 设计

统一接口

javascript

class DeviceService {

async login(platform, phone) {

if (platform === 'ios') {

return await this.ios.openXiaoyingTestLogin(phone)

} else if (platform === 'android') {

return await this.adb.login(phone)

} else if (platform === 'harmony') {

return await this.hdc.login(phone)

}

}

// 统一截图接口

async screenshot(platform, deviceId, outputPath) {

if (platform === 'ios') {

return await this.ios.screenshot(deviceId, outputPath)

} else if (platform === 'android') {

return await this.adb.screenshot(deviceId, outputPath)

}

}

// 统一获取设备列表接口

async getDevices(platform) {

if (platform === 'ios') {

return await this.ios.getDevices()

} else if (platform === 'android') {

return await this.adb.getDevices()

} else if (platform === 'harmony') {

return await this.hdc.getDevices()

}

}

}

平台实现

javascript

class IOSManager {

async openXiaoyingTestLogin(phone, deviceId) {

// iOS 特定的实现

// 使用 URL Scheme 或 Companion 服务

}

}

// Android 实现

class ADBManager {

async login(phone) {

// Android 特定的实现

// 使用 ADB 命令

}

}

优势

• 前端代码无需关心平台差异
• 新增平台只需实现统一接口
• 便于测试和维护

1.3.4 模块化设计思路

模块划分

按功能划分

• 设备管理模块：设备检测、连接管理
• 服务管理模块：photo-proxy、URL Service 启动和管理
• 操作模块：登录、截图、录屏等操作
• 数据模块：照片、应用列表等数据获取

按平台划分

• iOS 模块：`src/utils/ios.js`、`photo-proxy/`
• Android 模块：`src/utils/adb.js`
• Harmony 模块：`src/utils/hdc.js`

按层次划分

• 前端层：Vue3 组件、UI 交互
• 服务层：DeviceService、统一接口
• 平台层：iOS、Android、Harmony 具体实现
• 通信层：IPC、协议通信

模块依赖关系

前端组件 (Vue3)

↓

DeviceService (统一接口)

↓

平台实现 (iOS/Android/Harmony)

↓

底层工具 (usbmuxd/ADB/HDC)

模块化优势

可维护性

• 每个模块职责单一
• 修改一个模块不影响其他模块
• 便于定位问题

可扩展性

• 新增功能只需添加新模块
• 新增平台只需实现接口
• 不影响现有功能

可测试性

• 每个模块可以独立测试
• 便于单元测试和集成测试

实际应用示例

照片模块

photo-proxy/

├── protocol/ # 协议定义

├── usb/ # USB 通信

├── photos/ # 照片处理

└── PhotoCompanion/ # iOS 端服务

设备管理模块

src/utils/

├── deviceService.js # 统一接口

├── ios.js # iOS 实现

├── adb.js # Android 实现

└── hdc.js # Harmony 实现

1.4 项目结构概览

项目结构清晰，模块划分合理，便于开发和维护。本节将详细介绍项目的目录结构、核心模块划分和代码组织方式。

1.4.1 目录结构说明

根目录结构

mobile-tools-new/

├── src/ # 前端源代码

├── electron/ # Electron 主进程代码

├── photo-proxy/ # iOS 设备通信服务

├── photo-service/ # 照片服务（C++）

├── commands/ # 命令行工具

├── assets/ # 静态资源

├── docs/ # 文档

├── build/ # 构建配置

├── release/ # 打包输出

├── dist/ # 前端构建输出

├── package.json # 项目配置

└── vite.config.ts # Vite 配置

核心目录详解

src/ - 前端源代码

src/

├── components/ # Vue 组件

│ ├── IOSDeviceSection.vue # iOS 设备面板

│ ├── AndroidDeviceSection.vue # Android 设备面板

│ ├── HarmonyDeviceSection.vue # Harmony 设备面板

│ └── App.vue # 主应用组件

├── utils/ # 工具函数

│ ├── deviceService.js # 设备服务统一接口

│ ├── ios.js # iOS 设备操作封装

│ ├── adb.js # Android 设备操作封装

│ ├── hdc.js # Harmony 设备操作封装

│ └── commandDetector.js # 命令检测工具

└── main.js # 前端入口文件

electron/ - Electron 主进程

electron/

├── main.js # 主进程入口

├── main-entry.ts # TypeScript 入口（可选）

└── preload.cjs # Preload 脚本（Context Bridge）

photo-proxy/ - iOS 设备通信服务

photo-proxy/

├── protocol/ # 协议定义

│ ├── FrameType.ts # 帧类型定义

│ ├── bridge-port-forward.ts # 端口转发桥接

│ └── ...

├── usb/ # USB 通信

│ ├── usbmuxd.ts # usbmuxd 客户端

│ ├── lockdown.ts # lockdown 协议

│ └── ...

├── photos/ # 照片处理

│ ├── photo-manager.ts # 照片管理器

│ └── ...

├── PhotoCompanion/ # iOS 端 Swift 服务

│ ├── ServiceBinary.swift # 服务主逻辑

│ ├── Info.plist # 应用配置

│ └── ...

├── server.ts # 服务启动入口

└── ipc-handler.ts # IPC Handler

commands/ - 命令行工具

commands/

├── adb # ADB 工具（Android）

├── hdc # HDC 工具（Harmony）

├── ios # iOS 工具（ideviceinfo 等）

├── wda.ipa # WebDriverAgent IPA

└── ...

1.4.2 核心模块划分

模块一：设备管理模块

职责

• 设备检测和连接管理
• 设备信息获取
• 设备状态监控

核心文件

• `src/utils/deviceService.js`：统一接口
• `src/utils/ios.js`：iOS 设备管理
• `src/utils/adb.js`：Android 设备管理
• `src/utils/hdc.js`：Harmony 设备管理

功能

• 获取设备列表
• 检查设备连接状态
• 获取设备信息（型号、系统版本等）
• 设备连接/断开处理

模块二：服务管理模块

职责

• photo-proxy 服务启动和管理
• URL Service 服务启动和管理
• 端口转发管理

核心文件

• `photo-proxy/server.ts`：服务启动入口
• `photo-proxy/ipc-handler.ts`：IPC 处理
• `electron/main.js`：服务生命周期管理

功能

• 启动/停止服务
• 端口转发建立和释放
• 服务状态监控
• 错误处理和重试

模块三：操作模块

职责

• 登录操作
• 截图/录屏
• 应用安装/卸载
• 文件传输

核心文件

• `src/utils/ios.js`：iOS 操作实现
• `src/utils/adb.js`：Android 操作实现
• `src/utils/hdc.js`：Harmony 操作实现

功能

• 快捷登录（iOS/Android/Harmony）
• 截图和录屏
• 应用管理
• 文件操作

模块四：数据模块

职责

• 照片数据获取
• 应用列表获取
• 环境信息获取

核心文件

• `photo-proxy/photos/`：照片处理
• `src/components/IOSDeviceSection.vue`：照片展示
• `src/components/AndroidDeviceSection.vue`：应用列表展示

功能

• 相册列表获取
• 缩略图/原图获取
• 应用列表获取
• 环境信息获取

模块五：通信模块

职责

• IPC 通信
• 自定义协议通信
• 网络请求

核心文件

• `electron/preload.cjs`：IPC 桥接
• `photo-proxy/protocol/`：协议定义
• `photo-proxy/usb/`：USB 通信

功能

• 主进程与渲染进程通信
• 桌面端与设备端通信
• 协议编码/解码

1.4.3 代码组织方式

分层架构

前端层（Vue3）

• 组件层：`src/components/` - UI 组件
• 逻辑层：`src/utils/` - 业务逻辑
• 服务层：通过 `window.electronAPI` 调用后端

后端层（Electron + Node.js）

• IPC 层：`electron/main.js` - IPC Handler
• 服务层：`photo-proxy/` - 业务服务
• 平台层：`src/utils/ios.js`、`adb.js`、`hdc.js` - 平台实现

设备层（iOS Swift）

• 服务层：`photo-proxy/PhotoCompanion/` - iOS 端服务
• 协议层：自定义二进制协议

实际应用示例

设备服务统一接口

javascript

class DeviceService {

// src/utils/deviceService.js

constructor() {

this.adb = ADBManager

this.hdc = HDCManager

this.ios = IOSManager

}

// 统一接口，隐藏平台差异

async login(platform, phone) {

if (platform === 'ios') {

return await this.ios.openXiaoyingTestLogin(phone)

} else if (platform === 'android') {

return await this.adb.login(phone)

}

}

}

前端组件使用

javascript

// src/components/IOSDeviceSection.vue

import DeviceService from '@/utils/deviceService.js'

const deviceService = new DeviceService()

// 调用统一接口，无需关心平台差异

const result = await deviceService.login('ios', phone)

1.4.4 配置文件说明

package.json

关键配置

• `main`：Electron 主进程入口
• `scripts`：构建和运行脚本
• `dependencies`：生产依赖
• `devDependencies`：开发依赖
• `build`：Electron Builder 配置

vite.config.ts

配置说明

• 前端构建配置
• 开发服务器配置
• 插件配置（Vue、TypeScript 等）

tsconfig.json

配置说明

• TypeScript 编译配置
• 路径别名配置
• 类型检查配置

1.4.5 开发工作流

开发环境启动

bash

# 1. 安装依赖

yarn install

# 2. 构建 photo-proxy（TypeScript 编译）

yarn build:photo-proxy

# 3. 启动开发服务器

yarn dev

# 这会同时启动：

# - Vite 开发服务器（前端）

# - Electron 应用（主进程）

构建流程

bash

# 1. 构建 photo-proxy

yarn build:photo-proxy

# 2. 构建 photo-service（C++）

yarn build:photo-service

# 3. 构建前端

yarn build

# 4. 打包 Electron 应用

yarn dist

代码组织最佳实践

文件命名

• 组件文件：PascalCase（如 `IOSDeviceSection.vue`）
• 工具文件：camelCase（如 `deviceService.js`）
• 常量文件：UPPER_SNAKE_CASE（如 `CONSTANTS.js`）

目录组织

• 按功能划分目录
• 相关文件放在同一目录
• 避免目录过深（建议不超过 3 层）

代码风格

• 使用 ESLint 统一代码风格
• 使用 Prettier 统一代码格式
• 遵循 Vue3 和 JavaScript 最佳实践

总结

本期内容涵盖了项目概述与架构设计的核心内容：

• 项目背景与需求分析：深入分析了移动端测试的痛点，明确了项目目标
• 技术选型：详细介绍了 Electron、Vue3、Node.js、Swift 等技术选型的原因和优势
• 整体架构设计：阐述了主进程与渲染进程分离、IPC 通信架构、多平台统一接口设计、模块化设计思路
• 项目结构概览：详细介绍了目录结构、核心模块划分、代码组织方式

通过本期内容，大家对项目的整体架构有了清晰的认识，为后续深入技术细节打下了基础。

下一期我们将深入讲解 **Electron 主进程开发实践**，包括设备检测、服务启动、IPC Handler 设计等内容。