# 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设置页面
```