桌面应用前端【免费下载链接】BongoCat 跨平台互动桌宠 BongoCat为桌面增添乐趣项目地址https://gitcode.com/ayangweb/BongoCat点击查看免费下载BongoCat 是一款使用 Tauri 2 Vue 3 Live2DCubism构建的开源跨平台互动桌宠能够实时响应键盘、鼠标和手柄操作并驱动猫咪模型做出对应动作。本文以仓库 README.md 为主线结合前端源码与 Rust 后端实现完整讲解它的开发背景、核心交互链路、模型加载机制、窗口配置与跨平台打包方案帮助你理解并复现这类桌宠应用的关键技术。开发背景从 Windows 独占到跨平台桌宠BongoCat 的灵感来源于 Bongo-Cat-Mver 这一经典的猫咪互动桌宠。原版凭借独特的猫咪互动玩法深受用户喜爱但仅支持 Windows 平台。为了在 macOS 上也能使用作者决定开发适配 macOS 的版本并进一步借助 Tauri 的跨平台能力让同一套代码同时兼容 macOS、Windows 和 Linux(x11)。这一背景直接决定了项目的几个关键设计取向跨平台一致的行为体验键盘、鼠标、手柄输入在三个平台上都能驱动模型轻量的桌面壳选择 Tauri 而非 Electron前端资源由系统 WebView 承载桌面端逻辑由 Rust 实现应用体积与内存占用更小完全开源与离线可用代码公开透明运行不依赖网络。技术栈与仓库结构总览从前端依赖清单package.json可以看到项目的完整技术栈领域技术选型用途桌面框架Tauri 2tauri-apps/api^2.10.1、tauri-apps/cli^2.10.1窗口管理、系统能力桥接前端框架Vue 3^3.5.32 Pinia^3.0.4 vue-router vue-i18nUI、状态、路由与多语言Live2D 渲染easy-live2d^0.4.4pixi.js^8.18.1模型加载、渲染与动作播放输入监听Rustrdev、gilrs全局键盘/鼠标、手柄事件捕获UI 组件antdv-next偏好设置界面仓库核心目录如下src/composables/useKeyPress.ts、src/composables/useGamepad.ts、src/composables/useModel.ts前端输入与模型状态编排src/utils/live2d.tsLive2D 模型的加载、缩放、动作与参数控制src-tauri/src/core/device.rs、src-tauri/src/core/gamepad.rsRust 侧全局输入监听src-tauri/tauri.conf.json窗口、安全与打包配置。核心交互链路键盘、鼠标、手柄如何驱动猫咪README 中根据键盘、鼠标或手柄的操作同步对应的动作是 BongoCat 的核心功能。这条链路在架构上分为三层1. Rust 后端全局输入捕获与事件广播后端使用rdev捕获全局键盘/鼠标事件见 src-tauri/src/core/device.rslet callback move |event: Event| { let device_event match event.event_type { EventType::ButtonPress(button) DeviceEvent { kind: DeviceEventKind::MousePress, value: json!(format!({:?}, button)) }, EventType::ButtonRelease(button) DeviceEvent { kind: DeviceEventKind::MouseRelease, value: json!(format!({:?}, button)) }, EventType::MouseMove { x, y } DeviceEvent { kind: DeviceEventKind::MouseMove, value: json!({ x: x, y: y }) }, EventType::KeyPress(key) DeviceEvent { kind: DeviceEventKind::KeyboardPress, value: json!(format!({:?}, key)) }, EventType::KeyRelease(key) DeviceEvent { kind: DeviceEventKind::KeyboardRelease, value: json!(format!({:?}, key)) }, _ return, }; let _ app_handle.emit(device-changed, device_event); };关键点通过start_device_listening命令启动监听对应前端常量 src/constants/index.ts 中的START_DEVICE_LISTENING使用AtomicBool保证监听只启动一次避免重复注册捕获到的事件统一通过 Tauri 的emit以device-changed事件名推送到前端事件类型枚举为MousePress / MouseRelease / MouseMove / KeyboardPress / KeyboardRelease。手柄部分则由 src-tauri/src/core/gamepad.rs 基于gilrs实现以start_gamepad_listing/stop_gamepad_listing两个命令控制启停并将ButtonChanged、AxisChanged事件以gamepad-changed事件名推送到前端。2. 前端监听事件到 Live2D 参数的映射前端通过useTauriListen订阅这两个事件。以手柄为例src/composables/useGamepad.ts 会把摇杆与按键事件映射为模型参数左摇杆 X/Y →CatParamStickLX/CatParamStickLY右摇杆 X/Y →CatParamStickRX/CatParamStickRY左/右摇杆按下 →CatParamStickLeftDown/CatParamStickRightDown摇杆是否接触状态 →CatParamStickShowLeftHand/CatParamStickShowRightHand其余按键 → 按下时调用handlePress(name)松开时调用handleRelease(name)。模型参数通过 src/utils/live2d.ts 的setParameterValue写入public setParameterValue(id: string, value: number | boolean) { return this.model?.setParameterValueById(id, Number(value)) }3. 动作映射规则键盘与鼠标的映射集中在 src/composables/useModel.ts左右手按下CatParamLeftHandDown/CatParamRightHandDownhandleKeyChange鼠标左/右键ParamMouseLeftDown/ParamMouseRightDownhandleMouseChange鼠标移动根据光标在显示器上的比例位置计算ParamMouseX/Y、ParamAngleX/Y/Z、ParamEyeBallX/Y等参数并通过getParameterValueRange读取模型参数范围做归一化映射handleMouseMove。handlePress还会根据按键路径判断是否存在同手按键冲突并自动释放上一键findKeyhandleRelease保证猫咪左右手动作互不抢占。Live2D 模型加载与渲染管线模型的加载、渲染全部在前端完成核心实现位于 src/utils/live2d.ts。加载流程public async load(path: string) { await this.initApp() this.destroy() const files await readDir(path) const modelFile files.find(file file.name.endsWith(.model3.json)) if (!modelFile) throw new Error(i18n.global.t(utils.live2d.hints.notFound)) const modelPath join(path, modelFile.name) const modelJSON JSON5.parse(await readTextFile(modelPath)) const modelSetting new CubismSetting({ modelJSON }) modelSetting.redirectPath(({ file }) convertFileSrc(join(path, file))) this.model new Live2DSprite({ modelSetting, ticker: Ticker.shared }) this.app?.stage.addChild(this.model) await this.model.ready // ...返回 width/height/motions/expressions }几个值得注意的实现细节渲染器基于 Pixi.js 8 的Application画布为live2dCanvas配置backgroundAlpha: 0实现透明背景、autoDensitydevicePixelRatio适配高分屏模型目录识别通过查找目录下*.model3.json定位模型定义文件并用JSON5解析兼容带注释的模型配置资源路径重定向通过redirectPath把模型内引用的贴图、表情等资源重定向为convertFileSrc生成的本地协议地址从而支持从任意自定义目录加载模型等比缩放resizeModel依据窗口与模型宽高比取min(scaleX, scaleY)居中放置模型避免拉伸变形。动作与表情加载完成后会返回motions按 group 分组和expressions。startMotion以Priority.Normal播放动作setExpression切换表情。值得注意的是加载模型时会为每个动作/表情自动生成默认快捷键见 src/composables/useModel.ts按CommandmacOS/Control其他平台加上Shift/Alt的组合依次分配数字键1-0与字母键QWERTYUIOPASDFGHJKLZXCVBNM。全局快捷键与窗口行为桌宠需要藏起来也能唤起因此项目使用了tauri-apps/plugin-global-shortcut。封装的 src/composables/useKeyPress.ts 提供响应式快捷键绑定export function useKeyPress(shortcut: Refstring | undefined, string, callback: ShortcutHandler) { const oldShortcut ref(shortcut.value) async function unbind() { if (!oldShortcut.value) return const registered await isRegistered(oldShortcut.value) if (!registered) return return unregister(oldShortcut.value) } watch(shortcut, async (value) { await unbind() if (!value) return await register(value, (event) { if (event.state Released) return callback(event) }) oldShortcut.value value }, { immediate: true }) onUnmounted(unbind) }它实现了三个细节配置变更时自动解绑旧快捷键、忽略按键释放事件、组件卸载时自动清理避免全局快捷键泄漏。透明桌宠窗口Tauri 配置解析BongoCat 的桌宠窗口是透明、无边框、永远置顶、不占任务栏的这一整套行为在 src-tauri/tauri.conf.json 中配置{ label: main, title: BongoCat, url: index.html/#/, shadow: false, alwaysOnTop: true, transparent: true, decorations: false, acceptFirstMouse: true, skipTaskbar: true, maximizable: false }参数含义参数作用transparent: true窗口背景透明配合 Canvas 的backgroundAlpha: 0呈现只有猫咪的视觉效果decorations: false去掉系统标题栏与边框alwaysOnTop: true窗口始终位于最上层猫咪随时可见skipTaskbar: true不在任务栏/程序坞显示图标shadow: false关闭窗口阴影避免透明窗口出现黑边acceptFirstMouse: truemacOS 下点击无焦点窗口时同时响应事件项目还定义了一个隐藏的preference窗口visible: false、minWidth: 800、minHeight: 600用于承载偏好设置页面。macOS 上额外启用了macOSPrivateApi: true以获得透明置顶窗口所需的私有 API 能力。自定义模型格式、导入与转换README 明确支持导入自定义模型自由打造专属猫咪形象这与仓库内置的模型资源结构一致。以 src-tauri/assets/models 为例每个模型目录包含cat.model3.json模型入口定义Cubism 3 模型描述文件*.moc3模型几何与骨骼数据*.cdi3.json模型参数/部件/表情的索引定义*.1024/texture_*.png贴图资源1024×512 的标准贴图尺寸*.motion3.json与*.flac动作文件及其配音live2d_expression*.exp3.json、exp_*.exp3.json表情定义。内置了standard、keyboard、gamepad三套模型对应不同输入模式的演示资源见 tauri.conf.json 的resources配置将assets/models打包进应用。对于从 Bongo-Cat-Mver 带来的旧模型README 提供了在线模型转换工具BongoCat 社区维护的转换服务可将 Bongo-Cat-Mver 应用的模型转换为兼容 BongoCat 的格式后导入使用。同时社区仓库Awesome-BongoCat收录了大量可下载的猫咪模型也欢迎提交自己的创作与大家分享。下载、安装与跨平台打包获取安装包安装包通过两个渠道分发夸克网盘与 GitHub Releases不确定该下载哪个平台版本时可参照 README 中附带的下载指南。macOS、Windows、Linux(x11) 三平台均有对应安装包。打包目标从 tauri.conf.json 的bundle.targets可以看到各平台打包产物targets: [nsis, dmg, app, appimage, deb, rpm]WindowsNSIS 安装包macOSdmg 磁盘映像与 app 目录LinuxAppImage、deb、rpm 三种格式。应用还启用了tauri-apps/plugin-updatercreateUpdaterArtifacts: true内置自动更新能力更新端点配置在plugins.updater.endpoints中支持按current_version、target、arch动态拼接更新地址。本地开发仓库使用 pnpm 管理依赖preinstall强制only-allow pnpm常用脚本见 package.jsonpnpm dev # 开发模式先构建图标再启动 VitedevUrl: http://localhost:1420 pnpm build # 依次执行 vite build、图标构建等 pnpm tauri # 调用 Tauri CLI pnpm lint # eslint --fix 自动修复 srcRust 侧在 src-tauri/src/core/mod.rs 中聚合了device、gamepad、prevent_default、setup四个模块setup模块按平台区分 macOS 与其它系统的初始化逻辑见 src-tauri/src/core/setup/mod.rs。隐私与离线数据边界承诺README 明确列出两条重要承诺完全开源代码公开透明桌面端 Rust 源码src-tauri/与前端源码src/全部开放可审计绝不收集任何用户数据 支持离线运行输入监听仅用于驱动本地模型动画事件在本地经 Tauri 事件总线流转后直接映射为 Live2D 参数不涉及任何网络上报模型、贴图、动作文件均打包在应用内assets/models离线即可运行。从代码实现看输入事件只被用于设置 Live2D 参数setParameterValue没有发现任何数据外发逻辑与 README 的隐私承诺一致。社区生态与参与贡献BongoCat 围绕桌宠形成了一个小生态官方维护的模型转换工具降低旧模型迁移成本Awesome-BongoCat 模型仓库提供更多形象与投稿渠道社区交流通过 QQ 群进行。想要参与开发贡献的读者可先阅读 README 中的贡献指南再结合本文提到的 src/composables 与 src-tauri/src/core 源码深入理解各个模块的实现。从本文可以看到BongoCat 的猫咪会跟着你的操作动起来这一体验本质上是一条清晰的管道Rust 侧用rdev/gilrs捕获全局输入 → 通过 Tauri 事件推送到 Vue 前端 → 前端把按键、摇杆、光标坐标映射为 Live2D 参数 →easy-live2d在 Pixi.js 透明画布上实时渲染。理解这条链路后你不仅掌握了 BongoCat 的完整工作原理也获得了一套全局输入驱动透明桌面动画的可复用架构思路可以迁移到其它桌面互动应用如宠物、通知助手、动态图标的开发中。赞分享桌面应用前端【免费下载链接】BongoCat 跨平台互动桌宠 BongoCat为桌面增添乐趣项目地址https://gitcode.com/ayangweb/BongoCat点击查看免费下载相关推荐BongoCat跨平台桌面萌宠新体验键盘鼠标互动全解析BongoCat跨平台桌面萌宠新体验键盘鼠标互动全解析 引言告别单调的桌面交互 你是否已经厌倦了冰冷的桌面环境当你在键盘上敲击代码、鼠标上滑动浏览时是桌面应用N_m3u8DL-RE完整指南点播与直播都收的 DASH/HLS/MSS 流媒体下载器N_m3u8DL RE完整指南点播与直播都收的 DASH/HLS/MSS 流媒体下载器 N_m3u8DL RE 是一款跨平台流媒体下载器解析 DASH、HLCLI音视频AIRI 桌宠跨屏鼠标注视Live2D 焦点坐标的跨平台计算实战AIRI 桌宠跨屏鼠标注视Live2D 焦点坐标的跨平台计算实战 本文依据 AIRI 项目官方 DevLog2025.06.08整理而成。AIRI 是一款AI 应用人工智能大模型数字人AI Agent语音前端后端桌面应用移动开发即时通讯3D渲染上一篇深入理解Twilio Video React App的VideoProvider组件连接管理的终极教程下一篇构建下一代AI数字人对话系统模块化架构的完整实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考