桌面应用CLI【免费下载链接】batteryCLI/GUI for managing the battery charging status for Apple silicon (M1, M2, M3) Macs项目地址https://gitcode.com/GitHub_Trending/ba/battery点击查看免费下载本指南以仓库 assets 目录下的“Logo compiler”工具为主体讲解其存在原因Electron 托盘不支持直接使用 SVG 图片、一行命令的运行方式npm start、以及配置入口 assets/modules/compile-images.js 中百分比步长、DPI 倍率、active/inactive 透明度等核心参数。读完本文你将掌握该图标编译器从 SVG 模板生成、批量栅格化 PNG 到被 app/modules/theme.js 消费的完整链路并能在修改“电量百分比显示粒度”这类需求时正确地重新生成全部图标。背景为什么 Electron 托盘图标需要一个“图标编译器”原文档开宗明义“Because Electron does not support SCG images”原文此处为笔误实指 SVG。Electron 的nativeImageAPI 并不支持直接加载 SVG而本项目一款用于 Apple silicon Mac 电池充电限制的托盘应用需要在菜单栏托盘上按电量百分比动态显示不同的电池图标因此必须先把矢量图源批量渲染成 PNG。为了让托盘图标能覆盖“从 0% 到 100%”的每一个展示档位同时兼顾 macOS 菜单栏在不同屏幕 DPI 下的清晰度仓库在 assets 目录里维护了一个独立的小工具项目asset-compiler它读取“百分比”作为输入调用 SVG 模板函数生成图标通过 resvg/resvg-jsRust 实现的 SVG 渲染库将 SVG 栅格化为 PNG一次性输出数百张命名规范的图标文件供 Electron 应用直接引用。这套流程在 app/README.md 的开发者说明中也被印证图标由脚本自动生成应用侧无需再处理任何 SVG。快速上手安装依赖与运行工具本身的工程信息定义在 assets/package.json 中运行命令极其简单cd assets npm install # 安装 resvg/resvg-js 等依赖 npm start # 等价于 node index.jsnpm start对应 assets/package.json 中的start: node index.js入口文件 assets/index.js 只有寥寥几行——引入 assets/modules/compile-images.js 并调用其导出的render_and_write_template_files()const render_and_write_template_files require( ./modules/compile-images ) render_and_write_template_files()整个渲染过程是同步等待完成的命令执行完毕后所有 PNG 会写入 app/assets 目录源码中export_directory ${ __dirname }/../../app/assets。原文档特别强调这个工具只在“图标百分比支持范围发生变化”时才需要重新运行日常开发无需反复执行。核心配置解析百分比、倍率与命名规范配置的真正“大脑”是 assets/modules/compile-images.js它集中了全部渲染参数配置项源码位置取值说明百分比步长compile-images.js5从 0 到 100 每 5% 生成一档共 21 个百分比DPI 倍率集合compile-images.js[1.25,1.33,1.4,1.5,1.8,2,2.5,3,4,5]对应 ElectronnativeImage支持的高分辨率表示High-resolution image注释中说明了依据图标状态compile-images.jsactive/inactive每种百分比都同时生成激活态与未激活态透明度compile-images.js 与 L59active 用bake_logo(percentage, 1)inactive 用bake_logo(percentage, .5)与 app/README.md 中“100% vs 50% for active inactive”的说明一致输出目录compile-images.js../../app/assets相对assets/modules即仓库根下的 app/assets渲染组合逻辑为每个百分比生成 22 张图 1 张基础图1x无倍率后缀 10 张Nx倍率图且 active/inactive 各一套。21 个百分比 × 22 张 共 462 张 PNG全部通过Promise.all并发栅格化写入磁盘见 compile-images.js。文件名遵循统一模板见 compile-images.jsbattery-{active|inactive}-{percentage}-Template{Nx}.png例如battery-active-80-Template.png1x 基础图18×18battery-active-80-Template2x.png2 倍图36×36battery-inactive-50-Template1.5x.png文件名的Template后缀并非装饰macOS 会把名称带Template的图片当作模板图像处理自动适配菜单栏的深色/浅色主题这正是本项目图标能随系统外观切换的原因之一。栅格化核心函数render_and_write_png使用 Resvg 的fitTo.zoom模式按倍率放大输出const resvg new Resvg( svg_string, { fitTo: { mode: zoom, value: Number( size ) } } ) const png_data resvg.render() const png_buffer png_data.asPng() return fs.writeFile( ${ export_directory }/${ filename }.png, png_buffer )因此基础图 18×18 的2x版本即为 36×36、5x即为 90×90这与 app/assets 中实际存在的各倍率图片尺寸完全吻合。SVG 模板的生成原理SVG 模板由 assets/modules/logo.js 的bake_logo(percentage, opacity)函数生成它是整个图标系统的“画布”。核心几何逻辑如下const max_height 12 const min_y_position 3.5 const percentage_as_decimal percentage / 100 const current_height max_height * percentage_as_decimal const current_y_position min_y_position ( max_height - current_height )画布为viewBox0 0 18 18即 18×18 的逻辑坐标系电池内部的电量填充矩形rect idcontent宽度固定为 7.25、圆角半径 1.5填充高度current_height随百分比线性变化0% 时高度为 0只有空电池轮廓100% 时高度为 12充满填充矩形纵坐标current_y_position随高度反向移动电量越低越靠下电量越高越靠上从而让电量条始终“从底部开始生长”。svg根节点上施加的opacity参数则直接控制了 active1.0与 inactive0.5两种状态的视觉差异这也是 app/README.md 所述“图标内部电量填充部分在激活/未激活时透明度不同”的实现来源。电池外壳则由一段预置的path路径绘制配合两重matrix变换缩放到 18×18 画布内。生成的图标如何被应用消费编译产物最终被 Electron 应用侧读取。关键代码在 app/modules/theme.js 的get_logo_template(percent, active)const percentage_increment_to_render 5 const display_percentage Math.floor( percent / percentage_increment_to_render ) * percentage_increment_to_render const image_path path.join( asset_path, /battery-${ active ? active : inactive }-${ display_percentage }-Template.png ) return nativeImage.createFromPath( image_path )这里有两个值得注意的联动点百分比取整对齐display_percentage会把任意实时电量如 83%向下取整到 5 的倍数80%。由于编译器恰好以 5 为步长生成图标取整后总能命中已存在的文件反过来若想提高展示精度例如改为 1% 一档就必须同步修改compile-images.js中的percentage_increment_to_render并重新运行编译器。资源路径切换asset_path app.isPackaged ? resourcesPath : ./assets——开发态直接读 app/assets打包后则读取资源目录。消费端 app/modules/interface.js 在生成托盘菜单时调用tray.setImage( get_logo_template( percentage, limiter_on ) )见 interface.js并在启用/停用充电限制时分别用active/inactive强制刷新图标见 interface.js 的enable_limiter/disable_limiter。整套流程形成了“实时电量 → 取整到 5 的倍数 → 查表选 PNG → 设置托盘图像”的完整数据链路。打包与资源路径打包配置位于 app/package.json 的build.extraFilesextraFiles: { from: ./assets, to: resources, filter: [ **/* ] }编译生成的 app/assets 下全部 PNG 会被原样打入应用包内的resources目录运行时通过resourcesPath读取——这解释了为什么这 462 张图片必须作为静态资源随包发布而不是在运行时动态生成。何时需要重新运行编译器原文档给出的原则非常明确“This only needs to be done if icon percentage support changes.”结合源码可以归纳出需要重新执行npm start的典型场景修改了百分比步长如把 5% 一档改为 1% 一档需要同时改 compile-images.js 与 theme.js 中的percentage_increment_to_render调整了图标倍率集合增删 DPI 档位见 compile-images.js修改了 logo.js 中的几何参数填充条尺寸、坐标、透明度策略等需要重新栅格化全部档位调整了图标命名规则前缀、后缀此时还需同步更新 theme.js 中的文件名拼接逻辑。日常使用、只改应用业务逻辑如菜单文案、刷新频率时均无需触碰编译流程。注意事项小结原文档中配置文件名写作comile-images.js为笔误实际文件为 assets/modules/compile-images.js。app/README.md 提到图标可通过在app/assets下运行node index.js生成而编译器工程实际位于仓库根的 assets 目录产物输出到 app/assets运行入口以npm start为准。渲染依赖仅一个运行时包resvg/resvg-js^2.4.1整个工具非常轻量npm test目前仅输出占位提示见 assets/package.json功能验证可直接检查输出目录中的 PNG 数量与尺寸。赞分享桌面应用CLI【免费下载链接】batteryCLI/GUI for managing the battery charging status for Apple silicon (M1, M2, M3) Macs项目地址https://gitcode.com/GitHub_Trending/ba/battery点击查看免费下载相关推荐OpenMontage 中的 Beautiful Mermaid将 Mermaid 图表渲染为 4K 级 SVG/PNG 的完整实战指南OpenMontage 中的 Beautiful Mermaid将 Mermaid 图表渲染为 4K 级 SVG/PNG 的完整实战指南 本文以 OpenMo人工智能AI Agent音视频媒体生成工作流自动化FontForge 实战用 svg2glyph 将 Inkscape SVG 图标批量转换为 FontForge 字形FontForge 实战用 svg2glyph 将 Inkscape SVG 图标批量转换为 FontForge 字形 导读 svg2glyph 是 Font桌面应用图形学antv/g6-ssr 服务端渲染实践在 Node.js 中将 G6 5.0 图导出为 PNG / JPEG / SVG / PDFantv/g6 ssr 服务端渲染实践在 Node.js 中将 G6 5.0 图导出为 PNG / JPEG / SVG / PDF 本指南围绕 G6 官方数据可视化前端图表库上一篇抖音无水印下载终极指南douyin-downloader批量下载神器完整教程下一篇解析 Symfony Console 的 RST 选项描述以 input_option_2.rst 为例读懂 VALUE_OPTIONAL 与描述器输出规范创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考