## 当二次元遇上生产力工具最近开发了一款名为"小桌宠"的跨平台桌面[应用](https://github.com/zlmica/3d-desktop-pet)，将3D宠物与任务管理结合。这只兔子不仅能卖萌，还会在你摸鱼时弹出提醒，堪称赛博监工。 ![image.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/91a1d879ed2d40b6af08ff14f91d17bb~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgemxtaWM=:q75.awebp?rk3s=f64ab15b&x-expires=1762317802&x-signature=GVn8LAYWFOLFwNgXmvcZDm0Su8w%3D) #### 项目已开源:[地址](https://github.com/zlmica/3d-desktop-pet)，欢迎star **懒得自己运行程序也可以直接到[视频介绍](https://www.bilibili.com/video/BV1ZfAdeDEKg/?share_source=copy_web\&vd_source=c7d1feae37785855299c92ec2d05b02b)下方获取安装包体验，支持多平台** 分享几个关键技术点的实现方案： *** ## 一、透明窗口与跨进程通信（核心黑科技） **实现效果**：宠物始终置顶显示，右键菜单唤起任务/提醒窗口 ``` function createWindow() { const primaryDisplay = screen.getPrimaryDisplay() const { width: screenWidth, height: screenHeight } = primaryDisplay.workAreaSize win = new BrowserWindow({ icon: path.join(process.env.VITE_PUBLIC, 'rabbit.png'), webPreferences: { preload: path.join(__dirname, 'preload.mjs'), }, width: 180, height: 200, x: screenWidth - 200, y: screenHeight - 150, autoHideMenuBar: true, transparent: true, frame: false, alwaysOnTop: true, resizable: false, hasShadow: false, }) // Test active push message to Renderer-process. win.webContents.on('did-finish-load', () => { win?.webContents.send('main-process-message', new Date().toLocaleString()) }) if (VITE_DEV_SERVER_URL) { win.loadURL(VITE_DEV_SERVER_URL) } else { win.loadFile(path.join(RENDERER_DIST, 'index.html')) } win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true, }) ``` 关键代码解读： * `transparent: true` + `frame: false` 实现无边框透明窗口 * `alwaysOnTop: true` 实现窗口置顶 * IPC通信控制子窗口状态 **避坑指南**：透明窗口的点击穿透问题通过计算鼠标位置+动态调整窗口大小解决 *** ## 二、3D宠物交互系统（TresJS魔法） **模型加载与动画控制**： ``` const isPlaying = ref(false) const play = async () => { currentAction2.value.play() isPlaying.value = true } const sleep = () => { currentAction2.value.stop() isPlaying.value = false } const hello = () => { if (isPlaying.value) { currentAction2.value.stop() } currentAction.value.reset() currentAction.value.play() currentAction.value.setLoop(THREE.LoopOnce, 1) currentAction.value.clampWhenFinished = true currentAction.value.getMixer().addEventListener('finished', () => { currentAction.value.stop() if (isPlaying.value) { currentAction2.value.play() } }) } ``` * 使用GLTFLoader加载骨骼动画模型 * AnimationMixer实现打招呼/运动/休息状态切换 * 点击事件穿透处理：将3D对象坐标转换为屏幕坐标 **性能优化**： * 空闲状态自动降帧（30FPS → 15FPS） * 离屏时暂停渲染 *** ## 三、任务管理系统（Dexie.js实战） **数据库设计**： class PetAppDB extends Dexie { tasks!: Table reminders!: Table constructor() { super('petApp') // 定义数据库表结构和索引 this.version(1).stores({ tasks: '++id, title, status, priority, createdAt, updatedAt, dueDate', reminders: '++id, title, reminderTime, repeatType, isEnabled, lastAcknowledgedAt, createdAt', }) } /** * 添加任务 * @param {Omit} task - 任务数据 * @returns {Promise} 返回新增任务的ID */ async addTask(task: Omit) { const timestamp = Date.now() return await this.tasks.add({ ...task, createdAt: timestamp, updatedAt: timestamp, }) } /** * 更新任务 * @param {string} id - 任务ID * @param {Partial>} changes - 更新的字段 * @returns {Promise} 返回更新的记录数 */ async updateTask( id: string, changes: Partial> ) { return await this.tasks.update(id, { ...changes, updatedAt: Date.now(), }) } /* 提醒相关方法 ...*/ * 智能排序算法：未完成 > 有截止时间 > 创建时间 * 自动过期检测：通过`dueDate`字段+定时器实现 * 离线存储：IndexedDB + 本地备份机制 **典型查询示例**： ```typescript // 获取24小时内到期的任务 const upcomingTasks = await db.tasks .where('dueDate') .between(Date.now(), Date.now() + 86400000) .toArray() ``` *** ## 四、提醒系统（多窗口协同） **架构设计**： export function useReminder() { /** * 检查是否有需要提醒的事项 */ async function checkReminders() { const reminders = await db.checkReminders() reminderQueue.value = reminders if (reminderQueue.value.length > 0) { window.ipcRenderer.send('show-reminder-window') } } * 主窗口：轮询检查 * 提醒窗口：队列管理+动画效果 * IPC消息流：show-reminder-window / hide-reminder-window **动效实现**：

{{ new Date(reminder.reminderTime).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', }) }}

使用Vue TransitionGroup + CSS Keyframe实现卡片弹出效果 *** ## 五、性能优化实践 1. **窗口管理**：子窗口单例模式（避免内存泄漏） 2. **3D渲染**：离屏Canvas + 按需渲染 3. **数据库**：批量操作+索引优化 4. **打包优化**：electron-builder配置多平台构建 ``` // @see - https://www.electron.build/configuration/configuration { $schema: "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json", appId: "YourAppID", asar: true, productName: "小桌宠", directories: { output: "release/${version}", }, files: ["dist", "dist-electron"], mac: { target: ["dmg"], artifactName: "${productName}-Mac-${version}-Installer.${ext}", }, win: { target: [ { target: "nsis", arch: ["x64"], }, ], artifactName: "${productName}-Windows-${version}-Setup.${ext}", }, nsis: { oneClick: false, perMachine: false, allowToChangeInstallationDirectory: true, deleteAppDataOnUninstall: false, }, linux: { target: ["AppImage"], artifactName: "${productName}-Linux-${version}.${ext}", }, } ``` *** ## 结语：桌面应用的思考通过这个项目验证了Electron在现代桌面开发中的可行性。尽管安装包体积较大，但开发效率和跨平台能力优势明显。未来计划加入： * 宠物更换系统 ✅ * 更多交互功能 **宠物更换功能已发布，[文章地址](https://juejin.cn/post/7475544117415624739)** **顺便一提**：项目结合AI开发，省时又省力，一个字，爽！！！

{{ reminder.title }}