基于Electron与AI的智能桌面宠物开发实战

Electron桌面应用开发Vue 3

于 2026-08-01 03:57:01 修改

·本内容遵循CC 4.0 BY-SA版权协议

最近在 GitHub 上发现一个很有意思的项目——桌宠菲比。如果你还记得十几年前电脑桌面上的电子宠物，可能会觉得这不过是个怀旧玩具。但实际体验后，我发现它背后隐藏着不少值得开发者关注的技术亮点。

桌宠菲比本质上是一个桌面端智能助手，它把传统电子宠物的互动性和现代 AI 能力结合在了一起。与那些需要你主动唤醒的语音助手不同，菲比会像真实宠物一样在你的桌面上活动，根据你的操作状态主动提供帮助。比如，在你长时间编码时提醒休息，或者在你频繁切换文件时猜测你可能需要哪些参考资料。

这篇文章会从技术实现角度拆解桌宠菲比的核心架构，并提供一个完整的桌面端智能助手开发示例。你将了解到如何用现代前端技术结合 AI 能力，打造一个既有趣又实用的桌面伴侣应用。

1. 桌宠菲比解决了什么问题

传统桌面助手大多以弹窗或语音形式存在，交互方式单一且容易打断工作流。桌宠菲比的设计思路很巧妙：它把助手具象化为一个可互动的桌面宠物，既降低了工具的使用门槛，又通过拟人化互动提升了用户粘性。

从技术角度看，菲比要解决三个核心问题：

桌面常驻与低干扰展示：如何在不影响主工作区的前提下保持可见性
上下文感知与智能响应：如何准确理解用户当前的工作状态和需求
自然交互与性能平衡：如何在资源占用和动画流畅度之间找到平衡点

对于前端开发者来说，这类项目是很好的全栈实践机会，涉及桌面应用开发、动画渲染、AI 集成等多个技术领域。

2. 核心架构与技术选型

桌宠菲比采用 Electron + Vue 3 的技术栈，这是目前桌面跨端开发的主流选择。Electron 提供了完整的桌面应用能力，Vue 3 的 Composition API 则很适合管理复杂的宠物状态逻辑。

2.1 整体架构设计

TEXT

主进程 (Main Process)

├── 窗口管理

├── 系统托盘

├── 全局快捷键

└── 原生模块调用

渲染进程 (Renderer Process)

├── 宠物UI组件 (Vue 3)

├── 动画引擎 (CSS3 + Canvas)

├── AI交互模块

└── 状态管理 (Pinia)

2.2 关键技术选型理由

Electron：跨平台兼容性成熟，社区生态丰富，便于调用系统 API
Vue 3：响应式系统性能优秀，Composition API 更适合复杂状态管理
TensorFlow.js：本地化 AI 推理，避免网络请求延迟
Howler.js：Web Audio API 封装，处理宠物音效

这种架构既保证了功能的完整性，又为后续的功能扩展留出了空间。

3. 开发环境准备

在开始编码前，需要配置合适的开发环境。以下是推荐的环境配置：

3.1 基础环境要求

BASH

# 检查 Node.js 版本

node --version # 需要 >= 16.0.0

npm --version # 需要 >= 8.0.0

# 或者使用 yarn

yarn --version # 需要 >= 1.22.0

3.2 初始化 Electron 项目

BASH

# 创建项目目录

mkdir desktop-pet-phoebe

cd desktop-pet-phoebe

# 初始化 package.json

npm init -y

# 安装 Electron 相关依赖

npm install --save-dev electron electron-builder

npm install vue@next @vitejs/plugin-vue

3.3 基础项目结构

创建以下目录结构：

TEXT

desktop-pet-phoebe/

├── src/

│ ├── main/ # 主进程代码

│ │ └── main.js # 入口文件

│ ├── renderer/ # 渲染进程代码

│ │ ├── assets/ # 静态资源

│ │ ├── components/ # Vue 组件

│ │ └── App.vue # 根组件

│ └── shared/ # 共享代码

├── build/ # 构建配置

└── package.json

4. 核心功能实现

4.1 创建宠物窗口

主进程代码负责创建宠物窗口，关键是要设置合适的窗口属性：

JAVASCRIPT

// src/main/main.js

const { app, BrowserWindow } = require('electron')

const path = require('path')

function createPetWindow() {

const mainWindow = new BrowserWindow({

width: 200,

height: 200,

alwaysOnTop: true, // 始终置顶

skipTaskbar: true, // 不在任务栏显示

frame: false, // 无边框

transparent: true, // 透明背景

resizable: false, // 不可调整大小

webPreferences: {

nodeIntegration: false,

contextIsolation: true,

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

}

})

// 加载宠物界面

if (process.env.NODE_ENV === 'development') {

mainWindow.loadURL('http://localhost:3000')

} else {

mainWindow.loadFile(path.join(__dirname, '../renderer/index.html'))

}

return mainWindow

}

app.whenReady().then(createPetWindow)

4.2 宠物动画系统

宠物的动画系统是用户体验的核心，我们使用 CSS3 动画结合状态机管理：

VUE

</div>

</template>

import { ref, computed, onMounted } from 'vue'

// 宠物状态定义

const states = {

IDLE: 'idle',

MOVING: 'moving',

SLEEPING: 'sleeping',

INTERACTING: 'interacting'

}

const currentState = ref(states.IDLE)

const position = ref({ x: 100, y: 100 })

// 根据状态计算样式

最低 0.47元/天开通会员,解锁全文

成为会员后, 你将解锁

下载资源随意下

优质VIP博文免费学

优质文库回答免费看

付费资源9折优惠