缘起
自从给 Anteey 买了台服务器，总想着物尽其用，昨天又在里面部署了博客，博客文章是可以设置题头图的，可以在文章顶部显示，同时也为列表增加了缩略图，还挺漂亮的。但是问题来了，每次给文章选题图超级麻烦，需要去 unsplash 上搜索图，下载后裁成 16:9 的比例，还得压缩大小，要不然加载慢还占服务器的存储空间。
我的需求
搜索关键词（中英文都可）→ 调用 unsplash api 返回图片 → 选择图片 → 按比例裁剪 → 自动压缩图片 → 下载到本地下载文件夹中。
对于这种简单的应用，开发成桌面应用显然有点重，所以我选择开发成 uTools 的插件，同时也学习一下插件的开发。
AI 整理需求文档
我将需求用自然语言描述给 AI，让它帮我整理总结成 Cursor 友好的开发需求文档，如下：
博客文章配图 uTools 插件开发文档
1. 项目概述
本项目旨在开发一个 uTools 插件，名为”博客文章配图”。该插件允许用户通过关键词搜索 Unsplash 图片，选择并裁剪图片，然后压缩和下载处理后的图片，以便用于博客文章配图。
2. 功能需求
– 关键词搜索：用户输入关键词，调用 Unsplash API 搜索相关图片
– 图片选择：展示搜索结果，允许用户选择喜欢的图片
– 图片裁剪：对选中的图片进行固定尺寸裁剪，用户可选择裁剪区域
– 图片压缩：裁剪后对图片进行压缩，以减轻服务器压力
– 图片下载：将处理后的图片下载到本地
3. 技术栈
– React: 用于构建用户界面
– Vite: 作为构建工具和开发服务器
– TypeScript: 用于类型检查和提高代码质量
– uTools API: 用于与 uTools 平台集成
经过了将近 3 个小时的断断续续开发，这款「博客配图」终于搞定了，主要是最开始的时候 Cursor 对于 uTools 的 api 不太熟悉，对话了好几轮，我楞是看不到页面。
使用方法
先去 unsplash 和百度翻译开放平台申请开发者 key，用于搜索图片和关键词翻译。
然后就可以通过关键词进行搜索了，这里的关键词翻译是可选的，如果你配置了百度翻译密钥的话，输入的中文关键词将会被自动翻译成英文进行搜索，这样准确率会更高一些，如果没有的话，那就默认使用你输入的关键词进行搜索。
点击选中的图片，会弹出来裁剪页面，可以拖动选框保留想要的部分，点击完成裁剪即可保存图片。
应用下载
离线安装包下载：
下载解压后再安装～
👋🏻 Bye～
暂无评论内容