 0b95ca36f1
			
		
	
	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>
		
			
				
	
	
		
			120 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
			
		
		
	
	
			120 lines
		
	
	
		
			4.3 KiB
		
	
	
	
		
			Markdown
		
	
	
	
	
	
| # 账户管理系统 - 更新说明
 | ||
| 
 | ||
| ## 🚀 新增功能
 | ||
| 
 | ||
| ### 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               # 导出文件
 | ||
| ```
 | ||
| 
 | ||
| ## 🎯 使用方法
 | ||
| 
 | ||
| ### 上传账户
 | ||
| 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组件库,现代化设计
 | ||
| - **单页面操作**:所有功能集中在一个页面,无需跳转
 | ||
| - **批量操作**:支持批量选择、删除、更新
 | ||
| - **智能筛选**:多维度筛选条件
 | ||
| - **详细信息**:完整的账户详情查看和编辑功能 |