直播后台管理系统

一个功能强大的直播平台后台管理系统，基于 Next.js 14 构建，配备现代化的 UI 和完整的管理功能。

功能特性

核心功能

• 📊 仪表板 - 实时数据统计和可视化图表
• 🎥 直播间管理 - 创建、编辑、删除和监控直播间
• 👥 主播管理 - 管理主播信息、审核和评分
• 👤 用户管理 - 用户信息管理和权限控制
• 📈 数据统计 - 详细的数据分析和报表
• 💬 消息管理 - 平台消息和通知管理
• 💰 财务管理 - 收入统计和财务报表
• ⚙️ 系统设置 - 系统配置和参数管理

技术特性

• ⚡️ Next.js 14 - 使用最新的 App Router
• 🎨 Tailwind CSS - 现代化的样式设计
• 📊 Recharts - 数据可视化图表
• 🔒 API Routes - 内置 API 接口
• 📱 响应式设计 - 适配所有设备
• 🎯 TypeScript - 类型安全

快速开始

环境要求

• Node.js 18.0 或更高版本
• npm 或 yarn 或 pnpm

安装步骤

1. 克隆项目 ```bash git clone cd 测试 ```

2. 安装依赖 ```bash npm install

或

yarn install

或

pnpm install ```

3. 配置环境变量

复制 .env.example 文件为 .env.local 并配置相关参数： ```bash cp .env.example .env.local ```

然后编辑 .env.local 文件，填入实际的配置信息。

4. 启动开发服务器 ```bash npm run dev

或

yarn dev

或

pnpm dev ```

5. 访问应用

打开浏览器访问 http://localhost:3000

部署到 Vercel

方式一：通过 Vercel CLI

1. 安装 Vercel CLI ```bash npm install -g vercel ```

2. 登录 Vercel ```bash vercel login ```

3. 部署项目 ```bash vercel ```

首次部署时，Vercel 会询问一些配置问题：

• Set up and deploy? → Yes
• Which scope? → 选择你的账户
• Link to existing project? → No
• What's your project's name? → live-streaming-admin (或自定义)
• In which directory is your code located? → ./
• Want to override the settings? → No

4. 部署到生产环境 ```bash vercel --prod ```

方式二：通过 Vercel 网站

1. 访问 Vercel
2. 使用 GitHub/GitLab/Bitbucket 账号登录
3. 点击 "Import Project"
4. 导入你的 Git 仓库
5. Vercel 会自动检测 Next.js 项目并配置构建设置
6. 点击 "Deploy" 开始部署

环境变量配置

在 Vercel 项目设置中添加环境变量：

1. 进入项目设置 → Environment Variables
2. 添加以下环境变量（根据 .env.example 文件）：
   • NEXT_PUBLIC_APP_NAME
   • NEXT_PUBLIC_API_URL
   • DATABASE_URL
   • JWT_SECRET
   • 等等...

自定义域名

1. 在 Vercel 项目设置中选择 "Domains"
2. 添加你的自定义域名
3. 根据提示配置 DNS 记录

项目结构

``` 测试/ ├── app/ # Next.js App Router │ ├── api/ # API 路由 │ │ ├── auth/ # 认证接口 │ │ ├── rooms/ # 直播间接口 │ │ └── streamers/ # 主播接口 │ ├── analytics/ # 数据统计页面 │ ├── finance/ # 财务管理页面 │ ├── messages/ # 消息管理页面 │ ├── rooms/ # 直播间管理页面 │ ├── settings/ # 系统设置页面 │ ├── streamers/ # 主播管理页面 │ ├── users/ # 用户管理页面 │ ├── globals.css # 全局样式 │ ├── layout.tsx # 根布局 │ └── page.tsx # 首页（仪表板） ├── components/ # React 组件 │ ├── Dashboard.tsx # 仪表板组件 │ ├── Header.tsx # 顶部导航 │ └── Sidebar.tsx # 侧边栏导航 ├── public/ # 静态资源 ├── .env.example # 环境变量示例 ├── .eslintrc.json # ESLint 配置 ├── .gitignore # Git 忽略文件 ├── next.config.js # Next.js 配置 ├── package.json # 依赖配置 ├── postcss.config.js # PostCSS 配置 ├── tailwind.config.js # Tailwind CSS 配置 ├── tsconfig.json # TypeScript 配置 ├── vercel.json # Vercel 部署配置 └── README.md # 项目说明 ```

开发指南

添加新页面

1. 在 app/ 目录下创建新文件夹
2. 创建 page.tsx 文件
3. 在 components/Sidebar.tsx 中添加导航链接

添加 API 接口

1. 在 app/api/ 目录下创建路由文件夹
2. 创建 route.ts 文件
3. 实现 GET/POST/PUT/DELETE 等方法

自定义样式

• 全局样式：编辑 app/globals.css
• Tailwind 配置：编辑 tailwind.config.js
• 组件样式：使用 Tailwind CSS 类名

技术栈

• 前端框架: Next.js 14 (App Router)
• 开发语言: TypeScript
• 样式方案: Tailwind CSS
• 图标库: React Icons
• 图表库: Recharts
• 状态管理: Zustand (可选)
• HTTP 客户端: Axios
• 日期处理: date-fns

浏览器支持

• Chrome (最新版)
• Firefox (最新版)
• Safari (最新版)
• Edge (最新版)

注意事项

⚠️ 安全提示：

• 请勿将 .env.local 文件提交到 Git 仓库
• 生产环境请使用强密码和安全的 JWT Secret
• 建议启用 HTTPS
• 定期更新依赖包以修复安全漏洞

⚠️ 性能优化：

• 使用 Next.js 的图片优化功能
• 启用缓存策略
• 考虑使用 CDN 加速静态资源

常见问题

1. 端口被占用

如果 3000 端口被占用，可以指定其他端口： ```bash PORT=3001 npm run dev ```

2. 依赖安装失败

尝试清除缓存后重新安装： ```bash rm -rf node_modules package-lock.json npm install ```

3. 构建失败

检查 Node.js 版本是否满足要求（18.0+）： ```bash node -v ```

后续开发计划

• 完善用户认证系统
• 集成真实的数据库（PostgreSQL/MongoDB）
• 添加实时通知功能
• 实现文件上传功能
• 添加更多数据可视化图表
• 实现权限管理系统
• 添加单元测试和 E2E 测试
• 多语言支持

贡献指南

欢迎提交 Issue 和 Pull Request！

许可证

MIT License

联系方式

如有问题，请联系：admin@example.com