diff --git a/frontend/README.md b/frontend/README.md index e215bc4..f697d3f 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -1,36 +1,72 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# ViGent2 Frontend -## Getting Started +ViGent2 的前端界面,采用 Next.js 14 + TailwindCSS 构建。 -First, run the development server: +## ✨ 核心功能 + +### 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 -# or -yarn dev -# or -pnpm dev -# or -bun dev +# 访问: http://localhost:3002 ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +### 目录结构 -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +``` +src/ +├── app/ +│ ├── page.tsx # 视频生成主页 +│ ├── publish/ # 发布管理页 +│ │ └── page.tsx +│ └── layout.tsx # 全局布局 (导航栏) +├── components/ # UI 组件 +│ ├── VideoUploader.tsx # 视频上传 +│ ├── StatusBadge.tsx # 状态徽章 +│ └── ... +└── lib/ # 工具函数 +``` -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. +## 🔌 后端对接 -## Learn More +- **Base URL**: `http://localhost:8006` +- **代理配置**: Next.js Rewrites (如需) 或直接 CORS。 -To learn more about Next.js, take a look at the following resources: +## 🎨 设计规范 -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +- **主色调**: 深紫/黑色系 (Dark Mode) +- **交互**: 悬停微动画 (Hover Effects) +- **响应式**: 适配桌面端大屏操作