之前每次想转个 WebP 或者压个 AVIF ,搜出来的在线工具要么满屏牛皮癣广告,要么得上传服务器。转换个带敏感信息的截图心里总犯嘀咕。
干脆自己写了一个工具集:Pandora。主打一个:全本地处理,流量不出浏览器。
🛠️ 做了哪些东西?
- 图片转换 (基于 WebAssembly): 用的
@jsquash。支持 PNG/JPEG/WEBP/AVIF 互转。因为是 Wasm 跑在本地,不用担心图片被后端偷摸存了,速度也挺稳。 - 像素级裁剪: 接入了
vue-advanced-cropper,比系统自带的画图工具好用那么一点点。 - JSON 处理: 左右分栏,高亮、格式化、行号定位。主要是为了看那种长得要命的 Schema 时不至于眼瞎。
🎢 避坑指南( TanStack Start 踩雷实录)
这个项目原本想尝鲜 @tanstack/start 走全栈 SSR 路线。TanStack 的 Router 和 Query 确实香,但这个框架目前还是有点“新”得烫手。
主要槽点: 在 SSR 模式下打包,构建工具表现得很迷。Server Bundle 里莫名其妙塞进了一堆 Client 依赖,导致体积直接爆表,部署时各种环境报错能折腾到凌晨三点。
最后我悟了: 一个工具类应用,我死磕 SSR 图个啥? SEO 吗?首屏那零点几秒的差距吗?
- 工具的核心需求是快和离线可用。
- SSR 引入的复杂度( Node 环境依赖、路径报错)远超收益。
解决方案: 直接砍掉 SSR ,全量重构为 **SSG (Static Site Generation)**。 换成静态生成后,构建瞬间丝滑,配合 PWA 直接变身离线工具箱,部署到 Vercel 或托管服务器上完全没压力。
🔗 链接
如果你也反感在线工具的广告,或者对隐私比较敏感,欢迎试用或拍砖: