# 账户管理系统 (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) 了解更多部署选项。