From c9af343f8eac504556fdcd173e20dd762ef0a100 Mon Sep 17 00:00:00 2001 From: cloud370 Date: Tue, 23 Sep 2025 03:37:14 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E6=9B=B4=E6=96=B0README.md=E4=BB=A5?= =?UTF-8?q?=E5=8F=8D=E6=98=A0=E8=B4=A6=E6=88=B7=E7=AE=A1=E7=90=86=E7=B3=BB?= =?UTF-8?q?=E7=BB=9F=E7=9A=84=E5=AE=9E=E9=99=85=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 添加中文项目描述和功能介绍 - 详细说明技术栈：Next.js 15 + React 19 + TypeScript - 完善项目结构和组件架构说明 - 添加账户上传格式示例和使用指南 - 包含开发、构建和部署说明 - 链接到相关文档文件 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- README.md | 143 ++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 122 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index e215bc4..0277492 100644 --- a/README.md +++ b/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) 了解更多部署选项。