cloud370
c864ced4ea
- 更新应用标题为"账号管理系统" - 更新应用描述为中文说明 - 删除不需要的Next.js默认SVG图标文件 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
账户管理系统 (Accounts Manager Web)
一个基于 Next.js 15 和 React 19 构建的现代化账户管理系统，提供账户的批量管理、筛选、上传和统计功能。
✨ 主要功能
📊 统计面板
- 总账户数、活跃账户、异常账户统计
- 实时数据更新和可视化展示
🔍 智能筛选
- 多维度筛选：所有者ID、平台、状态
- 支持下拉选择和手动输入
- 实时搜索和筛选结果
📤 账户上传
- ---- 分割格式：
customId----数据内容 - 默认格式：一行一个账户ID
- 其他格式：支持制表符、逗号分隔和JSON格式
- 批量上传和单个添加功能
📋 账户管理
- 账户列表查看和详情展示
- 批量操作：删除、状态更新
- 账户详情编辑和数据修改
🚀 技术栈
- 框架: Next.js 15 + 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 (推荐)
安装依赖
pnpm install
开发模式
pnpm dev
构建生产版本
pnpm build
启动生产服务器
pnpm start
打开 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 快速构建
📚 相关文档
🛠️ 部署
生产环境部署
本系统支持灵活的部署方式，无需 nginx 即可在同一服务器上运行前后端服务。
环境配置
- 复制环境配置模板
cp .env.template .env.production
- 编辑生产环境配置
# .env.production
PORT=3000 # 前端服务端口
NEXT_PUBLIC_API_BASE_URL=http://服务器IP:3006 # 后端API地址（可选）
NODE_ENV=production
注意：
- 如果不设置
NEXT_PUBLIC_API_BASE_URL，系统会自动使用当前访问域名的 3006 端口 - 前后端部署在同一服务器时，可以不配置此项
部署步骤
- 构建项目
npm run build
- 启动生产服务器
# 使用默认端口 3000
npm run start
# 或使用环境变量指定端口
PORT=8080 npm run start
- 使用 PM2 管理进程（推荐）
# 安装 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: 推荐用于前端静态部署 部署链接
- Docker: 支持容器化部署
- 传统服务器: 支持直接在服务器上运行
查看 Next.js 部署文档 了解更多部署选项。