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>

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+  );
+}

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>
+    </>
+  );
+}

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';

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>
+  );
+}