文档更新
This commit is contained in:
sansen
@@ -0,0 +1,90 @@
|
||||
# FFmpeg GUI
|
||||
|
||||
一个基于 FFmpeg 的桌面端视频处理工具，提供图形化界面进行视频重新封装、重新编码和字幕烧录。
|
||||
|
||||
## 技术栈
|
||||
|
||||
| 层 | 技术 |
|
||||
| --------- | --------------------------- |
|
||||
| 桌面框架 | [Wails v2](https://wails.io) |
|
||||
| 后端 | Go 1.26+ |
|
||||
| 前端 | Vue 3 + TypeScript + Vite |
|
||||
| 媒体引擎 | FFmpeg + FFprobe (内置) |
|
||||
|
||||
## 功能
|
||||
|
||||
- **重新封装** — 流复制模式快速切换容器格式（MP4 / MKV / MOV），不重新编码
|
||||
- **重新编码** — 调整编码器、质量（CRF / 码率）、分辨率、帧率、音频等参数
|
||||
- **字幕烧录** — 将内挂或外挂字幕（SRT / ASS / SSA / VTT）烧录到视频画面
|
||||
- **硬件加速** — 自动检测 NVIDIA NVENC、Intel QSV、AMD AMF 编码器及硬件加速方式
|
||||
- **任务管理** — 任务队列面板，实时显示编码进度、FPS、剩余时间，支持取消/移除
|
||||
|
||||
## 快速开始
|
||||
|
||||
### 环境要求
|
||||
|
||||
- [Go](https://go.dev/dl/) 1.26+
|
||||
- [Node.js](https://nodejs.org/) 18+
|
||||
- [Wails CLI](https://wails.io/docs/gettingstarted/installation) v2
|
||||
|
||||
```bash
|
||||
# 安装 Wails CLI
|
||||
go install github.com/wailsapp/wails/v2/cmd/wails@latest
|
||||
|
||||
# 启动开发模式（Go + 前端热更新）
|
||||
wails dev
|
||||
|
||||
# 生产构建
|
||||
wails build
|
||||
```
|
||||
|
||||
构建产物在 `build/bin/ffmpeg-gui.exe`。
|
||||
|
||||
### FFmpeg 二进制
|
||||
|
||||
项目 `build/bin/` 目录下内置了 Windows 版 FFmpeg。启动时优先加载内置版本，未找到时回退到系统 PATH。
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
ffmpeg-gui/
|
||||
├── main.go # 入口，嵌入前端 dist
|
||||
├── app.go # App 绑定：所有导出方法供前端调用
|
||||
├── wails.json # Wails 配置
|
||||
├── internal/
|
||||
│ ├── ffmpeg/ # FFmpeg 二进制检测、执行、进度解析、参数构建
|
||||
│ ├── task/ # 任务模型、任务管理器（队列 + 事件）
|
||||
│ ├── hwaccel/ # GPU 编码器 / 硬件加速检测
|
||||
│ ├── media/ # ffprobe JSON 解析 → 媒体信息
|
||||
│ └── platform/ # Windows 窗口边框修复
|
||||
└── frontend/
|
||||
└── src/
|
||||
├── api/wails.ts # Go ↔ 前端绑定 + 事件监听
|
||||
├── types/index.ts # TypeScript 类型（与 Go struct 对应）
|
||||
├── components/ # Header / Sidebar / TaskDrawer
|
||||
└── views/ # 功能页面
|
||||
```
|
||||
|
||||
## 开发指南
|
||||
|
||||
```bash
|
||||
# 仅前端开发（Vite 热更新 :5173）
|
||||
cd frontend && npm run dev
|
||||
|
||||
# 类型检查
|
||||
cd frontend && npm run build # vue-tsc --noEmit + vite build
|
||||
|
||||
# Go 代码检查
|
||||
go vet ./...
|
||||
```
|
||||
|
||||
### 架构要点
|
||||
|
||||
- **Go ↔ 前端通信**：`app.go` 中 `App` 结构体的所有导出方法自动绑定到 `window.go.main.App`，前端通过 `api/wails.ts` 封装调用
|
||||
- **事件驱动**：任务进度/日志通过 `runtime.EventsEmit` 推送到前端，`runtime.EventsOn` 监听
|
||||
- **进度解析**：FFmpeg 的 `\r` 分隔进度行由自定义 `bufio.Scanner` 解析，进度更新限流至 250ms 间隔
|
||||
- **任务 ID**：取 UUID 前 8 位，JSON 序列化作为前后端数据交换格式
|
||||
|
||||
## 视觉风格
|
||||
|
||||
Modern Flat / Card Based 设计语言，灵感来自 HandBrake + OpenList Desktop + 现代 IDE 设置页面。支持亮色 / 暗色主题切换。
|
||||
@@ -0,0 +1,255 @@
|
||||
# FFmpeg-GUI UI Layout Design
|
||||
|
||||
## 整体布局
|
||||
|
||||
```text
|
||||
┌──────────────────────────────────────────────────────┐
|
||||
│ FFmpeg-GUI ⚙ ◐ │
|
||||
│ │
|
||||
├───────────────┬──────────────────────────────────────┤
|
||||
│ │ │
|
||||
│ │ │
|
||||
│ 功能导航 │ 工作区 │
|
||||
│ │ │
|
||||
│ ┌───────────┐ │ ┌──────────────────────────────┐ │
|
||||
│ │重新封装 │ │ │ 输入文件 │ │
|
||||
│ └───────────┘ │ │ │ │
|
||||
│ │ │ video.mp4 [选择文件] │ │
|
||||
│ ┌───────────┐ │ └──────────────────────────────┘ │
|
||||
│ │重新编码 │ │ │
|
||||
│ └───────────┘ │ ┌──────────────────────────────┐ │
|
||||
│ │ │ 编码硬件 │ │
|
||||
│ ┌───────────┐ │ │ │ │
|
||||
│ │烧录字幕 │ │ │ NVIDIA NVENC RTX 4090 │ │
|
||||
│ └───────────┘ │ └──────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ ┌──────────────────────────────┐ │
|
||||
│ │ │ 详细参数 │ │
|
||||
│ │ │ │ │
|
||||
│ │ │ 编码器 HEVC │ │
|
||||
│ │ │ 质量 CQ 23 │ │
|
||||
│ │ │ Preset P6 │ │
|
||||
│ │ └──────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ ┌──────────────────────────────┐ │
|
||||
│ │ │ 输出位置 │ │
|
||||
│ │ │ D:/Output │ │
|
||||
│ │ └──────────────────────────────┘ │
|
||||
│ │ │
|
||||
│ │ [开始任务] │
|
||||
│ │ │
|
||||
├───────────────┴──────────────────────────────────────┤
|
||||
│ 任务进度 ▼ │
|
||||
├──────────────────────────────────────────────────────┤
|
||||
│ video.mp4 │
|
||||
│ HEVC NVENC │
|
||||
│ │
|
||||
│ ████████████████──────── 50% │
|
||||
│ │
|
||||
│ 速度: 123 FPS 剩余时间: 02:30 [停止] │
|
||||
└──────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 页面结构
|
||||
|
||||
|
||||
## 主页面
|
||||
|
||||
```text
|
||||
App
|
||||
|
||||
├── Header
|
||||
│
|
||||
│ ├── AppName
|
||||
│ │
|
||||
│ ├── SettingButton
|
||||
│ │
|
||||
│ └── ThemeToggle
|
||||
│
|
||||
│
|
||||
├── MainLayout
|
||||
│
|
||||
│ ├── Sidebar
|
||||
│ │
|
||||
│ │ ├── Remux
|
||||
│ │ ├── Encode
|
||||
│ │ └── Subtitle
|
||||
│ │
|
||||
│ │
|
||||
│ └── Workspace
|
||||
│
|
||||
│ ├── FileSelector
|
||||
│ │
|
||||
│ ├── HardwareSelector
|
||||
│ │
|
||||
│ ├── AdvancedOptions
|
||||
│ │
|
||||
│ ├── OutputSelector
|
||||
│ │
|
||||
│ └── StartButton
|
||||
│
|
||||
│
|
||||
└── TaskDrawer
|
||||
|
||||
├── TaskSummary
|
||||
│
|
||||
├── TaskProgress
|
||||
│
|
||||
├── TaskInfo
|
||||
│
|
||||
└── StopButton
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 设置页面
|
||||
|
||||
|
||||
```text
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ 设置 │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ 硬件检测 │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────────┐ │
|
||||
│ │ GPU │ │
|
||||
│ │ NVIDIA RTX 4090 │ │
|
||||
│ │ │ │
|
||||
│ │ 支持编码 │ │
|
||||
│ │ ✓ H264 NVENC │ │
|
||||
│ │ ✓ HEVC NVENC │ │
|
||||
│ │ ✓ AV1 NVENC │ │
|
||||
│ └──────────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ │
|
||||
│ 硬件优先级 │
|
||||
│ │
|
||||
│ NVIDIA GPU │
|
||||
│ Intel QSV │
|
||||
│ AMD AMF │
|
||||
│ CPU │
|
||||
│ │
|
||||
│ │
|
||||
│ 输出设置 │
|
||||
│ │
|
||||
│ 默认目录 │
|
||||
│ D:/Video │
|
||||
│ │
|
||||
│ 文件命名规则 │
|
||||
│ {name}_{codec} │
|
||||
│ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 组件设计
|
||||
|
||||
|
||||
## Sidebar
|
||||
|
||||
特点：
|
||||
|
||||
- 宽度固定
|
||||
- 当前选中高亮
|
||||
- 图标 + 文本
|
||||
|
||||
|
||||
```text
|
||||
┌────────────┐
|
||||
│ 重新转码 │
|
||||
│ │
|
||||
│ 重新封装 │
|
||||
│ │
|
||||
│ 烧录字幕 │
|
||||
│ │
|
||||
└────────────┘
|
||||
```
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 工作区 Card
|
||||
|
||||
所有功能参数使用 Card。
|
||||
|
||||
|
||||
```text
|
||||
┌─────────────────────┐
|
||||
│ 编码设置 │
|
||||
├─────────────────────┤
|
||||
│ 编码器 │
|
||||
│ HEVC NVENC │
|
||||
│ │
|
||||
│ 质量 │
|
||||
│ CQ 23 │
|
||||
└─────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 任务抽屉
|
||||
|
||||
|
||||
默认收起(点击应该是由下往上展开)：
|
||||
|
||||
```text
|
||||
┌──────────────────────┐
|
||||
│ 任务进度 ▲ │
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
|
||||
展开：
|
||||
|
||||
```text
|
||||
┌──────────────────────┐
|
||||
│ 当前任务 │
|
||||
├──────────────────────┤
|
||||
│ a.mp4 │
|
||||
│ ███████ 80% │
|
||||
│ FPS 120 │
|
||||
│ [停止] │
|
||||
├──────────────────────┤
|
||||
│ b.mp4 │
|
||||
│ ███ 20% │
|
||||
│ FPS 90 │
|
||||
│ [停止] │
|
||||
└──────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 视觉风格
|
||||
|
||||
## 核心关键词
|
||||
|
||||
```
|
||||
Modern Flat
|
||||
Card Based
|
||||
Desktop Application
|
||||
Low Density Shadow
|
||||
High Readability
|
||||
```
|
||||
|
||||
## 视觉规则
|
||||
|
||||
- 背景使用低饱和灰色
|
||||
- 卡片使用纯色背景
|
||||
- 圆角 12px
|
||||
- 控件高度 36~40px
|
||||
- 主按钮突出
|
||||
- 参数区域避免复杂表单堆叠
|
||||
|
||||
整体感觉：
|
||||
|
||||
```
|
||||
OpenList Desktop
|
||||
+
|
||||
HandBrake
|
||||
+
|
||||
现代IDE设置页面
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user