# 账户管理系统 (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) - 系统架构设计

## 🛠️ 部署

推荐使用 [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) 部署 Next.js 应用。

查看 [Next.js 部署文档](https://nextjs.org/docs/app/building-your-application/deploying) 了解更多部署选项。