文档更新
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