cloud370
c9af343f8e
- 添加中文项目描述和功能介绍 - 详细说明技术栈：Next.js 15 + React 19 + TypeScript - 完善项目结构和组件架构说明 - 添加账户上传格式示例和使用指南 - 包含开发、构建和部署说明 - 链接到相关文档文件 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
138 lines
4.0 KiB
Markdown
138 lines
4.0 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) - 系统架构设计
|
||
|
||
## 🛠️ 部署
|
||
|
||
推荐使用 [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) 了解更多部署选项。
|