diff --git a/README.md b/README.md new file mode 100644 index 0000000..4c3551b --- /dev/null +++ b/README.md @@ -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 设置页面。支持亮色 / 暗色主题切换。 diff --git a/UI.md b/UI.md index e69de29..0acdcd4 100644 --- a/UI.md +++ b/UI.md @@ -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设置页面 +``` diff --git a/实现.md b/实现.md deleted file mode 100644 index e69de29..0000000