docs: 更新README.md以反映账户管理系统的实际功能
- 添加中文项目描述和功能介绍 - 详细说明技术栈：Next.js 15 + React 19 + TypeScript - 完善项目结构和组件架构说明 - 添加账户上传格式示例和使用指南 - 包含开发、构建和部署说明 - 链接到相关文档文件 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
143
README.md
143
README.md
@@ -1,36 +1,137 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
# 账户管理系统 (Accounts Manager Web)
|
||||
|
||||
## Getting Started
|
||||
一个基于 Next.js 15 和 React 19 构建的现代化账户管理系统，提供账户的批量管理、筛选、上传和统计功能。
|
||||
|
||||
First, run the development server:
|
||||
## ✨ 主要功能
|
||||
|
||||
### 📊 统计面板
|
||||
- 总账户数、活跃账户、异常账户统计
|
||||
- 实时数据更新和可视化展示
|
||||
|
||||
### 🔍 智能筛选
|
||||
- 多维度筛选：所有者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
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
pnpm install
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
### 开发模式
|
||||
```bash
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
### 构建生产版本
|
||||
```bash
|
||||
pnpm build
|
||||
```
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
### 启动生产服务器
|
||||
```bash
|
||||
pnpm start
|
||||
```
|
||||
|
||||
## Learn More
|
||||
打开 [http://localhost:3000](http://localhost:3000) 查看应用。
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
## 📁 项目结构
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
```
|
||||
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/ # 文档
|
||||
```
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
## 🎯 功能详解
|
||||
|
||||
## Deploy on Vercel
|
||||
### 账户上传格式
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
#### ---- 分割格式（推荐）
|
||||
```
|
||||
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
|
||||
```
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
#### 默认格式
|
||||
```
|
||||
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) 了解更多部署选项。
|
||||
|
||||
Reference in New Issue
Block a user