ViGent2 Frontend
ViGent2 的前端界面，采用 Next.js 14 + TailwindCSS 构建。
✨ 核心功能
1. 视频生成 (/)
- 素材管理: 拖拽上传人物视频，实时预览。
- 文案配音: 集成 EdgeTTS，支持多音色选择 (云溪 / 晓晓)。
- 进度追踪: 实时显示视频生成进度 (10% -> 100%)。
- 结果预览: 生成完成后直接播放下载。
2. 全自动发布 (/publish) [Day 7 新增]
- 多平台管理: 统一管理 B站、抖音、小红书账号状态。
- 扫码登录:
- 集成后端 Playwright 生成的 QR Code。
- 实时检测扫码状态 (Wait/Success)。
- Cookie 自动保存与状态同步。
- 发布配置: 设置视频标题、标签、简介。
- 定时任务: 支持 "立即发布" 或 "定时发布"。
3. 声音克隆 [Day 13 新增]
- TTS 模式选择: EdgeTTS (预设音色) / 声音克隆 (自定义音色) 切换。
- 参考音频管理: 上传/列表/删除参考音频 (3-20秒 WAV)。
- 一键克隆: 选择参考音频后自动调用 Qwen3-TTS 服务。
🛠️ 技术栈
- 框架: Next.js 14 (App Router)
- 样式: TailwindCSS
- 图标: Lucide React
- 组件: 自定义现代化组件 (Glassmorphism 风格)
- API: Fetch API (对接后端 FastAPI :8006)
🚀 开发指南
安装依赖
npm install
启动开发服务器
默认运行在 3002 端口 (通过 package.json 配置):
npm run dev
# 访问: http://localhost:3002
目录结构
src/
├── app/
│ ├── page.tsx # 视频生成主页
│ ├── publish/ # 发布管理页
│ │ └── page.tsx
│ └── layout.tsx # 全局布局 (导航栏)
├── components/ # UI 组件
│ ├── VideoUploader.tsx # 视频上传
│ ├── StatusBadge.tsx # 状态徽章
│ └── ...
└── lib/ # 工具函数
🔌 后端对接
- Base URL:
http://localhost:8006 - 代理配置: Next.js Rewrites (如需) 或直接 CORS。
🎨 设计规范
- 主色调: 深紫/黑色系 (Dark Mode)
- 交互: 悬停微动画 (Hover Effects)
- 响应式: 适配桌面端大屏操作