尧图网站建设 
AIRI 项目 VueUse 指南用 useZoomLevel 在 Electron 桌面端响应式控制窗口缩放级别【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiuseZoomLevel是 VueUse 的vueuse/electron扩展包中用于 Electron 渲染进程的 composable它把WebFrame的缩放级别zoom level包装成一个可双向读写的 VueRef。本文基于 AIRI 仓库中内置的 VueUse 函数参考文档.agents/skills/vueuse-functions/references/useZoomLevel.md完整讲解其三种调用形态、重载签名与nodeIntegration前提并结合 AIRI 的 Electron 桌面应用apps/stage-tamagotchi与自研proj-airi/electron-vueuse包说明它在本仓库中的定位与适用边界。useZoomLevel 解决什么问题Electron 的渲染进程可以通过WebFrameAPI 调整页面的缩放级别。缩放级别是一个整数默认值为0即 100% 缩放与缩放因子zoom factor的关系为缩放因子 1.2 的缩放级别次方即zoomFactor 1.2 ** zoomLevel。例如级别1对应约 120% 缩放级别-1对应约 83% 缩放。在 Electron 渲染进程里手写响应式缩放逻辑通常需要自行处理读取当前级别webFrame.getZoomLevel()监听外部变化并同步到状态在状态变化时写回webFrame.setZoomLevel(...)处理初始值的立即写入。useZoomLevel把这套流程收敛为一个 composable返回的Refnumber既反映当前缩放级别又可以在赋值时直接改变缩放级别且会自动跟随源ref的变化持续同步。该参考文档在 AIRI 仓库中的位置AIRI 仓库通过一份内置的 VueUse 技能参考来约束开发过程中的函数选型。参考文档 useZoomLevel.md 的 frontmatter 标注其类别为Electron表明它属于 VueUse 的 Electron 扩展包vueuse/electron而非核心包。从仓库的同步信息 SYNC.md 可以看到这份参考是从 VueUse 上游的技能目录同步而来的锁定的 Git SHA 为b6bb79b99fb1f1dba1f907829676a651735bbc10同步日期为 2026-06-22。也就是说文档内容以上游 VueUse 的版本为准可作为useZoomLevel语义的权威参考。技能总表 SKILL.md 对函数规定了三种调用策略AUTO自动使用 /EXTERNAL需已安装外部依赖才使用 /EXPLICIT_ONLY仅在用户明确要求时使用。useZoomLevel被列为EXTERNALFunctionDescriptionInvocationuseZoomLevelReactive WebFrame zoom levelEXTERNAL这意味着在 AIRI 的协作约定里只有当项目或调用方已经安装vueuse/electron依赖时才应当选用该函数而不是默认引入。完整用法三种调用形态以下用法完整继承自参考文档并补充了参数语义说明。1. 默认形态读取并控制当前页面的缩放级别import { useZoomLevel } from vueuse/electron // 若没有显式传入 webFrame则要求开启 nodeIntegration // 返回的 Ref 反映当前缩放级别 const level useZoomLevel() console.log(level.value) // 打印当前缩放级别 level.value 2 // 将当前缩放级别改为 2约 144%不带参数调用时composable 默认操作当前页面的WebFrame文档明确提示如果未显式传入webFrame实例需要开启nodeIntegration否则渲染进程中拿不到 Electron 注入的webFrame对象返回值是Refnumberlevel.value可读可写读即获取当前级别写即调用WebFrame.setZoomLevel。2. 传入初始级别挂载后立即生效import { useZoomLevel } from vueuse/electron const level useZoomLevel(2) // 初始化时立即把缩放级别设为 2第一个参数为纯数值时表示“初始缩放级别”composable 会在初始化时立刻将 WebFrame 的缩放级别设置为该值适合在界面布局完成前就固定一个缩放状态例如根据用户偏好恢复上次保存的级别。3. 传入 ref级别与外部状态双向跟随import { useZoomLevel } from vueuse/electron import { shallowRef } from vue const level shallowRef(1) useZoomLevel(level) // 缩放级别将与该 ref 保持一致 level.value 2 // 缩放级别随之改变这是最贴近响应式场景的形态传入一个MaybeRefnumberref、shallowRef或普通数值均可作为源状态useZoomLevel会持续把 WebFrame 的实际缩放级别同步到源ref并在源ref变化时写回 WebFrame。典型应用是把缩放级别存入持久化偏好如useLocalStorage风格的 ref重启应用后自动恢复到用户上次选择的级别。类型声明与重载选择参考文档给出的完整类型声明如下export declare function useZoomLevel(level: MaybeRefnumber): Refnumber export declare function useZoomLevel( webFrame: WebFrame, level: MaybeRefnumber, ): Refnumber export declare function useZoomLevel(webFrame: WebFrame): Refnumber export declare function useZoomLevel(): Refnumber四个重载覆盖了两类参数的全组合可以按如下方式理解参数组合含义适用场景useZoomLevel()默认 WebFrame无初始值只需读取/控制当前页面缩放useZoomLevel(level)默认 WebFrame 初始级别或源 ref立即设定初始级别或绑定一个外部状态useZoomLevel(webFrame)显式指定目标 WebFrame操作webview等独立帧规避 nodeIntegration 依赖useZoomLevel(webFrame, level)显式 WebFrame 初始级别或源 ref对独立帧同时做初始化和状态绑定其中level的参数类型是MaybeRefnumber即“普通数值或 ref 皆可”传数值时它是初始值传 ref 时它是需要同步的源状态这也是上面三种用法能共用同一函数名的原因。值得对照的是同一参考目录下的 useZoomFactor.md其签名结构完全同构只是操作的是缩放因子任意正实数如1.25、1.5而非缩放级别离散整数。级别适合表达“放大一级/缩小一级”的步进语义Ctrl/ Ctrl-快捷键因子适合表达精确的百分比缩放两者可以按1.2 ** level互相换算。关键前提与注意事项nodeIntegration 前提文档中的注释明确指出若不显式传入webFrame需要开启nodeIntegration。在强调安全性的生产应用中更推荐的做法是通过webPreferences/ preload 拿到目标WebFrame实例后显式传入从而避免依赖渲染进程的全局 Node 能力。仅限 Electron 环境useZoomLevel依赖 Electron 的WebFrameAPI在纯浏览器页面如 AIRI 的 Web 端中不存在对应能力只能在 Electron 渲染进程中运行。依赖前提该函数来自独立包vueuse/electron。按 SKILL.md 的EXTERNAL约定只有已安装该包时才应使用AIRI 各工作区包目前普遍通过 catalog 引入的是vueuse/core与vueuse/shared例如 apps/stage-tamagotchi/package.json并未直接引入vueuse/electron。AIRI 的 Electron composable 生态useZoomLevel 在仓库中的定位为了说明useZoomLevel与 AIRI 自身代码的关系有必要看一下仓库里 Electron 场景下真正被复用的 composable 层。AIRI 维护了一个内部包proj-airi/electron-vueuse其自述是“VueUse-like composables and helpers for Electron apps”见 packages/electron-vueuse/README.md。从 package.json 的依赖声明可以看出它的定位peerDependencies要求electron: 39 44、vue: 3这就是 AIRI Electron 生态的适用版本前提dependencies中包含vueuse/corecatalog 版本即 AIRI 自研的 Electron composable 是建立在vueuse/core之上的而不是直接使用vueuse/electron。该包提供的能力集中在窗口/鼠标/自动更新等高频场景README 列出mouse、window bounds、auto updater等例如 use-electron-window-bounds.ts 展示了 AIRI 惯用的模式通过 Eventa IPC 契约监听主进程推送的窗口边界事件把x/y/width/height收敛为一组ref供渲染进程消费。从源码结构看当前仓库中没有找到任何直接import { useZoomLevel } from vueuse/electron的调用点各桌面端应用如 apps/stage-tamagotchi也没有声明vueuse/electron依赖。因此可以推断useZoomLevel在 AIRI 中属于技能参考层面预留的可选扩展能力——当桌面端如 Tamagotchi 桌面应用未来需要“界面缩放级别”这类功能例如聊天字号缩放、舞台视口缩放偏好持久化时开发者可以在已引入vueuse/electron的前提下按本文的三种形态直接套用而不必手写 WebFrame 的读写与同步逻辑。小结与适用边界useZoomLevel的语义由内置参考文档 useZoomLevel.md 完整定义无参读取/控制、传数值立即初始化、传 ref 双向同步四组重载覆盖“默认帧/显式帧 × 初始值/源状态”的全部组合使用前提是 Electron 渲染进程环境且未显式传入webFrame时需要nodeIntegration按 AIRI 技能表的EXTERNAL约定需先安装vueuse/electron才能启用AIRI 桌面端的 Electron 版本约束可参照内部包proj-airi/electron-vueuse的 peer 依赖39 44需要精确百分比缩放开可改用同系列的useZoomFactor两者共享同一套调用约定。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 AIRI 项目 VueUse 指南：用 useZoomLevel 在 Electron 桌面端响应式控制窗口缩放级别
AIRI 项目 VueUse 指南用 useZoomLevel 在 Electron 桌面端响应式控制窗口缩放级别【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airiuseZoomLevel是 VueUse 的vueuse/electron扩展包中用于 Electron 渲染进程的 composable它把WebFrame的缩放级别zoom level包装成一个可双向读写的 VueRef。本文基于 AIRI 仓库中内置的 VueUse 函数参考文档.agents/skills/vueuse-functions/references/useZoomLevel.md完整讲解其三种调用形态、重载签名与nodeIntegration前提并结合 AIRI 的 Electron 桌面应用apps/stage-tamagotchi与自研proj-airi/electron-vueuse包说明它在本仓库中的定位与适用边界。useZoomLevel 解决什么问题Electron 的渲染进程可以通过WebFrameAPI 调整页面的缩放级别。缩放级别是一个整数默认值为0即 100% 缩放与缩放因子zoom factor的关系为缩放因子 1.2 的缩放级别次方即zoomFactor 1.2 ** zoomLevel。例如级别1对应约 120% 缩放级别-1对应约 83% 缩放。在 Electron 渲染进程里手写响应式缩放逻辑通常需要自行处理读取当前级别webFrame.getZoomLevel()监听外部变化并同步到状态在状态变化时写回webFrame.setZoomLevel(...)处理初始值的立即写入。useZoomLevel把这套流程收敛为一个 composable返回的Refnumber既反映当前缩放级别又可以在赋值时直接改变缩放级别且会自动跟随源ref的变化持续同步。该参考文档在 AIRI 仓库中的位置AIRI 仓库通过一份内置的 VueUse 技能参考来约束开发过程中的函数选型。参考文档 useZoomLevel.md 的 frontmatter 标注其类别为Electron表明它属于 VueUse 的 Electron 扩展包vueuse/electron而非核心包。从仓库的同步信息 SYNC.md 可以看到这份参考是从 VueUse 上游的技能目录同步而来的锁定的 Git SHA 为b6bb79b99fb1f1dba1f907829676a651735bbc10同步日期为 2026-06-22。也就是说文档内容以上游 VueUse 的版本为准可作为useZoomLevel语义的权威参考。技能总表 SKILL.md 对函数规定了三种调用策略AUTO自动使用 /EXTERNAL需已安装外部依赖才使用 /EXPLICIT_ONLY仅在用户明确要求时使用。useZoomLevel被列为EXTERNALFunctionDescriptionInvocationuseZoomLevelReactive WebFrame zoom levelEXTERNAL这意味着在 AIRI 的协作约定里只有当项目或调用方已经安装vueuse/electron依赖时才应当选用该函数而不是默认引入。完整用法三种调用形态以下用法完整继承自参考文档并补充了参数语义说明。1. 默认形态读取并控制当前页面的缩放级别import { useZoomLevel } from vueuse/electron // 若没有显式传入 webFrame则要求开启 nodeIntegration // 返回的 Ref 反映当前缩放级别 const level useZoomLevel() console.log(level.value) // 打印当前缩放级别 level.value 2 // 将当前缩放级别改为 2约 144%不带参数调用时composable 默认操作当前页面的WebFrame文档明确提示如果未显式传入webFrame实例需要开启nodeIntegration否则渲染进程中拿不到 Electron 注入的webFrame对象返回值是Refnumberlevel.value可读可写读即获取当前级别写即调用WebFrame.setZoomLevel。2. 传入初始级别挂载后立即生效import { useZoomLevel } from vueuse/electron const level useZoomLevel(2) // 初始化时立即把缩放级别设为 2第一个参数为纯数值时表示“初始缩放级别”composable 会在初始化时立刻将 WebFrame 的缩放级别设置为该值适合在界面布局完成前就固定一个缩放状态例如根据用户偏好恢复上次保存的级别。3. 传入 ref级别与外部状态双向跟随import { useZoomLevel } from vueuse/electron import { shallowRef } from vue const level shallowRef(1) useZoomLevel(level) // 缩放级别将与该 ref 保持一致 level.value 2 // 缩放级别随之改变这是最贴近响应式场景的形态传入一个MaybeRefnumberref、shallowRef或普通数值均可作为源状态useZoomLevel会持续把 WebFrame 的实际缩放级别同步到源ref并在源ref变化时写回 WebFrame。典型应用是把缩放级别存入持久化偏好如useLocalStorage风格的 ref重启应用后自动恢复到用户上次选择的级别。类型声明与重载选择参考文档给出的完整类型声明如下export declare function useZoomLevel(level: MaybeRefnumber): Refnumber export declare function useZoomLevel( webFrame: WebFrame, level: MaybeRefnumber, ): Refnumber export declare function useZoomLevel(webFrame: WebFrame): Refnumber export declare function useZoomLevel(): Refnumber四个重载覆盖了两类参数的全组合可以按如下方式理解参数组合含义适用场景useZoomLevel()默认 WebFrame无初始值只需读取/控制当前页面缩放useZoomLevel(level)默认 WebFrame 初始级别或源 ref立即设定初始级别或绑定一个外部状态useZoomLevel(webFrame)显式指定目标 WebFrame操作webview等独立帧规避 nodeIntegration 依赖useZoomLevel(webFrame, level)显式 WebFrame 初始级别或源 ref对独立帧同时做初始化和状态绑定其中level的参数类型是MaybeRefnumber即“普通数值或 ref 皆可”传数值时它是初始值传 ref 时它是需要同步的源状态这也是上面三种用法能共用同一函数名的原因。值得对照的是同一参考目录下的 useZoomFactor.md其签名结构完全同构只是操作的是缩放因子任意正实数如1.25、1.5而非缩放级别离散整数。级别适合表达“放大一级/缩小一级”的步进语义Ctrl/ Ctrl-快捷键因子适合表达精确的百分比缩放两者可以按1.2 ** level互相换算。关键前提与注意事项nodeIntegration 前提文档中的注释明确指出若不显式传入webFrame需要开启nodeIntegration。在强调安全性的生产应用中更推荐的做法是通过webPreferences/ preload 拿到目标WebFrame实例后显式传入从而避免依赖渲染进程的全局 Node 能力。仅限 Electron 环境useZoomLevel依赖 Electron 的WebFrameAPI在纯浏览器页面如 AIRI 的 Web 端中不存在对应能力只能在 Electron 渲染进程中运行。依赖前提该函数来自独立包vueuse/electron。按 SKILL.md 的EXTERNAL约定只有已安装该包时才应使用AIRI 各工作区包目前普遍通过 catalog 引入的是vueuse/core与vueuse/shared例如 apps/stage-tamagotchi/package.json并未直接引入vueuse/electron。AIRI 的 Electron composable 生态useZoomLevel 在仓库中的定位为了说明useZoomLevel与 AIRI 自身代码的关系有必要看一下仓库里 Electron 场景下真正被复用的 composable 层。AIRI 维护了一个内部包proj-airi/electron-vueuse其自述是“VueUse-like composables and helpers for Electron apps”见 packages/electron-vueuse/README.md。从 package.json 的依赖声明可以看出它的定位peerDependencies要求electron: 39 44、vue: 3这就是 AIRI Electron 生态的适用版本前提dependencies中包含vueuse/corecatalog 版本即 AIRI 自研的 Electron composable 是建立在vueuse/core之上的而不是直接使用vueuse/electron。该包提供的能力集中在窗口/鼠标/自动更新等高频场景README 列出mouse、window bounds、auto updater等例如 use-electron-window-bounds.ts 展示了 AIRI 惯用的模式通过 Eventa IPC 契约监听主进程推送的窗口边界事件把x/y/width/height收敛为一组ref供渲染进程消费。从源码结构看当前仓库中没有找到任何直接import { useZoomLevel } from vueuse/electron的调用点各桌面端应用如 apps/stage-tamagotchi也没有声明vueuse/electron依赖。因此可以推断useZoomLevel在 AIRI 中属于技能参考层面预留的可选扩展能力——当桌面端如 Tamagotchi 桌面应用未来需要“界面缩放级别”这类功能例如聊天字号缩放、舞台视口缩放偏好持久化时开发者可以在已引入vueuse/electron的前提下按本文的三种形态直接套用而不必手写 WebFrame 的读写与同步逻辑。小结与适用边界useZoomLevel的语义由内置参考文档 useZoomLevel.md 完整定义无参读取/控制、传数值立即初始化、传 ref 双向同步四组重载覆盖“默认帧/显式帧 × 初始值/源状态”的全部组合使用前提是 Electron 渲染进程环境且未显式传入webFrame时需要nodeIntegration按 AIRI 技能表的EXTERNAL约定需先安装vueuse/electron才能启用AIRI 桌面端的 Electron 版本约束可参照内部包proj-airi/electron-vueuse的 peer 依赖39 44需要精确百分比缩放开可改用同系列的useZoomFactor两者共享同一套调用约定。【免费下载链接】airi Self hosted, you-owned Grok Companion, a container of souls of waifu, cyber livings to bring them into our worlds, wishing to achieve Neuro-samas altitude. Capable of realtime voice chat, Minecraft, Factorio playing. Web / macOS / Windows supported.项目地址: https://gitcode.com/GitHub_Trending/ai/airi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考