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>

FEATURES.md

@@ -0,0 +1,120 @@
+# 账户管理系统 - 更新说明
+
+## 🚀 新增功能
+
+### 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组件库，现代化设计
+- **单页面操作**：所有功能集中在一个页面，无需跳转
+- **批量操作**：支持批量选择、删除、更新
+- **智能筛选**：多维度筛选条件
+- **详细信息**：完整的账户详情查看和编辑功能