Vue 3 FastAPI TypeScript

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

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

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

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

.
├── backend/ # Python FastAPI 后端应用
├── frontend/ # Vue 3 Vite 前端应用
└── run.py # 后端启动脚本

# 在 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 检查代码。

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