FFmpeg UI

本项目是一个基于 Web 的 FFmpeg 可视化操作界面，旨在提供一个现代、易用、响应式的界面来执行常见的音视频处理任务。它采用前后端分离架构，并支持打包为原生安卓应用。

✨ 功能特性

• 用户认证: 安全的注册和登录系统。
• 文件管理: 支持拖拽上传、文件列表管理和下载。
• 参数化处理: 提供丰富的选项来定制 FFmpeg 命令，如裁剪、编解码器选择、比特率、分辨率调整等。
• 实时任务监控: 通过 WebSocket 实时更新处理进度，支持多任务排队。
• 任务历史: 查看已完成或失败的任务，并获取详细日志。
• 跨平台支持: Web 端应用，并可通过 Capacitor 打包为安卓原生应用。

🚀 技术栈

前端 (Frontend)

• Vue 3 (使用组合式 API)
• Vite
• TypeScript
• Pinia (状态管理)
• Ant Design Vue (UI 组件库)
• Capacitor (原生应用打包)

后端 (Backend)

• Python 3.11+
• FastAPI
• SQLAlchemy (ORM)
• Pydantic (数据验证)
• SlowAPI (API 速率限制)
• Uvicorn & uv

📂 项目结构

.
├── backend/
│   └── app/     # Python FastAPI 后端应用（包含唯一入口 main.py）
└── frontend/    # Vue 3 Vite 前端应用

目录职责

目录	职责	说明
backend/app/	FastAPI 后端	路由、模型、业务逻辑、唯一入口
frontend/	Vue 3 前端	Web 界面

启动方式

# 从 backend/ 目录运行（推荐）
cd backend && uv run python -m app.main

# 或使用 uv 运行
cd backend && uv run -m uvicorn app.main:app --reload

📦 生产构建

前端

# 在 frontend/ 目录下运行
npm run build

编译后的静态文件将位于 frontend/dist/ 目录。

📱 打包安卓应用

1. 构建前端静态文件:

   # 在 frontend/ 目录下运行
   npm run build

2. 添加并同步 Android 平台 (首次运行时需要 add):

   # 在 frontend/ 目录下运行
   npx cap add android
   npx cap sync android

3. 使用 Android Studio 打开并构建:

   • 打开 Android Studio。
   • 选择 "Open an existing project"。
   • 导航并选择项目的 frontend/android 目录。
   • 等待 Gradle 同步完成后，通过菜单 "Build" -> "Build Bundle(s) / APK(s)" -> "Build APK(s)" 来生成 APK 文件。

📜 可用脚本 (前端)

在 frontend/ 目录下：

• npm run dev: 启动开发服务器。
• npm run build: 为生产环境构建应用。
• npm run lint: 使用 ESLint 检查代码。

💡 推荐的 IDE 设置

• VSCode
• Volar (官方 Vue 插件)
• Python (Microsoft) (官方 Python 插件)