文档 完善项目文档结构，添加 AGENTS.md 和更新 README.md
This commit is contained in:
yuantao
213
README.md
Normal file
213
README.md
Normal file
@@ -0,0 +1,213 @@
|
||||
# TinyPanda 🐼
|
||||
|
||||
专业的图片压缩工具，基于 Electron 和 Tinify API 构建。
|
||||
|
||||
|
||||
|
||||
## ✨ 功能特性
|
||||
|
||||
- ✅ **批量图片压缩** - 支持队列管理，可同时处理多张图片
|
||||
- ✅ **实时进度显示** - 显示压缩进度和状态
|
||||
- ✅ **压缩效果对比** - 显示压缩前后大小对比及节省比例
|
||||
- ✅ **打包下载** - 支持将所有压缩后的图片打包为 ZIP 下载
|
||||
- ✅ **拖拽上传** - 支持拖拽图片到上传区域
|
||||
- ✅ **美观的现代化 UI** - Windows 11 Fluent Design 风格界面
|
||||
- ✅ **自定义标题栏** - 无边框窗口设计，支持窗口控制
|
||||
|
||||
## 🖼️ 支持的图片格式
|
||||
|
||||
- JPG / JPEG
|
||||
- PNG
|
||||
- WebP
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 环境要求
|
||||
|
||||
- Node.js >= 14.0.0
|
||||
- npm >= 6.0.0
|
||||
|
||||
### 安装依赖
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
### 配置 API Key
|
||||
|
||||
1. 访问 [Tinify 官网](https://tinify.cn/) 注册账号
|
||||
2. 获取您的 API Key
|
||||
3. 在项目根目录创建 `.env` 文件，添加以下内容：
|
||||
|
||||
```env
|
||||
TINIFY_API_KEY=your_api_key_here
|
||||
```
|
||||
|
||||
### 运行应用
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 打包应用
|
||||
|
||||
```bash
|
||||
# 打包为 Windows 应用
|
||||
npm run build:win
|
||||
|
||||
# 打包为所有平台
|
||||
npm run build
|
||||
```
|
||||
|
||||
打包后的应用将输出到 `dist` 目录。
|
||||
|
||||
## 📖 使用说明
|
||||
|
||||
### 1. 验证 API Key
|
||||
|
||||
- 点击右上角设置按钮
|
||||
- 输入您的 API Key
|
||||
- 点击"验证"按钮确认有效性
|
||||
- 点击"保存"保存配置
|
||||
|
||||
### 2. 添加图片
|
||||
|
||||
- **方法一**：点击"选择图片"按钮选择文件
|
||||
- **方法二**：直接拖拽图片到上传区域
|
||||
|
||||
### 3. 压缩图片
|
||||
|
||||
- 添加图片后，点击"全部压缩"按钮
|
||||
- 等待所有图片压缩完成
|
||||
- 查看每张图片的压缩前后大小对比和节省比例
|
||||
|
||||
### 4. 下载结果
|
||||
|
||||
- **单张下载**：点击每张图片的"下载"按钮
|
||||
- **批量下载**：点击"打包下载"按钮，选择保存位置
|
||||
|
||||
## 🛠️ 技术栈
|
||||
|
||||
- **Electron 32.0.0** - 桌面应用框架
|
||||
- **Tinify API** - 专业图片压缩服务
|
||||
- **JSZip 3.10.1** - 文件打包
|
||||
- **Electron Store 8.2.0** - 配置持久化
|
||||
- **原生 CSS** - Windows 11 Fluent Design 风格
|
||||
|
||||
## 📁 项目结构
|
||||
|
||||
```
|
||||
TinyPanda/
|
||||
├── src/
|
||||
│ ├── main/
|
||||
│ │ └── index.js # 主进程代码（窗口管理、IPC 通信）
|
||||
│ └── renderer/
|
||||
│ ├── index.html # 渲染进程 HTML
|
||||
│ ├── styles.css # 样式文件
|
||||
│ ├── app.js # 渲染进程逻辑
|
||||
│ └── icons.js # 图标组件
|
||||
├── assets/ # 资源文件（图标等）
|
||||
├── .env # 环境变量配置
|
||||
├── package.json # 项目配置
|
||||
└── README.md # 项目说明
|
||||
```
|
||||
|
||||
## 🔑 API Key 注意事项
|
||||
|
||||
- 每个账户每月有 **500 次**免费压缩额度
|
||||
- API Key 请妥善保管，不要泄露
|
||||
- 可以在 [Tinify 官网](https://tinify.cn/developers) 查看详细文档
|
||||
- 压缩失败时请检查 API Key 是否有效、网络连接是否正常
|
||||
|
||||
## 🎨 UI 设计
|
||||
|
||||
TinyPanda 采用 **Windows 11 Fluent Design** 设计语言，提供：
|
||||
|
||||
- 流畅的动画效果
|
||||
- 半透明毛玻璃效果
|
||||
- 现代化的图标和按钮
|
||||
- 响应式的布局设计
|
||||
- 清晰的状态指示
|
||||
|
||||
## 📝 开发指南
|
||||
|
||||
### 代码风格
|
||||
|
||||
- 使用 ES6+ JavaScript 语法
|
||||
- 主进程和渲染进程通过 IPC 通信
|
||||
- 使用 `async/await` 处理异步操作
|
||||
|
||||
### IPC 通信协议
|
||||
|
||||
主进程提供以下 IPC 处理器：
|
||||
|
||||
- `get-api-key` - 获取当前 API Key
|
||||
- `set-api-key` - 设置 API Key
|
||||
- `validate-api-key` - 验证 API Key
|
||||
- `compress-image` - 压缩单张图片
|
||||
- `get-image-info` - 获取图片信息
|
||||
- `save-compressed-image` - 保存压缩后的图片
|
||||
- `create-zip` - 创建 ZIP 压缩包
|
||||
- `select-save-directory` - 选择保存目录
|
||||
- `select-files` - 选择文件
|
||||
- `window-minimize/maximize/close` - 窗口控制
|
||||
|
||||
### 添加新功能
|
||||
|
||||
1. 在 `src/main/index.js` 中添加 IPC 处理器
|
||||
2. 在 `src/renderer/app.js` 中调用相应的 IPC 方法
|
||||
3. 在 `src/renderer/index.html` 中添加 UI 元素
|
||||
4. 在 `src/renderer/styles.css` 中添加样式
|
||||
|
||||
## 🐛 常见问题
|
||||
|
||||
**Q: 压缩失败怎么办？**
|
||||
|
||||
A: 请检查以下项：
|
||||
- API Key 是否有效
|
||||
- 网络连接是否正常
|
||||
- 文件格式是否支持（JPG、PNG、WebP）
|
||||
- 查看控制台错误信息
|
||||
|
||||
**Q: 如何获取更多压缩额度？**
|
||||
|
||||
A: 访问 [Tinify 官网](https://tinify.cn/) 查看付费计划。
|
||||
|
||||
**Q: 可以离线使用吗？**
|
||||
|
||||
A: 不可以，压缩功能需要连接到 Tinify API 服务器。
|
||||
|
||||
**Q: 压缩后的图片质量如何？**
|
||||
|
||||
A: Tinify 使用智能压缩算法，在保持视觉质量的同时最大化压缩率，通常可以减少 50-80% 的文件大小。
|
||||
|
||||
## 🤝 贡献
|
||||
|
||||
欢迎提交 Issue 和 Pull Request！
|
||||
|
||||
1. Fork 本仓库
|
||||
2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
|
||||
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
|
||||
4. 推送到分支 (`git push origin feature/AmazingFeature`)
|
||||
5. 开启 Pull Request
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
MIT License - 详见 [LICENSE](LICENSE) 文件
|
||||
|
||||
## 👥 作者
|
||||
|
||||
**Pandora Studio**
|
||||
|
||||
- 项目主页: https://git.pandorastudio.cn/product/TinyPanda.git
|
||||
- 问题反馈: [Issues](https://git.pandorastudio.cn/product/TinyPanda.git/issues)
|
||||
|
||||
## 🙏 致谢
|
||||
|
||||
- [Electron](https://www.electronjs.org/) - 跨平台桌面应用框架
|
||||
- [Tinify](https://tinify.cn/) - 专业图片压缩服务
|
||||
- [JSZip](https://stuk.github.io/jszip/) - JavaScript ZIP 库
|
||||
|
||||
---
|
||||
|
||||
⭐ 如果这个项目对你有帮助，请给它一个 Star！
|
||||
Reference in New Issue
Block a user