• 影响范围: 🟢 高 - 从零创建了一个完整的 Electron + Vue 3 + FFmpeg 视频处理桌面应用
• 核心变更:
  • ✨ 初始化项目配置文件（package.json、vite.config.js、electron-vite.config.js）
  • 🎬 实现 Electron 主进程，集成 FFmpeg 视频转换和剪辑功能
  • 🖥️ 构建 Vue 3 前端界面，包含首页、格式转换和视频剪辑三个页面
  • 🔗 建立 IPC 通信机制，实现渲染进程与主进程的交互

graph TD
    subgraph "渲染进程 - Vue 3 前端"
        A["Home.vue<br/>首页"] --> B["Convert.vue<br/>格式转换"]
        A --> C["Clip.vue<br/>视频剪辑"]
        
        B --> D["selectVideoFiles()<br/>选择视频文件"]
        B --> E["startConvert()<br/>发起转换请求"]
        
        C --> F["selectVideoFiles()<br/>选择视频文件"]
        C --> G["startClip()<br/>发起剪辑请求"]
    end
    
    subgraph "Electron 预加载层"
        H["preload.js<br/>contextBridge"]
    end
    
    subgraph "主进程 - Electron Main"
        I["main.js<br/>createWindow()<br/>创建窗口"]
        
        J["ipcMain.on<br/>'select-video-files'<br/>文件选择对话框"]
        K["ipcMain.on<br/>'convert-video'<br/>视频转换处理"]
        L["ipcMain.on<br/>'clip-video'<br/>视频剪辑处理"]
        
        K --> M["fluent-ffmpeg<br/>格式转换"]
        L --> N["fluent-ffmpeg<br/>视频剪辑"]
    end
    
    subgraph "外部依赖"
        O["FFmpeg<br/>/opt/homebrew/bin/ffmpeg"]
    end
    
    D -.->|"IPC send"| J
    E -.->|"IPC send"| K
    F -.->|"IPC send"| J
    G -.->|"IPC send"| L
    
    M -.-> O
    N -.-> O
    
    H -.->|"安全 API 暴露"| A
    H -.->|"安全 API 暴露"| B
    H -.->|"安全 API 暴露"| C

定义了项目依赖和构建脚本：

脚本命令:

"dev": "vite"
"build": "vite build"
"electron:dev": "concurrently \"vite\" \"electron electron/main.js\""
"electron:build": "vite build && electron-builder"

• 配置 Vue 插件和路径别名 @ → /src

• 配置 Electron 三进程构建：
  • main: 输出到 dist/electron/main，CJS 格式
  • preload: 输出到 dist/electron/preload，CJS 格式
  • renderer: 输出到 dist/electron/renderer，支持 Vue 和路径别名

标准忽略规则，包括：

• 依赖目录 (node_modules)
• 构建产物 (dist, out, build)
• 日志文件 (*.log)
• 环境变量 (.env*)
• 编辑器配置 (.vscode, .idea)

核心功能模块:

视频转换逻辑 (convert-video):

// 支持的参数
{
  files: [{ path, name }],      // 输入文件列表
  outputFormat: 'mp4',          // 输出格式
  videoCodec: 'libx264',        // 视频编码器
  videoBitrate: '1000k',        // 比特率
  resolution: '1920x1080',     // 分辨率
  frameRate: 30,                // 帧率
  outputPath: '/path/to/output' // 输出目录
}

视频剪辑逻辑 (clip-video):

// 支持的参数
{
  files: [{ path, name }],      // 输入文件列表
  startTime: '00:00:00',       // 开始时间 (HH:MM:SS)
  endTime: '00:00:30',         // 结束时间
  outputFormat: 'mp4',          // 输出格式
  outputPath: '/path/to/output' // 输出目录
}

⚠️ 注意: FFmpeg 路径硬编码为 /opt/homebrew/bin/ffmpeg（macOS Homebrew 安装路径）

• 使用 contextBridge 暴露安全的 electronAPI 到渲染进程
• 暴露 window.require 以便渲染进程直接使用 Node.js 模块

应用入口，集成：

• Vue 3
• Pinia 状态管理
• Vue Router
• Element Plus UI 组件库

主应用布局：

• 顶部导航栏（首页、格式转换、视频剪辑）
• 主内容区域（<router-view>）
• 底部页脚

路由配置：

首页展示：

• 欢迎卡片
• 功能介绍卡片（视频格式转换、视频剪辑）
• 快速导航按钮

表单参数:

IPC 通信流程:

1. 用户点击"选择视频文件" → 发送 select-video-files
2. 主进程打开文件对话框 → 返回 select-video-files-result
3. 用户设置参数并点击"开始转换" → 发送 convert-video
4. 主进程执行转换 → 实时推送 convert-progress
5. 转换完成 → 推送 convert-complete

表单参数:

IPC 通信流程:

1. 用户点击"选择视频文件" → 发送 select-video-files
2. 主进程打开文件对话框 → 返回 select-video-files-result
3. 用户设置剪辑时间和输出路径 → 点击"开始剪辑" → 发送 clip-video
4. 主进程执行剪辑 → 实时推送 clip-progress
5. 剪辑完成 → 推送 clip-complete

1. FFmpeg 路径硬编码

   • 位置: electron/main.js 第 89、170 行
   • 问题: FFmpeg 路径固定为 /opt/homebrew/bin/ffmpeg，仅适用于 macOS Homebrew 环境
   • 建议: 应该动态检测 FFmpeg 路径或提供配置选项

2. 安全性问题

   • 位置: electron/main.js 第 21-22 行
   • 问题: nodeIntegration: true 和 contextIsolation: false 存在安全风险
   • 建议: 应启用 contextIsolation，禁用 nodeIntegration，通过 preload 脚本暴露必要 API

3. 错误处理不完善

   • 问题: FFmpeg 转换/剪辑失败时仅输出日志，未给用户详细错误信息
   • 建议: 增强错误处理，提供更友好的错误提示

• 操作系统: 当前配置主要针对 macOS（FFmpeg 路径），需要适配 Windows 和 Linux
• Node.js 版本: 需要支持 ES Modules ("type": "module")
• Electron 版本: ^41.2.0

这是一个从零开始创建的 FFmpeg GUI 视频处理桌面应用，采用现代化的技术栈（Electron + Vue 3 + Vite），实现了视频格式转换和视频剪辑两大核心功能。项目结构清晰，前后端分离，通过 IPC 机制实现通信。但存在 FFmpeg 路径硬编码、安全性配置不当等问题，需要在后续版本中优化。