1. 桌面宠物原型为什么总在“跑起来”这一步卡住用 Vue 复刻人工桌面原宠版核心目标其实很朴素让一个透明无边框窗口里站着胡桃或纳西妲能切换动作、能拖动、能响应点击并且后续接大模型对话时不用把 Key 硬编码在渲染进程里。听起来像个小玩具但真正动手会发现卡点集中在三处Electron 与 Vue 的窗口透明配置、Live2D 模型资源加载路径、以及模型请求的 Key 管理。我见过不少朋友把宠物渲染跑通了结果一接对话就卡住——要么 Key 写在前端被扫要么请求链路在打包后 404。这篇就按“先跑通渲染再接通统一 API 通道”的顺序把 config.toml 和 settings.json 两份配置骨架给出来配合 TaoToken 的 Key/API 通道让桌面宠物原型一次性跑通。适合谁看有 Vue 基础、想在本地跑通桌面宠物交互的开发者做过 Electron 小工具、想加 AI 对话能力的人以及被透明窗口和模型路径折腾过的同学。下面所有配置都可以直接复制改路径就能用。2. TaoToken 前置统一 Key 与 API 通道怎么摆桌面宠物接大模型最忌讳把 Key 塞进renderer里。我的做法是把请求收敛到主进程渲染层只发 IPC 消息。TaoToken 在这里扮演的是统一通道一个 Key 走https://taotoken.net/api模型对话、编码类请求都能复用同一套鉴权省得每个模型单独配一遍。你需要先拿到 Key。打开控制台创建 API Key地址是 https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsoleutm_campaignrewrite 。创建后复制那串sk-开头的字符串先别写进代码放到环境变量或本地配置文件里。接入文档在 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 里面列了兼容的请求格式。桌面宠物这种场景我建议先用模型对话页验证 Key 是否可用地址 https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodelsutm_campaignrewrite 发一句“你好”看返回确认通道通了再写进工程。注意Key 只放主进程或.env不要提交到 Git也不要在渲染层fetch里出现。3. 可复制配置config.toml 与 settings.json 骨架工程结构我按这样分electron/main.ts管窗口和 IPCsrc/是 Vue 渲染层public/models/放 Live2D 资源根目录放config.toml和settings.json。先看config.toml它管的是运行时行为# config.toml —— 桌面宠物运行时配置 [window] width 320 height 480 transparent true frame false always_on_top true resizable false [pet] model_dir public/models/hutao default_motion idle scale 1.0 draggable true [api] base_url https://taotoken.net/api timeout_ms 30000 # Key 不写这里从环境变量 TAOTOKEN_API_KEY 读取transparent和frame是透明桌宠的关键缺一个窗口就会带白底或标题栏。always_on_top让宠物不被其他窗口盖住resizable false避免用户误拖变形。再看settings.json它管的是用户可调项和模型映射{ pet: { character: hutao, motionMap: { idle: motions/idle.motion3.json, click: motions/tap.motion3.json, drag: motions/drag.motion3.json }, scale: 1.0, opacity: 1.0 }, api: { provider: taotoken, model: claude-sonnet, maxTokens: 512, systemPrompt: 你是桌面宠物胡桃回答简短俏皮。 }, ui: { showSettings: true, theme: dark } }两份配置的分工要清楚config.toml是工程级、不常变的窗口与通道参数settings.json是用户级、可热改的角色与模型参数。主进程启动时先读config.toml建窗口再把settings.json通过 IPC 推给渲染层。主进程里读 Key 的写法// electron/main.ts 片段 import fs from node:fs; import TOML from iarna/toml; const cfg TOML.parse(fs.readFileSync(config.toml, utf-8)); const apiKey process.env.TAOTOKEN_API_KEY; if (!apiKey) { console.warn(TAOTOKEN_API_KEY 未设置对话功能将不可用); }渲染层通过window.electronAPI.chat(msg)发消息主进程收到后带 Key 请求base_url这样 Key 永远不出现在页面里。4. 验证请求启动后检查宠物渲染与链路配置写完先验证渲染。启动命令npm run dev窗口起来后检查三件事宠物是否透明背景、能否拖动、点击是否触发动作。如果背景是白的回去看transparent和 CSS 里body { background: transparent; }是否都设了。渲染通了再验证请求链路。在渲染层加一个临时按钮触发 IPC// src/components/Pet.vue 片段 async function testChat() { const reply await window.electronAPI.chat(你好介绍一下你自己); console.log(模型返回, reply); }主进程侧ipcMain.handle(chat, async (_e, msg: string) { const res await fetch(${cfg.api.base_url}/v1/messages, { method: POST, headers: { Content-Type: application/json, x-api-key: process.env.TAOTOKEN_API_KEY!, anthropic-version: 2023-06-01 }, body: JSON.stringify({ model: claude-sonnet, max_tokens: 512, messages: [{ role: user, content: msg }] }) }); const data await res.json(); return data.content?.[0]?.text ?? 无返回; });成功的结果是控制台打印出模型回复同时宠物播放一次click动作。如果返回 401说明 Key 没读到返回 404检查base_url有没有多写斜杠。实测下来把请求放主进程后打包成 exe 也不会出现跨域或 Key 丢失。5. 本篇常见错排查透明窗口变白底Electron 的transparent: true必须配合frame: false且 Vue 根元素和body都要background: transparent。少一层就会露白。Live2D 模型 404model_dir是相对工程根目录的路径打包后public/会被搬走。用path.join(process.resourcesPath, ...)处理生产环境路径开发环境用__dirname拼。Key 读不到process.env.TAOTOKEN_API_KEY在 Electron 主进程里可用但如果你用 Vite 的import.meta.env就读不到。区分清楚渲染层用VITE_前缀主进程用process.env。请求超时timeout_ms设 30000 是给模型首字延迟留余量。如果一直超时先用模型对话页单独测 Key排除是通道问题还是代码问题。动作切换抽搐这是模型动作文件本身的问题不是代码 bug。换一个motion3.json或降低切换频率即可复刻项目里作者也提过穿模属于正常现象。6. 下一步把对话接进宠物交互渲染和链路都通了之后你可以把testChat换成真实交互点击宠物头部触发对话回复用气泡显示。长期做编码类或 Agent 类扩展的话建议走 Coding Plan地址 https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite 它更适合持续请求的场景。Key 管理仍在 API Keys 页 https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite 接入细节看文档 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite 。官网入口 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。最后留个实用技巧把settings.json做成可热更新的改完不用重启 Electron主进程监听文件变化后重新推给渲染层调宠物参数会顺手很多。