From 03110c786ad9d655350ca11fefaab76a599207f2 Mon Sep 17 00:00:00 2001 From: William Date: Fri, 6 Feb 2026 14:49:40 +0600 Subject: [PATCH] =?UTF-8?q?=E5=88=A0=E9=99=A4=E5=86=97=E4=BD=99=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=EF=BC=8C=E7=BE=8E=E5=8C=96UI=E7=95=8C=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 50 ++ OPTIMIZATION.md | 136 ---- README.md | 274 +++++-- TESTING_FFMPEG.md | 247 +++++++ src/index.html | 504 ++++++------- src/main.js | 604 ++++++---------- src/style.css | 1761 +++++---------------------------------------- 7 files changed, 1177 insertions(+), 2399 deletions(-) create mode 100644 CHANGELOG.md delete mode 100644 OPTIMIZATION.md create mode 100644 TESTING_FFMPEG.md diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..010d103 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,50 @@ +# 更新日志 + +## [2.0.0] - 2026-02-06 + +### 🎉 重大更新 + +#### UI 重构 +- ✅ 完全迁移到 **Tailwind CSS**，移除 90% 的自定义 CSS（从 1800+ 行减少到 199 行） +- ✅ 使用 **Lucide Icons** 替换所有内联 SVG +- ✅ 现代化的玻璃态效果和动画 +- ✅ 完整的响应式设计 + +#### 性能优化 +- ✅ 取消缩略图生成，改为懒加载 +- ✅ 图片使用 base64 懒加载 +- ✅ 编码信息异步获取 +- ✅ 文件分析速度提升 50-100 倍 + +#### 新功能 +- ✅ FFmpeg 自动安装引导 +- ✅ 安装进度实时显示 +- ✅ 批量文件处理优化 +- ✅ 智能输出路径设置 + +#### 技术栈升级 +- ✅ Tauri 2.0 +- ✅ Tailwind CSS 3.x +- ✅ Lucide Icons +- ✅ ES6+ 模块化 + +### 📝 文档更新 +- ✅ 重写 README.md，更清晰的项目说明 +- ✅ 添加 node_modules 说明 +- ✅ 添加详细的项目结构说明 +- ✅ 添加常见问题解答 + +### 🗑️ 清理 +- ✅ 删除所有重构临时文件 +- ✅ 删除备份文件 +- ✅ 删除重构脚本和文档 + +--- + +## [1.0.0] - 2025-XX-XX + +### 初始版本 +- 基础的格式转换功能 +- 支持视频、音频、图片格式 +- 自定义 CSS 样式 +- 内联 SVG 图标 diff --git a/OPTIMIZATION.md b/OPTIMIZATION.md deleted file mode 100644 index d1513e5..0000000 --- a/OPTIMIZATION.md +++ /dev/null @@ -1,136 +0,0 @@ -# 性能优化说明 - -## 优化目标 -解决添加大量文件时加载缓慢的问题，特别是缩略图生成和编码信息获取导致的性能瓶颈。 - -## 优化方案 - -### 1. 完全移除缩略图生成 -- **视频文件**：不再生成缩略图，直接显示视频图标 -- **音频文件**：不再提取封面，直接显示音频图标 -- **图片文件**：直接显示原图（使用 Tauri 的 `convertFileSrc` API） - -### 2. 编码信息懒加载 -- **文件分析阶段**：只获取文件名、大小、类型等基本信息 -- **进入配置页面后**：异步加载编码信息（分辨率、编码器、比特率等） -- **打开文件列表时**：按需加载还未获取的编码信息 -- **并发控制**：每次并发加载 5 个文件，避免阻塞 - -### 3. 优化文件分析流程 -- 移除 `analyze_files` 中的缩略图生成逻辑 -- 移除 `analyze_files` 中的编码信息获取逻辑 -- 只保留最基本的文件系统信息读取 -- 文件分析速度提升 **50-100 倍**（取决于文件数量和类型） - -### 4. 简化 UI 显示 -- 预览网格：图片显示原图，视频/音频显示图标 -- 文件列表：编码信息显示"加载中..."，加载完成后自动更新 -- 保留所有编码信息显示（分辨率、编码器、比特率等） - -## 性能对比 - -### 优化前 -- 10 个视频文件：~15-30 秒（生成缩略图 + 获取编码信息） -- 50 个音频文件：~30-60 秒（提取封面 + 获取编码信息） -- 100 个图片文件：~20-40 秒（生成缩略图 + 获取分辨率） - -### 优化后 -- 10 个视频文件：**~0.1-0.5 秒**（只读取文件系统信息） -- 50 个音频文件：**~0.2-0.8 秒**（只读取文件系统信息） -- 100 个图片文件：**~0.3-1 秒**（只读取文件系统信息） - -编码信息在后台异步加载，不阻塞用户操作。 - -## 用户体验改进 - -1. **即时响应**：选择文件后 **立即** 进入配置页面（< 1 秒） -2. **清晰的图标**：使用 Lucide 风格的 SVG 图标，美观且加载快 -3. **图片原图显示**：图片文件直接显示原图，画质更好 -4. **渐进式加载**：编码信息在后台加载，加载完成后自动更新显示 -5. **按需加载**：只在打开文件列表时才加载该类型文件的编码信息 - -## 技术细节 - -### 前端优化 -```javascript -// 文件分析后立即进入配置页面 -state.files = analyzedFiles; -renderFileTypeCards(); -switchPage('config-page'); - -// 异步懒加载编码信息（不阻塞 UI） -lazyLoadCodecInfo(); - -// 图片直接使用原图 -if (type === 'image' && file.path) { - const fileUrl = window.__TAURI__.core.convertFileSrc(file.path); - return `${file.name}`; -} - -// 视频/音频显示图标 -const icon = previewIcons[type]; -return `
${icon}
`; -``` - -### 后端优化 -```rust -// 只获取基本文件信息 -let metadata = fs::metadata(&path)?; -let size = metadata.len(); - -// 完全取消缩略图生成 -let thumbnail = None; - -// 编码信息也改为懒加载 -let codec_info = None; - -// 提供单独的命令按需获取编码信息 -#[tauri::command] -async fn get_file_info(path: String, file_type: FileType) -> Result, String> { - Ok(get_file_codec_info(&path, &file_type).await) -} -``` - -## 加载策略 - -### 阶段 1：文件分析（< 1 秒） -- ✅ 读取文件名、大小、扩展名 -- ✅ 识别文件类型 -- ✅ 立即显示配置页面 - -### 阶段 2：后台加载（异步，不阻塞） -- 🔄 并发加载编码信息（每次 5 个） -- 🔄 加载完成后自动更新显示 -- 🔄 用户可以同时进行其他操作 - -### 阶段 3：按需加载 -- 🔄 打开文件列表时，加载该类型文件的编码信息 -- 🔄 已加载的信息会被缓存，不会重复加载 - -## 保留的功能 - -虽然移除了缩略图和同步编码信息获取，但以下功能完全保留： -- ✅ 文件编码信息显示（异步加载） -- ✅ 文件大小显示 -- ✅ 文件格式识别 -- ✅ 所有转换功能 -- ✅ 批量处理能力 - -## 未来可选优化 - -如果需要进一步优化，可以考虑： -1. **缓存编码信息**：将编码信息缓存到本地数据库 -2. **更快的元数据读取**：使用更轻量的库读取基本信息 -3. **虚拟滚动**：文件列表使用虚拟滚动，只渲染可见部分 -4. **Web Worker**：在 Web Worker 中处理编码信息 - -## 结论 - -通过完全移除同步操作，我们实现了： -- **50-100 倍**的初始加载速度提升 -- **即时响应**（< 1 秒进入配置页面） -- **更好的用户体验**（不阻塞 UI） -- **更低的资源占用**（按需加载） -- **保留所有核心功能**（异步加载） - -这是一个以用户体验为导向的优化方案，特别适合需要批量处理大量文件的场景。无论添加多少文件，初始加载都是瞬间完成的。 diff --git a/README.md b/README.md index 18fe7ae..4bfc85e 100644 --- a/README.md +++ b/README.md @@ -1,127 +1,241 @@ -# 火炬格式转换器 0.1.0 +# 火炬格式转换器 2.0.0 -基于 FFmpeg 和 Tauri 2.0 的跨平台媒体格式转换工具。 +
-## 特性 +**基于 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) -## 系统要求 +
-### 必需依赖 +## ✨ 特性 + +- 🎬 **多格式支持** - 支持视频、音频、图片等多种格式转换 +- ⚙️ **丰富参数** - 自定义编码器、分辨率、帧率、比特率等 +- 🚀 **高性能** - 基于 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 + cd format-converter + ``` -```bash -git clone -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 代码即可快速构建美观的网站 \ No newline at end of file +- [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) + +--- + +
+ +**火炬格式转换器** - 让格式转换更简单 + +Made with ❤️ by Meshel + +
diff --git a/TESTING_FFMPEG.md b/TESTING_FFMPEG.md new file mode 100644 index 0000000..3a77e7d --- /dev/null +++ b/TESTING_FFMPEG.md @@ -0,0 +1,247 @@ +# FFmpeg 安装测试指南 + +## 测试目标 +测试在没有 FFmpeg 的电脑上全新安装该软件后，第一次启动时的 FFmpeg 自动安装流程。 + +## 测试方法 + +### 方法 1：临时重命名 FFmpeg（推荐） + +如果你的电脑已经安装了 FFmpeg，可以临时重命名它来模拟未安装的情况： + +#### macOS/Linux: +```bash +# 1. 查找 FFmpeg 位置 +which ffmpeg + +# 2. 临时重命名（需要 sudo） +# 如果在 /usr/local/bin/ffmpeg +sudo mv /usr/local/bin/ffmpeg /usr/local/bin/ffmpeg.backup +sudo mv /usr/local/bin/ffprobe /usr/local/bin/ffprobe.backup + +# 如果在 /opt/homebrew/bin/ffmpeg (Apple Silicon) +sudo mv /opt/homebrew/bin/ffmpeg /opt/homebrew/bin/ffmpeg.backup +sudo mv /opt/homebrew/bin/ffprobe /opt/homebrew/bin/ffprobe.backup + +# 3. 测试完成后恢复 +sudo mv /usr/local/bin/ffmpeg.backup /usr/local/bin/ffmpeg +sudo mv /usr/local/bin/ffprobe.backup /usr/local/bin/ffprobe +``` + +#### Windows: +```cmd +# 1. 查找 FFmpeg 位置 +where ffmpeg + +# 2. 临时重命名 +ren "C:\path\to\ffmpeg.exe" "ffmpeg.exe.backup" +ren "C:\path\to\ffprobe.exe" "ffprobe.exe.backup" + +# 3. 测试完成后恢复 +ren "C:\path\to\ffmpeg.exe.backup" "ffmpeg.exe" +ren "C:\path\to\ffprobe.exe.backup" "ffprobe.exe" +``` + +### 方法 2：删除应用数据目录 + +删除应用存储的 FFmpeg： + +#### macOS: +```bash +rm -rf ~/Library/Application\ Support/FormatConverter/ffmpeg +``` + +#### Windows: +```cmd +del /F /Q "%LOCALAPPDATA%\FormatConverter\ffmpeg.exe" +``` + +#### Linux: +```bash +rm -rf ~/.local/share/format-converter/ffmpeg +``` + +### 方法 3：使用虚拟机或容器 + +最彻底的测试方法： +1. 使用虚拟机（VirtualBox、VMware、Parallels） +2. 使用 Docker 容器 +3. 使用云端测试环境 + +## 测试流程 + +### 1. 启动应用 +```bash +npm run dev +``` + +### 2. 观察初始化过程 + +应该看到以下流程： + +1. **应用启动** + - 显示主页面 + - 底部状态栏显示"检测编码器..." + +2. **检测 FFmpeg** + - 控制台输出：`正在检测 FFmpeg...` + - 控制台输出：`调用 check_ffmpeg_status...` + +3. **弹出安装引导** + - 如果未检测到 FFmpeg，自动弹出安装引导弹窗 + - 弹窗标题：🔧 需要安装 FFmpeg + - 显示两个选项： + - 🚀 自动安装（推荐） + - 📝 手动安装 + +4. **点击"开始安装"** + - 弹窗关闭 + - 切换到安装页面 + - 显示进度条和安装信息 + +5. **安装过程** + - 0-5%: 准备下载 FFmpeg... + - 5-50%: 正在下载 FFmpeg... (显示下载进度) + - 50-90%: 正在解压... + - 90-95%: 正在安装... + - 95-100%: 正在清理... + - 100%: FFmpeg 安装完成 + +6. **安装完成** + - 自动返回主页面 + - 底部状态栏显示"编码器"（绿色点） + - 鼠标悬停显示 FFmpeg 版本信息 + +### 3. 验证安装 + +安装完成后，验证功能： + +1. **选择文件** + - 点击或拖拽文件到主页面 + - 应该能正常分析文件 + +2. **转换测试** + - 选择一个小文件进行转换 + - 观察转换过程是否正常 + +3. **检查安装位置** + ```bash + # macOS + ls -la ~/Library/Application\ Support/FormatConverter/ + + # Windows + dir "%LOCALAPPDATA%\FormatConverter\" + + # Linux + ls -la ~/.local/share/format-converter/ + ``` + +## 预期结果 + +### 成功场景 +- ✅ 自动检测到 FFmpeg 未安装 +- ✅ 弹出安装引导弹窗 +- ✅ 点击"开始安装"后显示安装页面 +- ✅ 显示实时下载和安装进度 +- ✅ 安装完成后自动返回主页面 +- ✅ 状态栏显示"编码器"（绿色） +- ✅ 可以正常使用转换功能 + +### 失败场景处理 +- ❌ 网络连接失败：显示错误信息，提示检查网络 +- ❌ 下载失败：显示错误信息，提供重试选项 +- ❌ 解压失败：显示错误信息，提示手动安装 +- ❌ 权限不足：显示错误信息，提示以管理员身份运行 + +## 常见问题 + +### Q: 点击"稍后安装"后怎么办？ +A: 弹窗关闭，但状态栏仍显示"编码器未安装"。用户可以： +- 手动安装 FFmpeg 到系统 PATH +- 重启应用，会再次弹出安装引导 + +### Q: 安装失败怎么办？ +A: 应用会显示错误信息。用户可以： +1. 检查网络连接 +2. 点击重试 +3. 选择手动安装 FFmpeg + +### Q: 如何手动安装 FFmpeg？ +A: +- **macOS**: `brew install ffmpeg` +- **Windows**: 从 [ffmpeg.org](https://ffmpeg.org/download.html) 下载并添加到 PATH +- **Linux**: `sudo apt install ffmpeg` 或对应包管理器 + +### Q: 安装后在哪里？ +A: +- **macOS**: `~/Library/Application Support/FormatConverter/ffmpeg` +- **Windows**: `%LOCALAPPDATA%\FormatConverter\ffmpeg.exe` +- **Linux**: `~/.local/share/format-converter/ffmpeg` + +## 调试技巧 + +### 查看控制台日志 +```bash +# 开发模式下，控制台会输出详细日志 +npm run dev + +# 查看后端日志 +# 在终端中查看 Rust 输出 +``` + +### 手动触发安装 +在浏览器控制台中执行： +```javascript +// 显示安装引导 +document.getElementById('ffmpeg-install-guide').classList.add('active'); + +// 直接开始安装 +installFFmpeg(); +``` + +### 检查 FFmpeg 状态 +在浏览器控制台中执行： +```javascript +// 检查 FFmpeg 状态 +window.tauriInvoke('check_ffmpeg_status').then(console.log); + +// 获取 FFmpeg 版本 +// 返回: [installed: boolean, version: string | null] +``` + +## 测试清单 + +- [ ] 应用启动时自动检测 FFmpeg +- [ ] 未安装时弹出安装引导弹窗 +- [ ] 安装引导 UI 显示正常 +- [ ] 点击"开始安装"切换到安装页面 +- [ ] 显示实时下载进度 +- [ ] 显示解压和安装进度 +- [ ] 安装完成后返回主页面 +- [ ] 状态栏显示"编码器"（绿色） +- [ ] 可以正常选择和转换文件 +- [ ] 点击"稍后安装"可以关闭弹窗 +- [ ] 安装失败时显示错误信息 +- [ ] 重启应用后不再弹出安装引导（已安装） + +## 注意事项 + +1. **网络要求**: 自动安装需要网络连接，下载大小约 50-100 MB +2. **权限要求**: 某些系统可能需要管理员权限 +3. **磁盘空间**: 确保有足够的磁盘空间（至少 200 MB） +4. **防火墙**: 确保防火墙允许应用访问网络 +5. **代理设置**: 如果使用代理，可能需要配置系统代理 + +## 恢复测试环境 + +测试完成后，记得恢复 FFmpeg： + +```bash +# macOS/Linux +sudo mv /usr/local/bin/ffmpeg.backup /usr/local/bin/ffmpeg +sudo mv /usr/local/bin/ffprobe.backup /usr/local/bin/ffprobe + +# Windows +ren "C:\path\to\ffmpeg.exe.backup" "ffmpeg.exe" +ren "C:\path\to\ffprobe.exe.backup" "ffprobe.exe" +``` diff --git a/src/index.html b/src/index.html index 10c7bed..0911d2a 100644 --- a/src/index.html +++ b/src/index.html @@ -3,336 +3,338 @@ - 火炬格式转换器 - Format Converter 0.1.0 + 火炬格式转换器 - Format Converter 2.0.0 - + + + - -
- + +
+ +
- -
- -
正在分析文件...
-
生成缩略图中，请稍候
+ + -
- -
-
- - - +
+
+
+
+

拖入文件或点击选择

+

支持批量选择多个文件

+
-

拖入文件或点击选择

-

支持批量选择多个文件

-
- - -
-

支持的文件类型

-

mp4, avi, mkv, mov, webm, mp3, wav, flac, aac, ogg, jpg, png, webp, gif, bmp... 等 50+ 种格式互相转换

- - +
+

支持的文件类型

+

mp4, avi, mkv, mov, webm, mp3, wav, flac, aac, ogg, jpg, png, webp, gif, bmp... 等 50+ 种格式互相转换

-
- - -
-
- - - 检测编码器... - -
-
- - ©️ meshel.cn - +
+
+ + + 检测编码器... + +
+ ©️ meshel.cn
- +
-
-
📦
-

正在安装 FFmpeg

-

首次运行需要下载编码器组件

-
-
-
+
+
+
📦
+

正在安装 FFmpeg

+

首次运行需要下载编码器组件

+
+
+
+
+ 0%
- 0% +

准备下载...

-

准备下载...

- +
-
- -

转换设置

-
- +

转换设置

+
+
-
- -
- -
- + + +
+
- -