Electron打造macOS桌面宠物CiCi，125帧透明动画、状态机驱动与全周期养成系统

在 macOS 桌面上，一只戴棒球帽、扎双马尾的 Q 版女孩正随着鼠标移动轻盈滑行——她会因点击部位不同而做出摸头、戳脸或踢脚等差异化反应；当用户连续 25 分钟未敲键盘，她会悄悄凑近轻戳提醒；周末则自动生成回顾卡片，汇总本周互动频次、番茄钟完成数与好感度变化。这不是商业产品，而是一位开发者用 Electron 从零搭建的桌面宠物 CiCi，其完整功能体系已覆盖养成、陪伴、效率辅助与情感反馈四大维度。 CiCi 的核心架构建立在 Electron 的三进程模型之上：主进程负责窗口管理、IPC 通信、好感度计算、日记记录与番茄钟调度；渲染进程分为三个独立窗口——桌宠本体（透明无边框）、小屋 Dashboard（数据可视化面板）与提醒浮窗。安全层面严格遵循最佳实践：启用 contextIsolation 与 sandbox，禁用 nodeIntegration，CSP 策略限定 script-src 为 'self'，所有前端 API 通过 preload.ts 中类型化的 petAPI 暴露，主进程侧对 IPC 调用做 sender 校验，杜绝跨窗口越权操作。 技术选型上，开发者对比了 Electron、Tauri、PyQt 与原生 Swift 方案。最终选择 Electron 的关键原因在于其对透明窗口（transparent: true）、无边框（frame: false）与永远置顶（alwaysOnTop）的原生支持，配合 Web 技术可高效实现动画与 UI 迭代。尤其重要的是，AI 生成的角色帧序列能直接以 标签播放，无需额外解码或渲染层适配。 素材管线是该项目最具创新性的环节。初始输入仅是一张微信头像，目标则是为 24 种动作状态生成共 125 张 512×512 透明 PNG。流程分为五步：首先由 AI 基于头像生成统一身份的“母版”（core-ip），确保后续所有动作帧在脸型、比例与配色上保持一致；其次，每个动作（如跳跃、眨眼）作为一条序列一次性生成 5 帧，约束镜头固定、身体尺度与脚底基线对齐，保证首末帧可无缝衔接待机状态；第三步使用 Apple Vision 图像处理，修复边缘锯齿并保留 Alpha 通道；第四步通过 PIL 统一裁剪至 512×512 并转为 RGBA 格式；最后仅对关键帧（如点击触发点）做手动微调。整个过程避免将动作帧视为孤立图像任务，从而保障了动画连贯性与角色一致性。 功能实现上，CiCi 采用状态机驱动动画切换：idle、blink、jump、dance 等 24 种基础状态构成主干，每种状态内部再细分情绪子状态（如开心、委屈、害羞）。右键菜单提供 20+ 互动选项，点击头部、身体或脚部触发不同反馈逻辑，例如摸头触发“害羞”+ 心形粒子，戳脚则触发“生气”+ 跳跃后背手站立。好感度系统分四档（L1–L4），直接影响外观：L1 为默认装束，L4 则解锁金冠华服；节日自动换装覆盖万圣节、圣诞节、春节等 6 个节点，用户亦可通过 JSON 或小屋面板自定义互动配置，保存后实时生效。  效率辅助模块是 CiCi 区别于传统桌宠的关键。除标准番茄钟外，设有“陪写代码”模式：手动开启后切换坐姿陪伴，若检测到 25 分钟无键盘输入即轻戳提醒；“一键提醒模板”支持喝水、午休、站立活动等场景快速触发；“周末回顾”聚合本周数据生成卡片；“反应小游戏”用于缓解疲劳；低电量与纪念日（含农历生日、1024 程序员节）均设专属祝福逻辑。小屋 Dashboard 面板集成好感度趋势图、互动类型雷达图、心情曲线与番茄钟完成率，实现行为数据的可视化闭环。 值得注意的是，该项目完全脱离外部依赖：所有代码用 TypeScript 编写，构建使用 Electron Forge + Webpack; 渲染层无任何 CDN 资源，本地语音播报通过 Web Audio API 实现；深浅色模式自动跟随系统设置；甚至“随机搭话”逻辑也内置语料库，不调用在线服务。开发者在实践中踩过多个坑，例如 CSP 策略曾拦截 AudioContext 初始化，最终通过 preload 注入白名单解决；透明窗口在 macOS Sonoma 上偶现模糊，需显式设置 backgroundColor: '#00000000' 并关闭硬件加速兼容模式。  相较市面上其他桌面宠物方案，CiCi 的独特性在于其工程完整性与可扩展性。例如 Loomy 提供抽卡人格与 AI 对话联动，但底层为 Web 应用嵌入浏览器窗口，非原生桌面级交互; 而 CiCi 作为独立 Electron 应用，具备真正的系统级权限：全局快捷键唤醒、托盘图标控制、后台持续运行且资源占用可控（实测空闲时内存约 180MB）。其模块化设计允许开发者替换任意组件——如将 AI 生成帧替换为手绘资源，或将好感度系统接入外部 API，形成个性化工作伴侣。 从一张头像到 125 帧透明动画, 从基础点击响应到多模态陪伴系统, CiCi 展示了 Electron 在轻量级桌面应用开发中的强大潜力。它并非追求性能极致的工业级产品，而是一个技术可行性与用户体验并重的完整范例：证明了现代 Web 技术栈足以支撑复杂交互逻辑与精细化视觉表现，也为个人开发者提供了可复用的架构模板。目前项目代码已开源，其素材生成流程与状态机设计思路，正被多位独立开发者借鉴用于教育类、健康陪伴型桌面应用的开发中。