Video Editing Agent Workspace

一个基于 AI 的视频剪辑工作空间应用，采用类似 Figma 的布局设计，集成了 AI 助手来辅助视频编辑流程。

项目概述

这是一个视频剪辑 Agent 工作空间项目，旨在为视频创作者提供一个智能化、可视化的编辑环境。应用采用三栏布局设计，整合了素材管理、编辑区域和 AI 助手，提供流畅的视频创作体验。

核心功能

1. 资产管理系统（左侧边栏）

左侧边栏提供文件夹式的资产管理界面，支持以下资产类型：

• Prompts（提示词）: 存储和管理 AI 生成视频的提示词
• Images（图片）: 管理项目中使用的图片素材
• Videos（视频）: 管理视频片段和素材
• Audio（音频）: 管理音频文件和音效
• BGM（背景音乐）: 专门管理背景音乐文件
• Timeline（时间轴）: 保存的时间轴配置

特性：

• 文件夹展开/折叠功能
• 显示每个资产类型的文件数量
• 平滑的动画过渡效果
• 支持选中状态高亮

2. 主编辑区域（中间内容区）

根据左侧选择的资产类型，动态展示不同的编辑面板：

• PromptPanel: 提示词编辑和管理
• ImagePanel: 图片预览和编辑
• VideoPanel: 视频预览和剪辑
• AudioPanel: 音频波形显示和编辑
• BgmPanel: 背景音乐选择和调整
• TimelinePanel: 视频时间轴编辑器

特性：

• 响应式内容切换
• 专业的编辑工具集
• 实时预览功能

3. AI 助手（右侧聊天栏）

智能 AI 助手提供视频编辑建议和自动化操作：

功能：

• 实时对话交互
• 视频编辑建议
• 自动化任务执行
• 智能素材推荐

特性：

• 美观的聊天界面
• 消息时间戳
• 输入框实时验证
• 平滑的消息动画

技术栈

前端框架

• Next.js 15.5.4: React 框架，提供 App Router 和服务端渲染
• React 19: 最新的 React 版本
• TypeScript: 类型安全的开发体验

UI/UX

• Tailwind CSS v4: 现代化的 CSS 框架
• Framer Motion: 流畅的动画效果

视频处理

• Remotion: 程序化视频创作
• @remotion/player: 视频播放器组件