Meshel/Format-Converter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

删除冗余代码，美化UI界面

Browse Source
This commit is contained in:
William
2026-02-06 14:49:40 +06:00
parent e3f6ddf851
commit 03110c786a
7 changed files with 1177 additions and 2399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
README.md
View File

@@ -1,127 +1,241 @@
# 火炬格式转换器 0.1.0
# 火炬格式转换器 2.0.0
基于 FFmpeg 和 Tauri 2.0 的跨平台媒体格式转换工具。
<div align="center">
## 特性
**基于 FFmpeg 和 Tauri 2.0 的跨平台媒体格式转换工具**
- 🎬 支持多种视频格式：MP4、AVI、MKV、MOV、WebM 等
- 🎵 支持多种音频格式：MP3、WAV、AAC、FLAC、OGG 等
- ⚙️ 丰富的转换参数：编码器、分辨率、帧率、比特率等
- 📊 实时进度显示
- 🖥️ 跨平台支持：Windows、macOS、Linux
- 🚀 基于 Rust + Tauri 2.0，性能优异
[![Tauri](https://img.shields.io/badge/Tauri-2.0-blue.svg)](https://v2.tauri.app/)
[![Rust](https://img.shields.io/badge/Rust-1.70+-orange.svg)](https://www.rust-lang.org/)
[![License](https://img.shields.io/badge/License-MIT-green.svg)](LICENSE)
## 系统要求
</div>
### 必需依赖
## ✨ 特性
- 🎬 **多格式支持** - 支持视频、音频、图片等多种格式转换
- ⚙️ **丰富参数** - 自定义编码器、分辨率、帧率、比特率等
- 🚀 **高性能** - 基于 Rust + Tauri 2.0，原生性能
- 🎨 **现代化 UI** - 使用 Tailwind CSS + Lucide 图标
- 📊 **实时进度** - 转换进度实时显示
- 🖥️ **跨平台** - 支持 Windows、macOS、Linux
- 🔄 **批量转换** - 支持多文件批量处理
- 💾 **智能输出** - 自动检测或自定义输出路径
## 🚀 快速开始
### 系统要求
#### 必需依赖
1. **FFmpeg** - 核心转换引擎
- Windows: 从 [ffmpeg.org](https://ffmpeg.org/download.html) 下载并添加到 PATH
- macOS: `brew install ffmpeg`
- Linux: `sudo apt install ffmpeg` 或对应包管理器
- Linux: `sudo apt install ffmpeg`
2. **Rust** - 编译 Tauri 后端
- 从 [rustup.rs](https://rustup.rs/) 安装
- 安装：`curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh`
- 或访问 [rustup.rs](https://rustup.rs/)
3. **Node.js** - 前端构建工具
- 从 [nodejs.org](https://nodejs.org/) 安装 (推荐 v18+)
- 推荐版本：v18 或更高
- 下载：[nodejs.org](https://nodejs.org/)
### Tauri 2.0 系统依赖
#### Tauri 系统依赖
请参考 [Tauri 2.0 官方文档](https://v2.tauri.app/start/prerequisites/) 安装对应平台的系统依赖。
## 快速开始
### 安装步骤
### 1. 克隆项目
1. **克隆项目**
```bash
git clone <your-repo>
cd format-converter
```
```bash
git clone <your-repo>
cd format-converter
2. **安装依赖**
```bash
npm install
```
> 这会自动下载并安装所有 Node.js 依赖到 `node_modules` 文件夹
3. **开发模式运行**
```bash
npm run dev
```
4. **构建发布版本**
```bash
npm run build
```
> 构建完成后，安装包位于 `src-tauri/target/release/bundle/` 目录
## 📖 使用说明
### 基本流程
1. **添加文件**
- 点击拖放区域选择文件
- 或直接拖放文件到窗口
2. **配置转换参数**
- 选择目标格式（MP4、MP3、JPG 等）
- 设置编码参数（可选）
- 选择输出位置
3. **开始转换**
- 点击"开始转换"按钮
- 查看实时进度
4. **完成**
- 转换完成后自动打开输出文件夹（可选）
### 支持的格式
#### 视频格式
- **输入**: MP4, AVI, MKV, MOV, WebM, FLV, WMV, MPEG 等
- **输出**: MP4, MKV, MOV, AVI, WebM, FLV, WMV
#### 音频格式
- **输入**: MP3, WAV, AAC, FLAC, OGG, WMA, M4A 等
- **输出**: MP3, AAC, FLAC, WAV, OGG, Opus, WMA
#### 图片格式
- **输入**: JPG, PNG, WebP, GIF, BMP, TIFF, ICO 等
- **输出**: JPG, PNG, WebP, GIF, BMP, TIFF, ICO
## 🏗️ 项目结构
```
format-converter/
├── src/ # 前端源代码
│ ├── index.html # 主页面（使用 Tailwind CSS）
│ ├── style.css # 自定义样式（动画和特效）
│ ├── main.js # 前端逻辑（ES6 模块）
│ └── thumbnail-helper.js # 缩略图辅助工具
├── src-tauri/ # Tauri 后端
│ ├── src/
│ │ ├── main.rs # Rust 后端主程序
│ │ └── ffmpeg_installer.rs # FFmpeg 自动安装器
│ ├── icons/ # 应用图标
│ ├── Cargo.toml # Rust 依赖配置
│ └── tauri.conf.json # Tauri 配置
├── node_modules/ # Node.js 依赖（自动生成，不要提交到 Git）
├── package.json # Node.js 项目配置
├── package-lock.json # 依赖版本锁定文件
├── README.md # 项目说明文档
└── TESTING_FFMPEG.md # FFmpeg 测试指南
```
### 2. 安装依赖
### 关键文件说明
```bash
npm install
```
- **`node_modules/`** - Node.js 依赖包文件夹，由 `npm install` 自动生成，包含所有前端依赖（Tailwind CSS、Lucide 等）。不要手动修改，也不要提交到 Git。
- **`package.json`** - 定义项目依赖和脚本命令
- **`package-lock.json`** - 锁定依赖版本，确保团队成员使用相同版本
- **`src/index.html`** - 主页面，使用 Tailwind CSS CDN 和 Lucide 图标
- **`src/style.css`** - 精简的自定义样式，只包含动画和特殊效果（199 行）
- **`src/main.js`** - 前端业务逻辑，使用 ES6 模块
- **`src-tauri/src/main.rs`** - Rust 后端，处理文件分析、格式转换等
### 3. 开发模式运行
## 🛠️ 技术栈
### 前端
- **HTML5** - 页面结构
- **Tailwind CSS** - 现代化 CSS 框架（utility-first）
- **Lucide Icons** - 轻量级图标库
- **Vanilla JavaScript** - ES6+ 模块化
### 后端
- **Rust** - 系统编程语言
- **Tauri 2.0** - 桌面应用框架
- **FFmpeg** - 多媒体处理引擎
### 开发工具
- **npm** - 包管理器
- **Cargo** - Rust 包管理器
## 🔧 开发指南
### 开发模式
```bash
npm run dev
```
### 4. 构建发布版本
这会启动 Tauri 开发服务器，支持热重载。
### 调试
- **后端日志**: 在终端中查看 Rust 输出
- **前端调试**: 按 F12 打开 DevTools
- **Tauri API**: 使用 `console.log` 调试前端逻辑
### 构建
```bash
npm run build
```
构建完成后，安装包位于 `src-tauri/target/release/bundle/` 目录。
构建产物位于 `src-tauri/target/release/bundle/`：
- **Windows**: `.msi` 或 `.exe`
- **macOS**: `.dmg` 或 `.app`
- **Linux**: `.deb`, `.AppImage` 等
## 使用说明
## 📝 脚本命令
1. **选择文件**：点击"选择文件"按钮或拖拽文件到窗口
2. **设置参数**：
- 选择输出格式
- 配置编码器、分辨率、帧率等（可选）
- 选择输出路径
3. **开始转换**：点击"开始转换"按钮
4. **查看进度**：在任务列表中查看转换进度
```bash
# 开发模式（热重载）
npm run dev
## 支持的格式
# 构建发布版本
npm run build
### 视频格式
- **MP4** - 通用视频格式，兼容性好（支持 H.264、HEVC 编码）
- **AVI** - Windows 视频格式
- **MKV** - Matroska 格式，支持多音轨
- **MOV** - QuickTime 视频格式
- **WebM** - 网页视频格式
### 音频格式
- **MP3** - 通用音频格式
- **WAV** - 无损音频格式
- **AAC** - 高级音频编码
- **FLAC** - 无损音频压缩
- **OGG** - 开源音频格式
## 项目结构
```
format-converter/
├── src/ # 前端源代码
│ ├── index.html # 主页面
│ ├── style.css # 自定义样式文件
│ └── main.js # 前端逻辑 (ES6 模块)
├── src-tauri/ # Tauri 2.0 后端
│ ├── src/
│ │ ├── main.rs # Rust 后端代码
│ │ └── ffmpeg_installer.rs # FFmpeg 安装器
│ ├── Cargo.toml # Rust 依赖
│ └── tauri.conf.json # Tauri 2.0 配置
├── package.json # Node.js 配置
└── README.md # 项目说明
# 运行 Tauri CLI
npm run tauri
```
## 技术栈
## 🐛 常见问题
- **前端**: HTML5 + Tailwind CSS + ES6 JavaScript (模块化)
- **后端**: Rust + Tauri 2.0
- **核心引擎**: FFmpeg
- **插件系统**: Tauri 2.0 插件架构
### Q: FFmpeg 未安装怎么办？
A: 应用会自动检测 FFmpeg，如果未安装会显示安装引导。您也可以手动安装：
- macOS: `brew install ffmpeg`
- Windows: 下载并添加到 PATH
- Linux: `sudo apt install ffmpeg`
### 调试
### Q: 图标不显示？
A: 确保网络连接正常，Lucide CDN 需要联网加载。或检查浏览器控制台是否有错误。
- 后端日志会在终端中输出
- 前端控制台可以通过 DevTools 查看（开发模式下按 F12）
- 使用 `console.log` 进行前端调试
### Q: 转换失败？
A: 检查：
1. FFmpeg 是否正确安装
2. 输入文件是否损坏
3. 输出路径是否有写入权限
4. 查看终端日志获取详细错误信息
## 许可证
### Q: node_modules 文件夹很大？
A: 这是正常的，`node_modules` 包含所有前端依赖。不要提交到 Git（已在 `.gitignore` 中）。
MIT
## 📄 许可证
## 致谢
MIT License - 详见 [LICENSE](LICENSE) 文件
## 🙏 致谢
- [FFmpeg](https://ffmpeg.org/) - 强大的多媒体处理框架
- [Tauri 2.0](https://v2.tauri.app/) - 下一代桌面应用开发框架
- [Tailwind CSS](https://tailwindcss.com) - 只需书写 HTML 代码即可快速构建美观的网站
- [Tauri](https://tauri.app/) - 现代化桌面应用框架
- [Tailwind CSS](https://tailwindcss.com/) - 实用优先的 CSS 框架
- [Lucide](https://lucide.dev/) - 精美的开源图标库
## 📮 联系方式
- 官网: [meshel.cn](https://www.meshel.cn)
- 问题反馈: [GitHub Issues](https://github.com/your-repo/issues)
---
<div align="center">
**火炬格式转换器** - 让格式转换更简单
Made with ❤️ by Meshel
</div>