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
parent 75900a7dcf
commit 0b95ca36f1
37 changed files with 4004 additions and 115 deletions
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -0,0 +1,10 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(pnpm dlx:*)",
+      "Bash(pnpm dev:*)",
+      "Bash(mkdir:*)"
+    ],
+    "deny": []
+  }
+}
--- a/FEATURES.md
+++ b/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组件库，现代化设计
+- **单页面操作**：所有功能集中在一个页面，无需跳转
+- **批量操作**：支持批量选择、删除、更新
+- **智能筛选**：多维度筛选条件
+- **详细信息**：完整的账户详情查看和编辑功能
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,26 +1,122 @@
@import "tailwindcss";
+@import "tw-animate-css";

-:root {
-  --background: #ffffff;
-  --foreground: #171717;
-}
+@custom-variant dark (&:is(.dark *));

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
 }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
  }
 }
-
-body {
-  background: var(--background);
-  color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
-}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { Toaster } from "@/components/ui/sonner";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        {children}
+        <Toaster />
      </body>
    </html>
  );
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,103 +1,11 @@
-import Image from "next/image";
+"use client";
+
+import { AccountsManager } from "@/components/accounts-manager";

 export default function Home() {
  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
+    <div className="min-h-screen bg-background">
+      <AccountsManager />
    </div>
  );
 }
--- a/components.json
+++ b/components.json
@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}
--- a/components/accounts-manager.tsx
+++ b/components/accounts-manager.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { useState } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Account } from '@/lib/types';
+import { useAccounts } from '@/lib/hooks/use-accounts';
+
+// 组件导入
+import { StatsCards } from './accounts/stats-cards';
+import { AccountFilters } from './accounts/account-filters';
+import { BatchOperations } from './accounts/batch-operations';
+import { AccountUpload } from './accounts/account-upload';
+import { AccountTable } from './accounts/account-table';
+import { AccountDetails } from './accounts/account-details';
+
+export function AccountsManager() {
+  const {
+    accounts,
+    stats,
+    loading,
+    selectedIds,
+    pagination,
+    filters,
+    fetchAccounts,
+    fetchStats,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+    handleSelectAll,
+    handleSelectOne,
+    handleBatchDelete,
+    handleBatchUpdate,
+    handleUploadAccounts,
+    setSelectedIds
+  } = useAccounts();
+
+  // 账户详情状态
+  const [detailsDialog, setDetailsDialog] = useState(false);
+  const [detailsMode, setDetailsMode] = useState<'view' | 'edit'>('view');
+  const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
+
+  // 处理查看详情
+  const handleViewAccount = (account: Account) => {
+    setSelectedAccount(account);
+    setDetailsMode('view');
+    setDetailsDialog(true);
+  };
+
+  // 处理编辑账户
+  const handleEditAccount = (account: Account) => {
+    setSelectedAccount(account);
+    setDetailsMode('edit');
+    setDetailsDialog(true);
+  };
+
+  // 处理删除单个账户
+  const handleDeleteAccount = async (account: Account) => {
+    if (!confirm('确认删除此账户？')) return;
+    
+    try {
+      // 设置选中的账户ID
+      setSelectedIds([account.id]);
+      // 执行删除
+      await handleBatchDelete();
+    } catch (error) {
+      console.error('Failed to delete account:', error);
+    }
+  };
+
+  // 处理保存编辑
+  const handleSaveAccount = async (account: Account) => {
+    try {
+      console.log('开始保存账户:', account);
+      
+      // 构建payload，将null/undefined转换为空字符串
+      const payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>> = {};
+      
+      if (account.status !== null && account.status !== undefined) {
+        payload.status = account.status;
+      }
+      if (account.ownerId !== null && account.ownerId !== undefined) {
+        payload.ownerId = account.ownerId;
+      }
+      if (account.notes !== null && account.notes !== undefined) {
+        payload.notes = account.notes || '';  // 将null转换为空字符串
+      }
+      if (account.platform !== null && account.platform !== undefined) {
+        payload.platform = account.platform;
+      }
+      
+      console.log('更新payload:', payload);
+      console.log('账户ID:', account.id);
+      
+      if (Object.keys(payload).length === 0) {
+        console.log('没有有效的字段需要更新');
+        return;
+      }
+      
+      // 直接传递账户ID数组，避免状态竞态条件
+      await handleBatchUpdate(payload, [account.id]);
+      
+      console.log('账户保存完成');
+    } catch (error) {
+      console.error('Failed to save account:', error);
+    }
+  };
+
+  return (
+    <div className="flex flex-col">
+      <div className="container mx-auto p-6 flex flex-col">
+        {/* 页面标题 */}
+        <div className="flex justify-between items-center mb-6">
+          <div>
+            <h1 className="text-3xl font-bold tracking-tight">账户管理系统</h1>
+            <p className="text-muted-foreground">轻量化账户管理平台</p>
+          </div>
+          <AccountUpload onUpload={handleUploadAccounts} stats={stats} />
+        </div>
+
+        {/* 统计卡片 */}
+        <div className="mb-6">
+          <StatsCards stats={stats} loading={loading} />
+        </div>
+
+        {/* 账户管理区域 */}
+        <Card className="flex flex-col">
+          <CardHeader className="pb-4">
+            <CardTitle>账户列表</CardTitle>
+            <CardDescription>管理和查看所有账户信息</CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col space-y-4">
+            {/* 筛选条件 */}
+            <AccountFilters
+              filters={filters}
+              stats={stats}
+              onFilterChange={handleFilterChange}
+            />
+
+            {/* 批量操作 */}
+            <BatchOperations
+              selectedCount={selectedIds.length}
+              selectedAccounts={accounts.filter(account => selectedIds.includes(account.id))}
+              stats={stats}
+              onBatchUpdate={handleBatchUpdate}
+              onBatchDelete={handleBatchDelete}
+            />
+
+            {/* 账户表格 - 移除高度限制 */}
+            <div className="">
+              <AccountTable
+                accounts={accounts}
+                loading={loading}
+                selectedIds={selectedIds}
+                pagination={pagination}
+                onSelectAll={handleSelectAll}
+                onSelectOne={handleSelectOne}
+                onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
+                onRefresh={fetchAccounts}
+                onView={handleViewAccount}
+                onEdit={handleEditAccount}
+                onDelete={handleDeleteAccount}
+              />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* 账户详情对话框 */}
+      <AccountDetails
+        account={selectedAccount}
+        open={detailsDialog}
+        mode={detailsMode}
+        stats={stats}
+        onOpenChange={setDetailsDialog}
+        onSave={handleSaveAccount}
+        onDelete={handleDeleteAccount}
+      />
+    </div>
+  );
+}
--- a/components/accounts/account-details.tsx
+++ b/components/accounts/account-details.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { Account, StatsOverview } from '@/lib/types';
+import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
+
+interface AccountDetailsProps {
+  account: Account | null;
+  open: boolean;
+  mode: 'view' | 'edit';
+  stats: StatsOverview | null;
+  onOpenChange: (open: boolean) => void;
+  onSave?: (account: Account) => Promise<void>;
+  onDelete?: (account: Account) => Promise<void>;
+}
+
+export function AccountDetails({ 
+  account, 
+  open, 
+  mode, 
+  stats,
+  onOpenChange, 
+  onSave,
+  onDelete 
+}: AccountDetailsProps) {
+  const [editData, setEditData] = useState<Partial<Account>>({});
+  const [loading, setLoading] = useState(false);
+
+  const isEditing = mode === 'edit';
+
+
+  const handleSave = async () => {
+    if (!account || !onSave) return;
+    
+    setLoading(true);
+    try {
+      const updatedAccount = { ...account, ...editData };
+      await onSave(updatedAccount);
+      onOpenChange(false);
+      setEditData({});
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!account || !onDelete) return;
+    
+    if (!confirm('确认删除此账户？')) return;
+    
+    setLoading(true);
+    try {
+      await onDelete(account);
+      onOpenChange(false);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'available':
+        return <Badge variant="default" className="bg-green-500">可用</Badge>;
+      case 'locked':
+        return <Badge variant="secondary">已锁定</Badge>;
+      case 'banned':
+        return <Badge variant="destructive">已封禁</Badge>;
+      default:
+        return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const formatData = (data: string) => {
+    try {
+      const parsed = JSON.parse(data);
+      return JSON.stringify(parsed, null, 2);
+    } catch {
+      return data;
+    }
+  };
+
+  if (!account) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>
+            {isEditing ? '编辑账户' : '账户详情'}
+          </DialogTitle>
+          <DialogDescription>
+            账户ID: {account.id}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm font-medium">平台</label>
+              {isEditing ? (
+                <PlatformSelector
+                  value={editData.platform ?? account.platform}
+                  onValueChange={(value) => setEditData({...editData, platform: value})}
+                  stats={stats}
+                  placeholder="选择平台"
+                  inputPlaceholder="或直接输入平台名称"
+                />
+              ) : (
+                <div className="p-2 bg-muted rounded">{account.platform}</div>
+              )}
+            </div>
+            
+            <div>
+              <label className="text-sm font-medium">自定义ID</label>
+              {isEditing ? (
+                <Input
+                  value={editData.customId ?? account.customId}
+                  onChange={(e) => setEditData({...editData, customId: e.target.value})}
+                />
+              ) : (
+                <div className="p-2 bg-muted rounded font-mono">{account.customId}</div>
+              )}
+            </div>
+          </div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <label className="text-sm font-medium">所有者ID</label>
+              {isEditing ? (
+                <OwnerSelector
+                  value={editData.ownerId ?? account.ownerId}
+                  onValueChange={(value) => setEditData({...editData, ownerId: value})}
+                  stats={stats}
+                  placeholder="选择所有者"
+                  inputPlaceholder="或直接输入所有者ID"
+                />
+              ) : (
+                <div className="p-2 bg-muted rounded">{account.ownerId}</div>
+              )}
+            </div>
+            
+            <div>
+              <label className="text-sm font-medium">状态</label>
+              {isEditing ? (
+                <StatusSelector
+                  value={editData.status ?? account.status}
+                  onValueChange={(value) => setEditData({...editData, status: value})}
+                  stats={stats}
+                  placeholder="选择状态"
+                  inputPlaceholder="或直接输入状态"
+                />
+              ) : (
+                <div className="p-2">{getStatusBadge(account.status)}</div>
+              )}
+            </div>
+          </div>
+          
+          <div>
+            <label className="text-sm font-medium">账户数据</label>
+            {isEditing ? (
+              <Textarea
+                value={editData.data ?? account.data}
+                onChange={(e) => setEditData({...editData, data: e.target.value})}
+                className="min-h-[120px] font-mono text-sm"
+              />
+            ) : (
+              <pre className="p-3 bg-muted rounded text-sm font-mono whitespace-pre-wrap break-all max-h-[200px] overflow-y-auto">
+                {formatData(account.data)}
+              </pre>
+            )}
+          </div>
+          
+          <div>
+            <label className="text-sm font-medium">备注</label>
+            {isEditing ? (
+              <Textarea
+                value={editData.notes ?? account.notes ?? ''}
+                onChange={(e) => setEditData({...editData, notes: e.target.value})}
+                placeholder="输入备注..."
+              />
+            ) : (
+              <div className="p-2 bg-muted rounded min-h-[40px]">
+                {account.notes || '无备注'}
+              </div>
+            )}
+          </div>
+          
+          {!isEditing && (
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-muted-foreground">
+              <div>
+                <label className="font-medium">创建时间</label>
+                <div>{new Date(account.createdAt).toLocaleString('zh-CN')}</div>
+              </div>
+              <div>
+                <label className="font-medium">更新时间</label>
+                <div>{new Date(account.updatedAt).toLocaleString('zh-CN')}</div>
+              </div>
+              {account.lockedAt && (
+                <div className="col-span-full md:col-span-2">
+                  <label className="font-medium">锁定时间</label>
+                  <div>{new Date(account.lockedAt).toLocaleString('zh-CN')}</div>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+        
+        <DialogFooter>
+          <Button 
+            variant="outline" 
+            onClick={() => onOpenChange(false)}
+            disabled={loading}
+          >
+            {isEditing ? '取消' : '关闭'}
+          </Button>
+          
+          {isEditing ? (
+            <Button 
+              onClick={handleSave}
+              disabled={loading}
+            >
+              {loading ? '保存中...' : '保存'}
+            </Button>
+          ) : (
+            <div className="space-x-2">
+              {onDelete && (
+                <Button 
+                  variant="destructive"
+                  onClick={handleDelete}
+                  disabled={loading}
+                >
+                  {loading ? '删除中...' : '删除'}
+                </Button>
+              )}
+            </div>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/components/accounts/account-filters.tsx
+++ b/components/accounts/account-filters.tsx
@@ -0,0 +1,78 @@
+"use client";
+
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Search } from 'lucide-react';
+import { StatsOverview } from '@/lib/types';
+
+interface AccountFiltersProps {
+  filters: {
+    platform: string;
+    status: string[];
+    ownerId: string;
+    search: string;
+  };
+  stats: StatsOverview | null;
+  onFilterChange: (key: string, value: any) => void;
+}
+
+export function AccountFilters({ filters, stats, onFilterChange }: AccountFiltersProps) {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <div className="flex items-center space-x-2">
+        <Search className="h-4 w-4" />
+        <Input
+          placeholder="搜索账户..."
+          value={filters.search}
+          onChange={(e) => onFilterChange('search', e.target.value)}
+          className="w-[200px]"
+        />
+      </div>
+      
+      <Select 
+        value={filters.platform || 'all'} 
+        onValueChange={(value) => onFilterChange('platform', value === 'all' ? '' : value)}
+      >
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="选择平台" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">所有平台</SelectItem>
+          {stats && Object.keys(stats.platformSummary).map(platform => (
+            <SelectItem key={platform} value={platform}>{platform}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      
+      <Select 
+        value={filters.ownerId || 'all'} 
+        onValueChange={(value) => onFilterChange('ownerId', value === 'all' ? '' : value)}
+      >
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="选择所有者" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">所有所有者</SelectItem>
+          {stats && Object.keys(stats.ownerSummary).map(owner => (
+            <SelectItem key={owner} value={owner}>{owner}</SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      
+      <Select 
+        value={filters.status.length > 0 ? filters.status[0] : 'all'} 
+        onValueChange={(value) => onFilterChange('status', value === 'all' ? [] : [value])}
+      >
+        <SelectTrigger className="w-[150px]">
+          <SelectValue placeholder="选择状态" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">所有状态</SelectItem>
+          <SelectItem value="available">可用</SelectItem>
+          <SelectItem value="locked">已锁定</SelectItem>
+          <SelectItem value="banned">已封禁</SelectItem>
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}
--- a/components/accounts/account-table.tsx
+++ b/components/accounts/account-table.tsx
@@ -0,0 +1,241 @@
+"use client";
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Checkbox } from '@/components/ui/checkbox';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { ChevronLeft, ChevronRight, Eye, Edit, Trash2, RefreshCw } from 'lucide-react';
+import { Account } from '@/lib/types';
+
+interface AccountTableProps {
+  accounts: Account[];
+  loading: boolean;
+  selectedIds: number[];
+  pagination: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+  };
+  onSelectAll: (checked: boolean) => void;
+  onSelectOne: (id: number, checked: boolean) => void;
+  onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
+  onRefresh: () => void;
+  onView?: (account: Account) => void;
+  onEdit?: (account: Account) => void;
+  onDelete?: (account: Account) => void;
+}
+
+export function AccountTable({
+  accounts,
+  loading,
+  selectedIds,
+  pagination,
+  onSelectAll,
+  onSelectOne,
+  onPageChange,
+  onPageSizeChange,
+  onRefresh,
+  onView,
+  onEdit,
+  onDelete
+}: AccountTableProps) {
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'available':
+        return <Badge variant="default" className="bg-green-500">可用</Badge>;
+      case 'locked':
+        return <Badge variant="secondary">已锁定</Badge>;
+      case 'banned':
+        return <Badge variant="destructive">已封禁</Badge>;
+      default:
+        return <Badge variant="outline">{status}</Badge>;
+    }
+  };
+
+  const renderPagination = () => {
+    return (
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center space-x-4">
+          <div className="text-sm text-muted-foreground">
+            显示 {(pagination.page - 1) * pagination.pageSize + 1} - {Math.min(pagination.page * pagination.pageSize, pagination.total)} 共 {pagination.total} 条
+          </div>
+          <div className="flex items-center space-x-2">
+            <span className="text-sm text-muted-foreground">每页显示</span>
+            <Select value={pagination.pageSize.toString()} onValueChange={(value) => onPageSizeChange(Number(value))}>
+              <SelectTrigger className="w-26">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="20">20</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+                <SelectItem value="1000">1000</SelectItem>
+                <SelectItem value="100000">100000</SelectItem>
+              </SelectContent>
+            </Select>
+            <span className="text-sm text-muted-foreground">条</span>
+          </div>
+        </div>
+        {pagination.totalPages > 1 && (
+          <div className="flex items-center space-x-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(pagination.page - 1)}
+              disabled={pagination.page <= 1}
+            >
+              <ChevronLeft className="h-4 w-4" />
+              上一页
+            </Button>
+            <div className="flex items-center space-x-1">
+              {Array.from({ length: Math.min(5, pagination.totalPages) }, (_, i) => {
+                let pageNum;
+                if (pagination.totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (pagination.page <= 3) {
+                  pageNum = i + 1;
+                } else if (pagination.page >= pagination.totalPages - 2) {
+                  pageNum = pagination.totalPages - 4 + i;
+                } else {
+                  pageNum = pagination.page - 2 + i;
+                }
+                
+                return (
+                  <Button
+                    key={pageNum}
+                    variant={pageNum === pagination.page ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => onPageChange(pageNum)}
+                  >
+                    {pageNum}
+                  </Button>
+                );
+              })}
+            </div>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => onPageChange(pagination.page + 1)}
+              disabled={pagination.page >= pagination.totalPages}
+            >
+              下一页
+              <ChevronRight className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col">
+      {/* 分页器 - 移到顶部 */}
+      {renderPagination()}
+      
+      {/* 表格区域 - 直接使用原生table确保sticky正常工作 */}
+      <div className="border rounded-lg max-h-[600px] overflow-auto">
+        <table className="w-full caption-bottom text-sm">
+          <thead className="sticky top-0 bg-background z-20 border-b shadow-sm">
+            <tr className="hover:bg-muted/50 border-b transition-colors">
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap w-12">
+                <Checkbox
+                  checked={selectedIds.length === accounts.length && accounts.length > 0}
+                  onCheckedChange={onSelectAll}
+                />
+              </th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">ID</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">平台</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">自定义ID</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">所有者</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">状态</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">备注</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap">创建时间</th>
+              <th className="text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap w-[120px]">
+                <div className="flex items-center justify-between">
+                  <span>操作</span>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    onClick={onRefresh}
+                    disabled={loading}
+                    className="h-6 w-6 p-0"
+                  >
+                    <RefreshCw className={`h-3 w-3 ${loading ? 'animate-spin' : ''}`} />
+                  </Button>
+                </div>
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr className="hover:bg-muted/50 border-b transition-colors">
+                <td colSpan={9} className="p-2 align-middle text-center py-8">
+                  加载中...
+                </td>
+              </tr>
+            ) : accounts.length === 0 ? (
+              <tr className="hover:bg-muted/50 border-b transition-colors">
+                <td colSpan={9} className="p-2 align-middle text-center py-8">
+                  暂无数据
+                </td>
+              </tr>
+            ) : (
+              accounts.map((account) => (
+                <tr key={account.id} className="hover:bg-muted/50 border-b transition-colors">
+                  <td className="p-2 align-middle w-12">
+                    <Checkbox
+                      checked={selectedIds.includes(account.id)}
+                      onCheckedChange={(checked) => onSelectOne(account.id, checked as boolean)}
+                    />
+                  </td>
+                  <td className="p-2 align-middle font-mono">{account.id}</td>
+                  <td className="p-2 align-middle">{account.platform}</td>
+                  <td className="p-2 align-middle font-mono max-w-[150px] truncate">{account.customId}</td>
+                  <td className="p-2 align-middle">{account.ownerId}</td>
+                  <td className="p-2 align-middle">{getStatusBadge(account.status)}</td>
+                  <td className="p-2 align-middle max-w-[200px] truncate">{account.notes || '-'}</td>
+                  <td className="p-2 align-middle text-sm text-muted-foreground">
+                    {new Date(account.createdAt).toLocaleDateString('zh-CN')}
+                  </td>
+                  <td className="p-2 align-middle w-[120px]">
+                    <div className="flex items-center space-x-1">
+                      {onView && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onView(account)}
+                        >
+                          <Eye className="h-3 w-3" />
+                        </Button>
+                      )}
+                      {onEdit && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onEdit(account)}
+                        >
+                          <Edit className="h-3 w-3" />
+                        </Button>
+                      )}
+                      {onDelete && (
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => onDelete(account)}
+                        >
+                          <Trash2 className="h-3 w-3" />
+                        </Button>
+                      )}
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
--- a/components/accounts/account-upload.tsx
+++ b/components/accounts/account-upload.tsx
@@ -0,0 +1,299 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Upload, Plus, FileText } from 'lucide-react';
+import { ScriptUploadItem, StatsOverview } from '@/lib/types';
+import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
+
+interface AccountUploadProps {
+  onUpload: (accounts: ScriptUploadItem[], ownerId: string) => Promise<void>;
+  stats?: StatsOverview | null;
+}
+
+export function AccountUpload({ onUpload, stats }: AccountUploadProps) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [ownerId, setOwnerId] = useState('');
+  
+  // 文本上传
+  const [textData, setTextData] = useState('');
+  const [defaultStatus, setDefaultStatus] = useState('available');
+  const [defaultPlatform, setDefaultPlatform] = useState('');
+  
+  // 单个添加
+  const [singleAccount, setSingleAccount] = useState({
+    customId: '',
+    data: ''
+  });
+
+  const parseTextData = (text: string): ScriptUploadItem[] => {
+    const lines = text.trim().split('\n').filter(line => line.trim());
+    const accounts: ScriptUploadItem[] = [];
+    
+    for (const line of lines) {
+      try {
+        // 支持多种格式
+        if (line.includes('----')) {
+          // ---- 分隔格式：customId----data（data中可能包含更多的----）
+          const firstSeparatorIndex = line.indexOf('----');
+          if (firstSeparatorIndex > 0) {
+            const customId = line.substring(0, firstSeparatorIndex).trim();
+            const data = line.substring(firstSeparatorIndex + 4).trim(); // 跳过第一个----
+            
+            accounts.push({
+              platform: defaultPlatform,
+              customId,
+              data,
+              status: defaultStatus
+            });
+          }
+        } else if (line.includes('\t')) {
+          // 制表符分隔：platform\tcustomId\tdata\tstatus
+          const parts = line.split('\t');
+          if (parts.length >= 3) {
+            accounts.push({
+              platform: parts[0].trim(),
+              customId: parts[1].trim(),
+              data: parts[2].trim(),
+              status: parts[3]?.trim() || defaultStatus
+            });
+          }
+        } else if (line.includes(',')) {
+          // 逗号分隔：platform,customId,data,status
+          const parts = line.split(',');
+          if (parts.length >= 3) {
+            accounts.push({
+              platform: parts[0].trim(),
+              customId: parts[1].trim(),
+              data: parts[2].trim(),
+              status: parts[3]?.trim() || defaultStatus
+            });
+          }
+        } else if (line.startsWith('{') && line.endsWith('}')) {
+          // JSON格式
+          const parsed = JSON.parse(line);
+          if (parsed.platform && parsed.customId && parsed.data) {
+            accounts.push({
+              platform: parsed.platform,
+              customId: parsed.customId,
+              data: typeof parsed.data === 'string' ? parsed.data : JSON.stringify(parsed.data),
+              status: parsed.status || defaultStatus
+            });
+          }
+        } else {
+          // 默认格式：整行作为ID和data
+          const trimmedLine = line.trim();
+          if (trimmedLine) {
+            accounts.push({
+              platform: defaultPlatform,
+              customId: trimmedLine,
+              data: trimmedLine,
+              status: defaultStatus
+            });
+          }
+        }
+      } catch (error) {
+        console.warn('Failed to parse line:', line, error);
+      }
+    }
+    
+    return accounts;
+  };
+
+  const handleTextUpload = async () => {
+    if (!ownerId.trim()) {
+      alert('请输入所有者ID');
+      return;
+    }
+    
+    if (!textData.trim()) {
+      alert('请输入账户数据');
+      return;
+    }
+    
+    const accounts = parseTextData(textData);
+    if (accounts.length === 0) {
+      alert('未解析到有效的账户数据');
+      return;
+    }
+    
+    setLoading(true);
+    try {
+      await onUpload(accounts, ownerId);
+      setOpen(false);
+      setTextData('');
+      setOwnerId('');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSingleUpload = async () => {
+    if (!ownerId.trim()) {
+      alert('请输入所有者ID');
+      return;
+    }
+    
+    if (!singleAccount.customId || !singleAccount.data) {
+      alert('请填写完整的账户信息');
+      return;
+    }
+    
+    setLoading(true);
+    try {
+      const accountToUpload = {
+        platform: defaultPlatform,
+        customId: singleAccount.customId,
+        data: singleAccount.data,
+        status: defaultStatus
+      };
+      await onUpload([accountToUpload], ownerId);
+      setOpen(false);
+      setSingleAccount({ customId: '', data: '' });
+      setOwnerId('');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>
+          <Upload className="h-4 w-4 mr-2" />
+          上传账户
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle>上传账户</DialogTitle>
+          <DialogDescription>
+            支持批量上传和单个添加账户
+          </DialogDescription>
+        </DialogHeader>
+        
+        <div className="flex-1 overflow-y-auto space-y-4 pr-2">
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            <div>
+              <label className="text-sm font-medium">所有者ID</label>
+              <OwnerSelector
+                value={ownerId}
+                onValueChange={setOwnerId}
+                stats={stats || null}
+                placeholder="选择所有者ID"
+              />
+            </div>
+            
+            <div>
+              <label className="text-sm font-medium">平台</label>
+              <PlatformSelector
+                value={defaultPlatform}
+                onValueChange={setDefaultPlatform}
+                stats={stats || null}
+                placeholder="选择平台"
+              />
+            </div>
+            
+            <div>
+              <label className="text-sm font-medium">默认状态</label>
+              <StatusSelector
+                value={defaultStatus}
+                onValueChange={setDefaultStatus}
+                stats={stats || null}
+                placeholder="选择状态"
+              />
+            </div>
+          </div>
+          
+          <Tabs defaultValue="batch" className="w-full">
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="batch">
+                <FileText className="h-4 w-4 mr-2" />
+                批量上传
+              </TabsTrigger>
+              <TabsTrigger value="single">
+                <Plus className="h-4 w-4 mr-2" />
+                单个添加
+              </TabsTrigger>
+            </TabsList>
+            
+            <TabsContent value="batch" className="space-y-4">
+              <div>
+                <label className="text-sm font-medium">账户数据</label>
+                <Textarea
+                  placeholder={`支持以下格式：
+
+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
+
+2. 默认格式（一行一个）：
+user1@gmail.com
+user2@facebook.com
+simple_username
+
+3. 制表符分隔：platform	customId	data	status
+4. 逗号分隔：platform,customId,data,status
+5. JSON格式：{"platform":"google","customId":"user@gmail.com","data":"..."}
+
+格式说明：
+- ---- 分割: customId----纯数据内容（第一个----后的所有内容作为data）
+- 默认格式: 整行既作为customId也作为data
+- 平台和状态: 在上方外部设置`}
+                  value={textData}
+                  onChange={(e) => setTextData(e.target.value)}
+                  className="h-[200px] max-h-[300px] font-mono text-sm resize-y overflow-y-auto"
+                />
+              </div>
+              <Button 
+                onClick={handleTextUpload} 
+                disabled={loading}
+                className="w-full"
+              >
+                {loading ? '上传中...' : '批量上传'}
+              </Button>
+            </TabsContent>
+            
+            <TabsContent value="single" className="space-y-4">
+              <div className="grid grid-cols-1 gap-4">
+                <div>
+                  <label className="text-sm font-medium">自定义ID</label>
+                  <Input
+                    placeholder="如：user@gmail.com"
+                    value={singleAccount.customId}
+                    onChange={(e) => setSingleAccount({...singleAccount, customId: e.target.value})}
+                  />
+                </div>
+              </div>
+              
+              <div>
+                <label className="text-sm font-medium">账户数据</label>
+                <Textarea
+                  placeholder='纯数据内容，如：password123----cookie=abc123----token=xyz789 或 {"username":"user@gmail.com","password":"123456","token":"abc"}'
+                  value={singleAccount.data}
+                  onChange={(e) => setSingleAccount({...singleAccount, data: e.target.value})}
+                  className="min-h-[120px]"
+                />
+              </div>
+              
+              <Button 
+                onClick={handleSingleUpload} 
+                disabled={loading}
+                className="w-full"
+              >
+                {loading ? '添加中...' : '添加账户'}
+              </Button>
+            </TabsContent>
+          </Tabs>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/components/accounts/batch-operations.tsx
+++ b/components/accounts/batch-operations.tsx
@@ -0,0 +1,200 @@
+"use client";
+
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Edit3, Trash2 } from 'lucide-react';
+import { Account, StatsOverview } from '@/lib/types';
+import { toast } from 'sonner';
+import { PlatformSelector, OwnerSelector, StatusSelector } from '@/components/shared';
+
+interface BatchOperationsProps {
+  selectedCount: number;
+  selectedAccounts: Account[];
+  stats: StatsOverview | null;
+  onBatchUpdate: (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>) => Promise<void>;
+  onBatchDelete: () => Promise<void>;
+}
+
+export function BatchOperations({ selectedCount, selectedAccounts, stats, onBatchUpdate, onBatchDelete }: BatchOperationsProps) {
+  const [updateDialog, setUpdateDialog] = useState(false);
+  const [updateData, setUpdateData] = useState({
+    status: '',
+    platform: '',
+    ownerId: '',
+    notes: ''
+  });
+  const [loading, setLoading] = useState(false);
+
+  // 计算选中账户的统计信息
+  const getSelectedStats = () => {
+    const platforms = new Set(selectedAccounts.map(account => account.platform));
+    const owners = new Set(selectedAccounts.map(account => account.ownerId));
+    
+    return {
+      platformCount: platforms.size,
+      ownerCount: owners.size,
+      platforms: Array.from(platforms).slice(0, 3), // 只显示前3个
+      owners: Array.from(owners).slice(0, 3) // 只显示前3个
+    };
+  };
+
+  const selectedStats = getSelectedStats();
+
+
+  const handleBatchUpdate = async () => {
+    const payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>> = {};
+    if (updateData.status) payload.status = updateData.status;
+    if (updateData.platform) payload.platform = updateData.platform;
+    if (updateData.ownerId) payload.ownerId = updateData.ownerId;
+    if (updateData.notes) payload.notes = updateData.notes;
+    
+    if (Object.keys(payload).length === 0) {
+      toast.warning('请至少选择一个字段进行更新');
+      return;
+    }
+    
+    setLoading(true);
+    try {
+      await onBatchUpdate(payload);
+      setUpdateDialog(false);
+      setUpdateData({ status: '', platform: '', ownerId: '', notes: '' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleBatchDelete = async () => {
+    setLoading(true);
+    try {
+      await onBatchDelete();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (selectedCount === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <div className="flex items-center space-x-2 p-3 bg-muted rounded-lg">
+        <div className="flex-1">
+          <div className="flex items-center space-x-4">
+            <span className="text-sm font-medium">已选择 {selectedCount} 个账户</span>
+            <div className="flex items-center space-x-3 text-xs text-muted-foreground">
+              <span>
+                {selectedStats.ownerCount} 个用户
+                {selectedStats.ownerCount > 0 && (
+                  <span className="ml-1">
+                    ({selectedStats.owners.join(', ')}
+                    {selectedStats.ownerCount > 3 && ` 等${selectedStats.ownerCount}个`})
+                  </span>
+                )}
+              </span>
+              <span>•</span>
+              <span>
+                {selectedStats.platformCount} 个平台
+                {selectedStats.platformCount > 0 && (
+                  <span className="ml-1">
+                    ({selectedStats.platforms.join(', ')}
+                    {selectedStats.platformCount > 3 && ` 等${selectedStats.platformCount}个`})
+                  </span>
+                )}
+              </span>
+            </div>
+          </div>
+        </div>
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setUpdateDialog(true)}
+          disabled={loading}
+        >
+          <Edit3 className="h-4 w-4 mr-1" />
+          批量更新
+        </Button>
+        <Button
+          variant="destructive"
+          size="sm"
+          onClick={handleBatchDelete}
+          disabled={loading}
+        >
+          <Trash2 className="h-4 w-4 mr-1" />
+          批量删除
+        </Button>
+      </div>
+
+      <Dialog open={updateDialog} onOpenChange={setUpdateDialog}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>批量更新账户</DialogTitle>
+            <DialogDescription>
+              将对 {selectedCount} 个账户进行批量更新操作
+            </DialogDescription>
+          </DialogHeader>
+          <div className="grid grid-cols-1 gap-6">
+            <div className="space-y-3">
+              <label className="text-sm font-medium">平台</label>
+              <PlatformSelector
+                value={updateData.platform}
+                onValueChange={(value) => setUpdateData({...updateData, platform: value})}
+                stats={stats}
+                showNoneOption={true}
+                placeholder="选择新平台（可选）"
+              />
+            </div>
+            
+            <div className="space-y-3">
+              <label className="text-sm font-medium">状态</label>
+              <StatusSelector
+                value={updateData.status}
+                onValueChange={(value) => setUpdateData({...updateData, status: value})}
+                stats={stats}
+                showNoneOption={true}
+                placeholder="选择新状态（可选）"
+              />
+            </div>
+            
+            <div className="space-y-3">
+              <label className="text-sm font-medium">所有者ID</label>
+              <OwnerSelector
+                value={updateData.ownerId}
+                onValueChange={(value) => setUpdateData({...updateData, ownerId: value})}
+                stats={stats}
+                showNoneOption={true}
+                placeholder="选择所有者（可选）"
+              />
+            </div>
+            
+            <div className="space-y-3">
+              <label className="text-sm font-medium">备注</label>
+              <Input
+                placeholder="输入新的备注（可选）"
+                value={updateData.notes}
+                onChange={(e) => setUpdateData({...updateData, notes: e.target.value})}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button 
+              variant="outline" 
+              onClick={() => setUpdateDialog(false)}
+              disabled={loading}
+            >
+              取消
+            </Button>
+            <Button 
+              onClick={handleBatchUpdate}
+              disabled={loading}
+            >
+              {loading ? '更新中...' : '确认更新'}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}
--- a/components/accounts/index.ts
+++ b/components/accounts/index.ts
@@ -0,0 +1,7 @@
+// 导出所有账户相关组件
+export { StatsCards } from './stats-cards';
+export { AccountFilters } from './account-filters';
+export { BatchOperations } from './batch-operations';
+export { AccountUpload } from './account-upload';
+export { AccountTable } from './account-table';
+export { AccountDetails } from './account-details';
--- a/components/accounts/stats-cards.tsx
+++ b/components/accounts/stats-cards.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Database, TrendingUp, Users, Activity } from 'lucide-react';
+import { StatsOverview } from '@/lib/types';
+
+interface StatsCardsProps {
+  stats: StatsOverview | null;
+  loading?: boolean;
+}
+
+export function StatsCards({ stats, loading }: StatsCardsProps) {
+  if (loading) {
+    return (
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <Card key={i}>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">加载中...</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="text-2xl font-bold">--</div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    );
+  }
+
+  if (!stats) {
+    return null;
+  }
+
+  return (
+    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">总账户数</CardTitle>
+          <Database className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{stats.totalAccounts}</div>
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">平台数量</CardTitle>
+          <TrendingUp className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{Object.keys(stats.platformSummary).length}</div>
+          <p className="text-xs text-muted-foreground">
+            {Object.entries(stats.platformSummary).slice(0, 3).map(([platform, count]) => (
+              `${platform}: ${count}`
+            )).join(', ')}
+          </p>
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">所有者数量</CardTitle>
+          <Users className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">{Object.keys(stats.ownerSummary).length}</div>
+          <p className="text-xs text-muted-foreground">
+            {Object.entries(stats.ownerSummary).slice(0, 3).map(([owner, count]) => (
+              `${owner}: ${count}`
+            )).join(', ')}
+          </p>
+        </CardContent>
+      </Card>
+      
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium">可用账户</CardTitle>
+          <Activity className="h-4 w-4 text-muted-foreground" />
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold text-green-600">
+            {stats.statusSummary.available || 0}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            已锁定: {stats.statusSummary.locked || 0} | 
+            已封禁: {stats.statusSummary.banned || 0}
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
--- a/components/shared/index.ts
+++ b/components/shared/index.ts
@@ -0,0 +1,4 @@
+export { PlatformSelector } from './platform-selector';
+export { OwnerSelector } from './owner-selector';
+export { StatusSelector } from './status-selector';
+export { StatsSelect } from './stats-select';
--- a/components/shared/owner-selector.tsx
+++ b/components/shared/owner-selector.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { StatsSelect } from './stats-select';
+import { StatsOverview } from '@/lib/types';
+import { useStatsData } from '@/lib/hooks/use-stats-data';
+
+interface OwnerSelectorProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  stats: StatsOverview | null;
+  showNoneOption?: boolean;
+  noneOptionLabel?: string;
+  placeholder?: string;
+  inputPlaceholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function OwnerSelector({
+  value,
+  onValueChange,
+  stats,
+  showNoneOption = false,
+  noneOptionLabel = "不修改",
+  placeholder = "选择所有者",
+  inputPlaceholder = "或直接输入所有者ID",
+  className,
+  disabled = false
+}: OwnerSelectorProps) {
+  const { owners } = useStatsData(stats);
+
+  return (
+    <StatsSelect
+      value={value}
+      onValueChange={onValueChange}
+      placeholder={placeholder}
+      inputPlaceholder={inputPlaceholder}
+      items={owners}
+      showNoneOption={showNoneOption}
+      noneOptionLabel={noneOptionLabel}
+      className={className}
+      disabled={disabled}
+    />
+  );
+}
--- a/components/shared/platform-selector.tsx
+++ b/components/shared/platform-selector.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { StatsSelect } from './stats-select';
+import { StatsOverview } from '@/lib/types';
+import { useStatsData } from '@/lib/hooks/use-stats-data';
+
+interface PlatformSelectorProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  stats: StatsOverview | null;
+  showNoneOption?: boolean;
+  noneOptionLabel?: string;
+  placeholder?: string;
+  inputPlaceholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function PlatformSelector({
+  value,
+  onValueChange,
+  stats,
+  showNoneOption = false,
+  noneOptionLabel = "不修改",
+  placeholder = "选择平台",
+  inputPlaceholder = "或直接输入平台名称",
+  className,
+  disabled = false
+}: PlatformSelectorProps) {
+  const { platforms } = useStatsData(stats);
+
+  return (
+    <StatsSelect
+      value={value}
+      onValueChange={onValueChange}
+      placeholder={placeholder}
+      inputPlaceholder={inputPlaceholder}
+      items={platforms}
+      showNoneOption={showNoneOption}
+      noneOptionLabel={noneOptionLabel}
+      className={className}
+      disabled={disabled}
+    />
+  );
+}
--- a/components/shared/stats-select.tsx
+++ b/components/shared/stats-select.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { StatsDataItem } from '@/lib/hooks/use-stats-data';
+
+interface StatsSelectProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  placeholder: string;
+  inputPlaceholder: string;
+  items: StatsDataItem[];
+  showNoneOption?: boolean;
+  noneOptionLabel?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function StatsSelect({
+  value,
+  onValueChange,
+  placeholder,
+  inputPlaceholder,
+  items,
+  showNoneOption = false,
+  noneOptionLabel = "不修改",
+  className,
+  disabled = false
+}: StatsSelectProps) {
+  const handleSelectChange = (selectedValue: string) => {
+    if (selectedValue === 'none') {
+      onValueChange('');
+    } else {
+      onValueChange(selectedValue);
+    }
+  };
+
+  // 检查当前值是否在选项列表中
+  const isValueInOptions = value && (
+    showNoneOption && value === '' || 
+    items.some(item => item.value === value)
+  );
+
+  // 为Select组件确定显示值
+  const selectValue = () => {
+    if (!value && showNoneOption) return 'none';
+    if (isValueInOptions) return value;
+    return undefined; // 如果值不在选项中，不设置Select的值
+  };
+
+  return (
+    <div className={`space-y-2 ${className || ''}`}>
+      <Select 
+        value={selectValue()} 
+        onValueChange={handleSelectChange}
+        disabled={disabled}
+      >
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {showNoneOption && (
+            <SelectItem value="none">{noneOptionLabel}</SelectItem>
+          )}
+          {items.map((item) => (
+            <SelectItem key={item.value} value={item.value}>
+              {item.label} ({item.count} 个账户)
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      <Input
+        placeholder={inputPlaceholder}
+        value={value}
+        onChange={(e) => onValueChange(e.target.value)}
+        disabled={disabled}
+      />
+    </div>
+  );
+}
--- a/components/shared/status-selector.tsx
+++ b/components/shared/status-selector.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { StatsSelect } from './stats-select';
+import { StatsOverview } from '@/lib/types';
+import { useStatsData } from '@/lib/hooks/use-stats-data';
+
+interface StatusSelectorProps {
+  value: string;
+  onValueChange: (value: string) => void;
+  stats: StatsOverview | null;
+  showNoneOption?: boolean;
+  noneOptionLabel?: string;
+  placeholder?: string;
+  inputPlaceholder?: string;
+  className?: string;
+  disabled?: boolean;
+}
+
+export function StatusSelector({
+  value,
+  onValueChange,
+  stats,
+  showNoneOption = false,
+  noneOptionLabel = "不修改",
+  placeholder = "选择状态",
+  inputPlaceholder = "或直接输入状态",
+  className,
+  disabled = false
+}: StatusSelectorProps) {
+  const { statuses } = useStatsData(stats);
+
+  return (
+    <StatsSelect
+      value={value}
+      onValueChange={onValueChange}
+      placeholder={placeholder}
+      inputPlaceholder={inputPlaceholder}
+      items={statuses}
+      showNoneOption={showNoneOption}
+      noneOptionLabel={noneOptionLabel}
+      className={className}
+      disabled={disabled}
+    />
+  );
+}
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
--- a/components/ui/checkbox.tsx
+++ b/components/ui/checkbox.tsx
@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }
--- a/components/ui/dialog.tsx
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,143 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}
--- a/components/ui/input.tsx
+++ b/components/ui/input.tsx
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
--- a/components/ui/select.tsx
+++ b/components/ui/select.tsx
@@ -0,0 +1,185 @@
+"use client"
+
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  size = "default",
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: "sm" | "default"
+}) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}
--- a/components/ui/sonner.tsx
+++ b/components/ui/sonner.tsx
@@ -0,0 +1,25 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
--- a/components/ui/table.tsx
+++ b/components/ui/table.tsx
@@ -0,0 +1,116 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  )
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/components/ui/textarea.tsx
+++ b/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -0,0 +1,73 @@
+import { 
+  ApiResponse, 
+  ListAccountsBody, 
+  ListAccountsResponse, 
+  BatchDeleteBody, 
+  BatchUpdateBody, 
+  StatsOverview,
+  ScriptUploadItem
+} from './types';
+
+const API_BASE_URL = 'http://localhost:3006';
+
+class ApiClient {
+  private async request<T>(
+    endpoint: string, 
+    options: RequestInit = {}
+  ): Promise<ApiResponse<T>> {
+    const url = `${API_BASE_URL}${endpoint}`;
+    
+    const response = await fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...options.headers,
+      },
+      ...options,
+    });
+
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response.json();
+  }
+
+  // 获取账户列表
+  async getAccountsList(body: ListAccountsBody): Promise<ApiResponse<ListAccountsResponse>> {
+    return this.request<ListAccountsResponse>('/web/v1/accounts/list', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+  }
+
+  // 批量删除账户
+  async batchDeleteAccounts(body: BatchDeleteBody): Promise<ApiResponse<{ deletedCount: number }>> {
+    return this.request<{ deletedCount: number }>('/web/v1/accounts/delete-batch', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+  }
+
+  // 批量更新账户
+  async batchUpdateAccounts(body: BatchUpdateBody): Promise<ApiResponse<{ updatedCount: number }>> {
+    return this.request<{ updatedCount: number }>('/web/v1/accounts/update-batch', {
+      method: 'POST',
+      body: JSON.stringify(body),
+    });
+  }
+
+  // 获取统计概览
+  async getStatsOverview(): Promise<ApiResponse<StatsOverview>> {
+    return this.request<StatsOverview>('/web/v1/stats/overview');
+  }
+
+  // 上传账户
+  async uploadAccounts(accounts: ScriptUploadItem[], ownerId: string): Promise<ApiResponse<{ processedCount: number; createdCount: number; updatedCount: number }>> {
+    return this.request<{ processedCount: number; createdCount: number; updatedCount: number }>(`/s/v1/${ownerId}/upload`, {
+      method: 'POST',
+      body: JSON.stringify(accounts),
+    });
+  }
+}
+
+export const apiClient = new ApiClient();
--- a/lib/hooks/use-accounts.ts
+++ b/lib/hooks/use-accounts.ts
@@ -0,0 +1,265 @@
+import { useState, useEffect } from 'react';
+import { 
+  Account, 
+  ListAccountsBody, 
+  ListAccountsResponse, 
+  StatsOverview, 
+  BusinessCode,
+  BatchUpdateBody,
+  BatchDeleteBody,
+  ScriptUploadItem
+} from '@/lib/types';
+import { apiClient } from '@/lib/api';
+import { toast } from 'sonner';
+
+export interface UseAccountsReturn {
+  // 数据状态
+  accounts: Account[];
+  stats: StatsOverview | null;
+  loading: boolean;
+  selectedIds: number[];
+  
+  // 分页和筛选
+  pagination: {
+    page: number;
+    pageSize: number;
+    total: number;
+    totalPages: number;
+  };
+  filters: {
+    platform: string;
+    status: string[];
+    ownerId: string;
+    search: string;
+  };
+  sort: {
+    field: keyof Account;
+    order: 'asc' | 'desc';
+  };
+  
+  // 操作方法
+  fetchAccounts: () => Promise<void>;
+  fetchStats: () => Promise<void>;
+  handleFilterChange: (key: string, value: any) => void;
+  handlePageChange: (page: number) => void;
+  handlePageSizeChange: (pageSize: number) => void;
+  handleSortChange: (field: keyof Account, order: 'asc' | 'desc') => void;
+  handleSelectAll: (checked: boolean) => void;
+  handleSelectOne: (id: number, checked: boolean) => void;
+  handleBatchDelete: () => Promise<void>;
+  handleBatchUpdate: (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>) => Promise<void>;
+  handleUploadAccounts: (accounts: ScriptUploadItem[], ownerId: string) => Promise<void>;
+  setSelectedIds: (ids: number[]) => void;
+}
+
+export function useAccounts(): UseAccountsReturn {
+  const [accounts, setAccounts] = useState<Account[]>([]);
+  const [stats, setStats] = useState<StatsOverview | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [selectedIds, setSelectedIds] = useState<number[]>([]);
+  
+  const [pagination, setPagination] = useState({
+    page: 1,
+    pageSize: 20,
+    total: 0,
+    totalPages: 0
+  });
+  
+  const [filters, setFilters] = useState({
+    platform: '',
+    status: [] as string[],
+    ownerId: '',
+    search: ''
+  });
+  
+  const [sort, setSort] = useState({
+    field: 'id' as keyof Account,
+    order: 'desc' as 'asc' | 'desc'
+  });
+
+  // 获取统计数据
+  const fetchStats = async () => {
+    try {
+      const response = await apiClient.getStatsOverview();
+      if (response.code === BusinessCode.Success && response.data) {
+        setStats(response.data);
+      }
+    } catch (error) {
+      console.error('Failed to fetch stats:', error);
+      toast.error('获取统计数据失败');
+    }
+  };
+
+  // 获取账户列表
+  const fetchAccounts = async () => {
+    setLoading(true);
+    try {
+      const body: ListAccountsBody = {
+        filters,
+        pagination: {
+          page: pagination.page,
+          pageSize: pagination.pageSize
+        },
+        sort
+      };
+      
+      const response = await apiClient.getAccountsList(body);
+      if (response.code === BusinessCode.Success && response.data) {
+        setAccounts(response.data.list);
+        setPagination(prev => ({
+          ...prev,
+          total: response.data.pagination.total,
+          totalPages: response.data.pagination.totalPages
+        }));
+      }
+    } catch (error) {
+      console.error('Failed to fetch accounts:', error);
+      toast.error('获取账户列表失败');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 处理筛选变化
+  const handleFilterChange = (key: string, value: any) => {
+    setFilters({ ...filters, [key]: value });
+    setPagination({ ...pagination, page: 1 });
+  };
+
+  // 处理分页
+  const handlePageChange = (page: number) => {
+    setPagination({ ...pagination, page });
+  };
+
+  // 处理每页大小变化
+  const handlePageSizeChange = (pageSize: number) => {
+    setPagination({ ...pagination, pageSize, page: 1 });
+  };
+
+  // 处理排序
+  const handleSortChange = (field: keyof Account, order: 'asc' | 'desc') => {
+    setSort({ field, order });
+  };
+
+  // 处理全选
+  const handleSelectAll = (checked: boolean) => {
+    if (checked) {
+      setSelectedIds(accounts.map(account => account.id));
+    } else {
+      setSelectedIds([]);
+    }
+  };
+
+  // 处理单选
+  const handleSelectOne = (id: number, checked: boolean) => {
+    if (checked) {
+      setSelectedIds([...selectedIds, id]);
+    } else {
+      setSelectedIds(selectedIds.filter(selectedId => selectedId !== id));
+    }
+  };
+
+  // 批量删除
+  const handleBatchDelete = async () => {
+    if (selectedIds.length === 0) return;
+    
+    if (!confirm(`确认删除 ${selectedIds.length} 个账户？`)) return;
+    
+    try {
+      const response = await apiClient.batchDeleteAccounts({ ids: selectedIds });
+      if (response.code === BusinessCode.Success) {
+        setSelectedIds([]);
+        await fetchAccounts();
+        await fetchStats();
+        toast.success(`成功删除 ${response.data?.deletedCount || 0} 个账户`);
+      }
+    } catch (error) {
+      console.error('Failed to delete accounts:', error);
+      toast.error('删除失败，请检查网络连接后重试');
+    }
+  };
+
+  // 批量更新
+  const handleBatchUpdate = async (payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>, targetIds?: number[]) => {
+    const idsToUpdate = targetIds || selectedIds;
+    console.log('handleBatchUpdate 被调用, idsToUpdate:', idsToUpdate);
+    console.log('payload:', payload);
+    
+    if (idsToUpdate.length === 0) {
+      console.log('idsToUpdate为空，直接返回');
+      return;
+    }
+    
+    if (Object.keys(payload).length === 0) {
+      toast.warning('请至少选择一个字段进行更新');
+      return;
+    }
+    
+    try {
+      console.log('发送批量更新请求...');
+      const response = await apiClient.batchUpdateAccounts({ ids: idsToUpdate, payload });
+      console.log('批量更新响应:', response);
+      
+      if (response.code === BusinessCode.Success) {
+        if (!targetIds) {
+          // 只有在没有指定目标ID时才清空选中状态（批量操作时）
+          setSelectedIds([]);
+        }
+        await fetchAccounts();
+        await fetchStats();
+        toast.success(`成功更新 ${response.data?.updatedCount || 0} 个账户`);
+      }
+    } catch (error) {
+      console.error('Failed to update accounts:', error);
+      toast.error('更新失败，请检查网络连接后重试');
+    }
+  };
+
+  // 上传账户
+  const handleUploadAccounts = async (uploadAccounts: ScriptUploadItem[], ownerId: string) => {
+    try {
+      const response = await apiClient.uploadAccounts(uploadAccounts, ownerId);
+      if (response.code === BusinessCode.Success) {
+        await fetchAccounts();
+        await fetchStats();
+        toast.success(`成功处理 ${response.data?.processedCount || 0} 个账户 (${response.data?.createdCount || 0} 个新建, ${response.data?.updatedCount || 0} 个更新)`);
+        return;
+      }
+    } catch (error) {
+      console.error('Failed to upload accounts:', error);
+      toast.error('上传失败，请检查网络连接后重试');
+    }
+  };
+
+  // 初始化数据
+  useEffect(() => {
+    fetchAccounts();
+  }, [filters, pagination.page, pagination.pageSize, sort]);
+
+  // 只在开始时获取统计数据
+  useEffect(() => {
+    fetchStats();
+  }, []);
+
+  return {
+    accounts,
+    stats,
+    loading,
+    selectedIds,
+    pagination,
+    filters,
+    sort,
+    fetchAccounts,
+    fetchStats,
+    handleFilterChange,
+    handlePageChange,
+    handlePageSizeChange,
+    handleSortChange,
+    handleSelectAll,
+    handleSelectOne,
+    handleBatchDelete,
+    handleBatchUpdate,
+    handleUploadAccounts,
+    setSelectedIds
+  };
+}
--- a/lib/hooks/use-stats-data.ts
+++ b/lib/hooks/use-stats-data.ts
@@ -0,0 +1,59 @@
+"use client";
+
+import { useMemo } from 'react';
+import { StatsOverview } from '@/lib/types';
+
+export interface StatsDataItem {
+  value: string;
+  label: string;
+  count: number;
+}
+
+export function useStatsData(stats: StatsOverview | null) {
+  const platforms = useMemo(() => {
+    if (!stats?.platformSummary) return [];
+    return Object.entries(stats.platformSummary).map(([platform, count]) => ({
+      value: platform,
+      label: platform,
+      count
+    }));
+  }, [stats?.platformSummary]);
+
+  const owners = useMemo(() => {
+    if (!stats?.ownerSummary) return [];
+    return Object.entries(stats.ownerSummary).map(([owner, count]) => ({
+      value: owner,
+      label: owner,
+      count
+    }));
+  }, [stats?.ownerSummary]);
+
+  const statuses = useMemo(() => {
+    if (!stats?.statusSummary) return [];
+    return Object.entries(stats.statusSummary).map(([status, count]) => ({
+      value: status,
+      label: getStatusLabel(status),
+      count
+    }));
+  }, [stats?.statusSummary]);
+
+  return {
+    platforms,
+    owners,
+    statuses,
+    hasData: Boolean(stats)
+  };
+}
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case 'available':
+      return '可用';
+    case 'locked':
+      return '已锁定';
+    case 'banned':
+      return '已封禁';
+    default:
+      return status;
+  }
+}
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -0,0 +1,101 @@
+// 业务状态码
+export enum BusinessCode {
+  Success = 0,
+  NoResource = 1001,
+  InvalidParams = 2001,
+  ResourceConflict = 3001,
+  PermissionDenied = 4001,
+  BusinessError = 5001,
+}
+
+// 通用响应格式
+export interface ApiResponse<T> {
+  code: BusinessCode;
+  message: string;
+  data: T | null;
+}
+
+// 账户类型
+export interface Account {
+  id: number;
+  ownerId: string;
+  platform: string;
+  customId: string;
+  data: string;
+  status: string;
+  notes?: string;
+  lockedAt?: Date | null;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+// 分页结果
+export interface PaginationResult {
+  page: number;
+  pageSize: number;
+  total: number;
+  totalPages: number;
+}
+
+// 脚本获取响应
+export type ScriptAcquireResponse = Pick<Account, 'id' | 'customId' | 'data'>[];
+
+// 脚本上传项
+export interface ScriptUploadItem {
+  platform: string;
+  customId: string;
+  data: string;
+  status?: string;
+}
+
+// 账户列表筛选条件
+export interface ListAccountsFilters {
+  platform?: string;
+  status?: string[];
+  ownerId?: string;
+  search?: string;
+}
+
+// 账户列表请求体
+export interface ListAccountsBody {
+  filters: ListAccountsFilters;
+  pagination: {
+    page: number;
+    pageSize: number;
+  };
+  sort: {
+    field: keyof Account;
+    order: 'asc' | 'desc';
+  };
+}
+
+// 账户列表响应
+export interface ListAccountsResponse {
+  list: Account[];
+  pagination: PaginationResult;
+}
+
+// 批量删除请求体
+export interface BatchDeleteBody {
+  ids: number[];
+}
+
+// 批量更新请求体
+export interface BatchUpdateBody {
+  ids: number[];
+  payload: Partial<Pick<Account, 'status' | 'ownerId' | 'notes' | 'platform'>>;
+}
+
+// 统计概览
+export interface StatsOverview {
+  totalAccounts: number;
+  platformSummary: Record<string, number>;
+  ownerSummary: Record<string, number>;
+  statusSummary: Record<string, number>;
+  detailedBreakdown: {
+    platform: string;
+    ownerId: string;
+    status: string;
+    count: number;
+  }[];
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/package.json
+++ b/package.json
@@ -8,16 +8,28 @@
    "start": "next start"
  },
  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.544.0",
+    "next": "15.5.3",
+    "next-themes": "^0.4.6",
    "react": "19.1.0",
    "react-dom": "19.1.0",
-    "next": "15.5.3"
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@tailwindcss/postcss": "^4",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
-    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4"
+    "tailwindcss": "^4",
+    "tw-animate-css": "^1.3.8",
+    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml