人工智能AI 应用桌面应用交互助手【免费下载链接】ClawXClawX is a desktop app that provides a graphical interface for OpenClaw AI agents. It turns CLI-based AI orchestration into a desktop experience without using the terminal. China website is https://clawx.com.cn.项目地址https://gitcode.com/gh_mirrors/cl/ClawX点击查看免费下载ClawX 是一款基于 OpenClaw 的桌面 AI 助手通过 Electron 提供跨平台Windows / macOS / Linux的图形化界面。应用图标看似是一个放几张图的小事但在 Electron 项目中一套图标往往要同时满足窗口图标、系统托盘、安装包、DMG 等多处消费方的格式要求且各平台对尺寸、格式、命名甚至是否允许彩色都有硬性约束。本文以仓库 resources/icons/README.md 为核心主体结合 scripts/generate-icons.mjs、electron/main/tray.ts 与 electron-builder.yml 等源码完整讲解 ClawX 图标目录的职责、必需文件清单、自动/手动生成方法、设计规范以及图标从 SVG 源文件一路进入安装包与系统托盘的完整链路。一、资源目录定位图标从何处来、到何处去ClawX 将全部平台图标集中存放在仓库的resources/icons/目录下作为唯一的图标事实来源single source of truth源文件icon.svg主图标矢量源、tray-icon-template.svgmacOS 托盘模板源产物icon.icnsmacOS、icon.icoWindows、icon.png通用 512×512 回退、16x16.png~512x512.pngLinux 尺寸集、tray-icon-Template.pngmacOS 菜单栏 22×22。这套布局与 electron-builder.yml 的打包配置一一对应构建时buildResources: resources指向该目录extraResources会把resources/整体复制进应用包to: resources/并显式排除icons/*.md与icons/*.svg——也就是说打包产物里只保留运行期真正需要的位图/图标文件矢量源和说明文档不进包从源码结构看这是为控制安装包体积而做的刻意裁剪。二、必需文件清单一张表看清全平台README 用一张表格定义了目录的契约——任何平台缺了对应文件运行时就会出现回退或显示异常。以下为完整清单文件平台说明icon.svg源文件所有图标的矢量来源1024×1024 画布icon.icnsmacOSApple Icon Image 格式供应用包与 DMG 使用icon.icoWindowsWindows ICO 格式供窗口、托盘与安装器使用icon.png全平台512×512 PNG 回退方案16x16.png~512x512.pngLinuxLinux 桌面环境需要的 PNG 尺寸集tray-icon-template.svg源文件macOS 托盘模板图标矢量源tray-icon-Template.pngmacOS22×22 菜单栏状态栏图标注意文件名必须以Template结尾仓库中 resources/icons 目录的实际文件与清单完全一致含icon.icns、icon.ico、icon.png、16x16.png~512x512.png、tray-icon-Template.png与两个 SVG 源说明该清单就是当前仓库正在维护的真实产物集。三、自动化生成管线pnpm icons的源码级剖析README 给出的标准做法是运行生成脚本仓库里对应的真实实现是 scripts/generate-icons.mjs并通过 package.json 暴露为 npm 脚本icons: zx scripts/generate-icons.mjs。日常只需执行pnpm icons # 等价于zx scripts/generate-icons.mjs3.1 依赖与运行环境脚本第一行是#!/usr/bin/env zx并import zx/globals因此它依赖三个关键依赖版本均来自 package.jsonzx^8.8.5提供$、echo、chalk、fs等全局 API 的脚本运行器sharp^0.34.5高性能图像处理库负责 SVG→PNG 光栅化与尺寸缩放png2icons^2.0.1从 PNG Buffer 直接生成 ICO / ICNS免去调用系统工具。注意因为脚本以 zx 风格编写并依赖zx/globals注入的全局 API直接用node scripts/generate-icons.mjs运行会因缺少$、echo等全局对象而报错官方推荐方式是通过pnpm icons内部走 zx执行。README 中一处示例写作./scripts/generate-icons.sh另一处写作node scripts/generate-icons.mjs而仓库实际提供的规范入口是pnpm icons对应的.mjs脚本后续以仓库实现为准。3.2 六步生成流程脚本的完整流程可归纳为六步每一步都有对应源码段落scripts/generate-icons.mjs读取 SVG 并校验检查resources/icons/icon.svg是否存在不存在则process.exit(1)终止。生成 Master PNG1024×1024sharp(SVG_SOURCE).resize(1024, 1024).png().toBuffer()得到全流程共享的主位图 Buffer——后续所有格式都以它为基础保证各平台图标视觉一致。生成icon.png512×512对 Master PNG 缩放 512 并落盘作为 Electron 根目录通用回退图标。生成 Windowsicon.icopng2icons.createICO(masterPngBuffer, png2icons.HERMITE, 0, false)直接从 1024 PNG 合成多尺寸 ICO生成失败时输出红色错误信息。生成 macOSicon.icnspng2icons.createICNS(masterPngBuffer, png2icons.HERMITE, 0)同样基于 Master PNG。生成 Linux PNG 尺寸集 macOS 托盘模板对[16, 32, 48, 64, 128, 256, 512]逐个resize落盘随后若存在tray-icon-template.svg则缩放为 22×22 输出tray-icon-Template.png缺失时仅打印警告并跳过脚本不会因此中断。其中png2icons的三个缩放算法在脚本注释里有明确说明1 Bilinear较快、2 Hermite均衡、3 Bezier最慢但质量最佳。ClawX 选择了Hermite2在生成速度与质量之间取平衡。四、环境准备按平台安装图像工具虽然.mjs脚本本身只依赖 Node 生态的 sharp/png2icons不需要外部工具但若你想手动生成或修改 SVG 后做本地预览README 给出的按平台依赖如下macOS通过 Homebrewbrew install imagemagick librsvgLinuxDebian/Ubuntu 系apt install imagemagick librsvg2-binWindows安装 ImageMagick官方站下载安装包安装时勾选加入 PATH。其中librsvgrsvg-convert负责 SVG→PNG 光栅化imagemagick负责格式转换与多尺寸合成若你希望完全脱离外部依赖则优先使用第三节的pnpm icons管线。五、手动生成图标不依赖脚本的三平台方案README 同时保留了纯手动的生成路径适合在无法运行 npm 脚本或需要精细控制时使用macOS.icns先构造一个.iconset文件夹内部放入命名规范的 PNG如icon_16x16.png、icon_32x322x.png等执行iconutil -c icns -o icon.icns ClawX.iconset由系统自带工具合成 ICNS。Windows.ico用 ImageMagick 将多个尺寸的 PNG 一次性合并进单个 ICOconvert icon_16.png icon_32.png icon_64.png icon_128.png icon_256.png icon.icoLinuxPNGs分别生成 16、32、48、64、128、256、512 像素的 PNG——这与自动脚本中linuxSizes数组完全一致也和 Linux 桌面规范如 .desktop 入口的Icon字段要求的尺寸集吻合。六、设计规范让图标在每个平台上都正确6.1 主应用图标的设计参数README 对主图标icon.svg给出三条硬性规范圆角半径约为宽度的 20%在 1024px 画布上约 200px前景内容白色爪形符号带 X 点缀ClawX 品牌元素安全区边缘保留 10% 外边距。对照仓库中的 resources/icons/icon.svg 可以看到实现细节完全落地画布 1024×1024白色圆角矩形从 (100,100) 开始、尺寸 824×824、rx184——184/824 ≈ 22%即约 20% 圆角比例同时x100恰好就是10% 安全区爪形路径用蓝色#007DEB填充并叠加了feOffset dy11feGaussianBlur stdDeviation11透明度 0.28的投影滤镜。可见 README 的规范并非泛泛而谈而是与源文件逐一对应。6.2 macOS 托盘模板图标的硬性约束重点macOS 菜单栏状态栏图标有一套特殊的模板图像Template Image机制README 将其总结为四条任何一条不满足都会导致菜单栏图标显示异常格式单色纯黑绘制在透明背景上不允许渐变或彩色尺寸22×22 像素系统会自动处理 2x 视网膜版本无需手动提供大图命名文件名必须以Template结尾如tray-icon-Template.pngmacOS 才能自动识别为模板图并据菜单栏深浅色自动反色设计主图标的简化单色版本源文件使用tray-icon-template.svg。仓库中的 resources/icons/tray-icon-template.svg 即为 22×22 画布、fillblack纯黑 #000000的爪形单色路径产物tray-icon-Template.png也是 22×22完全符合上述约束。特别提醒Windows/Linux 托盘图标可以自由使用彩色唯独 macOS 模板图标必须保持纯黑透明底。6.3 命名大小写与Template后缀tray-icon-Template.png中Template首字母大写是刻意约定macOS 的 template 识别对后缀有要求源码注释中也强调 The Template suffix tells macOS to treat it as a template image生成脚本输出时严格使用tray-icon-Template.png文件名切勿改写成小写template。七、运行时与打包图标如何被消费图标不只是静态文件ClawX 在主进程里有三处真实的消费逻辑理解了它们才算掌握图标管线的完整闭环。7.1 系统托盘图标electron/main/tray.ts托盘创建函数createTray按平台选择图标路径平台使用的文件原因源码注释Windowsicon.icoICO 在系统托盘显示质量最佳macOStray-icon-Template.pngTemplate 后缀让 macOS 按模板图自动适配明暗Linux 及其他32x32.png托盘常用小尺寸 PNG随后nativeImage.createFromPath加载若加载结果icon.isEmpty()文件缺失或损坏则回退到通用icon.png并在 macOS 上额外调用icon.setTemplateImage(true)兜底。开发者模式与打包模式通过getIconsDir()区分路径开发时__dirname/../../resources/icons打包后process.resourcesPath/resources/icons对应 extraResources 的复制目标。7.2 窗口图标electron/main/index.tsgetAppIcon()的逻辑为macOS 直接返回undefined依赖 .app 包内图标BrowserWindow不设 window iconWindows 使用icon.ico其余平台使用icon.png同样以icon.isEmpty()判断是否需要放弃设置。这里再次体现icon.png作为全平台通用回退的定位。7.3 electron-builder 打包配置electron-builder.yml打包侧对图标的使用散落在各平台段落mac.icon: resources/icons/icon.icns且 DMG 段也使用同一icon.icns作为卷标图标win.icon: resources/icons/icon.icoNSIS 安装器/卸载器图标同样指向icon.icolinux.icon: resources/icons整个目录electron-builder 会自动从 16~512 尺寸集中挑选生成 AppImage/deb/rpm 所需图标extraResources将resources/复制到安装包resources/但排除icons/*.md与icons/*.svg——矢量源不进入最终包避免冗余体积。八、更新图标的标准工作流README 给出的图标更新流程是标准五步也是每次品牌视觉调整时必须遵守的 checklist用矢量编辑器Figma、Illustrator、Inkscape 等编辑icon.svg若同时需要调整 macOS 菜单栏图标编辑tray-icon-template.svg必须保持透明底纯黑单色运行图标生成当前仓库规范入口为pnpm icons逐一检查生成的各平台产物尤其注意托盘小尺寸与 ICNS 在 Finder 中的显示将源文件与全部生成产物一并提交——因为生成脚本以磁盘上的 SVG 为输入任何一次漏提交生成物都会导致后续构建使用过期图标。九、常见问题与验证要点node scripts/generate-icons.mjs直接运行报错正常现象。脚本是 zx 程序#!/usr/bin/env zx并导入zx/globals应通过pnpm icons运行。macOS 菜单栏图标出现黑块/白块检查文件是否确实以Template结尾、是否纯黑单色、是否有渐变或半透明像素见 6.2。Linux 桌面启动器图标模糊确认 16~512 全尺寸集齐全GNOME/KDE 会根据目录扫描多个尺寸择优显示。打包后找不到图标打包产物中图标位于process.resourcesPath/resources/icons由 extraResources 复制且icons/*.svg与*.md被刻意排除属预期行为。如何验证整套链路修改icon.svg后执行pnpm icons对比 resources/icons 下全部产物时间戳与尺寸如file resources/icons/icon.png、icon.icns再通过pnpm run package:mac/win/linux检查安装包内图标是否符合预期。综上ClawX 的图标管线是一个单一矢量源 → 自动生成全平台格式 → 运行时/打包双路径消费的完整体系README 定义了文件契约与设计规范scripts/generate-icons.mjs 提供了可复现的生成实现electron/main/tray.ts、electron/main/index.ts 与 electron-builder.yml 则决定了这些文件最终被如何呈现。对于任何 Electron 桌面应用的图标管理这套契约清单 自动化脚本 平台消费点对齐的思路都值得直接借鉴。赞分享人工智能AI 应用桌面应用交互助手【免费下载链接】ClawXClawX is a desktop app that provides a graphical interface for OpenClaw AI agents. It turns CLI-based AI orchestration into a desktop experience without using the terminal. China website is https://clawx.com.cn.项目地址https://gitcode.com/gh_mirrors/cl/ClawX点击查看免费下载相关推荐跨平台应用图标全攻略electron-vue图标设计与自动化生成方案跨平台应用图标全攻略electron vue图标设计与自动化生成方案 你是否还在为Electron应用的图标适配问题头疼不同操作系统需要不同尺寸、不同格式的前端桌面应用Pandas_talib高级应用MACD、布林带和ATR指标组合策略Pandas_talib高级应用MACD、布林带和ATR指标组合策略 Pandas_talib是一个基于Python Pandas的技术分析指标实现库它提供跨平台应用图标设计终极指南Kazumi自适应图标规范与实现技巧跨平台应用图标设计终极指南Kazumi自适应图标规范与实现技巧 Kazumi作为一款基于自定义规则的番剧采集APP支持流媒体在线观看和弹幕功能其跨平台图标移动开发桌面应用音视频上一篇WeChatExporter终极指南无需越狱三步导出完整微信聊天记录下一篇MuJoCo Warp (MJWarp) 实战指南MuJoCo 的 NVIDIA GPU 高吞吐并行仿真实现创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
