# ViGent2 Frontend

ViGent2 的前端界面，采用 Next.js 14 + TailwindCSS 构建。

## ✨ 核心功能

### 1. 视频生成 (`/`)
- **素材管理**: 拖拽上传人物视频，实时预览。
- **文案配音**: 集成 EdgeTTS，支持多音色选择 (云溪 / 晓晓)。
- **进度追踪**: 实时显示视频生成进度 (10% -> 100%)。
- **结果预览**: 生成完成后直接播放下载。

### 2. 全自动发布 (`/publish`) [Day 7 新增]
- **多平台管理**: 统一管理 B站、抖音、小红书账号状态。
- **扫码登录**: 
  - 集成后端 Playwright 生成的 QR Code。
  - 实时检测扫码状态 (Wait/Success)。
  - Cookie 自动保存与状态同步。
- **发布配置**: 设置视频标题、标签、简介。
- **定时任务**: 支持 "立即发布" 或 "定时发布"。

## 🛠️ 技术栈

- **框架**: Next.js 14 (App Router)
- **样式**: TailwindCSS
- **图标**: Lucide React
- **组件**: 自定义现代化组件 (Glassmorphism 风格)
- **API**: Fetch API (对接后端 FastAPI :8006)

## 🚀 开发指南

### 安装依赖

```bash
npm install
```

### 启动开发服务器

默认运行在 **3002** 端口 (通过 `package.json` 配置):

```bash
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)
- **响应式**: 适配桌面端大屏操作