在上一篇博客逐步使用Avif代替Webp图片中，我尝试了使用avif格式来处理图片，期望可以优化图片的体积和加载速度。

使用了一段时间发现虽然降低了一部分图片的质量，但图片体积确实有了明显的下降，加载速度也有了提升，之前上传图片使用的 uPic这个免费的 MacOS 上的图床工具。

虽然功能能满足需求，但每次需要先手工处理一下图片，而且这个 app 已经很久都没有人再更新了，所以就想自己写一个 app 来处理图片上传的事情，顺便把上传时候识别到的图片都默认使用 avif 格式来转化格式。

全部代码均使用 AI vibe coding 生成

源码仓库位置

https://github.com/pengxiaochao/avif-app

配置截图

343758be

技术栈

  • Rust
  • Tauri

功能特性

功能说明
AVIF 转换上传图片前自动转换为 AVIF 格式，大幅降低文件体积
S3 兼容上传支持 AWS S3、Cloudflare R2、MinIO 等所有 S3 协议存储
全局快捷键在任意应用内按下快捷键即可触发剪贴板上传
剪贴板感知自动识别剪贴板中的图片数据或文件路径
任意文件上传支持上传 PDF、ZIP、TAR、视频等任意格式，非图片文件跳过 AVIF 转换
目录批量上传选择整个目录，递归上传所有文件，最多 4 个并发，完成后自动跳转历史记录
多种链接格式支持纯 URL、Markdown、HTML 及完全自定义模板
文件名模板支持日期、UUID、原始文件名等变量组合
历史记录保存最近 200 条上传记录，支持一键复制和浏览器打开
开机自启支持配置登录时自动启动，常驻菜单栏
暗色模式托盘图标自动适配 macOS 亮色 / 暗色主题

打包与安装

前置依赖

# 1. 安装 Rust 工具链
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
source "$HOME/.cargo/env"

# 2. 安装 Tauri CLI v2
cargo install tauri-cli --version "^2"

# 3. 安装 Node.js（v18+ 推荐）
# 推荐使用 fnm 或 nvm 管理 Node 版本
node --version
npm --version

安装前端依赖

前端使用 Vite + Vue 3 + Tailwind CSS，首次构建前需安装依赖：

cd ui
npm install

开发模式运行

Tauri 会自动启动 Vite Dev Server 并打开带热更新的开发窗口：

# 在项目根目录
cargo tauri dev

Vite Dev Server 监听 http://localhost:5173，前端代码修改后无需重启，页面自动热更新。

首次运行会编译所有 Rust 依赖（约需 3-10 分钟），后续增量编译较快。

构建发布版本

Tauri 构建时会自动执行 npm run build 编译前端，无需手动操作：

# 在项目根目录，构建 .dmg 安装包（同时生成 .app 和 .dmg）
cargo tauri build