cloud370
2e79fcfeb0
- 添加环境变量支持，可通过 NEXT_PUBLIC_API_BASE_URL 配置后端地址 - 实现智能地址获取：无配置时自动使用当前域名+3006端口 - 添加 .env.template 模板文件，方便部署时配置 - 更新 package.json 脚本支持通过 PORT 环境变量配置前端端口 - 修改 .gitignore 允许模板文件提交但保护敏感环境文件 🤖 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 快速构建
📚 相关文档
🛠️ 部署
推荐使用 Vercel Platform 部署 Next.js 应用。
查看 Next.js 部署文档 了解更多部署选项。