Files
accounts-manager-web/FEATURES.md
Your Name 0b95ca36f1 Initial project setup with Next.js accounts manager
- Set up Next.js project structure
- Added UI components and styling
- Configured package dependencies
- Added feature documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-23 01:40:14 +08:00

120 lines
4.3 KiB
Markdown
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 账户管理系统 - 更新说明
## 🚀 新增功能
### 1. 账户上传功能 📤
#### ---- 分割格式(推荐)
```
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
my_account_id
```
**格式说明:**
- **---- 分割格式**: `customId----纯数据内容`
- customId: 唯一标识符(第一个----之前)
- 数据内容: 后面所有内容都作为纯数据(可包含多个----
- **默认格式**: 整行既作为customId也作为data
- **平台和状态**: 在界面上方外部设置,应用到所有上传的账户
**特点:**
- 支持 `----` 分割格式:只在第一个 `----` 处分割,后面的所有内容都作为数据
- 支持默认格式一行一个ID整行既作为customId也作为data
- 第一个字段为唯一IDcustomId
- 数据部分可以包含任意格式和多个 `----` 分隔符
- 平台和状态统一在外部设置
#### 其他支持格式
- **制表符分隔**`platform customId data status`
- **逗号分隔**`platform,customId,data,status`
- **JSON格式**`{"platform":"google","customId":"user@gmail.com","data":"..."}`
### 2. 智能数据源集成 🧠
- **所有者ID**:从后端数据自动获取现有所有者列表,支持下拉选择或手动输入
- **平台选择**:从后端数据自动获取现有平台列表,支持下拉选择或手动输入 ✨
- **状态选择**:从后端数据自动获取现有状态类型,支持下拉选择或手动输入
- **外部统一设置**:平台和状态在界面外部统一设置,应用到所有账户 ✨
- **灵活输入**:所有选择器都支持手动输入自定义值
### 3. 界面优化 ✨
- **三列布局**所有者ID、平台、状态并排显示
- **响应式布局**:修复超出背景框问题,使用更大的对话框
- **滚动支持**:内容区域支持滚动,避免内容被截断
- **纯数据输入**:输入框内只需要填写纯粹的账户数据
### 4. 组件架构 🏗️
```
components/accounts/
├── stats-cards.tsx # 统计卡片
├── account-filters.tsx # 筛选器
├── batch-operations.tsx # 批量操作
├── account-upload.tsx # 账户上传 ✨
├── account-table.tsx # 账户表格
├── account-details.tsx # 账户详情/编辑
└── index.ts # 导出文件
```
## 🎯 使用方法
### 上传账户
1. 点击页面右上角的"上传账户"按钮
2. 选择或输入所有者ID
3. 设置平台(应用到所有账户)
4. 设置默认状态(应用到所有账户)
5. 选择上传方式:
- **批量上传**:粘贴格式化的账户数据
- **单个添加**:手动填写单个账户信息
### ---- 分割格式示例
```
john@gmail.com----password123----cookie_data----session_token
jane.doe@facebook.com----{"token":"fb_token_12345","user_id":"987654321","refresh_token":"refresh123"}
@twitter_user----oauth_token_value----oauth_secret_value----additional_data----more_info
simple@example.com----plaintext_password_data
complex@example.com----key1=value1----key2=value2----key3=value3----extra_field=data
```
### 默认格式示例
```
john@gmail.com
jane.doe@facebook.com
@twitter_user
simple@example.com
my_username_123
account_id_456
```
**解析规则:**
- **---- 分割格式**:只在第一个 `----` 处分割
- 第一部分唯一ID
- 第二部分:所有剩余内容作为纯数据(保持原格式)
- **默认格式**整行作为唯一ID同时也作为data
- 平台和状态从外部设置应用
## 🔧 技术特性
- **类型安全**完整的TypeScript类型定义
- **组件分离**:每个功能独立组件,易于维护
- **状态管理**使用自定义Hook管理状态
- **数据验证**:完善的数据格式验证和错误处理
- **用户体验**:加载状态、错误提示、确认对话框
## 📱 界面特色
- **简洁大气**使用shadcn/ui组件库现代化设计
- **单页面操作**:所有功能集中在一个页面,无需跳转
- **批量操作**:支持批量选择、删除、更新
- **智能筛选**:多维度筛选条件
- **详细信息**:完整的账户详情查看和编辑功能