0b95ca36f1
- 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>
4.3 KiB
4.3 KiB
账户管理系统 - 更新说明
🚀 新增功能
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
- 第一个字段为唯一ID（customId）
- 数据部分可以包含任意格式和多个
----分隔符 - 平台和状态统一在外部设置
其他支持格式
- 制表符分隔：
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 # 导出文件
🎯 使用方法
上传账户
- 点击页面右上角的"上传账户"按钮
- 选择或输入所有者ID
- 设置平台（应用到所有账户）
- 设置默认状态（应用到所有账户）
- 选择上传方式：
- 批量上传：粘贴格式化的账户数据
- 单个添加：手动填写单个账户信息
---- 分割格式示例
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组件库，现代化设计
- 单页面操作：所有功能集中在一个页面，无需跳转
- 批量操作：支持批量选择、删除、更新
- 智能筛选：多维度筛选条件
- 详细信息：完整的账户详情查看和编辑功能