cloud370
fc6e75f9fa
- 添加详细的生产环境部署指南 - 包含环境配置模板和部署步骤说明 - 添加PM2进程管理和部署架构图 - 说明环境变量配置和智能地址获取机制 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
214 lines
5.6 KiB
Markdown
214 lines
5.6 KiB
Markdown
# 账户管理系统 (Accounts Manager Web)
|
||
|
||
一个基于 Next.js 15 和 React 19 构建的现代化账户管理系统，提供账户的批量管理、筛选、上传和统计功能。
|
||
|
||
## ✨ 主要功能
|
||
|
||
### 📊 统计面板
|
||
- 总账户数、活跃账户、异常账户统计
|
||
- 实时数据更新和可视化展示
|
||
|
||
### 🔍 智能筛选
|
||
- 多维度筛选：所有者ID、平台、状态
|
||
- 支持下拉选择和手动输入
|
||
- 实时搜索和筛选结果
|
||
|
||
### 📤 账户上传
|
||
- **---- 分割格式**：`customId----数据内容`
|
||
- **默认格式**：一行一个账户ID
|
||
- **其他格式**：支持制表符、逗号分隔和JSON格式
|
||
- 批量上传和单个添加功能
|
||
|
||
### 📋 账户管理
|
||
- 账户列表查看和详情展示
|
||
- 批量操作：删除、状态更新
|
||
- 账户详情编辑和数据修改
|
||
|
||
## 🚀 技术栈
|
||
|
||
- **框架**: [Next.js 15](https://nextjs.org) + React 19
|
||
- **构建工具**: Turbopack
|
||
- **样式**: Tailwind CSS 4 + TW Animate CSS
|
||
- **UI组件**: Radix UI + Shadcn/ui
|
||
- **主题**: next-themes 深色/浅色模式
|
||
- **图标**: Lucide React
|
||
- **通知**: Sonner
|
||
- **类型**: TypeScript 5
|
||
|
||
## 📦 开始使用
|
||
|
||
### 环境要求
|
||
- Node.js 18+
|
||
- pnpm (推荐)
|
||
|
||
### 安装依赖
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
### 开发模式
|
||
```bash
|
||
pnpm dev
|
||
```
|
||
|
||
### 构建生产版本
|
||
```bash
|
||
pnpm build
|
||
```
|
||
|
||
### 启动生产服务器
|
||
```bash
|
||
pnpm start
|
||
```
|
||
|
||
打开 [http://localhost:3000](http://localhost:3000) 查看应用。
|
||
|
||
## 📁 项目结构
|
||
|
||
```
|
||
accounts-manager-web/
|
||
├── app/ # Next.js App Router
|
||
│ ├── layout.tsx # 根布局
|
||
│ ├── page.tsx # 主页面
|
||
│ └── globals.css # 全局样式
|
||
├── components/ # 组件库
|
||
│ ├── accounts/ # 账户相关组件
|
||
│ │ ├── account-table.tsx # 账户表格
|
||
│ │ ├── account-upload.tsx # 账户上传
|
||
│ │ ├── account-filters.tsx # 筛选器
|
||
│ │ ├── batch-operations.tsx # 批量操作
|
||
│ │ ├── stats-cards.tsx # 统计卡片
|
||
│ │ └── account-details.tsx # 账户详情
|
||
│ ├── shared/ # 共享组件
|
||
│ │ ├── platform-selector.tsx # 平台选择器
|
||
│ │ ├── status-selector.tsx # 状态选择器
|
||
│ │ └── owner-selector.tsx # 所有者选择器
|
||
│ └── ui/ # UI基础组件
|
||
├── lib/ # 工具库
|
||
│ ├── api.ts # API 接口
|
||
│ ├── types.ts # 类型定义
|
||
│ ├── utils.ts # 工具函数
|
||
│ └── hooks/ # 自定义 Hooks
|
||
└── docs/ # 文档
|
||
```
|
||
|
||
## 🎯 功能详解
|
||
|
||
### 账户上传格式
|
||
|
||
#### ---- 分割格式（推荐）
|
||
```
|
||
user1@gmail.com----password123----cookie=abc123----token=xyz789
|
||
user2@gmail.com----{"password":"456789","token":"fb_token"}
|
||
user3@twitter.com----oauth_token----oauth_secret----user_data
|
||
```
|
||
|
||
#### 默认格式
|
||
```
|
||
user1@gmail.com
|
||
user2@facebook.com
|
||
simple_username
|
||
```
|
||
|
||
### 数据源集成
|
||
- 所有者ID：从后端自动获取现有列表
|
||
- 平台选择：动态获取平台类型
|
||
- 状态选择：智能状态管理
|
||
- 支持手动输入自定义值
|
||
|
||
## 🔧 开发特性
|
||
|
||
- **类型安全**：完整的 TypeScript 类型定义
|
||
- **组件化**：模块化组件架构，易于维护
|
||
- **响应式**：完美适配桌面和移动设备
|
||
- **主题支持**：内置深色/浅色模式切换
|
||
- **性能优化**：使用 Turbopack 快速构建
|
||
|
||
## 📚 相关文档
|
||
|
||
- [功能更新说明](./FEATURES.md) - 详细功能介绍
|
||
- [API文档](./docs/API文档.md) - 后端接口文档
|
||
- [后端设计](./docs/后端设计.md) - 系统架构设计
|
||
|
||
## 🛠️ 部署
|
||
|
||
### 生产环境部署
|
||
|
||
本系统支持灵活的部署方式，无需 nginx 即可在同一服务器上运行前后端服务。
|
||
|
||
#### 环境配置
|
||
|
||
1. **复制环境配置模板**
|
||
```bash
|
||
cp .env.template .env.production
|
||
```
|
||
|
||
2. **编辑生产环境配置**
|
||
```bash
|
||
# .env.production
|
||
PORT=3000 # 前端服务端口
|
||
NEXT_PUBLIC_API_BASE_URL=http://服务器IP:3006 # 后端API地址（可选）
|
||
NODE_ENV=production
|
||
```
|
||
|
||
**注意**：
|
||
- 如果不设置 `NEXT_PUBLIC_API_BASE_URL`，系统会自动使用当前访问域名的 3006 端口
|
||
- 前后端部署在同一服务器时，可以不配置此项
|
||
|
||
#### 部署步骤
|
||
|
||
1. **构建项目**
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
2. **启动生产服务器**
|
||
```bash
|
||
# 使用默认端口 3000
|
||
npm run start
|
||
|
||
# 或使用环境变量指定端口
|
||
PORT=8080 npm run start
|
||
```
|
||
|
||
3. **使用 PM2 管理进程（推荐）**
|
||
```bash
|
||
# 安装 PM2
|
||
npm install -g pm2
|
||
|
||
# 启动应用
|
||
pm2 start npm --name "accounts-manager" -- run start
|
||
|
||
# 保存 PM2 配置
|
||
pm2 save
|
||
|
||
# 设置开机自启
|
||
pm2 startup
|
||
```
|
||
|
||
#### 部署架构
|
||
|
||
```
|
||
服务器 (IP: xxx.xxx.xxx.xxx)
|
||
├── 前端服务: http://xxx.xxx.xxx.xxx:3000
|
||
└── 后端API: http://xxx.xxx.xxx.xxx:3006
|
||
```
|
||
|
||
用户访问 `http://服务器IP:3000` 即可使用完整功能。
|
||
|
||
#### 环境变量说明
|
||
|
||
| 变量名 | 说明 | 默认值 | 必填 |
|
||
|--------|------|--------|------|
|
||
| `PORT` | 前端服务端口 | 3000 | 否 |
|
||
| `NEXT_PUBLIC_API_BASE_URL` | 后端API地址 | 自动获取当前域名:3006 | 否 |
|
||
| `NODE_ENV` | 运行环境 | development | 否 |
|
||
|
||
#### 其他部署选项
|
||
|
||
- **Vercel**: 推荐用于前端静态部署 [部署链接](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
|
||
- **Docker**: 支持容器化部署
|
||
- **传统服务器**: 支持直接在服务器上运行
|
||
|
||
查看 [Next.js 部署文档](https://nextjs.org/docs/app/building-your-application/deploying) 了解更多部署选项。
|